bulma-sass 0.7.5.1 → 0.9.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 (62) 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 +1 -1
  4. data/app/assets/stylesheets/sass/base/generic.sass +3 -2
  5. data/app/assets/stylesheets/sass/base/helpers.sass +1 -281
  6. data/app/assets/stylesheets/sass/base/minireset.sass +2 -8
  7. data/app/assets/stylesheets/sass/components/_all.sass +1 -1
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  9. data/app/assets/stylesheets/sass/components/card.sass +10 -6
  10. data/app/assets/stylesheets/sass/components/dropdown.sass +8 -8
  11. data/app/assets/stylesheets/sass/components/level.sass +2 -2
  12. data/app/assets/stylesheets/sass/components/media.sass +14 -10
  13. data/app/assets/stylesheets/sass/components/menu.sass +2 -2
  14. data/app/assets/stylesheets/sass/components/message.sass +23 -11
  15. data/app/assets/stylesheets/sass/components/modal.sass +7 -5
  16. data/app/assets/stylesheets/sass/components/navbar.sass +27 -27
  17. data/app/assets/stylesheets/sass/components/pagination.sass +7 -6
  18. data/app/assets/stylesheets/sass/components/panel.sass +29 -13
  19. data/app/assets/stylesheets/sass/components/tabs.sass +36 -13
  20. data/app/assets/stylesheets/sass/elements/_all.sass +1 -0
  21. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  22. data/app/assets/stylesheets/sass/elements/button.sass +49 -29
  23. data/app/assets/stylesheets/sass/elements/container.sass +14 -10
  24. data/app/assets/stylesheets/sass/elements/content.sass +5 -5
  25. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  26. data/app/assets/stylesheets/sass/elements/notification.sass +19 -4
  27. data/app/assets/stylesheets/sass/elements/progress.sass +6 -2
  28. data/app/assets/stylesheets/sass/elements/table.sass +12 -8
  29. data/app/assets/stylesheets/sass/elements/tag.sass +34 -17
  30. data/app/assets/stylesheets/sass/elements/title.sass +3 -3
  31. data/app/assets/stylesheets/sass/form/_all.sass +1 -0
  32. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +3 -2
  33. data/app/assets/stylesheets/sass/form/file.sass +16 -14
  34. data/app/assets/stylesheets/sass/form/input-textarea.sass +13 -7
  35. data/app/assets/stylesheets/sass/form/select.sass +9 -7
  36. data/app/assets/stylesheets/sass/form/shared.sass +14 -12
  37. data/app/assets/stylesheets/sass/form/tools.sass +22 -12
  38. data/app/assets/stylesheets/sass/grid/_all.sass +1 -0
  39. data/app/assets/stylesheets/sass/helpers/_all.sass +12 -0
  40. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  41. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  42. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  43. data/app/assets/stylesheets/sass/helpers/other.sass +11 -0
  44. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  45. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  46. data/app/assets/stylesheets/sass/helpers/spacing.sass +31 -0
  47. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  48. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  49. data/app/assets/stylesheets/sass/layout/_all.sass +1 -0
  50. data/app/assets/stylesheets/sass/layout/footer.sass +1 -1
  51. data/app/assets/stylesheets/sass/layout/hero.sass +25 -21
  52. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -0
  53. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  54. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +32 -10
  55. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  56. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -3
  57. data/app/assets/stylesheets/sass/utilities/mixins.sass +29 -5
  58. data/bulma-sass.gemspec +2 -2
  59. data/lib/bulma/sass/version.rb +1 -1
  60. data/release.sh +2 -2
  61. metadata +17 -8
  62. data/app/assets/stylesheets/sass/components/list.sass +0 -39
@@ -9,6 +9,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
9
9
  width: 100%
10
10
  &.is-rounded
11
11
  border-radius: $radius-rounded
12
+ &.is-fullwidth
13
+ width: 100%
12
14
  // Ratio
13
15
  &.is-square,
14
16
  &.is-1by1,
@@ -1,13 +1,21 @@
1
1
  $notification-background-color: $background !default
2
+ $notification-code-background-color: $scheme-main !default
2
3
  $notification-radius: $radius !default
3
4
  $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
5
+ $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
6
+ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
7
+
8
+ $notification-colors: $colors !default
4
9
 
5
10
  .notification
6
11
  @extend %block
7
12
  background-color: $notification-background-color
8
13
  border-radius: $notification-radius
9
- padding: $notification-padding
10
14
  position: relative
