scinote-web/app/assets/stylesheets/shared_styles/elements/toggles.scss

115 lines
2.3 KiB
SCSS
Raw Normal View History

2019-12-04 22:17:59 +08:00
// scss-lint:disable SelectorDepth QualifyingElement NestingDepth
.sci-toggle-checkbox-container {
display: inline-block;
height: 16px;
position: relative;
width: 24px;
}
2019-12-01 23:13:25 +08:00
input[type="checkbox"].sci-toggle-checkbox {
cursor: pointer;
flex-shrink: 0;
height: 16px;
margin: 0;
opacity: 0;
position: relative;
width: 24px;
z-index: 2;
+ .sci-toggle-checkbox-label {
animation-timing-function: $timing-function-sharp;
background: $color-alto;
border-radius: 8px;
display: inline-block;
flex-shrink: 0;
font-weight: normal;
2019-12-01 23:13:25 +08:00
height: 16px;
left: 0;
position: absolute;
top: 0;
2019-12-01 23:13:25 +08:00
transition: .2s;
width: 24px;
&::before {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border-radius: 7px;
content: "";
height: 12px;
left: 0;
margin: 2px;
position: absolute;
transition: .2s;
width: 12px;
}
}
&.hidden + .sci-toggle-checkbox-label {
display: none;
}
&:checked + .sci-toggle-checkbox-label {
background: $brand-primary;
&::before {
left: 8px;
}
}
&:disabled + .sci-toggle-checkbox-label {
&::before {
background: $color-silver-chalice;
}
}
}
.sci-toggles-group {
align-items: center;
display: flex;
position: relative;
input[type="radio"].sci-toggle-item {
cursor: pointer;
height: 36px;
margin: 0;
opacity: 0;
position: relative;
width: 48px;
z-index: 2;
+ .sci-toggle-item-label {
animation-timing-function: $timing-function-sharp;
background: $color-white;
border: $border-default;
border-left-color: transparent;
color: $color-black;
2019-12-01 23:13:25 +08:00
display: inline-block;
font-weight: normal;
2019-12-01 23:13:25 +08:00
height: 36px;
line-height: 34px;
margin-left: -48px;
position: relative;
text-align: center;
transition: .2s;
width: 48px;
&:first-of-type {
border-left-color: $color-silver-chalice;
border-radius: $border-radius-default 0 0 $border-radius-default;
}
2019-12-04 22:17:59 +08:00
2019-12-01 23:13:25 +08:00
&:last-of-type {
border-radius: 0 $border-radius-default $border-radius-default 0;
}
}
&:checked + .sci-toggle-item-label {
background: $brand-primary;
border: 1px solid $brand-primary;
color: $color-white;
}
}
2019-12-04 22:17:59 +08:00
}