bulma-rails 0.5.1 → 0.5.2

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 48dad017d7592d692af1c1ee8930beabd11f3705
4
- data.tar.gz: c6a979b9db08188e07cdb176a8f7eb4cb471f444
3
+ metadata.gz: aa0743886a9f181e45610b5065950907987367a8
4
+ data.tar.gz: 6cfc96a0a5ca644aab42bf43091ace47ce8af40a
5
5
  SHA512:
6
- metadata.gz: 5aeacefcf06fefc3c240f614d17a37e5358019a62c5a5512ede8571de06e102e998635cebb8c6b82db2179f6cdcae525043d6e865fa723f7f4147858f1a50b13
7
- data.tar.gz: f4e4a1dab089774f17c6607e27bd1d263ed0acbeb4d364f8952bb05cee529ba72479c9e8f275fa72b9d7425f2addbb7e60e6364bee299a3971f170d9ebb49cf6
6
+ metadata.gz: 900e690166a3bd0e4939e9e29543cf2fcc925edb353a40d57ac22e52bd4496aaef5ef547b5aad858632c91d5b1f7aafb7cbc3f05d1f7d993188815f753cbf88c
7
+ data.tar.gz: 3595bc00b758420a31818909867ec7c02d30d3af50e0ced078308d0b68c98b408f31f4d762cc4f90a461b480bb1a9751b3fba8f277a5b98d2f6e7cd248063217
data/.gitignore CHANGED
File without changes
data/README.md CHANGED
@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
8
8
 
9
9
  Add this line to your application's Gemfile:
10
10
 
11
- gem "bulma-rails", "~> 0.5.1"
11
+ gem "bulma-rails", "~> 0.5.2"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,5 +1,5 @@
1
1
  @charset "utf-8"
2
- /*! bulma.io v0.5.1 | MIT License | github.com/jgthms/bulma */
2
+ /*! bulma.io v0.5.2 | MIT License | github.com/jgthms/bulma */
3
3
  @import "sass/utilities/_all"
4
4
  @import "sass/base/_all"
5
5
  @import "sass/elements/_all"
@@ -1,12 +1,12 @@
1
1
  $body-background-color: #fff !default
2
2
  $body-size: 16px !default
3
3
  $body-rendering: optimizeLegibility !default
4
- $body-family: $family-sans-serif !default
4
+ $body-family: $family-primary !default
5
5
  $body-color: $text !default
6
6
  $body-weight: $weight-normal !default
7
7
  $body-line-height: 1.5 !default
8
8
 
9
- $code-family: $family-monospace !default
9
+ $code-family: $family-code !default
10
10
  $code-padding: 0.25em 0.5em 0.25em !default
11
11
  $code-weight: normal !default
12
12
  $code-size: 0.875em !default
@@ -27,6 +27,7 @@ html
27
27
  overflow-x: hidden
28
28
  overflow-y: scroll
29
29
  text-rendering: $body-rendering
30
+ text-size-adjust: 100%
30
31
 
31
32
  article,
32
33
  aside,
@@ -21,29 +21,32 @@
21
21
 
22
22
  // Typography
23
23
 
24
- @each $size in $sizes
25
- $i: index($sizes, $size)
26
- .is-size-#{$i}
27
- font-size: $size !important
28
- +mobile
29
- .is-size-#{$i}-mobile
30
- font-size: $size !important
31
- +tablet
32
- .is-size-#{$i}-tablet
33
- font-size: $size !important
34
- +touch
35
- .is-size-#{$i}-touch
36
- font-size: $size !important
37
- +desktop
38
- .is-size-#{$i}-desktop
39
- font-size: $size !important
40
- +widescreen
41
- .is-size-#{$i}-widescreen
42
- font-size: $size !important
43
- +fullhd
44
- .is-size-#{$i}-fullhd
24
+ =typography-size($target:'')
25
+ @each $size in $sizes
26
+ $i: index($sizes, $size)
27
+ .is-size-#{$i}#{if($target == '', '', '-' + $target)}
45
28
  font-size: $size !important
46
29
 
30
+ +typography-size()
31
+
32
+ +mobile
33
+ +typography-size('mobile')
34
+
35
+ +tablet
36
+ +typography-size('tablet')
37
+
38
+ +touch
39
+ +typography-size('touch')
40
+
41
+ +desktop
42
+ +typography-size('desktop')
43
+
44
+ +widescreen
45
+ +typography-size('widescreen')
46
+
47
+ +fullhd
48
+ +typography-size('fullhd')
49
+
47
50
  $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
