jekyll-bulma-feather 0.1.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 (83) hide show
  1. checksums.yaml +7 -0
  2. data/COPYING.md +88 -0
  3. data/README.md +125 -0
  4. data/_includes/feather.html +3 -0
  5. data/_includes/footer.html +14 -0
  6. data/_includes/head.html +12 -0
  7. data/_includes/header.html +8 -0
  8. data/_includes/nav.html +38 -0
  9. data/_layouts/default.html +7 -0
  10. data/_layouts/empty.html +9 -0
  11. data/_layouts/page.html +5 -0
  12. data/_layouts/post.html +5 -0
  13. data/_sass/bulma.scss +1 -0
  14. data/_sass/bulma/bulma-rtl.sass +3 -0
  15. data/_sass/bulma/bulma.sass +10 -0
  16. data/_sass/bulma/sass/base/_all.sass +6 -0
  17. data/_sass/bulma/sass/base/animations.sass +5 -0
  18. data/_sass/bulma/sass/base/generic.sass +145 -0
  19. data/_sass/bulma/sass/base/helpers.sass +1 -0
  20. data/_sass/bulma/sass/base/minireset.sass +79 -0
  21. data/_sass/bulma/sass/components/_all.sass +15 -0
  22. data/_sass/bulma/sass/components/breadcrumb.sass +77 -0
  23. data/_sass/bulma/sass/components/card.sass +102 -0
  24. data/_sass/bulma/sass/components/dropdown.sass +83 -0
  25. data/_sass/bulma/sass/components/level.sass +79 -0
  26. data/_sass/bulma/sass/components/media.sass +59 -0
  27. data/_sass/bulma/sass/components/menu.sass +59 -0
  28. data/_sass/bulma/sass/components/message.sass +101 -0
  29. data/_sass/bulma/sass/components/modal.sass +117 -0
  30. data/_sass/bulma/sass/components/navbar.sass +445 -0
  31. data/_sass/bulma/sass/components/pagination.sass +153 -0
  32. data/_sass/bulma/sass/components/panel.sass +121 -0
  33. data/_sass/bulma/sass/components/tabs.sass +176 -0
  34. data/_sass/bulma/sass/elements/_all.sass +16 -0
  35. data/_sass/bulma/sass/elements/box.sass +26 -0
  36. data/_sass/bulma/sass/elements/button.sass +344 -0
  37. data/_sass/bulma/sass/elements/container.sass +29 -0
  38. data/_sass/bulma/sass/elements/content.sass +157 -0
  39. data/_sass/bulma/sass/elements/form.sass +1 -0
  40. data/_sass/bulma/sass/elements/icon.sass +21 -0
  41. data/_sass/bulma/sass/elements/image.sass +73 -0
  42. data/_sass/bulma/sass/elements/notification.sass +52 -0
  43. data/_sass/bulma/sass/elements/other.sass +41 -0
  44. data/_sass/bulma/sass/elements/progress.sass +73 -0
  45. data/_sass/bulma/sass/elements/table.sass +133 -0
  46. data/_sass/bulma/sass/elements/tag.sass +140 -0
  47. data/_sass/bulma/sass/elements/title.sass +72 -0
  48. data/_sass/bulma/sass/form/_all.sass +9 -0
  49. data/_sass/bulma/sass/form/checkbox-radio.sass +24 -0
  50. data/_sass/bulma/sass/form/file.sass +184 -0
  51. data/_sass/bulma/sass/form/input-textarea.sass +68 -0
  52. data/_sass/bulma/sass/form/select.sass +89 -0
  53. data/_sass/bulma/sass/form/shared.sass +60 -0
  54. data/_sass/bulma/sass/form/tools.sass +217 -0
  55. data/_sass/bulma/sass/grid/_all.sass +5 -0
  56. data/_sass/bulma/sass/grid/columns.sass +513 -0
  57. data/_sass/bulma/sass/grid/tiles.sass +36 -0
  58. data/_sass/bulma/sass/helpers/_all.sass +12 -0
  59. data/_sass/bulma/sass/helpers/color.sass +39 -0
  60. data/_sass/bulma/sass/helpers/flexbox.sass +35 -0
  61. data/_sass/bulma/sass/helpers/float.sass +10 -0
  62. data/_sass/bulma/sass/helpers/other.sass +14 -0
  63. data/_sass/bulma/sass/helpers/overflow.sass +2 -0
  64. data/_sass/bulma/sass/helpers/position.sass +7 -0
  65. data/_sass/bulma/sass/helpers/spacing.sass +31 -0
  66. data/_sass/bulma/sass/helpers/typography.sass +100 -0
  67. data/_sass/bulma/sass/helpers/visibility.sass +122 -0
  68. data/_sass/bulma/sass/layout/_all.sass +6 -0
  69. data/_sass/bulma/sass/layout/footer.sass +11 -0
  70. data/_sass/bulma/sass/layout/hero.sass +149 -0
  71. data/_sass/bulma/sass/layout/section.sass +15 -0
  72. data/_sass/bulma/sass/utilities/_all.sass +8 -0
  73. data/_sass/bulma/sass/utilities/animations.sass +1 -0
  74. data/_sass/bulma/sass/utilities/controls.sass +52 -0
  75. data/_sass/bulma/sass/utilities/derived-variables.sass +110 -0
  76. data/_sass/bulma/sass/utilities/functions.sass +115 -0
  77. data/_sass/bulma/sass/utilities/initial-variables.sass +78 -0
  78. data/_sass/bulma/sass/utilities/mixins.sass +285 -0
  79. data/_sass/jekyll-bulma-feather.scss +213 -0
  80. data/assets/feather-sprite.svg +1 -0
  81. data/assets/jekyll-bulma-feather.svg +125 -0
  82. data/assets/style.scss +5 -0
  83. metadata +166 -0
