bulma-clean-theme 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/head.html +1 -1
  3. data/_includes/header.html +3 -3
  4. data/_includes/latest-posts.html +2 -2
  5. data/_includes/pagination.html +2 -2
  6. data/_layouts/blog.html +2 -2
  7. data/_layouts/default.html +1 -1
  8. data/_sass/_main.scss +7 -0
  9. data/assets/css/app.scss +2 -8
  10. data/node_modules/.yarn-integrity +1 -0
  11. data/node_modules/bulma/CHANGELOG.md +1135 -0
  12. data/node_modules/bulma/LICENSE +21 -0
  13. data/node_modules/bulma/README.md +112 -0
  14. data/node_modules/bulma/bulma.sass +8 -0
  15. data/node_modules/bulma/css/bulma.css +10289 -0
  16. data/node_modules/bulma/css/bulma.css.map +1 -0
  17. data/node_modules/bulma/css/bulma.min.css +1 -0
  18. data/node_modules/bulma/package.json +48 -0
  19. data/node_modules/bulma/sass/.DS_Store +0 -0
  20. data/node_modules/bulma/sass/base/_all.sass +5 -0
  21. data/node_modules/bulma/sass/base/generic.sass +127 -0
  22. data/node_modules/bulma/sass/base/helpers.sass +261 -0
  23. data/node_modules/bulma/sass/base/minireset.sass +79 -0
  24. data/node_modules/bulma/sass/components/_all.sass +15 -0
  25. data/node_modules/bulma/sass/components/breadcrumb.sass +75 -0
  26. data/node_modules/bulma/sass/components/card.sass +74 -0
  27. data/node_modules/bulma/sass/components/dropdown.sass +77 -0
  28. data/node_modules/bulma/sass/components/level.sass +75 -0
  29. data/node_modules/bulma/sass/components/list.sass +39 -0
  30. data/node_modules/bulma/sass/components/media.sass +48 -0
  31. data/node_modules/bulma/sass/components/menu.sass +50 -0
  32. data/node_modules/bulma/sass/components/message.sass +86 -0
  33. data/node_modules/bulma/sass/components/modal.sass +113 -0
  34. data/node_modules/bulma/sass/components/navbar.sass +422 -0
  35. data/node_modules/bulma/sass/components/pagination.sass +144 -0
  36. data/node_modules/bulma/sass/components/panel.sass +101 -0
  37. data/node_modules/bulma/sass/components/tabs.sass +151 -0
  38. data/node_modules/bulma/sass/elements/_all.sass +16 -0
  39. data/node_modules/bulma/sass/elements/box.sass +24 -0
  40. data/node_modules/bulma/sass/elements/button.sass +255 -0
  41. data/node_modules/bulma/sass/elements/container.sass +25 -0
  42. data/node_modules/bulma/sass/elements/content.sass +151 -0
  43. data/node_modules/bulma/sass/elements/form.sass +630 -0
  44. data/node_modules/bulma/sass/elements/icon.sass +21 -0
  45. data/node_modules/bulma/sass/elements/image.sass +68 -0
  46. data/node_modules/bulma/sass/elements/notification.sass +35 -0
  47. data/node_modules/bulma/sass/elements/other.sass +39 -0
  48. data/node_modules/bulma/sass/elements/progress.sass +40 -0
  49. data/node_modules/bulma/sass/elements/table.sass +119 -0
  50. data/node_modules/bulma/sass/elements/tag.sass +111 -0
  51. data/node_modules/bulma/sass/elements/title.sass +64 -0
  52. data/node_modules/bulma/sass/grid/_all.sass +4 -0
  53. data/node_modules/bulma/sass/grid/columns.sass +504 -0
  54. data/node_modules/bulma/sass/grid/tiles.sass +32 -0
  55. data/node_modules/bulma/sass/layout/_all.sass +5 -0
  56. data/node_modules/bulma/sass/layout/footer.sass +5 -0
  57. data/node_modules/bulma/sass/layout/hero.sass +158 -0
  58. data/node_modules/bulma/sass/layout/section.sass +13 -0
  59. data/node_modules/bulma/sass/utilities/_all.sass +8 -0
  60. data/node_modules/bulma/sass/utilities/animations.sass +5 -0
  61. data/node_modules/bulma/sass/utilities/controls.sass +49 -0
  62. data/node_modules/bulma/sass/utilities/derived-variables.sass +84 -0
  63. data/node_modules/bulma/sass/utilities/functions.sass +62 -0
  64. data/node_modules/bulma/sass/utilities/initial-variables.sass +72 -0
  65. data/node_modules/bulma/sass/utilities/mixins.sass +261 -0
  66. metadata +59 -2
@@ -0,0 +1,144 @@
1
+ $pagination-color: $grey-darker !default
2
+ $pagination-border-color: $grey-lighter !default
3
+ $pagination-margin: -0.25rem !default
4
+ $pagination-min-width: $control-height !default
5
+
6
+ $pagination-hover-color: $link-hover !default
7
+ $pagination-hover-border-color: $link-hover-border !default
8
+
9
+ $pagination-focus-color: $link-focus !default
10
+ $pagination-focus-border-color: $link-focus-border !default
11
+
12
+ $pagination-active-color: $link-active !default
13
+ $pagination-active-border-color: $link-active-border !default
14
+
15
+ $pagination-disabled-color: $grey !default
16
+ $pagination-disabled-background-color: $grey-lighter !default
17
+ $pagination-disabled-border-color: $grey-lighter !default
18
+
19
+ $pagination-current-color: $link-invert !default
20
+ $pagination-current-background-color: $link !default
21
+ $pagination-current-border-color: $link !default
22
+
23
+ $pagination-ellipsis-color: $grey-light !default
24
+
25
+ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
26
+
27
+ .pagination
28
+ font-size: $size-normal
29
+ margin: $pagination-margin
30
+ // Sizes
31
+ &.is-small
32
+ font-size: $size-small
33
+ &.is-medium
34
+ font-size: $size-medium
35
+ &.is-large
36
+ font-size: $size-large
37
+ &.is-rounded
38
+ .pagination-previous,
39
+ .pagination-next
40
+ padding-left: 1em
41
+ padding-right: 1em
42
+ border-radius: $radius-rounded
43
+ .pagination-link
44
+ border-radius: $radius-rounded
45
+
46
+ .pagination,
47
+ .pagination-list
48
+ align-items: center
49
+ display: flex
50
+ justify-content: center
51
+ text-align: center
52
+
53
+ .pagination-previous,
54
+ .pagination-next,
55
+ .pagination-link,
56
+ .pagination-ellipsis
57
+ @extend %control
58
+ @extend %unselectable
59
+ font-size: 1em
60
+ padding-left: 0.5em
61
+ padding-right: 0.5em
62
+ justify-content: center
63
+ margin: 0.25rem
64
+ text-align: center
65
+
66
+ .pagination-previous,
67
+ .pagination-next,
68
+ .pagination-link
69
+ border-color: $pagination-border-color
70
+ color: $pagination-color
71
+ min-width: $pagination-min-width
72
+ &:hover
73
+ border-color: $pagination-hover-border-color
74
+ color: $pagination-hover-color
75
+ &:focus
76
+ border-color: $pagination-focus-border-color
77
+ &:active
78
+ box-shadow: $pagination-shadow-inset
79
+ &[disabled]
80
+ background-color: $pagination-disabled-background-color
81
+ border-color: $pagination-disabled-border-color
82
+ box-shadow: none
83
+ color: $pagination-disabled-color
84
+ opacity: 0.5
85
+
86
+ .pagination-previous,
87
+ .pagination-next
88
+ padding-left: 0.75em
89
+ padding-right: 0.75em
90
+ white-space: nowrap
91
+
92
+ .pagination-link
93
+ &.is-current
94
+ background-color: $pagination-current-background-color
95
+ border-color: $pagination-current-border-color
96
+ color: $pagination-current-color
97
+
98
+ .pagination-ellipsis
99
+ color: $pagination-ellipsis-color
100
+ pointer-events: none
101
+
102
+ .pagination-list
103
+ flex-wrap: wrap
104
+
105
+ +mobile
106
+ .pagination
107
+ flex-wrap: wrap
108
+ .pagination-previous,
109
+ .pagination-next
110
+ flex-grow: 1
111
+ flex-shrink: 1
112
+ .pagination-list
113
+ li
114
+ flex-grow: 1
115
+ flex-shrink: 1
116
+
117
+ +tablet
118
+ .pagination-list
119
+ flex-grow: 1
120
+ flex-shrink: 1
121
+ justify-content: flex-start
122
+ order: 1
123
+ .pagination-previous
124
+ order: 2
125
+ .pagination-next
126
+ order: 3
127
+ .pagination
128
+ justify-content: space-between
129
+ &.is-centered
130
+ .pagination-previous
131
+ order: 1
132
+ .pagination-list
133
+ justify-content: center
134
+ order: 2
135
+ .pagination-next
136
+ order: 3
137
+ &.is-right
138
+ .pagination-previous
139
+ order: 1
140
+ .pagination-next
141
+ order: 2
142
+ .pagination-list
143
+ justify-content: flex-end
144
+ order: 3
@@ -0,0 +1,101 @@
1
+ $panel-item-border: 1px solid $border !default
2
+
3
+ $panel-heading-background-color: $background !default
4
+ $panel-heading-color: $text-strong !default
5
+ $panel-heading-line-height: 1.25 !default
6
+ $panel-heading-padding: 0.5em 0.75em !default
7
+ $panel-heading-radius: $radius !default
8
+ $panel-heading-size: 1.25em !default
9
+ $panel-heading-weight: $weight-light !default
10
+
11
+ $panel-tab-border-bottom: 1px solid $border !default
12
+ $panel-tab-active-border-bottom-color: $link-active-border !default
13
+ $panel-tab-active-color: $link-active !default
14
+
15
+ $panel-list-item-color: $text !default
16
+ $panel-list-item-hover-color: $link !default
17
+
18
+ $panel-block-color: $text-strong !default
19
+ $panel-block-hover-background-color: $background !default
20
+ $panel-block-active-border-left-color: $link !default
21
+ $panel-block-active-color: $link-active !default
22
+ $panel-block-active-icon-color: $link !default
23
+
24
+ $panel-icon-color: $text-light !default
25
+
26
+ .panel
27
+ font-size: $size-normal
28
+ &:not(:last-child)
29
+ margin-bottom: 1.5rem
30
+
31
+ .panel-heading,
32
+ .panel-tabs,
33
+ .panel-block
34
+ border-bottom: $panel-item-border
35
+ border-left: $panel-item-border
36
+ border-right: $panel-item-border
37
+ &:first-child
38
+ border-top: $panel-item-border
39
+
40
+ .panel-heading
41
+ background-color: $panel-heading-background-color
42
+ border-radius: $panel-heading-radius $panel-heading-radius 0 0
43
+ color: $panel-heading-color
44
+ font-size: $panel-heading-size
45
+ font-weight: $panel-heading-weight
46
+ line-height: $panel-heading-line-height
47
+ padding: $panel-heading-padding
48
+
49
+ .panel-tabs
50
+ align-items: flex-end
51
+ display: flex
52
+ font-size: 0.875em
53
+ justify-content: center
54
+ a
55
+ border-bottom: $panel-tab-border-bottom
56
+ margin-bottom: -1px
57
+ padding: 0.5em
58
+ // Modifiers
59
+ &.is-active
60
+ border-bottom-color: $panel-tab-active-border-bottom-color
61
+ color: $panel-tab-active-color
62
+
63
+ .panel-list
64
+ a
65
+ color: $panel-list-item-color
66
+ &:hover
67
+ color: $panel-list-item-hover-color
68
+
69
+ .panel-block
70
+ align-items: center
71
+ color: $panel-block-color
72
+ display: flex
73
+ justify-content: flex-start
74
+ padding: 0.5em 0.75em
75
+ input[type="checkbox"]
76
+ margin-right: 0.75em
77
+ & > .control
78
+ flex-grow: 1
79
+ flex-shrink: 1
80
+ width: 100%
81
+ &.is-wrapped
82
+ flex-wrap: wrap
83
+ &.is-active
84
+ border-left-color: $panel-block-active-border-left-color
85
+ color: $panel-block-active-color
86
+ .panel-icon
87
+ color: $panel-block-active-icon-color
88
+
89
+ a.panel-block,
90
+ label.panel-block
91
+ cursor: pointer
92
+ &:hover
93
+ background-color: $panel-block-hover-background-color
94
+
95
+ .panel-icon
96
+ +fa(14px, 1em)
97
+ color: $panel-icon-color
98
+ margin-right: 0.75em
99
+ .fa
100
+ font-size: inherit
101
+ line-height: inherit
@@ -0,0 +1,151 @@
1
+ $tabs-border-bottom-color: $border !default
2
+ $tabs-border-bottom-style: solid !default
3
+ $tabs-border-bottom-width: 1px !default
4
+ $tabs-link-color: $text !default
5
+ $tabs-link-hover-border-bottom-color: $text-strong !default
6
+ $tabs-link-hover-color: $text-strong !default
7
+ $tabs-link-active-border-bottom-color: $link !default
8
+ $tabs-link-active-color: $link !default
9
+ $tabs-link-padding: 0.5em 1em !default
10
+
11
+ $tabs-boxed-link-radius: $radius !default
12
+ $tabs-boxed-link-hover-background-color: $background !default
13
+ $tabs-boxed-link-hover-border-bottom-color: $border !default
14
+
15
+ $tabs-boxed-link-active-background-color: $white !default
16
+ $tabs-boxed-link-active-border-color: $border !default
17
+ $tabs-boxed-link-active-border-bottom-color: transparent !default
18
+
19
+ $tabs-toggle-link-border-color: $border !default
20
+ $tabs-toggle-link-border-style: solid !default
21
+ $tabs-toggle-link-border-width: 1px !default
22
+ $tabs-toggle-link-hover-background-color: $background !default
23
+ $tabs-toggle-link-hover-border-color: $border-hover !default
24
+ $tabs-toggle-link-radius: $radius !default
25
+ $tabs-toggle-link-active-background-color: $link !default
26
+ $tabs-toggle-link-active-border-color: $link !default
27
+ $tabs-toggle-link-active-color: $link-invert !default
28
+
29
+ .tabs
30
+ @extend %block
31
+ +overflow-touch
32
+ @extend %unselectable
33
+ align-items: stretch
34
+ display: flex
35
+ font-size: $size-normal
36
+ justify-content: space-between
37
+ overflow: hidden
38
+ overflow-x: auto
39
+ white-space: nowrap
40
+ a
41
+ align-items: center
42
+ border-bottom-color: $tabs-border-bottom-color
43
+ border-bottom-style: $tabs-border-bottom-style
44
+ border-bottom-width: $tabs-border-bottom-width
45
+ color: $tabs-link-color
46
+ display: flex
47
+ justify-content: center
48
+ margin-bottom: -#{$tabs-border-bottom-width}
49
+ padding: $tabs-link-padding
50
+ vertical-align: top
51
+ &:hover
52
+ border-bottom-color: $tabs-link-hover-border-bottom-color
53
+ color: $tabs-link-hover-color
54
+ li
55
+ display: block
56
+ &.is-active
57
+ a
58
+ border-bottom-color: $tabs-link-active-border-bottom-color
59
+ color: $tabs-link-active-color
60
+ ul
61
+ align-items: center
62
+ border-bottom-color: $tabs-border-bottom-color
63
+ border-bottom-style: $tabs-border-bottom-style
64
+ border-bottom-width: $tabs-border-bottom-width
65
+ display: flex
66
+ flex-grow: 1
67
+ flex-shrink: 0
68
+ justify-content: flex-start
69
+ &.is-left
70
+ padding-right: 0.75em
71
+ &.is-center
72
+ flex: none
73
+ justify-content: center
74
+ padding-left: 0.75em
75
+ padding-right: 0.75em
76
+ &.is-right
77
+ justify-content: flex-end
78
+ padding-left: 0.75em
79
+ .icon
80
+ &:first-child
81
+ margin-right: 0.5em
82
+ &:last-child
83
+ margin-left: 0.5em
84
+ // Alignment
85
+ &.is-centered
86
+ ul
87
+ justify-content: center
88
+ &.is-right
89
+ ul
90
+ justify-content: flex-end
91
+ // Styles
92
+ &.is-boxed
93
+ a
94
+ border: 1px solid transparent
95
+ border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
96
+ &:hover
97
+ background-color: $tabs-boxed-link-hover-background-color
98
+ border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
99
+ li
100
+ &.is-active
101
+ a
102
+ background-color: $tabs-boxed-link-active-background-color
103
+ border-color: $tabs-boxed-link-active-border-color
104
+ border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
105
+ &.is-fullwidth
106
+ li
107
+ flex-grow: 1
108
+ flex-shrink: 0
109
+ &.is-toggle
110
+ a
111
+ border-color: $tabs-toggle-link-border-color
112
+ border-style: $tabs-toggle-link-border-style
113
+ border-width: $tabs-toggle-link-border-width
114
+ margin-bottom: 0
115
+ position: relative
116
+ &:hover
117
+ background-color: $tabs-toggle-link-hover-background-color
118
+ border-color: $tabs-toggle-link-hover-border-color
119
+ z-index: 2
120
+ li
121
+ & + li
122
+ margin-left: -#{$tabs-toggle-link-border-width}
123
+ &:first-child a
124
+ border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
125
+ &:last-child a
126
+ border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
127
+ &.is-active
128
+ a
129
+ background-color: $tabs-toggle-link-active-background-color
130
+ border-color: $tabs-toggle-link-active-border-color
131
+ color: $tabs-toggle-link-active-color
132
+ z-index: 1
133
+ ul
134
+ border-bottom: none
135
+ &.is-toggle-rounded
136
+ li
137
+ &:first-child a
138
+ border-bottom-left-radius: $radius-rounded
139
+ border-top-left-radius: $radius-rounded
140
+ padding-left: 1.25em
141
+ &:last-child a
142
+ border-bottom-right-radius: $radius-rounded
143
+ border-top-right-radius: $radius-rounded
144
+ padding-right: 1.25em
145
+ // Sizes
146
+ &.is-small
147
+ font-size: $size-small
148
+ &.is-medium
149
+ font-size: $size-medium
150
+ &.is-large
151
+ font-size: $size-large
@@ -0,0 +1,16 @@
1
+ @charset "utf-8"
2
+
3
+ @import "box.sass"
4
+ @import "button.sass"
5
+ @import "container.sass"
6
+ @import "content.sass"
7
+ @import "form.sass"
8
+ @import "icon.sass"
9
+ @import "image.sass"
10
+ @import "notification.sass"
11
+ @import "progress.sass"
12
+ @import "table.sass"
13
+ @import "tag.sass"
14
+ @import "title.sass"
15
+
16
+ @import "other.sass"
@@ -0,0 +1,24 @@
1
+ $box-color: $text !default
2
+ $box-background-color: $white !default
3
+ $box-radius: $radius-large !default
4
+ $box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
5
+ $box-padding: 1.25rem !default
6
+
7
+ $box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
8
+ $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
9
+
10
+ .box
11
+ @extend %block
12
+ background-color: $box-background-color
13
+ border-radius: $box-radius
14
+ box-shadow: $box-shadow
15
+ color: $box-color
16
+ display: block
17
+ padding: $box-padding
18
+
19
+ a.box
20
+ &:hover,
21
+ &:focus
22
+ box-shadow: $box-link-hover-shadow
23
+ &:active
24
+ box-shadow: $box-link-active-shadow
@@ -0,0 +1,255 @@
1
+ $button-color: $grey-darker !default
2
+ $button-background-color: $white !default
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
9
+
10
+ $button-hover-color: $link-hover !default
11
+ $button-hover-border-color: $link-hover-border !default
12
+
13
+ $button-focus-color: $link-focus !default
14
+ $button-focus-border-color: $link-focus-border !default
15
+ $button-focus-box-shadow-size: 0 0 0 0.125em !default
16
+ $button-focus-box-shadow-color: rgba($link, 0.25) !default
17
+
18
+ $button-active-color: $link-active !default
19
+ $button-active-border-color: $link-active-border !default
20
+
21
+ $button-text-color: $text !default
22
+ $button-text-hover-background-color: $background !default
23
+ $button-text-hover-color: $text-strong !default
24
+
25
+ $button-disabled-background-color: $white !default
26
+ $button-disabled-border-color: $grey-lighter !default
27
+ $button-disabled-shadow: none !default
28
+ $button-disabled-opacity: 0.5 !default
29
+
30
+ $button-static-color: $grey !default
31
+ $button-static-background-color: $white-ter !default
32
+ $button-static-border-color: $grey-lighter !default
33
+
34
+ // The button sizes use mixins so they can be used at different breakpoints
35
+ =button-small
36
+ border-radius: $radius-small
37
+ font-size: $size-small
38
+ =button-medium
39
+ font-size: $size-medium
40
+ =button-large
41
+ font-size: $size-large
42
+
43
+ .button
44
+ @extend %control
45
+ @extend %unselectable
46
+ background-color: $button-background-color
47
+ border-color: $button-border-color
48
+ border-width: $button-border-width
49
+ color: $button-color
50
+ cursor: pointer
51
+ justify-content: center
52
+ padding-bottom: $button-padding-vertical
53
+ padding-left: $button-padding-horizontal
54
+ padding-right: $button-padding-horizontal
55
+ padding-top: $button-padding-vertical
56
+ text-align: center
57
+ white-space: nowrap
58
+ strong
59
+ color: inherit
60
+ .icon
61
+ &,
62
+ &.is-small,
63
+ &.is-medium,
64
+ &.is-large
65
+ height: 1.5em
66
+ width: 1.5em
67
+ &:first-child:not(:last-child)
68
+ margin-left: calc(-0.375em - #{$button-border-width})
69
+ margin-right: 0.1875em
70
+ &:last-child:not(:first-child)
71
+ margin-left: 0.1875em
72
+ margin-right: calc(-0.375em - #{$button-border-width})
73
+ &:first-child:last-child
74
+ margin-left: calc(-0.375em - #{$button-border-width})
75
+ margin-right: calc(-0.375em - #{$button-border-width})
76
+ // States
77
+ &:hover,
78
+ &.is-hovered
79
+ border-color: $button-hover-border-color
80
+ color: $button-hover-color
81
+ &:focus,
82
+ &.is-focused
83
+ border-color: $button-focus-border-color
84
+ color: $button-focus-color
85
+ &:not(:active)
86
+ box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
87
+ &:active,
88
+ &.is-active
89
+ border-color: $button-active-border-color
90
+ color: $button-active-color
91
+ // Colors
92
+ &.is-text
93
+ background-color: transparent
94
+ border-color: transparent
95
+ color: $button-text-color
96
+ text-decoration: underline
97
+ &:hover,
98
+ &.is-hovered,
99
+ &:focus,
100
+ &.is-focused
101
+ background-color: $button-text-hover-background-color
102
+ color: $button-text-hover-color
103
+ &:active,
104
+ &.is-active
105
+ background-color: darken($button-text-hover-background-color, 5%)
106
+ color: $button-text-hover-color
107
+ &[disabled]
108
+ background-color: transparent
109
+ border-color: transparent
110
+ box-shadow: none
111
+ @each $name, $pair in $colors
112
+ $color: nth($pair, 1)
113
+ $color-invert: nth($pair, 2)
114
+ &.is-#{$name}
115
+ background-color: $color
116
+ border-color: transparent
117
+ color: $color-invert
118
+ &:hover,
119
+ &.is-hovered
120
+ background-color: darken($color, 2.5%)
121
+ border-color: transparent
122
+ color: $color-invert
123
+ &:focus,
124
+ &.is-focused
125
+ border-color: transparent
126
+ color: $color-invert
127
+ &:not(:active)
128
+ box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
129
+ &:active,
130
+ &.is-active
131
+ background-color: darken($color, 5%)
132
+ border-color: transparent
133
+ color: $color-invert
134
+ &[disabled]
135
+ background-color: $color
136
+ border-color: transparent
137
+ box-shadow: none
138
+ &.is-inverted
139
+ background-color: $color-invert
140
+ color: $color
141
+ &:hover
142
+ background-color: darken($color-invert, 5%)
143
+ &[disabled]
144
+ background-color: $color-invert
145
+ border-color: transparent
146
+ box-shadow: none
147
+ color: $color
148
+ &.is-loading
149
+ &::after
150
+ border-color: transparent transparent $color-invert $color-invert !important
151
+ &.is-outlined
152
+ background-color: transparent
153
+ border-color: $color
154
+ color: $color
155
+ &:hover,
156
+ &:focus
157
+ background-color: $color
158
+ border-color: $color
159
+ color: $color-invert
160
+ &.is-loading
161
+ &::after
162
+ border-color: transparent transparent $color $color !important
163
+ &[disabled]
164
+ background-color: transparent
165
+ border-color: $color
166
+ box-shadow: none
167
+ color: $color
168
+ &.is-inverted.is-outlined
169
+ background-color: transparent
170
+ border-color: $color-invert
171
+ color: $color-invert
172
+ &:hover,
173
+ &:focus
174
+ background-color: $color-invert
175
+ color: $color
176
+ &[disabled]
177
+ background-color: transparent
178
+ border-color: $color-invert
179
+ box-shadow: none
180
+ color: $color-invert
181
+ // Sizes
182
+ &.is-small
183
+ +button-small
184
+ &.is-medium
185
+ +button-medium
186
+ &.is-large
187
+ +button-large
188
+ // Modifiers
189
+ &[disabled]
190
+ background-color: $button-disabled-background-color
191
+ border-color: $button-disabled-border-color
192
+ box-shadow: $button-disabled-shadow
193
+ opacity: $button-disabled-opacity
194
+ &.is-fullwidth
195
+ display: flex
196
+ width: 100%
197
+ &.is-loading
198
+ color: transparent !important
199
+ pointer-events: none
200
+ &::after
201
+ @extend %loader
202
+ +center(1em)
203
+ position: absolute !important
204
+ &.is-static
205
+ background-color: $button-static-background-color
206
+ border-color: $button-static-border-color
207
+ color: $button-static-color
208
+ box-shadow: none
209
+ pointer-events: none
210
+ &.is-rounded
211
+ border-radius: $radius-rounded
212
+ padding-left: 1em
213
+ padding-right: 1em
214
+
215
+ .buttons
216
+ align-items: center
217
+ display: flex
218
+ flex-wrap: wrap
219
+ justify-content: flex-start
220
+ .button
221
+ margin-bottom: 0.5rem
222
+ &:not(:last-child):not(.is-fullwidth)
223
+ margin-right: 0.5rem
224
+ &:last-child
225
+ margin-bottom: -0.5rem
226
+ &:not(:last-child)
227
+ margin-bottom: 1rem
228
+ &.has-addons
229
+ .button
230
+ &:not(:first-child)
231
+ border-bottom-left-radius: 0
232
+ border-top-left-radius: 0
233
+ &:not(:last-child)
234
+ border-bottom-right-radius: 0
235
+ border-top-right-radius: 0
236
+ margin-right: -1px
237
+ &:last-child
238
+ margin-right: 0
239
+ &:hover,
240
+ &.is-hovered
241
+ z-index: 2
242
+ &:focus,
243
+ &.is-focused,
244
+ &:active,
245
+ &.is-active,
246
+ &.is-selected
247
+ z-index: 3
248
+ &:hover
249
+ z-index: 4
250
+ &.is-expanded
251
+ flex-grow: 1
252
+ &.is-centered
253
+ justify-content: center
254
+ &.is-right
255
+ justify-content: flex-end