git.roojs.org Git - roojs1/blob - scss/bootstrap/_input-group.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .input-group {
   8   position: relative;
   9   display: flex;
  10   flex-wrap: wrap; // For form validation feedback
  11   align-items: stretch;
  12   width: 100%;
  13
  14   > .form-control,
  15   > .form-control-plaintext,
  16   > .custom-select,
  17   > .custom-file {
  18     position: relative; // For focus state's z-index
  19     flex: 1 1 auto;
  20     // Add width 1% and flex-basis auto to ensure that button will not wrap out
  21     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
  22     width: 1%;
  23     margin-bottom: 0;
  24
  25     + .form-control,
  26     + .custom-select,
  27     + .custom-file {
  28       margin-left: -$input-border-width;
  29     }
  30   }
  31
  32   // Bring the "active" form control to the top of surrounding elements
  33   > .form-control:focus,
  34   > .custom-select:focus,
  35   > .custom-file .custom-file-input:focus ~ .custom-file-label {
  36     z-index: 3;
  37   }
  38
  39   // Bring the custom file input above the label
  40   > .custom-file .custom-file-input:focus {
  41     z-index: 4;
  42   }
  43
  44   > .form-control,
  45   > .custom-select {
  46     &:not(:last-child) { @include border-right-radius(0); }
  47     &:not(:first-child) { @include border-left-radius(0); }
  48   }
  49
  50   // Custom file inputs have more complex markup, thus requiring different
  51   // border-radius overrides.
  52   > .custom-file {
  53     display: flex;
  54     align-items: center;
  55
  56     &:not(:last-child) .custom-file-label,
  57     &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
  58     &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
  59   }
  60 }
  61
  62
  63 // Prepend and append
  64 //
  65 // While it requires one extra layer of HTML for each, dedicated prepend and
  66 // append elements allow us to 1) be less clever, 2) simplify our selectors, and
  67 // 3) support HTML5 form validation.
  68
  69 .input-group-prepend,
  70 .input-group-append {
  71   display: flex;
  72
  73   // Ensure buttons are always above inputs for more visually pleasing borders.
  74   // This isn't needed for `.input-group-text` since it shares the same border-color
  75   // as our inputs.
  76   .btn {
  77     position: relative;
  78     z-index: 2;
  79
  80     &:focus {
  81       z-index: 3;
  82     }
  83   }
  84
  85   .btn + .btn,
  86   .btn + .input-group-text,
  87   .input-group-text + .input-group-text,
  88   .input-group-text + .btn {
  89     margin-left: -$input-border-width;
  90   }
  91 }
  92
  93 .input-group-prepend { margin-right: -$input-border-width; }
  94 .input-group-append { margin-left: -$input-border-width; }
  95
  96
  97 // Textual addons
  98 //
  99 // Serves as a catch-all element for any text or radio/checkbox input you wish
 100 // to prepend or append to an input.
 101
 102 .input-group-text {
 103   display: flex;
 104   align-items: center;
 105   padding: $input-padding-y $input-padding-x;
 106   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
 107   font-size: $font-size-base; // Match inputs
 108   font-weight: $font-weight-normal;
 109   line-height: $input-line-height;
 110   color: $input-group-addon-color;
 111   text-align: center;
 112   white-space: nowrap;
 113   background-color: $input-group-addon-bg;
 114   border: $input-border-width solid $input-group-addon-border-color;
 115   @include border-radius($input-border-radius);
 116
 117   // Nuke default margins from checkboxes and radios to vertically center within.
 118   input[type="radio"],
 119   input[type="checkbox"] {
 120     margin-top: 0;
 121   }
 122 }
 123
 124
 125 // Sizing
 126 //
 127 // Remix the default form control sizing classes into new ones for easier
 128 // manipulation.
 129
 130 .input-group-lg > .form-control:not(textarea),
 131 .input-group-lg > .custom-select {
 132   height: $input-height-lg;
 133 }
 134
 135 .input-group-lg > .form-control,
 136 .input-group-lg > .custom-select,
 137 .input-group-lg > .input-group-prepend > .input-group-text,
 138 .input-group-lg > .input-group-append > .input-group-text,
 139 .input-group-lg > .input-group-prepend > .btn,
 140 .input-group-lg > .input-group-append > .btn {
 141   padding: $input-padding-y-lg $input-padding-x-lg;
 142   font-size: $input-font-size-lg;
 143   line-height: $input-line-height-lg;
 144   @include border-radius($input-border-radius-lg);
 145 }
 146
 147 .input-group-sm > .form-control:not(textarea),
 148 .input-group-sm > .custom-select {
 149   height: $input-height-sm;
 150 }
 151
 152 .input-group-sm > .form-control,
 153 .input-group-sm > .custom-select,
 154 .input-group-sm > .input-group-prepend > .input-group-text,
 155 .input-group-sm > .input-group-append > .input-group-text,
 156 .input-group-sm > .input-group-prepend > .btn,
 157 .input-group-sm > .input-group-append > .btn {
 158   padding: $input-padding-y-sm $input-padding-x-sm;
 159   font-size: $input-font-size-sm;
 160   line-height: $input-line-height-sm;
 161   @include border-radius($input-border-radius-sm);
 162 }
 163
 164 .input-group-lg > .custom-select,
 165 .input-group-sm > .custom-select {
 166   padding-right: ($custom-select-padding-x + $custom-select-indicator-padding);
 167 }
 168
 169
 170 // Prepend and append rounded corners
 171 //
 172 // These rulesets must come after the sizing ones to properly override sm and lg
 173 // border-radius values when extending. They're more specific than we'd like
 174 // with the `.input-group >` part, but without it, we cannot override the sizing.
 175
 176
 177 .input-group > .input-group-prepend > .btn,
 178 .input-group > .input-group-prepend > .input-group-text,
 179 .input-group > .input-group-append:not(:last-child) > .btn,
 180 .input-group > .input-group-append:not(:last-child) > .input-group-text,
 181 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 182 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
 183   @include border-right-radius(0);
 184 }
 185
 186 .input-group > .input-group-append > .btn,
 187 .input-group > .input-group-append > .input-group-text,
 188 .input-group > .input-group-prepend:not(:first-child) > .btn,
 189 .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
 190 .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
 191 .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
 192   @include border-left-radius(0);
 193 }