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,74 @@
1
+ $card-color: $text !default
2
+ $card-background-color: $white !default
3
+ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
4
+
5
+ $card-header-background-color: none !default
6
+ $card-header-color: $text-strong !default
7
+ $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
8
+ $card-header-weight: $weight-bold !default
9
+
10
+ $card-content-background-color: none !default
11
+
12
+ $card-footer-background-color: none !default
13
+ $card-footer-border-top: 1px solid $border !default
14
+
15
+ .card
16
+ background-color: $card-background-color
17
+ box-shadow: $card-shadow
18
+ color: $card-color
19
+ max-width: 100%
20
+ position: relative
21
+
22
+ .card-header
23
+ background-color: $card-header-background-color
24
+ align-items: stretch
25
+ box-shadow: $card-header-shadow
26
+ display: flex
27
+
28
+ .card-header-title
29
+ align-items: center
30
+ color: $card-header-color
31
+ display: flex
32
+ flex-grow: 1
33
+ font-weight: $card-header-weight
34
+ padding: 0.75rem
35
+ &.is-centered
36
+ justify-content: center
37
+
38
+ .card-header-icon
39
+ align-items: center
40
+ cursor: pointer
41
+ display: flex
42
+ justify-content: center
43
+ padding: 0.75rem
44
+
45
+ .card-image
46
+ display: block
47
+ position: relative
48
+
49
+ .card-content
50
+ background-color: $card-content-background-color
51
+ padding: 1.5rem
52
+
53
+ .card-footer
54
+ background-color: $card-footer-background-color
55
+ border-top: $card-footer-border-top
56
+ align-items: stretch
57
+ display: flex
58
+
59
+ .card-footer-item
60
+ align-items: center
61
+ display: flex
62
+ flex-basis: 0
63
+ flex-grow: 1
64
+ flex-shrink: 0
65
+ justify-content: center
66
+ padding: 0.75rem
67
+ &:not(:last-child)
68
+ border-right: $card-footer-border-top
69
+
70
+ // Combinations
71
+
72
+ .card
73
+ .media:not(:last-child)
74
+ margin-bottom: 0.75rem
@@ -0,0 +1,74 @@
1
+ $dropdown-content-background-color: $white !default
2
+ $dropdown-content-arrow: $link !default
3
+ $dropdown-content-offset: 4px !default
4
+ $dropdown-content-radius: $radius !default
5
+ $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
6
+ $dropdown-content-z: 20 !default
7
+
8
+ $dropdown-item-color: $grey-dark !default
9
+ $dropdown-item-hover-color: $black !default
10
+ $dropdown-item-hover-background-color: $background !default
11
+ $dropdown-item-active-color: $link-invert !default
12
+ $dropdown-item-active-background-color: $link !default
13
+
14
+ $dropdown-divider-background-color: $border !default
15
+
16
+ .dropdown
17
+ display: inline-flex
18
+ position: relative
19
+ vertical-align: top
20
+ &.is-active,
21
+ &.is-hoverable:hover
22
+ .dropdown-menu
23
+ display: block
24
+ &.is-right
25
+ .dropdown-menu
26
+ left: auto
27
+ right: 0
28
+ &.is-up
29
+ .dropdown-menu
30
+ bottom: 100%
31
+ padding-bottom: $dropdown-content-offset
32
+ padding-top: initial
33
+ top: auto
34
+
35
+ .dropdown-menu
36
+ display: none
37
+ left: 0
38
+ min-width: 12rem
39
+ padding-top: $dropdown-content-offset
40
+ position: absolute
41
+ top: 100%
42
+ z-index: $dropdown-content-z
43
+
44
+ .dropdown-content
45
+ background-color: $dropdown-content-background-color
46
+ border-radius: $dropdown-content-radius
47
+ box-shadow: $dropdown-content-shadow
48
+ padding-bottom: 0.5rem
49
+ padding-top: 0.5rem
50
+
51
+ .dropdown-item
52
+ color: $dropdown-item-color
53
+ display: block
54
+ font-size: 0.875rem
55
+ line-height: 1.5
56
+ padding: 0.375rem 1rem
57
+ position: relative
58
+
59
+ a.dropdown-item
60
+ padding-right: 3rem
61
+ white-space: nowrap
62
+ &:hover
63
+ background-color: $dropdown-item-hover-background-color
64
+ color: $dropdown-item-hover-color
65
+ &.is-active
66
+ background-color: $dropdown-item-active-background-color
67
+ color: $dropdown-item-active-color
68
+
69
+ .dropdown-divider
70
+ background-color: $dropdown-divider-background-color
71
+ border: none
72
+ display: block
73
+ height: 1px
74
+ margin: 0.5rem 0
@@ -0,0 +1,75 @@
1
+ .level
2
+ +block
3
+ align-items: center
4
+ justify-content: space-between
5
+ code
6
+ border-radius: $radius
7
+ img
8
+ display: inline-block
9
+ vertical-align: top
10
+ // Modifiers
11
+ &.is-mobile
12
+ display: flex
13
+ .level-left,
14
+ .level-right
15
+ display: flex
16
+ .level-left + .level-right
17
+ margin-top: 0
18
+ .level-item
19
+ &:not(:last-child)
20
+ margin-bottom: 0
21
+ &:not(.is-narrow)
22
+ flex-grow: 1
23
+ margin-right: 0.75rem
24
+ // Responsiveness
25
+ +tablet
26
+ display: flex
27
+ & > .level-item
28
+ &:not(.is-narrow)
29
+ flex-grow: 1
30
+
31
+ .level-item
32
+ align-items: center
33
+ display: flex
34
+ flex-basis: auto
35
+ flex-grow: 0
36
+ flex-shrink: 0
37
+ justify-content: center
38
+ .title,
39
+ .subtitle
40
+ margin-bottom: 0
41
+ // Responsiveness
42
+ +mobile
43
+ &:not(:last-child)
44
+ margin-bottom: 0.75rem
45
+
46
+ .level-left,
47
+ .level-right
48
+ flex-basis: auto
49
+ flex-grow: 0
50
+ flex-shrink: 0
51
+ .level-item
52
+ // Modifiers
53
+ &.is-flexible
54
+ flex-grow: 1
55
+ // Responsiveness
56
+ +tablet
57
+ &:not(:last-child)
58
+ margin-right: 0.75rem
59
+
60
+ .level-left
61
+ align-items: center
62
+ justify-content: flex-start
63
+ // Responsiveness
64
+ +mobile
65
+ & + .level-right
66
+ margin-top: 1.5rem
67
+ +tablet
68
+ display: flex
69
+
70
+ .level-right
71
+ align-items: center
72
+ justify-content: flex-end
73
+ // Responsiveness
74
+ +tablet
75
+ display: flex
@@ -0,0 +1,44 @@
1
+ .media
2
+ align-items: flex-start
3
+ display: flex
4
+ text-align: left
5
+ .content:not(:last-child)
6
+ margin-bottom: 0.75rem
7
+ .media
8
+ border-top: 1px solid rgba($border, 0.5)
9
+ display: flex
10
+ padding-top: 0.75rem
11
+ .content:not(:last-child),
12
+ .control:not(:last-child)
13
+ margin-bottom: 0.5rem
14
+ .media
15
+ padding-top: 0.5rem
16
+ & + .media
17
+ margin-top: 0.5rem
18
+ & + .media
19
+ border-top: 1px solid rgba($border, 0.5)
20
+ margin-top: 1rem
21
+ padding-top: 1rem
22
+ // Sizes
23
+ &.is-large
24
+ & + .media
25
+ margin-top: 1.5rem
26
+ padding-top: 1.5rem
27
+
28
+ .media-left,
29
+ .media-right
30
+ flex-basis: auto
31
+ flex-grow: 0
32
+ flex-shrink: 0
33
+
34
+ .media-left
35
+ margin-right: 1rem
36
+
37
+ .media-right
38
+ margin-left: 1rem
39
+
40
+ .media-content
41
+ flex-basis: auto
42
+ flex-grow: 1
43
+ flex-shrink: 1
44
+ text-align: left
@@ -0,0 +1,50 @@
1
+ $menu-item-color: $text !default
2
+ $menu-item-radius: $radius-small !default
3
+ $menu-item-hover-color: $text-strong !default
4
+ $menu-item-hover-background-color: $background !default
5
+ $menu-item-active-color: $link-invert !default
6
+ $menu-item-active-background-color: $link !default
7
+
8
+ $menu-list-border-left: 1px solid $border !default
9
+
10
+ $menu-label-color: $text-light !default
11
+
12
+ .menu
13
+ font-size: $size-normal
14
+ // Sizes
15
+ &.is-small
16
+ font-size: $size-small
17
+ &.is-medium
18
+ font-size: $size-medium
19
+ &.is-large
20
+ font-size: $size-large
21
+
22
+ .menu-list
23
+ line-height: 1.25
24
+ a
25
+ border-radius: $menu-item-radius
26
+ color: $menu-item-color
27
+ display: block
28
+ padding: 0.5em 0.75em
29
+ &:hover
30
+ background-color: $menu-item-hover-background-color
31
+ color: $menu-item-hover-color
32
+ // Modifiers
33
+ &.is-active
34
+ background-color: $menu-item-active-background-color
35
+ color: $menu-item-active-color
36
+ li
37
+ ul
38
+ border-left: $menu-list-border-left
39
+ margin: 0.75em
40
+ padding-left: 0.75em
41
+
42
+ .menu-label
43
+ color: $menu-label-color
44
+ font-size: 0.75em
45
+ letter-spacing: 0.1em
46
+ text-transform: uppercase
47
+ &:not(:first-child)
48
+ margin-top: 1em
49
+ &:not(:last-child)
50
+ margin-bottom: 1em
@@ -0,0 +1,86 @@
1
+ $message-background-color: $background !default
2
+ $message-radius: $radius !default
3
+
4
+ $message-header-background-color: $text !default
5
+ $message-header-color: $text-invert !default
6
+ $message-header-weight: $weight-bold !default
7
+ $message-header-padding: 0.75em 1em !default
8
+ $message-header-radius: $radius !default
9
+
10
+ $message-body-border-color: $border !default
11
+ $message-body-border-width: 0 0 0 4px !default
12
+ $message-body-color: $text !default
13
+ $message-body-padding: 1.25em 1.5em !default
14
+ $message-body-radius: $radius !default
15
+
16
+ $message-body-pre-background-color: $white !default
17
+ $message-body-pre-code-background-color: transparent !default
18
+
19
+ $message-header-body-border-width: 0 !default
20
+
21
+ .message
22
+ +block
23
+ background-color: $message-background-color
24
+ border-radius: $message-radius
25
+ font-size: $size-normal
26
+ strong
27
+ color: currentColor
28
+ a:not(.button):not(.tag)
29
+ color: currentColor
30
+ text-decoration: underline
31
+ // Sizes
32
+ &.is-small
33
+ font-size: $size-small
34
+ &.is-medium
35
+ font-size: $size-medium
36
+ &.is-large
37
+ font-size: $size-large
38
+ // Colors
39
+ @each $name, $pair in $colors
40
+ $color: nth($pair, 1)
41
+ $color-invert: nth($pair, 2)
42
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
43
+ $color-luminance: colorLuminance($color)
44
+ $darken-percentage: $color-luminance * 70%
45
+ $desaturate-percentage: $color-luminance * 30%
46
+ &.is-#{$name}
47
+ background-color: lighten($color, $color-lightning)
48
+ .message-header
49
+ background-color: $color
50
+ color: $color-invert
51
+ .message-body
52
+ border-color: $color
53
+ color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
54
+
55
+ .message-header
56
+ align-items: center
57
+ background-color: $message-header-background-color
58
+ border-radius: $message-header-radius $message-header-radius 0 0
59
+ color: $message-header-color
60
+ display: flex
61
+ font-weight: $message-header-weight
62
+ justify-content: space-between
63
+ line-height: 1.25
64
+ padding: $message-header-padding
65
+ position: relative
66
+ .delete
67
+ flex-grow: 0
68
+ flex-shrink: 0
69
+ margin-left: 0.75em
70
+ & + .message-body
71
+ border-width: $message-header-body-border-width
72
+ border-top-left-radius: 0
73
+ border-top-right-radius: 0
74
+
75
+ .message-body
76
+ border-color: $message-body-border-color
77
+ border-radius: $message-body-radius
78
+ border-style: solid
79
+ border-width: $message-body-border-width
80
+ color: $message-body-color
81
+ padding: $message-body-padding
82
+ code,
83
+ pre
84
+ background-color: $message-body-pre-background-color
85
+ pre code
86
+ background-color: $message-body-pre-code-background-color
@@ -0,0 +1,111 @@
1
+ $modal-z: 40 !default
2
+
3
+ $modal-background-background-color: rgba($black, 0.86) !default
4
+
5
+ $modal-content-width: 640px !default
6
+ $modal-content-margin-mobile: 20px !default
7
+ $modal-content-spacing-mobile: 160px !default
8
+ $modal-content-spacing-tablet: 40px !default
9
+
10
+ $modal-close-dimensions: 40px !default
11
+ $modal-close-right: 20px !default
12
+ $modal-close-top: 20px !default
13
+
14
+ $modal-card-spacing: 40px !default
15
+
16
+ $modal-card-head-background-color: $background !default
17
+ $modal-card-head-border-bottom: 1px solid $border !default
18
+ $modal-card-head-padding: 20px !default
19
+ $modal-card-head-radius: $radius-large !default
20
+
21
+ $modal-card-title-color: $text-strong !default
22
+ $modal-card-title-line-height: 1 !default
23
+ $modal-card-title-size: $size-4 !default
24
+
25
+ $modal-card-foot-radius: $radius-large !default
26
+ $modal-card-foot-border-top: 1px solid $border !default
27
+
28
+ $modal-card-body-background-color: $white !default
29
+ $modal-card-body-padding: 20px !default
30
+
31
+ .modal
32
+ +overlay
33
+ align-items: center
34
+ display: none
35
+ justify-content: center
36
+ overflow: hidden
37
+ position: fixed
38
+ z-index: $modal-z
39
+ // Modifiers
40
+ &.is-active
41
+ display: flex
42
+
43
+ .modal-background
44
+ +overlay
45
+ background-color: $modal-background-background-color
46
+
47
+ .modal-content,
48
+ .modal-card
49
+ margin: 0 $modal-content-margin-mobile
50
+ max-height: calc(100vh - #{$modal-content-spacing-mobile})
51
+ overflow: auto
52
+ position: relative
53
+ width: 100%
54
+ // Responsiveness
55
+ +tablet
56
+ margin: 0 auto
57
+ max-height: calc(100vh - #{$modal-content-spacing-tablet})
58
+ width: $modal-content-width
59
+
60
+ .modal-close
61
+ +delete
62
+ background: none
63
+ height: $modal-close-dimensions
64
+ position: fixed
65
+ right: $modal-close-right
66
+ top: $modal-close-top
67
+ width: $modal-close-dimensions
68
+
69
+ .modal-card
70
+ display: flex
71
+ flex-direction: column
72
+ max-height: calc(100vh - #{$modal-card-spacing})
73
+ overflow: hidden
74
+
75
+ .modal-card-head,
76
+ .modal-card-foot
77
+ align-items: center
78
+ background-color: $modal-card-head-background-color
79
+ display: flex
80
+ flex-shrink: 0
81
+ justify-content: flex-start
82
+ padding: $modal-card-head-padding
83
+ position: relative
84
+
85
+ .modal-card-head
86
+ border-bottom: $modal-card-head-border-bottom
87
+ border-top-left-radius: $modal-card-head-radius
88
+ border-top-right-radius: $modal-card-head-radius
89
+
90
+ .modal-card-title
91
+ color: $modal-card-title-color
92
+ flex-grow: 1
93
+ flex-shrink: 0
94
+ font-size: $modal-card-title-size
95
+ line-height: $modal-card-title-line-height
96
+
97
+ .modal-card-foot
98
+ border-bottom-left-radius: $modal-card-foot-radius
99
+ border-bottom-right-radius: $modal-card-foot-radius
100
+ border-top: $modal-card-foot-border-top
101
+ .button
102
+ &:not(:last-child)
103
+ margin-right: 10px
104
+
105
+ .modal-card-body
106
+ +overflow-touch
107
+ background-color: $modal-card-body-background-color
108
+ flex-grow: 1
109
+ flex-shrink: 1
110
+ overflow: auto
111
+ padding: $modal-card-body-padding