bulma-sass 0.7.5 → 0.9.0

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 (59) 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 +0 -1
  4. data/app/assets/stylesheets/sass/base/generic.sass +2 -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 +0 -1
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  9. data/app/assets/stylesheets/sass/components/card.sass +6 -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 +4 -4
  16. data/app/assets/stylesheets/sass/components/navbar.sass +24 -26
  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/box.sass +4 -4
  21. data/app/assets/stylesheets/sass/elements/button.sass +46 -28
  22. data/app/assets/stylesheets/sass/elements/container.sass +5 -4
  23. data/app/assets/stylesheets/sass/elements/content.sass +5 -5
  24. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  25. data/app/assets/stylesheets/sass/elements/notification.sass +16 -3
  26. data/app/assets/stylesheets/sass/elements/progress.sass +1 -1
  27. data/app/assets/stylesheets/sass/elements/table.sass +9 -7
  28. data/app/assets/stylesheets/sass/elements/tag.sass +31 -16
  29. data/app/assets/stylesheets/sass/elements/title.sass +3 -3
  30. data/app/assets/stylesheets/sass/form/_all.sass +8 -0
  31. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +21 -0
  32. data/app/assets/stylesheets/sass/form/file.sass +180 -0
  33. data/app/assets/stylesheets/sass/form/input-textarea.sass +64 -0
  34. data/app/assets/stylesheets/sass/form/select.sass +85 -0
  35. data/app/assets/stylesheets/sass/form/shared.sass +55 -0
  36. data/app/assets/stylesheets/sass/form/tools.sass +213 -0
  37. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -0
  38. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  39. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  40. data/app/assets/stylesheets/sass/helpers/other.sass +8 -0
  41. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  42. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  43. data/app/assets/stylesheets/sass/helpers/spacing.sass +28 -0
  44. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  45. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  46. data/app/assets/stylesheets/sass/layout/footer.sass +1 -1
  47. data/app/assets/stylesheets/sass/layout/hero.sass +22 -20
  48. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -1
  49. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  50. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +132 -0
  51. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  52. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -3
  53. data/app/assets/stylesheets/sass/utilities/mixins.sass +29 -5
  54. data/bulma-sass.gemspec +2 -2
  55. data/lib/bulma/sass/version.rb +1 -1
  56. data/release.sh +2 -2
  57. metadata +24 -10
  58. data/app/assets/stylesheets/sass/components/list.sass +0 -39
  59. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -85
