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
@@ -1,3 +1,4 @@
1
+ /* Bulma Layout */
1
2
  @charset "utf-8"
2
3
 
3
4
  @import "hero.sass"
@@ -1,4 +1,4 @@
1
- $footer-background-color: $white-bis !default
1
+ $footer-background-color: $scheme-main-bis !default
2
2
  $footer-color: false !default
3
3
  $footer-padding: 3rem 1.5rem 6rem !default
4
4
 
@@ -1,5 +1,11 @@
1
- // Main container
1
+ $hero-body-padding: 3rem 1.5rem !default
2
+ $hero-body-padding-small: 1.5rem !default
3
+ $hero-body-padding-medium: 9rem 1.5rem !default
4
+ $hero-body-padding-large: 18rem 1.5rem !default
5
+
6
+ $hero-colors: $colors !default
2
7
 
8
+ // Main container
3
9
  .hero
4
10
  align-items: stretch
5
11
  display: flex
@@ -11,7 +17,7 @@
11
17
  ul
12
18
  border-bottom: none
13
19
  // Colors
14
- @each $name, $pair in $colors
20
+ @each $name, $pair in $hero-colors
15
21
  $color: nth($pair, 1)
16
22
  $color-invert: nth($pair, 2)
17
23
  &.is-#{$name}
@@ -23,7 +29,7 @@
23
29
  .title
24
30
  color: $color-invert
25
31
  .subtitle
26
- color: rgba($color-invert, 0.9)
32
+ color: bulmaRgba($color-invert, 0.9)
27
33
  a:not(.button),
28
34
  strong
29
35
  color: $color-invert
@@ -32,12 +38,12 @@
32
38
  background-color: $color
33
39
  .navbar-item,
34
40
  .navbar-link
35
- color: rgba($color-invert, 0.7)
41
+ color: bulmaRgba($color-invert, 0.7)
36
42
  a.navbar-item,
37
43
  .navbar-link
38
44
  &:hover,
39
45
  &.is-active
40
- background-color: darken($color, 5%)
46
+ background-color: bulmaDarken($color, 5%)
41
47
  color: $color-invert
42
48
  .tabs
43
49
  a
@@ -53,7 +59,7 @@
53
59
  a
54
60
  color: $color-invert
55
61
  &:hover
56
- background-color: rgba($black, 0.1)
62
+ background-color: bulmaRgba($scheme-invert, 0.1)
57
63
  li.is-active a
58
64
  &,
59
65
  &:hover
@@ -61,28 +67,26 @@
61
67
  border-color: $color-invert
62
68
  color: $color
63
69
  // Modifiers
64
- &.is-bold
65
- $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
66
- $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
67
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
68
- +mobile
69
- .navbar-menu
70
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
70
+ @if type-of($color) == 'color'
71
+ &.is-bold
72
+ $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
73
+ $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
74
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
75
+ +mobile
76
+ .navbar-menu
77
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
71
78
  // Sizes
72
79
  &.is-small
73
80
  .hero-body
74
- padding-bottom: 1.5rem
75
- padding-top: 1.5rem
81
+ padding: $hero-body-padding-small
76
82
  &.is-medium
77
83
  +tablet
78
84
  .hero-body
79
- padding-bottom: 9rem
80
- padding-top: 9rem
85
+ padding: $hero-body-padding-medium
81
86
  &.is-large
82
87
  +tablet
83
88
  .hero-body
84
- padding-bottom: 18rem
85
- padding-top: 18rem
89
+ padding: $hero-body-padding-large
86
90
  &.is-halfheight,
87
91
  &.is-fullheight,
88
92
  &.is-fullheight-with-navbar
@@ -128,7 +132,7 @@
128
132
  display: flex
129
133
  justify-content: center
130
134
  .button:not(:last-child)
131
- margin-right: 1.5rem
135
+ +ltr-property("margin", 1.5rem)
132
136
 
133
137
  // Containers
134
138
 
@@ -140,4 +144,4 @@
140
144
  .hero-body
141
145
  flex-grow: 1
142
146
  flex-shrink: 0
143
- padding: 3rem 1.5rem
147
+ padding: $hero-body-padding
@@ -1,3 +1,4 @@
1
+ /* Bulma Utilities */
1
2
  @charset "utf-8"
2
3
 
3
4
  @import "initial-variables.sass"
