| OLD | NEW |
|---|
| (Empty) |
| 1 /** | |
| 2 * | |
| 3 * Button | |
| 4 * | |
| 5 **/ | |
| 6 | |
| 7 .button { | |
| 8 display: inline-block; | |
| 9 padding: (($lineHeight / 2) - 1) 32px; | |
| 10 margin-bottom: $lineHeight / 2; | |
| 11 margin-top: $lineHeight / 2; | |
| 12 min-height: $lineHeight; | |
| 13 | |
| 14 text-align: center; | |
| 15 | |
| 16 font-family: $fontHighlight; | |
| 17 font-weight: 600; | |
| 18 text-decoration: none; | |
| 19 | |
| 20 outline: 0; | |
| 21 | |
| 22 transition: none; | |
| 23 | |
| 24 &:hover { | |
| 25 background: #4d4d4d; | |
| 26 color: #ffffff; | |
| 27 border: 1px solid #4d4d4d; | |
| 28 text-decoration: none; | |
| 29 } | |
| 30 } | |
| 31 | |
| 32 // Mixin to create buttons | |
| 33 @mixin style-button($color, $textColor, $isInverted: false) { | |
| 34 | |
| 35 background: $color; | |
| 36 color: $textColor; | |
| 37 border: 1px solid darken($color, 10%); | |
| 38 | |
| 39 @if $isInverted { border-color: transparent;} | |
| 40 } | |
| 41 | |
| 42 .button--primary { | |
| 43 @extend .button; | |
| 44 @include style-button(#4285f4, #ffffff); | |
| 45 } | |
| 46 | |
| 47 .button--secondary { | |
| 48 @extend .button; | |
| 49 @include style-button(#ffffff, $colorBlue); | |
| 50 } | |
| 51 | |
| 52 .button--secondary-variation { | |
| 53 @extend .button; | |
| 54 @include style-button(#ffffff, $colorBlue, true); | |
| 55 } | |
| OLD | NEW |
|---|