@@ -0,0 +1,10 @@
1
+ @charset "utf-8"
2
+
3
+ @import "color.sass"
4
+ @import "float.sass"
5
+ @import "other.sass"
6
+ @import "overflow.sass"
7
+ @import "position.sass"
8
+ @import "spacing.sass"
9
+ @import "typography.sass"
10
+ @import "visibility.sass"
@@ -0,0 +1,37 @@
1
+ @each $name, $pair in $colors
2
+ $color: nth($pair, 1)
3
+ .has-text-#{$name}
4
+ color: $color !important
5
+ a.has-text-#{$name}
6
+ &:hover,
7
+ &:focus
8
+ color: bulmaDarken($color, 10%) !important
9
+ .has-background-#{$name}
10
+ background-color: $color !important
11
+ @if length($pair) >= 4
12
+ $color-light: nth($pair, 3)
13
+ $color-dark: nth($pair, 4)
14
+ // Light
15
+ .has-text-#{$name}-light
16
+ color: $color-light !important
17
+ a.has-text-#{$name}-light
18
+ &:hover,
19
+ &:focus
20
+ color: bulmaDarken($color-light, 10%) !important
21
+ .has-background-#{$name}-light
22
+ background-color: $color-light !important
23
+ // Dark
24
+ .has-text-#{$name}-dark
25
+ color: $color-dark !important
26
+ a.has-text-#{$name}-dark
27
+ &:hover,
28
+ &:focus
29
+ color: bulmaLighten($color-dark, 10%) !important
30
+ .has-background-#{$name}-dark
31
+ background-color: $color-dark !important
32
+
33
+ @each $name, $shade in $shades
34
+ .has-text-#{$name}
35
+ color: $shade !important
36
+ .has-background-#{$name}
37
+ background-color: $shade !important
@@ -0,0 +1,8 @@
1
+ .is-clearfix
2
+ +clearfix
3
+
4
+ .is-pulled-left
5
+ float: left !important
6
+
7
+ .is-pulled-right
8
+ float: right !important
@@ -0,0 +1,8 @@
1
+ .is-radiusless
2
+ border-radius: 0 !important
3
+
4
+ .is-shadowless
5
+ box-shadow: none !important
6
+
7
+ .is-unselectable
8
+ @extend %unselectable
@@ -0,0 +1,2 @@
1
+ .is-clipped
2
+ overflow: hidden !important
@@ -0,0 +1,5 @@
1
+ .is-overlay
2
+ @extend %overlay
3
+
4
+ .is-relative
5
+ position: relative !important
@@ -0,0 +1,28 @@
1
+ .is-marginless
2
+ margin: 0 !important
3
+
4
+ .is-paddingless
5
+ padding: 0 !important
6
+
7
+ $spacing-shortcuts: ("margin": "m", "padding": "p") !default
8
+ $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
9
+ $spacing-horizontal: "x" !default
10
+ $spacing-vertical: "y" !default
11
+ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
12
+
13
+ @each $property, $shortcut in $spacing-shortcuts
14
+ @each $name, $value in $spacing-values
15
+ // Cardinal directions
16
+ @each $direction, $suffix in $spacing-directions
17
+ .#{$shortcut}#{$suffix}-#{$name}
18
+ #{$property}-#{$direction}: $value !important
19
+ // Horizontal axis
20
+ @if $spacing-horizontal != null
21
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}
22
+ #{$property}-left: $value !important
23
+ #{$property}-right: $value !important
24
+ // Vertical axis
25
+ @if $spacing-vertical != null
26
+ .#{$shortcut}#{$spacing-vertical}-#{$name}
27
+ #{$property}-top: $value !important
28
+ #{$property}-bottom: $value !important
@@ -0,0 +1,98 @@
1
+ =typography-size($target:'')
2
+ @each $size in $sizes
3
+ $i: index($sizes, $size)
4
+ .is-size-#{$i}#{if($target == '', '', '-' + $target)}
5
+ font-size: $size !important
6
+
7
+ +typography-size()
8
+
9
+ +mobile
10
+ +typography-size('mobile')
11
+
12
+ +tablet
13
+ +typography-size('tablet')
14
+
15
+ +touch
16
+ +typography-size('touch')
17
+
18
+ +desktop
19
+ +typography-size('desktop')
20
+
21
+ +widescreen
22
+ +typography-size('widescreen')
23
+
24
+ +fullhd
25
+ +typography-size('fullhd')
26
+
27
+ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
28
+
29
+ @each $alignment, $text-align in $alignments
30
+ .has-text-#{$alignment}
31
+ text-align: #{$text-align} !important
32
+
33
+ @each $alignment, $text-align in $alignments
34
+ +mobile
35
+ .has-text-#{$alignment}-mobile
36
+ text-align: #{$text-align} !important
37
+ +tablet
38
+ .has-text-#{$alignment}-tablet
39
+ text-align: #{$text-align} !important
40
+ +tablet-only
41
+ .has-text-#{$alignment}-tablet-only
42
+ text-align: #{$text-align} !important
43
+ +touch
44
+ .has-text-#{$alignment}-touch
45
+ text-align: #{$text-align} !important
46
+ +desktop
47
+ .has-text-#{$alignment}-desktop
48
+ text-align: #{$text-align} !important
49
+ +desktop-only
50
+ .has-text-#{$alignment}-desktop-only
51
+ text-align: #{$text-align} !important
52
+ +widescreen
53
+ .has-text-#{$alignment}-widescreen
54
+ text-align: #{$text-align} !important
55
+ +widescreen-only
56
+ .has-text-#{$alignment}-widescreen-only
57
+ text-align: #{$text-align} !important
58
+ +fullhd
59
+ .has-text-#{$alignment}-fullhd
60
+ text-align: #{$text-align} !important
61
+
62
+ .is-capitalized
63
+ text-transform: capitalize !important
64
+
65
+ .is-lowercase
66
+ text-transform: lowercase !important
67
+
68
+ .is-uppercase
69
+ text-transform: uppercase !important
70
+
71
+ .is-italic
72
+ font-style: italic !important
73
+
74
+ .has-text-weight-light
75
+ font-weight: $weight-light !important
76
+ .has-text-weight-normal
77
+ font-weight: $weight-normal !important
78
+ .has-text-weight-medium
79
+ font-weight: $weight-medium !important
80
+ .has-text-weight-semibold
81
+ font-weight: $weight-semibold !important
82
+ .has-text-weight-bold
83
+ font-weight: $weight-bold !important
84
+
85
+ .is-family-primary
86
+ font-family: $family-primary !important
87
+
88
+ .is-family-secondary
89
+ font-family: $family-secondary !important
90
+
91
+ .is-family-sans-serif
92
+ font-family: $family-sans-serif !important
93
+
94
+ .is-family-monospace
95
+ font-family: $family-monospace !important
96
+
97
+ .is-family-code
98
+ font-family: $family-code !important
@@ -0,0 +1,122 @@
1
+
2
+
3
+ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
4
+
5
+ @each $display in $displays
6
+ .is-#{$display}
7
+ display: #{$display} !important
8
+ +mobile
9
+ .is-#{$display}-mobile
10
+ display: #{$display} !important
11
+ +tablet
12
+ .is-#{$display}-tablet
13
+ display: #{$display} !important
14
+ +tablet-only
15
+ .is-#{$display}-tablet-only
16
+ display: #{$display} !important
17
+ +touch
18
+ .is-#{$display}-touch
19
+ display: #{$display} !important
20
+ +desktop
21
+ .is-#{$display}-desktop
22
+ display: #{$display} !important
23
+ +desktop-only
24
+ .is-#{$display}-desktop-only
25
+ display: #{$display} !important
26
+ +widescreen
27
+ .is-#{$display}-widescreen
28
+ display: #{$display} !important
29
+ +widescreen-only
30
+ .is-#{$display}-widescreen-only
31
+ display: #{$display} !important
32
+ +fullhd
33
+ .is-#{$display}-fullhd
34
+ display: #{$display} !important
35
+
36
+ .is-hidden
37
+ display: none !important
38
+
39
+ .is-sr-only
40
+ border: none !important
41
+ clip: rect(0, 0, 0, 0) !important
42
+ height: 0.01em !important
43
+ overflow: hidden !important
44
+ padding: 0 !important
45
+ position: absolute !important
46
+ white-space: nowrap !important
47
+ width: 0.01em !important
48
+
49
+ +mobile
50
+ .is-hidden-mobile
51
+ display: none !important
52
+
53
+ +tablet
54
+ .is-hidden-tablet
55
+ display: none !important
56
+
57
+ +tablet-only
58
+ .is-hidden-tablet-only
59
+ display: none !important
60
+
61
+ +touch
62
+ .is-hidden-touch
63
+ display: none !important
64
+
65
+ +desktop
66
+ .is-hidden-desktop
67
+ display: none !important
68
+
69
+ +desktop-only
70
+ .is-hidden-desktop-only
71
+ display: none !important
72
+
73
+ +widescreen
74
+ .is-hidden-widescreen
75
+ display: none !important
76
+
77
+ +widescreen-only
78
+ .is-hidden-widescreen-only
79
+ display: none !important
80
+
81
+ +fullhd
82
+ .is-hidden-fullhd
83
+ display: none !important
84
+
85
+ .is-invisible
86
+ visibility: hidden !important
87
+
88
+ +mobile
89
+ .is-invisible-mobile
90
+ visibility: hidden !important
91
+
92
+ +tablet
93
+ .is-invisible-tablet
94
+ visibility: hidden !important
95
+
96
+ +tablet-only
97
+ .is-invisible-tablet-only
98
+ visibility: hidden !important
99
+
100
+ +touch
101
+ .is-invisible-touch
102
+ visibility: hidden !important
103
+
104
+ +desktop
105
+ .is-invisible-desktop
106
+ visibility: hidden !important
107
+
108
+ +desktop-only
109
+ .is-invisible-desktop-only
110
+ visibility: hidden !important
111
+
112
+ +widescreen
113
+ .is-invisible-widescreen
114
+ visibility: hidden !important
115
+
116
+ +widescreen-only
117
+ .is-invisible-widescreen-only
118
+ visibility: hidden !important
119
+
120
+ +fullhd
121
+ .is-invisible-fullhd
122
+ visibility: hidden !important
@@ -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,9 @@
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
2
5
 
