| /* ========================================================================== |
| BUTTONS |
| ========================================================================== */ |
| |
| /* |
| Default button |
| ========================================================================== */ |
| |
| .btn { |
| /* default button */ |
| display: inline-block; |
| margin-bottom: 0.25em; |
| padding: 0.5em 1em; |
| color: #fff !important; |
| font-family: $sans-serif; |
| font-size: $type-size-6; |
| font-weight: bold; |
| text-align: center; |
| text-decoration: none; |
| background-color: $primary-color; |
| border: 0 !important; |
| border-radius: $border-radius; |
| cursor: pointer; |
| |
| &:hover { |
| background-color: mix(white, #000, 20%); |
| } |
| |
| .icon { |
| margin-right: 0.5em; |
| } |
| |
| .icon + .hidden { |
| margin-left: -0.5em; /* override for hidden text*/ |
| } |
| |
| /* fills width of parent container */ |
| |
| &--block { |
| display: block; |
| width: 100%; |
| |
| + .btn--block { |
| margin-top: 0.25em; |
| } |
| } |
| |
| /* for dark backgrounds */ |
| |
| &--inverse { |
| color: $gray !important; |
| border: 1px solid $light-gray !important; /* override*/ |
| background-color: #fff; |
| |
| &:hover { |
| color: #fff !important; |
| border-color: $gray; |
| } |
| } |
| |
| /* light outline */ |
| |
| &--light-outline { |
| border: 1px solid #fff !important; /* override*/ |
| background-color: transparent; |
| } |
| |
| /* information */ |
| |
| &--info { |
| background-color: $info-color; |
| |
| &:hover { |
| background-color: mix(#000, $info-color, 20%); |
| } |
| } |
| |
| /* warning */ |
| |
| &--warning { |
| background-color: $warning-color; |
| |
| &:hover { |
| background-color: mix(#000, $warning-color, 20%); |
| } |
| } |
| |
| /* success */ |
| |
| &--success { |
| background-color: $success-color; |
| |
| &:hover { |
| background-color: mix(#000, $success-color, 20%); |
| } |
| } |
| |
| /* danger */ |
| |
| &--danger { |
| background-color: $danger-color; |
| |
| &:hover { |
| background-color: mix(#000, $danger-color, 20%); |
| } |
| } |
| |
| /* disabled */ |
| |
| &--disabled { |
| pointer-events: none; |
| cursor: not-allowed; |
| filter: alpha(opacity=65); |
| box-shadow: none; |
| opacity: 0.65; |
| } |
| |
| /* social buttons */ |
| |
| $social: |
| (facebook, $facebook-color), |
| (twitter, $twitter-color), |
| (google-plus, $google-plus-color), |
| (linkedin, $linkedin-color); |
| |
| @each $socialnetwork, $color in $social { |
| &--#{$socialnetwork} { |
| background-color: $color; |
| |
| &:hover { |
| background-color: mix(#000, $color, 20%); |
| } |
| } |
| } |
| |
| /* extra large button */ |
| |
| &--x-large { |
| font-size: $type-size-4; |
| } |
| |
| /* large button */ |
| |
| &--large { |
| font-size: $type-size-5; |
| } |
| |
| /* small button */ |
| |
| &--small { |
| font-size: $type-size-7; |
| } |
| } |