bulma-rails 0.0.23 → 0.0.24

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: 0acd4d0cdc013db40dbc67e2ec9c20976629b445
4
- data.tar.gz: 7d9021c83668d66baa58b82e4b67d11aa49db655
3
+ metadata.gz: a8689a719d4414df33f407969a8b0a34642dbb8e
4
+ data.tar.gz: 1a020eebc90466db2d4fca369ceb5d1f6e92c1b4
5
5
  SHA512:
6
- metadata.gz: 9525d525e230aa38b53d338b844854c564a7bb639deb789a7f6e27066ef6c4782b46c97c8af0c77a758279946dbebce08c20d6defdedb6fd2a100773f02dcf9d
7
- data.tar.gz: 9daa92e8c6d57b6f20f57f96ee07ef4672dca66233f7c079e0f74662dc96ef58a5fd6abc6a78bdde4e59f0b6cc9eb77396408b12b17b96c22cb8337a43555607
6
+ metadata.gz: 88a24cad2e0f639944af056c4389ef765f5019a61b7c43d71cd074b7b0673e28a376e23f13063abdb0c771684fca83381e599c5436374ae647450fd758e1e6d6
7
+ data.tar.gz: 460123e1dfe947ea487a599b09baa8d03daf50baef31084a804f8d9874cf993f3c76d19dc7f0ea337f77f449e855881d2b5797a241795d9330fc2cceb1e723b8
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.0.23"
11
+ gem "bulma-rails", "~> 0.0.24"
12
12
 
13
13
  And then execute:
14
14
 
@@ -21,19 +21,8 @@ To import all assets in your Rails project, add the following line to your appli
21
21
  @import "bulma";
