bulma-rails 0.7.3 → 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 (63) 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 +0 -1
  6. data/app/assets/stylesheets/sass/base/generic.sass +22 -10
  7. data/app/assets/stylesheets/sass/base/helpers.sass +1 -276
  8. data/app/assets/stylesheets/sass/base/minireset.sass +3 -3
  9. data/app/assets/stylesheets/sass/components/_all.sass +0 -1
  10. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  11. data/app/assets/stylesheets/sass/components/card.sass +15 -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 +4 -4
  18. data/app/assets/stylesheets/sass/components/navbar.sass +40 -27
  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 +0 -1
  23. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  24. data/app/assets/stylesheets/sass/elements/button.sass +79 -31
  25. data/app/assets/stylesheets/sass/elements/container.sass +14 -15
  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 +16 -3
  30. data/app/assets/stylesheets/sass/elements/progress.sass +16 -14
  31. data/app/assets/stylesheets/sass/elements/table.sass +10 -7
  32. data/app/assets/stylesheets/sass/elements/tag.sass +31 -25
  33. data/app/assets/stylesheets/sass/elements/title.sass +9 -3
  34. data/app/assets/stylesheets/sass/form/_all.sass +8 -0
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +21 -0
  36. data/app/assets/stylesheets/sass/form/file.sass +180 -0
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +64 -0
  38. data/app/assets/stylesheets/sass/form/select.sass +85 -0
  39. data/app/assets/stylesheets/sass/form/shared.sass +55 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +213 -0
  41. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  42. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  43. data/app/assets/stylesheets/sass/helpers/_all.sass +10 -0
  44. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  45. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  46. data/app/assets/stylesheets/sass/helpers/other.sass +8 -0
  47. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  48. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  49. data/app/assets/stylesheets/sass/helpers/spacing.sass +28 -0
  50. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  51. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  52. data/app/assets/stylesheets/sass/layout/footer.sass +4 -1
  53. data/app/assets/stylesheets/sass/layout/hero.sass +23 -34
  54. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -1
  55. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  56. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +132 -0
  57. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  58. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +10 -4
  59. data/app/assets/stylesheets/sass/utilities/mixins.sass +31 -7
  60. data/bulma-rails.gemspec +2 -2
  61. metadata +23 -8
  62. data/app/assets/stylesheets/sass/components/list.sass +0 -39
  63. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -85
@@ -9,6 +9,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
9
9
  width: 100%
10
10
  &.is-rounded
11
11
  border-radius: $radius-rounded
12
+ &.is-fullwidth
13
+ width: 100%
12
14
  // Ratio
13
15
  &.is-square,
14
16
  &.is-1by1,
@@ -1,13 +1,19 @@
1
1
  $notification-background-color: $background !default
2
+ $notification-code-background-color: $scheme-main !default
2
3
  $notification-radius: $radius !default
3
4
  $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
5
+ $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
6
+ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
4
7
 
5
8
  .notification
6
9
  @extend %block
7
10
  background-color: $notification-background-color
8
11
  border-radius: $notification-radius
9
- padding: $notification-padding
10
12
  position: relative
13
+ +ltr
14
+ padding: $notification-padding-ltr
15
+ +rtl
16
+ padding: $notification-padding-rtl
11
17
  a:not(.button):not(.dropdown-item)
12
18
  color: currentColor
13
19
  text-decoration: underline
@@ -15,12 +21,12 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
15
21
  color: currentColor
16
22
  code,
17
23
  pre
18
- background: $white
24
+ background: $notification-code-background-color
19
25
  pre code
20
26
  background: transparent
21
27
  & > .delete
28
+ +ltr-position(0.5rem)
22
29
  position: absolute
23
- right: 0.5rem
24
30
  top: 0.5rem
25
31
  .title,
26
32
  .subtitle,
@@ -33,3 +39,10 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
33
39
  &.is-#{$name}
34
40
  background-color: $color
35
41
  color: $color-invert
