This commit is contained in:
Sivan 2020-02-12 13:50:28 +08:00
parent 5b1d05b7a8
commit c4b2af6adc
2 changed files with 86 additions and 15 deletions

View file

@ -139,6 +139,71 @@ a {
text-align: right;
}
.switch-list {
display: inline-flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.switch-list li {
margin-inline-end: -1px;
}
.switch-list input {
display: none;
}
.switch-list label {
position: relative;
display: block;
box-sizing: border-box;
height: 24px;
padding: 0;
padding-inline-start: 10px;
padding-inline-end: 10px;
border: 1px solid #c2c2c2;
border-block-start-color: #c9c9c9;
border-block-end-color: #a6a6a6;
font-size: 14px;
line-height: 22px;
text-align: center;
background-color: #fff;
color: #000;
user-select: none;
}
.switch-list label:active {
background-color: #f0f0f0;
}
.switch-list li:first-child label {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.switch-list li:last-child label {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.switch-list input:checked + label {
z-index: 1;
border-color: #98989e;
border-block-start-color: #a5a5ab;
border-block-end-color: #7e7e84;
background-image: linear-gradient(to bottom, #b1b1b6, #929297);
color: rgba(255, 255, 255, 1);
}
.switch-list input:checked + label:active {
border-color: #65656b;
border-block-start-color: #808086;
border-block-end-color: #414147;
background-image: linear-gradient(to bottom, #919196, #57575c);
color: rgba(255, 255, 255, 0.95);
}
/** 演示区块 **/
.demo__main {
margin-block-start: 24px;