bulma-rails 0.0.24 → 0.0.26

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 (35) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -1
  3. data/README.md +2 -2
  4. data/app/assets/stylesheets/sass/base/classes.sass +2 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +4 -3
  6. data/app/assets/stylesheets/sass/base/helpers.sass +44 -3
  7. data/app/assets/stylesheets/sass/components/card.sass +3 -4
  8. data/app/assets/stylesheets/sass/components/components.sass +2 -1
  9. data/app/assets/stylesheets/sass/components/grid.sass +0 -13
  10. data/app/assets/stylesheets/sass/components/level.sass +57 -0
  11. data/app/assets/stylesheets/sass/components/message.sass +1 -1
  12. data/app/assets/stylesheets/sass/components/modal.sass +40 -1
  13. data/app/assets/stylesheets/sass/components/nav.sass +120 -0
  14. data/app/assets/stylesheets/sass/components/navbar.sass +10 -2
  15. data/app/assets/stylesheets/sass/components/panel.sass +4 -2
  16. data/app/assets/stylesheets/sass/components/tabs.sass +68 -43
  17. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  18. data/app/assets/stylesheets/sass/elements/button.sass +14 -19
  19. data/app/assets/stylesheets/sass/elements/content.sass +6 -0
  20. data/app/assets/stylesheets/sass/elements/elements.sass +1 -2
  21. data/app/assets/stylesheets/sass/elements/{controls.sass → form.sass} +2 -50
  22. data/app/assets/stylesheets/sass/elements/other.sass +22 -16
  23. data/app/assets/stylesheets/sass/elements/table.sass +4 -2
  24. data/app/assets/stylesheets/sass/layout/footer.sass +8 -6
  25. data/app/assets/stylesheets/sass/layout/header.sass +7 -10
  26. data/app/assets/stylesheets/sass/layout/hero.sass +57 -62
  27. data/app/assets/stylesheets/sass/layout/layout.sass +0 -1
  28. data/app/assets/stylesheets/sass/layout/section.sass +1 -3
  29. data/app/assets/stylesheets/sass/utilities/controls.sass +51 -0
  30. data/app/assets/stylesheets/sass/utilities/functions.sass +1 -1
  31. data/app/assets/stylesheets/sass/utilities/mixins.sass +8 -7
  32. data/app/assets/stylesheets/sass/utilities/utilities.sass +1 -0
  33. data/app/assets/stylesheets/sass/utilities/variables.sass +8 -4
  34. data/bulma-rails.gemspec +1 -1
  35. metadata +6 -3
@@ -1,5 +1,5 @@
1
1
  .table
2
- background: white
2
+ background: $white
3
3
  color: $text-strong
4
4
  margin-bottom: 20px
5
5
  width: 100%
@@ -83,7 +83,9 @@
83
83
  &.is-striped
84
84
  tbody
85
85
  tr
86
+ &:hover
87
+ background: darken($background, 5%)
86
88
  &:nth-child(2n)
87
89
  background: $background
88
90
  &:hover
89
- background: $border
91
+ background: darken($background, 5%)
@@ -2,10 +2,12 @@
2
2
  background: $background
3
3
  padding: 40px 20px 80px
4
4
  a
5
- color: $text
6
- &:hover
7
- color: $text-strong
8
- &:not(.icon)
9
- border-bottom: 1px solid $border
5
+ &,
6
+ &:visited
7
+ color: $text
10
8
  &:hover
11
- border-bottom-color: $link
9
+ color: $text-strong
10
+ &:not(.icon)
11
+ border-bottom: 1px solid $border
12
+ &:hover
13
+ border-bottom-color: $link
@@ -1,18 +1,22 @@
1
+ $header-height: 50px !default
2
+
1
3
  .header
2
4
  +clearfix
3
- background: white
5
+ background: $white
4
6
  display: flex
5
7
  line-height: 24px
8
+ min-height: $header-height
6
9
  position: relative
7
10
  text-align: center
8
11
  z-index: 2
