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,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