1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/// We made the choice to let the "form-group" element purely declarative, as
/// reality projected use cases are far too numerous. Making structural rules
/// (ie. making specific UI Component sets) wouldn't be a best practice.
.form-group {
$self: &;
position: relative;
margin-bottom: $form-group-margin-bottom;
&__label {
padding-bottom: space-x(0.5);
label {
font-weight: 600;
}
&--sub {
color: $gray-800;
font-size: 14px;
}
}
&__field {
// (?) In most cases, we found that error directive integrated within
// the "form-group__field" reach actually breaks the design when it
// pops out
// Hence the `position: absolute` rule, mostly avoiding this UI break
#{ $self }__error,
#{ $self }__success {
position: absolute;
overflow: hidden;
// (below is the reversing process rule)
&--obtrusive {
position: static;
overflow: initial;
}
}
}
}
/// Managing error presence while using <form-group> component
/// This design is based on Bootstrap 2 form management
/// @link https://getbootstrap.com/2.3.2/base-css.html#Validation%20states
.form-group--error {
label { color: $danger; }
.b-form-input { @include inputError; }
}
.form-group {
&__error,
&__success,
&__warning {
padding-top: 2px;
font-size: 12px;
padding-left: 0.75rem;
}
&__error { color: $danger; }
&__success { color: $success; }
&__warning { color: $warning; }
}
.form-input {
// Based on "vue-bootstrap" implementation of SVG icon within the input
&--address {
padding-right: calc(1.5em + 0.75rem);
background-repeat: no-repeat;
background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
background-position: right calc(0.375em + 0.1875rem) center;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>');
}
}
// Browser cursor consistency
.custom-select:disabled,
.form-control:disabled {
@include unclickable();
}
// Rectify Bootstrap readonly UI
.custom-select:disabled[readonly],
.form-control[readonly] {
background-color: $input-bg;
// (opinionated rules)
// color: $input-placeholder-color;
border-style: dashed;
}
// Custom autocomplete (need UI/UX rework)
.input-with-autocomplete {
.completions {
position: fixed;
max-height: 300px;
overflow-y: scroll;
width: 300px;
top: 50px;
}
}