9
12
  .container
10
13
  align-items: stretch
11
14
  display: flex
15
+ min-height: $header-height
12
16
  width: 100%
13
17
  // Modifiers
14
18
  &.has-shadow
15
- box-shadow: 0 1px 2px rgba(black, 0.1)
19
+ box-shadow: 0 2px 3px rgba($black, 0.1)
16
20
  // Responsiveness
17
21
  +mobile
18
22
  .container
@@ -62,13 +66,6 @@ a.header-item
62
66
  &.is-active
63
67
  color: $link-active
64
68
 
65
- .header-icon
66
- +fa(14px, 24px)
67
- color: $text
68
- margin: 0 5px
69
- &:hover
70
- color: $link-hover
71
-
72
69
  .header-tab
73
70
  align-items: center
74
71
  border-bottom: 1px solid transparent
@@ -128,7 +125,7 @@ a.header-item
128
125
  .header-menu
129
126
  // Responsiveness
130
127
  +mobile
131
- box-shadow: 0 4px 7px rgba(black, 0.1)
128
+ box-shadow: 0 4px 7px rgba($black, 0.1)
132
129
  display: none
133
130
  .header-item
134
131
  border-top: 1px solid rgba($border, 0.5)
@@ -1,3 +1,5 @@
1
+ // Components
2
+
1
3
  .hero-video
2
4
  +overlay
3
5
  overflow: hidden
@@ -15,18 +17,12 @@
15
17
  +mobile
16
18
  display: none
17
19
 
18
- .hero-content
19
- padding: 40px 20px
20
- // Responsiveness
21
- +desktop
22
- padding: 40px 0
23
-
24
20
  .hero-buttons
25
21
  margin-top: 20px
26
22
  // Responsiveness
27
23
  +mobile
28
24
  .button
29
- display: block
25
+ display: flex
30
26
  &:not(:last-child)
31
27
  margin-bottom: 10px
32
28
  +tablet
@@ -35,21 +31,34 @@
35
31
  .button:not(:last-child)
36
32
  margin-right: 20px
37
33
 
34
+ // Containers
35
+
36
+ .hero-head,
37
+ .hero-foot
38
+ flex-shrink: 0
39
+
40
+ .hero-body
41
+ flex: 1
42
+ padding: 40px 20px
43
+ // Responsiveness
44
+ +desktop
45
+ padding-left: 0
46
+ padding-right: 0
47
+
48
+ // Main container
49
+
38
50
  .hero
39
- background: white
40
- .header
51
+ align-items: stretch
52
+ background: $white
53
+ display: flex
54
+ flex-direction: column
55
+ justify-content: space-between
56
+ .nav
41
57
  background: none
42
- .container
43
- box-shadow: 0 1px 0 rgba($border, 0.3)
58
+ box-shadow: 0 1px 0 rgba($border, 0.3)
44
59
  .tabs
45
- a
46
- border: none
47
60
  ul
48
61
  border-bottom: none
49
- // Modifiers
50
- &.is-boxed
51
- a
52
- padding: 8px 15px
53
62
  // Colors
54
63
  @each $name, $pair in $colors
55
64
  $color: nth($pair, 1)
@@ -67,11 +76,13 @@
67
76
  a,
68
77
  strong
69
78
  color: $color-invert
70
- .header .container
79
+ .nav
71
80
  box-shadow: 0 1px 0 rgba($color-invert, 0.2)
72
- .header-icon,
73
- a.header-item,
74
- .header-item > a:not(.button)
81
+ .nav-menu
82
+ +mobile
83
+ background: $color
84
+ a.nav-item,
85
+ .nav-item a:not(.button)
75
86
  color: rgba($color-invert, 0.5)
76
87
  &:hover,
77
88
  &.is-active
@@ -82,18 +93,20 @@
82
93
  opacity: 0.5
83
94
  &:hover
84
95
  opacity: 1
85
- li.is-active a
86
- opacity: 1
96
+ li
97
+ &.is-active a
98
+ opacity: 1
87
99
  &.is-boxed,