6
+ // Main container
3
7
  .hero
4
8
  align-items: stretch
5
9
  display: flex
@@ -23,7 +27,7 @@
23
27
  .title
24
28
  color: $color-invert
25
29
  .subtitle
26
- color: rgba($color-invert, 0.9)
30
+ color: bulmaRgba($color-invert, 0.9)
27
31
  a:not(.button),
28
32
  strong
29
33
  color: $color-invert
@@ -32,12 +36,12 @@
32
36
  background-color: $color
33
37
  .navbar-item,
34
38
  .navbar-link
35
- color: rgba($color-invert, 0.7)
39
+ color: bulmaRgba($color-invert, 0.7)
36
40
  a.navbar-item,
37
41
  .navbar-link
38
42
  &:hover,
39
43
  &.is-active
40
- background-color: darken($color, 5%)
44
+ background-color: bulmaDarken($color, 5%)
41
45
  color: $color-invert
42
46
  .tabs
43
47
  a
@@ -53,7 +57,7 @@
53
57
  a
54
58
  color: $color-invert
55
59
  &:hover
56
- background-color: rgba($black, 0.1)
60
+ background-color: bulmaRgba($scheme-invert, 0.1)
57
61
  li.is-active a
58
62
  &,
59
63
  &:hover
@@ -61,28 +65,26 @@
61
65
  border-color: $color-invert
