bulma-rails 0.0.4.1 → 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 0e0cbbe8c1c8c47635888d2b82edffac42193fa5
4
- data.tar.gz: 65dea609ba253e7156c7fdfdae5cf40f8a834b0c
3
+ metadata.gz: b1903a5de5e3268108dd6776f114f9c650dbd717
4
+ data.tar.gz: e0318dc987d4efafa59e9906824d38c9dceb1ac5
5
5
  SHA512:
6
- metadata.gz: d2255241567041ee73fe6486b74904c237560bae3e012aa70e2f2ee0c197a2f0759486e6f76625c3a1ff24ba0f22df1fd5a258fe698e34c4c35e212010d82bd5
7
- data.tar.gz: 4a2ad8a5c2191b499149c57056cf028029d3354aa3271b91f8b6e75f30b9b267b8920c48090eeba6b9f09fc0bad74c908dae9a1a98eb1240b64877c8cfc4036f
6
+ metadata.gz: ae78f714a1cfc30a3bb06b9d1cad78c2e8ac30a2f7a4a62c5164de0bd8412f8d03c38145dde10703c63fdd92f6b7e912909ad5c2cd56abb8ecaab9ede7019597
7
+ data.tar.gz: f34805456093ee13b4d2bebb8ea503a7f2eb71e8a4cc994a8748683ad94a7da67fc14c16392b01f99bd86ee160d0565f78851407968b9bed1b6974d7f79a2b31
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.4"
11
+ gem "bulma-rails", "~> 0.0.4.1"
12
12
 
13
13
  And then execute:
14
14
 
@@ -6,6 +6,7 @@
6
6
  @import table
7
7
  @import tabs
8
8
  @import media
9
+ @import menu
9
10
 
10
11
  .block:not(:last-child)
11
12
  margin-bottom: 20px
@@ -1,11 +1,12 @@
1
1
  .column
2
+ overflow: hidden
2
3
  +mobile
3
4
  & + .column
4
- margin-top: 20px
5
+ margin-top: $column-gap
5
6
  +tablet
6
7
  flex: 1
7
8
  & + .column
8
- margin-left: 20px
9
+ margin-left: $column-gap
9
10
  &.is-double
10
11
  flex: 2
11
12
  &.is-triple
@@ -28,12 +29,12 @@
28
29
 
29
30
  .columns
30
31
  &:not(:last-child)
31
- margin-bottom: 20px
32
+ margin-bottom: $column-gap
32
33
  +tablet
33
34
  display: flex
34
35
  &.is-gapless
35
36
  & > .column + .column
36
- margin-left: 0
37
+ margin: 0
37
38
  &.is-vcentered
38
39
  align-items: center
39
40
  &.is-grid
@@ -25,13 +25,27 @@
25
25
  +tablet
26
26
  margin-right: 10px
27
27
 
28
+ .media-left
29
+ +mobile
30
+ margin-bottom: 20px
31
+ +tablet
32
+ margin-right: 20px
33
+
34
+ .media-right
35
+ +mobile
36
+ margin-top: 20px
37
+ +tablet
38
+ margin-left: 20px
39
+
28
40
  .media-content
29
41
  flex: 1
42
+ text-align: left
30
43
  .textarea
31
44
  min-height: 60px
32
45
 
33
46
  .media
34
47
  align-items: flex-start
48
+ text-align: left
35
49
  .content:not(:last-child)
36
50
  margin-bottom: 10px
37
51
  .media
@@ -1,9 +1,20 @@
1
- .menu
2
- border: 1px solid $border
1
+ .menu-icon
2
+ +fa(14px, 16px)
3
+ color: $text-light
4
+ float: left
5
+ margin: 0 4px 0 -2px
6
+ .fa
7
+ font-size: inherit
8
+ line-height: inherit
3
9
 
4
10
  .menu-heading
5
- @extend .heading
11
+ background: $background
12
+ border-bottom: 1px solid $border
13
+ border-radius: 4px 4px 0 0
6
14
  color: $text-strong
15
+ font-size: $size-medium
16
+ font-weight: 300
17
+ padding: 10px
7
18
 
8
19
  .menu-list
9
20
  a
@@ -11,7 +22,28 @@
11
22
  &:hover