88
100
  &.is-toggle
89
101
  a
90
102
  color: $color-invert
91
103
  &:hover
92
- background: rgba(black, 0.1)
104
+ background: rgba($black, 0.1)
93
105
  li.is-active a
94
106
  &,
95
107
  &:hover
96
108
  background: $color-invert
109
+ border-color: $color-invert
97
110
  color: $color
98
111
  // Modifiers
99
112
  &.is-bold
@@ -102,54 +115,36 @@
102
115
  background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
103
116
  // Responsiveness
104
117
  +mobile
105
- .header-toggle
118
+ .nav-toggle
106
119
  span
107
120
  background: $color-invert
108
121
  &:hover
109
- background: rgba(black, 0.1)
122
+ background: rgba($black, 0.1)
110
123
  &.is-active
111
124
  span
112
125
  background: $color-invert
113
- .header-menu
114
- .header-item
126
+ .nav-menu
127
+ .nav-item
115
128
  border-top-color: rgba($color-invert, 0.2)
116
129
  // Sizes
117
- &.is-fullheight,
118
- &.is-large
119
- // Responsiveness
120
- +tablet
121
- .tabs
122
- font-size: $size-medium
123
130
  &.is-medium
124
- // Responsiveness
125
131
  +tablet
126
- .hero-content
127
- padding: 120px 20px
128
- +desktop
129
- .hero-content
130
- padding: 120px 0
132
+ .hero-body
133
+ padding-bottom: 120px
134
+ padding-top: 120px
135
+ &.is-large
136
+ +tablet
137
+ .hero-body
138
+ padding-bottom: 240px
139
+ padding-top: 240px
131
140
  &.is-fullheight
132
- align-items: stretch
133
- display: flex
134
- flex-direction: column
135
- justify-content: space-between
136
141
  min-height: 100vh
137
- .tabs
138
- a
139
- padding: 15px 20px
140
- .hero-content
142
+ .hero-body
143
+ align-items: center
141
144
  display: flex
142
- flex: 1
143
- flex-direction: column
144
- justify-content: center
145
- &.is-large
146
- .tabs
147
- a
148
- padding: 10px 15px
149
- // Responsiveness
150
- +tablet
151
- .hero-content
152
- padding: 240px 20px
153
- +desktop
154
- .hero-content
155
- padding: 240px 0
145
+ & > .container
146
+ align-items: stretch
147
+ display: flex
148
+ flex: 1
149
+ flex-direction: column
150
+ justify-content: center
@@ -1,6 +1,5 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import "header"
4
3
  @import "hero"
5
4
  @import "section"
6
5
  @import "footer"
@@ -1,8 +1,6 @@
1
1
  .section
2
- background: white
2
+ background: $white
3
3
  padding: 40px 20px
4
- & + .section
5
- border-top: 1px solid rgba($border, 0.5)
6
4
  // Responsiveness
7
5
  +desktop
8
6
  padding: 40px 0
@@ -0,0 +1,51 @@
1
+ =control
2
+ -moz-appearance: none
3
+ -webkit-appearance: none
4
+ align-items: center
5
+ background: $control-background
6
+ border: 1px solid $control-border
7
+ border-radius: $radius
8
+ color: $control
9
+ display: inline-flex
10
+ font-size: $size-normal
11
+ height: 32px
12
+ justify-content: flex-start
13
+ line-height: 24px
14
+ padding-left: 8px
15
+ padding-right: 8px
16
+ position: relative
17
+ vertical-align: top
18
+ &:hover
19
+ border-color: $control-hover-border
20
+ &:active,
21
+ &:focus
22
+ border-color: $control-active-border
23
+ outline: none
24
+ &[disabled],
25
+ &.is-disabled
26
+ background: $background
27
+ border-color: $control-border
28
+ cursor: not-allowed
29
+ pointer-events: none
30
+ +placeholder
31
+ color: rgba($control, 0.3)
32
+
33
+ =control-small
34
+ border-radius: 2px
35
+ font-size: 11px
36
+ height: 24px
37
+ line-height: 16px
38
+ padding-left: 6px
39
+ padding-right: 6px
40
+ =control-medium
41
+ font-size: 18px
42
+ height: 40px
43
+ line-height: 32px
44
+ padding-left: 10px
45
+ padding-right: 10px
46
+ =control-large
47
+ font-size: 24px
48
+ height: 48px
49
+ line-height: 40px
50
+ padding-left: 12px
51
+ padding-right: 12px
@@ -29,6 +29,6 @@
29
29
 