62
66
  color: $color
63
67
  // 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%)
68
+ @if type-of($color) == 'color'
69
+ &.is-bold
70
+ $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
71
+ $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
72
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
73
+ +mobile
74
+ .navbar-menu
75
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
71
76
  // Sizes
72
77
  &.is-small
73
78
  .hero-body
74
- padding-bottom: 1.5rem
75
- padding-top: 1.5rem
79
+ padding: $hero-body-padding-small
76
80
  &.is-medium
77
81
  +tablet
78
82
  .hero-body
79
- padding-bottom: 9rem
80
- padding-top: 9rem
83
+ padding: $hero-body-padding-medium
81
84
  &.is-large
82
85
  +tablet
83
86
  .hero-body
84
- padding-bottom: 18rem
85
- padding-top: 18rem
87
+ padding: $hero-body-padding-large
86
88
  &.is-halfheight,
87
89
  &.is-fullheight,
88
90
  &.is-fullheight-with-navbar
@@ -128,7 +130,7 @@
128
130
  display: flex
129
131
  justify-content: center
130
132
  .button:not(:last-child)
131
- margin-right: 1.5rem
133
+ +ltr-property("margin", 1.5rem)
132
134
 
133
135
  // Containers
134
136
 
@@ -140,4 +142,4 @@
140
142
  .hero-body
141
143
  flex-grow: 1
142
144
  flex-shrink: 0
143
- padding: 3rem 1.5rem
145
+ padding: $hero-body-padding
@@ -2,7 +2,7 @@
2
2
 
3
3
  @import "initial-variables.sass"
4
4
  @import "functions.sass"
5
- @import "derived-variables.sass"
5
+ @import "derived-variables.scss"
6
6
  @import "animations.sass"
7
7
  @import "mixins.sass"
8
8
  @import "controls.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