15
+ +ltr
16
+ padding: $notification-padding-ltr
17
+ +rtl
18
+ padding: $notification-padding-rtl
11
19
  a:not(.button):not(.dropdown-item)
12
20
  color: currentColor
13
21
  text-decoration: underline
@@ -15,21 +23,28 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
15
23
  color: currentColor
16
24
  code,
17
25
  pre
18
- background: $white
26
+ background: $notification-code-background-color
19
27
  pre code
20
28
  background: transparent
21
29
  & > .delete
30
+ +ltr-position(0.5rem)
22
31
  position: absolute
23
- right: 0.5rem
24
32
  top: 0.5rem
25
33
  .title,
26
34
  .subtitle,
27
35
  .content
28
36
  color: currentColor
29
37
  // Colors
30
- @each $name, $pair in $colors
38
+ @each $name, $pair in $notification-colors
31
39
  $color: nth($pair, 1)
32
40
  $color-invert: nth($pair, 2)
33
41
  &.is-#{$name}
34
42
  background-color: $color
35
43
  color: $color-invert
44
+ // If light and dark colors are provided
45
+ @if length($pair) >= 4
46
+ $color-light: nth($pair, 3)
47
+ $color-dark: nth($pair, 4)
48
+ &.is-light
49
+ background-color: $color-light
50
+ color: $color-dark
@@ -1,9 +1,11 @@
1
- $progress-bar-background-color: $border !default
1
+ $progress-bar-background-color: $border-light !default
2
2
  $progress-value-background-color: $text !default
3
3
  $progress-border-radius: $radius-rounded !default
4
4
 
5
5
  $progress-indeterminate-duration: 1.5s !default
6
6
 
7
+ $progress-colors: $colors !default
8
+
7
9
  .progress
8
10
  @extend %block
9
11
  -moz-appearance: none
@@ -25,7 +27,7 @@ $progress-indeterminate-duration: 1.5s !default
25
27
  background-color: $progress-value-background-color
26
28
  border: none
27
29
  // Colors
28
- @each $name, $pair in $colors
30
+ @each $name, $pair in $progress-colors
29
31
  $color: nth($pair, 1)
30
32
  &.is-#{$name}
31
33
  &::-webkit-progress-value
@@ -51,6 +53,8 @@ $progress-indeterminate-duration: 1.5s !default
51
53
  background-color: transparent
52
54
  &::-moz-progress-bar
53
55
  background-color: transparent
56
+ &::-ms-fill
57
+ animation-name: none
54
58
 
55
59
  // Sizes
56
60
  &.is-small
@@ -1,7 +1,7 @@
1
- $table-color: $grey-darker !default
2
- $table-background-color: $white !default
1
+ $table-color: $text-strong !default
2
+ $table-background-color: $scheme-main !default
3
3
 
4
- $table-cell-border: 1px solid $grey-lighter !default
4
+ $table-cell-border: 1px solid $border !default
5
5
  $table-cell-border-width: 0 0 1px !default
6
6
  $table-cell-padding: 0.5em 0.75em !default
7
7
  $table-cell-heading-color: $text-strong !default
@@ -15,13 +15,15 @@ $table-head-background-color: transparent !default
15
15
  $table-body-background-color: transparent !default
16
16
  $table-foot-background-color: transparent !default
17
17
 
18
- $table-row-hover-background-color: $white-bis !default
18
+ $table-row-hover-background-color: $scheme-main-bis !default
19
19
 
20
20
  $table-row-active-background-color: $primary !default
21
21
  $table-row-active-color: $primary-invert !default
22
22
 
23
- $table-striped-row-even-background-color: $white-bis !default
24
- $table-striped-row-even-hover-background-color: $white-ter !default
23
+ $table-striped-row-even-background-color: $scheme-main-bis !default
24
+ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
25
+
26
+ $table-colors: $colors !default
25
27
 
26
28
  .table
27
29
  @extend %block
@@ -34,7 +36,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
34
36
  padding: $table-cell-padding
35
37
  vertical-align: top
36
38
  // Colors
37
- @each $name, $pair in $colors
39
+ @each $name, $pair in $table-colors
38
40
  $color: nth($pair, 1)
39
41
  $color-invert: nth($pair, 2)
40
42
  &.is-#{$name}
@@ -51,10 +53,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
51
53
  a,
52
54
  strong
53
55
  color: currentColor
56
+ &.is-vcentered
57
+ vertical-align: middle
54
58
  th
55
59
  color: $table-cell-heading-color
56
60
  &:not([align])
57
- text-align: left
61
+ text-align: inherit
58
62
  tr
