bulma-rails 0.7.4 → 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 (65) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/README.md +1 -1
  4. data/app/assets/stylesheets/bulma.sass +3 -1
  5. data/app/assets/stylesheets/sass/base/_all.sass +1 -1
  6. data/app/assets/stylesheets/sass/base/generic.sass +23 -10
  7. data/app/assets/stylesheets/sass/base/helpers.sass +1 -276
  8. data/app/assets/stylesheets/sass/base/minireset.sass +3 -8
  9. data/app/assets/stylesheets/sass/components/_all.sass +1 -1
  10. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  11. data/app/assets/stylesheets/sass/components/card.sass +19 -10
  12. data/app/assets/stylesheets/sass/components/dropdown.sass +15 -11
  13. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  14. data/app/assets/stylesheets/sass/components/media.sass +14 -10
  15. data/app/assets/stylesheets/sass/components/menu.sass +16 -9
  16. data/app/assets/stylesheets/sass/components/message.sass +24 -11
  17. data/app/assets/stylesheets/sass/components/modal.sass +7 -5
  18. data/app/assets/stylesheets/sass/components/navbar.sass +43 -28
  19. data/app/assets/stylesheets/sass/components/pagination.sass +16 -10
  20. data/app/assets/stylesheets/sass/components/panel.sass +33 -15
  21. data/app/assets/stylesheets/sass/components/tabs.sass +36 -13
  22. data/app/assets/stylesheets/sass/elements/_all.sass +1 -1
  23. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  24. data/app/assets/stylesheets/sass/elements/button.sass +82 -32
  25. data/app/assets/stylesheets/sass/elements/container.sass +19 -17
  26. data/app/assets/stylesheets/sass/elements/content.sass +9 -5
  27. data/app/assets/stylesheets/sass/elements/form.sass +1 -602
  28. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  29. data/app/assets/stylesheets/sass/elements/notification.sass +19 -4
  30. data/app/assets/stylesheets/sass/elements/progress.sass +20 -14
  31. data/app/assets/stylesheets/sass/elements/table.sass +13 -8
  32. data/app/assets/stylesheets/sass/elements/tag.sass +34 -26
  33. data/app/assets/stylesheets/sass/elements/title.sass +9 -3
  34. data/app/assets/stylesheets/sass/form/_all.sass +9 -0
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +22 -0
  36. data/app/assets/stylesheets/sass/form/file.sass +182 -0
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +66 -0
  38. data/app/assets/stylesheets/sass/form/select.sass +87 -0
  39. data/app/assets/stylesheets/sass/form/shared.sass +57 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +215 -0
  41. data/app/assets/stylesheets/sass/grid/_all.sass +1 -0
  42. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  43. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  44. data/app/assets/stylesheets/sass/helpers/_all.sass +12 -0
  45. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  46. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  47. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  48. data/app/assets/stylesheets/sass/helpers/other.sass +11 -0
  49. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  50. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  51. data/app/assets/stylesheets/sass/helpers/spacing.sass +31 -0
  52. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  53. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  54. data/app/assets/stylesheets/sass/layout/_all.sass +1 -0
  55. data/app/assets/stylesheets/sass/layout/footer.sass +4 -1
  56. data/app/assets/stylesheets/sass/layout/hero.sass +26 -35
  57. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -0
  58. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  59. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +32 -10
  60. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  61. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +10 -4
  62. data/app/assets/stylesheets/sass/utilities/mixins.sass +31 -7
  63. data/bulma-rails.gemspec +2 -2
  64. metadata +23 -7
  65. data/app/assets/stylesheets/sass/components/list.sass +0 -39
@@ -1,3 +1,5 @@
1
+ $tile-spacing: 0.75rem !default
2
+
1
3
  .tile
2
4
  align-items: stretch
3
5
  display: block
@@ -7,17 +9,17 @@
7
9
  min-height: min-content
8
10
  // Modifiers
9
11
  &.is-ancestor
10
- margin-left: -0.75rem
11
- margin-right: -0.75rem
12
- margin-top: -0.75rem
12
+ margin-left: $tile-spacing * -1
13
+ margin-right: $tile-spacing * -1
14
+ margin-top: $tile-spacing * -1
13
15
  &:last-child
14
- margin-bottom: -0.75rem
16
+ margin-bottom: $tile-spacing * -1
15
17
  &:not(:last-child)
16
- margin-bottom: 0.75rem
18
+ margin-bottom: $tile-spacing
17
19
  &.is-child
18
20
  margin: 0 !important
19
21
  &.is-parent
20
- padding: 0.75rem
22
+ padding: $tile-spacing
21
23
  &.is-vertical
22
24
  flex-direction: column
23
25
  & > .tile.is-child:not(:last-child)
