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

Add hover effects to button using box-shadow

Browse Source
This commit is contained in:
rubenmoya 2017-11-20 11:28:13 +01:00
parent af9d25b729
commit e126810b21
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/scss/cdb-components/_buttons.scss
View File

@ -162,11 +162,10 @@ Layout Component:
.CDB-Button { .CDB-Button {
@include transition(background, 300ms); @include transition(background, 300ms);
position: relative; position: relative;
box-sizing: border-box;
padding: $baseSize $baseSize + 12; padding: $baseSize $baseSize + 12;
border: 1px solid transparent;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
cursor: pointer; cursor: pointer;
box-sizing: border-box;
.CDB-Button-Text { .CDB-Button-Text {
@ -235,9 +234,7 @@ Layout Component:
background: $cBlue; background: $cBlue;
color: $cWhite; color: $cWhite;
&:hover { &:hover,
background: darken($cBlue, 8%);
}
&:active { &:active {
background: darken($cBlue, 16%); background: darken($cBlue, 16%);
} }
@ -265,9 +262,7 @@ Layout Component:
background: $cAlert; background: $cAlert;
color: $cWhite; color: $cWhite;
&:hover { &:hover,
background: darken($cAlert, 8%);
}
&:active { &:active {
background: darken($cAlert, 16%); background: darken($cAlert, 16%);
} }
@ -288,9 +283,7 @@ Layout Component:
background: $cError; background: $cError;
color: $cWhite; color: $cWhite;
&:hover { &:hover,
background: darken($cError, 8%);
}
&:active { &:active {
background: darken($cError, 16%); background: darken($cError, 16%);
} }
@ -411,12 +404,14 @@ Layout Component:
.CDB-Button--secondary { .CDB-Button--secondary {
border: 1px solid $cBlue; box-shadow: inset 0 0 0 1px $cBlue;
color: $cBlue; color: $cBlue;
&:hover { &:hover {
background: rgba($cBlue, 0.08); background: rgba($cBlue, 0.08);
box-shadow: inset 0 0 0 2px darken($cBlue, 16%);
} }
&:active { &:active {
background: $cBlue; background: $cBlue;
color: $cWhite; color: $cWhite;
@ -425,7 +420,9 @@ Layout Component:
&.is-disabled { &.is-disabled {
&:hover { &:hover {
background: transparent; background: transparent;
box-shadow: inset 0 0 0 1px $cBlue;
} }
&:active { &:active {
background: transparent; background: transparent;
} }
@ -453,12 +450,14 @@ Layout Component:
.CDB-Button--white { .CDB-Button--white {
border: 1px solid $cWhite; box-shadow: inset 0 0 0 1px $cWhite;
color: $cWhite; color: $cWhite;
&:hover { &:hover {
background: rgba($cWhite, 0.08); background: rgba($cWhite, 0.08);
box-shadow: inset 0 0 0 2px darken($cWhite, 16%);
} }
&:active { &:active {
background: rgba($cMainBg, 0.08); background: rgba($cMainBg, 0.08);
color: $cWhite; color: $cWhite;
@ -466,9 +465,12 @@ Layout Component:
&.is-disabled { &.is-disabled {
@include opacity(0.24); @include opacity(0.24);
&:hover { &:hover {
background: transparent; background: transparent;
box-shadow: inset 0 0 0 1px $cWhite;
} }
&:active { &:active {
background: transparent; background: transparent;
color: $cWhite; color: $cWhite;