bulma-rails 0.7.4 → 0.7.5

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 (40) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/bulma.sass +2 -1
  4. data/app/assets/stylesheets/sass/base/generic.sass +21 -9
  5. data/app/assets/stylesheets/sass/base/helpers.sass +5 -0
  6. data/app/assets/stylesheets/sass/base/minireset.sass +2 -1
  7. data/app/assets/stylesheets/sass/components/card.sass +10 -5
  8. data/app/assets/stylesheets/sass/components/dropdown.sass +7 -3
  9. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  10. data/app/assets/stylesheets/sass/components/list.sass +3 -3
  11. data/app/assets/stylesheets/sass/components/menu.sass +15 -8
  12. data/app/assets/stylesheets/sass/components/message.sass +2 -1
  13. data/app/assets/stylesheets/sass/components/modal.sass +1 -1
  14. data/app/assets/stylesheets/sass/components/navbar.sass +16 -1
  15. data/app/assets/stylesheets/sass/components/pagination.sass +9 -4
  16. data/app/assets/stylesheets/sass/components/panel.sass +4 -2
  17. data/app/assets/stylesheets/sass/elements/_all.sass +0 -1
  18. data/app/assets/stylesheets/sass/elements/button.sass +33 -3
  19. data/app/assets/stylesheets/sass/elements/container.sass +9 -11
  20. data/app/assets/stylesheets/sass/elements/content.sass +5 -1
  21. data/app/assets/stylesheets/sass/elements/form.sass +1 -602
  22. data/app/assets/stylesheets/sass/elements/progress.sass +15 -13
  23. data/app/assets/stylesheets/sass/elements/table.sass +2 -1
  24. data/app/assets/stylesheets/sass/elements/tag.sass +0 -9
  25. data/app/assets/stylesheets/sass/elements/title.sass +6 -0
  26. data/app/assets/stylesheets/sass/form/_all.sass +8 -0
  27. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +21 -0
  28. data/app/assets/stylesheets/sass/form/file.sass +180 -0
  29. data/app/assets/stylesheets/sass/form/input-textarea.sass +60 -0
  30. data/app/assets/stylesheets/sass/form/select.sass +85 -0
  31. data/app/assets/stylesheets/sass/form/shared.sass +55 -0
  32. data/app/assets/stylesheets/sass/form/tools.sass +205 -0
  33. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  34. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  35. data/app/assets/stylesheets/sass/layout/footer.sass +3 -0
  36. data/app/assets/stylesheets/sass/layout/hero.sass +1 -14
  37. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +5 -1
  38. data/app/assets/stylesheets/sass/utilities/mixins.sass +2 -2
  39. data/bulma-rails.gemspec +2 -2
  40. metadata +13 -6
@@ -1,5 +1,6 @@
1
1
  $progress-bar-background-color: $border !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
@@ -53,7 +53,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
53
53
  color: currentColor
54
54
  th
55
55
  color: $table-cell-heading-color
56
- text-align: left
56
+ &:not([align])
57
+ text-align: left
57
58
  tr
58
59
  &.is-selected
59
60
  background-color: $table-row-active-background-color
@@ -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
@@ -1,4 +1,5 @@
1
1
  $title-color: $grey-darker !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
@@ -8,6 +9,7 @@ $title-sub-size: 0.75em !default
8
9
  $title-sup-size: 0.75em !default
9
10
 
10
11
  $subtitle-color: $grey-dark !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