59
63
  &.is-selected
60
64
  background-color: $table-row-active-background-color
@@ -3,6 +3,8 @@ $tag-color: $text !default
3
3
  $tag-radius: $radius !default
4
4
  $tag-delete-margin: 1px !default
5
5
 
6
+ $tag-colors: $colors !default
7
+
6
8
  .tags
7
9
  align-items: center
8
10
  display: flex
@@ -11,7 +13,7 @@ $tag-delete-margin: 1px !default
11
13
  .tag
12
14
  margin-bottom: 0.5rem
13
15
  &:not(:last-child)
14
- margin-right: 0.5rem
16
+ +ltr-property("margin", 0.5rem)
15
17
  &:last-child
16
18
  margin-bottom: -0.5rem
17
19
  &:not(:last-child)
@@ -37,14 +39,22 @@ $tag-delete-margin: 1px !default
37
39
  margin-right: 0
38
40
  &.has-addons
39
41
  .tag
40
- margin-right: 0
42
+ +ltr-property("margin", 0)
41
43
  &:not(:first-child)
42
- margin-left: 0
43
- border-bottom-left-radius: 0
44
- border-top-left-radius: 0
44
+ +ltr-property("margin", 0, false)
45
+ +ltr
46
+ border-top-left-radius: 0
47
+ border-bottom-left-radius: 0
48
+ +rtl
49
+ border-top-right-radius: 0
50
+ border-bottom-right-radius: 0
45
51
  &:not(:last-child)
46
- border-bottom-right-radius: 0
47
- border-top-right-radius: 0
52
+ +ltr
53
+ border-top-right-radius: 0
54
+ border-bottom-right-radius: 0
55
+ +rtl
56
+ border-top-left-radius: 0
57
+ border-bottom-left-radius: 0
48
58
 
49
59
  .tag:not(body)
50
60
  align-items: center
@@ -60,15 +70,22 @@ $tag-delete-margin: 1px !default
60
70
  padding-right: 0.75em
61
71
  white-space: nowrap
62
72
  .delete
63
- margin-left: 0.25rem
64
- margin-right: -0.375rem
73
+ +ltr-property("margin", 0.25rem, false)
74
+ +ltr-property("margin", -0.375rem)
65
75
  // Colors
66
- @each $name, $pair in $colors
76
+ @each $name, $pair in $tag-colors
67
77
  $color: nth($pair, 1)
68
78
  $color-invert: nth($pair, 2)
69
79
  &.is-#{$name}
70
80
  background-color: $color
71
81
  color: $color-invert
82
+ // If a light and dark colors are provided
83
+ @if length($pair) > 3
84
+ $color-light: nth($pair, 3)
85
+ $color-dark: nth($pair, 4)
86
+ &.is-light
87
+ background-color: $color-light
88
+ color: $color-dark
72
89
  // Sizes
73
90
  &.is-normal
74
91
  font-size: $size-small
@@ -78,17 +95,17 @@ $tag-delete-margin: 1px !default
78
95
  font-size: $size-medium
79
96
  .icon
80
97
  &:first-child:not(:last-child)
81
- margin-left: -0.375em
82
- margin-right: 0.1875em
98
+ +ltr-property("margin", -0.375em, false)
99
+ +ltr-property("margin", 0.1875em)
83
100
  &:last-child:not(:first-child)
84
- margin-left: 0.1875em
85
- margin-right: -0.375em
101
+ +ltr-property("margin", 0.1875em, false)
102
+ +ltr-property("margin", -0.375em)
86
103
  &:first-child:last-child
87
- margin-left: -0.375em
88
- margin-right: -0.375em
104
+ +ltr-property("margin", -0.375em, false)
105
+ +ltr-property("margin", -0.375em)
89
106
  // Modifiers
90
107
  &.is-delete
91
- margin-left: $tag-delete-margin
108
+ +ltr-property("margin", $tag-delete-margin, false)
92
109
  padding: 0
93
110
  position: relative
94
111
  width: 2em
@@ -1,4 +1,4 @@
1
- $title-color: $grey-darker !default
1
+ $title-color: $text-strong !default
2
2
  $title-family: false !default
3
3
  $title-size: $size-3 !default
4
4
  $title-weight: $weight-semibold !default
@@ -8,12 +8,12 @@ $title-strong-weight: inherit !default
8
8
  $title-sub-size: 0.75em !default
9
9
  $title-sup-size: 0.75em !default
10
10
 
11
- $subtitle-color: $grey-dark !default
11
+ $subtitle-color: $text !default
12
12
  $subtitle-family: false !default
