diff --git a/src/scss/cdb-components/_buttons.scss b/src/scss/cdb-components/_buttons.scss index 77f5170..690530e 100644 --- a/src/scss/cdb-components/_buttons.scss +++ b/src/scss/cdb-components/_buttons.scss @@ -171,26 +171,28 @@ Layout Component: .CDB-Button-Text { display: block; } + &.is-disabled { - cursor: default; opacity: 0.24; + cursor: default; } } .CDB-Button--loading { - .CDB-Button-loader { position: absolute; + z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transform-origin: 50%; opacity: 0; - z-index: 10; } + .CDB-Button-Text { @include transition(all 600ms); } + &.is-loading { cursor: default; @@ -199,6 +201,7 @@ Layout Component: animation-duration: 600ms; animation-fill-mode: forwards; } + .CDB-Button-Text { opacity: 0; } @@ -240,18 +243,14 @@ Layout Component: } &.is-loading { - &:hover { - background: $cBlue; - } + &:hover, &:active { background: $cBlue; } } &.is-disabled { - &:hover { - background: $cBlue; - } + &:hover, &:active { background: $cBlue; } @@ -268,9 +267,7 @@ Layout Component: } &.is-disabled { - &:hover { - background: $cAlert; - } + &:hover, &:active { background: $cAlert; } @@ -289,9 +286,7 @@ Layout Component: } &.is-disabled { - &:hover { - background: $cError; - } + &:hover, &:active { background: $cError; } @@ -431,24 +426,18 @@ Layout Component: &.is-loading { cursor: default; - &:hover { - background: none; - color: $cBlue; - } + &:hover, &:active { background: none; color: $cBlue; } } + &--background { + background-color: $cWhite; + } } - -.CDB-Button--secondary--background { - background-color: $cWhite; -} - - .CDB-Button--white { box-shadow: inset 0 0 0 1px $cWhite; color: $cWhite; @@ -480,14 +469,10 @@ Layout Component: &.is-loading { cursor: default; - &:hover { - background: none; - color: $cWhite; - } + &:hover, &:active { background: none; color: $cWhite; } } - }