Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

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