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
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2ee9faa14138fb29fdb687363e42c7e356ab445e5561b353f3e249aef55c9af1
4
- data.tar.gz: cd9057d3a943d5126340cd15cc51b7b28899bf247d3e6f3c92142cc49d4d35a9
3
+ metadata.gz: b8bf07a7a9565214cb70299f04c46fb0bfe4f2882f6f8a840a25677b23e22075
4
+ data.tar.gz: b52707372ffb2bf76717d1f5d7ad5fb43bf62f8843f4f7fa0a51192e96d7c83f
5
5
  SHA512:
6
- metadata.gz: b978dbaa28df0852b560f03c89dd64b3ed09d1c485060291e20fcca742f4c49d7a77cee15e7aa6f4993dbc79ab103e5b6cfcfb78b41653501efde82665c468e8
7
- data.tar.gz: 43a5841f58d24de2b6d8554f749a7f3b62472b158315531e2795d02645bad27e0da8ac16f117d992618b440e20a4c6b4201eb3546fe89c69bde7cdef72e9fd87
6
+ metadata.gz: 157f54158210e143d2a0d80c21014be0da4ae7a28d07f0feaddfc6448353b8395fb15027fac114067ac1d4dde06575e3acfc60666a25cca2b14e013eef7bc589
7
+ data.tar.gz: 5232f9db6b106d9f4267a22403c422b10c937914b6f2685924b807d836e7e6c31b6dc0c983c36084f30d1df3717503d53c60eab35812333a1f3f90db6dd0f676
@@ -1,8 +1,9 @@
1
1
  @charset "utf-8"
2
- /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
2
+ /*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
3
3
  @import "sass/utilities/_all"
4
4
  @import "sass/base/_all"
5
5
  @import "sass/elements/_all"
6
+ @import "sass/form/_all"
6
7
  @import "sass/components/_all"
7
8
  @import "sass/grid/_all"
8
9
  @import "sass/layout/_all"
@@ -1,8 +1,13 @@
1
1
  $body-background-color: $white !default
2
2
  $body-size: 16px !default
3
+ $body-min-width: 300px !default
3
4
  $body-rendering: optimizeLegibility !default
4
5
  $body-family: $family-primary !default
6
+ $body-overflow-x: hidden !default
7
+ $body-overflow-y: scroll !default
8
+
5
9
  $body-color: $text !default
10
+ $body-font-size: 1em !default
6
11
  $body-weight: $weight-normal !default
7
12
  $body-line-height: 1.5 !default
8
13
 
@@ -11,6 +16,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
11
16
  $code-weight: normal !default
12
17
  $code-size: 0.875em !default
13
18
 
19
+ $small-font-size: 0.875em !default
20
+
14
21
  $hr-background-color: $background !default
15
22
  $hr-height: 2px !default
16
23
  $hr-margin: 1.5rem 0 !default
@@ -18,14 +25,18 @@ $hr-margin: 1.5rem 0 !default
18
25
  $strong-color: $text-strong !default
19
26
  $strong-weight: $weight-bold !default
20
27
 
28
+ $pre-font-size: 0.875em !default
29
+ $pre-padding: 1.25rem 1.5rem !default
30
+ $pre-code-font-size: 1em !default
31
+
21
32
  html
22
33
  background-color: $body-background-color
23
34
  font-size: $body-size
24
35
  -moz-osx-font-smoothing: grayscale
25
36
  -webkit-font-smoothing: antialiased
26
- min-width: 300px
27
- overflow-x: hidden
28
- overflow-y: scroll
37
+ min-width: $body-min-width
38
+ overflow-x: $body-overflow-x
39
+ overflow-y: $body-overflow-y
29
40
  text-rendering: $body-rendering
30
41
  text-size-adjust: 100%
31
42
 
@@ -53,7 +64,7 @@ pre
53
64
 
54
65
  body
55
66
  color: $body-color
56
- font-size: 1rem
67
+ font-size: $body-font-size
57
68
  font-weight: $body-weight
58
69
  line-height: $body-line-height
59
70
 
@@ -91,7 +102,7 @@ input[type="radio"]
91
102
  vertical-align: baseline
92
103
 
93
104
  small
94
- font-size: 0.875em
105
+ font-size: $small-font-size
95
106
 
96
107
  span
97
108
  font-style: inherit
@@ -110,21 +121,22 @@ pre
110
121
  +overflow-touch
111
122
  background-color: $pre-background
112
123
  color: $pre
113
- font-size: 0.875em
124
+ font-size: $pre-font-size
114
125
  overflow-x: auto
115
- padding: 1.25rem 1.5rem
126
+ padding: $pre-padding
116
127
  white-space: pre
117
128
  word-wrap: normal
118
129
  code
119
130
  background-color: transparent
120
131
  color: currentColor
121
- font-size: 1em
132
+ font-size: $pre-code-font-size
122
133
  padding: 0
123
134
 
124
135
  table
125
136
  td,
126
137
  th
127
- text-align: left
128
138
  vertical-align: top
139
+ &:not([align])
140
+ text-align: left
129
141
  th
130
142
  color: $text-strong
@@ -115,6 +115,8 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
115
115
  font-weight: $weight-light !important
116
116
  .has-text-weight-normal
117
117
  font-weight: $weight-normal !important
118
+ .has-text-weight-medium
119
+ font-weight: $weight-medium !important
118
120
  .has-text-weight-semibold
119
121
  font-weight: $weight-semibold !important
120
122
  .has-text-weight-bold
@@ -274,3 +276,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
274
276
 
275
277
  .is-unselectable
276
278
  @extend %unselectable
279
+
280
+ .is-relative
281
+ position: relative !important
@@ -81,4 +81,5 @@ table
81
81
  td,
82
82
  th
83
83
  padding: 0
84
- text-align: left
84
+ &:not([align])
85
+ text-align: left
@@ -4,13 +4,18 @@ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
4
4
 
5
5
  $card-header-background-color: transparent !default
6
6
  $card-header-color: $text-strong !default
7
+ $card-header-padding: 0.75rem !default
7
8
  $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
8
9
  $card-header-weight: $weight-bold !default
9
10
 
10
11
  $card-content-background-color: transparent !default
12
+ $card-content-padding: 1.5rem !default
11
13
 
12
14
  $card-footer-background-color: transparent !default
13
15
  $card-footer-border-top: 1px solid $border !default
16
+ $card-footer-padding: 0.75rem !default
17
+
18
+ $card-media-margin: $block-spacing !default
14
19
 
15
20
  .card
16
21
  background-color: $card-background-color
@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
31
36
  display: flex
32
37
  flex-grow: 1
33
38
  font-weight: $card-header-weight
34
- padding: 0.75rem
39
+ padding: $card-header-padding
35
40
  &.is-centered
36
41
  justify-content: center
37
42
 
@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
40
45
  cursor: pointer
41
46
  display: flex
42
47
  justify-content: center
43
- padding: 0.75rem
48
+ padding: $card-header-padding
44
49
 
45
50
  .card-image
46
51
  display: block
@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
48
53
 
49
54
  .card-content
50
55
  background-color: $card-content-background-color
51
- padding: 1.5rem
56
+ padding: $card-content-padding
52
57
 
53
58
  .card-footer
54
59
  background-color: $card-footer-background-color
@@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
63
68
  flex-grow: 1
64
69
  flex-shrink: 0
65
70
  justify-content: center
66
- padding: 0.75rem
71
+ padding: $card-footer-padding
67
72
  &:not(:last-child)
68
73
  border-right: $card-footer-border-top
69
74
 
@@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
71
76
 
72
77
  .card
73
78
  .media:not(:last-child)
74
- margin-bottom: 0.75rem
79
+ margin-bottom: $card-media-margin
@@ -1,6 +1,10 @@
1
+ $dropdown-menu-min-width: 12rem !default
2
+
1
3
  $dropdown-content-background-color: $white !default
2
4
  $dropdown-content-arrow: $link !default
3
5
  $dropdown-content-offset: 4px !default
6
+ $dropdown-content-padding-bottom: 0.5rem !default
7
+ $dropdown-content-padding-top: 0.5rem !default
4
8
  $dropdown-content-radius: $radius !default
5
9
  $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
6
10
  $dropdown-content-z: 20 !default
@@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
35
39
  .dropdown-menu
36
40
  display: none
37
41
  left: 0
38
- min-width: 12rem
42
+ min-width: $dropdown-menu-min-width
39
43
  padding-top: $dropdown-content-offset
40
44
  position: absolute
41
45
  top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
45
49
  background-color: $dropdown-content-background-color
46
50
  border-radius: $dropdown-content-radius
47
51
  box-shadow: $dropdown-content-shadow
48
- padding-bottom: 0.5rem
49
- padding-top: 0.5rem
52
+ padding-bottom: $dropdown-content-padding-bottom
53
+ padding-top: $dropdown-content-padding-top
50
54
 
51
55
  .dropdown-item
52
56
  color: $dropdown-item-color
@@ -1,3 +1,5 @@
1
+ $level-item-spacing: ($block-spacing / 2) !default
2
+
1
3
  .level
2
4
  @extend %block
3
5
  align-items: center
@@ -18,7 +20,7 @@
18
20
  .level-item
19
21
  &:not(:last-child)
20
22
  margin-bottom: 0
21
- margin-right: 0.75rem
23
+ margin-right: $level-item-spacing
22
24
  &:not(.is-narrow)
23
25
  flex-grow: 1
24
26
  // Responsiveness
@@ -41,7 +43,7 @@
41
43
  // Responsiveness
42
44
  +mobile
43
45
  &:not(:last-child)
44
- margin-bottom: 0.75rem
46
+ margin-bottom: $level-item-spacing
45
47
 
46
48
  .level-left,
47
49
  .level-right
@@ -55,7 +57,7 @@
55
57
  // Responsiveness
56
58
  +tablet
57
59
  &:not(:last-child)
58
- margin-right: 0.75rem
60
+ margin-right: $level-item-spacing
59
61
 
60
62
  .level-left
61
63
  align-items: center
@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
26
26
  border-top-left-radius: $list-radius
27
27
  border-top-right-radius: $list-radius
28
28
  &:last-child
29
- border-top-left-radius: $list-radius
30
- border-top-right-radius: $list-radius
29
+ border-bottom-left-radius: $list-radius
30
+ border-bottom-right-radius: $list-radius
31
31
  &:not(:last-child)
32
32
  border-bottom: $list-item-border
33
33
  &.is-active
@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
36
36
 
37
37
  a.list-item
38
38
  background-color: $list-item-hover-background-color
39
- cursor: pointer
39
+ cursor: pointer
@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
6
6
  $menu-item-active-background-color: $link !default
7
7
 
8
8
  $menu-list-border-left: 1px solid $border !default
9
+ $menu-list-line-height: 1.25 !default
10
+ $menu-list-link-padding: 0.5em 0.75em !default
11
+ $menu-nested-list-margin: 0.75em !default
12
+ $menu-nested-list-padding-left: 0.75em !default
9
13
 
10
14
  $menu-label-color: $text-light !default
15
+ $menu-label-font-size: 0.75em !default
16
+ $menu-label-letter-spacing: 0.1em !default
17
+ $menu-label-spacing: 1em !default
11
18
 
12
19
  .menu
13
20
  font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
20
27
  font-size: $size-large
21
28
 
22
29
  .menu-list
23
- line-height: 1.25
30
+ line-height: $menu-list-line-height
24
31
  a
25
32
  border-radius: $menu-item-radius
26
33
  color: $menu-item-color
27
34
  display: block
28
- padding: 0.5em 0.75em
35
+ padding: $menu-list-link-padding
29
36
  &:hover
30
37
  background-color: $menu-item-hover-background-color
31
38
  color: $menu-item-hover-color
@@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
36
43
  li
37
44
  ul
38
45
  border-left: $menu-list-border-left
39
- margin: 0.75em
40
- padding-left: 0.75em
46
+ margin: $menu-nested-list-margin
47
+ padding-left: $menu-nested-list-padding-left
41
48
 
42
49
  .menu-label
43
50
  color: $menu-label-color
44
- font-size: 0.75em
45
- letter-spacing: 0.1em
51
+ font-size: $menu-label-font-size
52
+ letter-spacing: $menu-label-letter-spacing
46
53
  text-transform: uppercase
47
54
  &:not(:first-child)
48
- margin-top: 1em
55
+ margin-top: $menu-label-spacing
49
56
  &:not(:last-child)
50
- margin-bottom: 1em
57
+ margin-bottom: $menu-label-spacing
@@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default
17
17
  $message-body-pre-code-background-color: transparent !default
18
18
 
19
19
  $message-header-body-border-width: 0 !default
20
+ $message-colors: $colors !default
20
21
 
21
22
  .message
22
23
  @extend %block
@@ -36,7 +37,7 @@ $message-header-body-border-width: 0 !default
36
37
  &.is-large
37
38
  font-size: $size-large
38
39
  // Colors
39
- @each $name, $pair in $colors
40
+ @each $name, $pair in $message-colors
40
41
  $color: nth($pair, 1)
41
42
  $color-invert: nth($pair, 2)
42
43
  $color-lightning: max((100% - lightness($color)) - 2%, 0%)
@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
102
102
  border-top: $modal-card-foot-border-top
103
103
  .button
104
104
  &:not(:last-child)
105
- margin-right: 10px
105
+ margin-right: 0.5em
106
106
 
107
107
  .modal-card-body
108
108
  +overflow-touch
@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
69
69
  color: $color-invert
70
70
  & > a.navbar-item,
71
71
  .navbar-link
72
+ &:focus,
72
73
  &:hover,
73
74
  &.is-active
74
75
  background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
86
87
  color: $color-invert
87
88
  & > a.navbar-item,
88
89
  .navbar-link
90
+ &:focus,
89
91
  &:hover,
90
92
  &.is-active
91
93
  background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
93
95
  .navbar-link
94
96
  &::after
95
97
  border-color: $color-invert
98
+ .navbar-item.has-dropdown:focus .navbar-link,
96
99
  .navbar-item.has-dropdown:hover .navbar-link,
97
100
  .navbar-item.has-dropdown.is-active .navbar-link
98
101
  background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
135
138
 
136
139
  .navbar-brand
137
140
  a.navbar-item
141
+ &:focus,
138
142
  &:hover
139
143
  background-color: transparent
140
144
 
@@ -167,6 +171,8 @@ body
167
171
  a.navbar-item,
168
172
  .navbar-link
169
173
  cursor: pointer
174
+ &:focus,
175
+ &:focus-within,
170
176
  &:hover,
171
177
  &.is-active
172
178
  background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
187
193
  border-bottom: 1px solid transparent
188
194
  min-height: $navbar-height
189
195
  padding-bottom: calc(0.5rem - 1px)
196
+ &:focus,
190
197
  &:hover
191
198
  background-color: $navbar-tab-hover-background-color
192
199
  border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -286,16 +293,20 @@ a.navbar-item,
286
293
  &.is-transparent
287
294
  a.navbar-item,
288
295
  .navbar-link
296
+ &:focus,
289
297
  &:hover,
290
298
  &.is-active
291
299
  background-color: transparent !important
292
300
  .navbar-item.has-dropdown
293
301
  &.is-active,
302
+ &.is-hoverable:focus,
303
+ &.is-hoverable:focus-within,
294
304
  &.is-hoverable:hover
295
305
  .navbar-link
296
306
  background-color: transparent !important
297
307
  .navbar-dropdown
298
308
  a.navbar-item
309
+ &:focus,
299
310
  &:hover
300
311
  background-color: $navbar-dropdown-item-hover-background-color
301
312
  color: $navbar-dropdown-item-hover-color
@@ -323,6 +334,8 @@ a.navbar-item,
323
334
  box-shadow: 0 -8px 8px rgba($black, 0.1)
324
335
  top: auto
325
336
  &.is-active,
337
+ &.is-hoverable:focus,
338
+ &.is-hoverable:focus-within,
326
339
  &.is-hoverable:hover
327
340
  .navbar-dropdown
328
341
  display: block
@@ -358,6 +371,7 @@ a.navbar-item,
358
371
  white-space: nowrap
359
372
  a.navbar-item
360
373
  padding-right: 3rem
374
+ &:focus,
361
375
  &:hover
362
376
  background-color: $navbar-dropdown-item-hover-background-color
363
377
  color: $navbar-dropdown-item-hover-color
@@ -413,9 +427,10 @@ a.navbar-item,
413
427
  .navbar-link
414
428
  &.is-active
415
429
  color: $navbar-item-active-color
416
- &.is-active:not(:hover)
430
+ &.is-active:not(:focus):not(:hover)
417
431
  background-color: $navbar-item-active-background-color
418
432
  .navbar-item.has-dropdown
433
+ &:focus,
419
434
  &:hover,
420
435
  &.is-active
421
436
  .navbar-link