src/scss/bootstrap-4.0.0-alpha.6/scss/_forms.scss

   1 // scss-lint:disable QualifyingElement
   2
   3 //
   4 // Textual form controls
   5 //
   6
   7 .form-control {
   8   display: block;
   9   width: 100%;
  10   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  11   // height: $input-height;
  12   padding: $input-padding-y $input-padding-x;
  13   font-size: $font-size-base;
  14   line-height: $input-line-height;
  15   color: $input-color;
  16   background-color: $input-bg;
  17   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
  18   background-image: none;
  19   background-clip: padding-box;
  20   border: $input-btn-border-width solid $input-border-color;
  21
  22   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  23   @if $enable-rounded {
  24     // Manually use the if/else instead of the mixin to account for iOS override
  25     border-radius: $input-border-radius;
  26   } @else {
  27     // Otherwise undo the iOS default
  28     border-radius: 0;
  29   }
  30
  31   @include box-shadow($input-box-shadow);
  32   @include transition($input-transition);
  33
  34   // Unstyle the caret on `<select>`s in IE10+.
  35   &::-ms-expand {
  36     background-color: transparent;
  37     border: 0;
  38   }
  39
  40   // Customize the `:focus` state to imitate native WebKit styles.
  41   @include form-control-focus();
  42
  43   // Placeholder
  44   &::placeholder {
  45     color: $input-color-placeholder;
  46     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  47     opacity: 1;
  48   }
  49
  50   // Disabled and read-only inputs
  51   //
  52   // HTML5 says that controls under a fieldset > legend:first-child won't be
  53   // disabled if the fieldset is disabled. Due to implementation difficulty, we
  54   // don't honor that edge case; we style them as disabled anyway.
  55   &:disabled,
  56   &[readonly] {
  57     background-color: $input-bg-disabled;
  58     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  59     opacity: 1;
  60   }
  61
  62   &:disabled {
  63     cursor: $cursor-disabled;
  64   }
  65 }
  66
  67 select.form-control {
  68   &:not([size]):not([multiple]) {
  69     $select-border-width: ($border-width * 2);
  70     height: calc(#{$input-height} + #{$select-border-width});
  71   }
  72
  73   &:focus::-ms-value {
  74     // Suppress the nested default white text on blue background highlight given to
  75     // the selected option text when the (still closed) <select> receives focus
  76     // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
  77     // match the appearance of the native widget.
  78     // See https://github.com/twbs/bootstrap/issues/19398.
  79     color: $input-color;
  80     background-color: $input-bg;
  81   }
  82 }
  83
  84 // Make file inputs better match text inputs by forcing them to new lines.
  85 .form-control-file,
  86 .form-control-range {
  87   display: block;
  88 }
  89
  90
  91 //
  92 // Labels
  93 //
  94
  95 // For use with horizontal and inline forms, when you need the label text to
  96 // align with the form controls.
  97 .col-form-label {
  98   padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
  99   padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
 100   margin-bottom: 0; // Override the `<label>` default
 101 }
 102
 103 .col-form-label-lg {
 104   padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
 105   padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
 106   font-size: $font-size-lg;
 107 }
 108
 109 .col-form-label-sm {
 110   padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
 111   padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
 112   font-size: $font-size-sm;
 113 }
 114
 115
 116 //
 117 // Legends
 118 //
 119
 120 // For use with horizontal and inline forms, when you need the legend text to
 121 // be the same size as regular labels, and to align with the form controls.
 122 .col-form-legend {
 123   padding-top: $input-padding-y;
 124   padding-bottom: $input-padding-y;
 125   margin-bottom: 0;
 126   font-size: $font-size-base;
 127 }
 128
 129
 130 // Static form control text
 131 //
 132 // Apply class to an element to make any string of text align with labels in a
 133 // horizontal form layout.
 134
 135 .form-control-static {
 136   padding-top: $input-padding-y;
 137   padding-bottom: $input-padding-y;
 138   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
 139   line-height: $input-line-height;
 140   border: solid transparent;
 141   border-width: $input-btn-border-width 0;
 142
 143   &.form-control-sm,
 144   &.form-control-lg {
 145     padding-right: 0;
 146     padding-left: 0;
 147   }
 148 }
 149
 150
 151 // Form control sizing
 152 //
 153 // Build on `.form-control` with modifier classes to decrease or increase the
 154 // height and font-size of form controls.
 155 //
 156 // The `.form-group-* form-control` variations are sadly duplicated to avoid the
 157 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 158
 159 .form-control-sm {
 160   padding: $input-padding-y-sm $input-padding-x-sm;
 161   font-size: $font-size-sm;
 162   @include border-radius($input-border-radius-sm);
 163 }
 164
 165 select.form-control-sm {
 166   &:not([size]):not([multiple]) {
 167     height: $input-height-sm;
 168   }
 169 }
 170
 171 .form-control-lg {
 172   padding: $input-padding-y-lg $input-padding-x-lg;
 173   font-size: $font-size-lg;
 174   @include border-radius($input-border-radius-lg);
 175 }
 176
 177 select.form-control-lg {
 178   &:not([size]):not([multiple]) {
 179     height: $input-height-lg;
 180   }
 181 }
 182
 183
 184 // Form groups
 185 //
 186 // Designed to help with the organization and spacing of vertical forms. For
 187 // horizontal forms, use the predefined grid classes.
 188
 189 .form-group {
 190   margin-bottom: $form-group-margin-bottom;
 191 }
 192
 193 .form-text {
 194   display: block;
 195   margin-top: $form-text-margin-top;
 196 }
 197
 198
 199 // Checkboxes and radios
 200 //
 201 // Indent the labels to position radios/checkboxes as hanging controls.
 202
 203 .form-check {
 204   position: relative;
 205   display: block;
 206   margin-bottom: $form-check-margin-bottom;
 207
 208   &.disabled {
 209     .form-check-label {
 210       color: $text-muted;
 211       cursor: $cursor-disabled;
 212     }
 213   }
 214 }
 215
 216 .form-check-label {
 217   padding-left: $form-check-input-gutter;
 218   margin-bottom: 0; // Override default `<label>` bottom margin
 219   cursor: pointer;
 220 }
 221
 222 .form-check-input {
 223   position: absolute;
 224   margin-top: $form-check-input-margin-y;
 225   margin-left: -$form-check-input-gutter;
 226
 227   &:only-child {
 228     position: static;
 229   }
 230 }
 231
 232 // Radios and checkboxes on same line
 233 .form-check-inline {
 234   display: inline-block;
 235
 236   .form-check-label {
 237     vertical-align: middle;
 238   }
 239
 240   + .form-check-inline {
 241     margin-left: $form-check-inline-margin-x;
 242   }
 243 }
 244
 245
 246 // Form control feedback states
 247 //
 248 // Apply contextual and semantic states to individual form controls.
 249
 250 .form-control-feedback {
 251   margin-top: $form-feedback-margin-top;
 252 }
 253
 254 .form-control-success,
 255 .form-control-warning,
 256 .form-control-danger {
 257   padding-right: ($input-padding-x * 3);
 258   background-repeat: no-repeat;
 259   background-position: center right ($input-height / 4);
 260   background-size: ($input-height / 2) ($input-height / 2);
 261 }
 262
 263 // Form validation states
 264 .has-success {
 265   @include form-control-validation($brand-success);
 266
 267   .form-control-success {
 268     background-image: $form-icon-success;
 269   }
 270 }
 271
 272 .has-warning {
 273   @include form-control-validation($brand-warning);
 274
 275   .form-control-warning {
 276     background-image: $form-icon-warning;
 277   }
 278 }
 279
 280 .has-danger {
 281   @include form-control-validation($brand-danger);
 282
 283   .form-control-danger {
 284     background-image: $form-icon-danger;
 285   }
 286 }
 287
 288
 289 // Inline forms
 290 //
 291 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 292 // forms begin stacked on extra small (mobile) devices and then go inline when
 293 // viewports reach <768px.
 294 //
 295 // Requires wrapping inputs and labels with `.form-group` for proper display of
 296 // default HTML form controls and our custom form controls (e.g., input groups).
 297
 298 .form-inline {
 299   display: flex;
 300   flex-flow: row wrap;
 301   align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
 302
 303   // Because we use flex, the initial sizing of checkboxes is collapsed and
 304   // doesn't occupy the full-width (which is what we want for xs grid tier),
 305   // so we force that here.
 306   .form-check {
 307     width: 100%;
 308   }
 309
 310   // Kick in the inline
 311   @include media-breakpoint-up(sm) {
 312     label {
 313       display: flex;
 314       align-items: center;
 315       justify-content: center;
 316       margin-bottom: 0;
 317     }
 318
 319     // Inline-block all the things for "inline"
 320     .form-group {
 321       display: flex;
 322       flex: 0 0 auto;
 323       flex-flow: row wrap;
 324       align-items: center;
 325       margin-bottom: 0;
 326     }
 327
 328     // Allow folks to *not* use `.form-group`
 329     .form-control {
 330       display: inline-block;
 331       width: auto; // Prevent labels from stacking above inputs in `.form-group`
 332       vertical-align: middle;
 333     }
 334
 335     // Make static controls behave like regular ones
 336     .form-control-static {
 337       display: inline-block;
 338     }
 339
 340     .input-group {
 341       width: auto;
 342     }
 343
 344     .form-control-label {
 345       margin-bottom: 0;
 346       vertical-align: middle;
 347     }
 348
 349     // Remove default margin on radios/checkboxes that were used for stacking, and
 350     // then undo the floating of radios and checkboxes to match.
 351     .form-check {
 352       display: flex;
 353       align-items: center;
 354       justify-content: center;
 355       width: auto;
 356       margin-top: 0;
 357       margin-bottom: 0;
 358     }
 359     .form-check-label {
 360       padding-left: 0;
 361     }
 362     .form-check-input {
 363       position: relative;
 364       margin-top: 0;
 365       margin-right: $form-check-input-margin-x;
 366       margin-left: 0;
 367     }
 368
 369     // Custom form controls
 370     .custom-control {
 371       display: flex;
 372       align-items: center;
 373       justify-content: center;
 374       padding-left: 0;
 375     }
 376     .custom-control-indicator {
 377       position: static;
 378       display: inline-block;
 379       margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
 380       vertical-align: text-bottom;
 381     }
 382
 383     // Re-override the feedback icon.
 384     .has-feedback .form-control-feedback {
 385       top: 0;
 386     }
 387   }
 388 }