corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 office 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() {
14 &:focus {
15 color: $input-focus-color;
16 background-color: $input-focus-bg;
17 border-color: $input-focus-border-color;
18 outline: 0;
19 // Avoid using mixin so we can pass custom focus shadow properly
20 @if $enable-shadows {
21 box-shadow: $input-box-shadow, $input-focus-box-shadow;
22 } @else {
23 box-shadow: $input-focus-box-shadow;
24 }
25 }
26 }
27  
28  
29 @mixin form-validation-state($state, $color) {
30 .#{$state}-feedback {
31 display: none;
32 width: 100%;
33 margin-top: $form-feedback-margin-top;
34 font-size: $form-feedback-font-size;
35 color: $color;
36 }
37  
38 .#{$state}-tooltip {
39 position: absolute;
40 top: 100%;
41 z-index: 5;
42 display: none;
43 max-width: 100%; // Contain to parent when possible
44 padding: $tooltip-padding-y $tooltip-padding-x;
45 margin-top: .1rem;
46 font-size: $tooltip-font-size;
47 line-height: $line-height-base;
48 color: color-yiq($color);
49 background-color: rgba($color, $tooltip-opacity);
50 @include border-radius($tooltip-border-radius);
51 }
52  
53 .form-control,
54 .custom-select {
55 .was-validated &:#{$state},
56 &.is-#{$state} {
57 border-color: $color;
58  
59 &:focus {
60 border-color: $color;
61 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
62 }
63  
64 ~ .#{$state}-feedback,
65 ~ .#{$state}-tooltip {
66 display: block;
67 }
68 }
69 }
70  
71 .form-control-file {
72 .was-validated &:#{$state},
73 &.is-#{$state} {
74 ~ .#{$state}-feedback,
75 ~ .#{$state}-tooltip {
76 display: block;
77 }
78 }
79 }
80  
81 .form-check-input {
82 .was-validated &:#{$state},
83 &.is-#{$state} {
84 ~ .form-check-label {
85 color: $color;
86 }
87  
88 ~ .#{$state}-feedback,
89 ~ .#{$state}-tooltip {
90 display: block;
91 }
92 }
93 }
94  
95 .custom-control-input {
96 .was-validated &:#{$state},
97 &.is-#{$state} {
98 ~ .custom-control-label {
99 color: $color;
100  
101 &::before {
102 background-color: lighten($color, 25%);
103 }
104 }
105  
106 ~ .#{$state}-feedback,
107 ~ .#{$state}-tooltip {
108 display: block;
109 }
110  
111 &:checked {
112 ~ .custom-control-label::before {
113 @include gradient-bg(lighten($color, 10%));
114 }
115 }
116  
117 &:focus {
118 ~ .custom-control-label::before {
119 box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
120 }
121 }
122 }
123 }
124  
125 // custom file
126 .custom-file-input {
127 .was-validated &:#{$state},
128 &.is-#{$state} {
129 ~ .custom-file-label {
130 border-color: $color;
131  
132 &::after { border-color: inherit; }
133 }
134  
135 ~ .#{$state}-feedback,
136 ~ .#{$state}-tooltip {
137 display: block;
138 }
139  
140 &:focus {
141 ~ .custom-file-label {
142 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
143 }
144 }
145 }
146 }
147 }