12
23
  color: $link
13
24
 
25
+ .menu-tabs
26
+ display: flex
27
+ font-size: $size-small
28
+ padding: 5px 10px 0
29
+ justify-content: center
30
+ &:not(:last-child)
31
+ border-bottom: 1px solid $border
32
+ a
33
+ border-bottom: 1px solid $border
34
+ margin-bottom: -1px
35
+ padding: 5px
36
+ &.is-active
37
+ border-bottom-color: $link-active-border
38
+ color: $link-active
39
+
14
40
  .menu-block
41
+ color: $text-strong
42
+ display: block
43
+ line-height: 16px
44
+ padding: 10px
45
+ &:not(:last-child)
46
+ border-bottom: 1px solid $border
15
47
  .checkbox
16
48
  border: 1px solid transparent
17
49
  border-radius: $radius
@@ -23,3 +55,22 @@
23
55
  top: 9px
24
56
  &:hover
25
57
  border-color: $link
58
+
59
+ a.menu-block:hover
60
+ background: $background
61
+
62
+ .menu-checkbox
63
+ @extend .checkbox
64
+ display: block
65
+ padding: 9px 10px 9px 30px
66
+ &:not(:last-child)
67
+ border-bottom: 1px solid $border
68
+ input
69
+ left: 8px
70
+ top: 10px
71
+
72
+ .menu
73
+ border: 1px solid $border
74
+ border-radius: 5px
75
+ &:not(:last-child)
76
+ margin-bottom: 20px
@@ -1,5 +1,8 @@
1
1
  // Colors
2
2
 
3
+ $dark: $grey-darker
4
+ $dark-invert: findColorInvert($dark)
5
+
3
6
  $primary-invert: findColorInvert($primary)
4
7
  $info: $blue
5
8
  $info-invert: findColorInvert($info)
@@ -10,7 +13,7 @@ $warning-invert: findColorInvert($warning)
10
13
  $danger: $red
11
14
  $danger-invert: findColorInvert($danger)
12
15
 
13
- $colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
16
+ $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))
14
17
 
15
18
  $body-background: $grey-lighter
16
19
 
@@ -20,6 +20,7 @@ $primary: $turquoise
20
20
  // Typography
21
21
 
22
22
  $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
23
+ $family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace
23
24
 
24
25
  $size-1: 48px
25
26
  $size-2: 40px
@@ -32,6 +33,8 @@ $size-7: 11px
32
33
 
33
34
  // Dimensions
34
35
 
36
+ $column-gap: 20px
37
+
35
38
  $header-height: 50px
36
39
 
37
40
  // Miscellaneous
@@ -16,6 +16,7 @@
16
16
  .button
17
17
  +control
18
18
  padding: 3px 10px
19
+ text-align: center
19
20
  white-space: nowrap
20
21
  strong
21
22
  color: inherit
@@ -160,6 +160,8 @@
160
160
  padding-right: 36px
161
161
  &:hover
162
162
  border-color: $control-hover-border
163
+ &::ms-expand
164
+ display: none
163
165
  &:after
164
166
  +arrow($link)
165
167
  margin-top: -6px
@@ -6,18 +6,6 @@
6
6
  @import messages
7
7
  @import notifications
8
8
 
9
- .highlight
10
- font-size: 12px
11
- font-weight: normal
12
- max-width: 100%
13
- overflow: hidden
14
- padding: 0
15
- &:not(:last-child)
16
- margin-bottom: 20px
17
- pre
18
- overflow: auto
19
- max-width: 100%
20
-
21
9
  .delete
22
10
  background: rgba(black, 0.2)
23
11
  border-radius: 290486px
@@ -67,40 +55,44 @@
67
55
  .hamburger
68
56
  cursor: pointer
69
57
  display: block
70
- height: $header-height
71
- padding: 19px 17px
58
+ height: 50px
72
59
  position: relative
73
- width: $header-height
60
+ width: 50px
74
61
  span
75
62
  background: $text
76
63
  display: block
77
64
  height: 1px
78
- left: 17px
65
+ left: 50%
66
+ margin-left: -7px
79
67
  position: absolute
68
+ top: 50%
80
69
  transition: none $speed $easing
81
70
  transition-property: background, left, opacity, transform
82
71
  width: 15px
83
72
  &:nth-child(1)
84
- top: 19px
73
+ margin-top: -6px
85
74
  &:nth-child(2)
86
- top: 24px
75
+ margin-top: -1px
87
76
  &:nth-child(3)
88
- bottom: 20px
77
+ margin-top: 4px
89
78
  &:hover
90
79
  background: $background
91
80
  &.is-active
92
81
  span
93
82
  background: $link
94
83
  &:nth-child(1)
95
- left: 20px
84
+ margin-left: -5px
96
85
  transform: rotate(45deg)
97
86
  transform-origin: left top
98
87
  &:nth-child(2)
99
88
  opacity: 0
100
89
  &:nth-child(3)
101
- left: 20px
90
+ margin-left: -5px
102
91
  transform: rotate(-45deg)
103
92
  transform-origin: left bottom
93
+ +tablet
94
+ height: $header-height
95
+ width: $header-height
104
96
 
105
97
  .heading
106
98
  display: block
@@ -109,6 +101,29 @@
109
101
  margin-bottom: 5px
110
102
  text-transform: uppercase
111
103
 
104
+ .highlight
105
+ font-size: 12px
106
+ font-weight: normal
107
+ max-width: 100%
108
+ overflow: hidden
109
+ padding: 0
110
+ &:not(:last-child)
111
+ margin-bottom: 20px
112
+ pre
113
+ overflow: auto
114
+ max-width: 100%
115
+
116
+ .image
117
+ display: block
118
+ position: relative
119
+ vertical-align: top
120
+ img
121
+ +overlay
122
+ display: block
123
+ width: 100%
124
+ &.is-3x2
125
+ padding-top: 66.6666%
126
+
112
127
  .loader
113
128
  animation: spin-around 500ms infinite linear
114
129
  border: 2px solid $border
@@ -3,7 +3,7 @@
3
3
  background: white
4
4
  box-shadow: 0 1px 2px rgba(black, 0.1)
5
5
  display: flex
6
- height: $header-height
6
+ height: 50px
7
7
  line-height: 24px
8
8
  position: relative
9
9
  text-align: center
@@ -13,6 +13,8 @@
13
13
  box-shadow: 0 1px 0 rgba($border, 0.3)
14
14
  display: flex
15
15
  width: 100%
16
+ +tablet
17
+ height: $header-height
16
18
 
17
19
  .header-toggle
18
20
  @extend .hamburger
@@ -109,9 +111,10 @@
109
111
  background: white
110
112
  box-shadow: 0 4px 7px rgba(black, 0.1)
111
113
  display: none
114
+ min-width: 120px
112
115
  position: absolute
113
116
  right: 0
114
- top: $header-height
117
+ top: 50px
115
118
  z-index: 100
116
119
  .header-item
117
120
  border-top: 1px solid rgba($border, 0.5)
@@ -131,8 +131,8 @@
131
131
  align-items: stretch
132
132
  display: flex
133
133
  flex-direction: column
134
- height: 100vh
135
134
  justify-content: space-between
135
+ min-height: 100vh
136
136
  .tabs
137
137
  a
138
138
  padding: 15px 20px
@@ -9,8 +9,8 @@
9
9
  @return $value
10
10
 
11
11
  @function colorLuminance($color)
12
- $colors: ('red': red($color),'green': green($color),'blue': blue($color))
13
- @each $name, $value in $colors
12
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
13
+ @each $name, $value in $color-rgb
14
14
  $adjusted: 0
15
15
  $value: $value / 255
16
16
  @if $value < 0.03928
@@ -18,8 +18,8 @@
18
18
  @else
19
19
  $value: ($value + .055) / 1.055
20
20
  $value: powerNumber($value, 2)
21
- $colors: map-merge($colors, ($name: $value))
22
- @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
21
+ $color-rgb: map-merge($color-rgb, ($name: $value))
22
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
23
23
 
24
24
  @function closestEvenNumber($number)
25
25
  @if ($number % 2 == 0px)
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.0.4.1'
5
+ gem.version = '0.0.8'
6
6
  gem.date = '2016-01-29'
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bulma-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4.1
4
+ version: 0.0.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen