oulu 0.12.13 → 0.12.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 +4 -4
- data/app/assets/stylesheets/modules/buttons/_button-base.sass +17 -9
- data/app/assets/stylesheets/modules/buttons/_button-helper.sass +3 -3
- data/app/assets/stylesheets/modules/buttons/_buttons.sass +9 -5
- data/app/assets/stylesheets/modules/buttons/styles/_standard.sass +68 -0
- data/app/assets/stylesheets/settings/variables/_modules.sass +6 -6
- data/bower.json +1 -1
- data/lib/oulu/version.rb +1 -1
- data/package.json +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 065b83cbaea0d7dfa541b299812be5febc63fea9
|
|
4
|
+
data.tar.gz: a008410b0e462536ee9f22ca157f41ebfa8feb89
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ee001854fb602045d3e2df75a0bb134251ce39cedbb7663cba8ad21a03eeed97cc64e7d634a01da7b47ddbe442b642e6cb771e7b9d50be1c4c965f27ef371eac
|
|
7
|
+
data.tar.gz: 50131a6a5d635cf844af4b2ed0dad1d4697d2b6b9ba7959375fd52b6392c4c9c6430992251707bd86b42d6f42346f50a1115b9e12f2363fe9816db27fa11ec9e
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
text-decoration: none
|
|
10
10
|
-webkit-tap-highlight-color: transparent
|
|
11
11
|
|
|
12
|
-
=button-size($size, $border-width: false, $border-radius:
|
|
12
|
+
=button-size($size, $border-width: false, $border-radius: .25rem, $button-height-ratio: 2.85)
|
|
13
13
|
$font-size: ""
|
|
14
14
|
@if $size == 'xs'
|
|
15
15
|
$font-size: $xs-button-font-size
|
|
@@ -32,11 +32,13 @@
|
|
|
32
32
|
+padding(horizontal, $button-height/1.6)
|
|
33
33
|
@if $border-radius
|
|
34
34
|
+border-radius($border-radius)
|
|
35
|
-
@if $font-size >
|
|
35
|
+
@if $font-size > .6875rem and 1rem > $font-size
|
|
36
|
+
font-weight: 600
|
|
37
|
+
@else if 1rem < $font-size
|
|
36
38
|
font-weight: bold
|
|
37
39
|
i,
|
|
38
40
|
.is-button-icon
|
|
39
|
-
@if $font-size >
|
|
41
|
+
@if $font-size > 1.75rem
|
|
40
42
|
margin-right: $font-size/4
|
|
41
43
|
@else
|
|
42
44
|
margin-right: $font-size/3
|
|
@@ -44,7 +46,7 @@
|
|
|
44
46
|
i,
|
|
45
47
|
.is-button-icon
|
|
46
48
|
margin-right: 0
|
|
47
|
-
@if $font-size >
|
|
49
|
+
@if $font-size > 1.75rem
|
|
48
50
|
margin-left: $font-size/4
|
|
49
51
|
@else
|
|
50
52
|
margin-left: $font-size/3
|
|
@@ -56,7 +58,7 @@
|
|
|
56
58
|
+position(absolute, left $button-height/2, top 0)
|
|
57
59
|
line-height: $button-height - ($border-width*2)
|
|
58
60
|
input
|
|
59
|
-
+padding(horizontal, ($button-height + if($font-size >
|
|
61
|
+
+padding(horizontal, ($button-height + if($font-size > 1.75rem, $font-size/4, $font-size/3)) $button-height/2)
|
|
60
62
|
height: $button-height - ($border-width*2)
|
|
61
63
|
&.is-dummy-select
|
|
62
64
|
$icon-width: round($font-size * 2.7)
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
&:before
|
|
67
69
|
+fa("\f0d7")
|
|
68
70
|
+position(absolute, left 0, top 0)
|
|
69
|
-
border-right:
|
|
71
|
+
border-right: .0625rem solid shade($secondary, 15%)
|
|
70
72
|
+text-block($icon-size $button-height, center shade($secondary, 55%))
|
|
71
73
|
+size($icon-width $button-height)
|
|
72
74
|
&.is-select
|
|
@@ -92,7 +94,7 @@
|
|
|
92
94
|
&:before
|
|
93
95
|
content: ""
|
|
94
96
|
display: block
|
|
95
|
-
+position(absolute, left
|
|
97
|
+
+position(absolute, left 1rem, top 50%)
|
|
96
98
|
$check-base-size: round($font-size * .9)
|
|
97
99
|
+size($check-base-size)
|
|
98
100
|
margin-top: round($check-base-size / -2)
|
|
@@ -102,9 +104,15 @@
|
|
|
102
104
|
opacity: 0
|
|
103
105
|
+size($check-icon-size)
|
|
104
106
|
+text-block($check-icon-size 1, $button-checked-icon-color)
|
|
105
|
-
text-shadow: rgba(black, .4) 0
|
|
106
|
-
+position(absolute, left
|
|
107
|
+
text-shadow: rgba(black, .4) 0 .0625rem .0625rem
|
|
108
|
+
+position(absolute, left .875rem, top 50%)
|
|
107
109
|
margin-top: round($check-icon-size / -2 * 1.2)
|
|
110
|
+
&.is-icon
|
|
111
|
+
+padding(horizontal, $button-height/3.5)
|
|
112
|
+
i,
|
|
113
|
+
.is-button-icon
|
|
114
|
+
margin-right: 0
|
|
115
|
+
|
|
108
116
|
|
|
109
117
|
// button-grounp
|
|
110
118
|
.is-button-group >li &
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
height: auto
|
|
7
7
|
.is-button-note
|
|
8
8
|
+inline-block
|
|
9
|
-
font-size:
|
|
10
|
-
margin-left:
|
|
9
|
+
font-size: .75rem
|
|
10
|
+
margin-left: .375rem
|
|
11
11
|
&.is-block
|
|
12
12
|
display: flex
|
|
13
13
|
width: 100%
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
border-radius: 50%
|
|
29
29
|
&.is-checkbox
|
|
30
30
|
&:before
|
|
31
|
-
border-radius:
|
|
31
|
+
border-radius: .1875rem
|
|
32
32
|
&.is-no-move
|
|
33
33
|
&:active,
|
|
34
34
|
&.is-checked
|
|
@@ -7,22 +7,23 @@
|
|
|
7
7
|
@import styles/material
|
|
8
8
|
@import styles/flat-round
|
|
9
9
|
@import styles/super-bold-border
|
|
10
|
+
@import styles/standard
|
|
10
11
|
|
|
11
12
|
@import button-helper
|
|
12
13
|
|
|
13
14
|
=button($style, $size, $color, $options: false)
|
|
14
15
|
+button-base
|
|
15
16
|
@if $style == normal
|
|
16
|
-
+button-size($size,
|
|
17
|
+
+button-size($size, .0625rem, .25rem)
|
|
17
18
|
+normal-button($color)
|
|
18
19
|
@else if $style == border
|
|
19
|
-
+button-size($size,
|
|
20
|
+
+button-size($size, .0625rem, .25rem)
|
|
20
21
|
+border-button($color)
|
|
21
22
|
@else if $style == bold-border
|
|
22
|
-
+button-size($size,
|
|
23
|
+
+button-size($size, .125rem, .5rem)
|
|
23
24
|
+border-button($color)
|
|
24
25
|
@else if $style == flat-emboss
|
|
25
|
-
+button-size($size, false,
|
|
26
|
+
+button-size($size, false, .25rem)
|
|
26
27
|
+flat-emboss-button($color)
|
|
27
28
|
@else if $style == material
|
|
28
29
|
+button-size($size, false, false)
|
|
@@ -31,8 +32,11 @@
|
|
|
31
32
|
+button-size($size, false, 1000px)
|
|
32
33
|
+flat-round-button($color)
|
|
33
34
|
@else if $style == super-bold-border
|
|
34
|
-
+button-size($size,
|
|
35
|
+
+button-size($size, .25rem, .375rem, 3.4)
|
|
35
36
|
+super-bold-border-button($color, $size)
|
|
37
|
+
@else if $style == standard
|
|
38
|
+
+button-size($size, .0625rem, .25rem)
|
|
39
|
+
+standard-button($color)
|
|
36
40
|
@each $option in $options
|
|
37
41
|
@if $option == 'left'
|
|
38
42
|
text-align: left
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
=standard-button-color($color, $root-color: true)
|
|
2
|
+
@if luma($color) > 90
|
|
3
|
+
$color: shade($color, .5%)
|
|
4
|
+
background-color: $color
|
|
5
|
+
background-image: linear-gradient(to bottom, tint($color, 14%) 0%, shade($color, 14%) 100%)
|
|
6
|
+
border-style: solid
|
|
7
|
+
border-color: shade($color, 14%) shade($color, 22%) shade($color, 30%)
|
|
8
|
+
@if $root-color
|
|
9
|
+
color: luma_contrast_color($color)
|
|
10
|
+
&:hover,
|
|
11
|
+
&.hover,
|
|
12
|
+
&.is-hover,
|
|
13
|
+
&:active,
|
|
14
|
+
&.active,
|
|
15
|
+
&.is-active
|
|
16
|
+
color: luma_contrast_color($color)
|
|
17
|
+
|
|
18
|
+
=standard-button($color: blue)
|
|
19
|
+
transition: .5s (background-image)
|
|
20
|
+
+standard-button-color($color)
|
|
21
|
+
&:hover,
|
|
22
|
+
&.hover,
|
|
23
|
+
&.is-hover
|
|
24
|
+
+standard-button-color(darken($color, 10%), false)
|
|
25
|
+
&:active,
|
|
26
|
+
&.active,
|
|
27
|
+
&.is-active
|
|
28
|
+
$color: darken($color, 12%)
|
|
29
|
+
box-shadow: darken($color, 16%) 0 1px 1px inset
|
|
30
|
+
+standard-button-color($color, false)
|
|
31
|
+
background-image: linear-gradient(to bottom, shade($color, 14%) 0%, tint($color, 14%) 100%)
|
|
32
|
+
border-color: shade($color, 30%) shade($color, 22%) shade($color, 14%)
|
|
33
|
+
|
|
34
|
+
// radio & checkbos
|
|
35
|
+
&.is-radio,
|
|
36
|
+
&.is-checkbox
|
|
37
|
+
&:before
|
|
38
|
+
box-shadow: rgba(black, 0.2) 0 1px 1px inset
|
|
39
|
+
background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
|
40
|
+
|
|
41
|
+
// checked
|
|
42
|
+
&.is-checked
|
|
43
|
+
color: luma_contrast_color($button-checked-color)
|
|
44
|
+
+standard-button-color($button-checked-color, true)
|
|
45
|
+
border-color: shade($button-checked-color, 10%) shade($button-checked-color, 16%) shade($button-checked-color, 26%)
|
|
46
|
+
box-shadow: darken($button-checked-color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
|
|
47
|
+
+top(1px)
|
|
48
|
+
&:before
|
|
49
|
+
box-shadow: rgba(black, 0.2) 0 1px 1px inset
|
|
50
|
+
background-color: #{if(luma_bright($button-checked-color), tint($button-checked-color, 20%), shade($button-checked-color, 20%))}
|
|
51
|
+
|
|
52
|
+
// select
|
|
53
|
+
&.is-select
|
|
54
|
+
&:after
|
|
55
|
+
color: rgba(luma_contrast_color($color), .7)
|
|
56
|
+
border-left: 1px solid
|
|
57
|
+
border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
|
58
|
+
|
|
59
|
+
// disabled
|
|
60
|
+
&.is-disabled,
|
|
61
|
+
&:disabled
|
|
62
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
|
63
|
+
background-color: rgba($color, 7)
|
|
64
|
+
background-image: none
|
|
65
|
+
color: rgba(luma_contrast_color($color), .7)
|
|
66
|
+
border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
|
|
67
|
+
text-shadow: none
|
|
68
|
+
box-shadow: none
|
|
@@ -13,15 +13,15 @@ $danger: #da4453 !default
|
|
|
13
13
|
// buttons
|
|
14
14
|
////////////////
|
|
15
15
|
|
|
16
|
-
$xs-button-font-size:
|
|
17
|
-
$sm-button-font-size:
|
|
18
|
-
$md-button-font-size:
|
|
19
|
-
$lg-button-font-size:
|
|
20
|
-
$xl-button-font-size:
|
|
16
|
+
$xs-button-font-size: .75rem !default
|
|
17
|
+
$sm-button-font-size: .875rem !default
|
|
18
|
+
$md-button-font-size: 1rem !default
|
|
19
|
+
$lg-button-font-size: 1.125rem !default
|
|
20
|
+
$xl-button-font-size: 1.25rem !default
|
|
21
21
|
|
|
22
22
|
$button-sizes: xs, sm, md, lg, xl !default
|
|
23
23
|
$button-color-names: secondary, primary, success, info, warning, danger !default
|
|
24
|
-
$button-styles: normal, border, bold-border, flat-emboss, material, flat-round, super-bold-border !default
|
|
24
|
+
$button-styles: normal, border, bold-border, flat-emboss, material, flat-round, super-bold-border, standard !default
|
|
25
25
|
|
|
26
26
|
$button-checked-color: #4FC1E9 !default
|
|
27
27
|
$button-checked-icon-color: #FC6E51 !default
|
data/bower.json
CHANGED
data/lib/oulu/version.rb
CHANGED
data/package.json
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: oulu
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.12.
|
|
4
|
+
version: 0.12.14
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- machida
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-08-
|
|
11
|
+
date: 2016-08-30 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: thor
|
|
@@ -76,6 +76,7 @@ files:
|
|
|
76
76
|
- app/assets/stylesheets/modules/buttons/styles/_flat-round.sass
|
|
77
77
|
- app/assets/stylesheets/modules/buttons/styles/_material.sass
|
|
78
78
|
- app/assets/stylesheets/modules/buttons/styles/_normal.sass
|
|
79
|
+
- app/assets/stylesheets/modules/buttons/styles/_standard.sass
|
|
79
80
|
- app/assets/stylesheets/modules/buttons/styles/_super-bold-border.sass
|
|
80
81
|
- app/assets/stylesheets/modules/glitch/_glitch.sass
|
|
81
82
|
- app/assets/stylesheets/modules/navs/_tabs-nav.sass
|