Sha256: 62e9a15b77a47917151334d732103475a13a560f3c45030fefa2e3b1403e025c
Contents?: true
Size: 1.49 KB
Versions: 8
Compression:
Stored size: 1.49 KB
Contents
$custom-switch-width: 2.25rem;
$custom-switch-height: 1.25rem;
$custom-switch-padding: 1px;
.custom-switch {
user-select: none;
cursor: default;
display: inline-flex;
align-items: center;
margin: 0;
}
.custom-switch-input {
position: absolute;
z-index: -1;
opacity: 0;
}
.custom-switches-stacked {
display: flex;
flex-direction: column;
.custom-switch {
margin-bottom: .5rem;
}
}
.custom-switch-indicator {
display: inline-block;
height: $custom-switch-height;
width: $custom-switch-width;
background: $gray-200;
border-radius: 50px;
position: relative;
vertical-align: bottom;
border: 1px solid $border-color;
transition: .3s border-color, .3s background-color;
&:before {
content: '';
position: absolute;
height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
top: $custom-switch-padding;
left: $custom-switch-padding;
background: #fff;
border-radius: 50%;
transition: .3s left;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.custom-switch-input:checked ~ & {
background: $primary;
&:before {
left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding})
}
}
.custom-switch-input:focus ~ & {
box-shadow: $input-btn-focus-box-shadow;
border-color: $primary;
}
}
.custom-switch-description {
margin-left: .5rem;
color: $text-muted-dark;
transition: .3s color;
.custom-switch-input:checked ~ & {
color: $body-color;
}
}
Version data entries
8 entries across 8 versions & 2 rubygems