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
@@ -1,6 +1,11 @@
1
1
  $button-color: $grey-darker !default
2
2
  $button-background-color: $white !default
3
+
3
4
  $button-border-color: $grey-lighter !default
5
+ $button-border-width: $control-border-width !default
6
+
7
+ $button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
8
+ $button-padding-horizontal: 0.75em !default
4
9
 
5
10
  $button-hover-color: $link-hover !default
6
11
  $button-hover-border-color: $link-hover-border !default
@@ -40,11 +45,14 @@ $button-static-border-color: $grey-lighter !default
40
45
  +unselectable
41
46
  background-color: $button-background-color
42
47
  border-color: $button-border-color
48
+ border-width: $button-border-width
43
49
  color: $button-color
44
50
  cursor: pointer
45
51
  justify-content: center
46
- padding-left: 0.75em
47
- padding-right: 0.75em
52
+ padding-bottom: $button-padding-vertical
53
+ padding-left: $button-padding-horizontal
54
+ padding-right: $button-padding-horizontal
55
+ padding-top: $button-padding-vertical
48
56
  text-align: center
49
57
  white-space: nowrap
50
58
  strong
@@ -57,14 +65,14 @@ $button-static-border-color: $grey-lighter !default
57
65
  height: 1.5em
58
66
  width: 1.5em
59
67
  &:first-child:not(:last-child)
60
- margin-left: calc(-0.375em - 1px)
68
+ margin-left: calc(-0.375em - #{$button-border-width})
61
69
  margin-right: 0.1875em
62
70
  &:last-child:not(:first-child)
63
71
  margin-left: 0.1875em
64
- margin-right: calc(-0.375em - 1px)
72
+ margin-right: calc(-0.375em - #{$button-border-width})
65
73
  &:first-child:last-child
66
- margin-left: calc(-0.375em - 1px)
67
- margin-right: calc(-0.375em - 1px)
74
+ margin-left: calc(-0.375em - #{$button-border-width})
75
+ margin-right: calc(-0.375em - #{$button-border-width})
68
76
  // States
69
77
  &:hover,
70
78
  &.is-hovered
@@ -138,7 +146,7 @@ $button-static-border-color: $grey-lighter !default
138
146
  box-shadow: none
139
147
  color: $color
140
148
  &.is-loading
141
- &:after
149
+ &::after
142
150
  border-color: transparent transparent $color-invert $color-invert !important
143
151
  &.is-outlined
144
152
  background-color: transparent
@@ -150,7 +158,7 @@ $button-static-border-color: $grey-lighter !default
150
158
  border-color: $color
151
159
  color: $color-invert
152
160
  &.is-loading
153
- &:after
161
+ &::after
154
162
  border-color: transparent transparent $color $color !important
155
163
  &[disabled]
156
164
  background-color: transparent
@@ -189,7 +197,7 @@ $button-static-border-color: $grey-lighter !default
189
197
  &.is-loading
190
198
  color: transparent !important
191
199
  pointer-events: none
192
- &:after
200
+ &::after
193
201
  +loader
194
202
  +center(1em)
195
203
  position: absolute !important
@@ -239,6 +247,8 @@ $button-static-border-color: $grey-lighter !default
239
247
  z-index: 3
240
248
  &:hover
241
249
  z-index: 4
250
+ &.is-expanded
251
+ flex-grow: 1
242
252
  &.is-centered
243
253
  justify-content: center
244
254
  &.is-right
@@ -1,7 +1,7 @@
1
1
  .container
2
2
  margin: 0 auto
3
3
  position: relative
4
- +from($desktop)
4
+ +desktop
5
5
  max-width: $desktop - (2 * $gap)
6
6
  width: $desktop - (2 * $gap)
7
7
  &.is-fluid
@@ -9,17 +9,17 @@
9
9
  margin-right: $gap
10
10
  max-width: none
11
11
  width: auto
12
- +until($widescreen)
12
+ +until-widescreen
13
13
  &.is-widescreen
14
14
  max-width: $widescreen - (2 * $gap)
15
15
  width: auto
16
- +until($fullhd)
16
+ +until-fullhd
17
17
  &.is-fullhd
18
18
  max-width: $fullhd - (2 * $gap)
19
19
  width: auto
20
- +from($widescreen)
20
+ +widescreen
21
21
  max-width: $widescreen - (2 * $gap)
22
22
  width: $widescreen - (2 * $gap)
23
- +from($fullhd)
23
+ +fullhd
24
24
  max-width: $fullhd - (2 * $gap)
25
- width: $fullhd - (2 * $gap)
25
+ width: $fullhd - (2 * $gap)
@@ -1,5 +1,5 @@
1
1
  $content-heading-color: $text-strong !default
2
- $content-heading-weight: $weight-normal !default
2
+ $content-heading-weight: $weight-semibold !default
3
3
  $content-heading-line-height: 1.125 !default
4
4
 
5
5
  $content-blockquote-background-color: $background !default
@@ -12,7 +12,6 @@ $content-table-cell-border: 1px solid $border !default
12
12
  $content-table-cell-border-width: 0 0 1px !default
13
13
  $content-table-cell-padding: 0.5em 0.75em !default
14
14
  $content-table-cell-heading-color: $text-strong !default
15
- $content-table-row-hover-background-color: $background !default
16
15
  $content-table-head-cell-border-width: 0 0 2px !default
17
16
  $content-table-head-cell-color: $text-strong !default
18
17
  $content-table-foot-cell-border-width: 2px 0 0 !default
@@ -117,9 +116,6 @@ $content-table-foot-cell-color: $text-strong !default
117
116
  th
118
117
  color: $content-table-cell-heading-color
119
118
  text-align: left
120
- tr
121
- &:hover
122
- background-color: $content-table-row-hover-background-color
123
119
  thead
124
120
  td,
125
121
  th
@@ -119,7 +119,7 @@ $help-size: $size-small !default
119
119
  max-height: 600px
120
120
  min-height: 120px
121
121
  &[rows]
122
- height: unset
122
+ height: initial
123
123
  // Modifiers
124
124
  &.has-fixed-size
125
125
  resize: none
@@ -149,11 +149,10 @@ $help-size: $size-small !default
149
149
  vertical-align: top
150
150
  &:not(.is-multiple)
151
151
  height: 2.25em
152
+ &:not(.is-multiple):not(.is-loading)
152
153
  &::after
153
154
  +arrow($input-arrow)
154
- margin-top: -0.375em
155
155
  right: 1.125em
156
- top: 50%
157
156
  z-index: 4
158
157
  &.is-rounded
159
158
  select
@@ -173,24 +172,30 @@ $help-size: $size-small !default
173
172
  &:not([multiple])
174
173
  padding-right: 2.5em
175
174
  &[multiple]
176
- height: unset
175
+ height: initial
177
176
  padding: 0
178
177
  option
179
178
  padding: 0.5em 1em
180
179
  // States
181
- &:hover
180
+ &:not(.is-multiple):not(.is-loading):hover
182
181
  &::after
183
182
  border-color: $input-hover-color
184
183
  // Colors
185
184
  @each $name, $pair in $colors
186
185
  $color: nth($pair, 1)
187
- &.is-#{$name} select
188
- border-color: $color
189
- &:focus,
190
- &.is-focused,
191
- &:active,
192
- &.is-active
193
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
186
+ &.is-#{$name}
187
+ &:not(:hover)::after
188
+ border-color: $color
189
+ select
190
+ border-color: $color
191
+ &:hover,
192
+ &.is-hovered
193
+ border-color: darken($color, 5%)
194
+ &:focus,
195
+ &.is-focused,
196
+ &:active,
197
+ &.is-active
198
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
194
199
  // Sizes
195
200
  &.is-small
196
201
  +control-small
@@ -12,10 +12,20 @@ $dimensions: 16 24 32 48 64 96 128 !default
12
12
  // Ratio
13
13
  &.is-square,
14
14
  &.is-1by1,
15
+ &.is-5by4,
15
16
  &.is-4by3,
16
17
  &.is-3by2,
18
+ &.is-5by3,
17
19
  &.is-16by9,
18
- &.is-2by1
20
+ &.is-2by1,
21
+ &.is-3by1,
22
+ &.is-4by5,
23
+ &.is-3by4,
24
+ &.is-2by3,
25
+ &.is-3by5,
26
+ &.is-9by16,
27
+ &.is-1by2,
28
+ &.is-1by3
19
29
  img
20
30
  +overlay
21
31
  height: 100%
@@ -23,14 +33,34 @@ $dimensions: 16 24 32 48 64 96 128 !default
23
33
  &.is-square,
24
34
  &.is-1by1
25
35
  padding-top: 100%
36
+ &.is-5by4
37
+ padding-top: 80%
26
38
  &.is-4by3
27
39
  padding-top: 75%
28
40
  &.is-3by2
29
41
  padding-top: 66.6666%
42
+ &.is-5by3
43
+ padding-top: 60%
30
44
  &.is-16by9
31
45
  padding-top: 56.25%
32
46
  &.is-2by1
33
47
  padding-top: 50%
48
+ &.is-3by1
49
+ padding-top: 33.3333%
50
+ &.is-4by5
51
+ padding-top: 125%
52
+ &.is-3by4
53
+ padding-top: 133.3333%
54
+ &.is-2by3
55
+ padding-top: 150%
56
+ &.is-3by5
57
+ padding-top: 166.6666%
58
+ &.is-9by16
59
+ padding-top: 177.7777%
60
+ &.is-1by2
61
+ padding-top: 200%
62
+ &.is-1by3
63
+ padding-top: 300%
34
64
  // Sizes
35
65
  @each $dimension in $dimensions
36
66
  &.is-#{$dimension}x#{$dimension}
@@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default
20
20
  $table-striped-row-even-hover-background-color: $white-ter !default
21
21
 
22
22
  .table
23
+ +block
23
24
  background-color: $table-background-color
24
25
  color: $table-color
25
- margin-bottom: 1.5rem
26
26
  td,
27
27
  th
28
28
  border: $table-cell-border
@@ -108,3 +108,10 @@ $table-striped-row-even-hover-background-color: $white-ter !default
108
108
  tr:not(.is-selected)
109
109
  &:nth-child(even)
110
110
  background-color: $table-striped-row-even-background-color
111
+
112
+ .table-container
113
+ +block
114
+ +overflow-touch
115
+ overflow: auto
116
+ overflow-y: hidden
117
+ max-width: 100%
@@ -52,8 +52,8 @@ $tag-delete-margin: 1px !default
52
52
  padding-right: 0.75em
53
53
  white-space: nowrap
54
54
  .delete
55
- margin-left: 0.25em
56
- margin-right: -0.375em
55
+ margin-left: 0.25rem
56
+ margin-right: -0.375rem
57
57
  // Colors
58
58
  @each $name, $pair in $colors
59
59
  $color: nth($pair, 1)
@@ -82,8 +82,8 @@ $tag-delete-margin: 1px !default
82
82
  padding: 0
83
83
  position: relative
84
84
  width: 2em
85
- &:before,
86
- &:after
85
+ &::before,
86
+ &::after
87
87
  background-color: currentColor
88
88
  content: ""
89
89
  display: block
@@ -92,10 +92,10 @@ $tag-delete-margin: 1px !default
92
92
  top: 50%
93
93
  transform: translateX(-50%) translateY(-50%) rotate(45deg)
94
94
  transform-origin: center center
95
- &:before
95
+ &::before
96
96
  height: 1px
97
97
  width: 50%
98
- &:after
98
+ &::after
99
99
  height: 50%
100
100
  width: 1px
101
101
  &:hover,
@@ -1,6 +1,7 @@
1
1
  $title-color: $grey-darker !default
2
2
  $title-size: $size-3 !default
3
3
  $title-weight: $weight-semibold !default
4
+ $title-line-height: 1.125 !default
4
5
  $title-strong-color: inherit !default
5
6
  $title-strong-weight: inherit !default
6
7
  $title-sub-size: 0.75em !default
@@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default
9
10
  $subtitle-color: $grey-dark !default
10
11
  $subtitle-size: $size-5 !default
11
12
  $subtitle-weight: $weight-normal !default
13
+ $subtitle-line-height: 1.25 !default
12
14
  $subtitle-strong-color: $grey-darker !default
13
15
  $subtitle-strong-weight: $weight-semibold !default
16
+ $subtitle-negative-margin: -1.25rem !default
14
17
 
15
18
  .title,
16
19
  .subtitle
@@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default
30
33
  color: $title-color
31
34
  font-size: $title-size
32
35
  font-weight: $title-weight
33
- line-height: 1.125
36
+ line-height: $title-line-height
34
37
  strong
35
38
  color: $title-strong-color
36
39
  font-weight: $title-strong-weight
37
40
  & + .highlight
38
41
  margin-top: -0.75rem
39
42
  &:not(.is-spaced) + .subtitle
40
- margin-top: -1.5rem
43
+ margin-top: $subtitle-negative-margin
41
44
  // Sizes
42
45
  @each $size in $sizes
43
46
  $i: index($sizes, $size)
@@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default
48
51
  color: $subtitle-color
49
52
  font-size: $subtitle-size
50
53
  font-weight: $subtitle-weight
51
- line-height: 1.25
54
+ line-height: $subtitle-line-height
52
55
  strong
53
56
  color: $subtitle-strong-color
54
57
  font-weight: $subtitle-strong-weight
55
58
  &:not(.is-spaced) + .title
56
- margin-top: -1.5rem
59
+ margin-top: $subtitle-negative-margin
57
60
  // Sizes
58
61
  @each $size in $sizes
59
62
  $i: index($sizes, $size)
@@ -59,9 +59,9 @@ $column-gap: 0.75rem !default
59
59
  @for $i from 1 through 12
60
60
  .columns.is-mobile > &.is-#{$i}
61
61
  flex: none
62
- width: ($i / 12) * 100%
62
+ width: percentage($i / 12)
63
63
  .columns.is-mobile > &.is-offset-#{$i}
64
- margin-left: ($i / 12) * 100%
64
+ margin-left: percentage($i / 12)
65
65
  +mobile
66
66
  &.is-narrow-mobile
67
67
  flex: none
@@ -116,9 +116,9 @@ $column-gap: 0.75rem !default
116
116
  @for $i from 1 through 12
117
117
  &.is-#{$i}-mobile
118
118
  flex: none
119
- width: ($i / 12) * 100%
119
+ width: percentage($i / 12)
120
120
  &.is-offset-#{$i}-mobile
121
- margin-left: ($i / 12) * 100%
121
+ margin-left: percentage($i / 12)
122
122
  +tablet
123
123
  &.is-narrow,
124
124
  &.is-narrow-tablet
@@ -194,10 +194,10 @@ $column-gap: 0.75rem !default
194
194
  &.is-#{$i},
195
195
  &.is-#{$i}-tablet
196
196
  flex: none
197
- width: ($i / 12) * 100%
197
+ width: percentage($i / 12)
198
198
  &.is-offset-#{$i},
199
199
  &.is-offset-#{$i}-tablet
200
- margin-left: ($i / 12) * 100%
200
+ margin-left: percentage($i / 12)
201
201
  +touch
202
202
  &.is-narrow-touch
203
203
  flex: none
@@ -252,9 +252,9 @@ $column-gap: 0.75rem !default
252
252
  @for $i from 1 through 12
253
253
  &.is-#{$i}-touch
254
254
  flex: none
255
- width: ($i / 12) * 100%
255
+ width: percentage($i / 12)
256
256
  &.is-offset-#{$i}-touch
257
- margin-left: ($i / 12) * 100%
257
+ margin-left: percentage($i / 12)
258
258
  +desktop
259
259
  &.is-narrow-desktop
260
260
  flex: none
@@ -309,9 +309,9 @@ $column-gap: 0.75rem !default
309
309
  @for $i from 1 through 12
310
310
  &.is-#{$i}-desktop
311
311
  flex: none
312
- width: ($i / 12) * 100%
312
+ width: percentage($i / 12)
313
313
  &.is-offset-#{$i}-desktop
314
- margin-left: ($i / 12) * 100%
314
+ margin-left: percentage($i / 12)
315
315
  +widescreen
316
316
  &.is-narrow-widescreen
317
317
  flex: none
@@ -366,9 +366,9 @@ $column-gap: 0.75rem !default
366
366
  @for $i from 1 through 12
367
367
  &.is-#{$i}-widescreen
368
368
  flex: none
369
- width: ($i / 12) * 100%
369
+ width: percentage($i / 12)
370
370
  &.is-offset-#{$i}-widescreen
371
- margin-left: ($i / 12) * 100%
371
+ margin-left: percentage($i / 12)
372
372
  +fullhd
373
373
  &.is-narrow-fullhd
374
374
  flex: none
@@ -423,9 +423,9 @@ $column-gap: 0.75rem !default
423
423
  @for $i from 1 through 12
424
424
  &.is-#{$i}-fullhd
425
425
  flex: none
426
- width: ($i / 12) * 100%
426
+ width: percentage($i / 12)
427
427
  &.is-offset-#{$i}-fullhd
428
- margin-left: ($i / 12) * 100%
428
+ margin-left: percentage($i / 12)
429
429
 
430
430
  .columns
431
431
  margin-left: (-$column-gap)
@@ -1,4 +1,4 @@
1
- $footer-background-color: $background !default
1
+ $footer-background-color: $white-bis !default
2
2
 
3
3
  .footer
4
4
  background-color: $footer-background-color