D
Size: a a a
D
A
YK
RD
vg
vg
RD
RD
vg
RD
vg
vg
RD
AK
SФ
AC
I
slider.component.scss
@import 'variables';
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 51px;
height: 27px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color_icon-primary);
transition: 0.4s;
}
.slider:before {
position: absolute;
content: '';
height: 27px;
width: 27px;
left: 0px;
bottom: 4px;
top: 0;
bottom: 0;
margin: auto 0;
transition: 0.4s;
background: var(--color_font_primary);
}
.mat-slide-toggle-bar {
position: relative;
width: 51px;
height: 27px;
flex-shrink: 0;
border-radius: 13.5px;
}
input:checked + .slider {
background-color: var(--color_icon-primary);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--color_icon-primary);
}
input:checked + .slider:before {
transform: translateX(24px);
background: var(--color_font_primary);
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
variables.scss
только 40 строк переменных, ничего больше и все равно выходит за рамки, кидает варнинг по этому компоненту