diff options
Diffstat (limited to 'ui/app/css/itcss/components/buttons.scss')
-rw-r--r-- | ui/app/css/itcss/components/buttons.scss | 84 |
1 files changed, 70 insertions, 14 deletions
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8df8829f2..04e1ed96e 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,6 +2,76 @@ Buttons */ +.btn-primary, +.btn-primary--lg, +.btn-secondary, +.btn-secondary--lg { + background: $white; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + transition: border-color .3s ease; + padding: 0 20px; + min-width: 140px; + text-transform: uppercase; +} + +.btn-primary, +.btn-primary--lg { + color: $curious-blue; + border: 2px solid $spindle; + + &:active { + background: $zumthor; + border-color: $curious-blue; + } + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-secondary, +.btn-secondary--lg { + color: $scorpion; + border: 2px solid $dusty-gray; + + &:active { + background: $gallery; + border-color: $dusty-gray; + } + + &:hover { + border-color: $scorpion; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-primary, .btn-secondary { + height: 44px; +} + +.btn-primary--lg, .btn-secondary--lg { + height: 54px; +} + .btn-green { background-color: #02c9b1; // TODO: reusable color in colors.css } @@ -130,20 +200,6 @@ button.btn-thin { font-size: 13px; } -.btn-secondary { - border: 1px solid #979797; - border-radius: 2px; - background-color: $white; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; - - &[disabled] { - background-color: $white !important; - opacity: .5; - } -} - .btn-tertiary { border: 1px solid transparent; border-radius: 2px; |