@@ -3,11 +3,11 @@ $control-radius-small: $radius-small !default
3
3
 
4
4
  $control-border-width: 1px !default
5
5
 
6
- $control-height: 2.25em !default
6
+ $control-height: 2.5em !default
7
7
  $control-line-height: 1.5 !default
8
8
 
9
- $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
10
- $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
9
+ $control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
10
+ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
11
11
 
12
12
  =control
13
13
  -moz-appearance: none
@@ -19,20 +19,39 @@ $blue-invert: findColorInvert($blue) !default
19
19
  $purple-invert: findColorInvert($purple) !default
20
20
  $red-invert: findColorInvert($red) !default
21
21
 
22
- $primary-invert: $turquoise-invert !default
23
- $info-invert: $cyan-invert !default
24
- $success-invert: $green-invert !default
25
- $warning-invert: $yellow-invert !default
26
- $danger-invert: $red-invert !default
27
- $light-invert: $dark !default
28
- $dark-invert: $light !default
22
+ $primary-invert: findColorInvert($primary) !default
23
+ $primary-light: findLightColor($primary) !default
24
+ $primary-dark: findDarkColor($primary) !default
25
+ $info-invert: findColorInvert($info) !default
26
+ $info-light: findLightColor($info) !default
27
+ $info-dark: findDarkColor($info) !default
28
+ $success-invert: findColorInvert($success) !default
29
+ $success-light: findLightColor($success) !default
30
+ $success-dark: findDarkColor($success) !default
31
+ $warning-invert: findColorInvert($warning) !default
32
+ $warning-light: findLightColor($warning) !default
33
+ $warning-dark: findDarkColor($warning) !default
34
+ $danger-invert: findColorInvert($danger) !default
35
+ $danger-light: findLightColor($danger) !default
36
+ $danger-dark: findDarkColor($danger) !default
37
+ $light-invert: findColorInvert($light) !default
38
+ $dark-invert: findColorInvert($dark) !default
29
39
 
30
40
  // General colors
31
41
 
42
+ $scheme-main: $white !default
43
+ $scheme-main-bis: $white-bis !default
44
+ $scheme-main-ter: $white-ter !default
45
+ $scheme-invert: $black !default
46
+ $scheme-invert-bis: $black-bis !default
47
+ $scheme-invert-ter: $black-ter !default
48
+
32
49
  $background: $white-ter !default
33
50
 
34
51
  $border: $grey-lighter !default
35
52
  $border-hover: $grey-light !default
53
+ $border-light: $grey-lightest !default
54
+ $border-light-hover: $grey-light !default
36
55
 
37
56
  // Text colors
38
57
 
@@ -43,7 +62,7 @@ $text-strong: $grey-darker !default
43
62
 
44
63
  // Code colors
45
64
 
46
- $code: $red !default
65
+ $code: darken($red, 15%) !default
47
66
  $code-background: $background !default
48
67
 
49
68
  $pre: $text !default
@@ -52,7 +71,9 @@ $pre-background: $background !default
52
71
  // Link colors
53
72
 
54
73
  $link: $blue !default
55
- $link-invert: $blue-invert !default
74
+ $link-invert: findColorInvert($link) !default
75
+ $link-light: findLightColor($link) !default
76
+ $link-dark: findDarkColor($link) !default
56
77
  $link-visited: $purple !default
57
78
 
58
79
  $link-hover: $grey-darker !default
@@ -79,7 +100,8 @@ $size-large: $size-4 !default
79
100
  $custom-colors: null !default
80
101
  $custom-shades: null !default
81
102
 
82
- $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
103
+ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
104
+
83
105
  $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
84
106
 
85
107
  $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@@ -1,34 +1,53 @@
1
1
  @function mergeColorMaps($bulma-colors, $custom-colors)
2
- // we return at least bulma hardcoded colors
2
+ // We return at least Bulma's hard-coded colors
3
3
  $merged-colors: $bulma-colors
4
4
 
5
- // we want a map as input
5
+ // We want a map as input
6
6
  @if type-of($custom-colors) == 'map'
7
7
  @each $name, $components in $custom-colors
8
- // color name should be a string and colors pair a list with at least one element
8
+ // The color name should be a string
9
+ // and the components either a single color
10
+ // or a colors list with at least one element
9
11
  @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
10
12
  $color-base: null
13
+ $color-invert: null
14
+ $color-light: null
15
+ $color-dark: null
16
+ $value: null
11
17
 
12
- // the param can either be a single color
18
+ // The param can either be a single color
13
19
  // or a list of 2 colors
14
20
  @if type-of($components) == 'color'
15
21
  $color-base: $components
22
+ $color-invert: findColorInvert($color-base)
23
+ $color-light: findLightColor($color-base)
24
+ $color-dark: findDarkColor($color-base)
16
25
  @else if type-of($components) == 'list'
17
26
  $color-base: nth($components, 1)
27
+ // If Invert, Light and Dark are provided
28
+ @if length($components) > 3
29
+ $color-invert: nth($components, 2)
30
+ $color-light: nth($components, 3)
31
+ $color-dark: nth($components, 4)
32
+ // If only Invert and Light are provided
33
+ @else if length($components) > 2
34
+ $color-invert: nth($components, 2)
35
+ $color-light: nth($components, 3)
36
+ $color-dark: findDarkColor($color-base)
37
+ // If only Invert is provided
38
+ @else
39
+ $color-invert: nth($components, 2)
40
+ $color-light: findLightColor($color-base)
41
+ $color-dark: findDarkColor($color-base)
18
42
 
19
- $color-invert: null
20
- // is an inverted color provided in the list
21
- @if length($components) > 1
22
- $color-invert: nth($components, 2)
43
+ $value: ($color-base, $color-invert, $color-light, $color-dark)
23
44
 
24
- // we only want a color as base color
45
+ // We only want to merge the map if the color base is an actual color
25
46
  @if type-of($color-base) == 'color'
26
- // if inverted color is not provided or is not a color we compute it
27
- @if type-of($color-invert) != 'color'
28
- $color-invert: findColorInvert($color-base)
29
-
30
- // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
31
- $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
47
+ // We merge this colors elements as map with Bulma's colors map
48
+ // (we can override them this way, no multiple definition for the same name)
49
+ // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
50
+ $merged-colors: map_merge($merged-colors, ($name: $value))
32
51
 
33
52
  @return $merged-colors
34
53
 
@@ -43,6 +62,8 @@
43
62
  @return $value
44
63
 
45
64
  @function colorLuminance($color)
65
+ @if type-of($color) != 'color'
66
+ @return 0.55
46
67
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
47
68
  @each $name, $value in $color-rgb
48
69
  $adjusted: 0
