jekyll-bulma 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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