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,625 @@
1
+ $input-color: $grey-darker !default
2
+ $input-background-color: $white !default
3
+ $input-border-color: $grey-lighter !default
4
+ $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
5
+
6
+ $input-hover-color: $grey-darker !default
7
+ $input-hover-border-color: $grey-light !default
8
+
9
+ $input-focus-color: $grey-darker !default
10
+ $input-focus-border-color: $link !default
11
+ $input-focus-box-shadow-size: 0 0 0 0.125em !default
12
+ $input-focus-box-shadow-color: rgba($link, 0.25) !default
13
+
14
+ $input-disabled-color: $text-light !default
15
+ $input-disabled-background-color: $background !default
16
+ $input-disabled-border-color: $background !default
17
+
18
+ $input-arrow: $link !default
19
+
20
+ $input-icon-color: $grey-lighter !default
21
+ $input-icon-active-color: $grey !default
22
+
23
+ $input-radius: $radius !default
24
+
25
+ $file-border-color: $border !default
26
+ $file-radius: $radius !default
27
+
28
+ $file-cta-background-color: $white-ter !default
29
+ $file-cta-color: $grey-dark !default
30
+ $file-cta-hover-color: $grey-darker !default
31
+ $file-cta-active-color: $grey-darker !default
32
+
33
+ $file-name-border-color: $border !default
34
+ $file-name-border-style: solid !default
35
+ $file-name-border-width: 1px 1px 1px 0 !default
36
+ $file-name-max-width: 16em !default
37
+
38
+ $label-color: $grey-darker !default
39
+ $label-weight: $weight-bold !default
40
+
41
+ $help-size: $size-small !default
42
+
43
+ =input
44
+ +control
45
+ background-color: $input-background-color
46
+ border-color: $input-border-color
47
+ color: $input-color
48
+ +placeholder
49
+ color: rgba($input-color, 0.3)
50
+ &:hover,
51
+ &.is-hovered
52
+ border-color: $input-hover-border-color
53
+ &:focus,
54
+ &.is-focused,
55
+ &:active,
56
+ &.is-active
57
+ border-color: $input-focus-border-color
58
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
59
+ &[disabled]
60
+ background-color: $input-disabled-background-color
61
+ border-color: $input-disabled-border-color
62
+ box-shadow: none
63
+ color: $input-disabled-color
64
+ +placeholder
65
+ color: rgba($input-disabled-color, 0.3)
66
+
67
+ .input,
68
+ .textarea
69
+ +input
70
+ box-shadow: $input-shadow
71
+ max-width: 100%
72
+ width: 100%
73
+ &[readonly]
74
+ box-shadow: none
75
+ // Colors
76
+ @each $name, $pair in $colors
77
+ $color: nth($pair, 1)
78
+ &.is-#{$name}
79
+ border-color: $color
80
+ &:focus,
81
+ &.is-focused,
82
+ &:active,
83
+ &.is-active
84
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
85
+ // Sizes
86
+ &.is-small
87
+ +control-small
88
+ &.is-medium
89
+ +control-medium
90
+ &.is-large
91
+ +control-large
92
+ // Modifiers
93
+ &.is-fullwidth
94
+ display: block
95
+ width: 100%
96
+ &.is-inline
97
+ display: inline
98
+ width: auto
99
+
100
+ .input
101
+ &.is-rounded
102
+ border-radius: $radius-rounded
103
+ padding-left: 1em
104
+ padding-right: 1em
105
+ &.is-static
106
+ background-color: transparent
107
+ border-color: transparent
108
+ box-shadow: none
109
+ padding-left: 0
110
+ padding-right: 0
111
+
112
+ .textarea
113
+ display: block
114
+ max-width: 100%
115
+ min-width: 100%
116
+ padding: 0.625em
117
+ resize: vertical
118
+ &:not([rows])
119
+ max-height: 600px
120
+ min-height: 120px
121
+ &[rows]
122
+ height: initial
123
+ // Modifiers
124
+ &.has-fixed-size
125
+ resize: none
126
+
127
+ .checkbox,
128
+ .radio
129
+ cursor: pointer
130
+ display: inline-block
131
+ line-height: 1.25
132
+ position: relative
133
+ input
134
+ cursor: pointer
135
+ &:hover
136
+ color: $input-hover-color
137
+ &[disabled]
138
+ color: $input-disabled-color
139
+ cursor: not-allowed
140
+
141
+ .radio
142
+ & + .radio
143
+ margin-left: 0.5em
144
+
145
+ .select
146
+ display: inline-block
147
+ max-width: 100%
148
+ position: relative
149
+ vertical-align: top
150
+ &:not(.is-multiple)
151
+ height: 2.25em
152
+ &:not(.is-multiple):not(.is-loading)
153
+ &::after
154
+ +arrow($input-arrow)
155
+ right: 1.125em
156
+ z-index: 4
157
+ &.is-rounded
158
+ select
159
+ border-radius: $radius-rounded
160
+ padding-left: 1em
161
+ select
162
+ +input
163
+ cursor: pointer
164
+ display: block
165
+ font-size: 1em
166
+ max-width: 100%
167
+ outline: none
168
+ &::-ms-expand
169
+ display: none
170
+ &[disabled]:hover
171
+ border-color: $input-disabled-border-color
172
+ &:not([multiple])
173
+ padding-right: 2.5em
174
+ &[multiple]
175
+ height: initial
176
+ padding: 0
177
+ option
178
+ padding: 0.5em 1em
179
+ // States
180
+ &:not(.is-multiple):not(.is-loading):hover
181
+ &::after
182
+ border-color: $input-hover-color
183
+ // Colors
184
+ @each $name, $pair in $colors
185
+ $color: nth($pair, 1)
186
+ &.is-#{$name}
187
+ &:not(:hover)::after
188
+ border-color: $color
189
+ select
190
+ border-color: $color
191
+ &:hover,
192
+ &.is-hovered
193
+ border-color: darken($color, 5%)
194
+ &:focus,
195
+ &.is-focused,
196
+ &:active,
197
+ &.is-active
198
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
199
+ // Sizes
200
+ &.is-small
201
+ +control-small
202
+ &.is-medium
203
+ +control-medium
204
+ &.is-large
205
+ +control-large
206
+ // Modifiers
207
+ &.is-disabled
208
+ &::after
209
+ border-color: $input-disabled-color
210
+ &.is-fullwidth
211
+ width: 100%
212
+ select
213
+ width: 100%
214
+ &.is-loading
215
+ &::after
216
+ +loader
217
+ margin-top: 0
218
+ position: absolute
219
+ right: 0.625em
220
+ top: 0.625em
221
+ transform: none
222
+ &.is-small:after
223
+ font-size: $size-small
224
+ &.is-medium:after
225
+ font-size: $size-medium
226
+ &.is-large:after
227
+ font-size: $size-large
228
+
229
+ .file
230
+ +unselectable
231
+ align-items: stretch
232
+ display: flex
233
+ justify-content: flex-start
234
+ position: relative
235
+ // Colors
236
+ @each $name, $pair in $colors
237
+ $color: nth($pair, 1)
238
+ $color-invert: nth($pair, 2)
239
+ &.is-#{$name}
240
+ .file-cta
241
+ background-color: $color
242
+ border-color: transparent
243
+ color: $color-invert
244
+ &:hover,
245
+ &.is-hovered
246
+ .file-cta
247
+ background-color: darken($color, 2.5%)
248
+ border-color: transparent
249
+ color: $color-invert
250
+ &:focus,
251
+ &.is-focused
252
+ .file-cta
253
+ border-color: transparent
254
+ box-shadow: 0 0 0.5em rgba($color, 0.25)
255
+ color: $color-invert
256
+ &:active,
257
+ &.is-active
258
+ .file-cta
259
+ background-color: darken($color, 5%)
260
+ border-color: transparent
261
+ color: $color-invert
262
+ // Sizes
263
+ &.is-small
264
+ font-size: $size-small
265
+ &.is-medium
266
+ font-size: $size-medium
267
+ .file-icon
268
+ .fa
269
+ font-size: 21px
270
+ &.is-large
271
+ font-size: $size-large
272
+ .file-icon
273
+ .fa
274
+ font-size: 28px
275
+ // Modifiers
276
+ &.has-name
277
+ .file-cta
278
+ border-bottom-right-radius: 0
279
+ border-top-right-radius: 0
280
+ .file-name
281
+ border-bottom-left-radius: 0
282
+ border-top-left-radius: 0
283
+ &.is-empty
284
+ .file-cta
285
+ border-radius: $file-radius
286
+ .file-name
287
+ display: none
288
+ &.is-boxed
289
+ .file-label
290
+ flex-direction: column
291
+ .file-cta
292
+ flex-direction: column
293
+ height: auto
294
+ padding: 1em 3em
295
+ .file-name
296
+ border-width: 0 1px 1px
297
+ .file-icon
298
+ height: 1.5em
299
+ width: 1.5em
300
+ .fa
301
+ font-size: 21px
302
+ &.is-small
303
+ .file-icon .fa
304
+ font-size: 14px
305
+ &.is-medium
306
+ .file-icon .fa
307
+ font-size: 28px
308
+ &.is-large
309
+ .file-icon .fa
310
+ font-size: 35px
311
+ &.has-name
312
+ .file-cta
313
+ border-radius: $file-radius $file-radius 0 0
314
+ .file-name
315
+ border-radius: 0 0 $file-radius $file-radius
316
+ border-width: 0 1px 1px
317
+ &.is-centered
318
+ justify-content: center
319
+ &.is-fullwidth
320
+ .file-label
321
+ width: 100%
322
+ .file-name
323
+ flex-grow: 1
324
+ max-width: none
325
+ &.is-right
326
+ justify-content: flex-end
327
+ .file-cta
328
+ border-radius: 0 $file-radius $file-radius 0
329
+ .file-name
330
+ border-radius: $file-radius 0 0 $file-radius
331
+ border-width: 1px 0 1px 1px
332
+ order: -1
333
+
334
+ .file-label
335
+ align-items: stretch
336
+ display: flex
337
+ cursor: pointer
338
+ justify-content: flex-start
339
+ overflow: hidden
340
+ position: relative
341
+ &:hover
342
+ .file-cta
343
+ background-color: darken($file-cta-background-color, 2.5%)
344
+ color: $file-cta-hover-color
345
+ .file-name
346
+ border-color: darken($file-name-border-color, 2.5%)
347
+ &:active
348
+ .file-cta
349
+ background-color: darken($file-cta-background-color, 5%)
350
+ color: $file-cta-active-color
351
+ .file-name
352
+ border-color: darken($file-name-border-color, 5%)
353
+
354
+ .file-input
355
+ height: 0.01em
356
+ left: 0
357
+ outline: none
358
+ position: absolute
359
+ top: 0
360
+ width: 0.01em
361
+
362
+ .file-cta,
363
+ .file-name
364
+ +control
365
+ border-color: $file-border-color
366
+ border-radius: $file-radius
367
+ font-size: 1em
368
+ padding-left: 1em
369
+ padding-right: 1em
370
+ white-space: nowrap
371
+
372
+ .file-cta
373
+ background-color: $file-cta-background-color
374
+ color: $file-cta-color
375
+
376
+ .file-name
377
+ border-color: $file-name-border-color
378
+ border-style: $file-name-border-style
379
+ border-width: $file-name-border-width
380
+ display: block
381
+ max-width: $file-name-max-width
382
+ overflow: hidden
383
+ text-align: left
384
+ text-overflow: ellipsis
385
+
386
+ .file-icon
387
+ align-items: center
388
+ display: flex
389
+ height: 1em
390
+ justify-content: center
391
+ margin-right: 0.5em
392
+ width: 1em
393
+ .fa
394
+ font-size: 14px
395
+
396
+ .label
397
+ color: $label-color
398
+ display: block
399
+ font-size: $size-normal
400
+ font-weight: $label-weight
401
+ &:not(:last-child)
402
+ margin-bottom: 0.5em
403
+ // Sizes
404
+ &.is-small
405
+ font-size: $size-small
406
+ &.is-medium
407
+ font-size: $size-medium
408
+ &.is-large
409
+ font-size: $size-large
410
+
411
+ .help
412
+ display: block
413
+ font-size: $help-size
414
+ margin-top: 0.25rem
415
+ @each $name, $pair in $colors
416
+ $color: nth($pair, 1)
417
+ &.is-#{$name}
418
+ color: $color
419
+
420
+ // Containers
421
+
422
+ .field
423
+ &:not(:last-child)
424
+ margin-bottom: 0.75rem
425
+ // Modifiers
426
+ &.has-addons
427
+ display: flex
428
+ justify-content: flex-start
429
+ .control
430
+ &:not(:last-child)
431
+ margin-right: -1px
432
+ &:not(:first-child):not(:last-child)
433
+ .button,
434
+ .input,
435
+ .select select
436
+ border-radius: 0
437
+ &:first-child
438
+ .button,
439
+ .input,
440
+ .select select
441
+ border-bottom-right-radius: 0
442
+ border-top-right-radius: 0
443
+ &:last-child
444
+ .button,
445
+ .input,
446
+ .select select
447
+ border-bottom-left-radius: 0
448
+ border-top-left-radius: 0
449
+ .button,
450
+ .input,
451
+ .select select
452
+ &:hover,
453
+ &.is-hovered
454
+ z-index: 2
455
+ &:focus,
456
+ &.is-focused,
457
+ &:active,
458
+ &.is-active
459
+ z-index: 3
460
+ &:hover
461
+ z-index: 4
462
+ &.is-expanded
463
+ flex-grow: 1
464
+ &.has-addons-centered
465
+ justify-content: center
466
+ &.has-addons-right
467
+ justify-content: flex-end
468
+ &.has-addons-fullwidth
469
+ .control
470
+ flex-grow: 1
471
+ flex-shrink: 0
472
+ &.is-grouped
473
+ display: flex
474
+ justify-content: flex-start
475
+ & > .control
476
+ flex-shrink: 0
477
+ &:not(:last-child)
478
+ margin-bottom: 0
479
+ margin-right: 0.75rem
480
+ &.is-expanded
481
+ flex-grow: 1
482
+ flex-shrink: 1
483
+ &.is-grouped-centered
484
+ justify-content: center
485
+ &.is-grouped-right
486
+ justify-content: flex-end
487
+ &.is-grouped-multiline
488
+ flex-wrap: wrap
489
+ & > .control
490
+ &:last-child,
491
+ &:not(:last-child)
492
+ margin-bottom: 0.75rem
493
+ &:last-child
494
+ margin-bottom: -0.75rem
495
+ &:not(:last-child)
496
+ margin-bottom: 0
497
+
498
+ &.is-horizontal
499
+ +tablet
500
+ display: flex
501
+
502
+ .field-label
503
+ .label
504
+ font-size: inherit
505
+ +mobile
506
+ margin-bottom: 0.5rem
507
+ +tablet
508
+ flex-basis: 0
509
+ flex-grow: 1
510
+ flex-shrink: 0
511
+ margin-right: 1.5rem
512
+ text-align: right
513
+ &.is-small
514
+ font-size: $size-small
515
+ padding-top: 0.375em
516
+ &.is-normal
517
+ padding-top: 0.375em
518
+ &.is-medium
519
+ font-size: $size-medium
520
+ padding-top: 0.375em
521
+ &.is-large
522
+ font-size: $size-large
523
+ padding-top: 0.375em
524
+
525
+ .field-body
526
+ .field .field
527
+ margin-bottom: 0
528
+ +tablet
529
+ display: flex
530
+ flex-basis: 0
531
+ flex-grow: 5
532
+ flex-shrink: 1
533
+ .field
534
+ margin-bottom: 0
535
+ & > .field
536
+ flex-shrink: 1
537
+ &:not(.is-narrow)
538
+ flex-grow: 1
539
+ &:not(:last-child)
540
+ margin-right: 0.75rem
541
+
542
+ .control
543
+ font-size: $size-normal
544
+ position: relative
545
+ text-align: left
546
+ // Modifiers
547
+ // DEPRECATED
548
+ &.has-icon
549
+ .icon
550
+ color: $input-icon-color
551
+ height: 2.25em
552
+ pointer-events: none
553
+ position: absolute
554
+ top: 0
555
+ width: 2.25em
556
+ z-index: 4
557
+ .input
558
+ &:focus
559
+ & + .icon
560
+ color: $input-icon-active-color
561
+ &.is-small
562
+ & + .icon
563
+ font-size: $size-small
564
+ &.is-medium
565
+ & + .icon
566
+ font-size: $size-medium
567
+ &.is-large
568
+ & + .icon
569
+ font-size: $size-large
570
+ &:not(.has-icon-right)
571
+ .icon
572
+ left: 0
573
+ .input
574
+ padding-left: 2.25em
575
+ &.has-icon-right
576
+ .icon
577
+ right: 0
578
+ .input
579
+ padding-right: 2.25em
580
+ &.has-icons-left,
581
+ &.has-icons-right
582
+ .input,
583
+ .select
584
+ &:focus
585
+ & ~ .icon
586
+ color: $input-icon-active-color
587
+ &.is-small ~ .icon
588
+ font-size: $size-small
589
+ &.is-medium ~ .icon
590
+ font-size: $size-medium
591
+ &.is-large ~ .icon
592
+ font-size: $size-large
593
+ .icon
594
+ color: $input-icon-color
595
+ height: 2.25em
596
+ pointer-events: none
597
+ position: absolute
598
+ top: 0
599
+ width: 2.25em
600
+ z-index: 4
601
+ &.has-icons-left
602
+ .input,
603
+ .select select
604
+ padding-left: 2.25em
605
+ .icon.is-left
606
+ left: 0
607
+ &.has-icons-right
608
+ .input,
609
+ .select select
610
+ padding-right: 2.25em
611
+ .icon.is-right
612
+ right: 0
613
+ &.is-loading
614
+ &::after
615
+ +loader
616
+ position: absolute !important
617
+ right: 0.625em
618
+ top: 0.625em
619
+ z-index: 4
620
+ &.is-small:after
621
+ font-size: $size-small
622
+ &.is-medium:after
623
+ font-size: $size-medium
624
+ &.is-large:after
625
+ font-size: $size-large
@@ -0,0 +1,21 @@
1
+ $icon-dimensions: 1.5rem !default
2
+ $icon-dimensions-small: 1rem !default
3
+ $icon-dimensions-medium: 2rem !default
4
+ $icon-dimensions-large: 3rem !default
5
+
6
+ .icon
7
+ align-items: center
8
+ display: inline-flex
9
+ justify-content: center
10
+ height: $icon-dimensions
11
+ width: $icon-dimensions
12
+ // Sizes
13
+ &.is-small
14
+ height: $icon-dimensions-small
15
+ width: $icon-dimensions-small
16
+ &.is-medium
17
+ height: $icon-dimensions-medium
18
+ width: $icon-dimensions-medium
19
+ &.is-large
20
+ height: $icon-dimensions-large
21
+ width: $icon-dimensions-large
@@ -0,0 +1,68 @@
1
+ $dimensions: 16 24 32 48 64 96 128 !default
2
+
3
+ .image
4
+ display: block
5
+ position: relative
6
+ img
7
+ display: block
8
+ height: auto
9
+ width: 100%
10
+ &.is-rounded
11
+ border-radius: $radius-rounded
12
+ // Ratio
13
+ &.is-square,
14
+ &.is-1by1,
15
+ &.is-5by4,
16
+ &.is-4by3,
17
+ &.is-3by2,
18
+ &.is-5by3,
19
+ &.is-16by9,
20
+ &.is-2by1,
21
+ &.is-3by1,
22
+ &.is-4by5,
23
+ &.is-3by4,
24
+ &.is-2by3,
25
+ &.is-3by5,
26
+ &.is-9by16,
27
+ &.is-1by2,
28
+ &.is-1by3
29
+ img
30
+ +overlay
31
+ height: 100%
32
+ width: 100%
33
+ &.is-square,
34
+ &.is-1by1
35
+ padding-top: 100%
36
+ &.is-5by4
37
+ padding-top: 80%
38
+ &.is-4by3
39
+ padding-top: 75%
40
+ &.is-3by2
41
+ padding-top: 66.6666%
42
+ &.is-5by3
43
+ padding-top: 60%
44
+ &.is-16by9
45
+ padding-top: 56.25%
46
+ &.is-2by1
47
+ padding-top: 50%
48
+ &.is-3by1
49
+ padding-top: 33.3333%
50
+ &.is-4by5
51
+ padding-top: 125%
52
+ &.is-3by4
53
+ padding-top: 133.3333%
54
+ &.is-2by3
55
+ padding-top: 150%
56
+ &.is-3by5
57
+ padding-top: 166.6666%
58
+ &.is-9by16
59
+ padding-top: 177.7777%
60
+ &.is-1by2
61
+ padding-top: 200%
62
+ &.is-1by3
63
+ padding-top: 300%
64
+ // Sizes
65
+ @each $dimension in $dimensions
66
+ &.is-#{$dimension}x#{$dimension}
67
+ height: $dimension * 1px
68
+ width: $dimension * 1px