| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 1 | .btn { |
| 2 | font-weight: $headings-font-weight; |
| Derick Montague | 3f6710a | 2020-03-04 00:59:47 -0600 | [diff] [blame] | 3 | padding-top: $spacer / 2; |
| 4 | padding-right: $spacer; |
| 5 | padding-bottom: $spacer / 2; |
| 6 | padding-left: $spacer; |
| 7 | |
| 8 | // Buttons with SVGs and text expect |
| 9 | // text to be wrapped in a span element |
| 10 | svg + span { |
| 11 | margin-left: $spacer / 4; |
| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 12 | } |
| 13 | } |
| 14 | |
| 15 | .btn-primary { |
| Derick Montague | 7f970a1 | 2020-03-02 17:56:09 -0600 | [diff] [blame] | 16 | fill: currentColor; |
| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 17 | } |
| 18 | |
| 19 | .btn-secondary { |
| Derick Montague | 7f970a1 | 2020-03-02 17:56:09 -0600 | [diff] [blame] | 20 | fill: currentColor; |
| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 21 | } |
| 22 | |
| 23 | .btn-link { |
| 24 | fill: $primary; |
| 25 | text-decoration: none !important; |
| Derick Montague | 3f6710a | 2020-03-04 00:59:47 -0600 | [diff] [blame] | 26 | |
| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 27 | &:focus { |
| 28 | box-shadow: $btn-focus-box-shadow; |
| 29 | } |
| 30 | &:hover { |
| 31 | fill: darken($primary, 15%); |
| 32 | } |
| Derick Montague | 3f6710a | 2020-03-04 00:59:47 -0600 | [diff] [blame] | 33 | } |
| 34 | |
| 35 | .btn:disabled { |
| 36 | color: $gray-600; |
| 37 | fill: currentColor; |
| 38 | |
| 39 | &:not(.btn-link) { |
| 40 | border-color: $gray-400; |
| 41 | background-color: $gray-400; |
| 42 | } |
| Yoshie Muranaka | 996d2d5 | 2019-12-30 09:06:45 -0800 | [diff] [blame] | 43 | } |