13
13
  $subtitle-size: $size-5 !default
14
14
  $subtitle-weight: $weight-normal !default
15
15
  $subtitle-line-height: 1.25 !default
16
- $subtitle-strong-color: $grey-darker !default
16
+ $subtitle-strong-color: $text-strong !default
17
17
  $subtitle-strong-weight: $weight-semibold !default
18
18
  $subtitle-negative-margin: -1.25rem !default
19
19
 
@@ -1,3 +1,4 @@
1
+ /* Bulma Form */
1
2
  @charset "utf-8"
2
3
 
3
4
  @import "shared.sass"
@@ -8,7 +8,8 @@
8
8
  &:hover
9
9
  color: $input-hover-color
10
10
  &[disabled],
11
- fieldset[disabled] &
11
+ fieldset[disabled] &,
12
+ input[disabled]
12
13
  color: $input-disabled-color
13
14
  cursor: not-allowed
14
15
 
@@ -18,4 +19,4 @@
18
19
  .radio
19
20
  @extend %checkbox-radio
20
21
  & + .radio
21
- margin-left: 0.5em
22
+ +ltr-property("margin", 0.5em, false)
@@ -1,16 +1,18 @@
1
1
  $file-border-color: $border !default
2
2
  $file-radius: $radius !default
3
3
 
4
- $file-cta-background-color: $white-ter !default
5
- $file-cta-color: $grey-dark !default
6
- $file-cta-hover-color: $grey-darker !default
7
- $file-cta-active-color: $grey-darker !default
4
+ $file-cta-background-color: $scheme-main-ter !default
5
+ $file-cta-color: $text !default
6
+ $file-cta-hover-color: $text-strong !default
7
+ $file-cta-active-color: $text-strong !default
8
8
 
9
9
  $file-name-border-color: $border !default
10
10
  $file-name-border-style: solid !default
11
11
  $file-name-border-width: 1px 1px 1px 0 !default
12
12
  $file-name-max-width: 16em !default
13
13
 
14
+ $file-colors: $form-colors !default
15
+
14
16
  .file
15
17
  @extend %unselectable
16
18
  align-items: stretch
@@ -18,7 +20,7 @@ $file-name-max-width: 16em !default
18
20
  justify-content: flex-start
19
21
  position: relative
20
22
  // Colors
21
- @each $name, $pair in $colors
23
+ @each $name, $pair in $file-colors
22
24
  $color: nth($pair, 1)
23
25
  $color-invert: nth($pair, 2)
24
26
  &.is-#{$name}
@@ -29,19 +31,19 @@ $file-name-max-width: 16em !default
29
31
  &:hover,
30
32
  &.is-hovered
31
33
  .file-cta
32
- background-color: darken($color, 2.5%)
34
+ background-color: bulmaDarken($color, 2.5%)
33
35
  border-color: transparent
34
36
  color: $color-invert
35
37
  &:focus,
36
38
  &.is-focused
37
39
  .file-cta
38
40
  border-color: transparent
39
- box-shadow: 0 0 0.5em rgba($color, 0.25)
41
+ box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
40
42
  color: $color-invert
41
43
  &:active,
42
44
  &.is-active
43
45
  .file-cta
44
- background-color: darken($color, 5%)
46
+ background-color: bulmaDarken($color, 5%)
45
47
  border-color: transparent
46
48
  color: $color-invert
47
49
  // Sizes
@@ -125,16 +127,16 @@ $file-name-max-width: 16em !default
125
127
  position: relative
126
128
  &:hover
127
129
  .file-cta
128
- background-color: darken($file-cta-background-color, 2.5%)
130
+ background-color: bulmaDarken($file-cta-background-color, 2.5%)
129
131
  color: $file-cta-hover-color
130
132
  .file-name
131
- border-color: darken($file-name-border-color, 2.5%)
133
+ border-color: bulmaDarken($file-name-border-color, 2.5%)
132
134
  &:active
133
135
  .file-cta
134
- background-color: darken($file-cta-background-color, 5%)
136
+ background-color: bulmaDarken($file-cta-background-color, 5%)
135
137
  color: $file-cta-active-color
136
138
  .file-name
137
- border-color: darken($file-name-border-color, 5%)
139
+ border-color: bulmaDarken($file-name-border-color, 5%)
138
140
 
139
141
  .file-input
140
142
  height: 100%
@@ -166,7 +168,7 @@ $file-name-max-width: 16em !default
166
168
  display: block
