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   .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);

    21   .user-select(none);

    22 

    23   &,

    24   &:active,

    25   &.active {

    26     &:focus,

    27     &.focus {

    28       .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     .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     pointer-events: none; // Future-proof disabling of clicks

    51     .opacity(.65);

    52     .box-shadow(none);

    53   }

    54 }

    55 

    56 

    57 // Alternate buttons

    58 // --------------------------------------------------

    59 

    60 .btn-default {

    61   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

    62 }

    63 .btn-primary {

    64   .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);

    65 }

    66 // Success appears as green

    67 .btn-success {

    68   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);

    69 }

    70 // Info appears as blue-green

    71 .btn-info {

    72   .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);

    73 }

    74 // Warning appears as orange

    75 .btn-warning {

    76   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);

    77 }

    78 // Danger and error appear as red

    79 .btn-danger {

    80   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);

    81 }

    82 

    83 

    84 // Link buttons

    85 // -------------------------

    86 

    87 // Make a button look and behave like a link

    88 .btn-link {

    89   color: @link-color;

    90   font-weight: normal;

    91   border-radius: 0;

    92 

    93   &,

    94   &:active,

    95   &.active,

    96   &[disabled],

    97   fieldset[disabled] & {

    98     background-color: transparent;

    99     .box-shadow(none);

   100   }

   101   &,

   102   &:hover,

   103   &:focus,

   104   &:active {

   105     border-color: transparent;

   106   }

   107   &:hover,

   108   &:focus {

   109     color: @link-hover-color;

   110     text-decoration: underline;

   111     background-color: transparent;

   112   }

   113   &[disabled],

   114   fieldset[disabled] & {

   115     &:hover,

   116     &:focus {

   117       color: @btn-link-disabled-color;

   118       text-decoration: none;

   119     }

   120   }

   121 }

   122 

   123 

   124 // Button Sizes

   125 // --------------------------------------------------

   126 

   127 .btn-lg {

   128   // line-height: ensure even-numbered height of button next to large input

   129   .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);

   130 }

   131 .btn-sm {

   132   // line-height: ensure proper height of button next to small input

   133   .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);

   134 }

   135 .btn-xs {

   136   .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);

   137 }

   138 

   139 

   140 // Block button

   141 // --------------------------------------------------

   142 

   143 .btn-block {

   144   display: block;

   145   width: 100%;

   146 }

   147 

   148 // Vertically space out multiple block buttons

   149 .btn-block + .btn-block {

   150   margin-top: 5px;

   151 }

   152 

   153 // Specificity overrides

   154 input[type="submit"],

   155 input[type="reset"],

   156 input[type="button"] {

   157   &.btn-block {

   158     width: 100%;

   159   }

   160 }