48
51
 
49
52
  @each $alignment, $text-align in $alignments
@@ -99,6 +102,15 @@ $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
99
102
  .has-text-#{$name}
100
103
  color: $shade !important
101
104
 
105
+ .has-text-weight-light
106
+ font-weight: $weight-light !important
107
+ .has-text-weight-normal
108
+ font-weight: $weight-normal !important
109
+ .has-text-weight-semibold
110
+ font-weight: $weight-semibold !important
111
+ .has-text-weight-bold
112
+ font-weight: $weight-bold !important
113
+
102
114
  // Visibility
103
115
 
104
116
  $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@@ -48,11 +48,13 @@
48
48
  flex-grow: 0
49
49
  flex-shrink: 0
50
50
  .level-item
51
- &:not(:last-child)
52
- margin-right: 0.75rem
53
51
  // Modifiers
54
52
  &.is-flexible
55
53
  flex-grow: 1
54
+ // Responsiveness
55
+ +tablet
56
+ &:not(:last-child)
57
+ margin-right: 0.75rem
56
58
 
57
59
  .level-left
58
60
  align-items: center
@@ -37,6 +37,49 @@ $navbar-divider-background-color: $border !default
37
37
  background-color: $navbar-background-color
38
38
  min-height: $navbar-height
39
39
  position: relative
40
+ @each $name, $pair in $colors
41
+ $color: nth($pair, 1)
42
+ $color-invert: nth($pair, 2)
43
+ &.is-#{$name}
44
+ background-color: $color
45
+ color: $color-invert
46
+ .navbar-brand
47
+ & > .navbar-item,
48
+ .navbar-link
49
+ color: $color-invert
50
+ & > a.navbar-item,
51
+ .navbar-link
52
+ &:hover,
53
+ &.is-active
54
+ background-color: darken($color, 5%)
55
+ color: $color-invert
56
+ .navbar-link
57
+ &::after
58
+ border-color: $color-invert
59
+ +desktop
60
+ .navbar-start,
61
+ .navbar-end
62
+ & > .navbar-item,
63
+ .navbar-link
64
+ color: $color-invert
65
+ & > a.navbar-item,
66
+ .navbar-link
67
+ &:hover,
68
+ &.is-active
69
+ background-color: darken($color, 5%)
70
+ color: $color-invert
71
+ .navbar-link
72
+ &::after
73
+ border-color: $color-invert
74
+ .navbar-item.has-dropdown:hover .navbar-link,
75
+ .navbar-item.has-dropdown.is-active .navbar-link
76
+ background-color: darken($color, 5%)
77
+ color: $color-invert
78
+ .navbar-dropdown
79
+ a.navbar-item
80
+ &.is-active
81
+ background-color: $color
82
+ color: $color-invert
40
83
  & > .container
41
84
  align-items: stretch
42
85
  display: flex
@@ -45,13 +88,16 @@ $navbar-divider-background-color: $border !default
45
88
  &.has-shadow
46
89
  box-shadow: 0 2px 3px rgba($black, 0.1)
47
90
 
48
- .navbar-brand
49
- +overflow-touch
91
+ .navbar-brand,
92
+ .navbar-tabs
50
93
  align-items: stretch
51
94
  display: flex
52
95
  flex-shrink: 0
53
- max-width: 100vw
54
96
  min-height: $navbar-height
97
+
98
+ .navbar-tabs
99
+ +overflow-touch
100
+ max-width: 100vw
55
101
  overflow-x: auto
56
102
  overflow-y: hidden
57
103
 
@@ -124,11 +170,13 @@ a.navbar-item,
124
170
  +touch
125
171
  .navbar > .container
126
172
  display: block
127
- .navbar-brand
173
+ .navbar-brand,
174
+ .navbar-tabs
128
175
  .navbar-item
129
176
  align-items: center
130
177
  display: flex
131
178
  .navbar-menu
179
+ background-color: $white
132
180
  box-shadow: 0 8px 16px rgba($black, 0.1)
133
181
  padding: 0.5rem 0
134
182
  &.is-active
@@ -235,8 +283,10 @@ a.navbar-item,
235
283
  .navbar-divider
236
284
  display: block
237
285
  .container > .navbar
