bulma-sass 0.6.2 → 0.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +5 -5
  2. data/README.md +8 -2
  3. data/app/assets/stylesheets/bulma.sass +1 -1
  4. data/app/assets/stylesheets/sass/.DS_Store +0 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +2 -2
  6. data/app/assets/stylesheets/sass/base/helpers.sass +6 -0
  7. data/app/assets/stylesheets/sass/base/minireset.sass +5 -6
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +13 -12
  9. data/app/assets/stylesheets/sass/components/card.sass +7 -0
  10. data/app/assets/stylesheets/sass/components/dropdown.sass +1 -1
  11. data/app/assets/stylesheets/sass/components/media.sass +0 -1
  12. data/app/assets/stylesheets/sass/components/message.sass +12 -5
  13. data/app/assets/stylesheets/sass/components/navbar.sass +70 -34
  14. data/app/assets/stylesheets/sass/elements/button.sass +19 -9
  15. data/app/assets/stylesheets/sass/elements/container.sass +6 -6
  16. data/app/assets/stylesheets/sass/elements/content.sass +1 -5
  17. data/app/assets/stylesheets/sass/elements/form.sass +17 -12
  18. data/app/assets/stylesheets/sass/elements/image.sass +31 -1
  19. data/app/assets/stylesheets/sass/elements/table.sass +8 -1
  20. data/app/assets/stylesheets/sass/elements/tag.sass +6 -6
  21. data/app/assets/stylesheets/sass/elements/title.sass +7 -4
  22. data/app/assets/stylesheets/sass/grid/columns.sass +14 -14
  23. data/app/assets/stylesheets/sass/layout/footer.sass +1 -1
  24. data/app/assets/stylesheets/sass/utilities/controls.sass +9 -4
  25. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +4 -2
  26. data/app/assets/stylesheets/sass/utilities/functions.sass +34 -0
  27. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -3
  28. data/app/assets/stylesheets/sass/utilities/mixins.sass +160 -117
  29. data/docs/Gemfile +15 -0
  30. data/docs/README.md +67 -0
  31. data/docs/_assets/css/main.scss +1 -0
  32. data/docs/_config.yml +15 -0
  33. data/docs/_includes/head.html +6 -0
  34. data/docs/_layouts/default.html +16 -0
  35. data/docs/index.md +3 -0
  36. data/lib/bulma/sass/version.rb +1 -1
  37. metadata +11 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 60c061dad8b1739060e906b8de651d08f7966c72
4
- data.tar.gz: 0e7066949f8186ccbd78ed48994120d595cdf1fe
2
+ SHA256:
3
+ metadata.gz: 75073f801c5bfd7b483790c4b19fd71661a3e9d8d444c5a7048c6f881cbbf6c8
4
+ data.tar.gz: 2ff3c9a45f0e4c4b1a81e136b0935e11426d7d2a57fc768997356f34e96319c6
5
5
  SHA512:
6
- metadata.gz: 546496e3cdf267ced595843f7eb92abacb3458041c2e42dde3ecd95a2731b72035259f12db73eedbf7dacbb08c13681f5ee3620357851d8288a212ef8bdf041e
7
- data.tar.gz: 71707aa3fda3978e4a6ffc0163727c60a68b22cb7d3f8a72aa5ae9ce03c5d24fdecc7f7c9961e14cfd58db33fe5ae00706dfcd6b88139e2e02d059d6fd1099d8
6
+ metadata.gz: cae9a859acd6aa44381cc92901c3ac64c4bcc8dc554fe0ea3e9af8c686b238e8031588c72a0a07c75a21029094c7b8b955e623bd132cc82157e5a0ff3e6ac7f6
7
+ data.tar.gz: ccf82f66d994f67d557a10aff975e0ab099cb0f606da4a22938572c0440ca55b9a99f47baf912c0fc21e35eb2e7f99fd79efc0538b430ada070f91e244f488e0
data/README.md CHANGED
@@ -4,7 +4,9 @@ Bulma, modern CSS framework based on Flexbox
4
4
 
5
5
  `bulma-sass` gem supports Rails and Sprockets
6
6
 
7
- ## Installation
7
+ ## Rails
8
+
9
+ ### Installation
8
10
 
9
11
  Add this line to your application's Gemfile:
10
12
 
@@ -20,10 +22,14 @@ Or install it yourself as:
20
22
 
21
23
  $ gem install bulma-sass
22
24
 
23
- ## Usage
25
+ ### Usage
24
26
 
25
27
  Import Bulma styles in `app/assets/stylesheets/application.scss`
26
28
 
27
29
  ```css
28
30
  @import "bulma";
29
31
  ```
32
+
33
+ ## Jekyll
34
+
35
+ See [example](./docs)
@@ -1,5 +1,5 @@
1
1
  @charset "utf-8"
2
- /*! bulma.io v0.6.0 | MIT License | github.com/jgthms/bulma */
2
+ /*! bulma.io v0.7.1 | MIT License | github.com/jgthms/bulma */
3
3
  @import "sass/utilities/_all"
4
4
  @import "sass/base/_all"
5
5
  @import "sass/elements/_all"
@@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
11
11
  $code-weight: normal !default
12
12
  $code-size: 0.875em !default
13
13
 
14
- $hr-background-color: $border !default
15
- $hr-height: 1px !default
14
+ $hr-background-color: $background !default
15
+ $hr-height: 2px !default
16
16
  $hr-margin: 1.5rem 0 !default
17
17
 
18
18
  $strong-color: $text-strong !default
@@ -52,6 +52,8 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
52
52
  @each $alignment, $text-align in $alignments
53
53
  .has-text-#{$alignment}
54
54
  text-align: #{$text-align} !important
55
+
56
+ @each $alignment, $text-align in $alignments
55
57
  +mobile
56
58
  .has-text-#{$alignment}-mobile
57
59
  text-align: #{$text-align} !important
@@ -100,10 +102,14 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
100
102
  &:hover,
101
103
  &:focus
102
104
  color: darken($color, 10%) !important
105
+ .has-background-#{$name}
106
+ background-color: $color !important
103
107
 
104
108
  @each $name, $shade in $shades
105
109
  .has-text-#{$name}
106
110
  color: $shade !important
111
+ .has-background-#{$name}
112
+ background-color: $shade !important
107
113
 
108
114
  .has-text-weight-light
109
115
  font-weight: $weight-light !important
@@ -1,4 +1,4 @@
1
- /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
1
+ /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
2
2
  // Blocks
3
3
  html,
4
4
  body,
@@ -52,17 +52,16 @@ html
52
52
  box-sizing: border-box
53
53
 
54
54
  *
55
- box-sizing: inherit
56
- &:before,
57
- &:after
55
+ &,
56
+ &::before,
57
+ &::after
58
58
  box-sizing: inherit
59
59
 
60
60
  // Media
61
61
  img,
62
- embed,
63
- object,
64
62
  audio,
65
63
  video
64
+ height: auto
66
65
  max-width: 100%
67
66
 
68
67
  // Iframe
@@ -2,23 +2,22 @@ $breadcrumb-item-color: $link !default
2
2
  $breadcrumb-item-hover-color: $link-hover !default
3
3
  $breadcrumb-item-active-color: $text-strong !default
4
4
 
5
- $breadcrumb-item-separator-color: $text !default
5
+ $breadcrumb-item-padding-vertical: 0 !default
6
+ $breadcrumb-item-padding-horizontal: 0.75em !default
7
+
8
+ $breadcrumb-item-separator-color: $grey-light !default
6
9
 
7
10
  .breadcrumb
8
11
  +block
9
12
  +unselectable
10
- align-items: stretch
11
- display: flex
12
13
  font-size: $size-normal
13
- overflow: hidden
14
- overflow-x: auto
15
14
  white-space: nowrap
16
15
  a
17
16
  align-items: center
18
17
  color: $breadcrumb-item-color
19
18
  display: flex
20
19
  justify-content: center
21
- padding: 0.5em 0.75em
20
+ padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
22
21
  &:hover
23
22
  color: $breadcrumb-item-hover-color
24
23
  li
@@ -34,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default
34
33
  & + li::before
35
34
  color: $breadcrumb-item-separator-color
36
35
  content: "\0002f"
37
- ul, ol
38
- align-items: center
36
+ ul,
37
+ ol
38
+ align-items: flex-start
39
39
  display: flex
40
- flex-grow: 1
41
- flex-shrink: 0
40
+ flex-wrap: wrap
42
41
  justify-content: flex-start
43
42
  .icon
44
43
  &:first-child
@@ -47,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default
47
46
  margin-left: 0.5em
48
47
  // Alignment
49
48
  &.is-centered
50
- ol, ul
49
+ ol,
50
+ ul
51
51
  justify-content: center
52
52
  &.is-right
53
- ol, ul
53
+ ol,
54
+ ul
54
55
  justify-content: flex-end
55
56
  // Sizes
56
57
  &.is-small
@@ -2,10 +2,14 @@ $card-color: $text !default
2
2
  $card-background-color: $white !default
3
3
  $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
4
4
 
5
+ $card-header-background-color: none !default
5
6
  $card-header-color: $text-strong !default
6
7
  $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
7
8
  $card-header-weight: $weight-bold !default
8
9
 
10
+ $card-content-background-color: none !default
11
+
12
+ $card-footer-background-color: none !default
9
13
  $card-footer-border-top: 1px solid $border !default
10
14
 
11
15
  .card
@@ -16,6 +20,7 @@ $card-footer-border-top: 1px solid $border !default
16
20
  position: relative
17
21
 
18
22
  .card-header
23
+ background-color: $card-header-background-color
19
24
  align-items: stretch
20
25
  box-shadow: $card-header-shadow
21
26
  display: flex
@@ -42,9 +47,11 @@ $card-footer-border-top: 1px solid $border !default
42
47
  position: relative
43
48
 
44
49
  .card-content
50
+ background-color: $card-content-background-color
45
51
  padding: 1.5rem
46
52
 
47
53
  .card-footer
54
+ background-color: $card-footer-background-color
48
55
  border-top: $card-footer-border-top
49
56
  align-items: stretch
50
57
  display: flex
@@ -29,7 +29,7 @@ $dropdown-divider-background-color: $border !default
29
29
  .dropdown-menu
30
30
  bottom: 100%
31
31
  padding-bottom: $dropdown-content-offset
32
- padding-top: unset
32
+ padding-top: initial
33
33
  top: auto
34
34
 
35
35
  .dropdown-menu
@@ -41,5 +41,4 @@
41
41
  flex-basis: auto
42
42
  flex-grow: 1
43
43
  flex-shrink: 1
44
- overflow: auto
45
44
  text-align: left
@@ -3,17 +3,21 @@ $message-radius: $radius !default
3
3
 
4
4
  $message-header-background-color: $text !default
5
5
  $message-header-color: $text-invert !default
6
- $message-header-padding: 0.5em 0.75em !default
6
+ $message-header-weight: $weight-bold !default
7
+ $message-header-padding: 0.75em 1em !default
7
8
  $message-header-radius: $radius !default
8
9
 
9
- $message-body-border: 1px solid $border !default
10
+ $message-body-border-color: $border !default
11
+ $message-body-border-width: 0 0 0 4px !default
10
12
  $message-body-color: $text !default
11
- $message-body-padding: 1em 1.25em !default
13
+ $message-body-padding: 1.25em 1.5em !default
12
14
  $message-body-radius: $radius !default
13
15
 
14
16
  $message-body-pre-background-color: $white !default
15
17
  $message-body-pre-code-background-color: transparent !default
16
18
 
19
+ $message-header-body-border-width: 0 !default
20
+
17
21
  .message
18
22
  +block
19
23
  background-color: $message-background-color
@@ -54,6 +58,7 @@ $message-body-pre-code-background-color: transparent !default
54
58
  border-radius: $message-header-radius $message-header-radius 0 0
55
59
  color: $message-header-color
56
60
  display: flex
61
+ font-weight: $message-header-weight
57
62
  justify-content: space-between
58
63
  line-height: 1.25
59
64
  padding: $message-header-padding
@@ -63,13 +68,15 @@ $message-body-pre-code-background-color: transparent !default
63
68
  flex-shrink: 0
64
69
  margin-left: 0.75em
65
70
  & + .message-body
71
+ border-width: $message-header-body-border-width
66
72
  border-top-left-radius: 0
67
73
  border-top-right-radius: 0
68
- border-top: none
69
74
 
70
75
  .message-body
71
- border: $message-body-border
76
+ border-color: $message-body-border-color
72
77
  border-radius: $message-body-radius
78
+ border-style: solid
79
+ border-width: $message-body-border-width
73
80
  color: $message-body-color
74
81
  padding: $message-body-padding
75
82
  code,
@@ -1,10 +1,15 @@
1
1
  $navbar-background-color: $white !default
2
+ $navbar-box-shadow-size: 0 2px 0 0 !default
3
+ $navbar-box-shadow-color: $background !default
2
4
  $navbar-height: 3.25rem !default
5
+ $navbar-padding-vertical: 1rem !default
6
+ $navbar-padding-horizontal: 2rem !default
7
+ $navbar-z: 30 !default
3
8
  $navbar-fixed-z: 30 !default
4
9
 
5
10
  $navbar-item-color: $grey-dark !default
6
11
  $navbar-item-hover-color: $link !default
7
- $navbar-item-hover-background-color: $background !default
12
+ $navbar-item-hover-background-color: $white-bis !default
8
13
  $navbar-item-active-color: $black !default
9
14
  $navbar-item-active-background-color: transparent !default
10
15
  $navbar-item-img-max-height: 1.75rem !default
@@ -18,7 +23,7 @@ $navbar-tab-active-border-bottom-style: solid !default
18
23
  $navbar-tab-active-border-bottom-width: 3px !default
19
24
 
20
25
  $navbar-dropdown-background-color: $white !default
21
- $navbar-dropdown-border-top: 1px solid $border !default
26
+ $navbar-dropdown-border-top: 2px solid $border !default
22
27
  $navbar-dropdown-offset: -4px !default
23
28
  $navbar-dropdown-arrow: $link !default
24
29
  $navbar-dropdown-radius: $radius-large !default
@@ -32,7 +37,10 @@ $navbar-dropdown-item-hover-background-color: $background !default
32
37
  $navbar-dropdown-item-active-color: $link !default
33
38
  $navbar-dropdown-item-active-background-color: $background !default
34
39
 
35
- $navbar-divider-background-color: $border !default
40
+ $navbar-divider-background-color: $background !default
41
+ $navbar-divider-height: 2px !default
42
+
43
+ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
36
44
 
37
45
  =navbar-fixed
38
46
  left: 0
@@ -40,15 +48,11 @@ $navbar-divider-background-color: $border !default
40
48
  right: 0
41
49
  z-index: $navbar-fixed-z
42
50
 
43
- =navbar-fixed-html
44
- left: 0
45
- position: fixed
46
- right: 0
47
-
48
51
  .navbar
49
52
  background-color: $navbar-background-color
50
53
  min-height: $navbar-height
51
54
  position: relative
55
+ z-index: $navbar-z
52
56
  @each $name, $pair in $colors
53
57
  $color: nth($pair, 1)
54
58
  $color-invert: nth($pair, 2)
@@ -98,22 +102,23 @@ $navbar-divider-background-color: $border !default
98
102
  min-height: $navbar-height
99
103
  width: 100%
100
104
  &.has-shadow
101
- box-shadow: 0 2px 3px rgba($black, 0.1)
105
+ box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
102
106
  &.is-fixed-bottom,
103
107
  &.is-fixed-top
104
108
  +navbar-fixed
105
109
  &.is-fixed-bottom
106
110
  bottom: 0
107
111
  &.has-shadow
108
- box-shadow: 0 -2px 3px rgba($black, 0.1)
112
+ box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
109
113
  &.is-fixed-top
110
114
  top: 0
111
115
 
112
- html.has-navbar-fixed-top
113
- padding-top: $navbar-height
114
-
115
- html.has-navbar-fixed-bottom
116
- padding-bottom: $navbar-height
116
+ html,
117
+ body
118
+ &.has-navbar-fixed-top
119
+ padding-top: $navbar-height
120
+ &.has-navbar-fixed-bottom
121
+ padding-bottom: $navbar-height
117
122
 
118
123
  .navbar-brand,
119
124
  .navbar-tabs
@@ -122,6 +127,11 @@ html.has-navbar-fixed-bottom
122
127
  flex-shrink: 0
123
128
  min-height: $navbar-height
124
129
 
130
+ .navbar-brand
131
+ a.navbar-item
132
+ &:hover
133
+ background-color: transparent
134
+
125
135
  .navbar-tabs
126
136
  +overflow-touch
127
137
  max-width: 100vw
@@ -140,17 +150,23 @@ html.has-navbar-fixed-bottom
140
150
  color: $navbar-item-color
141
151
  display: block
142
152
  line-height: 1.5
143
- padding: 0.5rem 1rem
153
+ padding: 0.5rem 0.75rem
144
154
  position: relative
155
+ .icon
156
+ &:only-child
157
+ margin-left: -0.25rem
158
+ margin-right: -0.25rem
145
159
 
146
160
  a.navbar-item,
147
- a.navbar-link
161
+ .navbar-link
162
+ cursor: pointer
148
163
  &:hover,
149
164
  &.is-active
150
165
  background-color: $navbar-item-hover-background-color
151
166
  color: $navbar-item-hover-color
152
167
 
153
168
  .navbar-item
169
+ display: block
154
170
  flex-grow: 0
155
171
  flex-shrink: 0
156
172
  img
@@ -181,6 +197,10 @@ a.navbar-link
181
197
 
182
198
  .navbar-link
183
199
  padding-right: 2.5em
200
+ &::after
201
+ +arrow($navbar-dropdown-arrow)
202
+ margin-top: -0.375em
203
+ right: 1.125em
184
204
 
185
205
  .navbar-dropdown
186
206
  font-size: 0.875rem
@@ -194,7 +214,7 @@ a.navbar-link
194
214
  background-color: $navbar-divider-background-color
195
215
  border: none
196
216
  display: none
197
- height: 1px
217
+ height: $navbar-divider-height
198
218
  margin: 0.5rem 0
199
219
 
200
220
  +touch
@@ -205,6 +225,9 @@ a.navbar-link
205
225
  .navbar-item
206
226
  align-items: center
207
227
  display: flex
228
+ .navbar-link
229
+ &::after
230
+ display: none
208
231
  .navbar-menu
209
232
  background-color: $navbar-background-color
210
233
  box-shadow: 0 8px 16px rgba($black, 0.1)
@@ -228,10 +251,12 @@ a.navbar-link
228
251
  +overflow-touch
229
252
  max-height: calc(100vh - #{$navbar-height})
230
253
  overflow: auto
231
- html.has-navbar-fixed-top-touch
232
- padding-top: $navbar-height
233
- html.has-navbar-fixed-bottom-touch
234
- padding-bottom: $navbar-height
254
+ html,
255
+ body
256
+ &.has-navbar-fixed-top-touch
257
+ padding-top: $navbar-height
258
+ &.has-navbar-fixed-bottom-touch
259
+ padding-bottom: $navbar-height
235
260
 
236
261
  +desktop
237
262
  .navbar,
@@ -242,9 +267,17 @@ a.navbar-link
242
267
  display: flex
243
268
  .navbar
244
269
  min-height: $navbar-height
270
+ &.is-spaced
271
+ padding: $navbar-padding-vertical $navbar-padding-horizontal
272
+ .navbar-start,
273
+ .navbar-end
274
+ align-items: center
275
+ a.navbar-item,
276
+ .navbar-link
277
+ border-radius: $radius
245
278
  &.is-transparent
246
279
  a.navbar-item,
247
- a.navbar-link
280
+ .navbar-link
248
281
  &:hover,
249
282
  &.is-active
250
283
  background-color: transparent !important
@@ -268,6 +301,7 @@ a.navbar-link
268
301
  align-items: center
269
302
  display: flex
270
303
  .navbar-item
304
+ display: flex
271
305
  &.has-dropdown
272
306
  align-items: stretch
273
307
  &.has-dropdown-up
@@ -284,16 +318,11 @@ a.navbar-link
284
318
  &.is-hoverable:hover
285
319
  .navbar-dropdown
286
320
  display: block
321
+ .navbar.is-spaced &,
287
322
  &.is-boxed
288
323
  opacity: 1
289
324
  pointer-events: auto
290
325
  transform: translateY(0)
291
- .navbar-link
292
- &::after
293
- +arrow($navbar-dropdown-arrow)
294
- margin-top: -0.375em
295
- right: 1.125em
296
- top: 50%
297
326
  .navbar-menu
298
327
  flex-grow: 1
299
328
  flex-shrink: 0
@@ -327,6 +356,7 @@ a.navbar-link
327
356
  &.is-active
328
357
  background-color: $navbar-dropdown-item-active-background-color
329
358
  color: $navbar-dropdown-item-active-color
359
+ .navbar.is-spaced &,
330
360
  &.is-boxed
331
361
  border-radius: $navbar-dropdown-boxed-radius
332
362
  border-top: none
@@ -360,13 +390,19 @@ a.navbar-link
360
390
  box-shadow: 0 -2px 3px rgba($black, 0.1)
361
391
  &.is-fixed-top-desktop
362
392
  top: 0
363
- html.has-navbar-fixed-top-desktop
364
- padding-top: $navbar-height
365
- html.has-navbar-fixed-bottom-desktop
366
- padding-bottom: $navbar-height
393
+ html,
394
+ body
395
+ &.has-navbar-fixed-top-desktop
396
+ padding-top: $navbar-height
397
+ &.has-navbar-fixed-bottom-desktop
398
+ padding-bottom: $navbar-height
399
+ &.has-spaced-navbar-fixed-top
400
+ padding-top: $navbar-height + ($navbar-padding-vertical * 2)
401
+ &.has-spaced-navbar-fixed-bottom
402
+ padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
367
403
  // Hover/Active states
368
404
  a.navbar-item,
369
- a.navbar-link
405
+ .navbar-link
370
406
  &.is-active
371
407
  color: $navbar-item-active-color
372
408
  &.is-active:not(:hover)