bootstrap/forms/_form-control.scss

0001 //
0002 // General form controls (plus a few specific high-level interventions)
0003 //
0004
0005 .form-control {
0006   display: block;
0007   width: 100%;
0008   padding: $input-padding-y $input-padding-x;
0009   font-family: $input-font-family;
0010   @include font-size($input-font-size);
0011   font-weight: $input-font-weight;
0012   line-height: $input-line-height;
0013   color: $input-color;
0014   background-color: $input-bg;
0015   background-clip: padding-box;
0016   border: $input-border-width solid $input-border-color;
0017   appearance: none; // Fix appearance for date inputs in Safari
0018
0019   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
0020   @include border-radius($input-border-radius, 0);
0021
0022   @include box-shadow($input-box-shadow);
0023   @include transition($input-transition);
0024
0025   &[type="file"] {
0026     overflow: hidden; // prevent pseudo element button overlap
0027
0028     &:not(:disabled):not([readonly]) {
0029       cursor: pointer;
0030     }
0031   }
0032
0033   // Customize the `:focus` state to imitate native WebKit styles.
0034   &:focus {
0035     color: $input-focus-color;
0036     background-color: $input-focus-bg;
0037     border-color: $input-focus-border-color;
0038     outline: 0;
0039     @if $enable-shadows {
0040       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
0041     } @else {
0042       // Avoid using mixin so we can pass custom focus shadow properly
0043       box-shadow: $input-focus-box-shadow;
0044     }
0045   }
0046
0047   // Add some height to date inputs on iOS
0048   // https://github.com/twbs/bootstrap/issues/23307
0049   // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
0050   &::-webkit-date-and-time-value {
0051     // Multiply line-height by 1em if it has no unit
0052     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
0053   }
0054
0055   // Placeholder
0056   &::placeholder {
0057     color: $input-placeholder-color;
0058     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
0059     opacity: 1;
0060   }
0061
0062   // Disabled and read-only inputs
0063   //
0064   // HTML5 says that controls under a fieldset > legend:first-child won't be
0065   // disabled if the fieldset is disabled. Due to implementation difficulty, we
0066   // don't honor that edge case; we style them as disabled anyway.
0067   &:disabled,
0068   &[readonly] {
0069     background-color: $input-disabled-bg;
0070     border-color: $input-disabled-border-color;
0071     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
0072     opacity: 1;
0073   }
0074
0075   // File input buttons theming
0076   // stylelint-disable-next-line selector-pseudo-element-no-unknown
0077   &::file-selector-button {
0078     padding: $input-padding-y $input-padding-x;
0079     margin: (-$input-padding-y) (-$input-padding-x);
0080     margin-inline-end: $input-padding-x;
0081     color: $form-file-button-color;
0082     @include gradient-bg($form-file-button-bg);
0083     pointer-events: none;
0084     border-color: inherit;
0085     border-style: solid;
0086     border-width: 0;
0087     border-inline-end-width: $input-border-width;
0088     border-radius: 0; // stylelint-disable-line property-disallowed-list
0089     @include transition($btn-transition);
0090   }
0091
0092   // stylelint-disable-next-line selector-pseudo-element-no-unknown
0093   &:hover:not(:disabled):not([readonly])::file-selector-button {
0094     background-color: $form-file-button-hover-bg;
0095   }
0096
0097   &::-webkit-file-upload-button {
0098     padding: $input-padding-y $input-padding-x;
0099     margin: (-$input-padding-y) (-$input-padding-x);
0100     margin-inline-end: $input-padding-x;
0101     color: $form-file-button-color;
0102     @include gradient-bg($form-file-button-bg);
0103     pointer-events: none;
0104     border-color: inherit;
0105     border-style: solid;
0106     border-width: 0;
0107     border-inline-end-width: $input-border-width;
0108     border-radius: 0; // stylelint-disable-line property-disallowed-list
0109     @include transition($btn-transition);
0110   }
0111
0112   &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
0113     background-color: $form-file-button-hover-bg;
0114   }
0115 }
0116
0117 // Readonly controls as plain text
0118 //
0119 // Apply class to a readonly input to make it appear like regular plain
0120 // text (without any border, background color, focus indicator)
0121
0122 .form-control-plaintext {
0123   display: block;
0124   width: 100%;
0125   padding: $input-padding-y 0;
0126   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
0127   line-height: $input-line-height;
0128   color: $input-plaintext-color;
0129   background-color: transparent;
0130   border: solid transparent;
0131   border-width: $input-border-width 0;
0132
0133   &.form-control-sm,
0134   &.form-control-lg {
0135     padding-right: 0;
0136     padding-left: 0;
0137   }
0138 }
0139
0140 // Form control sizing
0141 //
0142 // Build on `.form-control` with modifier classes to decrease or increase the
0143 // height and font-size of form controls.
0144 //
0145 // Repeated in `_input_group.scss` to avoid Sass extend issues.
0146
0147 .form-control-sm {
0148   min-height: $input-height-sm;
0149   padding: $input-padding-y-sm $input-padding-x-sm;
0150   @include font-size($input-font-size-sm);
0151   @include border-radius($input-border-radius-sm);
0152
0153   // stylelint-disable-next-line selector-pseudo-element-no-unknown
0154   &::file-selector-button {
0155     padding: $input-padding-y-sm $input-padding-x-sm;
0156     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
0157     margin-inline-end: $input-padding-x-sm;
0158   }
0159
0160   &::-webkit-file-upload-button {
0161     padding: $input-padding-y-sm $input-padding-x-sm;
0162     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
0163     margin-inline-end: $input-padding-x-sm;
0164   }
0165 }
0166
0167 .form-control-lg {
0168   min-height: $input-height-lg;
0169   padding: $input-padding-y-lg $input-padding-x-lg;
0170   @include font-size($input-font-size-lg);
0171   @include border-radius($input-border-radius-lg);
0172
0173   // stylelint-disable-next-line selector-pseudo-element-no-unknown
0174   &::file-selector-button {
0175     padding: $input-padding-y-lg $input-padding-x-lg;
0176     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
0177     margin-inline-end: $input-padding-x-lg;
0178   }
0179
0180   &::-webkit-file-upload-button {
0181     padding: $input-padding-y-lg $input-padding-x-lg;
0182     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
0183     margin-inline-end: $input-padding-x-lg;
0184   }
0185 }
0186
0187 // Make sure textareas don't shrink too much when resized
0188 // https://github.com/twbs/bootstrap/pull/29124
0189 // stylelint-disable selector-no-qualifying-type
0190 textarea {
0191   &.form-control {
0192     min-height: $input-height;
0193   }
0194
0195   &.form-control-sm {
0196     min-height: $input-height-sm;
0197   }
0198
0199   &.form-control-lg {
0200     min-height: $input-height-lg;
0201   }
0202 }
0203 // stylelint-enable selector-no-qualifying-type
0204
0205 .form-control-color {
0206   max-width: 3rem;
0207   height: auto; // Override fixed browser height
0208   padding: $input-padding-y;
0209
0210   &:not(:disabled):not([readonly]) {
0211     cursor: pointer;
0212   }
0213
0214   &::-moz-color-swatch {
0215     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
0216     @include border-radius($input-border-radius);
0217   }
0218
0219   &::-webkit-color-swatch {
0220     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
0221     @include border-radius($input-border-radius);
0222   }
0223 }