diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-03-26 13:19:42 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-03-26 13:58:04 +0800 |
commit | cfa2592d78b31ea3c5d056bf1344cfd5d5353f16 (patch) | |
tree | 6af1ada572dfc6d7a9a9b0c69a7a3ecfc834b3d9 /ui/app/css/itcss/components/buttons.scss | |
parent | dc78594c3aac80150dbe7eecd05e05eeffa6da02 (diff) | |
download | tangerine-wallet-browser-cfa2592d78b31ea3c5d056bf1344cfd5d5353f16.tar.gz tangerine-wallet-browser-cfa2592d78b31ea3c5d056bf1344cfd5d5353f16.tar.zst tangerine-wallet-browser-cfa2592d78b31ea3c5d056bf1344cfd5d5353f16.zip |
Update button styles
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; |