Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_forms.scss 5.68 KiB
1 
// Form control focus state
2 
//
3 
// Generate a customized focus state and for any input with the specified color,
4 
// which defaults to the `$input-focus-border-color` variable.
5 
//
6 
// We highly encourage you to not customize the default value, but instead use
7 
// this to tweak colors on an as-needed basis. This aesthetic change is based on
8 
// WebKit's default styles, but applicable to a wider range of browsers. Its
9 
// usability and accessibility should be taken into account with any change.
10 
//
11 
// Example usage: change the default blue border and shadow to white for better
12 
// contrast against a dark gray background.
13 
@mixin form-control-focus($ignore-warning: false) {
14 
  &:focus {
15 
    color: $input-focus-color;
16 
    background-color: $input-focus-bg;
17 
    border-color: $input-focus-border-color;
18 
    outline: 0;
19 
    @if $enable-shadows {
20 
      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
21 
    } @else {
22 
      // Avoid using mixin so we can pass custom focus shadow properly
23 
      box-shadow: $input-focus-box-shadow;
24 
    }
25 
  }
26 
  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
27 
}
28
29 
// This mixin uses an `if()` technique to be compatible with Dart Sass
30 
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
31 
@mixin form-validation-state-selector($state) {
32 
  @if ($state == "valid" or $state == "invalid") {
33 
    .was-validated #{if(&, "&", "")}:#{$state},
34 
    #{if(&, "&", "")}.is-#{$state} {
35 
      @content;
36 
    }
37 
  } @else {
38 
    #{if(&, "&", "")}.is-#{$state} {
39 
      @content;
40 
    }
41 
  }
42 
}
43
44 
@mixin form-validation-state($state, $color, $icon) {
45 
  .#{$state}-feedback {
46 
    display: none;
47 
    width: 100%;
48 
    margin-top: $form-feedback-margin-top;
49 
    @include font-size($form-feedback-font-size);
50 
    color: $color;
51 
  }
52
53 
  .#{$state}-tooltip {
54 
    position: absolute;
55 
    top: 100%;
56 
    left: 0;
57 
    z-index: 5;
58 
    display: none;
59 
    max-width: 100%; // Contain to parent when possible
60 
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
61 
    margin-top: .1rem;
62 
    @include font-size($form-feedback-tooltip-font-size);
63 
    line-height: $form-feedback-tooltip-line-height;
64 
    color: color-yiq($color);
65 
    background-color: rgba($color, $form-feedback-tooltip-opacity);
66 
    @include border-radius($form-feedback-tooltip-border-radius);
67
68 
    // See https://github.com/twbs/bootstrap/pull/31557
69 
    // Align tooltip to form elements
70 
    .form-row > .col > &,
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
.form-row > [class*="col-"] > & { left: $form-grid-gutter-width * .5; } } @include form-validation-state-selector($state) { ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } .form-control { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } // stylelint-disable-next-line selector-no-qualifying-type select.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important background-position: right $input-padding-x * 2 center; } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .custom-select { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; } &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } .form-check-input { @include form-validation-state-selector($state) { ~ .form-check-label {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
color: $color; } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .custom-control-input { @include form-validation-state-selector($state) { ~ .custom-control-label { color: $color; &::before { border-color: $color; } } &:checked { ~ .custom-control-label::before { border-color: lighten($color, 10%); @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } &:not(:checked) ~ .custom-control-label::before { border-color: $color; } } } } // custom file .custom-file-input { @include form-validation-state-selector($state) { ~ .custom-file-label { border-color: $color; } &:focus { ~ .custom-file-label { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } } }