bulma-sass 0.7.4 → 0.7.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/bulma.sass +2 -1
  3. data/app/assets/stylesheets/sass/base/generic.sass +21 -9
  4. data/app/assets/stylesheets/sass/base/helpers.sass +5 -0
  5. data/app/assets/stylesheets/sass/base/minireset.sass +2 -1
  6. data/app/assets/stylesheets/sass/components/card.sass +10 -5
  7. data/app/assets/stylesheets/sass/components/dropdown.sass +7 -3
  8. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  9. data/app/assets/stylesheets/sass/components/list.sass +3 -3
  10. data/app/assets/stylesheets/sass/components/menu.sass +15 -8
  11. data/app/assets/stylesheets/sass/components/message.sass +2 -1
  12. data/app/assets/stylesheets/sass/components/modal.sass +1 -1
  13. data/app/assets/stylesheets/sass/components/navbar.sass +16 -1
  14. data/app/assets/stylesheets/sass/components/pagination.sass +9 -4
  15. data/app/assets/stylesheets/sass/components/panel.sass +4 -2
  16. data/app/assets/stylesheets/sass/elements/_all.sass +0 -1
  17. data/app/assets/stylesheets/sass/elements/button.sass +33 -3
  18. data/app/assets/stylesheets/sass/elements/container.sass +9 -11
  19. data/app/assets/stylesheets/sass/elements/content.sass +5 -1
  20. data/app/assets/stylesheets/sass/elements/form.sass +1 -602
  21. data/app/assets/stylesheets/sass/elements/progress.sass +15 -13
  22. data/app/assets/stylesheets/sass/elements/table.sass +2 -1
  23. data/app/assets/stylesheets/sass/elements/tag.sass +0 -9
  24. data/app/assets/stylesheets/sass/elements/title.sass +6 -0
  25. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  26. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  27. data/app/assets/stylesheets/sass/layout/footer.sass +3 -0
  28. data/app/assets/stylesheets/sass/layout/hero.sass +1 -14
  29. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -1
  30. data/app/assets/stylesheets/sass/utilities/mixins.sass +2 -2
  31. data/lib/bulma/sass/version.rb +1 -1
  32. metadata +1 -1
@@ -3,6 +3,11 @@ $pagination-border-color: $grey-lighter !default
3
3
  $pagination-margin: -0.25rem !default
4
4
  $pagination-min-width: $control-height !default
5
5
 
6
+ $pagination-item-font-size: 1em !default
7
+ $pagination-item-margin: 0.25rem !default
8
+ $pagination-item-padding-left: 0.5em !default
9
+ $pagination-item-padding-right: 0.5em !default
10
+
6
11
  $pagination-hover-color: $link-hover !default
7
12
  $pagination-hover-border-color: $link-hover-border !default
8
13
 
@@ -56,11 +61,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
56
61
  .pagination-ellipsis
57
62
  @extend %control
58
63
  @extend %unselectable
59
- font-size: 1em
60
- padding-left: 0.5em
61
- padding-right: 0.5em
64
+ font-size: $pagination-item-font-size
62
65
  justify-content: center
63
- margin: 0.25rem
66
+ margin: $pagination-item-margin
67
+ padding-left: $pagination-item-padding-left
68
+ padding-right: $pagination-item-padding-right
64
69
  text-align: center
65
70
 
66
71
  .pagination-previous,
@@ -1,3 +1,4 @@
1
+ $panel-margin: $block-spacing !default
1
2
  $panel-item-border: 1px solid $border !default
2
3
 
3
4
  $panel-heading-background-color: $background !default
@@ -8,6 +9,7 @@ $panel-heading-radius: $radius !default
8
9
  $panel-heading-size: 1.25em !default
9
10
  $panel-heading-weight: $weight-light !default
10
11
 
12
+ $panel-tabs-font-size: 0.875em !default
11
13
  $panel-tab-border-bottom: 1px solid $border !default
12
14
  $panel-tab-active-border-bottom-color: $link-active-border !default
13
15
  $panel-tab-active-color: $link-active !default
@@ -26,7 +28,7 @@ $panel-icon-color: $text-light !default
26
28
  .panel
27
29
  font-size: $size-normal
28
30
  &:not(:last-child)
29
- margin-bottom: 1.5rem
31
+ margin-bottom: $panel-margin
30
32
 
31
33
  .panel-heading,
32
34
  .panel-tabs,
@@ -49,7 +51,7 @@ $panel-icon-color: $text-light !default
49
51
  .panel-tabs
50
52
  align-items: flex-end
51
53
  display: flex
52
- font-size: 0.875em
54
+ font-size: $panel-tabs-font-size
53
55
  justify-content: center
54
56
  a
55
57
  border-bottom: $panel-tab-border-bottom
@@ -4,7 +4,6 @@
4
4
  @import "button.sass"
5
5
  @import "container.sass"
6
6
  @import "content.sass"
7
- @import "form.sass"
8
7
  @import "icon.sass"
9
8
  @import "image.sass"
10
9
  @import "notification.sass"
@@ -1,5 +1,6 @@
1
1
  $button-color: $grey-darker !default
2
2
  $button-background-color: $white !default
3
+ $button-family: false !default
3
4
 
4
5
  $button-border-color: $grey-lighter !default
5
6
  $button-border-width: $control-border-width !default
@@ -50,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
50
51
  border-width: $button-border-width
51
52
  color: $button-color
52
53
  cursor: pointer
54
+ @if $button-family
55
+ font-family: $button-family
53
56
  justify-content: center
54
57
  padding-bottom: $button-padding-vertical
55
58
  padding-left: $button-padding-horizontal
@@ -142,7 +145,8 @@ $button-static-border-color: $grey-lighter !default
142
145
  &.is-inverted
143
146
  background-color: $color-invert
144
147
  color: $color
145
- &:hover
148
+ &:hover,
149
+ &.is-hovered
146
150
  background-color: darken($color-invert, 5%)
147
151
  &[disabled],
148
152
  fieldset[disabled] &
@@ -158,13 +162,21 @@ $button-static-border-color: $grey-lighter !default
158
162
  border-color: $color
159
163
  color: $color
160
164
  &:hover,
161
- &:focus
165
+ &.is-hovered,
166
+ &:focus,
167
+ &.is-focused
162
168
  background-color: $color
163
169
  border-color: $color
164
170
  color: $color-invert
165
171
  &.is-loading
166
172
  &::after
167
173
  border-color: transparent transparent $color $color !important
174
+ &:hover,
175
+ &.is-hovered,
176
+ &:focus,
177
+ &.is-focused
178
+ &::after
179
+ border-color: transparent transparent $color-invert $color-invert !important
168
180
  &[disabled],
169
181
  fieldset[disabled] &
170
182
  background-color: transparent
@@ -176,9 +188,18 @@ $button-static-border-color: $grey-lighter !default
176
188
  border-color: $color-invert
177
189
  color: $color-invert
178
190
  &:hover,
179
- &:focus
191
+ &.is-hovered,
192
+ &:focus,
193
+ &.is-focused
180
194
  background-color: $color-invert
181
195
  color: $color
196
+ &.is-loading
197
+ &:hover,
198
+ &.is-hovered,
199
+ &:focus,
200
+ &.is-focused
201
+ &::after
202
+ border-color: transparent transparent $color $color !important
182
203
  &[disabled],
183
204
  fieldset[disabled] &
184
205
  background-color: transparent
@@ -269,7 +290,16 @@ $button-static-border-color: $grey-lighter !default
269
290
  z-index: 4
270
291
  &.is-expanded
271
292
  flex-grow: 1
293
+ flex-shrink: 1
272
294
  &.is-centered
273
295
  justify-content: center
296
+ &:not(.has-addons)
297
+ .button:not(.is-fullwidth)
298
+ margin-left: 0.25rem
299
+ margin-right: 0.25rem
274
300
  &.is-right
275
301
  justify-content: flex-end
302
+ &:not(.has-addons)
303
+ .button:not(.is-fullwidth)
304
+ margin-left: 0.25rem
305
+ margin-right: 0.25rem
@@ -1,25 +1,23 @@
1
+ $container-offset: (2 * $gap) !default
2
+
1
3
  .container
4
+ flex-grow: 1
2
5
  margin: 0 auto
3
6
  position: relative
7
+ width: auto
4
8
  +desktop
5
- max-width: $desktop - (2 * $gap)
6
- width: $desktop - (2 * $gap)
9
+ max-width: $desktop - $container-offset
7
10
  &.is-fluid
8
11
  margin-left: $gap
9
12
  margin-right: $gap
10
13
  max-width: none
11
- width: auto
12
14
  +until-widescreen
13
15
  &.is-widescreen
14
- max-width: $widescreen - (2 * $gap)
15
- width: auto
16
+ max-width: $widescreen - $container-offset
16
17
  +until-fullhd
17
18
  &.is-fullhd