238
- margin-left: -1rem
239
- margin-right: -1rem
286
+ .navbar-brand
287
+ margin-left: -1rem
288
+ .navbar-menu
289
+ margin-right: -1rem
240
290
  // Hover/Active states
241
291
  a.navbar-item,
242
292
  .navbar-link
@@ -7,6 +7,8 @@ $button-hover-border-color: $link-hover-border !default
7
7
 
8
8
  $button-focus-color: $link-focus !default
9
9
  $button-focus-border-color: $link-focus-border !default
10
+ $button-focus-box-shadow-size: 0 0 0 0.125em !default
11
+ $button-focus-box-shadow-color: rgba($link, 0.25) !default
10
12
 
11
13
  $button-active-color: $link-active !default
12
14
  $button-active-border-color: $link-active-border !default
@@ -24,8 +26,6 @@ $button-static-color: $grey !default
24
26
  $button-static-background-color: $white-ter !default
25
27
  $button-static-border-color: $grey-lighter !default
26
28
 
27
- $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
28
-
29
29
  // The button sizes use mixins so they can be used at different breakpoints
30
30
  =button-small
31
31
  border-radius: $radius-small
@@ -73,12 +73,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
73
73
  &:focus,
74
74
  &.is-focused
75
75
  border-color: $button-focus-border-color
76
- // box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
77
76
  color: $button-focus-color
77
+ &:not(:active)
78
+ box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
78
79
  &:active,
79
80
  &.is-active
80
81
  border-color: $button-active-border-color
81
- box-shadow: $button-shadow-inset
82
82
  color: $button-active-color
83
83
  // Colors
84
84
  &.is-link
@@ -89,10 +89,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
89
89
  &:hover,
90
90
  &.is-hovered,
91
91
  &:focus,
92
- &.is-focused,
92
+ &.is-focused
93
+ background-color: $button-link-hover-background-color
94
+ color: $button-link-hover-color
93
95
  &:active,
94
96
  &.is-active
95
- background-color: $button-link-hover-background-color
97
+ background-color: darken($button-link-hover-background-color, 5%)
96
98
  color: $button-link-hover-color
97
99
  &[disabled]
98
100
  background-color: transparent
@@ -113,13 +115,13 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
113
115
  &:focus,
114
116
  &.is-focused
115
117
  border-color: transparent
116
- box-shadow: 0 0 0.5em rgba($color, 0.25)
117
118
  color: $color-invert
119
+ &:not(:active)
120
+ box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
118
121
  &:active,
119
122
  &.is-active
120
123
  background-color: darken($color, 5%)
121
124
  border-color: transparent
122
- box-shadow: $button-shadow-inset
123
125
  color: $color-invert
124
126
  &[disabled]
125
127
  background-color: $color
@@ -1,9 +1,7 @@
1
- $container-offset: 60px !default
2
-
3
1
  .container
4
2
  margin: 0 auto
5
3
  position: relative
6
- +from($desktop + $container-offset)
4
+ +from($desktop)
7
5
  max-width: $desktop - (2 * $gap)
8
6
  width: $desktop - (2 * $gap)
9
7
  &.is-fluid
@@ -11,17 +9,17 @@ $container-offset: 60px !default
11
9
  margin-right: $gap
12
10
  max-width: none
13
11
  width: auto
14
- +until($widescreen + $container-offset)
12
+ +until($widescreen)
15
13
  &.is-widescreen
16
14
  max-width: $widescreen - (2 * $gap)
17
15
  width: auto
18
- +until($fullhd + $container-offset)
16
+ +until($fullhd)
19
17
  &.is-fullhd
20
18
  max-width: $fullhd - (2 * $gap)
21
19
  width: auto
22
- +from($widescreen + $container-offset)
20
+ +from($widescreen)
23
21
  max-width: $widescreen - (2 * $gap)
24
22
  width: $widescreen - (2 * $gap)
25
- +from($fullhd + $container-offset)
23
+ +from($fullhd)
26
24
  max-width: $fullhd - (2 * $gap)
27
25
  width: $fullhd - (2 * $gap)
@@ -86,8 +86,13 @@ $content-table-foot-cell-color: $text-strong !default
86
86
  dd
87
87
  margin-left: 2em
88
88
  figure
89
- margin: 2em
89
+ margin-left: 2em
90
+ margin-right: 2em
90
91
  text-align: center
92
+ &:not(:first-child)
93
+ margin-top: 2em
94
+ &:not(:last-child)
95
+ margin-bottom: 2em
91
96
  img
92
97
  display: inline-block
