diff options
Diffstat (limited to 'src/style/scss/themes/1802/button.scss')
-rw-r--r-- | src/style/scss/themes/1802/button.scss | 148 |
1 files changed, 0 insertions, 148 deletions
diff --git a/src/style/scss/themes/1802/button.scss b/src/style/scss/themes/1802/button.scss deleted file mode 100644 index 05d91d5..0000000 --- a/src/style/scss/themes/1802/button.scss +++ /dev/null @@ -1,148 +0,0 @@ -.sdc-button { - @include box-sizing; - display: inline-block; - - outline: none; - border-radius: 2px; - padding: 0 16px; - - height: 32px; - line-height: 32px; - width: 120px; - min-width: 90px; - - cursor: pointer; - text-align: center; - @include body-1; - &:disabled { - cursor: default; - } - - // Primary button - &.sdc-button__primary { - border: none; - background-color: $blue; - color: $white; - - &:not(:disabled) { - &:hover, &:active { - background-color: $light-blue; - } - &:focus:not(:active) { - border: 0.5px solid $white; - background-color: $light-blue; - box-shadow: 0px 0px 0px 1px $light-blue; - } - } - - &:disabled{ - background: $blue-disabled; - } - } - - // Secondary button - &.sdc-button__secondary { - border: 1px solid $light-gray; - background-color: transparent; - color: $text-black; - - &:not(:disabled) { - &:hover, &:active { - background-color: transparent; - color:$text-black; - border: 1px solid $gray; - } - &:focus:not(:active) { - color: $text-black; - box-shadow: inset 0px 0px 0px 0px $light-gray, 0px 0px 0px 1px $gray; - } - } - - &:disabled { - color: $blue-disabled; - border-color: $blue-disabled; - } - } - - // Link button - &.sdc-button__link { - background-color: transparent; - color: $blue; - fill: $blue; - border: none; - - &:not(:disabled) { - &:hover, &:active { - color: $light-blue; - } - &:focus:not(:active) { - border: 1px solid $dark-blue; - color: $light-blue; - } - } - - &:disabled{ - color: $blue-disabled; - } - } - - - // alert button - &.sdc-button__alert { - border: none; - background-color: $red; - color: $white; - - &:not(:disabled) { - &:hover, &:active { - background-color: $light-red; - } - &:focus:not(:active) { - border: 0.5px solid $white; - background-color: $light-red; - box-shadow: 0px 0px 0px 1px $light-red; - } - } - - &:disabled{ - background: $disabled-red; - } - } - - - /*** Sizes ***/ - &.btn-large{ - width: $btn-large; - } - - &.btn-medium{ - width: $btn-medium; - } - - &.btn-small{ - width: $btn-small; - } - - &.btn-x-small{ - width: $btn-extra-small; - } - - &.btn-default{ - width: $btn-default; - } - - /*** Buttons with icons ***/ - .sdc-icon-right{ - margin-left: 15px; - } - - .sdc-icon-left{ - margin-right: 15px; - } - - svg { - display: inline-block; - vertical-align: middle; - } -} - |