bulma-clean-theme 0.7.2 → 0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -2
  3. data/_includes/callouts.html +4 -0
  4. data/_includes/head.html +4 -1
  5. data/_includes/hero.html +1 -1
  6. data/_includes/share-buttons.html +19 -0
  7. data/_layouts/post.html +4 -0
  8. data/_posts/2020-05-08-creating-a-docs-site-with-bulma-clean-theme.markdown +96 -0
  9. data/node_modules/bulma/CHANGELOG.md +20 -1
  10. data/node_modules/bulma/LICENSE +1 -1
  11. data/node_modules/bulma/README.md +11 -7
  12. data/node_modules/bulma/bulma.sass +1 -1
  13. data/node_modules/bulma/css/bulma.css +34 -11
  14. data/node_modules/bulma/css/bulma.css.map +1 -1
  15. data/node_modules/bulma/css/bulma.min.css +1 -1
  16. data/node_modules/bulma/package.json +19 -20
  17. data/node_modules/bulma/sass/base/helpers.sass +1 -1
  18. data/node_modules/bulma/sass/components/media.sass +1 -1
  19. data/node_modules/bulma/sass/components/modal.sass +1 -1
  20. data/node_modules/bulma/sass/components/navbar.sass +9 -11
  21. data/node_modules/bulma/sass/components/panel.sass +2 -1
  22. data/node_modules/bulma/sass/elements/button.sass +10 -9
  23. data/node_modules/bulma/sass/elements/notification.sass +7 -0
  24. data/node_modules/bulma/sass/form/file.sass +7 -7
  25. data/node_modules/bulma/sass/form/input-textarea.sass +1 -1
  26. data/node_modules/bulma/sass/form/select.sass +2 -2
  27. data/node_modules/bulma/sass/form/shared.sass +3 -3
  28. data/node_modules/bulma/sass/layout/hero.sass +21 -19
  29. data/node_modules/bulma/sass/utilities/functions.sass +12 -0
  30. data/node_modules/bulma/sass/utilities/mixins.sass +4 -4
  31. data/package-lock.json +3 -3
  32. data/package.json +1 -1
  33. metadata +4 -2
@@ -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,
@@ -320,7 +319,6 @@ a.navbar-item,
320
319
  align-items: center
321
320
  display: flex
322
321
  .navbar-item
323
- display: flex
324
322
  &.has-dropdown
325
323
  align-items: stretch
326
324
  &.has-dropdown-up
@@ -331,7 +329,7 @@ a.navbar-item,
331
329
  border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
332
330
  border-top: none
333
331
  bottom: 100%
334
- box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
332
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
335
333
  top: auto
336
334
  &.is-active,
337
335
  &.is-hoverable:focus,
@@ -358,7 +356,7 @@ a.navbar-item,
358
356
  border-bottom-left-radius: $navbar-dropdown-radius
359
357
  border-bottom-right-radius: $navbar-dropdown-radius
360
358
  border-top: $navbar-dropdown-border-top
361
- box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
359
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
362
360
  display: none
363
361
  font-size: 0.875rem
364
362
  left: 0
@@ -409,7 +407,7 @@ a.navbar-item,
409
407
  &.is-fixed-bottom-desktop
410
408
  bottom: 0
411
409
  &.has-shadow
412
- box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
410
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
413
411
  &.is-fixed-top-desktop
414
412
  top: 0
415
413
  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
@@ -3,7 +3,7 @@ $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