Sha256: 5ae9b1b6cd01d9151672e3366aae18585a49f7fa2384815f5bbd90b8397fefc5
Contents?: true
Size: 1.78 KB
Versions: 3
Compression:
Stored size: 1.78 KB
Contents
@import 'mixins/objects.grid';
.c-toggle {
@include grid;
@include grid--center;
width: auto;
user-select: none;
input:not(:checked) + .c-toggle__track {
background-color: var(--color-dark);
.c-toggle__handle {
transform: translateZ(0);
}
}
input:disabled + .c-toggle__track {
cursor: not-allowed;
opacity: var(--disabled-opacity);
.c-toggle__handle {
cursor: not-allowed;
opacity: var(--disabled-opacity);
}
}
input:active + .c-toggle__track,
input:focus + .c-toggle__track {
border-color: var(--border-color-focus);
box-shadow: var(--box-shadow-focus);
.c-toggle__handle {
border-color: var(--border-color-focus);
box-shadow: var(--box-shadow-focus), 0 1px 3px 1px var(--color-default);
}
}
}
.c-toggle--brand .c-toggle__track {
--toggle-track-color: var(--color-brand);
}
.c-toggle--info .c-toggle__track {
--toggle-track-color: var(--color-info);
}
.c-toggle--warning .c-toggle__track {
--toggle-track-color: var(--color-warning);
}
.c-toggle--success .c-toggle__track {
--toggle-track-color: var(--color-success);
}
.c-toggle--error .c-toggle__track {
--toggle-track-color: var(--color-error);
}
.c-toggle input {
position: absolute;
opacity: 0;
}
.c-toggle__track {
--toggle-track-color: var(--color-default);
@include grid__cell;
@include grid__cell--width-fixed;
position: relative;
width: 1em;
height: 0.5em;
margin: 0 0.5em;
background-color: var(--toggle-track-color);
border-radius: var(--border-radius-rounded);
}
.c-toggle__handle {
position: absolute;
top: -0.25em;
left: 0;
width: 1em;
height: 1em;
background-color: #fff;
border-radius: var(--border-radius-rounded);
box-shadow: 0 1px 3px 1px var(--color-default);
transform: translateX(100%);
}
Version data entries
3 entries across 3 versions & 1 rubygems