bootstrap/scss/forms/_form-control.scss

@use "sass:math";
@use "../config" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/color-mode" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/gradients" as *;
@use "../mixins/transition" as *;
@use "form-variables" as *;

@layer forms {
  .form-control {
    --#{$prefix}control-min-height: #{$control-min-height};
    --#{$prefix}control-padding-y: #{$control-padding-y};
    --#{$prefix}control-padding-x: #{$control-padding-x};
    --#{$prefix}control-font-size: #{$control-font-size};
    --#{$prefix}control-line-height: #{$control-line-height};
    --#{$prefix}control-color: #{$control-color};
    --#{$prefix}control-bg: #{$control-bg};
    --#{$prefix}control-border-width: #{$control-border-width};
    --#{$prefix}control-border-color: #{$control-border-color};
    --#{$prefix}control-border-radius: #{$control-border-radius};
    --#{$prefix}control-select-bg-color: #{$control-select-indicator-color};
    --#{$prefix}control-select-bg: #{escape-svg($control-select-indicator)};
    --#{$prefix}control-select-bg-position: #{$control-select-bg-position};
    --#{$prefix}control-select-bg-size: #{$control-select-bg-size};

    display: block;
    width: 100%;
    min-height: var(--#{$prefix}control-min-height);
    padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
    font-size: var(--#{$prefix}control-font-size);
    line-height: var(--#{$prefix}control-line-height);
    color: var(--#{$prefix}control-color);
    appearance: none;
    background-color: var(--#{$prefix}control-bg);
    background-clip: padding-box;
    border: var(--#{$prefix}control-border-width) solid var(--#{$prefix}control-border-color);
    @include border-radius(var(--#{$prefix}control-border-radius), 0);
    @include box-shadow($input-box-shadow);
    @include transition($input-transition);

    &[type="file"] {
      overflow: hidden; // prevent pseudo element button overlap

      &:not(:disabled):not([readonly]) {
        cursor: pointer;
      }
    }

    // Customize the `:focus` state to imitate native WebKit styles.
    &:focus-visible {
      color: $input-focus-color;
      background-color: $input-focus-bg;
      border-color: $input-focus-border-color;
      @include focus-ring(true);
    }

    &::-webkit-date-and-time-value {
      // On Android Chrome, form-control's "width: 100%" makes the input width too small
      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
      //
      // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
      // Tested under iOS 16.2 / Safari 16.2
      min-width: 85px; // Seems to be a good minimum safe width

      // Add some height to date inputs on iOS
      // https://github.com/twbs/bootstrap/issues/23307
      // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
      // Multiply line-height by 1em if it has no unit
      height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);

      // Android Chrome type="date" is taller than the other inputs
      // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
      margin: 0;
    }

    // Prevent excessive date input height in Webkit
    // https://github.com/twbs/bootstrap/issues/34433
    &::-webkit-datetime-edit {
      display: block;
      padding: 0;
    }

    // Placeholder
    &::placeholder {
      color: $input-placeholder-color;
      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
      opacity: 1;
    }

    // Disabled inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &:disabled {
      color: $input-disabled-color;
      background-color: $input-disabled-bg;
      border-color: $input-disabled-border-color;
      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
      opacity: 1;
    }

    // File input buttons theming
    &::file-selector-button {
      min-height: var(--#{$prefix}control-min-height);
      padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
      margin: calc(var(--#{$prefix}control-padding-y) * -1) calc(var(--#{$prefix}control-padding-x) * -1);
      margin-inline-end: var(--#{$prefix}control-padding-x);
      color: $form-file-button-color;
      @include gradient-bg($form-file-button-bg);
      pointer-events: none;
      border-color: inherit;
      border-style: solid;
      border-width: 0;
      border-inline-end-width: var(--#{$prefix}control-border-width);
      border-radius: 0; // stylelint-disable-line property-disallowed-list
      @include transition($btn-transition);
    }

    &:hover:not(:disabled):not([readonly])::file-selector-button {
      background-color: $form-file-button-hover-bg;
    }
  }

  // Readonly controls as plain text
  //
  // Apply class to a readonly input to make it appear like regular plain
  // text (without any border, background color, focus indicator)

  .form-control-plaintext {
    display: block;
    width: 100%;
    padding: $input-padding-y 0;
    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
    line-height: $input-line-height;
    color: $input-plaintext-color;
    background-color: transparent;
    border: solid transparent;
    border-width: $input-border-width 0;

    &:focus {
      outline: 0;
    }

    &.form-control-sm,
    &.form-control-lg {
      padding-right: 0;
      padding-left: 0;
    }
  }

  // stylelint-disable selector-no-qualifying-type
  select.form-control {
    padding-right: calc(var(--#{$prefix}control-padding-x) * 3);
    background-image: var(--#{$prefix}control-select-bg);
    background-repeat: no-repeat;
    background-position: var(--#{$prefix}control-select-bg-position);
    background-size: var(--#{$prefix}control-select-bg-size);

    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: var(--#{$prefix}control-padding-x);
      background-image: none;
    }

    @if $enable-dark-mode {
      @include color-mode(dark) {
        --#{$prefix}control-select-indicator: #{escape-svg($control-select-indicator-dark)};
      }
    }
  }
  // stylelint-enable selector-no-qualifying-type

  // Form control sizing
  //
  // Build on `.form-control` with modifier classes to decrease or increase the
  // height and font-size of form controls.
  //
  // Repeated in `_input_group.scss` to avoid Sass extend issues.

  .form-control-sm {
    --#{$prefix}control-min-height: #{$control-min-height-sm};
    --#{$prefix}control-padding-y: #{$control-padding-y-sm};
    --#{$prefix}control-padding-x: #{$control-padding-x-sm};
    --#{$prefix}control-font-size: #{$control-font-size-sm};
    --#{$prefix}control-line-height: #{$control-line-height-sm};
    --#{$prefix}control-border-radius: #{$control-border-radius-sm};
  }

  .form-control-lg {
    --#{$prefix}control-min-height: #{$control-min-height-lg};
    --#{$prefix}control-padding-y: #{$control-padding-y-lg};
    --#{$prefix}control-padding-x: #{$control-padding-x-lg};
    --#{$prefix}control-font-size: #{$control-font-size-lg};
    --#{$prefix}control-line-height: #{$control-line-height-lg};
    --#{$prefix}control-border-radius: #{$control-border-radius-lg};
  }

  // // Make sure textareas don't shrink too much when resized
  // // https://github.com/twbs/bootstrap/pull/29124
  // // stylelint-disable selector-no-qualifying-type
  // textarea {
  //   &.form-control {
  //     min-height: $input-height;
  //   }

  //   &.form-control-sm {
  //     min-height: $input-height-sm;
  //   }

  //   &.form-control-lg {
  //     min-height: $input-height-lg;
  //   }
  // }
  // // stylelint-enable selector-no-qualifying-type

  .form-control-color {
    width: $form-color-width;
    height: $input-height;
    padding: $input-padding-y;

    &:not(:disabled):not([readonly]) {
      cursor: pointer;
    }

    &::-moz-color-swatch {
      border: 0 !important; // stylelint-disable-line declaration-no-important
      @include border-radius($input-border-radius);
    }

    &::-webkit-color-swatch {
      border: 0 !important; // stylelint-disable-line declaration-no-important
      @include border-radius($input-border-radius);
    }

    &.form-control-sm { height: $input-height-sm; }
    &.form-control-lg { height: $input-height-lg; }
  }
}