fleet/frontend/components/forms/fields/Slider/_styles.scss

50 lines
901 B
SCSS
Raw Normal View History

.fleet-slider {
transition: background-color 150ms ease-in-out;
background-color: $ui-fleet-black-50;
2016-12-16 15:54:49 +00:00
border-radius: 12px;
cursor: pointer;
display: inline-block;
height: 20px;
min-width: 35px;
2016-12-16 15:54:49 +00:00
position: relative;
width: 35px;
2016-12-16 15:54:49 +00:00
&:hover {
background-color: $ui-fleet-black-50;
2016-12-16 15:54:49 +00:00
}
&--active {
background-color: $core-vibrant-blue;
2016-12-16 15:54:49 +00:00
&:hover {
background-color: $core-vibrant-blue;
2016-12-16 15:54:49 +00:00
}
}
&__wrapper {
display: flex;
align-items: center;
2016-12-27 15:32:30 +00:00
height: 40px;
2016-12-16 15:54:49 +00:00
}
&__dot {
@include size(16px);
@include position(absolute, 2px null null 2px);
transition: left 150ms ease-in-out;
2016-12-16 15:54:49 +00:00
border-radius: 50%;
background-color: $core-white;
2016-12-16 15:54:49 +00:00
&--active {
left: 17px;
2016-12-16 15:54:49 +00:00
}
}
&__label {
font-size: $x-small;
font-weight: $regular;
2016-12-16 15:54:49 +00:00
text-align: left;
vertical-align: text-bottom;
margin-left: $pad-small;
2016-12-16 15:54:49 +00:00
}
}