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,414 @@
1
+ $navbar-background-color: $white !default
2
+ $navbar-box-shadow-size: 0 2px 0 0 !default
3
+ $navbar-box-shadow-color: $background !default
4
+ $navbar-height: 3.25rem !default
5
+ $navbar-padding-vertical: 1rem !default
6
+ $navbar-padding-horizontal: 2rem !default
7
+ $navbar-z: 30 !default
8
+ $navbar-fixed-z: 30 !default
9
+
10
+ $navbar-item-color: $grey-dark !default
11
+ $navbar-item-hover-color: $link !default
12
+ $navbar-item-hover-background-color: $white-bis !default
13
+ $navbar-item-active-color: $black !default
14
+ $navbar-item-active-background-color: transparent !default
15
+ $navbar-item-img-max-height: 1.75rem !default
16
+
17
+ $navbar-tab-hover-background-color: transparent !default
18
+ $navbar-tab-hover-border-bottom-color: $link !default
19
+ $navbar-tab-active-color: $link !default
20
+ $navbar-tab-active-background-color: transparent !default
21
+ $navbar-tab-active-border-bottom-color: $link !default
22
+ $navbar-tab-active-border-bottom-style: solid !default
23
+ $navbar-tab-active-border-bottom-width: 3px !default
24
+
25
+ $navbar-dropdown-background-color: $white !default
26
+ $navbar-dropdown-border-top: 2px solid $border !default
27
+ $navbar-dropdown-offset: -4px !default
28
+ $navbar-dropdown-arrow: $link !default
29
+ $navbar-dropdown-radius: $radius-large !default
30
+ $navbar-dropdown-z: 20 !default
31
+
32
+ $navbar-dropdown-boxed-radius: $radius-large !default
33
+ $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
34
+
35
+ $navbar-dropdown-item-hover-color: $black !default
36
+ $navbar-dropdown-item-hover-background-color: $background !default
37
+ $navbar-dropdown-item-active-color: $link !default
38
+ $navbar-dropdown-item-active-background-color: $background !default
39
+
40
+ $navbar-divider-background-color: $background !default
41
+ $navbar-divider-height: 2px !default
42
+
43
+ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
44
+
45
+ =navbar-fixed
46
+ left: 0
47
+ position: fixed
48
+ right: 0
49
+ z-index: $navbar-fixed-z
50
+
51
+ .navbar
52
+ background-color: $navbar-background-color
53
+ min-height: $navbar-height
54
+ position: relative
55
+ z-index: $navbar-z
56
+ @each $name, $pair in $colors
57
+ $color: nth($pair, 1)
58
+ $color-invert: nth($pair, 2)
59
+ &.is-#{$name}
60
+ background-color: $color
61
+ color: $color-invert
62
+ .navbar-brand
63
+ & > .navbar-item,
64
+ .navbar-link
65
+ color: $color-invert
66
+ & > a.navbar-item,
67
+ .navbar-link
68
+ &:hover,
69
+ &.is-active
70
+ background-color: darken($color, 5%)
71
+ color: $color-invert
72
+ .navbar-link
73
+ &::after
74
+ border-color: $color-invert
75
+ +desktop
76
+ .navbar-start,
77
+ .navbar-end
78
+ & > .navbar-item,
79
+ .navbar-link
80
+ color: $color-invert
81
+ & > a.navbar-item,
82
+ .navbar-link
83
+ &:hover,
84
+ &.is-active
85
+ background-color: darken($color, 5%)
86
+ color: $color-invert
87
+ .navbar-link
88
+ &::after
89
+ border-color: $color-invert
90
+ .navbar-item.has-dropdown:hover .navbar-link,
91
+ .navbar-item.has-dropdown.is-active .navbar-link
92
+ background-color: darken($color, 5%)
93
+ color: $color-invert
94
+ .navbar-dropdown
95
+ a.navbar-item
96
+ &.is-active
97
+ background-color: $color
98
+ color: $color-invert
99
+ & > .container
100
+ align-items: stretch
101
+ display: flex
102
+ min-height: $navbar-height
103
+ width: 100%
104
+ &.has-shadow
105
+ box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
106
+ &.is-fixed-bottom,
107
+ &.is-fixed-top
108
+ +navbar-fixed
109
+ &.is-fixed-bottom
110
+ bottom: 0
111
+ &.has-shadow
112
+ box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
113
+ &.is-fixed-top
114
+ top: 0
115
+
116
+ html,
117
+ body
118
+ &.has-navbar-fixed-top
119
+ padding-top: $navbar-height
120
+ &.has-navbar-fixed-bottom
121
+ padding-bottom: $navbar-height
122
+
123
+ .navbar-brand,
124
+ .navbar-tabs
125
+ align-items: stretch
126
+ display: flex
127
+ flex-shrink: 0
128
+ min-height: $navbar-height
129
+
130
+ .navbar-brand
131
+ a.navbar-item
132
+ &:hover
133
+ background-color: transparent
134
+
135
+ .navbar-tabs
136
+ +overflow-touch
137
+ max-width: 100vw
138
+ overflow-x: auto
139
+ overflow-y: hidden
140
+
141
+ .navbar-burger
142
+ +hamburger($navbar-height)
143
+ margin-left: auto
144
+
145
+ .navbar-menu
146
+ display: none
147
+
148
+ .navbar-item,
149
+ .navbar-link
150
+ color: $navbar-item-color
151
+ display: block
152
+ line-height: 1.5
153
+ padding: 0.5rem 0.75rem
154
+ position: relative
155
+ .icon
156
+ &:only-child
157
+ margin-left: -0.25rem
158
+ margin-right: -0.25rem
159
+
160
+ a.navbar-item,
161
+ .navbar-link
162
+ cursor: pointer
163
+ &:hover,
164
+ &.is-active
165
+ background-color: $navbar-item-hover-background-color
166
+ color: $navbar-item-hover-color
167
+
168
+ .navbar-item
169
+ display: block
170
+ flex-grow: 0
171
+ flex-shrink: 0
172
+ img
173
+ max-height: $navbar-item-img-max-height
174
+ &.has-dropdown
175
+ padding: 0
176
+ &.is-expanded
177
+ flex-grow: 1
178
+ flex-shrink: 1
179
+ &.is-tab
180
+ border-bottom: 1px solid transparent
181
+ min-height: $navbar-height
182
+ padding-bottom: calc(0.5rem - 1px)
183
+ &:hover
184
+ background-color: $navbar-tab-hover-background-color
185
+ border-bottom-color: $navbar-tab-hover-border-bottom-color
186
+ &.is-active
187
+ background-color: $navbar-tab-active-background-color
188
+ border-bottom-color: $navbar-tab-active-border-bottom-color
189
+ border-bottom-style: $navbar-tab-active-border-bottom-style
190
+ border-bottom-width: $navbar-tab-active-border-bottom-width
191
+ color: $navbar-tab-active-color
192
+ padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
193
+
194
+ .navbar-content
195
+ flex-grow: 1
196
+ flex-shrink: 1
197
+
198
+ .navbar-link
199
+ padding-right: 2.5em
200
+ &::after
201
+ +arrow($navbar-dropdown-arrow)
202
+ margin-top: -0.375em
203
+ right: 1.125em
204
+
205
+ .navbar-dropdown
206
+ font-size: 0.875rem
207
+ padding-bottom: 0.5rem
208
+ padding-top: 0.5rem
209
+ .navbar-item
210
+ padding-left: 1.5rem
211
+ padding-right: 1.5rem
212
+
213
+ .navbar-divider
214
+ background-color: $navbar-divider-background-color
215
+ border: none
216
+ display: none
217
+ height: $navbar-divider-height
218
+ margin: 0.5rem 0
219
+
220
+ +touch
221
+ .navbar > .container
222
+ display: block
223
+ .navbar-brand,
224
+ .navbar-tabs
225
+ .navbar-item
226
+ align-items: center
227
+ display: flex
228
+ .navbar-link
229
+ &::after
230
+ display: none
231
+ .navbar-menu
232
+ background-color: $navbar-background-color
233
+ box-shadow: 0 8px 16px rgba($black, 0.1)
234
+ padding: 0.5rem 0
235
+ &.is-active
236
+ display: block
237
+ // Fixed navbar
238
+ .navbar
239
+ &.is-fixed-bottom-touch,
240
+ &.is-fixed-top-touch
241
+ +navbar-fixed
242
+ &.is-fixed-bottom-touch
243
+ bottom: 0
244
+ &.has-shadow
245
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
246
+ &.is-fixed-top-touch
247
+ top: 0
248
+ &.is-fixed-top,
249
+ &.is-fixed-top-touch
250
+ .navbar-menu
251
+ +overflow-touch
252
+ max-height: calc(100vh - #{$navbar-height})
253
+ overflow: auto
254
+ html,
255
+ body
256
+ &.has-navbar-fixed-top-touch
257
+ padding-top: $navbar-height
258
+ &.has-navbar-fixed-bottom-touch
259
+ padding-bottom: $navbar-height
260
+
261
+ +desktop
262
+ .navbar,
263
+ .navbar-menu,
264
+ .navbar-start,
265
+ .navbar-end
266
+ align-items: stretch
267
+ display: flex
268
+ .navbar
269
+ min-height: $navbar-height
270
+ &.is-spaced
271
+ padding: $navbar-padding-vertical $navbar-padding-horizontal
272
+ .navbar-start,
273
+ .navbar-end
274
+ align-items: center
275
+ a.navbar-item,
276
+ .navbar-link
277
+ border-radius: $radius
278
+ &.is-transparent
279
+ a.navbar-item,
280
+ .navbar-link
281
+ &:hover,
282
+ &.is-active
283
+ background-color: transparent !important
284
+ .navbar-item.has-dropdown
285
+ &.is-active,
286
+ &.is-hoverable:hover
287
+ .navbar-link
288
+ background-color: transparent !important
289
+ .navbar-dropdown
290
+ a.navbar-item
291
+ &:hover
292
+ background-color: $navbar-dropdown-item-hover-background-color
293
+ color: $navbar-dropdown-item-hover-color
294
+ &.is-active
295
+ background-color: $navbar-dropdown-item-active-background-color
296
+ color: $navbar-dropdown-item-active-color
297
+ .navbar-burger
298
+ display: none
299
+ .navbar-item,
300
+ .navbar-link
301
+ align-items: center
302
+ display: flex
303
+ .navbar-item
304
+ display: flex
305
+ &.has-dropdown
306
+ align-items: stretch
307
+ &.has-dropdown-up
308
+ .navbar-link::after
309
+ transform: rotate(135deg) translate(0.25em, -0.25em)
310
+ .navbar-dropdown
311
+ border-bottom: $navbar-dropdown-border-top
312
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
313
+ border-top: none
314
+ bottom: 100%
315
+ box-shadow: 0 -8px 8px rgba($black, 0.1)
316
+ top: auto
317
+ &.is-active,
318
+ &.is-hoverable:hover
319
+ .navbar-dropdown
320
+ display: block
321
+ .navbar.is-spaced &,
322
+ &.is-boxed
323
+ opacity: 1
324
+ pointer-events: auto
325
+ transform: translateY(0)
326
+ .navbar-menu
327
+ flex-grow: 1
328
+ flex-shrink: 0
329
+ .navbar-start
330
+ justify-content: flex-start
331
+ margin-right: auto
332
+ .navbar-end
333
+ justify-content: flex-end
334
+ margin-left: auto
335
+ .navbar-dropdown
336
+ background-color: $navbar-dropdown-background-color
337
+ border-bottom-left-radius: $navbar-dropdown-radius
338
+ border-bottom-right-radius: $navbar-dropdown-radius
339
+ border-top: $navbar-dropdown-border-top
340
+ box-shadow: 0 8px 8px rgba($black, 0.1)
341
+ display: none
342
+ font-size: 0.875rem
343
+ left: 0
344
+ min-width: 100%
345
+ position: absolute
346
+ top: 100%
347
+ z-index: $navbar-dropdown-z
348
+ .navbar-item
349
+ padding: 0.375rem 1rem
350
+ white-space: nowrap
351
+ a.navbar-item
352
+ padding-right: 3rem
353
+ &:hover
354
+ background-color: $navbar-dropdown-item-hover-background-color
355
+ color: $navbar-dropdown-item-hover-color
356
+ &.is-active
357
+ background-color: $navbar-dropdown-item-active-background-color
358
+ color: $navbar-dropdown-item-active-color
359
+ .navbar.is-spaced &,
360
+ &.is-boxed
361
+ border-radius: $navbar-dropdown-boxed-radius
362
+ border-top: none
363
+ box-shadow: $navbar-dropdown-boxed-shadow
364
+ display: block
365
+ opacity: 0
366
+ pointer-events: none
367
+ top: calc(100% + (#{$navbar-dropdown-offset}))
368
+ transform: translateY(-5px)
369
+ transition-duration: $speed
370
+ transition-property: opacity, transform
371
+ &.is-right
372
+ left: auto
373
+ right: 0
374
+ .navbar-divider
375
+ display: block
376
+ .navbar > .container,
377
+ .container > .navbar
378
+ .navbar-brand
379
+ margin-left: -1rem
380
+ .navbar-menu
381
+ margin-right: -1rem
382
+ // Fixed navbar
383
+ .navbar
384
+ &.is-fixed-bottom-desktop,
385
+ &.is-fixed-top-desktop
386
+ +navbar-fixed
387
+ &.is-fixed-bottom-desktop
388
+ bottom: 0
389
+ &.has-shadow
390
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
391
+ &.is-fixed-top-desktop
392
+ top: 0
393
+ html,
394
+ body
395
+ &.has-navbar-fixed-top-desktop
396
+ padding-top: $navbar-height
397
+ &.has-navbar-fixed-bottom-desktop
398
+ padding-bottom: $navbar-height
399
+ &.has-spaced-navbar-fixed-top
400
+ padding-top: $navbar-height + ($navbar-padding-vertical * 2)
401
+ &.has-spaced-navbar-fixed-bottom
402
+ padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
403
+ // Hover/Active states
404
+ a.navbar-item,
405
+ .navbar-link
406
+ &.is-active
407
+ color: $navbar-item-active-color
408
+ &.is-active:not(:hover)
409
+ background-color: $navbar-item-active-background-color
410
+ .navbar-item.has-dropdown
411
+ &:hover,
412
+ &.is-active
413
+ .navbar-link
414
+ background-color: $navbar-item-hover-background-color
@@ -0,0 +1,143 @@
1
+ $pagination-color: $grey-darker !default
2
+ $pagination-border-color: $grey-lighter !default
3
+ $pagination-margin: -0.25rem !default
4
+
5
+ $pagination-hover-color: $link-hover !default
6
+ $pagination-hover-border-color: $link-hover-border !default
7
+
8
+ $pagination-focus-color: $link-focus !default
9
+ $pagination-focus-border-color: $link-focus-border !default
10
+
11
+ $pagination-active-color: $link-active !default
12
+ $pagination-active-border-color: $link-active-border !default
13
+
14
+ $pagination-disabled-color: $grey !default
15
+ $pagination-disabled-background-color: $grey-lighter !default
16
+ $pagination-disabled-border-color: $grey-lighter !default
17
+
18
+ $pagination-current-color: $link-invert !default
19
+ $pagination-current-background-color: $link !default
20
+ $pagination-current-border-color: $link !default
21
+
22
+ $pagination-ellipsis-color: $grey-light !default
23
+
24
+ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
25
+
26
+ .pagination
27
+ font-size: $size-normal
28
+ margin: $pagination-margin
29
+ // Sizes
30
+ &.is-small
31
+ font-size: $size-small
32
+ &.is-medium
33
+ font-size: $size-medium
34
+ &.is-large
35
+ font-size: $size-large
36
+ &.is-rounded
37
+ .pagination-previous,
38
+ .pagination-next
39
+ padding-left: 1em
40
+ padding-right: 1em
41
+ border-radius: $radius-rounded
42
+ .pagination-link
43
+ border-radius: $radius-rounded
44
+
45
+ .pagination,
46
+ .pagination-list
47
+ align-items: center
48
+ display: flex
49
+ justify-content: center
50
+ text-align: center
51
+
52
+ .pagination-previous,
53
+ .pagination-next,
54
+ .pagination-link,
55
+ .pagination-ellipsis
56
+ +control
57
+ +unselectable
58
+ font-size: 1em
59
+ padding-left: 0.5em
60
+ padding-right: 0.5em
61
+ justify-content: center
62
+ margin: 0.25rem
63
+ text-align: center
64
+
65
+ .pagination-previous,
66
+ .pagination-next,
67
+ .pagination-link
68
+ border-color: $pagination-border-color
69
+ color: $pagination-color
70
+ min-width: 2.25em
71
+ &:hover
72
+ border-color: $pagination-hover-border-color
73
+ color: $pagination-hover-color
74
+ &:focus
75
+ border-color: $pagination-focus-border-color
76
+ &:active
77
+ box-shadow: $pagination-shadow-inset
78
+ &[disabled]
79
+ background-color: $pagination-disabled-background-color
80
+ border-color: $pagination-disabled-border-color
81
+ box-shadow: none
82
+ color: $pagination-disabled-color
83
+ opacity: 0.5
84
+
85
+ .pagination-previous,
86
+ .pagination-next
87
+ padding-left: 0.75em
88
+ padding-right: 0.75em
89
+ white-space: nowrap
90
+
91
+ .pagination-link
92
+ &.is-current
93
+ background-color: $pagination-current-background-color
94
+ border-color: $pagination-current-border-color
95
+ color: $pagination-current-color
96
+
97
+ .pagination-ellipsis
98
+ color: $pagination-ellipsis-color
99
+ pointer-events: none
100
+
101
+ .pagination-list
102
+ flex-wrap: wrap
103
+
104
+ +mobile
105
+ .pagination
106
+ flex-wrap: wrap
107
+ .pagination-previous,
108
+ .pagination-next
109
+ flex-grow: 1
110
+ flex-shrink: 1
111
+ .pagination-list
112
+ li
113
+ flex-grow: 1
114
+ flex-shrink: 1
115
+
116
+ +tablet
117
+ .pagination-list
118
+ flex-grow: 1
119
+ flex-shrink: 1
120
+ justify-content: flex-start
121
+ order: 1
122
+ .pagination-previous
123
+ order: 2
124
+ .pagination-next
125
+ order: 3
126
+ .pagination
127
+ justify-content: space-between
128
+ &.is-centered
129
+ .pagination-previous
130
+ order: 1
131
+ .pagination-list
132
+ justify-content: center
133
+ order: 2
134
+ .pagination-next
135
+ order: 3
136
+ &.is-right
137
+ .pagination-previous
138
+ order: 1
139
+ .pagination-next
140
+ order: 2
141
+ .pagination-list
142
+ justify-content: flex-end
143
+ 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