cartodb/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hover effects to _toggle.scss

Browse Source
This commit is contained in:
rubenmoya 2017-11-21 10:34:45 +01:00
parent ed3e5c0e3c
commit 7b082df82f
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/scss/cdb-components/forms/_toggle.scss
View File

@ -30,21 +30,32 @@
.CDB-Toggle { .CDB-Toggle {
position: absolute; position: absolute;
z-index: 1;
width: $baseSize * 4; width: $baseSize * 4;
height: $baseSize * 2; height: $baseSize * 2;
opacity: 0; opacity: 0;
z-index: 1;
&:hover {
+ .CDB-ToggleFace {
background: $cHintTextHover;
}
&:checked + .CDB-ToggleFace {
background: $cHighlightHover;
}
}
+ .CDB-ToggleFace { + .CDB-ToggleFace {
@include transition(background, 300ms);
position: relative; position: relative;
width: $baseSize * 4; width: $baseSize * 4;
height: $baseSize * 2; height: $baseSize * 2;
margin: 0 2px; margin: 0 2px;
transition: background 300ms;
border-radius: 50px; border-radius: 50px;
background: $cHintText; background: $cHintText;
&::before { &::before {
content: '';
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
@ -53,7 +64,6 @@
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
} }
} }
@ -69,4 +79,5 @@
.Toggle .is-disabled { .Toggle .is-disabled {
opacity: 0.24; opacity: 0.24;
pointer-events: none;
} }

4
src/scss/cdb-variables/_colors.scss
View File

@ -3,7 +3,7 @@
// General // General
$cBlue: #1785FB; $cBlue: #1785FB;
$cBlueHover: #0f6cd2; $cBlueHover: #0F6CD2;
$cBlack: #000; $cBlack: #000;
$cWhite: #FFF; $cWhite: #FFF;
$cMainBg: #2E3C43; $cMainBg: #2E3C43;
@ -23,9 +23,11 @@ $cMainText: #2E3C43;
$cSecondaryText: #636D72; $cSecondaryText: #636D72;
$cAltText: #979EA1; $cAltText: #979EA1;
$cHintText: #CBCED0; $cHintText: #CBCED0;
$cHintTextHover: #9C9FA1;
//Others //Others
$cHighlight: #9DE0AD; $cHighlight: #9DE0AD;
$cHighlightHover: #82BB90;
$cAlert: #F19243; $cAlert: #F19243;
$cPublic: #9BC63B; $cPublic: #9BC63B;
$cLink: #FEB100; $cLink: #FEB100;