resources/tools/dash/app/pal/static/sass/bootstrap/forms/_form-control.scss

   1 //
   2 // General form controls (plus a few specific high-level interventions)
   3 //
   4
   5 .form-control {
   6   display: block;
   7   width: 100%;
   8   padding: $input-padding-y $input-padding-x;
   9   font-family: $input-font-family;
  10   @include font-size($input-font-size);
  11   font-weight: $input-font-weight;
  12   line-height: $input-line-height;
  13   color: $input-color;
  14   background-color: $input-bg;
  15   background-clip: padding-box;
  16   border: $input-border-width solid $input-border-color;
  17   appearance: none; // Fix appearance for date inputs in Safari
  18
  19   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  20   @include border-radius($input-border-radius, 0);
  21
  22   @include box-shadow($input-box-shadow);
  23   @include transition($input-transition);
  24
  25   &[type="file"] {
  26     overflow: hidden; // prevent pseudo element button overlap
  27
  28     &:not(:disabled):not([readonly]) {
  29       cursor: pointer;
  30     }
  31   }
  32
  33   // Customize the `:focus` state to imitate native WebKit styles.
  34   &:focus {
  35     color: $input-focus-color;
  36     background-color: $input-focus-bg;
  37     border-color: $input-focus-border-color;
  38     outline: 0;
  39     @if $enable-shadows {
  40       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
  41     } @else {
  42       // Avoid using mixin so we can pass custom focus shadow properly
  43       box-shadow: $input-focus-box-shadow;
  44     }
  45   }
  46
  47   // Add some height to date inputs on iOS
  48   // https://github.com/twbs/bootstrap/issues/23307
  49   // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
  50   &::-webkit-date-and-time-value {
  51     // Multiply line-height by 1em if it has no unit
  52     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
  53   }
  54
  55   // Placeholder
  56   &::placeholder {
  57     color: $input-placeholder-color;
  58     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  59     opacity: 1;
  60   }
  61
  62   // Disabled inputs
  63   //
  64   // HTML5 says that controls under a fieldset > legend:first-child won't be
  65   // disabled if the fieldset is disabled. Due to implementation difficulty, we
  66   // don't honor that edge case; we style them as disabled anyway.
  67   &:disabled {
  68     color: $input-disabled-color;
  69     background-color: $input-disabled-bg;
  70     border-color: $input-disabled-border-color;
  71     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  72     opacity: 1;
  73   }
  74
  75   // File input buttons theming
  76   &::file-selector-button {
  77     padding: $input-padding-y $input-padding-x;
  78     margin: (-$input-padding-y) (-$input-padding-x);
  79     margin-inline-end: $input-padding-x;
  80     color: $form-file-button-color;
  81     @include gradient-bg($form-file-button-bg);
  82     pointer-events: none;
  83     border-color: inherit;
  84     border-style: solid;
  85     border-width: 0;
  86     border-inline-end-width: $input-border-width;
  87     border-radius: 0; // stylelint-disable-line property-disallowed-list
  88     @include transition($btn-transition);
  89   }
  90
  91   &:hover:not(:disabled):not([readonly])::file-selector-button {
  92     background-color: $form-file-button-hover-bg;
  93   }
  94 }
  95
  96 // Readonly controls as plain text
  97 //
  98 // Apply class to a readonly input to make it appear like regular plain
  99 // text (without any border, background color, focus indicator)
 100
 101 .form-control-plaintext {
 102   display: block;
 103   width: 100%;
 104   padding: $input-padding-y 0;
 105   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
 106   line-height: $input-line-height;
 107   color: $input-plaintext-color;
 108   background-color: transparent;
 109   border: solid transparent;
 110   border-width: $input-border-width 0;
 111
 112   &:focus {
 113     outline: 0;
 114   }
 115
 116   &.form-control-sm,
 117   &.form-control-lg {
 118     padding-right: 0;
 119     padding-left: 0;
 120   }
 121 }
 122
 123 // Form control sizing
 124 //
 125 // Build on `.form-control` with modifier classes to decrease or increase the
 126 // height and font-size of form controls.
 127 //
 128 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 129
 130 .form-control-sm {
 131   min-height: $input-height-sm;
 132   padding: $input-padding-y-sm $input-padding-x-sm;
 133   @include font-size($input-font-size-sm);
 134   @include border-radius($input-border-radius-sm);
 135
 136   &::file-selector-button {
 137     padding: $input-padding-y-sm $input-padding-x-sm;
 138     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
 139     margin-inline-end: $input-padding-x-sm;
 140   }
 141 }
 142
 143 .form-control-lg {
 144   min-height: $input-height-lg;
 145   padding: $input-padding-y-lg $input-padding-x-lg;
 146   @include font-size($input-font-size-lg);
 147   @include border-radius($input-border-radius-lg);
 148
 149   &::file-selector-button {
 150     padding: $input-padding-y-lg $input-padding-x-lg;
 151     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
 152     margin-inline-end: $input-padding-x-lg;
 153   }
 154 }
 155
 156 // Make sure textareas don't shrink too much when resized
 157 // https://github.com/twbs/bootstrap/pull/29124
 158 // stylelint-disable selector-no-qualifying-type
 159 textarea {
 160   &.form-control {
 161     min-height: $input-height;
 162   }
 163
 164   &.form-control-sm {
 165     min-height: $input-height-sm;
 166   }
 167
 168   &.form-control-lg {
 169     min-height: $input-height-lg;
 170   }
 171 }
 172 // stylelint-enable selector-no-qualifying-type
 173
 174 .form-control-color {
 175   width: $form-color-width;
 176   height: $input-height;
 177   padding: $input-padding-y;
 178
 179   &:not(:disabled):not([readonly]) {
 180     cursor: pointer;
 181   }
 182
 183   &::-moz-color-swatch {
 184     border: 0 !important; // stylelint-disable-line declaration-no-important
 185     @include border-radius($input-border-radius);
 186   }
 187
 188   &::-webkit-color-swatch {
 189     @include border-radius($input-border-radius);
 190   }
 191
 192   &.form-control-sm { height: $input-height-sm; }
 193   &.form-control-lg { height: $input-height-lg; }
 194 }