bulma-sass 0.8.2 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) 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 +1 -1
  5. data/app/assets/stylesheets/sass/base/helpers.sass +1 -281
  6. data/app/assets/stylesheets/sass/base/minireset.sass +1 -1
  7. data/app/assets/stylesheets/sass/components/_all.sass +0 -1
  8. data/app/assets/stylesheets/sass/components/breadcrumb.sass +3 -3
  9. data/app/assets/stylesheets/sass/components/card.sass +1 -1
  10. data/app/assets/stylesheets/sass/components/dropdown.sass +3 -3
  11. data/app/assets/stylesheets/sass/components/level.sass +2 -2
  12. data/app/assets/stylesheets/sass/components/media.sass +10 -8
  13. data/app/assets/stylesheets/sass/components/menu.sass +2 -2
  14. data/app/assets/stylesheets/sass/components/message.sass +1 -1
  15. data/app/assets/stylesheets/sass/components/modal.sass +2 -2
  16. data/app/assets/stylesheets/sass/components/navbar.sass +9 -9
  17. data/app/assets/stylesheets/sass/components/panel.sass +2 -2
  18. data/app/assets/stylesheets/sass/components/tabs.sass +35 -12
  19. data/app/assets/stylesheets/sass/elements/button.sass +7 -7
  20. data/app/assets/stylesheets/sass/elements/content.sass +5 -5
  21. data/app/assets/stylesheets/sass/elements/notification.sass +7 -2
  22. data/app/assets/stylesheets/sass/elements/table.sass +3 -1
  23. data/app/assets/stylesheets/sass/elements/tag.sass +24 -16
  24. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +1 -1
  25. data/app/assets/stylesheets/sass/form/file.sass +2 -2
  26. data/app/assets/stylesheets/sass/form/select.sass +4 -4
  27. data/app/assets/stylesheets/sass/form/tools.sass +18 -10
  28. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -0
  29. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  30. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  31. data/app/assets/stylesheets/sass/helpers/other.sass +8 -0
  32. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  33. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  34. data/app/assets/stylesheets/sass/helpers/spacing.sass +28 -0
  35. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  36. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  37. data/app/assets/stylesheets/sass/layout/hero.sass +1 -1
  38. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -1
  39. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +132 -0
  40. data/app/assets/stylesheets/sass/utilities/functions.sass +5 -0
  41. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +1 -0
  42. data/app/assets/stylesheets/sass/utilities/mixins.sass +24 -0
  43. data/lib/bulma/sass/version.rb +1 -1
  44. data/release.sh +2 -2
  45. metadata +12 -4
  46. data/app/assets/stylesheets/sass/components/list.sass +0 -39
  47. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -106
@@ -38,7 +38,7 @@ $help-size: $size-small !default
38
38
  justify-content: flex-start
39
39
  .control
40
40
  &:not(:last-child)
41
- margin-right: -1px
41
+ +ltr-property("margin", -1px)
42
42
  &:not(:first-child):not(:last-child)
43
43
  .button,
44
44
  .input,
@@ -48,14 +48,22 @@ $help-size: $size-small !default
48
48
  .button,
49
49
  .input,
50
50
  .select select
51
- border-bottom-right-radius: 0
52
- border-top-right-radius: 0
51
+ +ltr
52
+ border-bottom-right-radius: 0
53
+ border-top-right-radius: 0
54
+ +rtl
55
+ border-bottom-left-radius: 0
56
+ border-top-left-radius: 0
53
57
  &:last-child:not(:only-child)
54
58
  .button,
55
59
  .input,
56
60
  .select select
57
- border-bottom-left-radius: 0
58
- border-top-left-radius: 0
61
+ +ltr
62
+ border-bottom-left-radius: 0
63
+ border-top-left-radius: 0
64
+ +rtl
65
+ border-bottom-right-radius: 0
66
+ border-top-right-radius: 0
59
67
  .button,
60
68
  .input,
61
69
  .select select
@@ -88,7 +96,7 @@ $help-size: $size-small !default
88
96
  flex-shrink: 0
89
97
  &:not(:last-child)
90
98
  margin-bottom: 0
91
- margin-right: 0.75rem
99
+ +ltr-property("margin", 0.75rem)
92
100
  &.is-expanded
93
101
  flex-grow: 1
94
102
  flex-shrink: 1
@@ -119,7 +127,7 @@ $help-size: $size-small !default
119
127
  flex-basis: 0
120
128
  flex-grow: 1
121
129
  flex-shrink: 0
122
- margin-right: 1.5rem
130
+ +ltr-property("margin", 1.5rem)
123
131
  text-align: right
124
132
  &.is-small
125
133
  font-size: $size-small
@@ -148,14 +156,14 @@ $help-size: $size-small !default
148
156
  &:not(.is-narrow)
149
157
  flex-grow: 1
150
158
  &:not(:last-child)
