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