93
98
  figcaption
@@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
8
8
 
9
9
  $input-focus-color: $grey-darker !default
10
10
  $input-focus-border-color: $link !default
11
+ $input-focus-box-shadow-size: 0 0 0 0.125em !default
12
+ $input-focus-box-shadow-color: rgba($link, 0.25) !default
11
13
 
12
14
  $input-disabled-color: $text-light !default
13
15
  $input-disabled-background-color: $background !default
@@ -51,6 +53,7 @@ $help-size: $size-small !default
51
53
  &:active,
52
54
  &.is-active
53
55
  border-color: $input-focus-border-color
56
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
54
57
  &[disabled]
55
58
  background-color: $input-disabled-background-color
56
59
  border-color: $input-disabled-border-color
@@ -72,6 +75,11 @@ $help-size: $size-small !default
72
75
  $color: nth($pair, 1)
73
76
  &.is-#{$name}
74
77
  border-color: $color
78
+ &:focus,
79
+ &.is-focused,
80
+ &:active,
81
+ &.is-active
82
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
75
83
  // Sizes
76
84
  &.is-small
77
85
  +control-small
@@ -98,6 +106,9 @@ $help-size: $size-small !default
98
106
  min-height: 120px
99
107
  &[rows]
100
108
  height: unset
109
+ // Modifiers
110
+ &.has-fixed-size
111
+ resize: none
101
112
 
102
113
  .checkbox,
103
114
  .radio
@@ -137,13 +148,6 @@ $help-size: $size-small !default
137
148
  font-size: 1em
138
149
  max-width: 100%
139
150
  outline: none
140
- &:hover
141
- border-color: $input-hover-border-color
142
- &:focus,
143
- &.is-focused,
144
- &:active,
145
- &.is-active
146
- border-color: $input-focus-border-color
147
151
  &::-ms-expand
148
152
  display: none
149
153
  &[disabled]:hover
@@ -164,6 +168,11 @@ $help-size: $size-small !default
164
168
  $color: nth($pair, 1)
165
169
  &.is-#{$name} select
166
170
  border-color: $color
171
+ &:focus,
172
+ &.is-focused,
173
+ &:active,
174
+ &.is-active
175
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
167
176
  // Sizes
168
177
  &.is-small
169
178
  +control-small
@@ -9,21 +9,13 @@ $icon-dimensions-large: 3rem !default
9
9
  justify-content: center
10
10
  height: $icon-dimensions
11
11
  width: $icon-dimensions
12
- .fa
13
- font-size: 21px
14
12
  // Sizes
15
13
  &.is-small
16
14
  height: $icon-dimensions-small
17
15
  width: $icon-dimensions-small
18
- .fa
19
- font-size: 14px
20
16
  &.is-medium
21
17
  height: $icon-dimensions-medium
22
18
  width: $icon-dimensions-medium
23
- .fa
24
- font-size: 28px
25
19
  &.is-large
26
20
  height: $icon-dimensions-large
27
21
  width: $icon-dimensions-large
28
- .fa
29
- font-size: 42px
@@ -4,11 +4,6 @@
4
4
  .delete
5
5
  +delete
6
6
 
7
- .fa
8
- font-size: 21px
9
- text-align: center
10
- vertical-align: top
11
-
12
7
  .heading
13
8
  display: block
14
9
  font-size: 11px
@@ -1,6 +1,7 @@
1
1
  $tag-background-color: $background !default
2
2
  $tag-color: $text !default
3
3
  $tag-radius: $radius !default
4
+ $tag-delete-margin: 1px !default
4
5
 
5
6
  .tags
6
7
  align-items: center
@@ -25,7 +26,7 @@ $tag-radius: $radius !default
25
26
  border-bottom-right-radius: 0
26
27
  border-top-right-radius: 0
27
28
 
28
- .tag
29
+ .tag:not(body)
29
30
  align-items: center
30
31
  background-color: $tag-background-color
31
32
  border-radius: $tag-radius
@@ -55,7 +56,7 @@ $tag-radius: $radius !default
55
56
  font-size: $size-medium
56
57
  // Modifiers
57
58
  &.is-delete
58
- margin-left: 1px
59
+ margin-left: $tag-delete-margin
59
60
  padding: 0
60
61
  position: relative
61
62
  width: 2em
@@ -1,9 +1,11 @@
1
+ $column-gap: 0.75rem !default
2
+
1
3
  .column
