bulma-rails 0.5.3 → 0.6.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a8871a869d0f25ff4d8e940a11dff8bff11eb3be
4
- data.tar.gz: 10b9f9d1596bb8363ed3d8bbedcac49cd03beaec
3
+ metadata.gz: d27e1586857f0c0974dd06625e8696ededf9fd71
4
+ data.tar.gz: 83044c809b9ea7ab8f45c762ffbcad7fdf136999
5
5
  SHA512:
6
- metadata.gz: 2032ee03a7705799753ff40645fa994208f7d0513d84a5f5804a94d1cfd0fec0bab88f62af483e7694a7ac9bb88f0b6012c8e2429f52d0afc5738475c0d60278
7
- data.tar.gz: 52a5eb800d3c0f97b313f25037d3b2d306fb50c6d1504c8eafdc4a1cfdfec7d22e479fc8584e4f1994917ec6b4c6910f0decd38b3ad3c783614ceb6d06c87cee
6
+ metadata.gz: 22418e4cb5e256c443542ad5102a9d6080ae8e0a47c0c91be240bc547e3671352ff457d4ee36f784f50d464244d5a1ae2353d80e7fc295d4401859bd06eebf9e
7
+ data.tar.gz: 9d6333a192f6a1d369bb742877b51e26e7728189d773fed6b1bd14fe7a07d2cd3b909ba8083f84e1cab3fc1d4cb426e69c11ecb9cc614a763fa5c7954eb713d5
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.3"
11
+ gem "bulma-rails", "~> 0.6.0"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,5 +1,5 @@
1
1
  @charset "utf-8"
2
- /*! bulma.io v0.5.3 | MIT License | github.com/jgthms/bulma */
2
+ /*! bulma.io v0.6.0 | MIT License | github.com/jgthms/bulma */
3
3
  @import "sass/utilities/_all"
4
4
  @import "sass/base/_all"
5
5
  @import "sass/elements/_all"
@@ -8,7 +8,6 @@
8
8
  @import "menu.sass"
9
9
  @import "message.sass"
10
10
  @import "modal.sass"
11
- @import "nav.sass"
12
11
  @import "navbar.sass"
13
12
  @import "pagination.sass"
14
13
  @import "panel.sass"
@@ -1,4 +1,4 @@
1
- $breadcrumb-item-color: $text-light !default
1
+ $breadcrumb-item-color: $link !default
2
2
  $breadcrumb-item-hover-color: $link-hover !default
3
3
  $breadcrumb-item-active-color: $text-strong !default
4
4
 
@@ -8,8 +8,8 @@ $dropdown-content-z: 20 !default
8
8
  $dropdown-item-color: $grey-dark !default
9
9
  $dropdown-item-hover-color: $black !default
10
10
  $dropdown-item-hover-background-color: $background !default
11
- $dropdown-item-active-color: $primary-invert !default
12
- $dropdown-item-active-background-color: $primary !default
11
+ $dropdown-item-active-color: $link-invert !default
12
+ $dropdown-item-active-background-color: $link !default
13
13
 
14
14
  $dropdown-divider-background-color: $border !default
15
15
 
@@ -25,6 +25,12 @@ $dropdown-divider-background-color: $border !default
25
25
  .dropdown-menu
26
26
  left: auto
27
27
  right: 0
28
+ &.is-up
29
+ .dropdown-menu
30
+ bottom: 100%
31
+ padding-bottom: $dropdown-content-offset
32
+ padding-top: unset
33
+ top: auto
28
34
 
29
35
  .dropdown-menu
30
36
  display: none
@@ -20,6 +20,7 @@
20
20
  margin-bottom: 0
21
21
  &:not(.is-narrow)
22
22
  flex-grow: 1
23
+ margin-right: 0.75rem
23
24
  // Responsiveness
24
25
  +tablet
25
26
  display: flex
@@ -41,7 +42,7 @@
41
42
  +mobile
42
43
  &:not(:last-child)
43
44
  margin-bottom: 0.75rem
44
-
45
+
45
46
  .level-left,
46
47
  .level-right
47
48
  flex-basis: auto
@@ -9,10 +9,10 @@ $navbar-item-active-background-color: transparent !default
9
9
  $navbar-item-img-max-height: 1.75rem !default
10
10
 
11
11
  $navbar-tab-hover-background-color: transparent !default
12
- $navbar-tab-hover-border-bottom-color: $primary !default
13
- $navbar-tab-active-color: $primary !default
12
+ $navbar-tab-hover-border-bottom-color: $link !default
13
+ $navbar-tab-active-color: $link !default
14
14
  $navbar-tab-active-background-color: transparent !default
15
- $navbar-tab-active-border-bottom-color: $primary !default
15
+ $navbar-tab-active-border-bottom-color: $link !default
16
16
  $navbar-tab-active-border-bottom-style: solid !default
17
17
  $navbar-tab-active-border-bottom-width: 3px !default
18
18
 