30
30
  @function findColorInvert($color)
31
31
  @if (colorLuminance($color) > 0.8)
32
- @return rgba(black, 0.5)
32
+ @return rgba($black, 0.5)
33
33
  @else
34
34
  @return white
@@ -55,13 +55,6 @@
55
55
  text-indent: -290486px
56
56
  width: $width
57
57
 
58
- =unselectable
59
- -webkit-touch-callout: none
60
- -webkit-user-select: none
61
- -moz-user-select: none
62
- -ms-user-select: none
63
- user-select: none
64
-
65
58
  =from($device)
66
59
  @media screen and (min-width: $device)
67
60
  @content
@@ -78,6 +71,10 @@
78
71
  @media screen and (min-width: $tablet)
79
72
  @content
80
73
 
74
+ =tablet-only
75
+ @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
76
+ @content
77
+
81
78
  =touch
82
79
  @media screen and (max-width: $desktop - 1px)
83
80
  @content
@@ -86,6 +83,10 @@
86
83
  @media screen and (min-width: $desktop)
87
84
  @content
88
85
 
86
+ =desktop-only
87
+ @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
88
+ @content
89
+
89
90
  =widescreen
90
91
  @media screen and (min-width: $widescreen)
91
92
  @content
@@ -4,4 +4,5 @@
4
4
  @import "functions"
5
5
  @import "mixins"
6
6
  @import "animations"
7
+ @import "controls"
7
8
  @import "variables"
@@ -2,11 +2,13 @@
2
2
 
3
3
  // Colors
4
4
 
5
+ $black: #111 !default
5
6
  $grey-darker: #222324 !default
6
7
  $grey-dark: #69707a !default
7
8
  $grey: #aeb1b5 !default
8
9
  $grey-light: #d3d6db !default
9
10
  $grey-lighter: #f5f7fa !default
11
+ $white: #fff !default
10
12
 
11
13
  $blue: #42afe3 !default
12
14
  $green: #97cd76 !default
@@ -45,7 +47,7 @@ $widescreen: 1180px !default
45
47
 
46
48
  $column-gap: 20px !default
47
49
 
48
- $header-height: 50px !default
50
+ $nav-height: 50px !default
49
51
 
50
52
  // Miscellaneous
51
53
 
@@ -62,7 +64,8 @@ $success: $green !default
62
64
  $warning: $yellow !default
63
65
  $danger: $red !default
64
66
 
65
- $dark: $grey-darker !default
67
+ $light: $grey-lighter !default
68
+ $dark: $grey-dark !default
66
69
 
67
70
  $text: $grey-dark !default
68
71
 
@@ -77,7 +80,8 @@ $success-invert: findColorInvert($success) !default
77
80
  $warning-invert: findColorInvert($warning) !default
78
81
  $danger-invert: findColorInvert($danger) !default
79
82
 
80
- $dark-invert: findColorInvert($dark) !default
83
+ $light-invert: $dark !default
84
+ $dark-invert: $light !default
81
85
 
82
86
  // General colors
83
87
 
@@ -142,6 +146,6 @@ $size-huge: $size-1 !default
142
146
 
143
147
  // 4. Lists and maps
144
148
 
145
- $colors: (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
149
+ $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
146
150
 
147
151
  $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.0.24'
5
+ gem.version = '0.0.26'
6
6
  gem.date = Date.today
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]