github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/buttons.less (about)

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