@@ -28,7 +28,7 @@ $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($blac
28
28
 
29
29
  $navbar-dropdown-item-hover-color: $black !default
30
30
  $navbar-dropdown-item-hover-background-color: $background !default
31
- $navbar-dropdown-item-active-color: $primary !default
31
+ $navbar-dropdown-item-active-color: $link !default
32
32
  $navbar-dropdown-item-active-background-color: $background !default
33
33
 
34
34
  $navbar-divider-background-color: $border !default
@@ -196,12 +196,12 @@ a.navbar-item,
196
196
  .navbar-link
197
197
  &:hover,
198
198
  &.is-active
199
- background-color: transparent
199
+ background-color: transparent !important
200
200
  .navbar-item.has-dropdown
201
201
  &.is-active,
202
202
  &.is-hoverable:hover
203
203
  .navbar-link
204
- background-color: transparent
204
+ background-color: transparent !important
205
205
  .navbar-dropdown
206
206
  a.navbar-item
207
207
  &:hover
@@ -4,8 +4,8 @@ $tabs-border-bottom-width: 1px !default
4
4
  $tabs-link-color: $text !default
5
5
  $tabs-link-hover-border-bottom-color: $text-strong !default
6
6
  $tabs-link-hover-color: $text-strong !default
7
- $tabs-link-active-border-bottom-color: $primary !default
8
- $tabs-link-active-color: $primary !default
7
+ $tabs-link-active-border-bottom-color: $link !default
8
+ $tabs-link-active-color: $link !default
9
9
  $tabs-link-padding: 0.5em 1em !default
10
10
 
11
11
  $tabs-boxed-link-radius: $radius !default
@@ -22,9 +22,9 @@ $tabs-toggle-link-border-width: 1px !default
22
22
  $tabs-toggle-link-hover-background-color: $background !default
23
23
  $tabs-toggle-link-hover-border-color: $border-hover !default
24
24
  $tabs-toggle-link-radius: $radius !default
25
- $tabs-toggle-link-active-background-color: $primary !default
26
- $tabs-toggle-link-active-border-color: $primary !default
27
- $tabs-toggle-link-active-color: $primary-invert !default
25
+ $tabs-toggle-link-active-background-color: $link !default
26
+ $tabs-toggle-link-active-border-color: $link !default
27
+ $tabs-toggle-link-active-color: $link-invert !default
28
28
 
29
29
  .tabs
30
30
  +block
@@ -13,9 +13,9 @@ $button-focus-box-shadow-color: rgba($link, 0.25) !default
13
13
  $button-active-color: $link-active !default
14
14
  $button-active-border-color: $link-active-border !default
15
15
 
16
- $button-link-color: $text !default
17
- $button-link-hover-background-color: $background !default
18
- $button-link-hover-color: $text-strong !default
16
+ $button-text-color: $text !default
17
+ $button-text-hover-background-color: $background !default
18
+ $button-text-hover-color: $text-strong !default
19
19
 
20
20
  $button-disabled-background-color: $white !default
21
21
  $button-disabled-border-color: $grey-lighter !default
@@ -81,21 +81,21 @@ $button-static-border-color: $grey-lighter !default
81
81
  border-color: $button-active-border-color
82
82
  color: $button-active-color
83
83
  // Colors
84
- &.is-link
84
+ &.is-text
85
85
  background-color: transparent
86
86
  border-color: transparent
87
- color: $button-link-color
87
+ color: $button-text-color
88
88
  text-decoration: underline
89
89
  &:hover,
90
90
  &.is-hovered,
91
91
  &:focus,
92
92
  &.is-focused
93
- background-color: $button-link-hover-background-color
94
- color: $button-link-hover-color
93
+ background-color: $button-text-hover-background-color
94
+ color: $button-text-hover-color
95
95
  &:active,
96
96
  &.is-active
97
- background-color: darken($button-link-hover-background-color, 5%)
98
- color: $button-link-hover-color
97
+ background-color: darken($button-text-hover-background-color, 5%)
98
+ color: $button-text-hover-color
99
99
  &[disabled]
100
100
  background-color: transparent
101
101
  border-color: transparent
@@ -45,6 +45,8 @@ $help-size: $size-small !default
45
45
  background-color: $input-background-color
46
46
  border-color: $input-border-color
47
47
  color: $input-color
48
+ +placeholder
49
+ color: rgba($input-color, 0.3)
48
50
  &:hover,
49
51
  &.is-hovered
50
52
  border-color: $input-hover-border-color
@@ -45,8 +45,6 @@ $table-striped-row-even-hover-background-color: $white-ter !default
45
45
  color: $table-cell-heading-color
46
46
  text-align: left
47
47
  tr
48
- &:hover
49
- background-color: $table-row-hover-background-color
50
48
  &.is-selected
51
49
  background-color: $table-row-active-background-color
52
50
  color: $table-row-active-color
@@ -85,6 +83,16 @@ $table-striped-row-even-hover-background-color: $white-ter !default
85
83
  border-bottom-width: 1px
86
84
  &.is-fullwidth
87
85
  width: 100%
86
+ &.is-hoverable
87
+ tbody
88
+ tr
89
+ &:hover
90
+ background-color: $table-row-hover-background-color
91
+ &.is-striped
92
+ tbody
93
+ tr:not(.is-selected)
94
+ &:hover
95
+ background-color: $table-striped-row-even-hover-background-color
88
96
  &.is-narrow
89
97
  td,
90
98
  th
@@ -94,5 +102,3 @@ $table-striped-row-even-hover-background-color: $white-ter !default
94
102
  tr:not(.is-selected)
95
103
  &:nth-child(even)
96
104
  background-color: $table-striped-row-even-background-color
97
- &:hover
98
- background-color: $table-striped-row-even-hover-background-color
@@ -5,9 +5,8 @@
5
5
  display: flex
6
6
  flex-direction: column
7
7
  justify-content: space-between
8
- .nav
8
+ .navbar
9
9
  background: none
10
- box-shadow: 0 1px 0 rgba($border, 0.3)
11
10
  .tabs
12
11
  ul
13
12
  border-bottom: none
@@ -28,16 +27,17 @@
28
27
  a:not(.button),
29
28
  strong
30
29
  color: $color-invert
31
- .nav
32
- box-shadow: 0 1px 0 rgba($color-invert, 0.2)
33
- .nav-menu
34
- +mobile
30
+ .navbar-menu
31
+ +touch
35
32
  background-color: $color
36
- a.nav-item,
37
- .nav-item a:not(.button)
33
+ .navbar-item,
34
+ .navbar-link
38
35
  color: rgba($color-invert, 0.7)
36
+ a.navbar-item,
37
+ .navbar-link
39
38
  &:hover,
40
39
  &.is-active
40
+ background-color: darken($color, 5%)
41
41
  color: $color-invert
42
42
  .tabs
43
43
  a
@@ -66,21 +66,21 @@
66
66
  $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
67
67
  background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
68
68
  +mobile
69
- .nav-menu
69
+ .navbar-menu
70
70
  background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
71
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)
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)
84
84
  // Sizes