42
+ // If light and dark colors are provided
43
+ @if length($pair) >= 4
44
+ $color-light: nth($pair, 3)
45
+ $color-dark: nth($pair, 4)
46
+ &.is-light
47
+ background-color: $color-light
48
+ color: $color-dark
@@ -1,5 +1,6 @@
1
- $progress-bar-background-color: $border !default
1
+ $progress-bar-background-color: $border-light !default
2
2
  $progress-value-background-color: $text !default
3
+ $progress-border-radius: $radius-rounded !default
3
4
 
4
5
  $progress-indeterminate-duration: 1.5s !default
5
6
 
@@ -8,7 +9,7 @@ $progress-indeterminate-duration: 1.5s !default
8
9
  -moz-appearance: none
9
10
  -webkit-appearance: none
10
11
  border: none
11
- border-radius: $radius-rounded
12
+ border-radius: $progress-border-radius
12
13
  display: block
13
14
  height: $size-normal
14
15
  overflow: hidden
@@ -23,6 +24,19 @@ $progress-indeterminate-duration: 1.5s !default
23
24
  &::-ms-fill
24
25
  background-color: $progress-value-background-color
25
26
  border: none
27
+ // Colors
28
+ @each $name, $pair in $colors
29
+ $color: nth($pair, 1)
30
+ &.is-#{$name}
31
+ &::-webkit-progress-value
32
+ background-color: $color
33
+ &::-moz-progress-bar
34
+ background-color: $color
35
+ &::-ms-fill
36
+ background-color: $color
37
+ &:indeterminate
38
+ background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
39
+
26
40
  &:indeterminate
27
41
  animation-duration: $progress-indeterminate-duration
28
42
  animation-iteration-count: infinite
@@ -37,18 +51,6 @@ $progress-indeterminate-duration: 1.5s !default
37
51
  background-color: transparent
38
52
  &::-moz-progress-bar
39
53
  background-color: transparent
40
- // Colors
41
- @each $name, $pair in $colors
42
- $color: nth($pair, 1)
43
- &.is-#{$name}
44
- &::-webkit-progress-value
45
- background-color: $color
46
- &::-moz-progress-bar
47
- background-color: $color
48
- &::-ms-fill
49
- background-color: $color
50
- &:indeterminate
51
- background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
52
54
 
53
55
  // Sizes
54
56
  &.is-small
@@ -1,7 +1,7 @@
1
- $table-color: $grey-darker !default
2
- $table-background-color: $white !default
1
+ $table-color: $text-strong !default
2
+ $table-background-color: $scheme-main !default
3
3
 
4
- $table-cell-border: 1px solid $grey-lighter !default
4
+ $table-cell-border: 1px solid $border !default
5
5
  $table-cell-border-width: 0 0 1px !default
6
6
  $table-cell-padding: 0.5em 0.75em !default
7
7
  $table-cell-heading-color: $text-strong !default
@@ -15,13 +15,13 @@ $table-head-background-color: transparent !default
15
15
  $table-body-background-color: transparent !default
16
16
  $table-foot-background-color: transparent !default
17
17
 
18
- $table-row-hover-background-color: $white-bis !default
18
+ $table-row-hover-background-color: $scheme-main-bis !default
19
19
 
20
20
  $table-row-active-background-color: $primary !default
21
21
  $table-row-active-color: $primary-invert !default
22
22
 
23
- $table-striped-row-even-background-color: $white-bis !default
24
- $table-striped-row-even-hover-background-color: $white-ter !default
23
+ $table-striped-row-even-background-color: $scheme-main-bis !default
24
+ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
25
25
 
26
26
  .table
27
27
  @extend %block
@@ -51,9 +51,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
51
51
  a,
52
52
  strong
53
53
  color: currentColor
54
+ &.is-vcentered
55
+ vertical-align: middle
54
56
  th
55
57
  color: $table-cell-heading-color
56
- text-align: left
58
+ &:not([align])
59
+ text-align: inherit
57
60
  tr
58
61
  &.is-selected
59
62
  background-color: $table-row-active-background-color
@@ -11,7 +11,7 @@ $tag-delete-margin: 1px !default
11
11
  .tag
12
12
  margin-bottom: 0.5rem
13
13
  &:not(:last-child)
14
- margin-right: 0.5rem
14
+ +ltr-property("margin", 0.5rem)
15
15
  &:last-child