@@ -0,0 +1,60 @@
1
+ @import "../utilities/controls"
2
+ @import "../utilities/mixins"
3
+
4
+ $form-colors: $colors !default
5
+
6
+ $input-color: $text-strong !default
7
+ $input-background-color: $scheme-main !default
8
+ $input-border-color: $border !default
9
+ $input-height: $control-height !default
10
+ $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
11
+ $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
12
+
13
+ $input-hover-color: $text-strong !default
14
+ $input-hover-border-color: $border-hover !default
15
+
16
+ $input-focus-color: $text-strong !default
17
+ $input-focus-border-color: $link !default
18
+ $input-focus-box-shadow-size: 0 0 0 0.125em !default
19
+ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
20
+
21
+ $input-disabled-color: $text-light !default
22
+ $input-disabled-background-color: $background !default
23
+ $input-disabled-border-color: $background !default
24
+ $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
25
+
26
+ $input-arrow: $link !default
27
+
28
+ $input-icon-color: $border !default
29
+ $input-icon-active-color: $text !default
30
+
31
+ $input-radius: $radius !default
32
+
33
+ =input
34
+ @extend %control
35
+ background-color: $input-background-color
36
+ border-color: $input-border-color
37
+ border-radius: $input-radius
38
+ color: $input-color
39
+ +placeholder
40
+ color: $input-placeholder-color
41
+ &:hover,
42
+ &.is-hovered
43
+ border-color: $input-hover-border-color
44
+ &:focus,
45
+ &.is-focused,
46
+ &:active,
47
+ &.is-active
48
+ border-color: $input-focus-border-color
49
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
50
+ &[disabled],
51
+ fieldset[disabled] &
52
+ background-color: $input-disabled-background-color
53
+ border-color: $input-disabled-border-color
54
+ box-shadow: none
55
+ color: $input-disabled-color
56
+ +placeholder
57
+ color: $input-disabled-placeholder-color
58
+
59
+ %input
60
+ +input
@@ -0,0 +1,217 @@
1
+ @import "shared"
2
+
3
+ $label-color: $text-strong !default
4
+ $label-weight: $weight-bold !default
5
+
6
+ $help-size: $size-small !default
7
+
8
+ $label-colors: $form-colors !default
9
+
10
+ .label
11
+ color: $label-color
12
+ display: block
13
+ font-size: $size-normal
14
+ font-weight: $label-weight
15
+ &:not(:last-child)
16
+ margin-bottom: 0.5em
17
+ // Sizes
18
+ &.is-small
19
+ font-size: $size-small
20
+ &.is-medium
21
+ font-size: $size-medium
22
+ &.is-large
23
+ font-size: $size-large
24
+
25
+ .help
26
+ display: block
27
+ font-size: $help-size
28
+ margin-top: 0.25rem
29
+ @each $name, $pair in $label-colors
30
+ $color: nth($pair, 1)
31
+ &.is-#{$name}
32
+ color: $color
33
+
34
+ // Containers
35
+
36
+ .field
37
+ &:not(:last-child)
38
+ margin-bottom: 0.75rem
39
+ // Modifiers
40
+ &.has-addons
41
+ display: flex
42
+ justify-content: flex-start
43
+ .control
44
+ &:not(:last-child)
45
+ +ltr-property("margin", -1px)
46
+ &:not(:first-child):not(:last-child)
47
+ .button,
48
+ .input,
49
+ .select select
50
+ border-radius: 0
51
+ &:first-child:not(:only-child)
52
+ .button,
53
+ .input,
54
+ .select select
55
+ +ltr
56
+ border-bottom-right-radius: 0
57
+ border-top-right-radius: 0
58
+ +rtl
59
+ border-bottom-left-radius: 0
60
+ border-top-left-radius: 0
61
+ &:last-child:not(:only-child)
62
+ .button,
63
+ .input,
64
+ .select select
65
+ +ltr
66
+ border-bottom-left-radius: 0
67
+ border-top-left-radius: 0
68
+ +rtl
69
+ border-bottom-right-radius: 0
70
+ border-top-right-radius: 0
71
+ .button,
72
+ .input,
73
+ .select select
74
+ &:not([disabled])
75
+ &:hover,
76
+ &.is-hovered
77
+ z-index: 2
78
+ &:focus,
79
+ &.is-focused,
80
+ &:active,
81
+ &.is-active
82
+ z-index: 3
83
+ &:hover
84
+ z-index: 4
85
+ &.is-expanded
86
+ flex-grow: 1
87
+ flex-shrink: 1
88
+ &.has-addons-centered
89
+ justify-content: center
90
+ &.has-addons-right
91
+ justify-content: flex-end
92
+ &.has-addons-fullwidth
93
+ .control
94
+ flex-grow: 1
95
+ flex-shrink: 0
96
+ &.is-grouped
97
+ display: flex
98
+ justify-content: flex-start
99
+ & > .control
100
+ flex-shrink: 0
101
+ &:not(:last-child)
102
+ margin-bottom: 0
103
+ +ltr-property("margin", 0.75rem)
104
+ &.is-expanded
105
+ flex-grow: 1
106
+ flex-shrink: 1
107
+ &.is-grouped-centered
108
+ justify-content: center
109
+ &.is-grouped-right
110
+ justify-content: flex-end
111
+ &.is-grouped-multiline
112
+ flex-wrap: wrap
113
+ & > .control
114
+ &:last-child,
115
+ &:not(:last-child)
116
+ margin-bottom: 0.75rem
117
+ &:last-child
118
+ margin-bottom: -0.75rem
119
+ &:not(:last-child)
120
+ margin-bottom: 0
121
+ &.is-horizontal
122
+ +tablet
123
+ display: flex
124
+
125
+ .field-label
126
+ .label
127
+ font-size: inherit
128
+ +mobile
129
+ margin-bottom: 0.5rem
130
+ +tablet
131
+ flex-basis: 0
132
+ flex-grow: 1
133
+ flex-shrink: 0
134
+ +ltr-property("margin", 1.5rem)
135
+ text-align: right
136
+ &.is-small
137
+ font-size: $size-small
138
+ padding-top: 0.375em
139
+ &.is-normal
140
+ padding-top: 0.375em
141
+ &.is-medium
142
+ font-size: $size-medium
143
+ padding-top: 0.375em
144
+ &.is-large
145
+ font-size: $size-large
146
+ padding-top: 0.375em
147
+
148
+ .field-body
149
+ .field .field
150
+ margin-bottom: 0
151
+ +tablet
152
+ display: flex
153
+ flex-basis: 0
154
+ flex-grow: 5
155
+ flex-shrink: 1
156
+ .field
157
+ margin-bottom: 0
158
+ & > .field
159
+ flex-shrink: 1
160
+ &:not(.is-narrow)
161
+ flex-grow: 1
162
+ &:not(:last-child)
163
+ +ltr-property("margin", 0.75rem)
164
+
165
+ .control
166
+ box-sizing: border-box
167
+ clear: both
168
+ font-size: $size-normal
169
+ position: relative
170
+ text-align: inherit
171
+ // Modifiers
172
+ &.has-icons-left,
173
+ &.has-icons-right
174
+ .input,
175
+ .select
176
+ &:focus
177
+ & ~ .icon
178
+ color: $input-icon-active-color
179
+ &.is-small ~ .icon
180
+ font-size: $size-small
181
+ &.is-medium ~ .icon
182
+ font-size: $size-medium
183
+ &.is-large ~ .icon
184
+ font-size: $size-large
185
+ .icon
186
+ color: $input-icon-color
187
+ height: $input-height
188
+ pointer-events: none
189
+ position: absolute
190
+ top: 0
191
+ width: $input-height
192
+ z-index: 4
193
+ &.has-icons-left
194
+ .input,
195
+ .select select
196
+ padding-left: $input-height
197
+ .icon.is-left
198
+ left: 0
199
+ &.has-icons-right
200
+ .input,
201
+ .select select
202
+ padding-right: $input-height
203
+ .icon.is-right
204
+ right: 0
205
+ &.is-loading
206
+ &::after
207
+ @extend %loader
208
+ position: absolute !important
209
+ +ltr-position(0.625em)
210
+ top: 0.625em
211
+ z-index: 4
212
+ &.is-small:after
213
+ font-size: $size-small
214
+ &.is-medium:after
215
+ font-size: $size-medium
216
+ &.is-large:after
217
+ font-size: $size-large
@@ -0,0 +1,5 @@
1
+ /* Bulma Grid */
2
+ @charset "utf-8"
3
+
4
+ @import "columns.sass"
5
+ @import "tiles.sass"
@@ -0,0 +1,513 @@
1
+ @import "../utilities/mixins"
2
+
3
+ $column-gap: 0.75rem !default
4
+
5
+ .column
6
+ display: block
7
+ flex-basis: 0
8
+ flex-grow: 1
9
+ flex-shrink: 1
10
+ padding: $column-gap
11
+ .columns.is-mobile > &.is-narrow
12
+ flex: none
13
+ width: unset
14
+ .columns.is-mobile > &.is-full
15
+ flex: none
16
+ width: 100%
17
+ .columns.is-mobile > &.is-three-quarters
18
+ flex: none
19
+ width: 75%
20
+ .columns.is-mobile > &.is-two-thirds
21
+ flex: none
22
+ width: 66.6666%
23
+ .columns.is-mobile > &.is-half
24
+ flex: none
25
+ width: 50%
26
+ .columns.is-mobile > &.is-one-third
27
+ flex: none
28
+ width: 33.3333%
29
+ .columns.is-mobile > &.is-one-quarter
30
+ flex: none
31
+ width: 25%
32
+ .columns.is-mobile > &.is-one-fifth
33
+ flex: none
34
+ width: 20%
35
+ .columns.is-mobile > &.is-two-fifths
36
+ flex: none
37
+ width: 40%
38
+ .columns.is-mobile > &.is-three-fifths
39
+ flex: none
40
+ width: 60%
41
+ .columns.is-mobile > &.is-four-fifths
42
+ flex: none
43
+ width: 80%
44
+ .columns.is-mobile > &.is-offset-three-quarters
45
+ +ltr-property("margin", 75%, false)
46
+ .columns.is-mobile > &.is-offset-two-thirds
47
+ +ltr-property("margin", 66.6666%, false)
48
+ .columns.is-mobile > &.is-offset-half
49
+ +ltr-property("margin", 50%, false)
50
+ .columns.is-mobile > &.is-offset-one-third
51
+ +ltr-property("margin", 33.3333%, false)
52
+ .columns.is-mobile > &.is-offset-one-quarter
53
+ +ltr-property("margin", 25%, false)
54
+ .columns.is-mobile > &.is-offset-one-fifth
55
+ +ltr-property("margin", 20%, false)
56
+ .columns.is-mobile > &.is-offset-two-fifths
57
+ +ltr-property("margin", 40%, false)
58
+ .columns.is-mobile > &.is-offset-three-fifths
59
+ +ltr-property("margin", 60%, false)
60
+ .columns.is-mobile > &.is-offset-four-fifths
61
+ +ltr-property("margin", 80%, false)
62
+ @for $i from 0 through 12
63
+ .columns.is-mobile > &.is-#{$i}
64
+ flex: none
65
+ width: percentage($i / 12)
66
+ .columns.is-mobile > &.is-offset-#{$i}
67
+ +ltr-property("margin", percentage($i / 12), false)
68
+ +mobile
69
+ &.is-narrow-mobile
70
+ flex: none
71
+ width: unset
72
+ &.is-full-mobile
73
+ flex: none
74
+ width: 100%
75
+ &.is-three-quarters-mobile
76
+ flex: none
77
+ width: 75%
78
+ &.is-two-thirds-mobile
79
+ flex: none
80
+ width: 66.6666%
81
+ &.is-half-mobile
82
+ flex: none
83
+ width: 50%
84
+ &.is-one-third-mobile
85
+ flex: none
86
+ width: 33.3333%
87
+ &.is-one-quarter-mobile
88
+ flex: none
89
+ width: 25%
90
+ &.is-one-fifth-mobile
91
+ flex: none
92
+ width: 20%
93
+ &.is-two-fifths-mobile
94
+ flex: none
95
+ width: 40%
96
+ &.is-three-fifths-mobile
97
+ flex: none
98
+ width: 60%
99
+ &.is-four-fifths-mobile
100
+ flex: none
101
+ width: 80%
102
+ &.is-offset-three-quarters-mobile
103
+ +ltr-property("margin", 75%, false)
104
+ &.is-offset-two-thirds-mobile
105
+ +ltr-property("margin", 66.6666%, false)
106
+ &.is-offset-half-mobile
107
+ +ltr-property("margin", 50%, false)
108
+ &.is-offset-one-third-mobile
109
+ +ltr-property("margin", 33.3333%, false)
110
+ &.is-offset-one-quarter-mobile
111
+ +ltr-property("margin", 25%, false)
112
+ &.is-offset-one-fifth-mobile
113
+ +ltr-property("margin", 20%, false)
114
+ &.is-offset-two-fifths-mobile
115
+ +ltr-property("margin", 40%, false)
116
+ &.is-offset-three-fifths-mobile
117
+ +ltr-property("margin", 60%, false)
118
+ &.is-offset-four-fifths-mobile
119
+ +ltr-property("margin", 80%, false)
120
+ @for $i from 0 through 12
121
+ &.is-#{$i}-mobile
122
+ flex: none
123
+ width: percentage($i / 12)
124
+ &.is-offset-#{$i}-mobile
125
+ +ltr-property("margin", percentage($i / 12), false)
126
+ +tablet
127
+ &.is-narrow,
128
+ &.is-narrow-tablet
129
+ flex: none
130
+ width: unset
131
+ &.is-full,
132
+ &.is-full-tablet
133
+ flex: none
134
+ width: 100%
135
+ &.is-three-quarters,
136
+ &.is-three-quarters-tablet
137
+ flex: none
138
+ width: 75%
139
+ &.is-two-thirds,
140
+ &.is-two-thirds-tablet
141
+ flex: none
142
+ width: 66.6666%
143
+ &.is-half,
144
+ &.is-half-tablet
145
+ flex: none
146
+ width: 50%
147
+ &.is-one-third,
148
+ &.is-one-third-tablet
149
+ flex: none
150
+ width: 33.3333%
151
+ &.is-one-quarter,
152
+ &.is-one-quarter-tablet
153
+ flex: none
154
+ width: 25%
155
+ &.is-one-fifth,
156
+ &.is-one-fifth-tablet
157
+ flex: none
158
+ width: 20%
159
+ &.is-two-fifths,
160
+ &.is-two-fifths-tablet
161
+ flex: none
162
+ width: 40%
163
+ &.is-three-fifths,
164
+ &.is-three-fifths-tablet
165
+ flex: none
166
+ width: 60%
167
+ &.is-four-fifths,
168
+ &.is-four-fifths-tablet
169
+ flex: none
170
+ width: 80%
171
+ &.is-offset-three-quarters,
172
+ &.is-offset-three-quarters-tablet
173
+ +ltr-property("margin", 75%, false)
174
+ &.is-offset-two-thirds,
175
+ &.is-offset-two-thirds-tablet
176
+ +ltr-property("margin", 66.6666%, false)
177
+ &.is-offset-half,
178
+ &.is-offset-half-tablet
179
+ +ltr-property("margin", 50%, false)
180
+ &.is-offset-one-third,
181
+ &.is-offset-one-third-tablet
182
+ +ltr-property("margin", 33.3333%, false)
183
+ &.is-offset-one-quarter,
184
+ &.is-offset-one-quarter-tablet
185
+ +ltr-property("margin", 25%, false)
186
+ &.is-offset-one-fifth,
187
+ &.is-offset-one-fifth-tablet
188
+ +ltr-property("margin", 20%, false)
189
+ &.is-offset-two-fifths,
190
+ &.is-offset-two-fifths-tablet
191
+ +ltr-property("margin", 40%, false)
192
+ &.is-offset-three-fifths,
193
+ &.is-offset-three-fifths-tablet
194
+ +ltr-property("margin", 60%, false)
195
+ &.is-offset-four-fifths,
196
+ &.is-offset-four-fifths-tablet
197
+ +ltr-property("margin", 80%, false)
198
+ @for $i from 0 through 12
199
+ &.is-#{$i},
200
+ &.is-#{$i}-tablet
201
+ flex: none
202
+ width: percentage($i / 12)
203
+ &.is-offset-#{$i},
204
+ &.is-offset-#{$i}-tablet
205
+ +ltr-property("margin", percentage($i / 12), false)
206
+ +touch
207
+ &.is-narrow-touch
208
+ flex: none
209
+ width: unset
210
+ &.is-full-touch
211
+ flex: none
212
+ width: 100%
213
+ &.is-three-quarters-touch
214
+ flex: none
215
+ width: 75%
216
+ &.is-two-thirds-touch
217
+ flex: none
218
+ width: 66.6666%
219
+ &.is-half-touch
220
+ flex: none
221
+ width: 50%
222
+ &.is-one-third-touch
223
+ flex: none
224
+ width: 33.3333%
225
+ &.is-one-quarter-touch
226
+ flex: none
227
+ width: 25%
228
+ &.is-one-fifth-touch
229
+ flex: none
230
+ width: 20%
231
+ &.is-two-fifths-touch
232
+ flex: none
233
+ width: 40%
234
+ &.is-three-fifths-touch
235
+ flex: none
236
+ width: 60%
237
+ &.is-four-fifths-touch
238
+ flex: none
239
+ width: 80%
240
+ &.is-offset-three-quarters-touch
241
+ +ltr-property("margin", 75%, false)
242
+ &.is-offset-two-thirds-touch
243
+ +ltr-property("margin", 66.6666%, false)
244
+ &.is-offset-half-touch
245
+ +ltr-property("margin", 50%, false)
246
+ &.is-offset-one-third-touch
247
+ +ltr-property("margin", 33.3333%, false)
248
+ &.is-offset-one-quarter-touch
249
+ +ltr-property("margin", 25%, false)
250
+ &.is-offset-one-fifth-touch
251
+ +ltr-property("margin", 20%, false)
252
+ &.is-offset-two-fifths-touch
253
+ +ltr-property("margin", 40%, false)
254
+ &.is-offset-three-fifths-touch
255
+ +ltr-property("margin", 60%, false)
256
+ &.is-offset-four-fifths-touch
257
+ +ltr-property("margin", 80%, false)
258
+ @for $i from 0 through 12
259
+ &.is-#{$i}-touch
260
+ flex: none
261
+ width: percentage($i / 12)
262
+ &.is-offset-#{$i}-touch
263
+ +ltr-property("margin", percentage($i / 12), false)
264
+ +desktop
265
+ &.is-narrow-desktop
266
+ flex: none
267
+ width: unset
268
+ &.is-full-desktop
269
+ flex: none
270
+ width: 100%
271
+ &.is-three-quarters-desktop
272
+ flex: none
273
+ width: 75%
274
+ &.is-two-thirds-desktop
275
+ flex: none
276
+ width: 66.6666%
277
+ &.is-half-desktop
278
+ flex: none
279
+ width: 50%
280
+ &.is-one-third-desktop
281
+ flex: none
282
+ width: 33.3333%
283
+ &.is-one-quarter-desktop
284
+ flex: none
285
+ width: 25%
286
+ &.is-one-fifth-desktop
287
+ flex: none
288
+ width: 20%
289
+ &.is-two-fifths-desktop
290
+ flex: none
291
+ width: 40%
292
+ &.is-three-fifths-desktop
293
+ flex: none
294
+ width: 60%
295
+ &.is-four-fifths-desktop
296
+ flex: none
297
+ width: 80%
298
+ &.is-offset-three-quarters-desktop
299
+ +ltr-property("margin", 75%, false)
300
+ &.is-offset-two-thirds-desktop
301
+ +ltr-property("margin", 66.6666%, false)
302
+ &.is-offset-half-desktop
303
+ +ltr-property("margin", 50%, false)
304
+ &.is-offset-one-third-desktop
305
+ +ltr-property("margin", 33.3333%, false)
306
+ &.is-offset-one-quarter-desktop
307
+ +ltr-property("margin", 25%, false)
308
+ &.is-offset-one-fifth-desktop
309
+ +ltr-property("margin", 20%, false)
310
+ &.is-offset-two-fifths-desktop
311
+ +ltr-property("margin", 40%, false)
312
+ &.is-offset-three-fifths-desktop
313
+ +ltr-property("margin", 60%, false)
314
+ &.is-offset-four-fifths-desktop
315
+ +ltr-property("margin", 80%, false)
316
+ @for $i from 0 through 12
317
+ &.is-#{$i}-desktop
318
+ flex: none
319
+ width: percentage($i / 12)
320
+ &.is-offset-#{$i}-desktop
321
+ +ltr-property("margin", percentage($i / 12), false)
322
+ +widescreen
323
+ &.is-narrow-widescreen
324
+ flex: none
325
+ width: unset
326
+ &.is-full-widescreen
327
+ flex: none
328
+ width: 100%
329
+ &.is-three-quarters-widescreen
330
+ flex: none
331
+ width: 75%
332
+ &.is-two-thirds-widescreen
333
+ flex: none
334
+ width: 66.6666%
335
+ &.is-half-widescreen
336
+ flex: none
337
+ width: 50%
338
+ &.is-one-third-widescreen
339
+ flex: none
340
+ width: 33.3333%
341
+ &.is-one-quarter-widescreen
342
+ flex: none
343
+ width: 25%
344
+ &.is-one-fifth-widescreen
345
+ flex: none
346
+ width: 20%
347
+ &.is-two-fifths-widescreen
348
+ flex: none
349
+ width: 40%
350
+ &.is-three-fifths-widescreen
351
+ flex: none
352
+ width: 60%
353
+ &.is-four-fifths-widescreen
354
+ flex: none
355
+ width: 80%
356
+ &.is-offset-three-quarters-widescreen
357
+ +ltr-property("margin", 75%, false)
358
+ &.is-offset-two-thirds-widescreen
359
+ +ltr-property("margin", 66.6666%, false)
360
+ &.is-offset-half-widescreen
361
+ +ltr-property("margin", 50%, false)
362
+ &.is-offset-one-third-widescreen
363
+ +ltr-property("margin", 33.3333%, false)
364
+ &.is-offset-one-quarter-widescreen
365
+ +ltr-property("margin", 25%, false)
366
+ &.is-offset-one-fifth-widescreen
367
+ +ltr-property("margin", 20%, false)
368
+ &.is-offset-two-fifths-widescreen
369
+ +ltr-property("margin", 40%, false)
370
+ &.is-offset-three-fifths-widescreen
371
+ +ltr-property("margin", 60%, false)
372
+ &.is-offset-four-fifths-widescreen
373
+ +ltr-property("margin", 80%, false)
374
+ @for $i from 0 through 12
375
+ &.is-#{$i}-widescreen
376
+ flex: none
377
+ width: percentage($i / 12)
378
+ &.is-offset-#{$i}-widescreen
379
+ +ltr-property("margin", percentage($i / 12), false)
380
+ +fullhd
381
+ &.is-narrow-fullhd
382
+ flex: none
383
+ width: unset
384
+ &.is-full-fullhd
385
+ flex: none
386
+ width: 100%
387
+ &.is-three-quarters-fullhd
388
+ flex: none
389
+ width: 75%
390
+ &.is-two-thirds-fullhd
391
+ flex: none
392
+ width: 66.6666%
393
+ &.is-half-fullhd
394
+ flex: none
395
+ width: 50%
396
+ &.is-one-third-fullhd
397
+ flex: none
398
+ width: 33.3333%
399
+ &.is-one-quarter-fullhd
400
+ flex: none
401
+ width: 25%
402
+ &.is-one-fifth-fullhd
403
+ flex: none
404
+ width: 20%
405
+ &.is-two-fifths-fullhd
406
+ flex: none
407
+ width: 40%
408
+ &.is-three-fifths-fullhd
409
+ flex: none
410
+ width: 60%
411
+ &.is-four-fifths-fullhd
412
+ flex: none
413
+ width: 80%
414
+ &.is-offset-three-quarters-fullhd
415
+ +ltr-property("margin", 75%, false)
416
+ &.is-offset-two-thirds-fullhd
417
+ +ltr-property("margin", 66.6666%, false)
418
+ &.is-offset-half-fullhd
419
+ +ltr-property("margin", 50%, false)
420
+ &.is-offset-one-third-fullhd
421
+ +ltr-property("margin", 33.3333%, false)
422
+ &.is-offset-one-quarter-fullhd
423
+ +ltr-property("margin", 25%, false)
424
+ &.is-offset-one-fifth-fullhd
425
+ +ltr-property("margin", 20%, false)
426
+ &.is-offset-two-fifths-fullhd
427
+ +ltr-property("margin", 40%, false)
428
+ &.is-offset-three-fifths-fullhd
429
+ +ltr-property("margin", 60%, false)
430
+ &.is-offset-four-fifths-fullhd
431
+ +ltr-property("margin", 80%, false)
432
+ @for $i from 0 through 12
433
+ &.is-#{$i}-fullhd
434
+ flex: none
435
+ width: percentage($i / 12)
436
+ &.is-offset-#{$i}-fullhd
437
+ +ltr-property("margin", percentage($i / 12), false)
438
+
439
+ .columns
440
+ +ltr-property("margin", (-$column-gap), false)
441
+ +ltr-property("margin", (-$column-gap))
442
+ margin-top: (-$column-gap)
443
+ &:last-child
444
+ margin-bottom: (-$column-gap)
445
+ &:not(:last-child)
446
+ margin-bottom: calc(1.5rem - #{$column-gap})
447
+ // Modifiers
448
+ &.is-centered
449
+ justify-content: center
450
+ &.is-gapless
451
+ +ltr-property("margin", 0, false)
452
+ +ltr-property("margin", 0)
453
+ margin-top: 0
454
+ & > .column
455
+ margin: 0
456
+ padding: 0 !important
457
+ &:not(:last-child)
458
+ margin-bottom: 1.5rem
459
+ &:last-child
460
+ margin-bottom: 0
461
+ &.is-mobile
462
+ display: flex
463
+ &.is-multiline
464
+ flex-wrap: wrap
465
+ &.is-vcentered
466
+ align-items: center
467
+ // Responsiveness
468
+ +tablet
469
+ &:not(.is-desktop)
470
+ display: flex
471
+ +desktop
472
+ // Modifiers
473
+ &.is-desktop
474
+ display: flex
475
+
476
+ @if $variable-columns
477
+ .columns.is-variable
478
+ --columnGap: 0.75rem
479
+ +ltr-property("margin", calc(-1 * var(--columnGap)), false)
480
+ +ltr-property("margin", calc(-1 * var(--columnGap)))
481
+ > .column
482
+ padding-left: var(--columnGap)
483
+ padding-right: var(--columnGap)
484
+ @for $i from 0 through 8
485
+ &.is-#{$i}
486
+ --columnGap: #{$i * 0.25rem}
487
+ +mobile
488
+ &.is-#{$i}-mobile
489
+ --columnGap: #{$i * 0.25rem}
490
+ +tablet
491
+ &.is-#{$i}-tablet
492
+ --columnGap: #{$i * 0.25rem}
493
+ +tablet-only
494
+ &.is-#{$i}-tablet-only
495
+ --columnGap: #{$i * 0.25rem}
496
+ +touch
497
+ &.is-#{$i}-touch
498
+ --columnGap: #{$i * 0.25rem}
499
+ +desktop
500
+ &.is-#{$i}-desktop
501
+ --columnGap: #{$i * 0.25rem}
502
+ +desktop-only
503
+ &.is-#{$i}-desktop-only
504
+ --columnGap: #{$i * 0.25rem}
505
+ +widescreen
506
+ &.is-#{$i}-widescreen
507
+ --columnGap: #{$i * 0.25rem}
508
+ +widescreen-only
509
+ &.is-#{$i}-widescreen-only
510
+ --columnGap: #{$i * 0.25rem}
511
+ +fullhd
512
+ &.is-#{$i}-fullhd
513
+ --columnGap: #{$i * 0.25rem}