Update switch color

This commit is contained in:
EliverLara
2019-03-15 14:28:46 -06:00
parent d17ee45646
commit 0046a05332
3 changed files with 16 additions and 19 deletions

View File

@@ -4304,11 +4304,11 @@ switch {
font-weight: bold; font-weight: bold;
outline-offset: -4px; outline-offset: -4px;
transition: all 200ms ease-in; transition: all 200ms ease-in;
border: none; border: 1px solid rgba(12, 14, 21, 0.8);
border-radius: 14px; border-radius: 14px;
color: transparent; color: transparent;
padding: 2.3px 0px; padding: 2.3px 0px;
background: linear-gradient(to right, #859398, #859398); } background: linear-gradient(to right, #1E2233, #1E2233); }
switch:disabled { switch:disabled {
background-color: #171a26; } background-color: #171a26; }
switch:backdrop { switch:backdrop {
@@ -4317,11 +4317,11 @@ switch {
switch:backdrop:disabled { switch:backdrop:disabled {
background-color: #171a26; } background-color: #171a26; }
switch:active, switch:checked { switch:active, switch:checked {
background: linear-gradient(to right, #ff9200, #fadd00); } background: linear-gradient(to right, #f7005a, #fadd00); }
switch:active slider, switch:checked slider { switch:active slider, switch:checked slider {
background: #fff; } background: #fff; }
switch:active:backdrop, switch:checked:backdrop { switch:active:backdrop, switch:checked:backdrop {
background: linear-gradient(to right, #e68300, #e1c600); } background: linear-gradient(to right, #de0051, #e1c600); }
switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop { switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
box-shadow: none; box-shadow: none;
background-color: rgba(24, 27, 40, 0.9); background-color: rgba(24, 27, 40, 0.9);
@@ -4333,7 +4333,7 @@ switch {
min-height: 12px; min-height: 12px;
border-radius: 100%; border-radius: 100%;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #bcc4c7; } background-color: #151723; }
switch slider:backdrop { switch slider:backdrop {
padding: 2px; padding: 2px;
box-shadow: none; box-shadow: none;

View File

@@ -4304,11 +4304,11 @@ switch {
font-weight: bold; font-weight: bold;
outline-offset: -4px; outline-offset: -4px;
transition: all 200ms ease-in; transition: all 200ms ease-in;
border: none; border: 1px solid rgba(12, 14, 21, 0.8);
border-radius: 14px; border-radius: 14px;
color: transparent; color: transparent;
padding: 2.3px 0px; padding: 2.3px 0px;
background: linear-gradient(to right, #859398, #859398); } background: linear-gradient(to right, #1E2233, #1E2233); }
switch:disabled { switch:disabled {
background-color: #171a26; } background-color: #171a26; }
switch:backdrop { switch:backdrop {
@@ -4317,11 +4317,11 @@ switch {
switch:backdrop:disabled { switch:backdrop:disabled {
background-color: #171a26; } background-color: #171a26; }
switch:active, switch:checked { switch:active, switch:checked {
background: linear-gradient(to right, #ff9200, #fadd00); } background: linear-gradient(to right, #f7005a, #fadd00); }
switch:active slider, switch:checked slider { switch:active slider, switch:checked slider {
background: #fff; } background: #fff; }
switch:active:backdrop, switch:checked:backdrop { switch:active:backdrop, switch:checked:backdrop {
background: linear-gradient(to right, #e68300, #e1c600); } background: linear-gradient(to right, #de0051, #e1c600); }
switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop { switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
box-shadow: none; box-shadow: none;
background-color: rgba(24, 27, 40, 0.9); background-color: rgba(24, 27, 40, 0.9);
@@ -4333,7 +4333,7 @@ switch {
min-height: 12px; min-height: 12px;
border-radius: 100%; border-radius: 100%;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #bcc4c7; } background-color: #151723; }
switch slider:backdrop { switch slider:backdrop {
padding: 2px; padding: 2px;
box-shadow: none; box-shadow: none;

View File

@@ -7,12 +7,11 @@ switch {
outline-offset: -4px; outline-offset: -4px;
transition: all 200ms ease-in; transition: all 200ms ease-in;
border: none; border: 1px solid $borders_color;
border-radius: 14px; border-radius: 14px;
color: transparent; color: transparent;
padding: 2.3px 0px; padding: 2.3px 0px;
background: linear-gradient(to right, #1E2233, #1E2233);
background: linear-gradient(to right, #859398, #859398);
// border: 1px solid rgba(170, 170, 170, 0.4); // border: 1px solid rgba(170, 170, 170, 0.4);
&:disabled { &:disabled {
background-color: $insensitive_bg_color; background-color: $insensitive_bg_color;
@@ -28,14 +27,12 @@ switch {
&:active, &:active,
&:checked { &:checked {
// border: 1px solid $teal; background: linear-gradient(to right, #f7005a, #fadd00);
background: linear-gradient(to right, #ff9200, #fadd00);
slider{ slider{
background: #fff; background: #fff;
} }
&:backdrop { &:backdrop {
//border: 1px solid $teal; background: linear-gradient(to right, darken(#f7005a, 5%), darken(#fadd00, 5%));
background: linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
slider { slider {
&:backdrop { &:backdrop {
box-shadow:none; box-shadow:none;
@@ -48,14 +45,14 @@ switch {
// Handle // Handle
slider { slider {
padding:2px; padding: 2px;
margin: 0 2.3px; margin: 0 2.3px;
min-width: 12px; min-width: 12px;
min-height: 12px; min-height: 12px;
border-radius: 100%; border-radius: 100%;
transition: $button_transition; transition: $button_transition;
background-color: lighten(#859398, 20%); background-color: darken(#1E2233, 5%);
&:backdrop { &:backdrop {
padding:2px; padding:2px;