16
16
  margin-bottom: -0.5rem
17
17
  &:not(:last-child)
@@ -23,15 +23,6 @@ $tag-delete-margin: 1px !default
23
23
  &.are-large
24
24
  .tag:not(.is-normal):not(.is-medium)
25
25
  font-size: $size-medium
26
- &.has-addons
27
- .tag
28
- margin-right: 0
29
- &:not(:first-child)
30
- border-bottom-left-radius: 0
31
- border-top-left-radius: 0
32
- &:not(:last-child)
33
- border-bottom-right-radius: 0
34
- border-top-right-radius: 0
35
26
  &.is-centered
36
27
  justify-content: center
37
28
  .tag
@@ -46,14 +37,22 @@ $tag-delete-margin: 1px !default
46
37
  margin-right: 0
47
38
  &.has-addons
48
39
  .tag
49
- margin-right: 0
40
+ +ltr-property("margin", 0)
50
41
  &:not(:first-child)
51
- margin-left: 0
52
- border-bottom-left-radius: 0
53
- border-top-left-radius: 0
42
+ +ltr-property("margin", 0, false)
43
+ +ltr
44
+ border-top-left-radius: 0
45
+ border-bottom-left-radius: 0
46
+ +rtl
47
+ border-top-right-radius: 0
48
+ border-bottom-right-radius: 0
54
49
  &:not(:last-child)
55
- border-bottom-right-radius: 0
56
- border-top-right-radius: 0
50
+ +ltr
51
+ border-top-right-radius: 0
52
+ border-bottom-right-radius: 0
53
+ +rtl
54
+ border-top-left-radius: 0
55
+ border-bottom-left-radius: 0
57
56
 
58
57
  .tag:not(body)
59
58
  align-items: center
@@ -69,8 +68,8 @@ $tag-delete-margin: 1px !default
69
68
  padding-right: 0.75em
70
69
  white-space: nowrap
71
70
  .delete
72
- margin-left: 0.25rem
73
- margin-right: -0.375rem
71
+ +ltr-property("margin", 0.25rem, false)
72
+ +ltr-property("margin", -0.375rem)
74
73
  // Colors
75
74
  @each $name, $pair in $colors
76
75
  $color: nth($pair, 1)
@@ -78,6 +77,13 @@ $tag-delete-margin: 1px !default
78
77
  &.is-#{$name}
79
78
  background-color: $color
80
79
  color: $color-invert
80
+ // If a light and dark colors are provided
81
+ @if length($pair) > 3
82
+ $color-light: nth($pair, 3)
83
+ $color-dark: nth($pair, 4)
84
+ &.is-light
85
+ background-color: $color-light
86
+ color: $color-dark
81
87
  // Sizes
82
88
  &.is-normal
83
89
  font-size: $size-small
@@ -87,17 +93,17 @@ $tag-delete-margin: 1px !default
87
93
  font-size: $size-medium
88
94
  .icon
89
95
  &:first-child:not(:last-child)
90
- margin-left: -0.375em
91
- margin-right: 0.1875em
96
+ +ltr-property("margin", -0.375em, false)
97
+ +ltr-property("margin", 0.1875em)
92
98
  &:last-child:not(:first-child)
93
- margin-left: 0.1875em
94
- margin-right: -0.375em
99
+ +ltr-property("margin", 0.1875em, false)
100
+ +ltr-property("margin", -0.375em)
95
101
  &:first-child:last-child
96
- margin-left: -0.375em
97
- margin-right: -0.375em
102
+ +ltr-property("margin", -0.375em, false)
103
+ +ltr-property("margin", -0.375em)
98
104
  // Modifiers
99
105
  &.is-delete
100
- margin-left: $tag-delete-margin
106
+ +ltr-property("margin", $tag-delete-margin, false)
101
107
  padding: 0
102
108
  position: relative
103
109
  width: 2em
@@ -1,4 +1,5 @@
1
- $title-color: $grey-darker !default
1
+ $title-color: $text-strong !default
2
+ $title-family: false !default
2
3
  $title-size: $size-3 !default
3
4
  $title-weight: $weight-semibold !default
