Sha256: ab26188e9b345d25957d205edb281d66c4b95f281e3b0cf68f81100215b339d6
Contents?: true
Size: 1.71 KB
Versions: 51
Compression:
Stored size: 1.71 KB
Contents
@import "mixins/components.toggles";
.c-toggle {
@include grid;
@include grid--center;
width: auto;
cursor: pointer;
user-select: none;
input:not(:checked) + .c-toggle__track {
background-color: $toggle-track-unchecked-background-color;
.c-toggle__handle {
transform: translateZ(0);
}
}
input:disabled + .c-toggle__track {
background-color: $toggle-track-disabled-background-color;
cursor: not-allowed;
.c-toggle__handle {
background-color: $toggle-handle-disabled-background-color;
cursor: not-allowed;
}
}
}
.c-toggle--brand .c-toggle__track {
@include toggle__track--background-color($toggle-track-brand-background-color);
}
.c-toggle--info .c-toggle__track {
@include toggle__track--background-color($toggle-track-info-background-color);
}
.c-toggle--warning .c-toggle__track {
@include toggle__track--background-color($toggle-track-warning-background-color);
}
.c-toggle--success .c-toggle__track {
@include toggle__track--background-color($toggle-track-success-background-color);
}
.c-toggle--error .c-toggle__track {
@include toggle__track--background-color($toggle-track-error-background-color);
}
.c-toggle input {
display: none;
}
.c-toggle__track {
@include grid__cell;
@include grid__cell--width-fixed;
@include toggle__track--background-color;
position: relative;
width: 1em;
height: .5em;
margin: $toggle-margin;
border-radius: $toggle-track-border-radius;
}
.c-toggle__handle {
position: absolute;
top: -.25em;
left: 0;
width: 1em;
height: 1em;
transform: translateX(100%);
border-radius: $toggle-handle-border-radius;
background-color: $toggle-handle-background-color;
box-shadow: $toggle-handle-box-shadow;
}
Version data entries
51 entries across 51 versions & 3 rubygems