167
169
  max-width: $file-name-max-width
168
170
  overflow: hidden
169
- text-align: left
171
+ text-align: inherit
170
172
  text-overflow: ellipsis
171
173
 
172
174
  .file-icon
@@ -174,7 +176,7 @@ $file-name-max-width: 16em !default
174
176
  display: flex
175
177
  height: 1em
176
178
  justify-content: center
177
- margin-right: 0.5em
179
+ +ltr-property("margin", 0.5em)
178
180
  width: 1em
179
181
  .fa
180
182
  font-size: 14px
@@ -1,3 +1,9 @@
1
+ $textarea-padding: $control-padding-horizontal !default
2
+ $textarea-max-height: 40em !default
3
+ $textarea-min-height: 8em !default
4
+
5
+ $textarea-colors: $form-colors !default
6
+
1
7
  %input-textarea
2
8
  @extend %input
3
9
  box-shadow: $input-shadow
@@ -6,7 +12,7 @@
6
12
  &[readonly]
7
13
  box-shadow: none
8
14
  // Colors
9
- @each $name, $pair in $colors
15
+ @each $name, $pair in $textarea-colors
10
16
  $color: nth($pair, 1)
11
17
  &.is-#{$name}
12
18
  border-color: $color
@@ -14,7 +20,7 @@
14
20
  &.is-focused,
15
21
  &:active,
16
22
  &.is-active
17
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
23
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
18
24
  // Sizes
19
25
  &.is-small
20
26
  +control-small
@@ -34,8 +40,8 @@
34
40
  @extend %input-textarea
35
41
  &.is-rounded
36
42
  border-radius: $radius-rounded
37
- padding-left: 1em
38
- padding-right: 1em
43
+ padding-left: calc(#{$control-padding-horizontal} + 0.375em)
44
+ padding-right: calc(#{$control-padding-horizontal} + 0.375em)
39
45
  &.is-static
40
46
  background-color: transparent
41
47
  border-color: transparent
@@ -48,11 +54,11 @@
48
54
  display: block
49
55
  max-width: 100%
50
56
  min-width: 100%
51
- padding: 0.625em
57
+ padding: $textarea-padding
52
58
  resize: vertical
53
59
  &:not([rows])
54
- max-height: 600px
55
- min-height: 120px
60
+ max-height: $textarea-max-height
61
+ min-height: $textarea-min-height
56
62
  &[rows]
57
63
  height: initial
58
64
  // Modifiers
@@ -1,3 +1,5 @@
1
+ $select-colors: $form-colors !default
2
+
1
3
  .select
2
4
  display: inline-block
3
5
  max-width: 100%
@@ -9,12 +11,12 @@
9
11
  &::after
10
12
  @extend %arrow
11
13
  border-color: $input-arrow
12
- right: 1.125em
14
+ +ltr-position(1.125em)
13
15
  z-index: 4
14
16
  &.is-rounded
15
17
  select
16
18
  border-radius: $radius-rounded
17
- padding-left: 1em
19
+ +ltr-property("padding", 1em, false)
18
20
  select
19
21
  @extend %input
20
22
  cursor: pointer
@@ -28,7 +30,7 @@
28
30
  fieldset[disabled] &:hover
29
31
  border-color: $input-disabled-border-color
30
32
  &:not([multiple])
31
- padding-right: 2.5em
33
+ +ltr-property("padding", 2.5em)
32
34
  &[multiple]
33
35
  height: auto
34
36
  padding: 0
@@ -39,7 +41,7 @@
39
41
  &::after
40
42
  border-color: $input-hover-color
41
43
  // Colors
42
- @each $name, $pair in $colors
44
+ @each $name, $pair in $select-colors
43
45
  $color: nth($pair, 1)
44
46
  &.is-#{$name}
45
47
  &:not(:hover)::after
@@ -48,12 +50,12 @@
48
50
  border-color: $color
49
51
  &:hover,
50
52
  &.is-hovered
51
- border-color: darken($color, 5%)
53
+ border-color: bulmaDarken($color, 5%)
52
54
  &:focus,
53
55
  &.is-focused,
54
56
  &:active,
55
57
  &.is-active
56
- box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
58
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
57
59
  // Sizes
58
60
  &.is-small
59
61
  +control-small
@@ -74,7 +76,7 @@
74
76
  @extend %loader
75
77
  margin-top: 0
76
78
  position: absolute
77
- right: 0.625em
79
+ +ltr-position(0.625em)
78
80
  top: 0.625em
79
81
  transform: none
80
82
  &.is-small:after