Switch: made minor styling tweaks to switch to align to 4px grid (#16593)

This commit is contained in:
Patrick O'Carroll 2019-04-15 16:12:03 +02:00 committed by Torkel Ödegaard
parent d4bb92a3c5
commit 5f1b2691a3

View File

@ -25,7 +25,7 @@ gf-form-switch[disabled] {
.gf-form-switch { .gf-form-switch {
display: flex; display: flex;
position: relative; position: relative;
width: 60px; width: 56px;
height: $input-height; height: $input-height;
background: $switch-bg; background: $switch-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
@ -52,7 +52,7 @@ gf-form-switch[disabled] {
background: $switch-slider-off-bg; background: $switch-slider-off-bg;
border-radius: 8px; border-radius: 8px;
height: 16px; height: 16px;
width: 29px; width: 32px;
display: block; display: block;
position: relative; position: relative;
@ -61,7 +61,7 @@ gf-form-switch[disabled] {
content: ''; content: '';
height: 12px; height: 12px;
width: 12px; width: 12px;
left: 1px; left: 2px;
top: 2px; top: 2px;
background: $switch-slider-color; background: $switch-slider-color;
transition: 0.4s; transition: 0.4s;
@ -75,7 +75,7 @@ input:checked + .gf-form-switch__slider {
} }
input:checked + .gf-form-switch__slider::before { input:checked + .gf-form-switch__slider::before {
transform: translateX(14px); transform: translateX(16px);
} }
.gf-form-checkbox { .gf-form-checkbox {