bulma-sass 0.7.5.1 → 0.8.0
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 +4 -4
- data/app/assets/stylesheets/bulma.sass +1 -1
- data/app/assets/stylesheets/sass/base/generic.sass +1 -1
- data/app/assets/stylesheets/sass/base/minireset.sass +1 -7
- data/app/assets/stylesheets/sass/components/breadcrumb.sass +1 -1
- data/app/assets/stylesheets/sass/components/card.sass +5 -5
- data/app/assets/stylesheets/sass/components/dropdown.sass +5 -5
- data/app/assets/stylesheets/sass/components/list.sass +2 -2
- data/app/assets/stylesheets/sass/components/media.sass +4 -2
- data/app/assets/stylesheets/sass/components/message.sass +22 -10
- data/app/assets/stylesheets/sass/components/modal.sass +2 -2
- data/app/assets/stylesheets/sass/components/navbar.sass +12 -12
- data/app/assets/stylesheets/sass/components/pagination.sass +7 -6
- data/app/assets/stylesheets/sass/components/panel.sass +26 -11
- data/app/assets/stylesheets/sass/components/tabs.sass +1 -1
- data/app/assets/stylesheets/sass/elements/box.sass +4 -4
- data/app/assets/stylesheets/sass/elements/button.sass +35 -18
- data/app/assets/stylesheets/sass/elements/container.sass +5 -4
- data/app/assets/stylesheets/sass/elements/image.sass +2 -0
- data/app/assets/stylesheets/sass/elements/notification.sass +2 -1
- data/app/assets/stylesheets/sass/elements/progress.sass +1 -1
- data/app/assets/stylesheets/sass/elements/table.sass +6 -6
- data/app/assets/stylesheets/sass/elements/tag.sass +7 -0
- data/app/assets/stylesheets/sass/elements/title.sass +3 -3
- data/app/assets/stylesheets/sass/form/file.sass +4 -4
- data/app/assets/stylesheets/sass/form/input-textarea.sass +9 -5
- data/app/assets/stylesheets/sass/form/shared.sass +9 -9
- data/app/assets/stylesheets/sass/form/tools.sass +1 -1
- data/app/assets/stylesheets/sass/layout/footer.sass +1 -1
- data/app/assets/stylesheets/sass/layout/hero.sass +1 -1
- data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
- data/app/assets/stylesheets/sass/utilities/derived-variables.sass +30 -9
- data/app/assets/stylesheets/sass/utilities/functions.sass +51 -15
- data/app/assets/stylesheets/sass/utilities/initial-variables.sass +4 -3
- data/app/assets/stylesheets/sass/utilities/mixins.sass +4 -4
- data/lib/bulma/sass/version.rb +1 -1
- metadata +4 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7607e4ea8a28663644f2f83709604e508fff528fac2c9b7aaf222300cef98dba
|
|
4
|
+
data.tar.gz: 2b27ba139610a582a10c6d4eadd8e56edd1dcba551a5f4a82cba3ccc89c50395
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c91065d2e679c8d444a86cf92b9268ff2235d7e24e58e28794ef738e90f75b44b3fca3f150073e6fd9e49afe9ac7210c9dba879e17ff8877f5fcf500b533a379
|
|
7
|
+
data.tar.gz: 2ecaddb676cd589f889c451e912096a75d03e7383460372214af3aa020cb4bdca0a6f17939d966b788001532992e9fd2bdf293c548da38e7ea01d7f840d26df6
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! minireset.css v0.0.
|
|
1
|
+
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
|
2
2
|
// Blocks
|
|
3
3
|
html,
|
|
4
4
|
body,
|
|
@@ -59,16 +59,10 @@ html
|
|
|
59
59
|
|
|
60
60
|
// Media
|
|
61
61
|
img,
|
|
62
|
-
embed,
|
|
63
|
-
iframe,
|
|
64
|
-
object,
|
|
65
62
|
video
|
|
66
63
|
height: auto
|
|
67
64
|
max-width: 100%
|
|
68
65
|
|
|
69
|
-
audio
|
|
70
|
-
max-width: 100%
|
|
71
|
-
|
|
72
66
|
// Iframe
|
|
73
67
|
iframe
|
|
74
68
|
border: 0
|
|
@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
|
|
|
5
5
|
$breadcrumb-item-padding-vertical: 0 !default
|
|
6
6
|
$breadcrumb-item-padding-horizontal: 0.75em !default
|
|
7
7
|
|
|
8
|
-
$breadcrumb-item-separator-color: $
|
|
8
|
+
$breadcrumb-item-separator-color: $border-hover !default
|
|
9
9
|
|
|
10
10
|
.breadcrumb
|
|
11
11
|
@extend %block
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
$card-color: $text !default
|
|
2
|
-
$card-background-color: $
|
|
3
|
-
$card-shadow: 0
|
|
2
|
+
$card-background-color: $scheme-main !default
|
|
3
|
+
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !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
|
|
8
|
-
$card-header-shadow: 0
|
|
7
|
+
$card-header-padding: 0.75rem 1rem !default
|
|
8
|
+
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
|
|
9
9
|
$card-header-weight: $weight-bold !default
|
|
10
10
|
|
|
11
11
|
$card-content-background-color: transparent !default
|
|
12
12
|
$card-content-padding: 1.5rem !default
|
|
13
13
|
|
|
14
14
|
$card-footer-background-color: transparent !default
|
|
15
|
-
$card-footer-border-top: 1px solid $border !default
|
|
15
|
+
$card-footer-border-top: 1px solid $border-light !default
|
|
16
16
|
$card-footer-padding: 0.75rem !default
|
|
17
17
|
|
|
18
18
|
$card-media-margin: $block-spacing !default
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
$dropdown-menu-min-width: 12rem !default
|
|
2
2
|
|
|
3
|
-
$dropdown-content-background-color: $
|
|
3
|
+
$dropdown-content-background-color: $scheme-main !default
|
|
4
4
|
$dropdown-content-arrow: $link !default
|
|
5
5
|
$dropdown-content-offset: 4px !default
|
|
6
6
|
$dropdown-content-padding-bottom: 0.5rem !default
|
|
7
7
|
$dropdown-content-padding-top: 0.5rem !default
|
|
8
8
|
$dropdown-content-radius: $radius !default
|
|
9
|
-
$dropdown-content-shadow: 0
|
|
9
|
+
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
|
10
10
|
$dropdown-content-z: 20 !default
|
|
11
11
|
|
|
12
|
-
$dropdown-item-color: $
|
|
13
|
-
$dropdown-item-hover-color: $
|
|
12
|
+
$dropdown-item-color: $text !default
|
|
13
|
+
$dropdown-item-hover-color: $scheme-invert !default
|
|
14
14
|
$dropdown-item-hover-background-color: $background !default
|
|
15
15
|
$dropdown-item-active-color: $link-invert !default
|
|
16
16
|
$dropdown-item-active-background-color: $link !default
|
|
17
17
|
|
|
18
|
-
$dropdown-divider-background-color: $border !default
|
|
18
|
+
$dropdown-divider-background-color: $border-light !default
|
|
19
19
|
|
|
20
20
|
.dropdown
|
|
21
21
|
display: inline-flex
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
$list-background-color: $
|
|
2
|
-
$list-shadow: 0 2px 3px rgba($
|
|
1
|
+
$list-background-color: $scheme-main !default
|
|
2
|
+
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
|
|
3
3
|
$list-radius: $radius !default
|
|
4
4
|
|
|
5
5
|
$list-item-border: 1px solid $border !default
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$media-border-color: rgba($border, 0.5) !default
|
|
2
|
+
|
|
1
3
|
.media
|
|
2
4
|
align-items: flex-start
|
|
3
5
|
display: flex
|
|
@@ -5,7 +7,7 @@
|
|
|
5
7
|
.content:not(:last-child)
|
|
6
8
|
margin-bottom: 0.75rem
|
|
7
9
|
.media
|
|
8
|
-
border-top: 1px solid
|
|
10
|
+
border-top: 1px solid $media-border-color
|
|
9
11
|
display: flex
|
|
10
12
|
padding-top: 0.75rem
|
|
11
13
|
.content:not(:last-child),
|
|
@@ -16,7 +18,7 @@
|
|
|
16
18
|
& + .media
|
|
17
19
|
margin-top: 0.5rem
|
|
18
20
|
& + .media
|
|
19
|
-
border-top: 1px solid
|
|
21
|
+
border-top: 1px solid $media-border-color
|
|
20
22
|
margin-top: 1rem
|
|
21
23
|
padding-top: 1rem
|
|
22
24
|
// Sizes
|
|
@@ -13,7 +13,7 @@ $message-body-color: $text !default
|
|
|
13
13
|
$message-body-padding: 1.25em 1.5em !default
|
|
14
14
|
$message-body-radius: $radius !default
|
|
15
15
|
|
|
16
|
-
$message-body-pre-background-color: $
|
|
16
|
+
$message-body-pre-background-color: $scheme-main !default
|
|
17
17
|
$message-body-pre-code-background-color: transparent !default
|
|
18
18
|
|
|
19
19
|
$message-header-body-border-width: 0 !default
|
|
@@ -37,21 +37,33 @@ $message-colors: $colors !default
|
|
|
37
37
|
&.is-large
|
|
38
38
|
font-size: $size-large
|
|
39
39
|
// Colors
|
|
40
|
-
@each $name, $
|
|
41
|
-
$color: nth($
|
|
42
|
-
$color-invert: nth($
|
|
43
|
-
$color-
|
|
44
|
-
$color-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
@each $name, $components in $message-colors
|
|
41
|
+
$color: nth($components, 1)
|
|
42
|
+
$color-invert: nth($components, 2)
|
|
43
|
+
$color-light: null
|
|
44
|
+
$color-dark: null
|
|
45
|
+
|
|
46
|
+
@if length($components) >= 3
|
|
47
|
+
$color-light: nth($components, 3)
|
|
48
|
+
@if length($components) >= 4
|
|
49
|
+
$color-dark: nth($components, 4)
|
|
50
|
+
@else
|
|
51
|
+
$color-luminance: colorLuminance($color)
|
|
52
|
+
$darken-percentage: $color-luminance * 70%
|
|
53
|
+
$desaturate-percentage: $color-luminance * 30%
|
|
54
|
+
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
|
55
|
+
@else
|
|
56
|
+
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
|
57
|
+
$color-light: lighten($color, $color-lightning)
|
|
58
|
+
|
|
47
59
|
&.is-#{$name}
|
|
48
|
-
background-color:
|
|
60
|
+
background-color: $color-light
|
|
49
61
|
.message-header
|
|
50
62
|
background-color: $color
|
|
51
63
|
color: $color-invert
|
|
52
64
|
.message-body
|
|
53
65
|
border-color: $color
|
|
54
|
-
color:
|
|
66
|
+
color: $color-dark
|
|
55
67
|
|
|
56
68
|
.message-header
|
|
57
69
|
align-items: center
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
$modal-z: 40 !default
|
|
2
2
|
|
|
3
|
-
$modal-background-background-color: rgba($
|
|
3
|
+
$modal-background-background-color: rgba($scheme-invert, 0.86) !default
|
|
4
4
|
|
|
5
5
|
$modal-content-width: 640px !default
|
|
6
6
|
$modal-content-margin-mobile: 20px !default
|
|
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
|
|
|
25
25
|
$modal-card-foot-radius: $radius-large !default
|
|
26
26
|
$modal-card-foot-border-top: 1px solid $border !default
|
|
27
27
|
|
|
28
|
-
$modal-card-body-background-color: $
|
|
28
|
+
$modal-card-body-background-color: $scheme-main !default
|
|
29
29
|
$modal-card-body-padding: 20px !default
|
|
30
30
|
|
|
31
31
|
.modal
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$navbar-background-color: $
|
|
1
|
+
$navbar-background-color: $scheme-main !default
|
|
2
2
|
$navbar-box-shadow-size: 0 2px 0 0 !default
|
|
3
3
|
$navbar-box-shadow-color: $background !default
|
|
4
4
|
$navbar-height: 3.25rem !default
|
|
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
|
|
|
7
7
|
$navbar-z: 30 !default
|
|
8
8
|
$navbar-fixed-z: 30 !default
|
|
9
9
|
|
|
10
|
-
$navbar-item-color: $
|
|
10
|
+
$navbar-item-color: $text !default
|
|
11
11
|
$navbar-item-hover-color: $link !default
|
|
12
|
-
$navbar-item-hover-background-color: $
|
|
13
|
-
$navbar-item-active-color: $
|
|
12
|
+
$navbar-item-hover-background-color: $scheme-main-bis !default
|
|
13
|
+
$navbar-item-active-color: $scheme-invert !default
|
|
14
14
|
$navbar-item-active-background-color: transparent !default
|
|
15
15
|
$navbar-item-img-max-height: 1.75rem !default
|
|
16
16
|
|
|
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
|
|
|
24
24
|
$navbar-tab-active-border-bottom-style: solid !default
|
|
25
25
|
$navbar-tab-active-border-bottom-width: 3px !default
|
|
26
26
|
|
|
27
|
-
$navbar-dropdown-background-color: $
|
|
27
|
+
$navbar-dropdown-background-color: $scheme-main !default
|
|
28
28
|
$navbar-dropdown-border-top: 2px solid $border !default
|
|
29
29
|
$navbar-dropdown-offset: -4px !default
|
|
30
30
|
$navbar-dropdown-arrow: $link !default
|
|
@@ -32,9 +32,9 @@ $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($
|
|
35
|
+
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
|
|
36
36
|
|
|
37
|
-
$navbar-dropdown-item-hover-color: $
|
|
37
|
+
$navbar-dropdown-item-hover-color: $scheme-invert !default
|
|
38
38
|
$navbar-dropdown-item-hover-background-color: $background !default
|
|
39
39
|
$navbar-dropdown-item-active-color: $link !default
|
|
40
40
|
$navbar-dropdown-item-active-background-color: $background !default
|
|
@@ -245,7 +245,7 @@ a.navbar-item,
|
|
|
245
245
|
display: none
|
|
246
246
|
.navbar-menu
|
|
247
247
|
background-color: $navbar-background-color
|
|
248
|
-
box-shadow: 0 8px 16px rgba($
|
|
248
|
+
box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
|
|
249
249
|
padding: 0.5rem 0
|
|
250
250
|
&.is-active
|
|
251
251
|
display: block
|
|
@@ -257,7 +257,7 @@ a.navbar-item,
|
|
|
257
257
|
&.is-fixed-bottom-touch
|
|
258
258
|
bottom: 0
|
|
259
259
|
&.has-shadow
|
|
260
|
-
box-shadow: 0 -2px 3px rgba($
|
|
260
|
+
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
|
|
261
261
|
&.is-fixed-top-touch
|
|
262
262
|
top: 0
|
|
263
263
|
&.is-fixed-top,
|
|
@@ -331,7 +331,7 @@ a.navbar-item,
|
|
|
331
331
|
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
|
332
332
|
border-top: none
|
|
333
333
|
bottom: 100%
|
|
334
|
-
box-shadow: 0 -8px 8px rgba($
|
|
334
|
+
box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
|
|
335
335
|
top: auto
|
|
336
336
|
&.is-active,
|
|
337
337
|
&.is-hoverable:focus,
|
|
@@ -358,7 +358,7 @@ a.navbar-item,
|
|
|
358
358
|
border-bottom-left-radius: $navbar-dropdown-radius
|
|
359
359
|
border-bottom-right-radius: $navbar-dropdown-radius
|
|
360
360
|
border-top: $navbar-dropdown-border-top
|
|
361
|
-
box-shadow: 0 8px 8px rgba($
|
|
361
|
+
box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
|
|
362
362
|
display: none
|
|
363
363
|
font-size: 0.875rem
|
|
364
364
|
left: 0
|
|
@@ -409,7 +409,7 @@ a.navbar-item,
|
|
|
409
409
|
&.is-fixed-bottom-desktop
|
|
410
410
|
bottom: 0
|
|
411
411
|
&.has-shadow
|
|
412
|
-
box-shadow: 0 -2px 3px rgba($
|
|
412
|
+
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
|
|
413
413
|
&.is-fixed-top-desktop
|
|
414
414
|
top: 0
|
|
415
415
|
html,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
$pagination-color: $
|
|
2
|
-
$pagination-border-color: $
|
|
1
|
+
$pagination-color: $text-strong !default
|
|
2
|
+
$pagination-border-color: $border !default
|
|
3
3
|
$pagination-margin: -0.25rem !default
|
|
4
4
|
$pagination-min-width: $control-height !default
|
|
5
5
|
|
|
@@ -17,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
|
|
|
17
17
|
$pagination-active-color: $link-active !default
|
|
18
18
|
$pagination-active-border-color: $link-active-border !default
|
|
19
19
|
|
|
20
|
-
$pagination-disabled-color: $
|
|
21
|
-
$pagination-disabled-background-color: $
|
|
22
|
-
$pagination-disabled-border-color: $
|
|
20
|
+
$pagination-disabled-color: $text-light !default
|
|
21
|
+
$pagination-disabled-background-color: $border !default
|
|
22
|
+
$pagination-disabled-border-color: $border !default
|
|
23
23
|
|
|
24
24
|
$pagination-current-color: $link-invert !default
|
|
25
25
|
$pagination-current-background-color: $link !default
|
|
@@ -27,9 +27,10 @@ $pagination-current-border-color: $link !default
|
|
|
27
27
|
|
|
28
28
|
$pagination-ellipsis-color: $grey-light !default
|
|
29
29
|
|
|
30
|
-
$pagination-shadow-inset: inset 0 1px 2px rgba($
|
|
30
|
+
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
|
|
31
31
|
|
|
32
32
|
.pagination
|
|
33
|
+
@extend %block
|
|
33
34
|
font-size: $size-normal
|
|
34
35
|
margin: $pagination-margin
|
|
35
36
|
// Sizes
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
$panel-margin: $block-spacing !default
|
|
2
|
-
$panel-item-border: 1px solid $border !default
|
|
2
|
+
$panel-item-border: 1px solid $border-light !default
|
|
3
|
+
$panel-radius: $radius-large !default
|
|
4
|
+
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
|
3
5
|
|
|
4
|
-
$panel-heading-background-color: $
|
|
6
|
+
$panel-heading-background-color: $border-light !default
|
|
5
7
|
$panel-heading-color: $text-strong !default
|
|
6
8
|
$panel-heading-line-height: 1.25 !default
|
|
7
|
-
$panel-heading-padding: 0.
|
|
9
|
+
$panel-heading-padding: 0.75em 1em !default
|
|
8
10
|
$panel-heading-radius: $radius !default
|
|
9
11
|
$panel-heading-size: 1.25em !default
|
|
10
|
-
$panel-heading-weight: $weight-
|
|
12
|
+
$panel-heading-weight: $weight-bold !default
|
|
11
13
|
|
|
12
14
|
$panel-tabs-font-size: 0.875em !default
|
|
13
15
|
$panel-tab-border-bottom: 1px solid $border !default
|
|
@@ -26,22 +28,32 @@ $panel-block-active-icon-color: $link !default
|
|
|
26
28
|
$panel-icon-color: $text-light !default
|
|
27
29
|
|
|
28
30
|
.panel
|
|
31
|
+
border-radius: $panel-radius
|
|
32
|
+
box-shadow: $panel-shadow
|
|
29
33
|
font-size: $size-normal
|
|
30
34
|
&:not(:last-child)
|
|
31
35
|
margin-bottom: $panel-margin
|
|
36
|
+
// Colors
|
|
37
|
+
@each $name, $components in $message-colors
|
|
38
|
+
$color: nth($components, 1)
|
|
39
|
+
$color-invert: nth($components, 2)
|
|
40
|
+
&.is-#{$name}
|
|
41
|
+
.panel-heading
|
|
42
|
+
background-color: $color
|
|
43
|
+
color: $color-invert
|
|
44
|
+
.panel-tabs a.is-active
|
|
45
|
+
border-bottom-color: $color
|
|
46
|
+
.panel-block.is-active .panel-icon
|
|
47
|
+
color: $color
|
|
32
48
|
|
|
33
|
-
.panel-heading,
|
|
34
49
|
.panel-tabs,
|
|
35
50
|
.panel-block
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
border-right: $panel-item-border
|
|
39
|
-
&:first-child
|
|
40
|
-
border-top: $panel-item-border
|
|
51
|
+
&:not(:last-child)
|
|
52
|
+
border-bottom: $panel-item-border
|
|
41
53
|
|
|
42
54
|
.panel-heading
|
|
43
55
|
background-color: $panel-heading-background-color
|
|
44
|
-
border-radius: $panel-
|
|
56
|
+
border-radius: $panel-radius $panel-radius 0 0
|
|
45
57
|
color: $panel-heading-color
|
|
46
58
|
font-size: $panel-heading-size
|
|
47
59
|
font-weight: $panel-heading-weight
|
|
@@ -87,6 +99,9 @@ $panel-icon-color: $text-light !default
|
|
|
87
99
|
color: $panel-block-active-color
|
|
88
100
|
.panel-icon
|
|
89
101
|
color: $panel-block-active-icon-color
|
|
102
|
+
&:last-child
|
|
103
|
+
border-bottom-left-radius: $panel-radius
|
|
104
|
+
border-bottom-right-radius: $panel-radius
|
|
90
105
|
|
|
91
106
|
a.panel-block,
|
|
92
107
|
label.panel-block
|
|
@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
|
|
|
12
12
|
$tabs-boxed-link-hover-background-color: $background !default
|
|
13
13
|
$tabs-boxed-link-hover-border-bottom-color: $border !default
|
|
14
14
|
|
|
15
|
-
$tabs-boxed-link-active-background-color: $
|
|
15
|
+
$tabs-boxed-link-active-background-color: $scheme-main !default
|
|
16
16
|
$tabs-boxed-link-active-border-color: $border !default
|
|
17
17
|
$tabs-boxed-link-active-border-bottom-color: transparent !default
|
|
18
18
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
$box-color: $text !default
|
|
2
|
-
$box-background-color: $
|
|
2
|
+
$box-background-color: $scheme-main !default
|
|
3
3
|
$box-radius: $radius-large !default
|
|
4
|
-
$box-shadow: 0
|
|
4
|
+
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
|
5
5
|
$box-padding: 1.25rem !default
|
|
6
6
|
|
|
7
|
-
$box-link-hover-shadow: 0
|
|
8
|
-
$box-link-active-shadow: inset 0 1px 2px rgba($
|
|
7
|
+
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
|
|
8
|
+
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
|
|
9
9
|
|
|
10
10
|
.box
|
|
11
11
|
@extend %block
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
$button-color: $
|
|
2
|
-
$button-background-color: $
|
|
1
|
+
$button-color: $text-strong !default
|
|
2
|
+
$button-background-color: $scheme-main !default
|
|
3
3
|
$button-family: false !default
|
|
4
4
|
|
|
5
|
-
$button-border-color: $
|
|
5
|
+
$button-border-color: $border !default
|
|
6
6
|
$button-border-width: $control-border-width !default
|
|
7
7
|
|
|
8
|
-
$button-padding-vertical: calc(0.
|
|
9
|
-
$button-padding-horizontal:
|
|
8
|
+
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
|
|
9
|
+
$button-padding-horizontal: 1em !default
|
|
10
10
|
|
|
11
11
|
$button-hover-color: $link-hover !default
|
|
12
12
|
$button-hover-border-color: $link-hover-border !default
|
|
@@ -23,14 +23,14 @@ $button-text-color: $text !default
|
|
|
23
23
|
$button-text-hover-background-color: $background !default
|
|
24
24
|
$button-text-hover-color: $text-strong !default
|
|
25
25
|
|
|
26
|
-
$button-disabled-background-color: $
|
|
27
|
-
$button-disabled-border-color: $
|
|
26
|
+
$button-disabled-background-color: $scheme-main !default
|
|
27
|
+
$button-disabled-border-color: $border !default
|
|
28
28
|
$button-disabled-shadow: none !default
|
|
29
29
|
$button-disabled-opacity: 0.5 !default
|
|
30
30
|
|
|
31
|
-
$button-static-color: $
|
|
32
|
-
$button-static-background-color: $
|
|
33
|
-
$button-static-border-color: $
|
|
31
|
+
$button-static-color: $text-light !default
|
|
32
|
+
$button-static-background-color: $scheme-main-ter !default
|
|
33
|
+
$button-static-border-color: $border !default
|
|
34
34
|
|
|
35
35
|
// The button sizes use mixins so they can be used at different breakpoints
|
|
36
36
|
=button-small
|
|
@@ -70,14 +70,14 @@ $button-static-border-color: $grey-lighter !default
|
|
|
70
70
|
height: 1.5em
|
|
71
71
|
width: 1.5em
|
|
72
72
|
&:first-child:not(:last-child)
|
|
73
|
-
margin-left: calc(-
|
|
74
|
-
margin-right:
|
|
73
|
+
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
|
|
74
|
+
margin-right: $button-padding-horizontal / 4
|
|
75
75
|
&:last-child:not(:first-child)
|
|
76
|
-
margin-left:
|
|
77
|
-
margin-right: calc(-
|
|
76
|
+
margin-left: $button-padding-horizontal / 4
|
|
77
|
+
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
|
|
78
78
|
&:first-child:last-child
|
|
79
|
-
margin-left: calc(-
|
|
80
|
-
margin-right: calc(-
|
|
79
|
+
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
|
|
80
|
+
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
|
|
81
81
|
// States
|
|
82
82
|
&:hover,
|
|
83
83
|
&.is-hovered
|
|
@@ -206,6 +206,23 @@ $button-static-border-color: $grey-lighter !default
|
|
|
206
206
|
border-color: $color-invert
|
|
207
207
|
box-shadow: none
|
|
208
208
|
color: $color-invert
|
|
209
|
+
// If light and dark colors are provided
|
|
210
|
+
@if length($pair) >= 4
|
|
211
|
+
$color-light: nth($pair, 3)
|
|
212
|
+
$color-dark: nth($pair, 4)
|
|
213
|
+
&.is-light
|
|
214
|
+
background-color: $color-light
|
|
215
|
+
color: $color-dark
|
|
216
|
+
&:hover,
|
|
217
|
+
&.is-hovered
|
|
218
|
+
background-color: darken($color-light, 2.5%)
|
|
219
|
+
border-color: transparent
|
|
220
|
+
color: $color-dark
|
|
221
|
+
&:active,
|
|
222
|
+
&.is-active
|
|
223
|
+
background-color: darken($color-light, 5%)
|
|
224
|
+
border-color: transparent
|
|
225
|
+
color: $color-dark
|
|
209
226
|
// Sizes
|
|
210
227
|
&.is-small
|
|
211
228
|
+button-small
|
|
@@ -240,8 +257,8 @@ $button-static-border-color: $grey-lighter !default
|
|
|
240
257
|
pointer-events: none
|
|
241
258
|
&.is-rounded
|
|
242
259
|
border-radius: $radius-rounded
|
|
243
|
-
padding-left:
|
|
244
|
-
padding-right:
|
|
260
|
+
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
|
|
261
|
+
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
|
|
245
262
|
|
|
246
263
|
.buttons
|
|
247
264
|
align-items: center
|
|
@@ -5,12 +5,13 @@ $container-offset: (2 * $gap) !default
|
|
|
5
5
|
margin: 0 auto
|
|
6
6
|
position: relative
|
|
7
7
|
width: auto
|
|
8
|
+
&.is-fluid
|
|
9
|
+
max-width: none
|
|
10
|
+
padding-left: $gap
|
|
11
|
+
padding-right: $gap
|
|
12
|
+
width: 100%
|
|
8
13
|
+desktop
|
|
9
14
|
max-width: $desktop - $container-offset
|
|
10
|
-
&.is-fluid
|
|
11
|
-
margin-left: $gap
|
|
12
|
-
margin-right: $gap
|
|
13
|
-
max-width: none
|
|
14
15
|
+until-widescreen
|
|
15
16
|
&.is-widescreen
|
|
16
17
|
max-width: $widescreen - $container-offset
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
$notification-background-color: $background !default
|
|
2
|
+
$notification-code-background-color: $scheme-main !default
|
|
2
3
|
$notification-radius: $radius !default
|
|
3
4
|
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
|
4
5
|
|
|
@@ -15,7 +16,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
|
|
15
16
|
color: currentColor
|
|
16
17
|
code,
|
|
17
18
|
pre
|
|
18
|
-
background: $
|
|
19
|
+
background: $notification-code-background-color
|
|
19
20
|
pre code
|
|
20
21
|
background: transparent
|
|
21
22
|
& > .delete
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
$table-color: $
|
|
2
|
-
$table-background-color: $
|
|
1
|
+
$table-color: $text-strong !default
|
|
2
|
+
$table-background-color: $scheme-main !default
|
|
3
3
|
|
|
4
|
-
$table-cell-border: 1px solid $
|
|
4
|
+
$table-cell-border: 1px solid $border !default
|
|
5
5
|
$table-cell-border-width: 0 0 1px !default
|
|
6
6
|
$table-cell-padding: 0.5em 0.75em !default
|
|
7
7
|
$table-cell-heading-color: $text-strong !default
|
|
@@ -15,13 +15,13 @@ $table-head-background-color: transparent !default
|
|
|
15
15
|
$table-body-background-color: transparent !default
|
|
16
16
|
$table-foot-background-color: transparent !default
|
|
17
17
|
|
|
18
|
-
$table-row-hover-background-color: $
|
|
18
|
+
$table-row-hover-background-color: $scheme-main-bis !default
|
|
19
19
|
|
|
20
20
|
$table-row-active-background-color: $primary !default
|
|
21
21
|
$table-row-active-color: $primary-invert !default
|
|
22
22
|
|
|
23
|
-
$table-striped-row-even-background-color: $
|
|
24
|
-
$table-striped-row-even-hover-background-color: $
|
|
23
|
+
$table-striped-row-even-background-color: $scheme-main-bis !default
|
|
24
|
+
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
|
|
25
25
|
|
|
26
26
|
.table
|
|
27
27
|
@extend %block
|
|
@@ -69,6 +69,13 @@ $tag-delete-margin: 1px !default
|
|
|
69
69
|
&.is-#{$name}
|
|
70
70
|
background-color: $color
|
|
71
71
|
color: $color-invert
|
|
72
|
+
// If a light and dark colors are provided
|
|
73
|
+
@if length($pair) > 3
|
|
74
|
+
$color-light: nth($pair, 3)
|
|
75
|
+
$color-dark: nth($pair, 4)
|
|
76
|
+
&.is-light
|
|
77
|
+
background-color: $color-light
|
|
78
|
+
color: $color-dark
|
|
72
79
|
// Sizes
|
|
73
80
|
&.is-normal
|
|
74
81
|
font-size: $size-small
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$title-color: $
|
|
1
|
+
$title-color: $text-strong !default
|
|
2
2
|
$title-family: false !default
|
|
3
3
|
$title-size: $size-3 !default
|
|
4
4
|
$title-weight: $weight-semibold !default
|
|
@@ -8,12 +8,12 @@ $title-strong-weight: inherit !default
|
|
|
8
8
|
$title-sub-size: 0.75em !default
|
|
9
9
|
$title-sup-size: 0.75em !default
|
|
10
10
|
|
|
11
|
-
$subtitle-color: $
|
|
11
|
+
$subtitle-color: $text !default
|
|
12
12
|
$subtitle-family: false !default
|
|
13
13
|
$subtitle-size: $size-5 !default
|
|
14
14
|
$subtitle-weight: $weight-normal !default
|
|
15
15
|
$subtitle-line-height: 1.25 !default
|
|
16
|
-
$subtitle-strong-color: $
|
|
16
|
+
$subtitle-strong-color: $text-strong !default
|
|
17
17
|
$subtitle-strong-weight: $weight-semibold !default
|
|
18
18
|
$subtitle-negative-margin: -1.25rem !default
|
|
19
19
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
$file-border-color: $border !default
|
|
2
2
|
$file-radius: $radius !default
|
|
3
3
|
|
|
4
|
-
$file-cta-background-color: $
|
|
5
|
-
$file-cta-color: $
|
|
6
|
-
$file-cta-hover-color: $
|
|
7
|
-
$file-cta-active-color: $
|
|
4
|
+
$file-cta-background-color: $scheme-main-ter !default
|
|
5
|
+
$file-cta-color: $text !default
|
|
6
|
+
$file-cta-hover-color: $text-strong !default
|
|
7
|
+
$file-cta-active-color: $text-strong !default
|
|
8
8
|
|
|
9
9
|
$file-name-border-color: $border !default
|
|
10
10
|
$file-name-border-style: solid !default
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
$textarea-padding: $control-padding-horizontal !default
|
|
2
|
+
$textarea-max-height: 40em !default
|
|
3
|
+
$textarea-min-height: 8em !default
|
|
4
|
+
|
|
1
5
|
%input-textarea
|
|
2
6
|
@extend %input
|
|
3
7
|
box-shadow: $input-shadow
|
|
@@ -34,8 +38,8 @@
|
|
|
34
38
|
@extend %input-textarea
|
|
35
39
|
&.is-rounded
|
|
36
40
|
border-radius: $radius-rounded
|
|
37
|
-
padding-left:
|
|
38
|
-
padding-right:
|
|
41
|
+
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
|
|
42
|
+
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
|
|
39
43
|
&.is-static
|
|
40
44
|
background-color: transparent
|
|
41
45
|
border-color: transparent
|
|
@@ -48,11 +52,11 @@
|
|
|
48
52
|
display: block
|
|
49
53
|
max-width: 100%
|
|
50
54
|
min-width: 100%
|
|
51
|
-
padding:
|
|
55
|
+
padding: $textarea-padding
|
|
52
56
|
resize: vertical
|
|
53
57
|
&:not([rows])
|
|
54
|
-
max-height:
|
|
55
|
-
min-height:
|
|
58
|
+
max-height: $textarea-max-height
|
|
59
|
+
min-height: $textarea-min-height
|
|
56
60
|
&[rows]
|
|
57
61
|
height: initial
|
|
58
62
|
// Modifiers
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
$input-color: $
|
|
2
|
-
$input-background-color: $
|
|
3
|
-
$input-border-color: $
|
|
1
|
+
$input-color: $text-strong !default
|
|
2
|
+
$input-background-color: $scheme-main !default
|
|
3
|
+
$input-border-color: $border !default
|
|
4
4
|
$input-height: $control-height !default
|
|
5
|
-
$input-shadow: inset 0
|
|
5
|
+
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
|
|
6
6
|
$input-placeholder-color: rgba($input-color, 0.3) !default
|
|
7
7
|
|
|
8
|
-
$input-hover-color: $
|
|
9
|
-
$input-hover-border-color: $
|
|
8
|
+
$input-hover-color: $text-strong !default
|
|
9
|
+
$input-hover-border-color: $border-hover !default
|
|
10
10
|
|
|
11
|
-
$input-focus-color: $
|
|
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
14
|
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
|
@@ -20,8 +20,8 @@ $input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
|
|
20
20
|
|
|
21
21
|
$input-arrow: $link !default
|
|
22
22
|
|
|
23
|
-
$input-icon-color: $
|
|
24
|
-
$input-icon-active-color: $
|
|
23
|
+
$input-icon-color: $border !default
|
|
24
|
+
$input-icon-active-color: $text !default
|
|
25
25
|
|
|
26
26
|
$input-radius: $radius !default
|
|
27
27
|
|
|
@@ -3,11 +3,11 @@ $control-radius-small: $radius-small !default
|
|
|
3
3
|
|
|
4
4
|
$control-border-width: 1px !default
|
|
5
5
|
|
|
6
|
-
$control-height: 2.
|
|
6
|
+
$control-height: 2.5em !default
|
|
7
7
|
$control-line-height: 1.5 !default
|
|
8
8
|
|
|
9
|
-
$control-padding-vertical: calc(0.
|
|
10
|
-
$control-padding-horizontal: calc(0.
|
|
9
|
+
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
|
|
10
|
+
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
|
|
11
11
|
|
|
12
12
|
=control
|
|
13
13
|
-moz-appearance: none
|
|
@@ -19,20 +19,39 @@ $blue-invert: findColorInvert($blue) !default
|
|
|
19
19
|
$purple-invert: findColorInvert($purple) !default
|
|
20
20
|
$red-invert: findColorInvert($red) !default
|
|
21
21
|
|
|
22
|
-
$primary-invert: $
|
|
23
|
-
$
|
|
24
|
-
$
|
|
25
|
-
$
|
|
26
|
-
$
|
|
27
|
-
$
|
|
28
|
-
$
|
|
22
|
+
$primary-invert: findColorInvert($primary) !default
|
|
23
|
+
$primary-light: findLightColor($primary) !default
|
|
24
|
+
$primary-dark: findDarkColor($primary) !default
|
|
25
|
+
$info-invert: findColorInvert($info) !default
|
|
26
|
+
$info-light: findLightColor($info) !default
|
|
27
|
+
$info-dark: findDarkColor($info) !default
|
|
28
|
+
$success-invert: findColorInvert($success) !default
|
|
29
|
+
$success-light: findLightColor($success) !default
|
|
30
|
+
$success-dark: findDarkColor($success) !default
|
|
31
|
+
$warning-invert: findColorInvert($warning) !default
|
|
32
|
+
$warning-light: findLightColor($warning) !default
|
|
33
|
+
$warning-dark: findDarkColor($warning) !default
|
|
34
|
+
$danger-invert: findColorInvert($danger) !default
|
|
35
|
+
$danger-light: findLightColor($danger) !default
|
|
36
|
+
$danger-dark: findDarkColor($danger) !default
|
|
37
|
+
$light-invert: findColorInvert($light) !default
|
|
38
|
+
$dark-invert: findColorInvert($dark) !default
|
|
29
39
|
|
|
30
40
|
// General colors
|
|
31
41
|
|
|
42
|
+
$scheme-main: $white !default
|
|
43
|
+
$scheme-main-bis: $white-bis !default
|
|
44
|
+
$scheme-main-ter: $white-ter !default
|
|
45
|
+
$scheme-invert: $black !default
|
|
46
|
+
$scheme-invert-bis: $black-bis !default
|
|
47
|
+
$scheme-invert-ter: $black-ter !default
|
|
48
|
+
|
|
32
49
|
$background: $white-ter !default
|
|
33
50
|
|
|
34
51
|
$border: $grey-lighter !default
|
|
35
52
|
$border-hover: $grey-light !default
|
|
53
|
+
$border-light: $grey-lightest !default
|
|
54
|
+
$border-light-hover: $grey-light !default
|
|
36
55
|
|
|
37
56
|
// Text colors
|
|
38
57
|
|
|
@@ -52,7 +71,9 @@ $pre-background: $background !default
|
|
|
52
71
|
// Link colors
|
|
53
72
|
|
|
54
73
|
$link: $blue !default
|
|
55
|
-
$link-invert: $
|
|
74
|
+
$link-invert: findColorInvert($link) !default
|
|
75
|
+
$link-light: findLightColor($link) !default
|
|
76
|
+
$link-dark: findDarkColor($link) !default
|
|
56
77
|
$link-visited: $purple !default
|
|
57
78
|
|
|
58
79
|
$link-hover: $grey-darker !default
|
|
@@ -79,7 +100,7 @@ $size-large: $size-4 !default
|
|
|
79
100
|
$custom-colors: null !default
|
|
80
101
|
$custom-shades: null !default
|
|
81
102
|
|
|
82
|
-
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
|
103
|
+
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
|
83
104
|
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
|
84
105
|
|
|
85
106
|
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
|
@@ -1,34 +1,53 @@
|
|
|
1
1
|
@function mergeColorMaps($bulma-colors, $custom-colors)
|
|
2
|
-
//
|
|
2
|
+
// We return at least Bulma's hard-coded colors
|
|
3
3
|
$merged-colors: $bulma-colors
|
|
4
4
|
|
|
5
|
-
//
|
|
5
|
+
// We want a map as input
|
|
6
6
|
@if type-of($custom-colors) == 'map'
|
|
7
7
|
@each $name, $components in $custom-colors
|
|
8
|
-
// color name should be a string
|
|
8
|
+
// The color name should be a string
|
|
9
|
+
// and the components either a single color
|
|
10
|
+
// or a colors list with at least one element
|
|
9
11
|
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
|
10
12
|
$color-base: null
|
|
13
|
+
$color-invert: null
|
|
14
|
+
$color-light: null
|
|
15
|
+
$color-dark: null
|
|
16
|
+
$value: null
|
|
11
17
|
|
|
12
|
-
//
|
|
18
|
+
// The param can either be a single color
|
|
13
19
|
// or a list of 2 colors
|
|
14
20
|
@if type-of($components) == 'color'
|
|
15
21
|
$color-base: $components
|
|
22
|
+
$color-invert: findColorInvert($color-base)
|
|
23
|
+
$color-light: findLightColor($color-base)
|
|
24
|
+
$color-dark: findDarkColor($color-base)
|
|
16
25
|
@else if type-of($components) == 'list'
|
|
17
26
|
$color-base: nth($components, 1)
|
|
27
|
+
// If Invert, Light and Dark are provided
|
|
28
|
+
@if length($components) > 3
|
|
29
|
+
$color-invert: nth($components, 2)
|
|
30
|
+
$color-light: nth($components, 3)
|
|
31
|
+
$color-dark: nth($components, 4)
|
|
32
|
+
// If only Invert and Light are provided
|
|
33
|
+
@else if length($components) > 2
|
|
34
|
+
$color-invert: nth($components, 2)
|
|
35
|
+
$color-light: nth($components, 3)
|
|
36
|
+
$color-dark: findDarkColor($color-base)
|
|
37
|
+
// If only Invert is provided
|
|
38
|
+
@else
|
|
39
|
+
$color-invert: nth($components, 2)
|
|
40
|
+
$color-light: findLightColor($color-base)
|
|
41
|
+
$color-dark: findDarkColor($color-base)
|
|
18
42
|
|
|
19
|
-
$color-invert
|
|
20
|
-
// is an inverted color provided in the list
|
|
21
|
-
@if length($components) > 1
|
|
22
|
-
$color-invert: nth($components, 2)
|
|
43
|
+
$value: ($color-base, $color-invert, $color-light, $color-dark)
|
|
23
44
|
|
|
24
|
-
//
|
|
45
|
+
// We only want to merge the map if the color base is an actual color
|
|
25
46
|
@if type-of($color-base) == 'color'
|
|
26
|
-
//
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
|
|
31
|
-
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
|
|
47
|
+
// We merge this colors elements as map with Bulma's colors map
|
|
48
|
+
// (we can override them this way, no multiple definition for the same name)
|
|
49
|
+
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
|
|
50
|
+
$merged-colors: map_merge($merged-colors, ($name: $value))
|
|
32
51
|
|
|
33
52
|
@return $merged-colors
|
|
34
53
|
|
|
@@ -60,3 +79,20 @@
|
|
|
60
79
|
@return rgba(#000, 0.7)
|
|
61
80
|
@else
|
|
62
81
|
@return #fff
|
|
82
|
+
|
|
83
|
+
@function findLightColor($color)
|
|
84
|
+
@if type-of($color) == 'color'
|
|
85
|
+
$l: 96%
|
|
86
|
+
@if lightness($color) > 96%
|
|
87
|
+
$l: lightness($color)
|
|
88
|
+
@return change-color($color, $lightness: $l)
|
|
89
|
+
@return $background
|
|
90
|
+
|
|
91
|
+
@function findDarkColor($color)
|
|
92
|
+
@if type-of($color) == 'color'
|
|
93
|
+
$base-l: 29%
|
|
94
|
+
$luminance: colorLuminance($color)
|
|
95
|
+
$luminance-delta: (0.53 - $luminance)
|
|
96
|
+
$target-l: round($base-l + ($luminance-delta * 53))
|
|
97
|
+
@return change-color($color, $lightness: max($base-l, $target-l))
|
|
98
|
+
@return $text-strong
|
|
@@ -9,6 +9,7 @@ $grey-dark: hsl(0, 0%, 29%) !default
|
|
|
9
9
|
$grey: hsl(0, 0%, 48%) !default
|
|
10
10
|
$grey-light: hsl(0, 0%, 71%) !default
|
|
11
11
|
$grey-lighter: hsl(0, 0%, 86%) !default
|
|
12
|
+
$grey-lightest: hsl(0, 0%, 93%) !default
|
|
12
13
|
|
|
13
14
|
$white-ter: hsl(0, 0%, 96%) !default
|
|
14
15
|
$white-bis: hsl(0, 0%, 98%) !default
|
|
@@ -16,12 +17,12 @@ $white: hsl(0, 0%, 100%) !default
|
|
|
16
17
|
|
|
17
18
|
$orange: hsl(14, 100%, 53%) !default
|
|
18
19
|
$yellow: hsl(48, 100%, 67%) !default
|
|
19
|
-
$green: hsl(141,
|
|
20
|
+
$green: hsl(141, 53%, 53%) !default
|
|
20
21
|
$turquoise: hsl(171, 100%, 41%) !default
|
|
21
|
-
$cyan: hsl(204,
|
|
22
|
+
$cyan: hsl(204, 71%, 53%) !default
|
|
22
23
|
$blue: hsl(217, 71%, 53%) !default
|
|
23
24
|
$purple: hsl(271, 100%, 71%) !default
|
|
24
|
-
$red: hsl(348,
|
|
25
|
+
$red: hsl(348, 86%, 61%) !default
|
|
25
26
|
|
|
26
27
|
// Typography
|
|
27
28
|
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
@extend %unselectable
|
|
171
171
|
-moz-appearance: none
|
|
172
172
|
-webkit-appearance: none
|
|
173
|
-
background-color: rgba($
|
|
173
|
+
background-color: rgba($scheme-invert, 0.2)
|
|
174
174
|
border: none
|
|
175
175
|
border-radius: $radius-rounded
|
|
176
176
|
cursor: pointer
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
width: 20px
|
|
191
191
|
&::before,
|
|
192
192
|
&::after
|
|
193
|
-
background-color: $
|
|
193
|
+
background-color: $scheme-main
|
|
194
194
|
content: ""
|
|
195
195
|
display: block
|
|
196
196
|
left: 50%
|
|
@@ -206,9 +206,9 @@
|
|
|
206
206
|
width: 2px
|
|
207
207
|
&:hover,
|
|
208
208
|
&:focus
|
|
209
|
-
background-color: rgba($
|
|
209
|
+
background-color: rgba($scheme-invert, 0.3)
|
|
210
210
|
&:active
|
|
211
|
-
background-color: rgba($
|
|
211
|
+
background-color: rgba($scheme-invert, 0.4)
|
|
212
212
|
// Sizes
|
|
213
213
|
&.is-small
|
|
214
214
|
height: 16px
|
data/lib/bulma/sass/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bulma-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- bananaappletw
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2020-04-12 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -149,7 +149,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
149
149
|
- !ruby/object:Gem::Version
|
|
150
150
|
version: '0'
|
|
151
151
|
requirements: []
|
|
152
|
-
|
|
152
|
+
rubyforge_project:
|
|
153
|
+
rubygems_version: 2.7.6
|
|
153
154
|
signing_key:
|
|
154
155
|
specification_version: 4
|
|
155
156
|
summary: Bulma, modern CSS framework based on Flexbox.
|