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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 6a1d0b0004e120e5b4c39feb3571730cb29cc6cd
4
- data.tar.gz: 2cd5dcb225b6274e835a6468b3b0d5318c6d9553
3
+ metadata.gz: 065b83cbaea0d7dfa541b299812be5febc63fea9
4
+ data.tar.gz: a008410b0e462536ee9f22ca157f41ebfa8feb89
5
5
  SHA512:
6
- metadata.gz: 61be3ec2c20bde48b7ff956017129ce7c13509608955fb0f042ee3f234dd7f10d5d6734aacff746113c763cd7209992487e112cf37033b31a7251864997113dc
7
- data.tar.gz: 076e55046f88826d418a35dcd5e4680050a940d98a09277921b12a5342378fef8668822ecaca35d86b5fb7c34b67a5a1409e3ac47cdec6cb4886385792419bae
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: 4px, $button-height-ratio: 2.85)
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 > 12px
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 > 28
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 > 28
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 > 28, $font-size/4, $font-size/3)) $button-height/2)
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: 1px solid shade($secondary, 15%)
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 16px, top 50%)
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 1px 1px
106
- +position(absolute, left 14px, top 50%)
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: 12px
10
- margin-left: 6px
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: 3px
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, 1px, 4px)
17
+ +button-size($size, .0625rem, .25rem)
17
18
  +normal-button($color)
18
19
  @else if $style == border
19
- +button-size($size, 1px, 4px)
20
+ +button-size($size, .0625rem, .25rem)
20
21
  +border-button($color)
21
22
  @else if $style == bold-border
22
- +button-size($size, 2px, 8px)
23
+ +button-size($size, .125rem, .5rem)
23
24
  +border-button($color)
24
25
  @else if $style == flat-emboss
25
- +button-size($size, false, 4px)
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, 4px, 6px, 3.4)
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: 12px !default
17
- $sm-button-font-size: 14px !default
18
- $md-button-font-size: 16px !default
19
- $lg-button-font-size: 18px !default
20
- $xl-button-font-size: 20px !default
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oulu",
3
- "version": "0.12.13",
3
+ "version": "0.12.14",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
data/lib/oulu/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Oulu
2
- VERSION = "0.12.13"
2
+ VERSION = "0.12.14"
3
3
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oulu",
3
- "version": "0.12.13",
3
+ "version": "0.12.14",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
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.13
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-25 00:00:00.000000000 Z
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