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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|
form {
// ensure enough room at the bottom of any form to display a one-line bmd-help
margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
// reverse the above for navbars (no help expected in a navbar form)
.navbar & {
margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
.bmd-form-group {
display: inline-block;
padding-top: 0;
}
.btn {
margin-bottom: 0;
}
}
}
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control {
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
background-size: $bmd-form-control-bg-size;
border: 0;
transition: background 0s ease-out;
// The border bottom should be static in all states, the decorator will be animated over this.
&:focus,
.bmd-form-group.is-focused & {
background-size: $bmd-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s;
}
}
// Help blocks (not in v4)
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
//
.bmd-help {
position: absolute;
display: none;
font-size: .8rem;
font-weight: normal;
@extend .text-muted;
.bmd-form-group.is-focused & {
display: block;
}
//--------------------------------------
// Multiple help blocks
// - absolute positioning is used above to prevent bouncing
// - when there is more than one, this will bounce but will at least show
&:nth-of-type(2) {
padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
}
+ .bmd-help {
position: relative;
margin-bottom: 0;
}
}
// -----
// State coloring: default, success, info, warning, danger
//
@include bmd-selection-color();
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
.has-success {
@include bmd-form-color($brand-success, $brand-success, $brand-success);
}
.has-info {
@include bmd-form-color($brand-info, $brand-info, $brand-info);
}
.has-warning {
@include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
}
.has-danger {
@include bmd-form-color($brand-danger, $brand-danger, $brand-danger);
}
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.bmd-form-group {
position: relative;
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
[class^='bmd-label'],
[class*=' bmd-label'] {
position: absolute;
pointer-events: none;
transition: 0.3s ease all;
// hint to browser for optimization
&.bmd-label-floating {
will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
}
}
// hide label-placeholders when the field is filled
&.is-filled .bmd-label-placeholder {
display: none;
}
// Optional class to make the text field inline collapsible/expandable (collapsed by default)
// This uses the BS collapse js to make the width expand.
// `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
// FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
&.bmd-collapse-inline {
padding: 0; // get rid of any padding as this is a width transition
// Expandable Holder.
.collapse {
&.in {
// This is an unfortunate hack. Animating between widths in percent (%)
// in many browsers (Chrome, Firefox) only animates the inner visual style
// of the input - the outer bounding box still 'jumps'.
// Thus assume a sensible maximum, and animate to/from that value.
max-width: 600px;
}
}
.collapsing,
.width:not(.collapse), // collapsing is removed and momentarily only width is present
.collapse.in {
display: inline-block;
}
.collapsing {
@include material-animation-default();
}
}
// default floating size/location with an bmd-form-group
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
// sm floating size/location
&.bmd-form-group-sm {
@include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
}
// lg floating size/location
&.bmd-form-group-lg {
@include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
select {
&,
&.form-control {
// Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
-moz-appearance: none;
-webkit-appearance: none;
}
}
// Input files - hide actual input - requires specific markup in the sample.
//.bmd-form-group input[type=file] {
// opacity: 0;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: 100;
//}
//
//
//.form-horizontal {
//
// // Consistent vertical alignment of radios and checkboxes
// .radio,
// .checkbox,
// .radio-inline,
// .checkbox-inline {
// padding-top: 0;
// }
//
// .radio {
// margin-bottom: 10px;
// }
//
// label {
// text-align: right;
// }
//
// label {
// margin: 0;
// }
//}
.form-inline {
@include media-breakpoint-up(sm) {
.input-group {
display: inline-flex;
align-items: center;
}
}
}
|