2
4
  display: block
3
5
  flex-basis: 0
4
6
  flex-grow: 1
5
7
  flex-shrink: 1
6
- padding: 0.75rem
8
+ padding: $column-gap
7
9
  .columns.is-mobile > &.is-narrow
8
10
  flex: none
9
11
  .columns.is-mobile > &.is-full
@@ -278,13 +280,13 @@
278
280
  margin-left: ($i / 12) * 100%
279
281
 
280
282
  .columns
281
- margin-left: -0.75rem
282
- margin-right: -0.75rem
283
- margin-top: -0.75rem
283
+ margin-left: (-$column-gap)
284
+ margin-right: (-$column-gap)
285
+ margin-top: (-$column-gap)
284
286
  &:last-child
285
- margin-bottom: -0.75rem
287
+ margin-bottom: (-$column-gap)
286
288
  &:not(:last-child)
287
- margin-bottom: 0.75rem
289
+ margin-bottom: calc(1.5rem - #{$column-gap})
288
290
  // Modifiers
289
291
  &.is-centered
290
292
  justify-content: center
@@ -292,23 +294,13 @@
292
294
  margin-left: 0
293
295
  margin-right: 0
294
296
  margin-top: 0
295
- &:last-child
296
- margin-bottom: 0
297
- &:not(:last-child)
298
- margin-bottom: 1.5rem
299
297
  & > .column
300
298
  margin: 0
301
- padding: 0
302
- &.is-grid
303
- // Responsiveness
304
- +tablet
305
- flex-wrap: wrap
306
- & > .column
307
- max-width: 33.3333%
308
- padding: 0.75rem
309
- width: 33.3333%
310
- & + .column
311
- margin-left: 0
299
+ padding: 0 !important
300
+ &:not(:last-child)
301
+ margin-bottom: 1.5rem
302
+ &:last-child
303
+ margin-bottom: 0
312
304
  &.is-mobile
313
305
  display: flex
314
306
  &.is-multiline
@@ -323,3 +315,14 @@
323
315
  // Modifiers
324
316
  &.is-desktop
325
317
  display: flex
318
+
319
+ .columns.is-variable
320
+ --columnGap: 0.75rem
321
+ margin-left: calc(-1 * var(--columnGap))
322
+ margin-right: calc(-1 * var(--columnGap))
323
+ .column
324
+ padding-left: var(--columnGap)
325
+ padding-right: var(--columnGap)
326
+ @for $i from 0 through 8
327
+ &.is-#{$i}
328
+ --columnGap: $i * 0.25rem
@@ -82,6 +82,10 @@
82
82
  .nav-item
83
83
  border-top-color: rgba($color-invert, 0.2)
84
84
  // Sizes
85
+ &.is-small
86
+ .hero-body
87
+ padding-bottom: 1.5rem
88
+ padding-top: 1.5rem
85
89
  &.is-medium
86
90
  +tablet
87
91
  .hero-body
@@ -44,8 +44,8 @@ $weight-bold: 700 !default
44
44
 
45
45
  // Responsiveness
46
46
 
47
- // The container gap, which acts as the offset for breakpoints
48
- $gap: 24px !default
47
+ // The container horizontal gap, which acts as the offset for breakpoints
48
+ $gap: 32px !default
49
49
  // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
50
50
  $tablet: 769px !default
51
51
  // 960px container + 3rem
@@ -110,7 +110,7 @@
110
110
  position: relative
111
111
  width: $dimensions
112
112
  span
113
- background-color: $text
113
+ background-color: currentColor
114
114
  display: block
115
115
  height: 1px
116
116
  left: 50%
@@ -127,11 +127,10 @@
127
127
  &:nth-child(3)
128
128
  margin-top: 4px
129
129
  &:hover
130
- background-color: $background
130
+ background-color: rgba(black, 0.05)
131
131
  // Modifers
132
132
  &.is-active
133
133
  span
134
- background-color: $link
135
134
  &:nth-child(1)
136
135
  margin-left: -5px
137
136
  transform: rotate(45deg)
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.5.1'
5
+ gem.version = '0.5.2'
6
6
  gem.authors = ["Joshua Jansen"]
7
7
  gem.email = ["joshuajansen88@gmail.com"]
8
8
  gem.description = %q{A modern CSS framework based on Flexbox}
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bulma-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.1
4
+ version: 0.5.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-18 00:00:00.000000000 Z
11
+ date: 2017-09-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass