bulma-sass 0.8.2 → 0.9.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/bulma.sass +2 -1
  3. data/app/assets/stylesheets/sass/base/_all.sass +4 -3
  4. data/app/assets/stylesheets/sass/base/animations.sass +5 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +4 -1
  6. data/app/assets/stylesheets/sass/base/helpers.sass +1 -281
  7. data/app/assets/stylesheets/sass/base/minireset.sass +1 -1
  8. data/app/assets/stylesheets/sass/components/_all.sass +13 -13
  9. data/app/assets/stylesheets/sass/components/breadcrumb.sass +5 -3
  10. data/app/assets/stylesheets/sass/components/card.sass +26 -2
  11. data/app/assets/stylesheets/sass/components/dropdown.sass +6 -4
  12. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  13. data/app/assets/stylesheets/sass/components/media.sass +24 -15
  14. data/app/assets/stylesheets/sass/components/menu.sass +4 -2
  15. data/app/assets/stylesheets/sass/components/message.sass +3 -1
  16. data/app/assets/stylesheets/sass/components/modal.sass +7 -3
  17. data/app/assets/stylesheets/sass/components/navbar.sass +15 -10
  18. data/app/assets/stylesheets/sass/components/pagination.sass +19 -3
  19. data/app/assets/stylesheets/sass/components/panel.sass +5 -3
  20. data/app/assets/stylesheets/sass/components/tabs.sass +37 -12
  21. data/app/assets/stylesheets/sass/elements/_all.sass +13 -12
  22. data/app/assets/stylesheets/sass/elements/box.sass +3 -1
  23. data/app/assets/stylesheets/sass/elements/button.sass +33 -11
  24. data/app/assets/stylesheets/sass/elements/container.sass +12 -7
  25. data/app/assets/stylesheets/sass/elements/content.sass +9 -5
  26. data/app/assets/stylesheets/sass/elements/icon.sass +25 -0
  27. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  28. data/app/assets/stylesheets/sass/elements/notification.sass +12 -3
  29. data/app/assets/stylesheets/sass/elements/other.sass +2 -10
  30. data/app/assets/stylesheets/sass/elements/progress.sass +7 -1
  31. data/app/assets/stylesheets/sass/elements/table.sass +8 -2
  32. data/app/assets/stylesheets/sass/elements/tag.sass +29 -17
  33. data/app/assets/stylesheets/sass/elements/title.sass +2 -2
  34. data/app/assets/stylesheets/sass/form/_all.sass +7 -6
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +3 -2
  36. data/app/assets/stylesheets/sass/form/file.sass +7 -3
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +3 -1
  38. data/app/assets/stylesheets/sass/form/select.sass +7 -5
  39. data/app/assets/stylesheets/sass/form/shared.sass +5 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +21 -11
  41. data/app/assets/stylesheets/sass/grid/_all.sass +3 -2
  42. data/app/assets/stylesheets/sass/grid/columns.sass +93 -84
  43. data/app/assets/stylesheets/sass/grid/tiles.sass +3 -1
  44. data/app/assets/stylesheets/sass/helpers/_all.sass +12 -0
  45. data/app/assets/stylesheets/sass/helpers/color.sass +39 -0
  46. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  47. data/app/assets/stylesheets/sass/helpers/float.sass +10 -0
  48. data/app/assets/stylesheets/sass/helpers/other.sass +14 -0
  49. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  50. data/app/assets/stylesheets/sass/helpers/position.sass +7 -0
  51. data/app/assets/stylesheets/sass/helpers/spacing.sass +31 -0
  52. data/app/assets/stylesheets/sass/helpers/typography.sass +103 -0
  53. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  54. data/app/assets/stylesheets/sass/layout/_all.sass +4 -3
  55. data/app/assets/stylesheets/sass/layout/footer.sass +2 -0
  56. data/app/assets/stylesheets/sass/layout/hero.sass +12 -4
  57. data/app/assets/stylesheets/sass/layout/section.sass +6 -2
  58. data/app/assets/stylesheets/sass/utilities/_all.sass +7 -6
  59. data/app/assets/stylesheets/sass/utilities/animations.sass +1 -5
  60. data/app/assets/stylesheets/sass/utilities/controls.sass +2 -3
  61. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +9 -1
  62. data/app/assets/stylesheets/sass/utilities/extends.sass +25 -0
  63. data/app/assets/stylesheets/sass/utilities/functions.sass +30 -4
  64. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +6 -5
  65. data/app/assets/stylesheets/sass/utilities/mixins.sass +42 -23
  66. data/bulma-sass.gemspec +2 -2
  67. data/lib/bulma/sass/version.rb +1 -1
  68. data/release.sh +2 -2
  69. metadata +18 -7
  70. data/app/assets/stylesheets/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
@@ -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}
@@ -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-left: auto
159
+ +ltr-property("margin", auto, false)
155
160
 
156
161
  .navbar-menu
157
162
  display: none
@@ -209,12 +214,12 @@ a.navbar-item,
209
214
  flex-shrink: 1
210
215
 
211
216
  .navbar-link:not(.is-arrowless)
212
- padding-right: 2.5em
217
+ +ltr-property("padding", 2.5em)
213
218
  &::after
214
219
  @extend %arrow
215
220
  border-color: $navbar-dropdown-arrow
216
221
  margin-top: -0.375em
217
- right: 1.125em
222
+ +ltr-position(1.125em)
218
223
 
219
224
  .navbar-dropdown
220
225
  font-size: 0.875rem
@@ -347,10 +352,10 @@ a.navbar-item,
347
352
  flex-shrink: 0
348
353
  .navbar-start
349
354
  justify-content: flex-start
350
- margin-right: auto
355
+ +ltr-property("margin", auto)
351
356
  .navbar-end
352
357
  justify-content: flex-end
353
- margin-left: auto
358
+ +ltr-property("margin", auto, false)
354
359
  .navbar-dropdown
355
360
  background-color: $navbar-dropdown-background-color
356
361
  border-bottom-left-radius: $navbar-dropdown-radius
@@ -359,7 +364,7 @@ a.navbar-item,
359
364
  box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
360
365
  display: none
361
366
  font-size: 0.875rem
362
- left: 0
367
+ +ltr-position(0, false)
363
368
  min-width: 100%
364
369
  position: absolute
365
370
  top: 100%
@@ -368,7 +373,7 @@ a.navbar-item,
368
373
  padding: 0.375rem 1rem
369
374
  white-space: nowrap
370
375
  a.navbar-item
371
- padding-right: 3rem
376
+ +ltr-property("padding", 3rem)
372
377
  &:focus,
373
378
  &:hover
374
379
  background-color: $navbar-dropdown-item-hover-background-color
@@ -396,9 +401,9 @@ a.navbar-item,
396
401
  .navbar > .container,
397
402
  .container > .navbar
398
403
  .navbar-brand
399
- margin-left: -.75rem
404
+ +ltr-property("margin", -.75rem, false)
400
405
  .navbar-menu
401
- margin-right: -.75rem
406
+ +ltr-property("margin", -.75rem)
402
407
  // Fixed navbar
403
408
  .navbar
404
409
  &.is-fixed-bottom-desktop,
@@ -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: 0.75em
95
- padding-right: 0.75em
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
@@ -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: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
6
+ $panel-shadow: $shadow !default
5
7
 
6
8
  $panel-heading-background-color: $border-light !default
7
9
  $panel-heading-color: $text-strong !default
@@ -88,7 +90,7 @@ $panel-colors: $colors !default
88
90
  justify-content: flex-start
89
91
  padding: 0.5em 0.75em
90
92
  input[type="checkbox"]
91
- margin-right: 0.75em
93
+ +ltr-property("margin", 0.75em)
92
94
  & > .control
93
95
  flex-grow: 1
94
96
  flex-shrink: 1
@@ -113,7 +115,7 @@ label.panel-block
113
115
  .panel-icon
114
116
  +fa(14px, 1em)
115
117
  color: $panel-icon-color
116
- margin-right: 0.75em
118
+ +ltr-property("margin", 0.75em)
117
119
  .fa
118
120
  font-size: inherit
119
121
  line-height: inherit
@@ -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-right: 0.5em
83
+ +ltr-property("margin", 0.5em)
82
84
  &:last-child
83
- margin-left: 0.5em
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
- border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
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-left: -#{$tabs-toggle-link-border-width}
127
+ +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
123
128
  &:first-child a
124
- border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
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
- border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
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
- border-bottom-left-radius: $radius-rounded
139
- border-top-left-radius: $radius-rounded
140
- padding-left: 1.25em
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
- border-bottom-right-radius: $radius-rounded
143
- border-top-right-radius: $radius-rounded
144
- padding-right: 1.25em
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
@@ -1,15 +1,16 @@
1
+ /* Bulma Elements */
1
2
  @charset "utf-8"
2
3
 
3
- @import "box.sass"
4
- @import "button.sass"
5
- @import "container.sass"
6
- @import "content.sass"
7
- @import "icon.sass"
8
- @import "image.sass"
9
- @import "notification.sass"
10
- @import "progress.sass"
11
- @import "table.sass"
12
- @import "tag.sass"
13
- @import "title.sass"
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.sass"
16
+ @import "other"
@@ -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: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
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
@@ -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
@@ -24,6 +27,13 @@ $button-text-decoration: underline !default
24
27
  $button-text-hover-background-color: $background !default
25
28
  $button-text-hover-color: $text-strong !default
26
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
+
27
37
  $button-disabled-background-color: $scheme-main !default
28
38
  $button-disabled-border-color: $border !default
29
39
  $button-disabled-shadow: none !default
@@ -33,9 +43,12 @@ $button-static-color: $text-light !default
33
43
  $button-static-background-color: $scheme-main-ter !default
34
44
  $button-static-border-color: $border !default
35
45
 
46
+ $button-colors: $colors !default
47
+
36
48
  // The button sizes use mixins so they can be used at different breakpoints
37
49
  =button-small
38
- border-radius: $radius-small
50
+ &:not(.is-rounded)
51
+ border-radius: $radius-small
39
52
  font-size: $size-small
40
53
  =button-normal
41
54
  font-size: $size-normal
@@ -71,14 +84,14 @@ $button-static-border-color: $border !default
71
84
  height: 1.5em
72
85
  width: 1.5em
73
86
  &:first-child:not(:last-child)
74
- margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
75
- margin-right: $button-padding-horizontal / 4
87
+ +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
88
+ +ltr-property("margin", $button-padding-horizontal * 0.25)
76
89
  &:last-child:not(:first-child)
77
- margin-left: $button-padding-horizontal / 4
78
- margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
90
+ +ltr-property("margin", $button-padding-horizontal * 0.25, false)
91
+ +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
79
92
  &:first-child:last-child
80
- margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
81
- margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
93
+ margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
94
+ margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
82
95
  // States
83
96
  &:hover,
84
97
  &.is-hovered
@@ -115,7 +128,16 @@ $button-static-border-color: $border !default
115
128
  background-color: transparent
116
129
  border-color: transparent
117
130
  box-shadow: none
118
- @each $name, $pair in $colors
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
119
141
  $color: nth($pair, 1)
120
142
  $color-invert: nth($pair, 2)
121
143
  &.is-#{$name}
@@ -269,7 +291,7 @@ $button-static-border-color: $border !default
269
291
  .button
270
292
  margin-bottom: 0.5rem
271
293
  &:not(:last-child):not(.is-fullwidth)
272
- margin-right: 0.5rem
294
+ +ltr-property("margin", 0.5rem)
273
295
  &:last-child
274
296
  margin-bottom: -0.5rem
275
297
  &:not(:last-child)
@@ -292,9 +314,9 @@ $button-static-border-color: $border !default
292
314
  &:not(:last-child)
293
315
  border-bottom-right-radius: 0
294
316
  border-top-right-radius: 0
295
- margin-right: -1px
317
+ +ltr-property("margin", -1px)
296
318
  &:last-child
297
- margin-right: 0
319
+ +ltr-property("margin", 0)
298
320
  &:hover,
299
321
  &.is-hovered
300
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-width: $widescreen - $container-offset
25
+ &:not(.is-max-desktop)
26
+ max-width: min($widescreen, $container-max-width) - $container-offset
23
27
  +fullhd
24
- max-width: $fullhd - $container-offset
28
+ &:not(.is-max-desktop):not(.is-max-widescreen)
29
+ max-width: min($fullhd, $container-max-width) - $container-offset
@@ -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-left: $content-blockquote-border-left
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-left: 2em
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-left: 2em
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-left: 2em
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: left
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
@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
2
2
  $icon-dimensions-small: 1rem !default
3
3
  $icon-dimensions-medium: 2rem !default
4
4
  $icon-dimensions-large: 3rem !default
5
+ $icon-text-spacing: 0.25em !default
5
6
 
6
7
  .icon
7
8
  align-items: center
@@ -19,3 +20,27 @@ $icon-dimensions-large: 3rem !default
19
20
  &.is-large
20
21
  height: $icon-dimensions-large
21
22
  width: $icon-dimensions-large
23
+
24
+ .icon-text
25
+ align-items: flex-start
26
+ color: inherit
27
+ display: inline-flex
28
+ flex-wrap: wrap
29
+ line-height: $icon-dimensions
30
+ vertical-align: top
31
+ .icon
32
+ flex-grow: 0
33
+ flex-shrink: 0
34
+ &:not(:last-child)
35
+ +ltr
36
+ margin-right: $icon-text-spacing
37
+ +rtl
38
+ margin-left: $icon-text-spacing
39
+ &:not(:first-child)
40
+ +ltr
41
+ margin-left: $icon-text-spacing
42
+ +rtl
43
+ margin-right: $icon-text-spacing
44
+
45
+ div.icon-text
46
+ display: flex
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $dimensions: 16 24 32 48 64 96 128 !default
2
4
 
