Commit 74be79a5 authored by Nikolay Gromov's avatar Nikolay Gromov

Добавил описание переключателя в код

parent 52ec8f46
...@@ -29,10 +29,12 @@ ...@@ -29,10 +29,12 @@
position: absolute; position: absolute;
opacity: 0; opacity: 0;
// Оболочка, в которой двигается контрол
& + .field-toggler__name-text:before { & + .field-toggler__name-text:before {
content: ''; content: '';
width: 34px; width: 34px;
height: 20px; height: 20px;
// border-radius: 10px; // возможность выбтро скруглить
position: absolute; position: absolute;
top: 0.7em; top: 0.7em;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -42,6 +44,7 @@ ...@@ -42,6 +44,7 @@
transition: background-color 0.3s; transition: background-color 0.3s;
} }
// Двигающийся контрол
& + .field-toggler__name-text:after { & + .field-toggler__name-text:after {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -50,16 +53,19 @@ ...@@ -50,16 +53,19 @@
left: 2px; left: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;
// border-radius: 8px; // возможность выбтро скруглить
background: #fff; background: #fff;
border: 1px solid @border-color; border: 1px solid @border-color;
transition: left 0.3s; transition: left 0.3s;
} }
// Состояние оболочки, когда переключатель включён
&:checked + .field-toggler__name-text:before { &:checked + .field-toggler__name-text:before {
background-color: @gray-light; background-color: @gray-light;
border: 1px solid @gray; border: 1px solid @gray;
} }
// Состояние контрола, когда переключатель включён
&:checked + .field-toggler__name-text:after { &:checked + .field-toggler__name-text:after {
left: 16px; left: 16px;
border: 1px solid @gray; border: 1px solid @gray;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment