bulma-sass 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7607e4ea8a28663644f2f83709604e508fff528fac2c9b7aaf222300cef98dba
4
- data.tar.gz: 2b27ba139610a582a10c6d4eadd8e56edd1dcba551a5f4a82cba3ccc89c50395
3
+ metadata.gz: d64e33e0e5f616611a2e9f2ee78e7ebff89e863ffa5b5823bf3ee0b8025517b4
4
+ data.tar.gz: cd29b8eaf8a834aed0bbd1059b4fe400ad1c8e0a13cf3ee51ee47c9394c542e7
5
5
  SHA512:
6
- metadata.gz: c91065d2e679c8d444a86cf92b9268ff2235d7e24e58e28794ef738e90f75b44b3fca3f150073e6fd9e49afe9ac7210c9dba879e17ff8877f5fcf500b533a379
7
- data.tar.gz: 2ecaddb676cd589f889c451e912096a75d03e7383460372214af3aa020cb4bdca0a6f17939d966b788001532992e9fd2bdf293c548da38e7ea01d7f840d26df6
6
+ metadata.gz: 36118f0a66d7f8acbb98671b01d8610179ec1bb9c8404e693cbb1961fec55ac54f18ad6c2a622bd6d2750dee31525a8e2e7608633e0f9e7e6fde71bad16eb3aa
7
+ data.tar.gz: 41774b9eb395fccca2ed7b0b3d4f33e63915d6ef20ce876ee1eae66f2036faf47d3d0a6b2fb830a2595e3498579799bfce6926602c88efcdf78b336f1019fcc4
@@ -1,5 +1,5 @@
1
1
  @charset "utf-8"
2
- /*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
2
+ /*! bulma.io v0.8.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"
@@ -101,7 +101,7 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
101
101
  a.has-text-#{$name}
102
102
  &:hover,
103
103
  &:focus
104
- color: darken($color, 10%) !important
104
+ color: bulmaDarken($color, 10%) !important
105
105
  .has-background-#{$name}
106
106
  background-color: $color !important
107
107
 
@@ -1,4 +1,4 @@
1
- $media-border-color: rgba($border, 0.5) !default
1
+ $media-border-color: bulmaRgba($border, 0.5) !default
2
2
 
3
3
  .media
4
4
  align-items: flex-start
@@ -1,6 +1,6 @@
1
1
  $modal-z: 40 !default
2
2
 
3
- $modal-background-background-color: rgba($scheme-invert, 0.86) !default
3
+ $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
4
4
 
5
5
  $modal-content-width: 640px !default
6
6
  $modal-content-margin-mobile: 20px !default
@@ -32,7 +32,7 @@ $navbar-dropdown-radius: $radius-large !default
32
32
  $navbar-dropdown-z: 20 !default
33
33
 
34
34
  $navbar-dropdown-boxed-radius: $radius-large !default
35
- $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
35
+ $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
36
36
 
37
37
  $navbar-dropdown-item-hover-color: $scheme-invert !default
38
38
  $navbar-dropdown-item-hover-background-color: $background !default
@@ -72,7 +72,7 @@ $navbar-breakpoint: $desktop !default
72
72
  &:focus,
73
73
  &:hover,
74
74
  &.is-active
75
- background-color: darken($color, 5%)
75
+ background-color: bulmaDarken($color, 5%)
76
76
  color: $color-invert
77
77
  .navbar-link
78
78
  &::after
@@ -90,7 +90,7 @@ $navbar-breakpoint: $desktop !default
90
90
  &:focus,
91
91
  &:hover,
92
92
  &.is-active
93
- background-color: darken($color, 5%)
93
+ background-color: bulmaDarken($color, 5%)
94
94
  color: $color-invert
95
95
  .navbar-link
96
96
  &::after
@@ -98,7 +98,7 @@ $navbar-breakpoint: $desktop !default
98
98
  .navbar-item.has-dropdown:focus .navbar-link,
99
99
  .navbar-item.has-dropdown:hover .navbar-link,
100
100
  .navbar-item.has-dropdown.is-active .navbar-link
101
- background-color: darken($color, 5%)
101
+ background-color: bulmaDarken($color, 5%)
102
102
  color: $color-invert
103
103
  .navbar-dropdown
104
104
  a.navbar-item
@@ -179,7 +179,6 @@ a.navbar-item,
179
179
  color: $navbar-item-hover-color
180
180
 
181
181
  .navbar-item
182
- display: block
183
182
  flex-grow: 0
184
183
  flex-shrink: 0
185
184
  img
@@ -245,7 +244,7 @@ a.navbar-item,
245
244
  display: none
246
245
  .navbar-menu
247
246
  background-color: $navbar-background-color
248
- box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
247
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
249
248
  padding: 0.5rem 0
250
249
  &.is-active
251
250
  display: block
@@ -257,7 +256,7 @@ a.navbar-item,
257
256
  &.is-fixed-bottom-touch
258
257
  bottom: 0
259
258
  &.has-shadow
260
- box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
259
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
261
260
  &.is-fixed-top-touch
262
261
  top: 0
263
262
  &.is-fixed-top,
@@ -331,7 +330,7 @@ a.navbar-item,
331
330
  border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
332
331
  border-top: none
333
332
  bottom: 100%
334
- box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
333
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
335
334
  top: auto
336
335
  &.is-active,
337
336
  &.is-hoverable:focus,
@@ -358,7 +357,7 @@ a.navbar-item,
358
357
  border-bottom-left-radius: $navbar-dropdown-radius
359
358
  border-bottom-right-radius: $navbar-dropdown-radius
360
359
  border-top: $navbar-dropdown-border-top
361
- box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
360
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
362
361
  display: none
363
362
  font-size: 0.875rem
364
363
  left: 0
@@ -409,7 +408,7 @@ a.navbar-item,
409
408
  &.is-fixed-bottom-desktop
410
409
  bottom: 0
411
410
  &.has-shadow
412
- box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
411
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
413
412
  &.is-fixed-top-desktop
414
413
  top: 0
415
414
  html,
@@ -26,6 +26,7 @@ $panel-block-active-color: $link-active !default
26
26
  $panel-block-active-icon-color: $link !default
27
27
 
28
28
  $panel-icon-color: $text-light !default
29
+ $panel-colors: $colors !default
29
30
 
30
31
  .panel
31
32
  border-radius: $panel-radius
@@ -34,7 +35,7 @@ $panel-icon-color: $text-light !default
34
35
  &:not(:last-child)
35
36
  margin-bottom: $panel-margin
36
37
  // Colors
37
- @each $name, $components in $message-colors
38
+ @each $name, $components in $panel-colors
38
39
  $color: nth($components, 1)
39
40
  $color-invert: nth($components, 2)
40
41
  &.is-#{$name}
@@ -14,12 +14,13 @@ $button-hover-border-color: $link-hover-border !default
14
14
  $button-focus-color: $link-focus !default
15
15
  $button-focus-border-color: $link-focus-border !default
16
16
  $button-focus-box-shadow-size: 0 0 0 0.125em !default
17
- $button-focus-box-shadow-color: rgba($link, 0.25) !default
17
+ $button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
18
18
 
19
19
  $button-active-color: $link-active !default
20
20
  $button-active-border-color: $link-active-border !default
21
21
 
22
22
  $button-text-color: $text !default
23
+ $button-text-decoration: underline !default
23
24
  $button-text-hover-background-color: $background !default
24
25
  $button-text-hover-color: $text-strong !default
25
26
 
@@ -98,7 +99,7 @@ $button-static-border-color: $border !default
98
99
  background-color: transparent
99
100
  border-color: transparent
100
101
  color: $button-text-color
101
- text-decoration: underline
102
+ text-decoration: $button-text-decoration
102
103
  &:hover,
103
104
  &.is-hovered,
104
105
  &:focus,
@@ -107,7 +108,7 @@ $button-static-border-color: $border !default
107
108
  color: $button-text-hover-color
108
109
  &:active,
109
110
  &.is-active
110
- background-color: darken($button-text-hover-background-color, 5%)
111
+ background-color: bulmaDarken($button-text-hover-background-color, 5%)
111
112
  color: $button-text-hover-color
112
113
  &[disabled],
113
114
  fieldset[disabled] &
@@ -123,7 +124,7 @@ $button-static-border-color: $border !default
123
124
  color: $color-invert
124
125
  &:hover,
125
126
  &.is-hovered
126
- background-color: darken($color, 2.5%)
127
+ background-color: bulmaDarken($color, 2.5%)
127
128
  border-color: transparent
128
129
  color: $color-invert
129
130
  &:focus,
@@ -131,10 +132,10 @@ $button-static-border-color: $border !default
131
132
  border-color: transparent
132
133
  color: $color-invert
133
134
  &:not(:active)
134
- box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
135
+ box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
135
136
  &:active,
136
137
  &.is-active
137
- background-color: darken($color, 5%)
138
+ background-color: bulmaDarken($color, 5%)
138
139
  border-color: transparent
139
140
  color: $color-invert
140
141
  &[disabled],
@@ -147,7 +148,7 @@ $button-static-border-color: $border !default
147
148
  color: $color
148
149
  &:hover,
149
150
  &.is-hovered
150
- background-color: darken($color-invert, 5%)
151
+ background-color: bulmaDarken($color-invert, 5%)
151
152
  &[disabled],
152
153
  fieldset[disabled] &
153
154
  background-color: $color-invert
@@ -215,12 +216,12 @@ $button-static-border-color: $border !default
215
216
  color: $color-dark
216
217
  &:hover,
217
218
  &.is-hovered
218
- background-color: darken($color-light, 2.5%)
219
+ background-color: bulmaDarken($color-light, 2.5%)
219
220
  border-color: transparent
220
221
  color: $color-dark
221
222
  &:active,
222
223
  &.is-active
223
- background-color: darken($color-light, 5%)
224
+ background-color: bulmaDarken($color-light, 5%)
224
225
  border-color: transparent
225
226
  color: $color-dark
226
227
  // Sizes
@@ -34,3 +34,10 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
34
34
  &.is-#{$name}
35
35
  background-color: $color
36
36
  color: $color-invert
37
+ // If light and dark colors are provided
38
+ @if length($pair) >= 4
39
+ $color-light: nth($pair, 3)
40
+ $color-dark: nth($pair, 4)
41
+ &.is-light
42
+ background-color: $color-light
43
+ color: $color-dark
@@ -29,19 +29,19 @@ $file-name-max-width: 16em !default
29
29
  &:hover,
30
30
  &.is-hovered
31
31
  .file-cta
32
- background-color: darken($color, 2.5%)
32
+ background-color: bulmaDarken($color, 2.5%)
33
33
  border-color: transparent
34
34
  color: $color-invert
35
35
  &:focus,
36
36
  &.is-focused
37
37
  .file-cta
38
38
  border-color: transparent
39
- box-shadow: 0 0 0.5em rgba($color, 0.25)
39
+ box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
40
40
  color: $color-invert
41
41
  &:active,
42
42
  &.is-active
43
43
  .file-cta
44
- background-color: darken($color, 5%)
44
+ background-color: bulmaDarken($color, 5%)
45
45
  border-color: transparent
46
46
  color: $color-invert
47
47
  // Sizes
@@ -125,16 +125,16 @@ $file-name-max-width: 16em !default
125
125
  position: relative
126
126
  &:hover
127
127
  .file-cta
128
- background-color: darken($file-cta-background-color, 2.5%)
128
+ background-color: bulmaDarken($file-cta-background-color, 2.5%)
129
129
  color: $file-cta-hover-color
130
130
  .file-name
131
- border-color: darken($file-name-border-color, 2.5%)
131
+ border-color: bulmaDarken($file-name-border-color, 2.5%)
132
132
  &:active
133
133
  .file-cta
134
- background-color: darken($file-cta-background-color, 5%)
134
+ background-color: bulmaDarken($file-cta-background-color, 5%)
135
135
  color: $file-cta-active-color
136
136
  .file-name
137
- border-color: darken($file-name-border-color, 5%)
137
+ border-color: bulmaDarken($file-name-border-color, 5%)
138
138
 
139
139
  .file-input
140
140
  height: 100%
@@ -18,7 +18,7 @@ $textarea-min-height: 8em !default
18
18
  &.is-focused,
19
19
  &:active,
20
20
  &.is-active
21
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
21
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
22
22
  // Sizes
23
23
  &.is-small
24
24
  +control-small
@@ -48,12 +48,12 @@
48
48
  border-color: $color
49
49
  &:hover,
50
50
  &.is-hovered
51
- border-color: darken($color, 5%)
51
+ border-color: bulmaDarken($color, 5%)
52
52
  &:focus,
53
53
  &.is-focused,
54
54
  &:active,
55
55
  &.is-active
56
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
56
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
57
57
  // Sizes
58
58
  &.is-small
59
59
  +control-small
@@ -1,9 +1,9 @@
1
- $input-color: $text-strong !default
1
+ $input-color: inherit !default
2
2
  $input-background-color: $scheme-main !default
3
3
  $input-border-color: $border !default
4
4
  $input-height: $control-height !default
5
5
  $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
6
- $input-placeholder-color: rgba($input-color, 0.3) !default
6
+ $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
7
7
 
8
8
  $input-hover-color: $text-strong !default
9
9
  $input-hover-border-color: $border-hover !default
@@ -11,12 +11,12 @@ $input-hover-border-color: $border-hover !default
11
11
  $input-focus-color: $text-strong !default
12
12
  $input-focus-border-color: $link !default
13
13
  $input-focus-box-shadow-size: 0 0 0 0.125em !default
14
- $input-focus-box-shadow-color: rgba($link, 0.25) !default
14
+ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
15
15
 
16
16
  $input-disabled-color: $text-light !default
17
17
  $input-disabled-background-color: $background !default
18
18
  $input-disabled-border-color: $background !default
19
- $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
19
+ $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
20
20
 
21
21
  $input-arrow: $link !default
22
22
 
@@ -1,5 +1,9 @@
1
- // Main container
1
+ $hero-body-padding: 3rem 1.5rem !default
2
+ $hero-body-padding-small: 1.5rem !default
3
+ $hero-body-padding-medium: 9rem 1.5rem !default
4
+ $hero-body-padding-large: 18rem 1.5rem !default
2
5
 
6
+ // Main container
3
7
  .hero
4
8
  align-items: stretch
5
9
  display: flex
@@ -23,7 +27,7 @@
23
27
  .title
24
28
  color: $color-invert
25
29
  .subtitle
26
- color: rgba($color-invert, 0.9)
30
+ color: bulmaRgba($color-invert, 0.9)
27
31
  a:not(.button),
28
32
  strong
29
33
  color: $color-invert
@@ -32,12 +36,12 @@
32
36
  background-color: $color
33
37
  .navbar-item,
34
38
  .navbar-link
35
- color: rgba($color-invert, 0.7)
39
+ color: bulmaRgba($color-invert, 0.7)
36
40
  a.navbar-item,
37
41
  .navbar-link
38
42
  &:hover,
39
43
  &.is-active
40
- background-color: darken($color, 5%)
44
+ background-color: bulmaDarken($color, 5%)
41
45
  color: $color-invert
42
46
  .tabs
43
47
  a
@@ -53,7 +57,7 @@
53
57
  a
54
58
  color: $color-invert
55
59
  &:hover
56
- background-color: rgba($scheme-invert, 0.1)
60
+ background-color: bulmaRgba($scheme-invert, 0.1)
57
61
  li.is-active a
58
62
  &,
59
63
  &:hover
@@ -61,28 +65,26 @@
61
65
  border-color: $color-invert
62
66
  color: $color
63
67
  // Modifiers
64
- &.is-bold
65
- $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
66
- $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
67
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
68
- +mobile
69
- .navbar-menu
70
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
68
+ @if type-of($color) == 'color'
69
+ &.is-bold
70
+ $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
71
+ $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
72
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
73
+ +mobile
74
+ .navbar-menu
75
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
71
76
  // Sizes
72
77
  &.is-small
73
78
  .hero-body
74
- padding-bottom: 1.5rem
75
- padding-top: 1.5rem
79
+ padding: $hero-body-padding-small
76
80
  &.is-medium
77
81
  +tablet
78
82
  .hero-body
79
- padding-bottom: 9rem
80
- padding-top: 9rem
83
+ padding: $hero-body-padding-medium
81
84
  &.is-large
82
85
  +tablet
83
86
  .hero-body
84
- padding-bottom: 18rem
85
- padding-top: 18rem
87
+ padding: $hero-body-padding-large
86
88
  &.is-halfheight,
87
89
  &.is-fullheight,
88
90
  &.is-fullheight-with-navbar
@@ -140,4 +142,4 @@
140
142
  .hero-body
141
143
  flex-grow: 1
142
144
  flex-shrink: 0
143
- padding: 3rem 1.5rem
145
+ padding: $hero-body-padding
@@ -62,6 +62,8 @@
62
62
  @return $value
63
63
 
64
64
  @function colorLuminance($color)
65
+ @if type-of($color) != 'color'
66
+ @return 0.55
65
67
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
66
68
  @each $name, $value in $color-rgb
67
69
  $adjusted: 0
@@ -96,3 +98,13 @@
96
98
  $target-l: round($base-l + ($luminance-delta * 53))
97
99
  @return change-color($color, $lightness: max($base-l, $target-l))
98
100
  @return $text-strong
101
+
102
+ @function bulmaRgba($color, $alpha)
103
+ @if type-of($color) != 'color'
104
+ @return $color
105
+ @return rgba($color, $alpha)
106
+
107
+ @function bulmaDarken($color, $amount)
108
+ @if type-of($color) != 'color'
109
+ @return $color
110
+ @return darken($color, $amount)
@@ -48,7 +48,7 @@
48
48
  &:nth-child(3)
49
49
  top: calc(50% + 4px)
50
50
  &:hover
51
- background-color: rgba(black, 0.05)
51
+ background-color: bulmaRgba(black, 0.05)
52
52
  // Modifers
53
53
  &.is-active
54
54
  span
@@ -170,7 +170,7 @@
170
170
  @extend %unselectable
171
171
  -moz-appearance: none
172
172
  -webkit-appearance: none
173
- background-color: rgba($scheme-invert, 0.2)
173
+ background-color: bulmaRgba($scheme-invert, 0.2)
174
174
  border: none
175
175
  border-radius: $radius-rounded
176
176
  cursor: pointer
@@ -206,9 +206,9 @@
206
206
  width: 2px
207
207
  &:hover,
208
208
  &:focus
209
- background-color: rgba($scheme-invert, 0.3)
209
+ background-color: bulmaRgba($scheme-invert, 0.3)
210
210
  &:active
211
- background-color: rgba($scheme-invert, 0.4)
211
+ background-color: bulmaRgba($scheme-invert, 0.4)
212
212
  // Sizes
213
213
  &.is-small
214
214
  height: 16px
@@ -1,5 +1,5 @@
1
1
  module Bulma
2
2
  module Sass
3
- VERSION = "0.8.0"
3
+ VERSION = "0.8.1"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bulma-sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.8.0
4
+ version: 0.8.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - bananaappletw