jekyll-bulma 0.0.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.
Files changed (54) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +39 -0
  4. data/_layouts/default.html +1 -0
  5. data/_layouts/page.html +5 -0
  6. data/_layouts/post.html +5 -0
  7. data/_sass/base/_all.sass +5 -0
  8. data/_sass/base/generic.sass +127 -0
  9. data/_sass/base/helpers.sass +251 -0
  10. data/_sass/base/minireset.sass +79 -0
  11. data/_sass/bulma.sass +8 -0
  12. data/_sass/components/_all.sass +14 -0
  13. data/_sass/components/breadcrumb.sass +75 -0
  14. data/_sass/components/card.sass +74 -0
  15. data/_sass/components/dropdown.sass +74 -0
  16. data/_sass/components/level.sass +75 -0
  17. data/_sass/components/media.sass +44 -0
  18. data/_sass/components/menu.sass +50 -0
  19. data/_sass/components/message.sass +86 -0
  20. data/_sass/components/modal.sass +111 -0
  21. data/_sass/components/navbar.sass +414 -0
  22. data/_sass/components/pagination.sass +143 -0
  23. data/_sass/components/panel.sass +101 -0
  24. data/_sass/components/tabs.sass +151 -0
  25. data/_sass/elements/_all.sass +16 -0
  26. data/_sass/elements/box.sass +24 -0
  27. data/_sass/elements/button.sass +255 -0
  28. data/_sass/elements/container.sass +25 -0
  29. data/_sass/elements/content.sass +141 -0
  30. data/_sass/elements/form.sass +625 -0
  31. data/_sass/elements/icon.sass +21 -0
  32. data/_sass/elements/image.sass +68 -0
  33. data/_sass/elements/notification.sass +35 -0
  34. data/_sass/elements/other.sass +39 -0
  35. data/_sass/elements/progress.sass +40 -0
  36. data/_sass/elements/table.sass +117 -0
  37. data/_sass/elements/tag.sass +111 -0
  38. data/_sass/elements/title.sass +64 -0
  39. data/_sass/grid/_all.sass +4 -0
  40. data/_sass/grid/columns.sass +477 -0
  41. data/_sass/grid/tiles.sass +32 -0
  42. data/_sass/layout/_all.sass +5 -0
  43. data/_sass/layout/footer.sass +5 -0
  44. data/_sass/layout/hero.sass +155 -0
  45. data/_sass/layout/section.sass +13 -0
  46. data/_sass/utilities/_all.sass +8 -0
  47. data/_sass/utilities/animations.sass +5 -0
  48. data/_sass/utilities/controls.sass +46 -0
  49. data/_sass/utilities/derived-variables.sass +84 -0
  50. data/_sass/utilities/functions.sass +62 -0
  51. data/_sass/utilities/initial-variables.sass +72 -0
  52. data/_sass/utilities/mixins.sass +266 -0
  53. data/assets/main.scss +14 -0
  54. metadata +138 -0
@@ -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
+ +block
31
+ +overflow-touch
32
+ +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
+ +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
+ +control
45
+ +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
+ +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)
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
@@ -0,0 +1,25 @@
1
+ .container
2
+ margin: 0 auto
3
+ position: relative
4
+ +desktop
5
+ max-width: $desktop - (2 * $gap)
6
+ width: $desktop - (2 * $gap)
7
+ &.is-fluid
8
+ margin-left: $gap
9
+ margin-right: $gap
10
+ max-width: none
11
+ width: auto
12
+ +until-widescreen
13
+ &.is-widescreen
14
+ max-width: $widescreen - (2 * $gap)
15
+ width: auto
16
+ +until-fullhd
17
+ &.is-fullhd
18
+ max-width: $fullhd - (2 * $gap)
19
+ width: auto
20
+ +widescreen
21
+ max-width: $widescreen - (2 * $gap)
22
+ width: $widescreen - (2 * $gap)
23
+ +fullhd
24
+ max-width: $fullhd - (2 * $gap)
25
+ width: $fullhd - (2 * $gap)
@@ -0,0 +1,141 @@
1
+ $content-heading-color: $text-strong !default
2
+ $content-heading-weight: $weight-semibold !default
3
+ $content-heading-line-height: 1.125 !default
4
+
5
+ $content-blockquote-background-color: $background !default
6
+ $content-blockquote-border-left: 5px solid $border !default
7
+ $content-blockquote-padding: 1.25em 1.5em !default
8
+
9
+ $content-pre-padding: 1.25em 1.5em !default
10
+
11
+ $content-table-cell-border: 1px solid $border !default
12
+ $content-table-cell-border-width: 0 0 1px !default
13
+ $content-table-cell-padding: 0.5em 0.75em !default
14
+ $content-table-cell-heading-color: $text-strong !default
15
+ $content-table-head-cell-border-width: 0 0 2px !default
16
+ $content-table-head-cell-color: $text-strong !default
17
+ $content-table-foot-cell-border-width: 2px 0 0 !default
18
+ $content-table-foot-cell-color: $text-strong !default
19
+
20
+ .content
21
+ +block
22
+ // Inline
23
+ li + li
24
+ margin-top: 0.25em
25
+ // Block
26
+ p,
27
+ dl,
28
+ ol,
29
+ ul,
30
+ blockquote,
31
+ pre,
32
+ table
33
+ &:not(:last-child)
34
+ margin-bottom: 1em
35
+ h1,
36
+ h2,
37
+ h3,
38
+ h4,
39
+ h5,
40
+ h6
41
+ color: $content-heading-color
42
+ font-weight: $content-heading-weight
43
+ line-height: $content-heading-line-height
44
+ h1
45
+ font-size: 2em
46
+ margin-bottom: 0.5em
47
+ &:not(:first-child)
48
+ margin-top: 1em
49
+ h2
50
+ font-size: 1.75em
51
+ margin-bottom: 0.5714em
52
+ &:not(:first-child)
53
+ margin-top: 1.1428em
54
+ h3
55
+ font-size: 1.5em
56
+ margin-bottom: 0.6666em
57
+ &:not(:first-child)
58
+ margin-top: 1.3333em
59
+ h4
60
+ font-size: 1.25em
61
+ margin-bottom: 0.8em
62
+ h5
63
+ font-size: 1.125em
64
+ margin-bottom: 0.8888em
65
+ h6
66
+ font-size: 1em
67
+ margin-bottom: 1em
68
+ blockquote
69
+ background-color: $content-blockquote-background-color
70
+ border-left: $content-blockquote-border-left
71
+ padding: $content-blockquote-padding
72
+ ol
73
+ list-style: decimal outside
74
+ margin-left: 2em
75
+ margin-top: 1em
76
+ ul
77
+ list-style: disc outside
78
+ margin-left: 2em
79
+ margin-top: 1em
80
+ ul
81
+ list-style-type: circle
82
+ margin-top: 0.5em
83
+ ul
84
+ list-style-type: square
85
+ dd
86
+ margin-left: 2em
87
+ figure
88
+ margin-left: 2em
89
+ margin-right: 2em
90
+ text-align: center
91
+ &:not(:first-child)
92
+ margin-top: 2em
93
+ &:not(:last-child)
94
+ margin-bottom: 2em
95
+ img
96
+ display: inline-block
97
+ figcaption
98
+ font-style: italic
99
+ pre
100
+ +overflow-touch
101
+ overflow-x: auto
102
+ padding: $content-pre-padding
103
+ white-space: pre
104
+ word-wrap: normal
105
+ sup,
106
+ sub
107
+ font-size: 75%
108
+ table
109
+ width: 100%
110
+ td,
111
+ th
112
+ border: $content-table-cell-border
113
+ border-width: $content-table-cell-border-width
114
+ padding: $content-table-cell-padding
115
+ vertical-align: top
116
+ th
117
+ color: $content-table-cell-heading-color
118
+ text-align: left
119
+ thead
120
+ td,
121
+ th
122
+ border-width: $content-table-head-cell-border-width
123
+ color: $content-table-head-cell-color
124
+ tfoot
125
+ td,
126
+ th
127
+ border-width: $content-table-foot-cell-border-width
128
+ color: $content-table-foot-cell-color
129
+ tbody
130
+ tr
131
+ &:last-child
132
+ td,
133
+ th
134
+ border-bottom-width: 0
135
+ // Sizes
136
+ &.is-small
137
+ font-size: $size-small
138
+ &.is-medium
139
+ font-size: $size-medium
140
+ &.is-large
141
+ font-size: $size-large