bulma-sass 0.7.5 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
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