22
22
  ```
23
23
 
24
- If you want to customize Bulma, you can import all folders manually in your application.scss:
25
-
26
- ``` ruby
27
- @import "bulma/utilities/utilities";
28
- @import "bulma/config/variables";
29
- @import "bulma/config/generated-variables";
30
- @import "bulma/base/base";
31
- @import "bulma/elements/elements";
32
- @import "bulma/components/components";
33
- @import "bulma/layout/layout";
34
- ```
35
-
36
- For more information about customizing Bulma, see: [http://bulma.io/documentation/overview/](http://bulma.io/documentation/overview/)
24
+ For information about customizing Bulma,
25
+ see: [http://bulma.io/documentation/overview/](http://bulma.io/documentation/overview/)
37
26
 
38
27
  ## Contributing
39
28
 
@@ -1,5 +1,5 @@
1
1
  @charset "utf-8"
2
2
 
3
3
  @import "generic"
4
+ @import "classes"
4
5
  @import "helpers"
5
- @import "highlight"
@@ -0,0 +1,18 @@
1
+ .block
2
+ &:not(:last-child)
3
+ margin-bottom: 20px
4
+
5
+ .container
6
+ position: relative
7
+ +desktop
8
+ margin: 0 auto
9
+ max-width: 960px
10
+ // Modifiers
11
+ &.is-fluid
12
+ margin: 0 20px
13
+ max-width: none
14
+
15
+ .fa
16
+ font-size: 21px
17
+ text-align: center
18
+ vertical-align: top
@@ -37,6 +37,7 @@ pre
37
37
  body
38
38
  color: $text
39
39
  font-size: 1rem
40
+ font-weight: $weight-normal
40
41
  line-height: 1.428571428571429
41
42
 
42
43
  // Inline
@@ -72,6 +73,7 @@ small
72
73
 
73
74
  strong
74
75
  color: $text-strong
76
+ font-weight: $weight-bold
75
77
 
76
78
  // Block
77
79
 
@@ -95,24 +97,3 @@ table
95
97
  vertical-align: top
96
98
  th
97
99
  color: $text-strong
98
-
99
- // Classes
100
-
101
- .block
102
- &:not(:last-child)
103
- margin-bottom: 20px
104
-
105
- .container
106
- position: relative
107
- +desktop
108
- margin: 0 auto
109
- max-width: 960px
110
- // Modifiers
111
- &.is-fluid
112
- margin: 0 20px
113
- max-width: none
114
-
115
- .fa
116
- font-size: 21px
117
- text-align: center
118
- vertical-align: top
@@ -2,6 +2,7 @@
2
2
 
3
3
  @import "card"
4
4
  @import "grid"
5
+ @import "highlight"
5
6
  @import "media"
6
7
  @import "menu"
7
8
  @import "message"
@@ -10,19 +11,3 @@
10
11
  @import "pagination"
11
12
  @import "panel"
12
13
  @import "tabs"
13
-
14
- .box
15
- @extend .block
16
- background: white
17
- border-radius: 5px
18
- box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
19
- display: block
20
- padding: 20px
21
-
22
- a.box
23
- &:hover,
24
- &:focus
25
- box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
26
- &:active
27
- box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
28
-
@@ -0,0 +1,14 @@
1
+ .box
2
+ @extend .block
3
+ background: white
4
+ border-radius: 5px
5
+ box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
6
+ display: block
7
+ padding: 20px
8
+
9
+ a.box
10
+ &:hover,
11
+ &:focus
12
+ box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
13
+ &:active
14
+ box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
@@ -79,6 +79,7 @@
79
79
  border-color: darken($color, 10%)
80
80
  color: darken($color, 10%)
81
81
  &.is-link
82
+ background: transparent
82
83
  border-color: transparent
83
84
  color: $text
84
85
  text-decoration: underline
@@ -2,6 +2,7 @@
2
2
 
3
3
  @import "controls"
4
4
 
5
+ @import "box"
5
6
  @import "button"
6
7
  @import "content"
7
8
  @import "image"
@@ -10,184 +11,4 @@
10
11
  @import "table"
11
12
  @import "title"
12
13
 
13
- .delete
14
- +unselectable
15
- -moz-appearance: none
16
- -webkit-appearance: none
17
- background: rgba(black, 0.2)
18
- border: none
19
- border-radius: 290486px
20
- cursor: pointer
21
- display: inline-block
22
- height: 24px
23
- position: relative
24
- vertical-align: top
25
- width: 24px
26
- &:before,
27
- &:after
28
- background: white
29
- content: ""
30
- display: block
31
- height: 2px
32
- left: 50%
33
- margin-left: -25%
34
- margin-top: -1px
35
- position: absolute
36
- top: 50%
37
- width: 50%
38
- &:before
39
- transform: rotate(45deg)
40
- &:after
41
- transform: rotate(-45deg)
42
- &:hover
43
- background: rgba(black, 0.5)
44
- // Sizes
45
- &.is-small
46
- height: 16px
47
- width: 16px
48
- &.is-medium
49
- height: 32px
50
- width: 32px
51
- &.is-large
52
- height: 40px
53
- width: 40px
54
-
55
- .icon
56
- +fa(21px, 24px)
57
- .fa
58
- font-size: inherit
59
- line-height: inherit
60
- // Sizes
61
- &.is-small
62
- +fa(14px, 16px)
63
- &.is-medium
64
- +fa(28px, 32px)
65
- &.is-large
66
- +fa(42px, 48px)
67
-
68
- .hamburger
69
- cursor: pointer
70
- display: block
71
- height: 50px
72
- position: relative
73
- width: 50px
74
- span
75
- background: $text
76
- display: block
77
- height: 1px
78
- left: 50%
79
- margin-left: -7px
80
- position: absolute
81
- top: 50%
82
- transition: none $speed $easing
83
- transition-property: background, left, opacity, transform
84
- width: 15px
85
- &:nth-child(1)
86
- margin-top: -6px
87
- &:nth-child(2)
88
- margin-top: -1px
89
- &:nth-child(3)
90
- margin-top: 4px
91
- &:hover
92
- background: $background
93
- // Modifers
94
- &.is-active
95
- span
96
- background: $link
97
- &:nth-child(1)
98
- margin-left: -5px
99
- transform: rotate(45deg)
100
- transform-origin: left top
101
- &:nth-child(2)
102
- opacity: 0
103
- &:nth-child(3)
104
- margin-left: -5px
105
- transform: rotate(-45deg)
106
- transform-origin: left bottom
107
- +tablet
108
- height: $header-height
109
- width: $header-height
110
-
111
- .heading
112
- display: block
113
- font-size: 11px
114
- letter-spacing: 1px
115
- margin-bottom: 5px
116
- text-transform: uppercase
117
-
118
- .highlight
119
- @extend .block
120
- font-size: 12px
121
- font-weight: normal
122
- max-width: 100%
123
- overflow: hidden
124
- padding: 0
125
- pre
126
- overflow: auto
127
- max-width: 100%
128
-
129
- .loader
130
- animation: spin-around 500ms infinite linear
131
- border: 2px solid $border
132
- border-radius: 290486px
133
- border-right-color: transparent
134
- border-top-color: transparent
135
- content: ""
136
- display: block
137
- height: 16px
138
- position: relative
139
- width: 16px
140
-
141
- .number
142
- background: $background
143
- border-radius: 290486px
144
- display: inline-block
145
- font-size: $size-medium
146
- vertical-align: top
147
-
148
- .tag
149
- align-items: center
150
- background: $background
151
- border-radius: 290486px
152
- color: $text
153
- display: inline-flex
154
- font-size: 12px
155
- height: 24px
156
- justify-content: center
157
- line-height: 16px
158
- padding: 4px 10px
159
- vertical-align: top
160
- white-space: nowrap
161
- .delete
162
- margin-left: 4px
163
- margin-right: -6px
164
- &:not(.is-large)
165
- .delete
166
- @extend .delete.is-small
167
- // Colors
168
- @each $name, $pair in $colors
169
- $color: nth($pair, 1)
170
- $color-invert: nth($pair, 2)
171
- &.is-#{$name}
172
- background: $color
173
- color: $color-invert
174
- &.is-dark
175
- background: $text
176
- color: $text-invert
177
- // Sizes
178
- &.is-small
179
- font-size: $size-small
180
- height: 20px
181
- padding: 2px 8px
182
- &.is-medium
183
- font-size: $size-normal
184
- height: 32px
185
- padding: 8px 14px
186
- &.is-large
187
- font-size: $size-5
188
- height: 40px
189
- line-height: 24px
190
- padding: 8px 18px
191
- .delete
192
- margin-left: 4px
193
- margin-right: -8px
14
+ @import "other"
@@ -0,0 +1,181 @@
1
+ .delete
2
+ +unselectable
3
+ -moz-appearance: none
4
+ -webkit-appearance: none
5
+ background: rgba(black, 0.2)
6
+ border: none
7
+ border-radius: 290486px
8
+ cursor: pointer
9
+ display: inline-block
10
+ height: 24px
11
+ position: relative
12
+ vertical-align: top
13
+ width: 24px
14
+ &:before,
15
+ &:after
16
+ background: white
17
+ content: ""
18
+ display: block
19
+ height: 2px
20
+ left: 50%
21
+ margin-left: -25%
22
+ margin-top: -1px
23
+ position: absolute
24
+ top: 50%
25
+ width: 50%
26
+ &:before
27
+ transform: rotate(45deg)
28
+ &:after
29
+ transform: rotate(-45deg)
30
+ &:hover
31
+ background: rgba(black, 0.5)
32
+ // Sizes
33
+ &.is-small
34
+ height: 16px
35
+ width: 16px
36
+ &.is-medium
37
+ height: 32px
38
+ width: 32px
39
+ &.is-large
40
+ height: 40px
41
+ width: 40px
42
+
43
+ .icon
44
+ +fa(21px, 24px)
45
+ .fa
46
+ font-size: inherit
47
+ line-height: inherit
48
+ // Sizes
49
+ &.is-small
50
+ +fa(14px, 16px)
51
+ &.is-medium
52
+ +fa(28px, 32px)
53
+ &.is-large
54
+ +fa(42px, 48px)
55
+
56
+ .hamburger
57
+ cursor: pointer
58
+ display: block
59
+ height: 50px
60
+ position: relative
61
+ width: 50px
62
+ span
63
+ background: $text
64
+ display: block
65
+ height: 1px
66
+ left: 50%
67
+ margin-left: -7px
68
+ position: absolute
69
+ top: 50%
70
+ transition: none $speed $easing
71
+ transition-property: background, left, opacity, transform
72
+ width: 15px
73
+ &:nth-child(1)
74
+ margin-top: -6px
75
+ &:nth-child(2)
76
+ margin-top: -1px
77
+ &:nth-child(3)
78
+ margin-top: 4px
79
+ &:hover
80
+ background: $background
81
+ // Modifers
82
+ &.is-active
83
+ span
84
+ background: $link
85
+ &:nth-child(1)
86
+ margin-left: -5px
87
+ transform: rotate(45deg)
88
+ transform-origin: left top
89
+ &:nth-child(2)
90
+ opacity: 0
91
+ &:nth-child(3)
92
+ margin-left: -5px
93
+ transform: rotate(-45deg)
94
+ transform-origin: left bottom
95
+ +tablet
96
+ height: $header-height
97
+ width: $header-height
98
+
99
+ .heading
100
+ display: block
101
+ font-size: 11px
102
+ letter-spacing: 1px
103
+ margin-bottom: 5px
104
+ text-transform: uppercase
105
+
106
+ .highlight
107
+ @extend .block
108
+ font-size: 12px
109
+ font-weight: normal
110
+ max-width: 100%
111
+ overflow: hidden
112
+ padding: 0
113
+ pre
114
+ overflow: auto
115
+ max-width: 100%
116
+
117
+ .loader
118
+ animation: spin-around 500ms infinite linear
119
+ border: 2px solid $border
120
+ border-radius: 290486px
121
+ border-right-color: transparent
122
+ border-top-color: transparent
123
+ content: ""
124
+ display: block
125
+ height: 16px
126
+ position: relative
127
+ width: 16px
128
+
129
+ .number
130
+ background: $background
131
+ border-radius: 290486px
132
+ display: inline-block
133
+ font-size: $size-medium
134
+ vertical-align: top
135
+
136
+ .tag
137
+ align-items: center
138
+ background: $background
139
+ border-radius: 290486px
140
+ color: $text
141
+ display: inline-flex
142
+ font-size: 12px
143
+ height: 24px
144
+ justify-content: center
145
+ line-height: 16px
146
+ padding: 4px 10px
147
+ vertical-align: top
148
+ white-space: nowrap
149
+ .delete
150
+ margin-left: 4px
151
+ margin-right: -6px
152
+ &:not(.is-large)
153
+ .delete
154
+ @extend .delete.is-small
155
+ // Colors
156
+ @each $name, $pair in $colors
157
+ $color: nth($pair, 1)
158
+ $color-invert: nth($pair, 2)
159
+ &.is-#{$name}
160
+ background: $color
161
+ color: $color-invert
162
+ &.is-dark
163
+ background: $text
164
+ color: $text-invert
165
+ // Sizes
166
+ &.is-small
167
+ font-size: $size-small
168
+ height: 20px
169
+ padding: 2px 8px
170
+ &.is-medium
171
+ font-size: $size-normal
172
+ height: 32px
173
+ padding: 8px 14px
174
+ &.is-large
175
+ font-size: $size-5
176
+ height: 40px
177
+ line-height: 24px
178
+ padding: 8px 18px
179
+ .delete
180
+ margin-left: 4px
181
+ margin-right: -8px
@@ -30,6 +30,8 @@ $size-6: 14px !default
30
30
 
31
31
  $size-7: 11px !default
32
32
 
33
+ $weight-normal: 400 !default
34
+ $weight-bold: 700 !default
33
35
  $weight-title-normal: 300 !default
34
36
  $weight-title-bold: 500 !default
35
37
 
data/bulma-rails.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.0.23'
5
+ gem.version = '0.0.24'
6
6
  gem.date = Date.today
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]
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.0.23
4
+ version: 0.0.24
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-04-21 00:00:00.000000000 Z
11
+ date: 2016-04-25 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -35,12 +35,13 @@ files:
35
35
  - README.md
36
36
  - app/assets/stylesheets/bulma.sass
37
37
  - app/assets/stylesheets/sass/base/base.sass
38
+ - app/assets/stylesheets/sass/base/classes.sass
38
39
  - app/assets/stylesheets/sass/base/generic.sass
39
40
  - app/assets/stylesheets/sass/base/helpers.sass
40
- - app/assets/stylesheets/sass/base/highlight.sass
41
41
  - app/assets/stylesheets/sass/components/card.sass
42
42
  - app/assets/stylesheets/sass/components/components.sass
43
43
  - app/assets/stylesheets/sass/components/grid.sass
44
+ - app/assets/stylesheets/sass/components/highlight.sass
44
45
  - app/assets/stylesheets/sass/components/media.sass
45
46
  - app/assets/stylesheets/sass/components/menu.sass
46
47
  - app/assets/stylesheets/sass/components/message.sass
@@ -49,12 +50,14 @@ files:
49
50
  - app/assets/stylesheets/sass/components/pagination.sass
50
51
  - app/assets/stylesheets/sass/components/panel.sass
51
52
  - app/assets/stylesheets/sass/components/tabs.sass
53
+ - app/assets/stylesheets/sass/elements/box.sass
52
54
  - app/assets/stylesheets/sass/elements/button.sass
53
55
  - app/assets/stylesheets/sass/elements/content.sass
54
56
  - app/assets/stylesheets/sass/elements/controls.sass
55
57
  - app/assets/stylesheets/sass/elements/elements.sass
56
58
  - app/assets/stylesheets/sass/elements/image.sass
57
59
  - app/assets/stylesheets/sass/elements/notification.sass
60
+ - app/assets/stylesheets/sass/elements/other.sass
58
61
  - app/assets/stylesheets/sass/elements/progress.sass
59
62
  - app/assets/stylesheets/sass/elements/table.sass
60
63
  - app/assets/stylesheets/sass/elements/title.sass