bulma-rails 0.0.12 → 0.0.14

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: 9dff5111bb133a0c6a8459f28a72b7fa52742de1
4
- data.tar.gz: 894b6acd0a5a303b801a93e11b326e6bf8b76a96
3
+ metadata.gz: 5b0f4d6f41267e12ff732b169a7c209cd613c387
4
+ data.tar.gz: ec5d9ac2ad39f0c4c043d6b93f76500ac9c82065
5
5
  SHA512:
6
- metadata.gz: bc149aec5b1db97d6bf13f63de5427f54d85f2eeaa9e83bdcb33280c9f010f3ad59a0e55115db6aa3ab9844bea71b531872cc3e4bef3db6fa02e1ef97fa93690
7
- data.tar.gz: 9e82f40f5ed056e0e304f7af4f040d5a3bf4808502b141f8a4b30bd1c10d27ede169a499eba3f81942d245e1f99b3f2c821efbfe25c17e6e0faff2c614cc2b47
6
+ metadata.gz: ccc262c5aad2f836d702f46483e95a0908e67152b70d3430690877bfcb37bb924d36561bcd334f43356bebc710dc7670301421424890ed0eaa8dd47968c28dba
7
+ data.tar.gz: 6f576cab241f16d91959f11a51acb811b14628ba7999aa3f94b4adcc5d4c1a27fec3cd0660e755a885b6ec65de64d8431e4ef795256b25424454448154c782c9
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.12"
11
+ gem "bulma-rails", "~> 0.0.14"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import generic
4
- @import content
5
- @import highlight
6
- @import helpers
3
+ @import "generic"
4
+ @import "content"
5
+ @import "highlight"
6
+ @import "helpers"
@@ -1,4 +1,5 @@
1
1
  .content
2
+ @extend .block
2
3
  &.is-medium
3
4
  font-size: $size-5
4
5
  code
@@ -7,8 +8,6 @@
7
8
  font-size: $size-4
8
9
  code
9
10
  font-size: $size-5
10
- &:not(:last-child)
11
- margin-bottom: 20px
12
11
  h1,
13
12
  h2,
14
13
  h3,
@@ -7,6 +7,8 @@ html
7
7
  overflow-x: hidden
8
8
  overflow-y: scroll
9
9
  text-rendering: optimizeLegibility
10
+ &.has-modal-open
11
+ overflow: hidden
10
12
 
11
13
  body,
12
14
  button,
@@ -47,7 +49,6 @@ hr
47
49
  margin: 20px 0
48
50
 
49
51
  img
50
- max-height: 100%
51
52
  max-width: 100%
52
53
 
53
54
  input[type="checkbox"],
@@ -90,10 +91,17 @@ table
90
91
  th
91
92
  color: $text-strong
92
93
 
94
+ .block:not(:last-child)
95
+ margin-bottom: 20px
96
+
93
97
  .container
94
- margin: 0 auto
95
- max-width: 960px
96
98
  position: relative
99
+ +desktop
100
+ margin: 0 auto
101
+ max-width: 960px
102
+ &.is-fluid
103
+ margin: 0 20px
104
+ max-width: none
97
105
 
98
106
  .fa
99
107
  font-size: 21px
@@ -1,14 +1,3 @@
1
- // Alignment
2
-
3
- .is-centered
4
- text-align: center
5
-
6
- .is-left
7
- text-align: left
8
-
9
- .is-right
10
- text-align: right
11
-
12
1
  // Display
13
2
 
14
3
  .is-block
@@ -20,7 +9,7 @@
20
9
  .is-flex
21
10
  display: flex
22
11
 
23
- // Pull
12
+ // Float
24
13
 
25
14
  .is-clearfix
26
15
  +clearfix
@@ -31,11 +20,27 @@
31
20
  .is-pulled-right
32
21
  float: right
33
22
 
23
+ // Overlay
24
+
25
+ .is-overlay
26
+ +overlay
27
+
34
28
  // Size
35
29
 
36
30
  .is-fullwidth
37
31
  width: 100%
38
32
 
33
+ // Text
34
+
35
+ .is-text-centered
36
+ text-align: center
37
+
38
+ .is-text-left
39
+ text-align: left
40
+
41
+ .is-text-right
42
+ text-align: right
43
+
39
44
  // Visibility
40
45
 
41
46
  .is-hidden-mobile
