jekyll-bulma 0.9.2 → 0.9.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_sass/base/_all.sass +4 -3
- data/_sass/base/animations.sass +5 -0
- data/_sass/base/generic.sass +4 -1
- data/_sass/base/helpers.sass +1 -281
- data/_sass/base/minireset.sass +1 -1
- data/_sass/bulma.sass +2 -1
- data/_sass/components/_all.sass +13 -13
- data/_sass/components/breadcrumb.sass +5 -3
- data/_sass/components/card.sass +26 -2
- data/_sass/components/dropdown.sass +6 -4
- data/_sass/components/level.sass +5 -3
- data/_sass/components/media.sass +25 -16
- data/_sass/components/menu.sass +4 -2
- data/_sass/components/message.sass +3 -1
- data/_sass/components/modal.sass +8 -4
- data/_sass/components/navbar.sass +24 -21
- data/_sass/components/pagination.sass +19 -3
- data/_sass/components/panel.sass +7 -4
- data/_sass/components/tabs.sass +37 -12
- data/_sass/elements/_all.sass +13 -12
- data/_sass/elements/box.sass +3 -1
- data/_sass/elements/button.sass +43 -20
- data/_sass/elements/container.sass +12 -7
- data/_sass/elements/content.sass +9 -5
- data/_sass/elements/icon.sass +25 -0
- data/_sass/elements/image.sass +2 -0
- data/_sass/elements/notification.sass +19 -3
- data/_sass/elements/other.sass +2 -10
- data/_sass/elements/progress.sass +7 -1
- data/_sass/elements/table.sass +8 -2
- data/_sass/elements/tag.sass +29 -17
- data/_sass/elements/title.sass +2 -2
- data/_sass/form/_all.sass +7 -6
- data/_sass/form/checkbox-radio.sass +3 -2
- data/_sass/form/file.sass +14 -10
- data/_sass/form/input-textarea.sass +4 -2
- data/_sass/form/select.sass +9 -7
- data/_sass/form/shared.sass +8 -3
- data/_sass/form/tools.sass +21 -11
- data/_sass/grid/_all.sass +3 -2
- data/_sass/grid/columns.sass +93 -84
- data/_sass/grid/tiles.sass +3 -1
- data/_sass/helpers/_all.sass +12 -0
- data/_sass/helpers/color.sass +39 -0
- data/_sass/helpers/flexbox.sass +35 -0
- data/_sass/helpers/float.sass +10 -0
- data/_sass/helpers/other.sass +14 -0
- data/_sass/helpers/overflow.sass +2 -0
- data/_sass/helpers/position.sass +7 -0
- data/_sass/helpers/spacing.sass +31 -0
- data/_sass/helpers/typography.sass +103 -0
- data/_sass/helpers/visibility.sass +122 -0
- data/_sass/jekyll-bulma.code-workspace +8 -0
- data/_sass/layout/_all.sass +4 -3
- data/_sass/layout/footer.sass +2 -0
- data/_sass/layout/hero.sass +31 -21
- data/_sass/layout/section.sass +6 -2
- data/_sass/utilities/_all.sass +7 -6
- data/_sass/utilities/animations.sass +1 -5
- data/_sass/utilities/controls.sass +2 -3
- data/_sass/utilities/derived-variables.sass +9 -1
- data/_sass/utilities/extends.sass +25 -0
- data/_sass/utilities/functions.sass +42 -4
- data/_sass/utilities/initial-variables.sass +6 -5
- data/_sass/utilities/mixins.sass +46 -27
- metadata +16 -4
- data/_sass/components/list.sass +0 -39
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$navbar-background-color: $scheme-main !default
|
2
4
|
$navbar-box-shadow-size: 0 2px 0 0 !default
|
3
5
|
$navbar-box-shadow-color: $background !default
|
@@ -32,7 +34,7 @@ $navbar-dropdown-radius: $radius-large !default
|
|
32
34
|
$navbar-dropdown-z: 20 !default
|
33
35
|
|
34
36
|
$navbar-dropdown-boxed-radius: $radius-large !default
|
35
|
-
$navbar-dropdown-boxed-shadow: 0 8px 8px
|
37
|
+
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
|
36
38
|
|
37
39
|
$navbar-dropdown-item-hover-color: $scheme-invert !default
|
38
40
|
$navbar-dropdown-item-hover-background-color: $background !default
|
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
|
46
48
|
|
47
49
|
$navbar-breakpoint: $desktop !default
|
48
50
|
|
51
|
+
$navbar-colors: $colors !default
|
52
|
+
|
49
53
|
=navbar-fixed
|
50
54
|
left: 0
|
51
55
|
position: fixed
|
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
|
|
57
61
|
min-height: $navbar-height
|
58
62
|
position: relative
|
59
63
|
z-index: $navbar-z
|
60
|
-
@each $name, $pair in $colors
|
64
|
+
@each $name, $pair in $navbar-colors
|
61
65
|
$color: nth($pair, 1)
|
62
66
|
$color-invert: nth($pair, 2)
|
63
67
|
&.is-#{$name}
|
@@ -72,7 +76,7 @@ $navbar-breakpoint: $desktop !default
|
|
72
76
|
&:focus,
|
73
77
|
&:hover,
|
74
78
|
&.is-active
|
75
|
-
background-color:
|
79
|
+
background-color: bulmaDarken($color, 5%)
|
76
80
|
color: $color-invert
|
77
81
|
.navbar-link
|
78
82
|
&::after
|
@@ -90,7 +94,7 @@ $navbar-breakpoint: $desktop !default
|
|
90
94
|
&:focus,
|
91
95
|
&:hover,
|
92
96
|
&.is-active
|
93
|
-
background-color:
|
97
|
+
background-color: bulmaDarken($color, 5%)
|
94
98
|
color: $color-invert
|
95
99
|
.navbar-link
|
96
100
|
&::after
|
@@ -98,7 +102,7 @@ $navbar-breakpoint: $desktop !default
|
|
98
102
|
.navbar-item.has-dropdown:focus .navbar-link,
|
99
103
|
.navbar-item.has-dropdown:hover .navbar-link,
|
100
104
|
.navbar-item.has-dropdown.is-active .navbar-link
|
101
|
-
background-color:
|
105
|
+
background-color: bulmaDarken($color, 5%)
|
102
106
|
color: $color-invert
|
103
107
|
.navbar-dropdown
|
104
108
|
a.navbar-item
|
@@ -149,9 +153,10 @@ body
|
|
149
153
|
overflow-y: hidden
|
150
154
|
|
151
155
|
.navbar-burger
|
156
|
+
@extend %reset
|
152
157
|
color: $navbar-burger-color
|
153
158
|
+hamburger($navbar-height)
|
154
|
-
margin
|
159
|
+
+ltr-property("margin", auto, false)
|
155
160
|
|
156
161
|
.navbar-menu
|
157
162
|
display: none
|
@@ -179,7 +184,6 @@ a.navbar-item,
|
|
179
184
|
color: $navbar-item-hover-color
|
180
185
|
|
181
186
|
.navbar-item
|
182
|
-
display: block
|
183
187
|
flex-grow: 0
|
184
188
|
flex-shrink: 0
|
185
189
|
img
|
@@ -210,12 +214,12 @@ a.navbar-item,
|
|
210
214
|
flex-shrink: 1
|
211
215
|
|
212
216
|
.navbar-link:not(.is-arrowless)
|
213
|
-
padding
|
217
|
+
+ltr-property("padding", 2.5em)
|
214
218
|
&::after
|
215
219
|
@extend %arrow
|
216
220
|
border-color: $navbar-dropdown-arrow
|
217
221
|
margin-top: -0.375em
|
218
|
-
|
222
|
+
+ltr-position(1.125em)
|
219
223
|
|
220
224
|
.navbar-dropdown
|
221
225
|
font-size: 0.875rem
|
@@ -245,7 +249,7 @@ a.navbar-item,
|
|
245
249
|
display: none
|
246
250
|
.navbar-menu
|
247
251
|
background-color: $navbar-background-color
|
248
|
-
box-shadow: 0 8px 16px
|
252
|
+
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
|
249
253
|
padding: 0.5rem 0
|
250
254
|
&.is-active
|
251
255
|
display: block
|
@@ -257,7 +261,7 @@ a.navbar-item,
|
|
257
261
|
&.is-fixed-bottom-touch
|
258
262
|
bottom: 0
|
259
263
|
&.has-shadow
|
260
|
-
box-shadow: 0 -2px 3px
|
264
|
+
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
|
261
265
|
&.is-fixed-top-touch
|
262
266
|
top: 0
|
263
267
|
&.is-fixed-top,
|
@@ -320,7 +324,6 @@ a.navbar-item,
|
|
320
324
|
align-items: center
|
321
325
|
display: flex
|
322
326
|
.navbar-item
|
323
|
-
display: flex
|
324
327
|
&.has-dropdown
|
325
328
|
align-items: stretch
|
326
329
|
&.has-dropdown-up
|
@@ -331,7 +334,7 @@ a.navbar-item,
|
|
331
334
|
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
332
335
|
border-top: none
|
333
336
|
bottom: 100%
|
334
|
-
box-shadow: 0 -8px 8px
|
337
|
+
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
|
335
338
|
top: auto
|
336
339
|
&.is-active,
|
337
340
|
&.is-hoverable:focus,
|
@@ -349,19 +352,19 @@ a.navbar-item,
|
|
349
352
|
flex-shrink: 0
|
350
353
|
.navbar-start
|
351
354
|
justify-content: flex-start
|
352
|
-
margin
|
355
|
+
+ltr-property("margin", auto)
|
353
356
|
.navbar-end
|
354
357
|
justify-content: flex-end
|
355
|
-
margin
|
358
|
+
+ltr-property("margin", auto, false)
|
356
359
|
.navbar-dropdown
|
357
360
|
background-color: $navbar-dropdown-background-color
|
358
361
|
border-bottom-left-radius: $navbar-dropdown-radius
|
359
362
|
border-bottom-right-radius: $navbar-dropdown-radius
|
360
363
|
border-top: $navbar-dropdown-border-top
|
361
|
-
box-shadow: 0 8px 8px
|
364
|
+
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
|
362
365
|
display: none
|
363
366
|
font-size: 0.875rem
|
364
|
-
|
367
|
+
+ltr-position(0, false)
|
365
368
|
min-width: 100%
|
366
369
|
position: absolute
|
367
370
|
top: 100%
|
@@ -370,7 +373,7 @@ a.navbar-item,
|
|
370
373
|
padding: 0.375rem 1rem
|
371
374
|
white-space: nowrap
|
372
375
|
a.navbar-item
|
373
|
-
padding
|
376
|
+
+ltr-property("padding", 3rem)
|
374
377
|
&:focus,
|
375
378
|
&:hover
|
376
379
|
background-color: $navbar-dropdown-item-hover-background-color
|
@@ -398,9 +401,9 @@ a.navbar-item,
|
|
398
401
|
.navbar > .container,
|
399
402
|
.container > .navbar
|
400
403
|
.navbar-brand
|
401
|
-
margin
|
404
|
+
+ltr-property("margin", -.75rem, false)
|
402
405
|
.navbar-menu
|
403
|
-
margin
|
406
|
+
+ltr-property("margin", -.75rem)
|
404
407
|
// Fixed navbar
|
405
408
|
.navbar
|
406
409
|
&.is-fixed-bottom-desktop,
|
@@ -409,7 +412,7 @@ a.navbar-item,
|
|
409
412
|
&.is-fixed-bottom-desktop
|
410
413
|
bottom: 0
|
411
414
|
&.has-shadow
|
412
|
-
box-shadow: 0 -2px 3px
|
415
|
+
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
|
413
416
|
&.is-fixed-top-desktop
|
414
417
|
top: 0
|
415
418
|
html,
|
@@ -1,3 +1,6 @@
|
|
1
|
+
@import "../utilities/controls"
|
2
|
+
@import "../utilities/mixins"
|
3
|
+
|
1
4
|
$pagination-color: $text-strong !default
|
2
5
|
$pagination-border-color: $border !default
|
3
6
|
$pagination-margin: -0.25rem !default
|
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
|
|
8
11
|
$pagination-item-padding-left: 0.5em !default
|
9
12
|
$pagination-item-padding-right: 0.5em !default
|
10
13
|
|
14
|
+
$pagination-nav-padding-left: 0.75em !default
|
15
|
+
$pagination-nav-padding-right: 0.75em !default
|
16
|
+
|
11
17
|
$pagination-hover-color: $link-hover !default
|
12
18
|
$pagination-hover-border-color: $link-hover-border !default
|
13
19
|
|
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default
|
|
27
33
|
|
28
34
|
$pagination-ellipsis-color: $grey-light !default
|
29
35
|
|
30
|
-
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
|
36
|
+
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
|
31
37
|
|
32
38
|
.pagination
|
33
39
|
@extend %block
|
@@ -91,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
|
|
91
97
|
|
92
98
|
.pagination-previous,
|
93
99
|
.pagination-next
|
94
|
-
padding-left:
|
95
|
-
padding-right:
|
100
|
+
padding-left: $pagination-nav-padding-left
|
101
|
+
padding-right: $pagination-nav-padding-right
|
96
102
|
white-space: nowrap
|
97
103
|
|
98
104
|
.pagination-link
|
@@ -107,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
|
|
107
113
|
|
108
114
|
.pagination-list
|
109
115
|
flex-wrap: wrap
|
116
|
+
li
|
117
|
+
list-style: none
|
110
118
|
|
111
119
|
+mobile
|
112
120
|
.pagination
|
@@ -126,12 +134,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
|
|
126
134
|
flex-shrink: 1
|
127
135
|
justify-content: flex-start
|
128
136
|
order: 1
|
137
|
+
.pagination-previous,
|
138
|
+
.pagination-next,
|
139
|
+
.pagination-link,
|
140
|
+
.pagination-ellipsis
|
141
|
+
margin-bottom: 0
|
142
|
+
margin-top: 0
|
129
143
|
.pagination-previous
|
130
144
|
order: 2
|
131
145
|
.pagination-next
|
132
146
|
order: 3
|
133
147
|
.pagination
|
134
148
|
justify-content: space-between
|
149
|
+
margin-bottom: 0
|
150
|
+
margin-top: 0
|
135
151
|
&.is-centered
|
136
152
|
.pagination-previous
|
137
153
|
order: 1
|
data/_sass/components/panel.sass
CHANGED
@@ -1,7 +1,9 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$panel-margin: $block-spacing !default
|
2
4
|
$panel-item-border: 1px solid $border-light !default
|
3
5
|
$panel-radius: $radius-large !default
|
4
|
-
$panel-shadow:
|
6
|
+
$panel-shadow: $shadow !default
|
5
7
|
|
6
8
|
$panel-heading-background-color: $border-light !default
|
7
9
|
$panel-heading-color: $text-strong !default
|
@@ -26,6 +28,7 @@ $panel-block-active-color: $link-active !default
|
|
26
28
|
$panel-block-active-icon-color: $link !default
|
27
29
|
|
28
30
|
$panel-icon-color: $text-light !default
|
31
|
+
$panel-colors: $colors !default
|
29
32
|
|
30
33
|
.panel
|
31
34
|
border-radius: $panel-radius
|
@@ -34,7 +37,7 @@ $panel-icon-color: $text-light !default
|
|
34
37
|
&:not(:last-child)
|
35
38
|
margin-bottom: $panel-margin
|
36
39
|
// Colors
|
37
|
-
@each $name, $components in $
|
40
|
+
@each $name, $components in $panel-colors
|
38
41
|
$color: nth($components, 1)
|
39
42
|
$color-invert: nth($components, 2)
|
40
43
|
&.is-#{$name}
|
@@ -87,7 +90,7 @@ $panel-icon-color: $text-light !default
|
|
87
90
|
justify-content: flex-start
|
88
91
|
padding: 0.5em 0.75em
|
89
92
|
input[type="checkbox"]
|
90
|
-
margin
|
93
|
+
+ltr-property("margin", 0.75em)
|
91
94
|
& > .control
|
92
95
|
flex-grow: 1
|
93
96
|
flex-shrink: 1
|
@@ -112,7 +115,7 @@ label.panel-block
|
|
112
115
|
.panel-icon
|
113
116
|
+fa(14px, 1em)
|
114
117
|
color: $panel-icon-color
|
115
|
-
margin
|
118
|
+
+ltr-property("margin", 0.75em)
|
116
119
|
.fa
|
117
120
|
font-size: inherit
|
118
121
|
line-height: inherit
|
data/_sass/components/tabs.sass
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$tabs-border-bottom-color: $border !default
|
2
4
|
$tabs-border-bottom-style: solid !default
|
3
5
|
$tabs-border-bottom-width: 1px !default
|
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|
78
80
|
padding-left: 0.75em
|
79
81
|
.icon
|
80
82
|
&:first-child
|
81
|
-
margin
|
83
|
+
+ltr-property("margin", 0.5em)
|
82
84
|
&:last-child
|
83
|
-
margin
|
85
|
+
+ltr-property("margin", 0.5em, false)
|
84
86
|
// Alignment
|
85
87
|
&.is-centered
|
86
88
|
ul
|
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|
92
94
|
&.is-boxed
|
93
95
|
a
|
94
96
|
border: 1px solid transparent
|
95
|
-
|
97
|
+
+ltr
|
98
|
+
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
|
99
|
+
+rtl
|
100
|
+
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
|
96
101
|
&:hover
|
97
102
|
background-color: $tabs-boxed-link-hover-background-color
|
98
103
|
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
|
@@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|
119
124
|
z-index: 2
|
120
125
|
li
|
121
126
|
& + li
|
122
|
-
margin
|
127
|
+
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
|
123
128
|
&:first-child a
|
124
|
-
|
129
|
+
+ltr
|
130
|
+
border-top-left-radius: $tabs-toggle-link-radius
|
131
|
+
border-bottom-left-radius: $tabs-toggle-link-radius
|
132
|
+
+rtl
|
133
|
+
border-top-right-radius: $tabs-toggle-link-radius
|
134
|
+
border-bottom-right-radius: $tabs-toggle-link-radius
|
125
135
|
&:last-child a
|
126
|
-
|
136
|
+
+ltr
|
137
|
+
border-top-right-radius: $tabs-toggle-link-radius
|
138
|
+
border-bottom-right-radius: $tabs-toggle-link-radius
|
139
|
+
+rtl
|
140
|
+
border-top-left-radius: $tabs-toggle-link-radius
|
141
|
+
border-bottom-left-radius: $tabs-toggle-link-radius
|
127
142
|
&.is-active
|
128
143
|
a
|
129
144
|
background-color: $tabs-toggle-link-active-background-color
|
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|
135
150
|
&.is-toggle-rounded
|
136
151
|
li
|
137
152
|
&:first-child a
|
138
|
-
|
139
|
-
|
140
|
-
|
153
|
+
+ltr
|
154
|
+
border-bottom-left-radius: $radius-rounded
|
155
|
+
border-top-left-radius: $radius-rounded
|
156
|
+
padding-left: 1.25em
|
157
|
+
+rtl
|
158
|
+
border-bottom-right-radius: $radius-rounded
|
159
|
+
border-top-right-radius: $radius-rounded
|
160
|
+
padding-right: 1.25em
|
141
161
|
&:last-child a
|
142
|
-
|
143
|
-
|
144
|
-
|
162
|
+
+ltr
|
163
|
+
border-bottom-right-radius: $radius-rounded
|
164
|
+
border-top-right-radius: $radius-rounded
|
165
|
+
padding-right: 1.25em
|
166
|
+
+rtl
|
167
|
+
border-bottom-left-radius: $radius-rounded
|
168
|
+
border-top-left-radius: $radius-rounded
|
169
|
+
padding-left: 1.25em
|
145
170
|
// Sizes
|
146
171
|
&.is-small
|
147
172
|
font-size: $size-small
|
data/_sass/elements/_all.sass
CHANGED
@@ -1,15 +1,16 @@
|
|
1
|
+
/* Bulma Elements */
|
1
2
|
@charset "utf-8"
|
2
3
|
|
3
|
-
@import "box
|
4
|
-
@import "button
|
5
|
-
@import "container
|
6
|
-
@import "content
|
7
|
-
@import "icon
|
8
|
-
@import "image
|
9
|
-
@import "notification
|
10
|
-
@import "progress
|
11
|
-
@import "table
|
12
|
-
@import "tag
|
13
|
-
@import "title
|
4
|
+
@import "box"
|
5
|
+
@import "button"
|
6
|
+
@import "container"
|
7
|
+
@import "content"
|
8
|
+
@import "icon"
|
9
|
+
@import "image"
|
10
|
+
@import "notification"
|
11
|
+
@import "progress"
|
12
|
+
@import "table"
|
13
|
+
@import "tag"
|
14
|
+
@import "title"
|
14
15
|
|
15
|
-
@import "other
|
16
|
+
@import "other"
|
data/_sass/elements/box.sass
CHANGED
@@ -1,7 +1,9 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$box-color: $text !default
|
2
4
|
$box-background-color: $scheme-main !default
|
3
5
|
$box-radius: $radius-large !default
|
4
|
-
$box-shadow:
|
6
|
+
$box-shadow: $shadow !default
|
5
7
|
$box-padding: 1.25rem !default
|
6
8
|
|
7
9
|
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
|
data/_sass/elements/button.sass
CHANGED
@@ -1,3 +1,6 @@
|
|
1
|
+
@import "../utilities/controls"
|
2
|
+
@import "../utilities/mixins"
|
3
|
+
|
1
4
|
$button-color: $text-strong !default
|
2
5
|
$button-background-color: $scheme-main !default
|
3
6
|
$button-family: false !default
|
@@ -14,15 +17,23 @@ $button-hover-border-color: $link-hover-border !default
|
|
14
17
|
$button-focus-color: $link-focus !default
|
15
18
|
$button-focus-border-color: $link-focus-border !default
|
16
19
|
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
17
|
-
$button-focus-box-shadow-color:
|
20
|
+
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
18
21
|
|
19
22
|
$button-active-color: $link-active !default
|
20
23
|
$button-active-border-color: $link-active-border !default
|
21
24
|
|
22
25
|
$button-text-color: $text !default
|
26
|
+
$button-text-decoration: underline !default
|
23
27
|
$button-text-hover-background-color: $background !default
|
24
28
|
$button-text-hover-color: $text-strong !default
|
25
29
|
|
30
|
+
$button-ghost-background: none !default
|
31
|
+
$button-ghost-border-color: transparent !default
|
32
|
+
$button-ghost-color: $link !default
|
33
|
+
$button-ghost-decoration: none !default
|
34
|
+
$button-ghost-hover-color: $link !default
|
35
|
+
$button-ghost-hover-decoration: underline !default
|
36
|
+
|
26
37
|
$button-disabled-background-color: $scheme-main !default
|
27
38
|
$button-disabled-border-color: $border !default
|
28
39
|
$button-disabled-shadow: none !default
|
@@ -32,9 +43,12 @@ $button-static-color: $text-light !default
|
|
32
43
|
$button-static-background-color: $scheme-main-ter !default
|
33
44
|
$button-static-border-color: $border !default
|
34
45
|
|
46
|
+
$button-colors: $colors !default
|
47
|
+
|
35
48
|
// The button sizes use mixins so they can be used at different breakpoints
|
36
49
|
=button-small
|
37
|
-
|
50
|
+
&:not(.is-rounded)
|
51
|
+
border-radius: $radius-small
|
38
52
|
font-size: $size-small
|
39
53
|
=button-normal
|
40
54
|
font-size: $size-normal
|
@@ -70,14 +84,14 @@ $button-static-border-color: $border !default
|
|
70
84
|
height: 1.5em
|
71
85
|
width: 1.5em
|
72
86
|
&:first-child:not(:last-child)
|
73
|
-
margin
|
74
|
-
margin
|
87
|
+
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
|
88
|
+
+ltr-property("margin", $button-padding-horizontal * 0.25)
|
75
89
|
&:last-child:not(:first-child)
|
76
|
-
margin
|
77
|
-
margin
|
90
|
+
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
|
91
|
+
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
|
78
92
|
&:first-child:last-child
|
79
|
-
margin-left: calc(#{-
|
80
|
-
margin-right: calc(#{-
|
93
|
+
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
94
|
+
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
81
95
|
// States
|
82
96
|
&:hover,
|
83
97
|
&.is-hovered
|
@@ -98,7 +112,7 @@ $button-static-border-color: $border !default
|
|
98
112
|
background-color: transparent
|
99
113
|
border-color: transparent
|
100
114
|
color: $button-text-color
|
101
|
-
text-decoration:
|
115
|
+
text-decoration: $button-text-decoration
|
102
116
|
&:hover,
|
103
117
|
&.is-hovered,
|
104
118
|
&:focus,
|
@@ -107,14 +121,23 @@ $button-static-border-color: $border !default
|
|
107
121
|
color: $button-text-hover-color
|
108
122
|
&:active,
|
109
123
|
&.is-active
|
110
|
-
background-color:
|
124
|
+
background-color: bulmaDarken($button-text-hover-background-color, 5%)
|
111
125
|
color: $button-text-hover-color
|
112
126
|
&[disabled],
|
113
127
|
fieldset[disabled] &
|
114
128
|
background-color: transparent
|
115
129
|
border-color: transparent
|
116
130
|
box-shadow: none
|
117
|
-
|
131
|
+
&.is-ghost
|
132
|
+
background: $button-ghost-background
|
133
|
+
border-color: $button-ghost-border-color
|
134
|
+
color: $button-ghost-color
|
135
|
+
text-decoration: $button-ghost-decoration
|
136
|
+
&:hover,
|
137
|
+
&.is-hovered
|
138
|
+
color: $button-ghost-hover-color
|
139
|
+
text-decoration: $button-ghost-hover-decoration
|
140
|
+
@each $name, $pair in $button-colors
|
118
141
|
$color: nth($pair, 1)
|
119
142
|
$color-invert: nth($pair, 2)
|
120
143
|
&.is-#{$name}
|
@@ -123,7 +146,7 @@ $button-static-border-color: $border !default
|
|
123
146
|
color: $color-invert
|
124
147
|
&:hover,
|
125
148
|
&.is-hovered
|
126
|
-
background-color:
|
149
|
+
background-color: bulmaDarken($color, 2.5%)
|
127
150
|
border-color: transparent
|
128
151
|
color: $color-invert
|
129
152
|
&:focus,
|
@@ -131,10 +154,10 @@ $button-static-border-color: $border !default
|
|
131
154
|
border-color: transparent
|
132
155
|
color: $color-invert
|
133
156
|
&:not(:active)
|
134
|
-
box-shadow: $button-focus-box-shadow-size
|
157
|
+
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
|
135
158
|
&:active,
|
136
159
|
&.is-active
|
137
|
-
background-color:
|
160
|
+
background-color: bulmaDarken($color, 5%)
|
138
161
|
border-color: transparent
|
139
162
|
color: $color-invert
|
140
163
|
&[disabled],
|
@@ -147,7 +170,7 @@ $button-static-border-color: $border !default
|
|
147
170
|
color: $color
|
148
171
|
&:hover,
|
149
172
|
&.is-hovered
|
150
|
-
background-color:
|
173
|
+
background-color: bulmaDarken($color-invert, 5%)
|
151
174
|
&[disabled],
|
152
175
|
fieldset[disabled] &
|
153
176
|
background-color: $color-invert
|
@@ -215,12 +238,12 @@ $button-static-border-color: $border !default
|
|
215
238
|
color: $color-dark
|
216
239
|
&:hover,
|
217
240
|
&.is-hovered
|
218
|
-
background-color:
|
241
|
+
background-color: bulmaDarken($color-light, 2.5%)
|
219
242
|
border-color: transparent
|
220
243
|
color: $color-dark
|
221
244
|
&:active,
|
222
245
|
&.is-active
|
223
|
-
background-color:
|
246
|
+
background-color: bulmaDarken($color-light, 5%)
|
224
247
|
border-color: transparent
|
225
248
|
color: $color-dark
|
226
249
|
// Sizes
|
@@ -268,7 +291,7 @@ $button-static-border-color: $border !default
|
|
268
291
|
.button
|
269
292
|
margin-bottom: 0.5rem
|
270
293
|
&:not(:last-child):not(.is-fullwidth)
|
271
|
-
margin
|
294
|
+
+ltr-property("margin", 0.5rem)
|
272
295
|
&:last-child
|
273
296
|
margin-bottom: -0.5rem
|
274
297
|
&:not(:last-child)
|
@@ -291,9 +314,9 @@ $button-static-border-color: $border !default
|
|
291
314
|
&:not(:last-child)
|
292
315
|
border-bottom-right-radius: 0
|
293
316
|
border-top-right-radius: 0
|
294
|
-
margin
|
317
|
+
+ltr-property("margin", -1px)
|
295
318
|
&:last-child
|
296
|
-
margin
|
319
|
+
+ltr-property("margin", 0)
|
297
320
|
&:hover,
|
298
321
|
&.is-hovered
|
299
322
|
z-index: 2
|
@@ -1,4 +1,7 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$container-offset: (2 * $gap) !default
|
4
|
+
$container-max-width: $fullhd !default
|
2
5
|
|
3
6
|
.container
|
4
7
|
flex-grow: 1
|
@@ -6,19 +9,21 @@ $container-offset: (2 * $gap) !default
|
|
6
9
|
position: relative
|
7
10
|
width: auto
|
8
11
|
&.is-fluid
|
9
|
-
max-width: none
|
12
|
+
max-width: none !important
|
10
13
|
padding-left: $gap
|
11
14
|
padding-right: $gap
|
12
15
|
width: 100%
|
13
16
|
+desktop
|
14
17
|
max-width: $desktop - $container-offset
|
15
18
|
+until-widescreen
|
16
|
-
&.is-widescreen
|
17
|
-
max-width: $widescreen - $container-offset
|
19
|
+
&.is-widescreen:not(.is-max-desktop)
|
20
|
+
max-width: min($widescreen, $container-max-width) - $container-offset
|
18
21
|
+until-fullhd
|
19
|
-
&.is-fullhd
|
20
|
-
max-width: $fullhd - $container-offset
|
22
|
+
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
|
23
|
+
max-width: min($fullhd, $container-max-width) - $container-offset
|
21
24
|
+widescreen
|
22
|
-
max-
|
25
|
+
&:not(.is-max-desktop)
|
26
|
+
max-width: min($widescreen, $container-max-width) - $container-offset
|
23
27
|
+fullhd
|
24
|
-
max-
|
28
|
+
&:not(.is-max-desktop):not(.is-max-widescreen)
|
29
|
+
max-width: min($fullhd, $container-max-width) - $container-offset
|
data/_sass/elements/content.sass
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
@import "../utilities/mixins"
|
2
|
+
|
1
3
|
$content-heading-color: $text-strong !default
|
2
4
|
$content-heading-weight: $weight-semibold !default
|
3
5
|
$content-heading-line-height: 1.125 !default
|
@@ -67,11 +69,11 @@ $content-table-foot-cell-color: $text-strong !default
|
|
67
69
|
margin-bottom: 1em
|
68
70
|
blockquote
|
69
71
|
background-color: $content-blockquote-background-color
|
70
|
-
border
|
72
|
+
+ltr-property("border", $content-blockquote-border-left, false)
|
71
73
|
padding: $content-blockquote-padding
|
72
74
|
ol
|
73
75
|
list-style-position: outside
|
74
|
-
margin
|
76
|
+
+ltr-property("margin", 2em, false)
|
75
77
|
margin-top: 1em
|
76
78
|
&:not([type])
|
77
79
|
list-style-type: decimal
|
@@ -85,7 +87,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|
85
87
|
list-style-type: upper-roman
|
86
88
|
ul
|
87
89
|
list-style: disc outside
|
88
|
-
margin
|
90
|
+
+ltr-property("margin", 2em, false)
|
89
91
|
margin-top: 1em
|
90
92
|
ul
|
91
93
|
list-style-type: circle
|
@@ -93,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|
93
95
|
ul
|
94
96
|
list-style-type: square
|
95
97
|
dd
|
96
|
-
margin
|
98
|
+
+ltr-property("margin", 2em, false)
|
97
99
|
figure
|
98
100
|
margin-left: 2em
|
99
101
|
margin-right: 2em
|
@@ -126,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|
126
128
|
th
|
127
129
|
color: $content-table-cell-heading-color
|
128
130
|
&:not([align])
|
129
|
-
text-align:
|
131
|
+
text-align: inherit
|
130
132
|
thead
|
131
133
|
td,
|
132
134
|
th
|
@@ -149,6 +151,8 @@ $content-table-foot-cell-color: $text-strong !default
|
|
149
151
|
// Sizes
|
150
152
|
&.is-small
|
151
153
|
font-size: $size-small
|
154
|
+
&.is-normal
|
155
|
+
font-size: $size-normal
|
152
156
|
&.is-medium
|
153
157
|
font-size: $size-medium
|
154
158
|
&.is-large
|