src/scss/bootstrap-4.0.0-alpha.6/scss/_input-group.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .input-group {
   6   position: relative;
   7   display: flex;
   8   width: 100%;
   9
  10   .form-control {
  11     // Ensure that the input is always above the *appended* addon button for
  12     // proper border colors.
  13     position: relative;
  14     z-index: 2;
  15     flex: 1 1 auto;
  16     // Add width 1% and flex-basis auto to ensure that button will not wrap out
  17     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
  18     width: 1%;
  19     margin-bottom: 0;
  20
  21     // Bring the "active" form control to the front
  22     @include hover-focus-active {
  23       z-index: 3;
  24     }
  25   }
  26 }
  27
  28 .input-group-addon,
  29 .input-group-btn,
  30 .input-group .form-control {
  31   // Vertically centers the content of the addons within the input group
  32   display: flex;
  33   flex-direction: column;
  34   justify-content: center;
  35
  36   &:not(:first-child):not(:last-child) {
  37     @include border-radius(0);
  38   }
  39 }
  40
  41 .input-group-addon,
  42 .input-group-btn {
  43   white-space: nowrap;
  44   vertical-align: middle; // Match the inputs
  45 }
  46
  47
  48 // Sizing options
  49 //
  50 // Remix the default form control sizing classes into new ones for easier
  51 // manipulation.
  52
  53 .input-group-lg > .form-control,
  54 .input-group-lg > .input-group-addon,
  55 .input-group-lg > .input-group-btn > .btn {
  56   @extend .form-control-lg;
  57 }
  58 .input-group-sm > .form-control,
  59 .input-group-sm > .input-group-addon,
  60 .input-group-sm > .input-group-btn > .btn {
  61   @extend .form-control-sm;
  62 }
  63
  64
  65 //
  66 // Text input groups
  67 //
  68
  69 .input-group-addon {
  70   padding: $input-padding-y $input-padding-x;
  71   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
  72   font-size: $font-size-base; // Match inputs
  73   font-weight: $font-weight-normal;
  74   line-height: $input-line-height;
  75   color: $input-color;
  76   text-align: center;
  77   background-color: $input-group-addon-bg;
  78   border: $input-btn-border-width solid $input-group-addon-border-color;
  79   @include border-radius($input-border-radius);
  80
  81   // Sizing
  82   &.form-control-sm {
  83     padding: $input-padding-y-sm $input-padding-x-sm;
  84     font-size: $font-size-sm;
  85     @include border-radius($input-border-radius-sm);
  86   }
  87   &.form-control-lg {
  88     padding: $input-padding-y-lg $input-padding-x-lg;
  89     font-size: $font-size-lg;
  90     @include border-radius($input-border-radius-lg);
  91   }
  92
  93   // scss-lint:disable QualifyingElement
  94   // Nuke default margins from checkboxes and radios to vertically center within.
  95   input[type="radio"],
  96   input[type="checkbox"] {
  97     margin-top: 0;
  98   }
  99   // scss-lint:enable QualifyingElement
 100 }
 101
 102
 103 //
 104 // Reset rounded corners
 105 //
 106
 107 .input-group .form-control:not(:last-child),
 108 .input-group-addon:not(:last-child),
 109 .input-group-btn:not(:last-child) > .btn,
 110 .input-group-btn:not(:last-child) > .btn-group > .btn,
 111 .input-group-btn:not(:last-child) > .dropdown-toggle,
 112 .input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
 113 .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
 114   @include border-right-radius(0);
 115 }
 116 .input-group-addon:not(:last-child) {
 117   border-right: 0;
 118 }
 119 .input-group .form-control:not(:first-child),
 120 .input-group-addon:not(:first-child),
 121 .input-group-btn:not(:first-child) > .btn,
 122 .input-group-btn:not(:first-child) > .btn-group > .btn,
 123 .input-group-btn:not(:first-child) > .dropdown-toggle,
 124 .input-group-btn:not(:last-child) > .btn:not(:first-child),
 125 .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
 126   @include border-left-radius(0);
 127 }
 128 .form-control + .input-group-addon:not(:first-child) {
 129   border-left: 0;
 130 }
 131
 132 //
 133 // Button input groups
 134 //
 135
 136 .input-group-btn {
 137   position: relative;
 138   // Jankily prevent input button groups from wrapping with `white-space` and
 139   // `font-size` in combination with `inline-block` on buttons.
 140   font-size: 0;
 141   white-space: nowrap;
 142
 143   // Negative margin for spacing, position for bringing hovered/focused/actived
 144   // element above the siblings.
 145   > .btn {
 146     position: relative;
 147     // Vertically stretch the button and center its content
 148     flex: 1;
 149
 150     + .btn {
 151       margin-left: (-$input-btn-border-width);
 152     }
 153
 154     // Bring the "active" button to the front
 155     @include hover-focus-active {
 156       z-index: 3;
 157     }
 158   }
 159
 160   // Negative margin to only have a single, shared border between the two
 161   &:not(:last-child) {
 162     > .btn,
 163     > .btn-group {
 164       margin-right: (-$input-btn-border-width);
 165     }
 166   }
 167   &:not(:first-child) {
 168     > .btn,
 169     > .btn-group {
 170       z-index: 2;
 171       margin-left: (-$input-btn-border-width);
 172       // Because specificity
 173       @include hover-focus-active {
 174         z-index: 3;
 175       }
 176     }
 177   }
 178 }