85
85
  &.is-small
86
86
  .hero-body
@@ -1,6 +1,6 @@
1
1
  $primary: $turquoise !default
2
2
 
3
- $info: $blue !default
3
+ $info: $cyan !default
4
4
  $success: $green !default
5
5
  $warning: $yellow !default
6
6
  $danger: $red !default
@@ -14,12 +14,13 @@ $orange-invert: findColorInvert($orange) !default
14
14
  $yellow-invert: findColorInvert($yellow) !default
15
15
  $green-invert: findColorInvert($green) !default
16
16
  $turquoise-invert: findColorInvert($turquoise) !default
17
+ $cyan-invert: findColorInvert($cyan) !default
17
18
  $blue-invert: findColorInvert($blue) !default
18
19
  $purple-invert: findColorInvert($purple) !default
19
20
  $red-invert: findColorInvert($red) !default
20
21
 
21
22
  $primary-invert: $turquoise-invert !default
22
- $info-invert: $blue-invert !default
23
+ $info-invert: $cyan-invert !default
23
24
  $success-invert: $green-invert !default
24
25
  $warning-invert: $yellow-invert !default
25
26
  $danger-invert: $red-invert !default
@@ -50,15 +51,15 @@ $pre-background: $background !default
50
51
 
51
52
  // Link colors
52
53
 
53
- $link: $primary !default
54
- $link-invert: $primary-invert !default
54
+ $link: $blue !default
55
+ $link-invert: $blue-invert !default
55
56
  $link-visited: $purple !default
56
57
 
57
58
  $link-hover: $grey-darker !default
58
59
  $link-hover-border: $grey-light !default
59
60
 
60
61
  $link-focus: $grey-darker !default
61
- $link-focus-border: $primary !default
62
+ $link-focus-border: $blue !default
62
63
 
63
64
  $link-active: $grey-darker !default
64
65
  $link-active-border: $grey-dark !default
@@ -75,7 +76,7 @@ $size-large: $size-4 !default
75
76
 
76
77
  // Lists and maps
77
78
 
78
- $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
79
+ $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
79
80
  $shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default
80
81
 
81
82
  $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@@ -18,6 +18,7 @@ $orange: hsl(14, 100%, 53%) !default
18
18
  $yellow: hsl(48, 100%, 67%) !default
19
19
  $green: hsl(141, 71%, 48%) !default
20
20
  $turquoise: hsl(171, 100%, 41%) !default
21
+ $cyan: hsl(204, 86%, 53%) !default
21
22
  $blue: hsl(217, 71%, 53%) !default
22
23
  $purple: hsl(271, 100%, 71%) !default
23
24
  $red: hsl(348, 100%, 61%) !default
@@ -1,3 +1,5 @@
1
+ @import "initial-variables"
2
+
1
3
  =arrow($color)
2
4
  border: 1px solid $color
3
5
  border-right: 0
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.5.3'
5
+ gem.version = '0.6.0'
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.3
4
+ version: 0.6.0
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-09-22 00:00:00.000000000 Z
11
+ date: 2017-10-25 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass