Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 1... Línea -...
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
 1 
// 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
 2 
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
- 
 
 3 
 
- 
 
 4 
// scss-docs-start form-validation-mixins
31 
@mixin form-validation-state-selector($state) {
 5 
@mixin form-validation-state-selector($state) {
32 
  @if ($state == "valid" or $state == "invalid") {
 6 
  @if ($state == "valid" or $state == "invalid") {
33 
    .was-validated #{if(&, "&", "")}:#{$state},
 7 
    .was-validated #{if(&, "&", "")}:#{$state},
34 
    #{if(&, "&", "")}.is-#{$state} {
 8 
    #{if(&, "&", "")}.is-#{$state} {
35 
      @content;
 9 
      @content;
Línea 39... Línea 13...
39 
      @content;
 13 
      @content;
40 
    }
 14 
    }
41 
  }
 15 
  }
42 
}
 16 
}
Línea 43... Línea 17...
43 
 
 17 
 
- 
 
 18 
@mixin form-validation-state(
- 
 
 19 
  $state,
- 
 
 20 
  $color,
- 
 
 21 
  $icon,
- 
 
 22 
  $tooltip-color: color-contrast($color),
- 
 
 23 
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
- 
 
 24 
  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
- 
 
 25 
  $border-color: $color
44 
@mixin form-validation-state($state, $color, $icon) {
 26 
) {
45 
  .#{$state}-feedback {
 27 
  .#{$state}-feedback {
46 
    display: none;
 28 
    display: none;
47 
    width: 100%;
 29 
    width: 100%;
48 
    margin-top: $form-feedback-margin-top;
 30 
    margin-top: $form-feedback-margin-top;
- 
 
 31 
    @include font-size($form-feedback-font-size);
49 
    @include font-size($form-feedback-font-size);
 32 
    font-style: $form-feedback-font-style;
50 
    color: $color;
 33 
    color: $color;
Línea 51... Línea 34...
51 
  }
 34 
  }
52 
 
 35 
 
53 
  .#{$state}-tooltip {
 36 
  .#{$state}-tooltip {
54 
    position: absolute;
 - 
 
55 
    top: 100%;
 37 
    position: absolute;
56 
    left: 0;
 38 
    top: 100%;
57 
    z-index: 5;
 39 
    z-index: 5;
58 
    display: none;
 40 
    display: none;
59 
    max-width: 100%; // Contain to parent when possible
 41 
    max-width: 100%; // Contain to parent when possible
60 
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
 42 
    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
61 
    margin-top: .1rem;
 43 
    margin-top: .1rem;
62 
    @include font-size($form-feedback-tooltip-font-size);
 44 
    @include font-size($form-feedback-tooltip-font-size);
63 
    line-height: $form-feedback-tooltip-line-height;
 45 
    line-height: $form-feedback-tooltip-line-height;
64 
    color: color-yiq($color);
 46 
    color: $tooltip-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 > &,
 - 
 
71 
    .form-row > [class*="col-"] > & {
 - 
 
72 
      left: $form-grid-gutter-width * .5;
 47 
    background-color: $tooltip-bg-color;
Línea 73... Línea 48...
73 
    }
 48 
    @include border-radius($form-feedback-tooltip-border-radius);
74 
  }
 49 
  }
75 
 
 50 
 
Línea 80... Línea 55...
80 
    }
 55 
    }
81 
  }
 56 
  }
Línea 82... Línea 57...
82 
 
 57 
 
83 
  .form-control {
 58 
  .form-control {
84 
    @include form-validation-state-selector($state) {
 59 
    @include form-validation-state-selector($state) {
Línea 85... Línea 60...
85 
      border-color: $color;
 60 
      border-color: $border-color;
86 
 
 61 
 
87 
      @if $enable-validation-icons {
 62 
      @if $enable-validation-icons {
88 
        padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
 63 
        padding-right: $input-height-inner;
89 
        background-image: escape-svg($icon);
 64 
        background-image: escape-svg($icon);
90 
        background-repeat: no-repeat;
 65 
        background-repeat: no-repeat;
91 
        background-position: right $input-height-inner-quarter center;
 66 
        background-position: right $input-height-inner-quarter center;
Línea 92... Línea 67...
92 
        background-size: $input-height-inner-half $input-height-inner-half;
 67 
        background-size: $input-height-inner-half $input-height-inner-half;
93 
      }
 68 
      }
94 
 
 - 
 
95 
      &:focus {
 - 
 
96 
        border-color: $color;
 - 
 
97 
        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 - 
 
98 
      }
 - 
 
99 
    }
 - 
 
100 
  }
 69 
 
101 
 
 70 
      &:focus {
102 
  // stylelint-disable-next-line selector-no-qualifying-type
 71 
        border-color: $border-color;
103 
  select.form-control {
 72 
        @if $enable-shadows {
104 
    @include form-validation-state-selector($state) {
 73 
          @include box-shadow($input-box-shadow, $focus-box-shadow);
- 
 
 74 
        } @else {
105 
      @if $enable-validation-icons {
 75 
          // Avoid using mixin so we can pass custom focus shadow properly
106 
        padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
 76 
          box-shadow: $focus-box-shadow;
107 
        background-position: right $input-padding-x * 2 center;
 77 
        }
Línea 108... Línea 78...
108 
      }
 78 
      }
Línea 117... Línea 87...
117 
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
 87 
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
118 
      }
 88 
      }
119 
    }
 89 
    }
120 
  }
 90 
  }
Línea 121... Línea 91...
121 
 
 91 
 
122 
  .custom-select {
 92 
  .form-select {
123 
    @include form-validation-state-selector($state) {
 93 
    @include form-validation-state-selector($state) {
Línea 124... Línea 94...
124 
      border-color: $color;
 94 
      border-color: $border-color;
- 
 
 95 
 
- 
 
 96 
      @if $enable-validation-icons {
- 
 
 97 
        &:not([multiple]):not([size]),
125 
 
 98 
        &:not([multiple])[size="1"] {
126 
      @if $enable-validation-icons {
 99 
          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
- 
 
 100 
          padding-right: $form-select-feedback-icon-padding-end;
- 
 
 101 
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
127 
        padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
 102 
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
Línea 128... Línea 103...
128 
        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
 103 
        }
129 
      }
 104 
      }
- 
 
 105 
 
- 
 
 106 
      &:focus {
- 
 
 107 
        border-color: $border-color;
- 
 
 108 
        @if $enable-shadows {
130 
 
 109 
          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
- 
 
 110 
        } @else {
131 
      &:focus {
 111 
          // Avoid using mixin so we can pass custom focus shadow properly
132 
        border-color: $color;
 112 
          box-shadow: $focus-box-shadow;
133 
        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 113 
        }
Línea 134... Línea 114...
134 
      }
 114 
      }
135 
    }
 115 
    }
136 
  }
 116 
  }
137 
 
 117 
 
138 
  .form-check-input {
 - 
 
139 
    @include form-validation-state-selector($state) {
 - 
 
140 
      ~ .form-check-label {
 - 
 
141 
        color: $color;
 - 
 
142 
      }
 - 
 
143 
 
 118 
  .form-control-color {
144 
      ~ .#{$state}-feedback,
 119 
    @include form-validation-state-selector($state) {
145 
      ~ .#{$state}-tooltip {
 120 
      @if $enable-validation-icons {
Línea 146... Línea 121...
146 
        display: block;
 121 
        width: add($form-color-width, $input-height-inner);
147 
      }
 122 
      }
148 
    }
 - 
 
149 
  }
 - 
 
150 
 
 - 
 
151 
  .custom-control-input {
 - 
 
152 
    @include form-validation-state-selector($state) {
 123 
    }
153 
      ~ .custom-control-label {
 - 
 
154 
        color: $color;
 - 
 
Línea 155... Línea 124...
155 
 
 124 
  }
156 
        &::before {
 - 
 
157 
          border-color: $color;
 125 
 
158 
        }
 - 
 
159 
      }
 - 
 
160 
 
 126 
  .form-check-input {
Línea 161... Línea 127...
161 
      &:checked {
 127 
    @include form-validation-state-selector($state) {
162 
        ~ .custom-control-label::before {
 - 
 
163 
          border-color: lighten($color, 10%);
 128 
      border-color: $border-color;
164 
          @include gradient-bg(lighten($color, 10%));
 129 
 
Línea 165... Línea 130...
165 
        }
 130 
      &:checked {
166 
      }
 131 
        background-color: $color;
167 
 
 - 
 
168 
      &:focus {
 132 
      }
169 
        ~ .custom-control-label::before {
 133 
 
170 
          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
 134 
      &:focus {
- 
 
 135 
        box-shadow: $focus-box-shadow;
- 
 
 136 
      }
- 
 
 137 
 
- 
 
 138 
      ~ .form-check-label {
- 
 
 139 
        color: $color;
Línea 171... Línea 140...
171 
        }
 140 
      }
- 
 
 141 
    }
172 
 
 142 
  }
173 
        &:not(:checked) ~ .custom-control-label::before {
 143 
  .form-check-inline .form-check-input {
174 
          border-color: $color;
 144 
    ~ .#{$state}-feedback {
175 
        }
 145 
      margin-left: .5em;
176 
      }
 - 
 
177 
    }
 - 
 
178 
  }
 146 
    }
179 
 
 147 
  }
180 
  // custom file
 148 
 
181 
  .custom-file-input {
 - 
 
182 
    @include form-validation-state-selector($state) {
 149 
  .input-group {
183 
      ~ .custom-file-label {
 150 
    > .form-control:not(:focus),
184 
        border-color: $color;
 151 
    > .form-select:not(:focus),
185 
      }
 152 
    > .form-floating:not(:focus-within) {
186 
 
 153 
      @include form-validation-state-selector($state) {
- 
 
 154 
        @if $state == "valid" {