@@ -1,12 +1,10 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import grid
4
- @import navbar
5
- @import card
6
- @import table
7
- @import tabs
8
- @import media
9
- @import menu
10
-
11
- .block:not(:last-child)
12
- margin-bottom: 20px
3
+ @import "grid"
4
+ @import "navbar"
5
+ @import "card"
6
+ @import "table"
7
+ @import "tabs"
8
+ @import "media"
9
+ @import "menu"
10
+ @import "modal"
@@ -10,10 +10,18 @@
10
10
  .columns.is-mobile > &.is-quarter
11
11
  flex: none
12
12
  width: 25%
13
+ .columns.is-mobile > &.is-offset-half
14
+ margin-left: 50%
15
+ .columns.is-mobile > &.is-offset-third
16
+ margin-left: 33.3333%
17
+ .columns.is-mobile > &.is-offset-quarter
18
+ margin-left: 25%
13
19
  @for $i from 1 through 11
14
- .columns.is-mobile > &.is-#{$i}-mobile
20
+ .columns.is-mobile > &.is-#{$i}
15
21
  flex: none
16
22
  width: ($i / 12) * 100%
23
+ .columns.is-mobile > &.is-offset-#{$i}
24
+ margin-left: ($i / 12) * 100%
17
25
  +mobile
18
26
  &.is-half-mobile
19
27
  flex: none
@@ -24,10 +32,18 @@
24
32
  &.is-quarter-mobile
25
33
  flex: none
26
34
  width: 25%
35
+ &.is-offset-half-mobile
36
+ margin-left: 50%
37
+ &.is-offset-third-mobile
38
+ margin-left: 33.3333%
39
+ &.is-offset-quarter-mobile
40
+ margin-left: 25%
27
41
  @for $i from 1 through 11
28
42
  &.is-#{$i}-mobile
29
43
  flex: none
30
44
  width: ($i / 12) * 100%
45
+ &.is-offset-#{$i}-mobile
46
+ margin-left: ($i / 12) * 100%
31
47
  +tablet
32
48
  &.is-half,
33
49
  &.is-half-tablet
@@ -41,11 +57,23 @@
41
57
  &.is-quarter-tablet
42
58
  flex: none
43
59
  width: 25%
60
+ &.is-offset-half,
61
+ &.is-offset-half-tablet
62
+ margin-left: 50%
63
+ &.is-offset-third,
64
+ &.is-offset-third-tablet
65
+ margin-left: 33.3333%
66
+ &.is-offset-quarter,
67
+ &.is-offset-quarter-tablet
68
+ margin-left: 25%
44
69
  @for $i from 1 through 11
45
70
  &.is-#{$i},
46
71
  &.is-#{$i}-tablet
47
72
  flex: none
48
73
  width: ($i / 12) * 100%
74
+ &.is-offset-#{$i},
75
+ &.is-offset-#{$i}-tablet
76
+ margin-left: ($i / 12) * 100%
49
77
  +desktop
50
78
  &.is-half-desktop
51
79
  flex: none
@@ -56,10 +84,18 @@
56
84
  &.is-quarter-desktop
57
85
  flex: none
58
86
  width: 25%
87
+ &.is-offset-half-desktop
88
+ margin-left: 50%
89
+ &.is-offset-third-desktop
90
+ margin-left: 33.3333%
91
+ &.is-offset-quarter-desktop
92
+ margin-left: 25%
59
93
  @for $i from 1 through 11
60
94
  &.is-#{$i}-desktop
61
95
  flex: none
62
96
  width: ($i / 12) * 100%
97
+ &.is-offset-#{$i}-desktop
98
+ margin-left: ($i / 12) * 100%
63
99
 
64
100
  .columns
65
101
  margin-left: -10px
@@ -71,15 +107,11 @@
71
107
  margin-bottom: 10px
72
108
  &.is-mobile
73
109
  display: flex
74
- +tablet
75
- &:not(.is-desktop)
76
- display: flex
77
- +desktop
78
- &.is-desktop
79
- display: flex
80
110
  &.is-gapless
111
+ margin-left: 0
112
+ margin-right: 0
81
113
  &:not(:last-child)
82
- margin: 0 0 20px
114
+ margin-bottom: 20px
83
115
  & > .column
84
116
  margin: 0
85
117
  padding: 0
@@ -97,3 +129,9 @@
97
129
  width: 33.3333%
98
130
  & + .column
99
131
  margin-left: 0
132
+ +tablet
133
+ &:not(.is-desktop)
134
+ display: flex
135
+ +desktop
136
+ &.is-desktop
137
+ display: flex
@@ -1,14 +1,3 @@
1
- .media-image
2
- &.is-32
3
- width: 32px
4
- &.is-40
5
- width: 40px
6
- +mobile
7
- margin-bottom: 10px
8
- +tablet
9
- margin-right: 10px
10
- width: 60px
11
-
12
1
  .media-number
13
2
  background: $background
14
3
  border-radius: 290486px
@@ -26,25 +15,18 @@
26
15
  margin-right: 10px
27
16
 
28
17
  .media-left
29
- +mobile
30
- margin-bottom: 20px
31
- +tablet
32
- margin-right: 20px
18
+ margin-right: 10px
33
19
 
34
20
  .media-right
35
- +mobile
36
- margin-top: 20px
37
- +tablet
38
- margin-left: 20px
21
+ margin-left: 10px
39
22
 
40
23
  .media-content
41
24
  flex: 1
42
25
  text-align: left
43
- .textarea
44
- min-height: 60px
45
26
 
46
27
  .media
47
28
  align-items: flex-start
29
+ display: flex
48
30
  text-align: left
49
31
  .content:not(:last-child)
50
32
  margin-bottom: 10px
@@ -52,10 +34,6 @@
52
34
  border-top: 1px solid rgba($border, 0.5)
53
35
  display: flex
54
36
  padding-top: 10px
55
- .media-image
56
- margin-bottom: 0
57
- margin-right: 10px
58
- width: 40px
59
37
  .textarea
60
38
  +control-small
61
39
  .button
@@ -77,7 +55,6 @@
77
55
  margin-top: 20px
78
56
  padding-top: 20px
79
57
  +tablet
80
- display: flex
81
58
  &.is-large
82
59
  .media-number
83
60
  margin-right: 20px
@@ -7,8 +7,7 @@
7
7
  margin-bottom: 10px
8
8
 
9
9
  .navbar
10
- &:not(:last-child)
11
- margin-bottom: 20px
10
+ @extend .block
12
11
  code
13
12
  border-radius: $radius
14
13
  img
@@ -9,6 +9,9 @@
9
9
  border-width: 0 0 1px
10
10
  padding: 8px 10px
11
11
  vertical-align: top
12
+ &.table-narrow
13
+ white-space: nowrap
14
+ width: 1%
12
15
  &.table-link
13
16
  padding: 0
14
17
  & > a
@@ -1,10 +1,9 @@
1
1
  .tabs
2
+ @extend .block
2
3
  line-height: 24px
3
4
  overflow: hidden
4
5
  overflow-x: auto
5
6
  white-space: nowrap
6
- &:not(:last-child)
7
- margin-bottom: 20px
8
7
  .fa
9
8
  font-size: 14px
10
9
  line-height: 20px
@@ -4,7 +4,6 @@ $grey-darker: #222324
4
4
  $grey-dark: #69707a
5
5
  $grey: #aeb1b5
6
6
  $grey-light: #d3d6db
7
- $grey-lighter: #ebeff5
8
7
  $grey-lighter: #f5f7fa
9
8
 
10
9
  $blue: #42afe3
@@ -182,15 +182,15 @@
182
182
  top: 8px
183
183
  &:not(:last-child)
184
184
  margin-bottom: 10px
185
- &.is-withicon
186
- .fa
185
+ &.has-icon
186
+ & > .fa
187
187
  +fa(14px, 20px)
188
188
  color: $text-light
189
189
  left: 6px
190
190
  pointer-events: none
191
191
  position: absolute
192
192
  top: 6px
193
- z-index: 1
193
+ z-index: 4
194
194
  .input
195
195
  padding-left: 32px
196
196
  &:focus + .fa
@@ -1,10 +1,17 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import controls
4
- @import buttons
5
- @import titles
6
- @import messages
7
- @import notifications
3
+ @import "controls"
4
+ @import "buttons"
5
+ @import "titles"
6
+ @import "images"
7
+ @import "messages"
8
+ @import "notifications"
9
+
10
+ .box
11
+ background: white
12
+ border-radius: 5px
13
+ box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
14
+ padding: 20px
8
15
 
9
16
  .delete
10
17
  +unselectable
@@ -25,24 +32,27 @@
25
32
  content: ""
26
33
  display: block
27
34
  height: 2px
28
- left: 6px
35
+ left: 50%
36
+ margin-left: -25%
37
+ margin-top: -1px
29
38
  position: absolute
30
- top: 11px
31
- width: 12px
39
+ top: 50%
40
+ width: 50%
32
41
  &:before
33
42
  transform: rotate(45deg)
34
43
  &:after
35
44
  transform: rotate(-45deg)
36
45
  &:hover
37
- background: rgba(black, 0.5)
46
+ background: $red
38
47
  &.is-small
39
48
  height: 16px
40
49
  width: 16px
41
- &:before,
42
- &:after
43
- left: 4px
44
- top: 7px
45
- width: 8px
50
+ &.is-medium
51
+ height: 32px
52
+ width: 32px
53
+ &.is-large
54
+ height: 40px
55
+ width: 40px
46
56
 
47
57
  .icon
48
58
  +fa(21px, 24px)
@@ -106,13 +116,12 @@
106
116
  text-transform: uppercase
107
117
 
108
118
  .highlight
119
+ @extend .block
109
120
  font-size: 12px
110
121
  font-weight: normal
111
122
  max-width: 100%
112
123
  overflow: hidden
113
124
  padding: 0
114
- &:not(:last-child)
115
- margin-bottom: 20px
116
125
  pre
117
126
  overflow: auto
118
127
  max-width: 100%
@@ -19,10 +19,9 @@
19
19
  border-top: none
20
20
 
21
21
  .message
22
+ @extend .block
22
23
  background: $background
23
24
  border-radius: $radius
24
- &:not(:last-child)
25
- margin-bottom: 20px
26
25
  @each $name, $pair in $colors
27
26
  $color: nth($pair, 1)
28
27
  $color-invert: nth($pair, 2)
@@ -1,11 +1,10 @@
1
1
  .notification
2
+ @extend .block
2
3
  +clearfix
3
4
  background: $background
4
5
  border-radius: $radius
5
6
  padding: 16px 20px
6
7
  position: relative
7
- &:not(:last-child)
8
- margin-bottom: 20px
9
8
  .title
10
9
  color: inherit
11
10
  @each $name, $pair in $colors
@@ -15,6 +14,10 @@
15
14
  background: $color
16
15
  color: $color-invert
17
16
  .delete
17
+ background: rgba(black, 0.2)
18
18
  border-radius: 0 $radius
19
19
  float: right
20
20
  margin: -16px -20px 0 20px
21
+ &:hover
22
+ background: rgba(black, 0.5)
23
+
@@ -1,8 +1,10 @@
1
1
  .title,
2
2
  .subtitle
3
+ @extend .block
3
4
  font-weight: 300
4
- &:not(:last-child)
5
- margin-bottom: 20px
5
+ a
6
+ &:hover
7
+ border-bottom: 1px solid
6
8
 
7
9
  .title
8
10
  color: $text-strong
@@ -42,6 +42,9 @@
42
42
  border: none
43
43
  ul
44
44
  border-bottom: none
45
+ &.is-boxed
46
+ a
47
+ padding: 8px 15px
45
48
  &.is-alt
46
49
  background: $background
47
50
  color: $text-light
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import header
4
- @import hero
5
- @import section
6
- @import footer
3
+ @import "header"
4
+ @import "hero"
5
+ @import "section"
6
+ @import "footer"
@@ -64,6 +64,7 @@
64
64
 
65
65
  $tablet: 769px
66
66
  $desktop: 980px
67
+ $widescreen: 1180px
67
68
 
68
69
  =from($device)
69
70
  @media screen and (min-width: $device)
@@ -88,3 +89,7 @@ $desktop: 980px
88
89
  =desktop
89
90
  @media screen and (min-width: $desktop)
90
91
  @content
92
+
93
+ =widescreen
94
+ @media screen and (min-width: $widescreen)
95
+ @content
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import reset
4
- @import functions
5
- @import mixins
6
- @import animations
3
+ @import "reset"
4
+ @import "functions"
5
+ @import "mixins"
6
+ @import "animations"
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.12'
5
+ gem.version = '0.0.14'
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.12
4
+ version: 0.0.14
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-02-10 00:00:00.000000000 Z
11
+ date: 2016-02-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass