diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts index d8c1da4e345..6644810afbe 100644 --- a/public/app/core/components/switch.ts +++ b/public/app/core/components/switch.ts @@ -9,7 +9,7 @@ const template = `
- +
`; diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index b875b2f2d45..f97d655f4a8 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -93,7 +93,7 @@ gf-form-switch[disabled] { display: inline-block; width: 60px; height: 34px; - border-radius: 34px; + background: black; input { opacity: 0; @@ -106,28 +106,29 @@ gf-form-switch[disabled] { .gf-form-switch__slider { position: absolute; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: $dark-3; + top: 8px; + left: 14px; + right: 10px; + bottom: 10px; + background: #1d1d1d; transition: 0.4s; + border-radius: 34px; &::before { position: absolute; content: ''; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background: $dark-4; + height: 16px; + width: 16px; + left: 2px; + bottom: 0px; + background: #333333; transition: 0.4s; border-radius: 50%; } } input:checked + .gf-form-switch__slider { - background-color: $dark-5; + background: linear-gradient(90deg, $orange, $red); } /* input:focus + .gf-form-switch__slider { */ @@ -135,6 +136,6 @@ input:checked + .gf-form-switch__slider { /* } */ input:checked + .gf-form-switch__slider:before { - transform: translateX(26px); - background: $blue; + transform: translateX(20px); + box-shadow: 0 0 5px black; }