shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_buttons.scss (3985B)

      1 //
      2 // Buttons
      3 // --------------------------------------------------
      4 
      5 
      6 // Base styles
      7 // --------------------------------------------------
      8 
      9 .btn {
     10   display: inline-block;
     11   margin-bottom: 0; // For input.btn
     12   font-weight: $btn-font-weight;
     13   text-align: center;
     14   vertical-align: middle;
     15   touch-action: manipulation;
     16   cursor: pointer;
     17   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     18   border: 1px solid transparent;
     19   white-space: nowrap;
     20   @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
     21   @include user-select(none);
     22 
     23   &,
     24   &:active,
     25   &.active {
     26     &:focus,
     27     &.focus {
     28       @include tab-focus;
     29     }
     30   }
     31 
     32   &:hover,
     33   &:focus,
     34   &.focus {
     35     color: $btn-default-color;
     36     text-decoration: none;
     37   }
     38 
     39   &:active,
     40   &.active {
     41     outline: 0;
     42     background-image: none;
     43     @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
     44   }
     45 
     46   &.disabled,
     47   &[disabled],
     48   fieldset[disabled] & {
     49     cursor: $cursor-disabled;
     50     @include opacity(.65);
     51     @include box-shadow(none);
     52   }
     53 
     54   // [converter] extracted a& to a.btn
     55 }
     56 
     57 a.btn {
     58   &.disabled,
     59   fieldset[disabled] & {
     60     pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
     61   }
     62 }
     63 
     64 
     65 // Alternate buttons
     66 // --------------------------------------------------
     67 
     68 .btn-default {
     69   @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
     70 }
     71 .btn-primary {
     72   @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
     73 }
     74 // Success appears as green
     75 .btn-success {
     76   @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
     77 }
     78 // Info appears as blue-green
     79 .btn-info {
     80   @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
     81 }
     82 // Warning appears as orange
     83 .btn-warning {
     84   @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
     85 }
     86 // Danger and error appear as red
     87 .btn-danger {
     88   @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
     89 }
     90 
     91 // Link buttons
     92 // -------------------------
     93 
     94 // Make a button look and behave like a link
     95 .btn-link {
     96   color: $link-color;
     97   font-weight: normal;
     98   border-radius: 0;
     99 
    100   &,
    101   &:active,
    102   &.active,
    103   &[disabled],
    104   fieldset[disabled] & {
    105     background-color: transparent;
    106     @include box-shadow(none);
    107   }
    108   &,
    109   &:hover,
    110   &:focus,
    111   &:active {
    112     border-color: transparent;
    113   }
    114   &:hover,
    115   &:focus {
    116     color: $link-hover-color;
    117     text-decoration: $link-hover-decoration;
    118     background-color: transparent;
    119   }
    120   &[disabled],
    121   fieldset[disabled] & {
    122     &:hover,
    123     &:focus {
    124       color: $btn-link-disabled-color;
    125       text-decoration: none;
    126     }
    127   }
    128 }
    129 
    130 
    131 // Button Sizes
    132 // --------------------------------------------------
    133 
    134 .btn-lg {
    135   // line-height: ensure even-numbered height of button next to large input
    136   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
    137 }
    138 .btn-sm {
    139   // line-height: ensure proper height of button next to small input
    140   @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
    141 }
    142 .btn-xs {
    143   @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
    144 }
    145 
    146 
    147 // Block button
    148 // --------------------------------------------------
    149 
    150 .btn-block {
    151   display: block;
    152   width: 100%;
    153 }
    154 
    155 // Vertically space out multiple block buttons
    156 .btn-block + .btn-block {
    157   margin-top: 5px;
    158 }
    159 
    160 // Specificity overrides
    161 input[type="submit"],
    162 input[type="reset"],
    163 input[type="button"] {
    164   &.btn-block {
    165     width: 100%;
    166   }
    167 }