@@ -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
+ margin-left: 0.5em
@@ -0,0 +1,180 @@
1
+ $file-border-color: $border !default
2
+ $file-radius: $radius !default
3
+
4
+ $file-cta-background-color: $white-ter !default
5
+ $file-cta-color: $grey-dark !default
6
+ $file-cta-hover-color: $grey-darker !default
7
+ $file-cta-active-color: $grey-darker !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: darken($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 rgba($color, 0.25)
40
+ color: $color-invert
41
+ &:active,
42
+ &.is-active
43
+ .file-cta
44
+ background-color: darken($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: darken($file-cta-background-color, 2.5%)
129
+ color: $file-cta-hover-color
130
+ .file-name
131
+ border-color: darken($file-name-border-color, 2.5%)
132
+ &:active
133
+ .file-cta
134
+ background-color: darken($file-cta-background-color, 5%)
135
+ color: $file-cta-active-color
136
+ .file-name
137
+ border-color: darken($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: left
170
+ text-overflow: ellipsis
171
+
172
+ .file-icon
173
+ align-items: center
174
+ display: flex
175
+ height: 1em
176
+ justify-content: center
177
+ margin-right: 0.5em
178
+ width: 1em
179
+ .fa
180
+ font-size: 14px
@@ -0,0 +1,60 @@
1
+ %input-textarea
2
+ @extend %input
3
+ box-shadow: $input-shadow
4
+ max-width: 100%
5
+ width: 100%
6
+ &[readonly]
7
+ box-shadow: none
8
+ // Colors
9
+ @each $name, $pair in $colors
10
+ $color: nth($pair, 1)
11
+ &.is-#{$name}
12
+ border-color: $color
13
+ &:focus,
14
+ &.is-focused,
15
+ &:active,
16
+ &.is-active
17
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
18
+ // Sizes
19
+ &.is-small
20
+ +control-small
21
+ &.is-medium
22
+ +control-medium
23
+ &.is-large
24
+ +control-large
25
+ // Modifiers
26
+ &.is-fullwidth
27
+ display: block
28
+ width: 100%
29
+ &.is-inline
30
+ display: inline
31
+ width: auto
32
+
33
+ .input
34
+ @extend %input-textarea
35
+ &.is-rounded
36
+ border-radius: $radius-rounded
37
+ padding-left: 1em
38
+ padding-right: 1em
39
+ &.is-static
40
+ background-color: transparent
41
+ border-color: transparent
42
+ box-shadow: none
43
+ padding-left: 0
44
+ padding-right: 0
45
+
46
+ .textarea
47
+ @extend %input-textarea
48
+ display: block
49
+ max-width: 100%
50
+ min-width: 100%
51
+ padding: 0.625em
52
+ resize: vertical
53
+ &:not([rows])
54
+ max-height: 600px
55
+ min-height: 120px
56
+ &[rows]
57
+ height: initial
58
+ // Modifiers
59
+ &.has-fixed-size
60
+ resize: none
@@ -0,0 +1,85 @@
1
+ .select
2
+ display: inline-block
3
+ max-width: 100%
4
+ position: relative
5
+ vertical-align: top
6
+ &:not(.is-multiple)
7
+ height: $input-height
8
+ &:not(.is-multiple):not(.is-loading)
9
+ &::after
10
+ @extend %arrow
11
+ border-color: $input-arrow
12
+ right: 1.125em
13
+ z-index: 4
14
+ &.is-rounded
15
+ select
16
+ border-radius: $radius-rounded
17
+ padding-left: 1em
18
+ select
19
+ @extend %input
20
+ cursor: pointer
21
+ display: block
22
+ font-size: 1em
23
+ max-width: 100%
24
+ outline: none
25
+ &::-ms-expand
26
+ display: none
27
+ &[disabled]:hover,
28
+ fieldset[disabled] &:hover
29
+ border-color: $input-disabled-border-color
30
+ &:not([multiple])
31
+ padding-right: 2.5em
32
+ &[multiple]
33
+ height: auto
34
+ padding: 0
35
+ option
36
+ padding: 0.5em 1em
37
+ // States
38
+ &:not(.is-multiple):not(.is-loading):hover
39
+ &::after
40
+ border-color: $input-hover-color
41
+ // Colors
42
+ @each $name, $pair in $colors
43
+ $color: nth($pair, 1)
44
+ &.is-#{$name}
45
+ &:not(:hover)::after
46
+ border-color: $color
47
+ select
48
+ border-color: $color
49
+ &:hover,
50
+ &.is-hovered
51
+ border-color: darken($color, 5%)
52
+ &:focus,
53
+ &.is-focused,
54
+ &:active,
55
+ &.is-active
56
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
57
+ // Sizes
58
+ &.is-small
59
+ +control-small
60
+ &.is-medium
61
+ +control-medium
62
+ &.is-large
63
+ +control-large
64
+ // Modifiers
65
+ &.is-disabled
66
+ &::after
67
+ border-color: $input-disabled-color
68
+ &.is-fullwidth
69
+ width: 100%
70
+ select
71
+ width: 100%
72
+ &.is-loading
73
+ &::after
74
+ @extend %loader
75
+ margin-top: 0
76
+ position: absolute
77
+ right: 0.625em
78
+ top: 0.625em
79
+ transform: none
80
+ &.is-small:after
81
+ font-size: $size-small
82
+ &.is-medium:after
83
+ font-size: $size-medium
84
+ &.is-large:after
85
+ font-size: $size-large