@@ -0,0 +1,12 @@
1
+ /* Bulma Helpers */
2
+ @charset "utf-8"
3
+
4
+ @import "color.sass"
5
+ @import "flexbox.sass"
6
+ @import "float.sass"
7
+ @import "other.sass"
8
+ @import "overflow.sass"
9
+ @import "position.sass"
10
+ @import "spacing.sass"
11
+ @import "typography.sass"
12
+ @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,35 @@
1
+ $flex-direction-values: row, row-reverse, column, column-reverse
2
+ @each $value in $flex-direction-values
3
+ .is-flex-direction-#{$value}
4
+ flex-direction: $value !important
5
+
6
+ $flex-wrap-values: nowrap, wrap, wrap-reverse
7
+ @each $value in $flex-wrap-values
8
+ .is-flex-wrap-#{$value}
9
+ flex-wrap: $value !important
10
+
11
+ $justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
12
+ @each $value in $justify-content-values
13
+ .is-justify-content-#{$value}
14
+ justify-content: $value !important
15
+
16
+ $align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
17
+ @each $value in $align-content-values
18
+ .is-align-content-#{$value}
19
+ align-content: $value !important
20
+
21
+ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
22
+ @each $value in $align-items-values
23
+ .is-align-items-#{$value}
24
+ align-items: $value !important
25
+
26
+ $align-self-values: auto, flex-start, flex-end, center, baseline, stretch
27
+ @each $value in $align-self-values
28
+ .is-align-self-#{$value}
29
+ align-self: $value !important
30
+
31
+ $flex-operators: grow, shrink
32
+ @each $operator in $flex-operators
33
+ @for $i from 0 through 5
34
+ .is-flex-#{$operator}-#{$i}
35
+ flex-#{$operator}: $i !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,11 @@
1
+ .is-radiusless
2
+ border-radius: 0 !important
3
+
4
+ .is-shadowless
5
+ box-shadow: none !important
6
+
7
+ .is-clickable
8
+ cursor: pointer !important
9
+
10
+ .is-unselectable
11
+ @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,31 @@
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
+ // All directions
16
+ .#{$shortcut}-#{$name}
17
+ #{$property}: $value !important
18
+ // Cardinal directions
19
+ @each $direction, $suffix in $spacing-directions
20
+ .#{$shortcut}#{$suffix}-#{$name}
21
+ #{$property}-#{$direction}: $value !important
22
+ // Horizontal axis
23
+ @if $spacing-horizontal != null
24
+ .#{$shortcut}#{$spacing-horizontal}-#{$name}
25
+ #{$property}-left: $value !important
26
+ #{$property}-right: $value !important
27
+ // Vertical axis
28
+ @if $spacing-vertical != null
29
+ .#{$shortcut}#{$spacing-vertical}-#{$name}
30
+ #{$property}-top: $value !important
31
+ #{$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,3 +1,4 @@
1
+ /* Bulma Layout */
1
2
  @charset "utf-8"
2
3
 
3
4
  @import "hero.sass"
@@ -1,6 +1,9 @@
1
- $footer-background-color: $white-bis !default
1
+ $footer-background-color: $scheme-main-bis !default
2
+ $footer-color: false !default
2
3
  $footer-padding: 3rem 1.5rem 6rem !default
3
4
 
4
5
  .footer
5
6
  background-color: $footer-background-color
6
7
  padding: $footer-padding
8
+ @if $footer-color
9
+ color: $footer-color
@@ -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,19 +17,19 @@
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}
18
24
  background-color: $color
19
25
  color: $color-invert
20
- a:not(.button):not(.dropdown-item):not(.tag),
26
+ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
21
27
  strong
22
28
  color: inherit
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,41 +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%)
71
- // Responsiveness
72
- // +mobile
73
- // .nav-toggle
74
- // span
75
- // background-color: $color-invert
76
- // &:hover
77
- // background-color: rgba($black, 0.1)
78
- // &.is-active
79
- // span
80
- // background-color: $color-invert
81
- // .nav-menu
82
- // .nav-item
83
- // border-top-color: rgba($color-invert, 0.2)
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%)
84
78
  // Sizes
85
79
  &.is-small
86
80
  .hero-body
87
- padding-bottom: 1.5rem
88
- padding-top: 1.5rem
81
+ padding: $hero-body-padding-small
89
82
  &.is-medium
90
83
  +tablet
91
84
  .hero-body
92
- padding-bottom: 9rem
93
- padding-top: 9rem
85
+ padding: $hero-body-padding-medium
94
86
  &.is-large
95
87
  +tablet
96
88
  .hero-body
97
- padding-bottom: 18rem
98
- padding-top: 18rem
89
+ padding: $hero-body-padding-large
99
90
  &.is-halfheight,
100
91
  &.is-fullheight,
101
92
  &.is-fullheight-with-navbar
@@ -141,7 +132,7 @@
141
132
  display: flex
142
133
  justify-content: center
143
134
  .button:not(:last-child)
144
- margin-right: 1.5rem
135
+ +ltr-property("margin", 1.5rem)
145
136
 
146
137
  // Containers
147
138
 
@@ -153,4 +144,4 @@
153
144
  .hero-body
154
145
  flex-grow: 1
155
146
  flex-shrink: 0
156
- padding: 3rem 1.5rem
147
+ padding: $hero-body-padding