.btn { background-color: $white; background-image: none; background-position: 50% 50%; background-size: 100% 100%; border: 1px solid transparent; border-radius: 2px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15), 0 1px 5px 1px rgba(0, 0, 0, 0.15); color: $black-text; cursor: pointer; display: inline-block; font-size: $font-size; font-weight: $font-weight; line-height: $line-height; margin-bottom: 0; max-width: 100%; padding: (($btn-height - $line-height - 2) / 2) ($grid-gutter - 1); position: relative; text-align: center; text-transform: uppercase; transition: background-color 0.3s $timing, box-shadow 0.3s $timing; user-select: none; vertical-align: middle; white-space: nowrap; &:active, &:focus, &:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15), 0 5px 10px 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15); color: $black-text; outline: 0; text-decoration: none; } &[disabled], fieldset[disabled] & { cursor: not-allowed; opacity: 0.5; } &.waves-effect { border: 0; padding: (($btn-height - $line-height) / 2) $grid-gutter; } } // colour @each $color in $palette-list { $i: index($palette-list, $color); .btn-#{$color} { background-color: nth($palette-color, $i); color: $white; &:active, &:focus, &:hover { color: $white; } &[disabled], fieldset[disabled] & { background-color: nth($palette-color, $i); } } } // size .btn-lg { font-size: $font-size-h4; line-height: $line-height-h4; padding: (($base * 3 * 2.5 - $line-height-h4 - 2) / 2) ($grid-gutter * 1.5 - 1); &.waves-effect { padding: (($base * 3 * 2.5 - $line-height-h4) / 2) ($grid-gutter * 1.5); } } .btn-sm { font-size: $font-size-h6; line-height: ($line-height - 2); padding: 0 ($grid-gutter / 2 - 1); &.waves-effect { padding: 1px ($grid-gutter / 2); } } .btn-block { display: block; white-space: normal; width: 100%; } .btn-text { color: $black-text; display: inline-block; font-size: $font-size; font-weight: $font-weight; line-height: $line-height; padding: (($btn-height - $line-height) / 2) 0; }