github-docs 0.0.7 → 0.0.17

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,250 +0,0 @@
1
- $list-fade-time: 0s !default; // handy for list styling
2
- $option-color--active: $primary !default;
3
-
4
- /* ---- Main ------------------------- */
5
-
6
- .v-select {
7
- position: relative;
8
- }
9
- .vs__dropdown-toggle {
10
- // container for selected-choices & search-input & actions
11
- white-space: normal;
12
- cursor: pointer;
13
- padding-right: 32px;
14
- }
15
- .vs__selected-options {
16
- // container for selected-choices & search-input
17
- display: flex;
18
- flex-basis: 100%;
19
- flex-grow: 1;
20
- flex-wrap: wrap;
21
- position: relative;
22
- cursor: pointer;
23
- margin-bottom: -7px;
24
- }
25
-
26
- /* ---- Selected text / tag ---------- */
27
-
28
- .vs__selected {
29
- position: relative;
30
- align-items: center;
31
- background-color: #444444;
32
- color: #fff;
33
- border-radius: 4px;
34
- padding: 0px 2em 0px 0.8em;
35
- margin: 0 7px 7px 0;
36
- max-width: 90%;
37
- overflow: hidden;
38
- white-space: nowrap;
39
- text-overflow: ellipsis;
40
- }
41
- .vs--single .vs__selected {
42
- background-color: transparent;
43
- border: 0;
44
- color: inherit;
45
- padding: 0;
46
- }
47
- .vs--single .vs__selected {
48
- background-color: transparent;
49
- border-color: transparent;
50
- }
51
- .vs--single.vs--searchable .vs__selected {
52
- position: absolute;
53
- }
54
- .vs--single.vs--searchable.vs--open .vs__selected {
55
- position: absolute;
56
- opacity: .4;
57
- }
58
- .vs--single.vs--searching .vs__selected {
59
- display: none;
60
- }
61
- .vs__deselect { // x button on tags
62
- position: absolute;
63
- display: block;
64
- top: 50%;
65
- right: 0.3em;
66
- margin: -10px 0 0 0;
67
- padding: 5px;
68
- border: 0;
69
- cursor: pointer;
70
- background: none;
71
- fill: rgb(255, 255, 255);
72
- text-shadow: 0 1px 0 #fff;
73
- transition: all 0.2s ease;
74
- }
75
- .vs__deselect:hover {
76
- fill: rgb(220, 220, 220);
77
- }
78
-
79
- /* ---- Search input ----------------- */
80
-
81
- .vs__search,
82
- .vs__search:active,
83
- .vs__search:focus {
84
- width: 0;
85
- max-width: 100%;
86
- margin: 0;
87
- border: 0;
88
- padding: 0 !important;
89
- box-shadow: none;
90
- flex-grow: 1;
91
- cursor: pointer;
92
- -webkit-appearance: none;
93
- -moz-appearance: none;
94
- appearance: none;
95
- margin: 0 7px 7px 0;
96
- background: transparent;
97
- }
98
- .vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
99
- opacity: .2;
100
- }
101
-
102
- /* ---- Options ------------------------- */
103
-
104
- .vs__dropdown-menu {
105
- list-style: none;
106
- text-align: left;
107
- position: absolute;
108
- width: 100%;
109
- top: calc(100% - -5px);
110
- max-height: 336px;
111
- overflow-y: auto;
112
- font-size: 0.95rem;
113
- z-index: 5;
114
- background: #fff;
115
- padding: 1px;
116
- margin: 0 0 0 -1px;
117
- border-radius: 4px;
118
- box-shadow: rgba(0, 0, 0, 0.1) 0 1px 16px, inset rgba(60, 60, 60, 0.55) 0 0px 1px;
119
- background-clip: content-box;
120
- box-sizing: content-box;
121
- cursor: default;
122
-
123
- .vs__dropdown-option {
124
- position: relative;
125
- list-style: none;
126
- margin: 0px -1px;
127
- cursor: pointer;
128
- line-height: 1.4em;
129
- padding: 0.4em 0 0.5em 2em !important;
130
- overflow: hidden;
131
- /* white-space: nowrap; */
132
- /* text-overflow: ellipsis; */
133
- text-shadow: none;
134
- }
135
-
136
- /* First / last child */
137
-
138
- .vs__dropdown-option:first-child {
139
- margin: -1px -1px 0px -1px;
140
- border-top: 3px solid transparent;
141
- box-sizing: content-box;
142
- }
143
- .vs__dropdown-option:last-child {
144
- margin: 0px -1px -1px -1px;
145
- border-bottom: 2px solid transparent;
146
- box-sizing: content-box;
147
- }
148
- .vs__no-options,
149
- .vs__dropdown-option:last-child:first-child {
150
- box-shadow: none;
151
- margin: -1px -1px -1px -1px;
152
- border-top: 5px solid transparent;
153
- border-bottom: 5px solid transparent;
154
- }
155
- .vs__no-options {
156
- text-align: center;
157
- line-height: 2.2rem;
158
- }
159
-
160
- /* Hover */
161
- //.vs__dropdown-option:hover, arrow keys use highlight
162
- .vs__dropdown-option--highlight {
163
- color: #fff;
164
- background: $option-color--active;
165
- }
166
- .vs__dropdown-option--selected {
167
- color: #fff;
168
- background: darken($option-color--active, 6%);
169
- }
170
- }
171
- .v-select-no-wrap .vs__dropdown-option {
172
- white-space: nowrap;
173
- text-overflow: ellipsis;
174
- text-shadow: none;
175
- }
176
-
177
- /* Admin */
178
-
179
- .vs--special-first .vs__dropdown-option:first-child {
180
- background: #454545;//darken(#63b376, 5%);//#444
181
- color: #fff;
182
- }
183
- .vs--special-first .vs__dropdown-option--selected:first-child,
184
- .vs--special-first .vs__dropdown-option--highlight:first-child {
185
- background: #111;//darken(#63b376, 10%);
186
- }
187
-
188
- /* ---- Spinner ---------------------- */
189
-
190
- .vs__spinner {
191
- align-self: center;
192
- opacity: 0;
193
- font-size: 5px;
194
- text-indent: -9999em;
195
- overflow: hidden;
196
- border: .9em solid hsla(0, 0%, 39.2%, .1);
197
- border-left-color: rgba(60, 60, 60, .45);
198
- -webkit-transform: translateZ(0);
199
- transform: translateZ(0);
200
- -webkit-animation: vSpinner 1.1s linear infinite;
201
- animation: vSpinner 1.1s linear infinite;
202
- transition: opacity .1s;
203
- }
204
- .vs__spinner,
205
- .vs__spinner:after {
206
- border-radius: 50%;
207
- width: 5em;
208
- height: 5em;
209
- }
210
- .vs--loading .vs__spinner {
211
- opacity: 1;
212
- }
213
- @keyframes vSpinner {
214
- 0% {
215
- -webkit-transform: rotate(0deg);
216
- transform: rotate(0deg);
217
- }
218
- to {
219
- -webkit-transform: rotate(1turn);
220
- transform: rotate(1turn);
221
- }
222
- }
223
-
224
- /* ---- Misc ------------------------ */
225
-
226
- .vs__search::-ms-clear,
227
- .vs__search::-webkit-search-cancel-button,
228
- .vs__search::-webkit-search-decoration,
229
- .vs__search::-webkit-search-results-button,
230
- .vs__search::-webkit-search-results-decoration {
231
- display: none;
232
- }
233
- .vs__open-indicator {
234
- display: none;
235
- }
236
-
237
-
238
- /* Menu animation */
239
-
240
- .vs__fade-enter-active,
241
- .vs__fade-leave-active {
242
- transition: opacity 0s ease;
243
- }
244
- .vs__fade-leave-active {
245
- transition: opacity $list-fade-time 0s ease;
246
- }
247
- .vs__fade-enter,
248
- .vs__fade-leave-to {
249
- opacity: 0;
250
- }
@@ -1,567 +0,0 @@
1
- @function formDefaults($form) {
2
- // First, find variables that are referenced below
3
- $form: map-merge((
4
- "input-background": #fdfdfd,
5
- "input-border-color--active": $primary,
6
- "input-padding": 13px 19px,
7
- "toggle-height": 1.8em,
8
- ), $form);
9
-
10
- @return map-merge((
11
- // Error
12
- "error-font-size": 0.85rem,
13
- // Input
14
- "input-background": map-get($form, "input-background"),
15
- "input-background--active": map-get($form, "input-background"),
16
- "input-background--invalid": map-get($form, "input-background"),
17
- "input-border-color": #efefef,
18
- "input-border-color--active": map-get($form, "input-border-color--active"),
19
- "input-border-color--invalid": $danger,
20
- "input-border-radius": 4px,
21
- "input-border-width": 2px,
22
- "input-box-shadow": map-get($form, "input-box-shadow"),
23
- "input-box-shadow--active": map-get($form, "input-box-shadow"),
24
- "input-box-shadow--invalid": map-get($form, "input-box-shadow"),
25
- "input-color": $text,
26
- "input-color--invalid": $text,
27
- "input-font-family": $body-font-family,
28
- "input-font-size": 16px, // 0.95rem,
29
- "input-font-weight": inherit,
30
- "input-icon-width": 18px,
31
- "input-margin-bottom": 1.5rem,
32
- "input-padding": map-get($form, "input-padding"),
33
- "input-placeholder-color": rgba($text, 0.5),
34
- // Label
35
- "label-color": $text-light,
36
- "label-font-size": 0.85rem,
37
- "label-margin-bottom": 0.45rem,
38
- // Textarea
39
- "textarea-min-height": 7em,
40
- "textarea-padding": map-get($form, "input-padding"),
41
- // Variable inputs
42
- "variable-color": darken(map-get($form, "input-background"), 12%),
43
- "variable-color--active": map-get($form, "input-border-color--active"),
44
- "checkbox-height": 20px, // determines width
45
- "checkbox-inner-height": 10px, // determines width
46
- "checkbox-padding-left": 12px,
47
- "checkbox-padding-right": 16px,
48
- "toggle-height": map-get($form, "toggle-height"),
49
- "toggle-width": map-get($form, "toggle-height") * 1.8,
50
- ), $form);
51
- }
52
- @function empty-map($x: x) {
53
- @return map-remove(($x:$x), $x);
54
- }
55
- // Note that in SASS, a list with a single map == a map
56
- @if type-of($forms) == 'map' {
57
- $forms: append((), $forms);
58
- }
59
- @if (length($forms) == 0) {
60
- $forms: append($forms, empty-map());
61
- }
62
- @for $i from 1 through length($forms) {
63
- $form: nth($forms, $i);
64
- @if type-of($form) != map { $form: empty-map(); }
65
- $map: formDefaults($form);
66
- $class: ".form-#{$i}";
67
- @if $i == 1 { $class: ".form"; }
68
-
69
- #{$class} {
70
-
71
- /* ---- Main ------------------------- */
72
-
73
- input,
74
- select,
75
- textarea,
76
- .input,
77
- .vs__dropdown-toggle {
78
- width: 100%;
79
- padding: map-get($map, "input-padding");
80
- font-family: map-get($map, "input-font-family");
81
- color: map-get($map, "input-color");
82
- font-size: map-get($map, "input-font-size");
83
- font-weight: map-get($map, "input-font-weight");
84
- line-height: 1.5rem;
85
- background: map-get($map, "input-background");
86
- box-shadow:
87
- 0 0 0 map-get($map, "input-border-width") map-get($map, "input-border-color") inset,
88
- map-get($map, "input-box-shadow");
89
- border: 0;
90
- box-sizing: border-box;
91
- border-radius: map-get($map, "input-border-radius");
92
- vertical-align: top;
93
- transition: background-color ease 0.2s, border-color ease 0.2s, box-shadow ease 0.2s;
94
- -webkit-appearance: none;
95
- }
96
- .input,
97
- .input-grp,
98
- .radio-grp,
99
- .checkbox-grp,
100
- .toggle-grp {
101
- margin-bottom: map-get($map, "input-margin-bottom");
102
- }
103
- input[type="password"]:not(:placeholder-shown) {
104
- letter-spacing: 1px;
105
- }
106
- input[type="file"] {
107
- // padding: 10px 19px 11px;
108
- }
109
- textarea {
110
- padding: map-get($map, "textarea-padding");
111
- max-height: 40em;
112
- min-height: map-get($map, "textarea-min-height");
113
- resize: vertical;
114
- }
115
- .input-grp,
116
- .radio-grp,
117
- .checkbox-grp,
118
- .toggle-grp {
119
- text-align: left;
120
- position: relative;
121
- }
122
-
123
- /* ---- Placeholder & autofill ------- */
124
-
125
- ::-webkit-input-placeholder {
126
- color: map-get($map, "input-placeholder-color");
127
- }
128
- input:-webkit-autofill {
129
- -webkit-text-fill-color: map-get($map, "input-color");
130
- -webkit-box-shadow:
131
- 0 0 0 map-get($map, "input-border-width") map-get($map, "input-border-color") inset,
132
- 0 0 0 1000px map-get($map, "input-background") inset,
133
- map-get($map, "input-box-shadow");
134
- }
135
- input:-webkit-autofill::first-line {
136
- font-family: map-get($map, "input-font-family");
137
- font-size: map-get($map, "input-font-size");
138
- font-weight: map-get($map, "input-font-weight");
139
- }
140
-
141
- /* ---- Elements --------------------- */
142
-
143
- /* Input + button element */
144
-
145
- .input-btn {
146
- display: flex;
147
- }
148
- .input-btn input {
149
- flex: 1;
150
- border-top-right-radius: 0;
151
- border-bottom-right-radius: 0;
152
- }
153
- .input-btn .btn {
154
- width: auto !important;
155
- min-width: 0;
156
- font-size: 0.8em;
157
- line-height: 1.5rem;
158
- border-radius: map-get($map, "input-border-radius");
159
- padding: map-get($map, "input-padding");
160
- margin-left: -5px;
161
- border-top-left-radius: 0;
162
- border-bottom-left-radius: 0;
163
- }
164
-
165
- /* Form error */
166
-
167
- .form-error {
168
- display: none;
169
- color: $danger;
170
- }
171
- .toggle-grp .form-error,
172
- .checkbox-grp .form-error,
173
- .radio-grp .form-error,
174
- .input-grp .form-error {
175
- font-size: map-get($map, "error-font-size");
176
- line-height: 1.4em;
177
- }
178
- .form-error:empty {
179
- margin: 0 !important;
180
- }
181
- .is-invalid .form-error,
182
- &.is-invalid .form-error,
183
- .form-error.form-error-show {
184
- display: block;
185
- }
186
-
187
- /* ---- Labels ----------------------- */
188
-
189
- label,
190
- .label,
191
- .label-right {
192
- display: inline-block;
193
- vertical-align: top;
194
- font-size: map-get($map, "label-font-size");
195
- line-height: 1.4em;
196
- margin-bottom: 0.45em;
197
- cursor: pointer;
198
- user-select: none;
199
- }
200
- label,
201
- .label {
202
- /* matches util.errorElement */
203
- transition: opacity 0.15s ease, color 0.25s ease, text-decoration-color 0.25s ease;
204
- }
205
- label,
206
- .label,
207
- .text-label {
208
- color: map-get($map, "label-color");
209
- text-decoration-color: map-get($map, "label-color");
210
- }
211
- label.invalid-out {
212
- //opacity: 0.2;
213
- }
214
- label.invalid-in {
215
- //opacity: 1;
216
- color: $danger;
217
- }
218
- .label-right,
219
- a.label-right {
220
- display: block;
221
- float: right;
222
- margin-right: 1px;
223
- }
224
- .label-bottom {
225
- position: absolute;
226
- right: 0;
227
- bottom: 0;
228
- }
229
-
230
- /* Floating labels */
231
-
232
- .has-float-label input + label,
233
- .has-float-label select + label,
234
- .has-float-label textarea + label {
235
- position: absolute;
236
- left: 0;
237
- top: 0;
238
- cursor: text;
239
- color: map-get($map, "label-color");
240
- font-size: map-get($map, "label-font-size");
241
- opacity: 0;
242
- transform: translateY(3px);
243
- transition: transform 0.2s, opacity 0.2s;
244
- }
245
- .has-float-label input:not(:placeholder-shown) + *,
246
- .has-float-label select:not(:placeholder-shown) + *,
247
- .has-float-label textarea:not(:placeholder-shown) + *,
248
- .has-float-label input:-webkit-autofill + * {
249
- transform: translateY(0px);
250
- opacity: 1;
251
- }
252
-
253
- /* ---- Icons ------------------------ */
254
-
255
- $ip: map-get($map, "input-padding");
256
- $ip-left: null;
257
- $ip-right: null;
258
-
259
- @if length($ip) > 3 {
260
- $ip-left: nth($ip, 4);
261
- $ip-right: nth($ip, 2);
262
- }
263
- @else if length($ip) > 1 {
264
- $ip-left: nth($ip, 2);
265
- $ip-right: nth($ip, 2);
266
- }
267
- @else {
268
- $ip-left: $ip;
269
- $ip-right: $ip;
270
- }
271
- .icon-left,
272
- .icon-right {
273
- position: absolute;
274
- top: 0px;
275
- bottom: 0px;
276
- width: map-get($map, "input-icon-width");
277
- pointer-events: none;
278
- align-items: center;
279
- display: inline-flex;
280
- justify-content: center;
281
- }
282
- .has-icon-left {
283
- position: relative;
284
- input,
285
- select,
286
- .input,
287
- .vs__dropdown-toggle {
288
- padding-left: calc(#{$ip-left} - 2px + #{map-get($map, "input-icon-width")} + 0.8em);
289
- }
290
- .icon-left {
291
- left: calc(#{$ip-left} - 2px);
292
- }
293
- }
294
- .has-icon-right {
295
- position: relative;
296
- input,
297
- select,
298
- .input,
299
- .vs__dropdown-toggle {
300
- padding-right: calc(#{$ip-right} - 2px + #{map-get($map, "input-icon-width")} + 0.4em);
301
- }
302
- .icon-right {
303
- right: calc(#{$ip-right} - 2px);
304
- }
305
- }
306
-
307
- /* ---- Select ----------------------- */
308
-
309
- select,
310
- .vs__dropdown-toggle {
311
- background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 1L6 6L11 1' stroke='%23c5cbd2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
312
- appearance: none;
313
- background-repeat: no-repeat;
314
- background-size: auto 7px;
315
- background-position: right 17px center;
316
- transition: all 200ms ease;
317
- }
318
-
319
- /* ---- Variable inputs -------------- */
320
-
321
- .radio-grp,
322
- .checkbox-grp {
323
- $checkbox-width: map-get($map, "checkbox-height");
324
- $checkbox-inner-width: map-get($map, "checkbox-inner-height");
325
- input {
326
- position: absolute;
327
- left: -9999px;
328
- }
329
- label {
330
- display: block;
331
- }
332
- .has-tooltip {
333
- display: inline;
334
- padding: 0;
335
- }
336
- input + label {
337
- position: relative;
338
- display: inline-block;
339
- padding: map-get($map, "input-padding");
340
- padding-left: $checkbox-width + map-get($map, "checkbox-padding-left"); //0.8em;
341
- padding-right: map-get($map, "checkbox-padding-right");
342
- user-select: none;
343
- margin-bottom: 0;
344
- }
345
- input + label:before {
346
- content: "";
347
- position: absolute;
348
- left: 0;
349
- top: 50%;
350
- width: $checkbox-width;
351
- height: map-get($map, "checkbox-height");
352
- margin-top: -(map-get($map, "checkbox-height") / 2);
353
- background: map-get($map, "input-background");
354
- border: 2px solid map-get($map, "variable-color");
355
- border-radius: 3px;
356
- box-sizing: border-box;
357
- transition: all 0.2s ease;
358
- }
359
- input + label:after {
360
- content: "";
361
- position: absolute;
362
- left: 0;
363
- top: 50%;
364
- width: $checkbox-inner-width;
365
- height: map-get($map, "checkbox-inner-height");
366
- margin-left: ($checkbox-width - $checkbox-inner-width) / 2;
367
- margin-top: -(map-get($map, "checkbox-inner-height") / 2);
368
- border-radius: 3px;
369
- transition: all 0.2s ease;
370
- }
371
- input:checked + label:before {
372
- border-color: map-get($map, "variable-color--active");
373
- }
374
- input:checked + label:after {
375
- background-color: map-get($map, "variable-color--active");
376
- }
377
- }
378
- .radio-grp input + label:before,
379
- .radio-grp input + label:after {
380
- border-radius: 100% !important;
381
- }
382
- .toggle-grp {
383
- input {
384
- position: absolute;
385
- left: -9999px;
386
- }
387
- label {
388
- display: block;
389
- }
390
- input + label {
391
- position: relative;
392
- display: inline-block;
393
- min-height: map-get($map, "toggle-height"); //1em;height:
394
- padding: map-get($map, "input-padding");
395
- padding-left: map-get($map, "toggle-width") + 0.8em;
396
- padding-right: 1.2em;
397
- margin-bottom: 0;
398
- user-select: none;
399
- }
400
- input + label:before,
401
- input + label:after {
402
- content: "";
403
- position: absolute;
404
- left: 0;
405
- top: 50%;
406
- margin-top: -(map-get($map, "toggle-height")/2);
407
- background: map-get($map, "variable-color");
408
- border-radius: map-get($map, "toggle-height");
409
- width: map-get($map, "toggle-width");
410
- height: map-get($map, "toggle-height");
411
- box-sizing: border-box;
412
- transition: all 0.2s ease;
413
- }
414
- input + label:after {
415
- width: map-get($map, "toggle-height");
416
- border: 2px solid transparent;
417
- border-color: transparent;
418
- background-color: #fff;
419
- background-clip: content-box;
420
- }
421
- input:checked + label:before {
422
- background-color: map-get($map, "variable-color--active");
423
- }
424
- input:checked + label:after {
425
- left: map-get($map, "toggle-width") - map-get($map, "toggle-height");
426
- }
427
- &.has-no-label input + label {
428
- padding-left: map-get($map, "toggle-width");
429
- padding-right: 0;
430
- padding-top: 0;
431
- padding-bottom: 0;
432
- }
433
- }
434
-
435
- /* ---- States ----------------------- */
436
-
437
- input:active,
438
- input:focus,
439
- select:active,
440
- select:focus,
441
- textarea:active,
442
- textarea:focus,
443
- .vs--open .vs__dropdown-toggle {
444
- outline: 0;
445
- box-shadow:
446
- 0 0 0 map-get($map, "input-border-width") map-get($map, "input-border-color--active") inset,
447
- map-get($map, "input-box-shadow--active");
448
- background-color: map-get($map, "input-background--active");
449
- &:-webkit-autofill {
450
- -webkit-box-shadow:
451
- 0 0 0 map-get($map, "input-border-width") map-get($map, "input-border-color--active") inset,
452
- 0 0 0 1000px map-get($map, "input-background--active") inset,
453
- map-get($map, "input-box-shadow--active");
454
- }
455
- }
456
- input.is-invalid,
457
- select.is-invalid,
458
- textarea.is-invalid,
459
- .vs__dropdown-toggle.is-invalid,
460
- .input-grp.is-invalid input,
461
- .input-grp.is-invalid select,
462
- .input-grp.is-invalid textarea,
463
- .input-grp.is-invalid .vs__dropdown-toggle {
464
- color: map-get($map, "input-color--invalid");
465
- box-shadow:
466
- 0 0 0 map-get($map, "input-border-width") $danger inset,
467
- map-get($map, "input-box-shadow--invalid");
468
- // doesnt work for dropdown/toggle
469
- background-color: map-get($map, "input-background--invalid");
470
- animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
471
- transform: translate3d(0, 0, 0);
472
- backface-visibility: hidden;
473
- &:-webkit-autofill {
474
- -webkit-text-fill-color: map-get($map, "input-color--invalid");
475
- -webkit-box-shadow:
476
- 0 0 0 map-get($map, "input-border-width") map-get($map, "input-border-color--invalid") inset,
477
- 0 0 0 1000px map-get($map, "input-background--invalid") inset,
478
- map-get($map, "input-box-shadow--invalid");
479
- }
480
- }
481
-
482
- input[type="radio"].is-invalid + label,
483
- input[type="checkbox"].is-invalid + label,
484
- input[type="radio"].is-invalid + label,
485
- input[type="checkbox"].is-invalid + label {
486
- animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
487
- transform: translate3d(0, 0, 0);
488
- backface-visibility: hidden;
489
- color: #7b1a1a;
490
- }
491
- input[type="radio"].is-invalid + label:before,
492
- input[type="checkbox"].is-invalid + label:before {
493
- border-color: $danger;
494
- background-color: map-get($map, "input-background--invalid");
495
- }
496
- textarea:disabled,
497
- input:disabled {
498
- background-color: #f7f7f7;
499
- color: #a5a5a5;
500
- }
501
-
502
- /* ---- Miscellaneous ---------------- */
503
-
504
- /* Stop autofill background flash */
505
-
506
- .onloading input,
507
- .onloading select,
508
- .onloading textarea,
509
- .onloading .input,
510
- .onloading .vs__dropdown-toggle {
511
- transition: none;
512
- }
513
-
514
- /* Animations */
515
-
516
- @keyframes shake {
517
- 30% {
518
- transform: translate3d(-1px, 0, 0);
519
- }
520
- 60% {
521
- transform: translate3d(1px, 0, 0);
522
- }
523
- 80% {
524
- transform: translate3d(0px, 0, 0);
525
- }
526
- }
527
-
528
- /* Prevent input zooming */
529
-
530
- @media (max-width: 550px) {
531
- .form-mobile {
532
- input[type="color"],
533
- input[type="date"],
534
- input[type="datetime"],
535
- input[type="datetime-local"],
536
- input[type="email"],
537
- input[type="month"],
538
- input[type="number"],
539
- input[type="password"],
540
- input[type="search"],
541
- input[type="tel"],
542
- input[type="text"],
543
- input[type="time"],
544
- input[type="url"],
545
- input[type="week"],
546
- select,
547
- textarea {
548
- font-size: 16px;
549
- letter-spacing: 0;
550
- }
551
- ::-moz-placeholder {
552
- font-size: 16px;
553
- letter-spacing: 0;
554
- }
555
- :-ms-input-placeholder {
556
- font-size: 16px;
557
- letter-spacing: 0;
558
- }
559
- ::-webkit-input-placeholder {
560
- font-size: 16px;
561
- letter-spacing: 0;
562
- }
563
- }
564
- }
565
-
566
- }
567
- }