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

     1  //
     2  // Input groups
     3  // --------------------------------------------------
     4  
     5  // Base styles
     6  // -------------------------
     7  .input-group {
     8    position: relative; // For dropdowns
     9    display: table;
    10    border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
    11  
    12    // Undo padding and float of grid classes
    13    &[class*="col-"] {
    14      float: none;
    15      padding-left: 0;
    16      padding-right: 0;
    17    }
    18  
    19    .form-control {
    20      // Ensure that the input is always above the *appended* addon button for
    21      // proper border colors.
    22      position: relative;
    23      z-index: 2;
    24  
    25      // IE9 fubars the placeholder attribute in text inputs and the arrows on
    26      // select elements in input groups. To fix it, we float the input. Details:
    27      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
    28      float: left;
    29  
    30      width: 100%;
    31      margin-bottom: 0;
    32    }
    33  }
    34  
    35  // Sizing options
    36  //
    37  // Remix the default form control sizing classes into new ones for easier
    38  // manipulation.
    39  
    40  .input-group-lg > .form-control,
    41  .input-group-lg > .input-group-addon,
    42  .input-group-lg > .input-group-btn > .btn { .input-lg(); }
    43  .input-group-sm > .form-control,
    44  .input-group-sm > .input-group-addon,
    45  .input-group-sm > .input-group-btn > .btn { .input-sm(); }
    46  
    47  
    48  // Display as table-cell
    49  // -------------------------
    50  .input-group-addon,
    51  .input-group-btn,
    52  .input-group .form-control {
    53    display: table-cell;
    54  
    55    &:not(:first-child):not(:last-child) {
    56      border-radius: 0;
    57    }
    58  }
    59  // Addon and addon wrapper for buttons
    60  .input-group-addon,
    61  .input-group-btn {
    62    width: 1%;
    63    white-space: nowrap;
    64    vertical-align: middle; // Match the inputs
    65  }
    66  
    67  // Text input groups
    68  // -------------------------
    69  .input-group-addon {
    70    padding: @padding-base-vertical @padding-base-horizontal;
    71    font-size: @font-size-base;
    72    font-weight: normal;
    73    line-height: 1;
    74    color: @input-color;
    75    text-align: center;
    76    background-color: @input-group-addon-bg;
    77    border: 1px solid @input-group-addon-border-color;
    78    border-radius: @border-radius-base;
    79  
    80    // Sizing
    81    &.input-sm {
    82      padding: @padding-small-vertical @padding-small-horizontal;
    83      font-size: @font-size-small;
    84      border-radius: @border-radius-small;
    85    }
    86    &.input-lg {
    87      padding: @padding-large-vertical @padding-large-horizontal;
    88      font-size: @font-size-large;
    89      border-radius: @border-radius-large;
    90    }
    91  
    92    // Nuke default margins from checkboxes and radios to vertically center within.
    93    input[type="radio"],
    94    input[type="checkbox"] {
    95      margin-top: 0;
    96    }
    97  }
    98  
    99  // Reset rounded corners
   100  .input-group .form-control:first-child,
   101  .input-group-addon:first-child,
   102  .input-group-btn:first-child > .btn,
   103  .input-group-btn:first-child > .btn-group > .btn,
   104  .input-group-btn:first-child > .dropdown-toggle,
   105  .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
   106  .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
   107    .border-right-radius(0);
   108  }
   109  .input-group-addon:first-child {
   110    border-right: 0;
   111  }
   112  .input-group .form-control:last-child,
   113  .input-group-addon:last-child,
   114  .input-group-btn:last-child > .btn,
   115  .input-group-btn:last-child > .btn-group > .btn,
   116  .input-group-btn:last-child > .dropdown-toggle,
   117  .input-group-btn:first-child > .btn:not(:first-child),
   118  .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
   119    .border-left-radius(0);
   120  }
   121  .input-group-addon:last-child {
   122    border-left: 0;
   123  }
   124  
   125  // Button input groups
   126  // -------------------------
   127  .input-group-btn {
   128    position: relative;
   129    // Jankily prevent input button groups from wrapping with `white-space` and
   130    // `font-size` in combination with `inline-block` on buttons.
   131    font-size: 0;
   132    white-space: nowrap;
   133  
   134    // Negative margin for spacing, position for bringing hovered/focused/actived
   135    // element above the siblings.
   136    > .btn {
   137      position: relative;
   138      + .btn {
   139        margin-left: -1px;
   140      }
   141      // Bring the "active" button to the front
   142      &:hover,
   143      &:focus,
   144      &:active {
   145        z-index: 2;
   146      }
   147    }
   148  
   149    // Negative margin to only have a 1px border between the two
   150    &:first-child {
   151      > .btn,
   152      > .btn-group {
   153        margin-right: -1px;
   154      }
   155    }
   156    &:last-child {
   157      > .btn,
   158      > .btn-group {
   159        margin-left: -1px;
   160      }
   161    }
   162  }