18
- max-width: $fullhd - (2 * $gap)
19
- width: auto
19
+ max-width: $fullhd - $container-offset
20
20
  +widescreen
21
- max-width: $widescreen - (2 * $gap)
22
- width: $widescreen - (2 * $gap)
21
+ max-width: $widescreen - $container-offset
23
22
  +fullhd
24
- max-width: $fullhd - (2 * $gap)
25
- width: $fullhd - (2 * $gap)
23
+ max-width: $fullhd - $container-offset
@@ -125,7 +125,8 @@ $content-table-foot-cell-color: $text-strong !default
125
125
  vertical-align: top
126
126
  th
127
127
  color: $content-table-cell-heading-color
128
- text-align: left
128
+ &:not([align])
129
+ text-align: left
129
130
  thead
130
131
  td,
131
132
  th
@@ -142,6 +143,9 @@ $content-table-foot-cell-color: $text-strong !default
142
143
  td,
143
144
  th
144
145
  border-bottom-width: 0
146
+ .tabs
147
+ li + li
148
+ margin-top: 0
145
149
  // Sizes
146
150
  &.is-small
147
151
  font-size: $size-small
@@ -1,602 +1 @@
1
- $input-color: $grey-darker !default
2
- $input-background-color: $white !default
3
- $input-border-color: $grey-lighter !default
4
- $input-height: $control-height !default
5
- $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
6
- $input-placeholder-color: rgba($input-color, 0.3) !default
7
-
8
- $input-hover-color: $grey-darker !default
9
- $input-hover-border-color: $grey-light !default
10
-
11
- $input-focus-color: $grey-darker !default
12
- $input-focus-border-color: $link !default
13
- $input-focus-box-shadow-size: 0 0 0 0.125em !default
14
- $input-focus-box-shadow-color: rgba($link, 0.25) !default
15
-
16
- $input-disabled-color: $text-light !default
17
- $input-disabled-background-color: $background !default
18
- $input-disabled-border-color: $background !default
19
- $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
20
-
21
- $input-arrow: $link !default
22
-
23
- $input-icon-color: $grey-lighter !default
24
- $input-icon-active-color: $grey !default
25
-
26
- $input-radius: $radius !default
27
-
28
- $file-border-color: $border !default
29
- $file-radius: $radius !default
30
-
31
- $file-cta-background-color: $white-ter !default
32
- $file-cta-color: $grey-dark !default
33
- $file-cta-hover-color: $grey-darker !default
34
- $file-cta-active-color: $grey-darker !default
35
-
36
- $file-name-border-color: $border !default
37
- $file-name-border-style: solid !default
38
- $file-name-border-width: 1px 1px 1px 0 !default
39
- $file-name-max-width: 16em !default
40
-
41
- $label-color: $grey-darker !default
42
- $label-weight: $weight-bold !default
43
-
44
- $help-size: $size-small !default
45
-
46
- =input
47
- @extend %control
48
- background-color: $input-background-color
49
- border-color: $input-border-color
50
- color: $input-color
51
- +placeholder
52
- color: $input-placeholder-color
53
- &:hover,
54
- &.is-hovered
55
- border-color: $input-hover-border-color
56
- &:focus,
57
- &.is-focused,
58
- &:active,
59
- &.is-active
60
- border-color: $input-focus-border-color
61
- box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
62
- &[disabled],
63
- fieldset[disabled] &
64
- background-color: $input-disabled-background-color
65
- border-color: $input-disabled-border-color
66
- box-shadow: none
67
- color: $input-disabled-color
68
- +placeholder
69
- color: $input-disabled-placeholder-color
70
-
71
- .input,
72
- .textarea
73
- +input
74
- box-shadow: $input-shadow
75
- max-width: 100%
76
- width: 100%
77
- &[readonly]
78
- box-shadow: none
79
- // Colors
80
- @each $name, $pair in $colors
81
- $color: nth($pair, 1)
82
- &.is-#{$name}
83
- border-color: $color
84
- &:focus,
85
- &.is-focused,
86
- &:active,
87
- &.is-active
88
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
89
- // Sizes
90
- &.is-small
91
- +control-small
92
- &.is-medium
93
- +control-medium
94
- &.is-large
95
- +control-large
96
- // Modifiers
97
- &.is-fullwidth
98
- display: block
99
- width: 100%
100
- &.is-inline
101
- display: inline
102
- width: auto
103
-
104
- .input
105
- &.is-rounded
106
- border-radius: $radius-rounded
107
- padding-left: 1em
108
- padding-right: 1em
109
- &.is-static
110
- background-color: transparent
111
- border-color: transparent
112
- box-shadow: none
113
- padding-left: 0
114
- padding-right: 0
115
-
116
- .textarea
117
- display: block
118
- max-width: 100%
119
- min-width: 100%
120
- padding: 0.625em
121
- resize: vertical
122
- &:not([rows])
123
- max-height: 600px
124
- min-height: 120px
125
- &[rows]
126
- height: initial
127
- // Modifiers
128
- &.has-fixed-size
129
- resize: none
130
-
131
- .checkbox,
132
- .radio
133
- cursor: pointer
134
- display: inline-block
135
- line-height: 1.25
136
- position: relative
137
- input
138
- cursor: pointer
139
- &:hover
140
- color: $input-hover-color
141
- &[disabled],
142
- fieldset[disabled] &
143
- color: $input-disabled-color
144
- cursor: not-allowed
145
-
146
- .radio
147
- & + .radio
148
- margin-left: 0.5em
149
-
150
- .select
151
- display: inline-block
152
- max-width: 100%
153
- position: relative
154
- vertical-align: top
155
- &:not(.is-multiple)
156
- height: $input-height
157
- &:not(.is-multiple):not(.is-loading)
158
- &::after
159
- @extend %arrow
160
- border-color: $input-arrow
161
- right: 1.125em
162
- z-index: 4
163
- &.is-rounded
164
- select
165
- border-radius: $radius-rounded
166
- padding-left: 1em
167
- select
168
- +input
169
- cursor: pointer
170
- display: block
171
- font-size: 1em
172
- max-width: 100%
173
- outline: none
174
- &::-ms-expand
175
- display: none
176
- &[disabled]:hover,
177
- fieldset[disabled] &:hover
178
- border-color: $input-disabled-border-color
179
- &:not([multiple])
180
- padding-right: 2.5em
181
- &[multiple]
182
- height: auto
183
- padding: 0
184
- option
185
- padding: 0.5em 1em
186
- // States
187
- &:not(.is-multiple):not(.is-loading):hover
188
- &::after
189
- border-color: $input-hover-color
190
- // Colors
191
- @each $name, $pair in $colors
192
- $color: nth($pair, 1)
193
- &.is-#{$name}
194
- &:not(:hover)::after
195
- border-color: $color
196
- select
197
- border-color: $color
198
- &:hover,
199
- &.is-hovered
200
- border-color: darken($color, 5%)
201
- &:focus,
202
- &.is-focused,
203
- &:active,
204
- &.is-active
205
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
206
- // Sizes
207
- &.is-small
208
- +control-small
209
- &.is-medium
210
- +control-medium
211
- &.is-large
212
- +control-large
213
- // Modifiers
214
- &.is-disabled
215
- &::after
216
- border-color: $input-disabled-color
217
- &.is-fullwidth
218
- width: 100%
219
- select
220
- width: 100%
221
- &.is-loading
222
- &::after
223
- @extend %loader
224
- margin-top: 0
225
- position: absolute
226
- right: 0.625em
227
- top: 0.625em
228
- transform: none
229
- &.is-small:after
230
- font-size: $size-small
231
- &.is-medium:after
232
- font-size: $size-medium
233
- &.is-large:after
234
- font-size: $size-large
235
-
236
- .file
237
- @extend %unselectable
238
- align-items: stretch
239
- display: flex
240
- justify-content: flex-start
241
- position: relative
242
- // Colors
243
- @each $name, $pair in $colors
244
- $color: nth($pair, 1)
245
- $color-invert: nth($pair, 2)
246
- &.is-#{$name}
247
- .file-cta
248
- background-color: $color
249
- border-color: transparent
250
- color: $color-invert
251
- &:hover,
252
- &.is-hovered
253
- .file-cta
254
- background-color: darken($color, 2.5%)
255
- border-color: transparent
256
- color: $color-invert
257
- &:focus,
258
- &.is-focused
259
- .file-cta
260
- border-color: transparent
261
- box-shadow: 0 0 0.5em rgba($color, 0.25)
262
- color: $color-invert
263
- &:active,
264
- &.is-active
265
- .file-cta
266
- background-color: darken($color, 5%)
267
- border-color: transparent
268
- color: $color-invert
269
- // Sizes
270
- &.is-small
271
- font-size: $size-small
272
- &.is-medium
273
- font-size: $size-medium
274
- .file-icon
275
- .fa
276
- font-size: 21px
277
- &.is-large
278
- font-size: $size-large
279
- .file-icon
280
- .fa
281
- font-size: 28px
282
- // Modifiers
283
- &.has-name
284
- .file-cta
285
- border-bottom-right-radius: 0
286
- border-top-right-radius: 0
287
- .file-name
288
- border-bottom-left-radius: 0
289
- border-top-left-radius: 0
290
- &.is-empty
291
- .file-cta
292
- border-radius: $file-radius
293
- .file-name
294
- display: none
295
- &.is-boxed
296
- .file-label
297
- flex-direction: column
298
- .file-cta
299
- flex-direction: column
300
- height: auto
301
- padding: 1em 3em
302
- .file-name
303
- border-width: 0 1px 1px
304
- .file-icon
305
- height: 1.5em
306
- width: 1.5em
307
- .fa
308
- font-size: 21px
309
- &.is-small
310
- .file-icon .fa
311
- font-size: 14px
312
- &.is-medium
313
- .file-icon .fa
314
- font-size: 28px
315
- &.is-large
316
- .file-icon .fa
317
- font-size: 35px
318
- &.has-name
319
- .file-cta
320
- border-radius: $file-radius $file-radius 0 0
321
- .file-name
322
- border-radius: 0 0 $file-radius $file-radius
323
- border-width: 0 1px 1px
324
- &.is-centered
325
- justify-content: center
326
- &.is-fullwidth
327
- .file-label
328
- width: 100%
329
- .file-name
330
- flex-grow: 1
331
- max-width: none
332
- &.is-right
333
- justify-content: flex-end
334
- .file-cta
335
- border-radius: 0 $file-radius $file-radius 0
336
- .file-name
337
- border-radius: $file-radius 0 0 $file-radius
338
- border-width: 1px 0 1px 1px
339
- order: -1
340
-
341
- .file-label
342
- align-items: stretch
343
- display: flex
344
- cursor: pointer
345
- justify-content: flex-start
346
- overflow: hidden
347
- position: relative
348
- &:hover
349
- .file-cta
350
- background-color: darken($file-cta-background-color, 2.5%)
351
- color: $file-cta-hover-color
352
- .file-name
353
- border-color: darken($file-name-border-color, 2.5%)
354
- &:active
355
- .file-cta
356
- background-color: darken($file-cta-background-color, 5%)
357
- color: $file-cta-active-color
358
- .file-name
359
- border-color: darken($file-name-border-color, 5%)
360
-
361
- .file-input
362
- height: 100%
363
- left: 0
364
- opacity: 0
365
- outline: none
366
- position: absolute
367
- top: 0
368
- width: 100%
369
-
370
- .file-cta,
371
- .file-name
372
- @extend %control
373
- border-color: $file-border-color
374
- border-radius: $file-radius
375
- font-size: 1em
376
- padding-left: 1em
377
- padding-right: 1em
378
- white-space: nowrap
379
-
380
- .file-cta
381
- background-color: $file-cta-background-color
382
- color: $file-cta-color
383
-
384
- .file-name
385
- border-color: $file-name-border-color
386
- border-style: $file-name-border-style
387
- border-width: $file-name-border-width
388
- display: block
389
- max-width: $file-name-max-width
390
- overflow: hidden
391
- text-align: left
392
- text-overflow: ellipsis
393
-
394
- .file-icon
395
- align-items: center
396
- display: flex
397
- height: 1em
398
- justify-content: center
399
- margin-right: 0.5em
400
- width: 1em
401
- .fa
402
- font-size: 14px
403
-
404
- .label
405
- color: $label-color
406
- display: block
407
- font-size: $size-normal
408
- font-weight: $label-weight
409
- &:not(:last-child)
410
- margin-bottom: 0.5em
411
- // Sizes
412
- &.is-small
413
- font-size: $size-small
414
- &.is-medium
415
- font-size: $size-medium
416
- &.is-large
417
- font-size: $size-large
418
-
419
- .help
420
- display: block
421
- font-size: $help-size
422
- margin-top: 0.25rem
423
- @each $name, $pair in $colors
424
- $color: nth($pair, 1)
425
- &.is-#{$name}
426
- color: $color
427
-
428
- // Containers
429
-
430
- .field
431
- &:not(:last-child)
432
- margin-bottom: 0.75rem
433
- // Modifiers
434
- &.has-addons
435
- display: flex
436
- justify-content: flex-start
437
- .control
438
- &:not(:last-child)
439
- margin-right: -1px
440
- &:not(:first-child):not(:last-child)
441
- .button,
442
- .input,
443
- .select select
444
- border-radius: 0
445
- &:first-child:not(:only-child)
446
- .button,
447
- .input,
448
- .select select
449
- border-bottom-right-radius: 0
450
- border-top-right-radius: 0
451
- &:last-child:not(:only-child)
452
- .button,
453
- .input,
454
- .select select
455
- border-bottom-left-radius: 0
456
- border-top-left-radius: 0
457
- .button,
458
- .input,
459
- .select select
460
- &:not([disabled])
461
- &:hover,
462
- &.is-hovered
463
- z-index: 2
464
- &:focus,
465
- &.is-focused,
466
- &:active,
467
- &.is-active
468
- z-index: 3
469
- &:hover
470
- z-index: 4
471
- &.is-expanded
472
- flex-grow: 1
473
- &.has-addons-centered
474
- justify-content: center
475
- &.has-addons-right
476
- justify-content: flex-end
477
- &.has-addons-fullwidth
478
- .control
479
- flex-grow: 1
480
- flex-shrink: 0
481
- &.is-grouped
482
- display: flex
483
- justify-content: flex-start
484
- & > .control
485
- flex-shrink: 0
486
- &:not(:last-child)
487
- margin-bottom: 0
488
- margin-right: 0.75rem
489
- &.is-expanded
490
- flex-grow: 1
491
- flex-shrink: 1
492
- &.is-grouped-centered
493
- justify-content: center
494
- &.is-grouped-right
495
- justify-content: flex-end
496
- &.is-grouped-multiline
497
- flex-wrap: wrap
498
- & > .control
499
- &:last-child,
500
- &:not(:last-child)
501
- margin-bottom: 0.75rem
502
- &:last-child
503
- margin-bottom: -0.75rem
504
- &:not(:last-child)
505
- margin-bottom: 0
506
- &.is-horizontal
507
- +tablet
508
- display: flex
509
-
510
- .field-label
511
- .label
512
- font-size: inherit
513
- +mobile
514
- margin-bottom: 0.5rem
515
- +tablet
516
- flex-basis: 0
517
- flex-grow: 1
518
- flex-shrink: 0
519
- margin-right: 1.5rem
520
- text-align: right
521
- &.is-small
522
- font-size: $size-small
523
- padding-top: 0.375em
524
- &.is-normal
525
- padding-top: 0.375em
526
- &.is-medium
527
- font-size: $size-medium
528
- padding-top: 0.375em
529
- &.is-large
530
- font-size: $size-large
531
- padding-top: 0.375em
532
-
533
- .field-body
534
- .field .field
535
- margin-bottom: 0
536
- +tablet
537
- display: flex
538
- flex-basis: 0
539
- flex-grow: 5
540
- flex-shrink: 1
541
- .field
542
- margin-bottom: 0
543
- & > .field
544
- flex-shrink: 1
545
- &:not(.is-narrow)
546
- flex-grow: 1
547
- &:not(:last-child)
548
- margin-right: 0.75rem
549
-
550
- .control
551
- box-sizing: border-box
552
- clear: both //fixes the icon floating out of the input when help text is floated right
553
- font-size: $size-normal
554
- position: relative
555
- text-align: left
556
- // Modifiers
557
- &.has-icons-left,
558
- &.has-icons-right
559
- .input,
560
- .select
561
- &:focus
562
- & ~ .icon
563
- color: $input-icon-active-color
564
- &.is-small ~ .icon
565
- font-size: $size-small
566
- &.is-medium ~ .icon
567
- font-size: $size-medium
568
- &.is-large ~ .icon
569
- font-size: $size-large
570
- .icon
571
- color: $input-icon-color
572
- height: $input-height
573
- pointer-events: none
574
- position: absolute
575
- top: 0
576
- width: $input-height
577
- z-index: 4
578
- &.has-icons-left
579
- .input,
580
- .select select
581
- padding-left: $input-height
582
- .icon.is-left
583
- left: 0
584
- &.has-icons-right
585
- .input,
586
- .select select
587
- padding-right: $input-height
588
- .icon.is-right
589
- right: 0
590
- &.is-loading
591
- &::after
592
- @extend %loader
593
- position: absolute !important
594
- right: 0.625em
595
- top: 0.625em
596
- z-index: 4
597
- &.is-small:after
598
- font-size: $size-small
599
- &.is-medium:after
600
- font-size: $size-medium
601
- &.is-large:after
602
- font-size: $size-large
1
+ @warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."