mindcoding-template/less/input-groups.less

   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   &.col {
  14     float: none;
  15     padding-left: 0;
  16     padding-right: 0;
  17   }
  18
  19   .form-control {
  20     width: 100%;
  21     margin-bottom: 0;
  22   }
  23 }
  24
  25 // Sizing options
  26 //
  27 // Remix the default form control sizing classes into new ones for easier
  28 // manipulation.
  29
  30 .input-group-lg > .form-control,
  31 .input-group-lg > .input-group-addon,
  32 .input-group-lg > .input-group-btn > .btn { .input-lg(); }
  33 .input-group-sm > .form-control,
  34 .input-group-sm > .input-group-addon,
  35 .input-group-sm > .input-group-btn > .btn { .input-sm(); }
  36
  37
  38 // Display as table-cell
  39 // -------------------------
  40 .input-group-addon,
  41 .input-group-btn,
  42 .input-group .form-control {
  43   display: table-cell;
  44
  45   &:not(:first-child):not(:last-child) {
  46     border-radius: 0;
  47   }
  48 }
  49 // Addon and addon wrapper for buttons
  50 .input-group-addon,
  51 .input-group-btn {
  52   width: 1%;
  53   white-space: nowrap;
  54   vertical-align: middle; // Match the inputs
  55 }
  56
  57 // Text input groups
  58 // -------------------------
  59 .input-group-addon {
  60   padding: @padding-base-vertical @padding-base-horizontal;
  61   font-size: @font-size-base;
  62   font-weight: normal;
  63   line-height: 1;
  64   color: @input-color;
  65   text-align: center;
  66   background-color: @input-group-addon-bg;
  67   border: 1px solid @input-group-addon-border-color;
  68   border-radius: @border-radius-base;
  69
  70   // Sizing
  71   &.input-sm {
  72     padding: @padding-small-vertical @padding-small-horizontal;
  73     font-size: @font-size-small;
  74     border-radius: @border-radius-small;
  75   }
  76   &.input-lg {
  77     padding: @padding-large-vertical @padding-large-horizontal;
  78     font-size: @font-size-large;
  79     border-radius: @border-radius-large;
  80   }
  81
  82   // Nuke default margins from checkboxes and radios to vertically center within.
  83   input[type="radio"],
  84   input[type="checkbox"] {
  85     margin-top: 0;
  86   }
  87 }
  88
  89 // Reset rounded corners
  90 .input-group .form-control:first-child,
  91 .input-group-addon:first-child,
  92 .input-group-btn:first-child > .btn,
  93 .input-group-btn:first-child > .dropdown-toggle,
  94 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  95   .border-right-radius(0);
  96 }
  97 .input-group-addon:first-child {
  98   border-right: 0;
  99 }
 100 .input-group .form-control:last-child,
 101 .input-group-addon:last-child,
 102 .input-group-btn:last-child > .btn,
 103 .input-group-btn:last-child > .dropdown-toggle,
 104 .input-group-btn:first-child > .btn:not(:first-child) {
 105   .border-left-radius(0);
 106 }
 107 .input-group-addon:last-child {
 108   border-left: 0;
 109 }
 110
 111 // Button input groups
 112 // -------------------------
 113 .input-group-btn {
 114   position: relative;
 115   white-space: nowrap;
 116
 117   // Negative margin to only have a 1px border between the two
 118   &:first-child > .btn {
 119     margin-right: -1px;
 120   }
 121   &:last-child > .btn {
 122     margin-left: -1px;
 123   }
 124 }
 125 .input-group-btn > .btn {
 126   position: relative;
 127   // Jankily prevent input button groups from wrapping
 128   + .btn {
 129     margin-left: -4px;
 130   }
 131   // Bring the "active" button to the front
 132   &:hover,
 133   &:active {
 134     z-index: 2;
 135   }
 136 }