4
5
  $title-line-height: 1.125 !default
@@ -7,11 +8,12 @@ $title-strong-weight: inherit !default
7
8
  $title-sub-size: 0.75em !default
8
9
  $title-sup-size: 0.75em !default
9
10
 
10
- $subtitle-color: $grey-dark !default
11
+ $subtitle-color: $text !default
12
+ $subtitle-family: false !default
11
13
  $subtitle-size: $size-5 !default
12
14
  $subtitle-weight: $weight-normal !default
13
15
  $subtitle-line-height: 1.25 !default
14
- $subtitle-strong-color: $grey-darker !default
16
+ $subtitle-strong-color: $text-strong !default
15
17
  $subtitle-strong-weight: $weight-semibold !default
16
18
  $subtitle-negative-margin: -1.25rem !default
17
19
 
@@ -31,6 +33,8 @@ $subtitle-negative-margin: -1.25rem !default
31
33
 
32
34
  .title
33
35
  color: $title-color
36
+ @if $title-family
37
+ font-family: $title-family
34
38
  font-size: $title-size
35
39
  font-weight: $title-weight
36
40
  line-height: $title-line-height
@@ -49,6 +53,8 @@ $subtitle-negative-margin: -1.25rem !default
49
53
 
50
54
  .subtitle
51
55
  color: $subtitle-color
56
+ @if $subtitle-family
57
+ font-family: $subtitle-family
52
58
  font-size: $subtitle-size
53
59
  font-weight: $subtitle-weight
54
60
  line-height: $subtitle-line-height