3
5
  .image
@@ -1,14 +1,23 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $notification-background-color: $background !default
2
4
  $notification-code-background-color: $scheme-main !default
3
5
  $notification-radius: $radius !default
4
6
  $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
7
+ $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
8
+ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
9
+
10
+ $notification-colors: $colors !default
5
11
 
6
12
  .notification
7
13
  @extend %block
8
14
  background-color: $notification-background-color
9
15
  border-radius: $notification-radius
10
- padding: $notification-padding
11
16
  position: relative
17
+ +ltr
18
+ padding: $notification-padding-ltr
19
+ +rtl
20
+ padding: $notification-padding-rtl
12
21
  a:not(.button):not(.dropdown-item)
13
22
  color: currentColor
14
23
  text-decoration: underline
@@ -20,15 +29,15 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
20
29
  pre code
21
30
  background: transparent
22
31
  & > .delete
32
+ +ltr-position(0.5rem)
23
33
  position: absolute
24
- right: 0.5rem
25
34
  top: 0.5rem
26
35
  .title,
27
36
  .subtitle,
28
37
  .content
29
38
  color: currentColor
30
39
  // Colors
31
- @each $name, $pair in $colors
40
+ @each $name, $pair in $notification-colors
32
41
  $color: nth($pair, 1)
33
42
  $color-invert: nth($pair, 2)
34
43
  &.is-#{$name}
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  .block
2
4
  @extend %block
3
5
 
@@ -11,16 +13,6 @@
11
13
  margin-bottom: 5px
12
14
  text-transform: uppercase
13
15
 
14
- .highlight
15
- @extend %block
16
- font-weight: $weight-normal
17
- max-width: 100%
18
- overflow: hidden
19
- padding: 0
20
- pre
21
- overflow: auto
22
- max-width: 100%
23
-
24
16
  .loader
25
17
  @extend %loader
26
18
 
@@ -1,9 +1,13 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $progress-bar-background-color: $border-light !default
2
4
  $progress-value-background-color: $text !default
3
5
  $progress-border-radius: $radius-rounded !default
4
6
 
5
7
  $progress-indeterminate-duration: 1.5s !default
6
8
 
9
+ $progress-colors: $colors !default
10
+
7
11
  .progress
8
12
  @extend %block
9
13
  -moz-appearance: none
@@ -25,7 +29,7 @@ $progress-indeterminate-duration: 1.5s !default
25
29
  background-color: $progress-value-background-color
26
30
  border: none
27
31
  // Colors
28
- @each $name, $pair in $colors
32
+ @each $name, $pair in $progress-colors
29
33
  $color: nth($pair, 1)
30
34
  &.is-#{$name}
31
35
  &::-webkit-progress-value
@@ -51,6 +55,8 @@ $progress-indeterminate-duration: 1.5s !default
51
55
  background-color: transparent
52
56
  &::-moz-progress-bar
53
57
  background-color: transparent
58
+ &::-ms-fill
59
+ animation-name: none
54
60
 
55
61
  // Sizes
56
62
  &.is-small
@@ -1,3 +1,5 @@
1
+ @import "../utilities/mixins"
2
+
1
3
  $table-color: $text-strong !default
2
4
  $table-background-color: $scheme-main !default
3
5
 
@@ -23,6 +25,8 @@ $table-row-active-color: $primary-invert !default
23
25
  $table-striped-row-even-background-color: $scheme-main-bis !default
24
26
  $table-striped-row-even-hover-background-color: $scheme-main-ter !default
25
27
 
28
+ $table-colors: $colors !default
29
+
26
30
  .table
27
31
  @extend %block
28
32
  background-color: $table-background-color
@@ -34,7 +38,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
34
38
  padding: $table-cell-padding
35
39
  vertical-align: top
36
40
  // Colors
37
- @each $name, $pair in $colors
41
+ @each $name, $pair in $table-colors
38
42
  $color: nth($pair, 1)
39
43
  $color-invert: nth($pair, 2)
40
44
  &.is-#{$name}
@@ -51,10 +55,12 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
51
55
  a,
52
56
  strong
53
57
  color: currentColor
58
+ &.is-vcentered
59
+ vertical-align: middle
54
60
  th
55
61
  color: $table-cell-heading-color
56
62
  &:not([align])
57
- text-align: left
63
+ text-align: inherit
58
64
  tr
59
65
  &.is-selected
60
66
  background-color: $table-row-active-background-color