// Button overrides @import "common/sass/variables"; @import "common/sass/mixins"; .btn { @include button-size( $padding-base-vertical, $padding-large-horizontal, $font-size-bump, $line-height-base, $btn-border-radius-base ); transform: translateZ(0); transition: $transition; &:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } &-link:hover { box-shadow: none; } // Override bootstrap disabled styles &:disabled, &.disabled, fieldset[disabled] & { opacity: 0.4; box-shadow: none; cursor: not-allowed; } } // Override sizes .btn-lg { // line-height: ensure even-numbered height of button next to large input @include button-size( $padding-large-vertical, $padding-large-horizontal, $font-size-bump-more, $line-height-large, $btn-border-radius-large ); } .btn-sm { // line-height: ensure proper height of button next to small input @include button-size( $padding-small-vertical, $padding-small-horizontal, $font-size-base, $line-height-base, $btn-border-radius-small ); } .btn-xs { @include button-size( $padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small ); padding: .1rem .6rem .2rem; } // This is a "smaller" small, to accomodate overrides done in v3. .btn-smr { @include button-size( .4rem, 1rem, 14px, $line-height-base, $btn-border-radius-small ); } // Custom color .btn-white { @include button-variant($brand-info, rgba(255,255,255,.8), rgba(255,255,255,.8)); color: $brand-info; } // Custom file button .btn-file { position: relative; overflow: hidden; input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; opacity: 0; background: red; cursor: inherit; display: block; } } // Contextual color overrides (?) .alert .btn-info { background-color: white; text-decoration: none; color: $brand-info; &:hover, &:focus, &.focus { text-decoration: none; opacity: 1; } &.disabled { background-color: white; text-decoration: none; color: $brand-info; opacity: .6; } } .btn-group .btn-default { border-bottom-width: 1px; &.active { border: 1px solid $brand-primary; color: $brand-primary; background: #f5f5f5; } }