@@ -60,3 +81,35 @@
60
81
  @return rgba(#000, 0.7)
61
82
  @else
62
83
  @return #fff
84
+
85
+ @function findLightColor($color)
86
+ @if type-of($color) == 'color'
87
+ $l: 96%
88
+ @if lightness($color) > 96%
89
+ $l: lightness($color)
90
+ @return change-color($color, $lightness: $l)
91
+ @return $background
92
+
93
+ @function findDarkColor($color)
94
+ @if type-of($color) == 'color'
95
+ $base-l: 29%
96
+ $luminance: colorLuminance($color)
97
+ $luminance-delta: (0.53 - $luminance)
98
+ $target-l: round($base-l + ($luminance-delta * 53))
99
+ @return change-color($color, $lightness: max($base-l, $target-l))
100
+ @return $text-strong
101
+
102
+ @function bulmaRgba($color, $alpha)
103
+ @if type-of($color) != 'color'
104
+ @return $color
105
+ @return rgba($color, $alpha)
106
+
107
+ @function bulmaDarken($color, $amount)
108
+ @if type-of($color) != 'color'
109
+ @return $color
110
+ @return darken($color, $amount)
111
+
112
+ @function bulmaLighten($color, $amount)
113
+ @if type-of($color) != 'color'
114
+ @return $color
115
+ @return lighten($color, $amount)
@@ -9,6 +9,7 @@ $grey-dark: hsl(0, 0%, 29%) !default
9
9
  $grey: hsl(0, 0%, 48%) !default
10
10
  $grey-light: hsl(0, 0%, 71%) !default
11
11
  $grey-lighter: hsl(0, 0%, 86%) !default
12
+ $grey-lightest: hsl(0, 0%, 93%) !default
12
13
 
13
14
  $white-ter: hsl(0, 0%, 96%) !default
14
15
  $white-bis: hsl(0, 0%, 98%) !default
@@ -16,12 +17,12 @@ $white: hsl(0, 0%, 100%) !default
16
17
 
17
18
  $orange: hsl(14, 100%, 53%) !default
18
19
  $yellow: hsl(48, 100%, 67%) !default
19
- $green: hsl(141, 71%, 48%) !default
20
+ $green: hsl(141, 53%, 53%) !default
20
21
  $turquoise: hsl(171, 100%, 41%) !default
21
- $cyan: hsl(204, 86%, 53%) !default
22
+ $cyan: hsl(204, 71%, 53%) !default
22
23
  $blue: hsl(217, 71%, 53%) !default
23
24
  $purple: hsl(271, 100%, 71%) !default
24
- $red: hsl(348, 100%, 61%) !default
25
+ $red: hsl(348, 86%, 61%) !default
25
26
 
26
27
  // Typography
27
28
 
@@ -74,3 +75,4 @@ $speed: 86ms !default
74
75
  // Flags
75
76
 
76
77
  $variable-columns: true !default
78
+ $rtl: false !default
@@ -48,7 +48,7 @@
48
48
  &:nth-child(3)
49
49
  top: calc(50% + 4px)
50
50
  &:hover
51
- background-color: rgba(black, 0.05)
51
+ background-color: bulmaRgba(black, 0.05)
52
52
  // Modifers
53
53
  &.is-active
54
54
  span
@@ -128,6 +128,30 @@
128
128
  @media screen and (min-width: $fullhd)
129
129
  @content
130
130
 
131
+ =ltr
132
+ @if not $rtl
133
+ @content
134
+
135
+ =rtl
136
+ @if $rtl
137
+ @content
138
+
139
+ =ltr-property($property, $spacing, $right: true)
140
+ $normal: if($right, "right", "left")
141
+ $opposite: if($right, "left", "right")
142
+ @if $rtl
143
+ #{$property}-#{$opposite}: $spacing
144
+ @else
145
+ #{$property}-#{$normal}: $spacing
146
+
147
+ =ltr-position($spacing, $right: true)
148
+ $normal: if($right, "right", "left")
149
+ $opposite: if($right, "left", "right")
150
+ @if $rtl
151
+ #{$opposite}: $spacing
152
+ @else
153
+ #{$normal}: $spacing
154
+
131
155
  // Placeholders
132
156
 
133
157
  =unselectable
@@ -170,7 +194,7 @@
170
194
  @extend %unselectable
171
195
  -moz-appearance: none
172
196
  -webkit-appearance: none
173
- background-color: rgba($black, 0.2)
197
+ background-color: bulmaRgba($scheme-invert, 0.2)
174
198
  border: none
175
199
  border-radius: $radius-rounded
176
200
  cursor: pointer
@@ -190,7 +214,7 @@
190
214
  width: 20px
191
215
  &::before,
192
216
  &::after
193
- background-color: $white
217
+ background-color: $scheme-main
194
218
  content: ""
195
219
  display: block
196
220
  left: 50%
@@ -206,9 +230,9 @@
206
230
  width: 2px
207
231
  &:hover,
208
232
  &:focus
209
- background-color: rgba($black, 0.3)
233
+ background-color: bulmaRgba($scheme-invert, 0.3)
210
234
  &:active
211
- background-color: rgba($black, 0.4)
235
+ background-color: bulmaRgba($scheme-invert, 0.4)
212
236
  // Sizes
213
237
  &.is-small
214
238
  height: 16px
@@ -21,7 +21,7 @@ Gem::Specification.new do |spec|
21
21
  spec.require_paths = ["lib"]
22
22
  spec.add_runtime_dependency 'sass', '~> 3.2'
23
23
 
24
- spec.add_development_dependency "bundler", "~> 1.17"
25
- spec.add_development_dependency "rake", "~> 10.0"
24
+ spec.add_development_dependency "bundler", "~> 2"
25
+ spec.add_development_dependency "rake", "~> 12.3.3"
26
26
 
27
27
  end
@@ -1,5 +1,5 @@
1
1
  module Bulma
2
2
  module Sass
3
- VERSION = "0.7.5.1"
3
+ VERSION = "0.9.1"
4
4
  end
5
5
  end
data/release.sh CHANGED
@@ -12,5 +12,5 @@ gem build bulma-sass.gemspec
12
12
  gem push "bulma-sass-$version.gem"
13
13
  git add .
14
14
  git commit -m "Release v$version"
15
- git tag -a "v$version" -m "v$version"
16
- git push
15
+ git tag "$version"
16
+ git push origin "$version"