151
- margin-right: 0.75rem
159
+ +ltr-property("margin", 0.75rem)
152
160
 
153
161
  .control
154
162
  box-sizing: border-box
155
163
  clear: both
156
164
  font-size: $size-normal
157
165
  position: relative
158
- text-align: left
166
+ text-align: inherit
159
167
  // Modifiers
160
168
  &.has-icons-left,
161
169
  &.has-icons-right
@@ -194,7 +202,7 @@ $help-size: $size-small !default
194
202
  &::after
195
203
  @extend %loader
196
204
  position: absolute !important
197
- right: 0.625em
205
+ +ltr-position(0.625em)
198
206
  top: 0.625em
199
207
  z-index: 4
200
208
  &.is-small:after
@@ -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
@@ -130,7 +130,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
130
130
  display: flex
131
131
  justify-content: center
132
132
  .button:not(:last-child)
133
- margin-right: 1.5rem
133
+ +ltr-property("margin", 1.5rem)
134
134
 
135
135
  // Containers
136
136
 
@@ -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"
@@ -0,0 +1,132 @@
1
+ $primary: $turquoise !default;
2
+
3
+ $info : $cyan !default;
4
+ $success: $green !default;
5
+ $warning: $yellow !default;
6
+ $danger : $red !default;
7
+
8
+ $light : $white-ter !default;
9
+ $dark : $grey-darker !default;
10
+
11
+ // Invert colors
12
+
13
+ $orange-invert : findColorInvert($orange) !default;
14
+ $yellow-invert : findColorInvert($yellow) !default;
15
+ $green-invert : findColorInvert($green) !default;
16
+ $turquoise-invert: findColorInvert($turquoise) !default;
17
+ $cyan-invert : findColorInvert($cyan) !default;
18
+ $blue-invert : findColorInvert($blue) !default;
19
+ $purple-invert : findColorInvert($purple) !default;
20
+ $red-invert : findColorInvert($red) !default;
21
+
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;
39
+
40
+ // General colors
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
+
49
+ $background : $white-ter !default;
50
+
51
+ $border : $grey-lighter !default;
52
+ $border-hover : $grey-light !default;
53
+ $border-light : $grey-lightest !default;
54
+ $border-light-hover: $grey-light !default;
55
+
56
+ // Text colors
57
+
58
+ $text : $grey-dark !default;
59
+ $text-invert: findColorInvert($text) !default;
60
+ $text-light : $grey !default;
61
+ $text-strong: $grey-darker !default;
62
+
63
+ // Code colors
64
+
65
+ $code : $red !default;
66
+ $code-background: $background !default;
67
+
68
+ $pre : $text !default;
69
+ $pre-background : $background !default;
70
+
71
+ // Link colors
72
+
73
+ $link : $blue !default;
74
+ $link-invert : findColorInvert($link) !default;
75
+ $link-light : findLightColor($link) !default;
76
+ $link-dark : findDarkColor($link) !default;
77
+ $link-visited : $purple !default;
78
+
79
+ $link-hover : $grey-darker !default;
80
+ $link-hover-border : $grey-light !default;
81
+
82
+ $link-focus : $grey-darker !default;
83
+ $link-focus-border : $blue !default;
84
+
85
+ $link-active : $grey-darker !default;
86
+ $link-active-border: $grey-dark !default;
87
+
88
+ // Typography
89
+
90
+ $family-primary : $family-sans-serif !default;
91
+ $family-secondary: $family-sans-serif !default;
92
+ $family-code : $family-monospace !default;
93
+
94
+ $size-small : $size-7 !default;
95
+ $size-normal: $size-6 !default;
96
+ $size-medium: $size-5 !default;
97
+ $size-large : $size-4 !default;
98
+
99
+ // Lists and maps
100
+ $custom-colors: null !default;
101
+ $custom-shades: null !default;
102
+
103
+ $colors: mergeColorMaps(
104
+ (
105
+ "white" : ($white, $black),
106
+ "black" : ($black, $white),
107
+ "light" : ($light, $light-invert),
108
+ "dark" : ($dark, $dark-invert),
109
+ "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
110
+ "link" : ($link, $link-invert, $link-light, $link-dark),
111
+ "info" : ($info, $info-invert, $info-light, $info-dark),
112
+ "success": ($success, $success-invert, $success-light, $success-dark),
113
+ "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
114
+ "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
115
+ $custom-colors
116
+ ) !default;
117
+
118
+ $shades: mergeColorMaps(
119
+ (
120
+ "black-bis" : $black-bis,
121
+ "black-ter" : $black-ter,
122
+ "grey-darker" : $grey-darker,
123
+ "grey-dark" : $grey-dark,
124
+ "grey" : $grey,
125
+ "grey-light" : $grey-light,
126
+ "grey-lighter": $grey-lighter,
127
+ "white-ter" : $white-ter,
128
+ "white-bis" : $white-bis),
129
+ $custom-shades
130
+ ) !default;
131
+
132
+ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;