codekingpro/portable-devtools

1// stylelint-disable selector-no-qualifying-type2 3//4// Textual form controls5//6 7.form-control {8  display: block;9  width: 100%;10  height: $input-height;11  padding: $input-padding-y $input-padding-x;12  font-family: $input-font-family;13  @include font-size($input-font-size);14  font-weight: $input-font-weight;15  line-height: $input-line-height;16  color: $input-color;17  background-color: $input-bg;18  background-clip: padding-box;19  border: $input-border-width solid $input-border-color;20 21  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.22  @include border-radius($input-border-radius, 0);23 24  @include box-shadow($input-box-shadow);25  @include transition($input-transition);26 27  // Unstyle the caret on `<select>`s in IE10+.28  &::-ms-expand {29    background-color: transparent;30    border: 0;31  }32 33  // Customize the `:focus` state to imitate native WebKit styles.34  @include form-control-focus($ignore-warning: true);35 36  // Placeholder37  &::placeholder {38    color: $input-placeholder-color;39    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.40    opacity: 1;41  }42 43  // Disabled and read-only inputs44  //45  // HTML5 says that controls under a fieldset > legend:first-child won't be46  // disabled if the fieldset is disabled. Due to implementation difficulty, we47  // don't honor that edge case; we style them as disabled anyway.48  &:disabled,49  &[readonly] {50    background-color: $input-disabled-bg;51    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.52    opacity: 1;53  }54}55 56input[type="date"],57input[type="time"],58input[type="datetime-local"],59input[type="month"] {60  &.form-control {61    appearance: none; // Fix appearance for date inputs in Safari62  }63}64 65select.form-control {66  // Remove select outline from select box in FF67  &:-moz-focusring {68    color: transparent;69    text-shadow: 0 0 0 $input-color;70  }71 72  &:focus::-ms-value {73    // Suppress the nested default white text on blue background highlight given to74    // the selected option text when the (still closed) <select> receives focus75    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to76    // match the appearance of the native widget.77    // See https://github.com/twbs/bootstrap/issues/19398.78    color: $input-color;79    background-color: $input-bg;80  }81}82 83// Make file inputs better match text inputs by forcing them to new lines.84.form-control-file,85.form-control-range {86  display: block;87  width: 100%;88}89 90 91//92// Labels93//94 95// For use with horizontal and inline forms, when you need the label (or legend)96// text to align with the form controls.97.col-form-label {98  padding-top: add($input-padding-y, $input-border-width);99  padding-bottom: add($input-padding-y, $input-border-width);100  margin-bottom: 0; // Override the `<label>/<legend>` default101  @include font-size(inherit); // Override the `<legend>` default102  line-height: $input-line-height;103}104 105.col-form-label-lg {106  padding-top: add($input-padding-y-lg, $input-border-width);107  padding-bottom: add($input-padding-y-lg, $input-border-width);108  @include font-size($input-font-size-lg);109  line-height: $input-line-height-lg;110}111 112.col-form-label-sm {113  padding-top: add($input-padding-y-sm, $input-border-width);114  padding-bottom: add($input-padding-y-sm, $input-border-width);115  @include font-size($input-font-size-sm);116  line-height: $input-line-height-sm;117}118 119 120// Readonly controls as plain text121//122// Apply class to a readonly input to make it appear like regular plain123// text (without any border, background color, focus indicator)124 125.form-control-plaintext {126  display: block;127  width: 100%;128  padding: $input-padding-y 0;129  margin-bottom: 0; // match inputs if this class comes on inputs with default margins130  @include font-size($input-font-size);131  line-height: $input-line-height;132  color: $input-plaintext-color;133  background-color: transparent;134  border: solid transparent;135  border-width: $input-border-width 0;136 137  &.form-control-sm,138  &.form-control-lg {139    padding-right: 0;140    padding-left: 0;141  }142}143 144 145// Form control sizing146//147// Build on `.form-control` with modifier classes to decrease or increase the148// height and font-size of form controls.149//150// Repeated in `_input_group.scss` to avoid Sass extend issues.151 152.form-control-sm {153  height: $input-height-sm;154  padding: $input-padding-y-sm $input-padding-x-sm;155  @include font-size($input-font-size-sm);156  line-height: $input-line-height-sm;157  @include border-radius($input-border-radius-sm);158}159 160.form-control-lg {161  height: $input-height-lg;162  padding: $input-padding-y-lg $input-padding-x-lg;163  @include font-size($input-font-size-lg);164  line-height: $input-line-height-lg;165  @include border-radius($input-border-radius-lg);166}167 168// stylelint-disable-next-line no-duplicate-selectors169select.form-control {170  &[size],171  &[multiple] {172    height: auto;173  }174}175 176textarea.form-control {177  height: auto;178}179 180// Form groups181//182// Designed to help with the organization and spacing of vertical forms. For183// horizontal forms, use the predefined grid classes.184 185.form-group {186  margin-bottom: $form-group-margin-bottom;187}188 189.form-text {190  display: block;191  margin-top: $form-text-margin-top;192}193 194 195// Form grid196//197// Special replacement for our grid system's `.row` for tighter form layouts.198 199.form-row {200  display: flex;201  flex-wrap: wrap;202  margin-right: -$form-grid-gutter-width * .5;203  margin-left: -$form-grid-gutter-width * .5;204 205  > .col,206  > [class*="col-"] {207    padding-right: $form-grid-gutter-width * .5;208    padding-left: $form-grid-gutter-width * .5;209  }210}211 212 213// Checkboxes and radios214//215// Indent the labels to position radios/checkboxes as hanging controls.216 217.form-check {218  position: relative;219  display: block;220  padding-left: $form-check-input-gutter;221}222 223.form-check-input {224  position: absolute;225  margin-top: $form-check-input-margin-y;226  margin-left: -$form-check-input-gutter;227 228  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247229  &[disabled] ~ .form-check-label,230  &:disabled ~ .form-check-label {231    color: $text-muted;232  }233}234 235.form-check-label {236  margin-bottom: 0; // Override default `<label>` bottom margin237}238 239.form-check-inline {240  display: inline-flex;241  align-items: center;242  padding-left: 0; // Override base .form-check243  margin-right: $form-check-inline-margin-x;244 245  // Undo .form-check-input defaults and add some `margin-right`.246  .form-check-input {247    position: static;248    margin-top: 0;249    margin-right: $form-check-inline-input-margin-x;250    margin-left: 0;251  }252}253 254 255// Form validation256//257// Provide feedback to users when form field values are valid or invalid. Works258// primarily for client-side validation via scoped `:invalid` and `:valid`259// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for260// server side validation.261 262@each $state, $data in $form-validation-states {263  @include form-validation-state($state, map-get($data, color), map-get($data, icon));264}265 266// Inline forms267//268// Make forms appear inline(-block) by adding the `.form-inline` class. Inline269// forms begin stacked on extra small (mobile) devices and then go inline when270// viewports reach <768px.271//272// Requires wrapping inputs and labels with `.form-group` for proper display of273// default HTML form controls and our custom form controls (e.g., input groups).274 275.form-inline {276  display: flex;277  flex-flow: row wrap;278  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)279 280  // Because we use flex, the initial sizing of checkboxes is collapsed and281  // doesn't occupy the full-width (which is what we want for xs grid tier),282  // so we force that here.283  .form-check {284    width: 100%;285  }286 287  // Kick in the inline288  @include media-breakpoint-up(sm) {289    label {290      display: flex;291      align-items: center;292      justify-content: center;293      margin-bottom: 0;294    }295 296    // Inline-block all the things for "inline"297    .form-group {298      display: flex;299      flex: 0 0 auto;300      flex-flow: row wrap;301      align-items: center;302      margin-bottom: 0;303    }304 305    // Allow folks to *not* use `.form-group`306    .form-control {307      display: inline-block;308      width: auto; // Prevent labels from stacking above inputs in `.form-group`309      vertical-align: middle;310    }311 312    // Make static controls behave like regular ones313    .form-control-plaintext {314      display: inline-block;315    }316 317    .input-group,318    .custom-select {319      width: auto;320    }321 322    // Remove default margin on radios/checkboxes that were used for stacking, and323    // then undo the floating of radios and checkboxes to match.324    .form-check {325      display: flex;326      align-items: center;327      justify-content: center;328      width: auto;329      padding-left: 0;330    }331    .form-check-input {332      position: relative;333      flex-shrink: 0;334      margin-top: 0;335      margin-right: $form-check-input-margin-x;336      margin-left: 0;337    }338 339    .custom-control {340      align-items: center;341      justify-content: center;342    }343    .custom-control-label {344      margin-bottom: 0;345    }346  }347}348