@@ -0,0 +1,8 @@
1
+ @charset "utf-8"
2
+
3
+ @import "shared.sass"
4
+ @import "input-textarea.sass"
5
+ @import "checkbox-radio.sass"
6
+ @import "select.sass"
7
+ @import "file.sass"
8
+ @import "tools.sass"
@@ -0,0 +1,21 @@
1
+ %checkbox-radio
2
+ cursor: pointer
3
+ display: inline-block
4
+ line-height: 1.25
5
+ position: relative
6
+ input
7
+ cursor: pointer
8
+ &:hover
9
+ color: $input-hover-color
10
+ &[disabled],
11
+ fieldset[disabled] &
12
+ color: $input-disabled-color
13
+ cursor: not-allowed
14
+
15
+ .checkbox
16
+ @extend %checkbox-radio
17
+
18
+ .radio
19
+ @extend %checkbox-radio
20
+ & + .radio
21
+ +ltr-property("margin", 0.5em, false)
@@ -0,0 +1,180 @@
1
+ $file-border-color: $border !default
2
+ $file-radius: $radius !default
3
+
4
+ $file-cta-background-color: $scheme-main-ter !default
5
+ $file-cta-color: $text !default
6
+ $file-cta-hover-color: $text-strong !default
7
+ $file-cta-active-color: $text-strong !default
8
+
9
+ $file-name-border-color: $border !default
10
+ $file-name-border-style: solid !default
11
+ $file-name-border-width: 1px 1px 1px 0 !default
12
+ $file-name-max-width: 16em !default
13
+
14
+ .file
15
+ @extend %unselectable
16
+ align-items: stretch
17
+ display: flex
18
+ justify-content: flex-start
19
+ position: relative
20
+ // Colors
21
+ @each $name, $pair in $colors
22
+ $color: nth($pair, 1)
23
+ $color-invert: nth($pair, 2)
24
+ &.is-#{$name}
25
+ .file-cta
26
+ background-color: $color
27
+ border-color: transparent
28
+ color: $color-invert
29
+ &:hover,
30
+ &.is-hovered
31
+ .file-cta
32
+ background-color: bulmaDarken($color, 2.5%)
33
+ border-color: transparent
34
+ color: $color-invert
35
+ &:focus,
36
+ &.is-focused
37
+ .file-cta
38
+ border-color: transparent
39
+ box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
40
+ color: $color-invert
41
+ &:active,
42
+ &.is-active
43
+ .file-cta
44
+ background-color: bulmaDarken($color, 5%)
45
+ border-color: transparent
46
+ color: $color-invert
47
+ // Sizes
48
+ &.is-small
49
+ font-size: $size-small
50
+ &.is-medium
51
+ font-size: $size-medium
52
+ .file-icon
53
+ .fa
54
+ font-size: 21px
55
+ &.is-large
56
+ font-size: $size-large
57
+ .file-icon
58
+ .fa
59
+ font-size: 28px
60
+ // Modifiers
61
+ &.has-name
62
+ .file-cta
63
+ border-bottom-right-radius: 0
64
+ border-top-right-radius: 0
65
+ .file-name
66
+ border-bottom-left-radius: 0
67
+ border-top-left-radius: 0
68
+ &.is-empty
69
+ .file-cta
70
+ border-radius: $file-radius
71
+ .file-name
72
+ display: none
73
+ &.is-boxed
74
+ .file-label
75
+ flex-direction: column
76
+ .file-cta
77
+ flex-direction: column
78
+ height: auto
79
+ padding: 1em 3em
80
+ .file-name
81
+ border-width: 0 1px 1px
82
+ .file-icon
83
+ height: 1.5em
84
+ width: 1.5em
85
+ .fa
86
+ font-size: 21px
87
+ &.is-small
88
+ .file-icon .fa
89
+ font-size: 14px
90
+ &.is-medium
91
+ .file-icon .fa
92
+ font-size: 28px
93
+ &.is-large
94
+ .file-icon .fa
95
+ font-size: 35px
96
+ &.has-name
97
+ .file-cta
98
+ border-radius: $file-radius $file-radius 0 0
99
+ .file-name
100
+ border-radius: 0 0 $file-radius $file-radius
101
+ border-width: 0 1px 1px
102
+ &.is-centered
103
+ justify-content: center
104
+ &.is-fullwidth
105
+ .file-label
106
+ width: 100%
107
+ .file-name
108
+ flex-grow: 1
109
+ max-width: none
110
+ &.is-right
111
+ justify-content: flex-end
112
+ .file-cta
113
+ border-radius: 0 $file-radius $file-radius 0
114
+ .file-name
115
+ border-radius: $file-radius 0 0 $file-radius
116
+ border-width: 1px 0 1px 1px
117
+ order: -1
118
+
119
+ .file-label
120
+ align-items: stretch
121
+ display: flex
122
+ cursor: pointer
123
+ justify-content: flex-start
124
+ overflow: hidden
125
+ position: relative
126
+ &:hover
127
+ .file-cta
128
+ background-color: bulmaDarken($file-cta-background-color, 2.5%)
129
+ color: $file-cta-hover-color
130
+ .file-name
131
+ border-color: bulmaDarken($file-name-border-color, 2.5%)
132
+ &:active
133
+ .file-cta
134
+ background-color: bulmaDarken($file-cta-background-color, 5%)
135
+ color: $file-cta-active-color
136
+ .file-name
137
+ border-color: bulmaDarken($file-name-border-color, 5%)
138
+
139
+ .file-input
140
+ height: 100%
141
+ left: 0
142
+ opacity: 0
143
+ outline: none
144
+ position: absolute
145
+ top: 0
146
+ width: 100%
147
+
148
+ .file-cta,
149
+ .file-name
150
+ @extend %control
151
+ border-color: $file-border-color
152
+ border-radius: $file-radius
153
+ font-size: 1em
154
+ padding-left: 1em
155
+ padding-right: 1em
156
+ white-space: nowrap
157
+
158
+ .file-cta
159
+ background-color: $file-cta-background-color
160
+ color: $file-cta-color
161
+
162
+ .file-name
163
+ border-color: $file-name-border-color
164
+ border-style: $file-name-border-style
165
+ border-width: $file-name-border-width
166
+ display: block
167
+ max-width: $file-name-max-width
168
+ overflow: hidden
169
+ text-align: inherit
170
+ text-overflow: ellipsis
171
+
172
+ .file-icon
173
+ align-items: center
174
+ display: flex
175
+ height: 1em
176
+ justify-content: center
177
+ +ltr-property("margin", 0.5em)
178
+ width: 1em
179
+ .fa
180
+ font-size: 14px