diff options
Diffstat (limited to 'components/button/_button.scss')
-rw-r--r-- | components/button/_button.scss | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/components/button/_button.scss b/components/button/_button.scss deleted file mode 100644 index 3c21a45..0000000 --- a/components/button/_button.scss +++ /dev/null @@ -1,168 +0,0 @@ -.sdc-button { - order:1; - @include box-sizing; - display: inline-flex; - align-items: center; - justify-content: center; - flex-direction: row; - outline: none; - border-radius: 2px; - padding: 0 12px; - height: 36px; - line-height: 36px; - width: 120px; - min-width: 90px; - cursor: pointer; - text-align: center; - text-transform: uppercase; - @include body-1; - - &:disabled { - cursor: default; - } - - // Primary button - &.sdc-button__primary { - border: 1px solid transparent; - background-color: $blue; - color: $white; - - &:not(:disabled) { - &:hover, &:active { - background-color: $light-blue; - } - &:focus:not(:active) { - border: 1px 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 $blue; - background-color: transparent; - color: $blue; - - &:not(:disabled) { - &:hover, &:active { - background-color: $light-blue; - color:$white; - } - &:focus:not(:active) { - color: $light-blue; - box-shadow: inset 0px 0px 0px 0px $dark-blue, 0px 0px 0px 1px $blue; - &:hover { - color: $white; - } - } - } - - &: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 { - flex-direction: row-reverse; - .svg-icon { - margin-left: 15px; - } - } - - &.sdc-icon-left { - flex-direction: row; - .svg-icon { - margin-right: 15px; - } - } - - svg { - display: inline-block; - vertical-align: middle; - } -} -.sdc-button__wrapper { - display: inline-flex; -} -.sdc-button__spinner { - padding-top: 6px; - margin:0 2px; - &.left { - order:2; - } -} |