oulu 0.9.11 → 0.10.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/_oulu-base.sass +9 -10
- data/app/assets/stylesheets/{options → modules}/amazlet/_amazlet.sass +0 -0
- data/app/assets/stylesheets/modules/buttons/_button-base.sass +67 -10
- data/app/assets/stylesheets/modules/buttons/_button-helper.sass +36 -12
- data/app/assets/stylesheets/modules/buttons/_buttons.sass +9 -7
- data/app/assets/stylesheets/modules/buttons/styles/_border.sass +29 -5
- data/app/assets/stylesheets/modules/buttons/styles/_flat-emboss.sass +36 -1
- data/app/assets/stylesheets/modules/buttons/styles/_flat-round.sass +31 -2
- data/app/assets/stylesheets/modules/buttons/styles/_material.sass +12 -6
- data/app/assets/stylesheets/modules/buttons/styles/_normal.sass +39 -7
- data/app/assets/stylesheets/modules/buttons/styles/_super-bold-border.sass +63 -0
- data/app/assets/stylesheets/{options → modules}/glitch/_glitch.sass +2 -2
- data/app/assets/stylesheets/modules/glitch/_glitch.sass~organize-modules +31 -0
- data/app/assets/stylesheets/modules/navs/_tabs-nav.sass +0 -8
- data/app/assets/stylesheets/modules/text-input/_text-inputs.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_cousine.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_droid-sans.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_font-awsome.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_icomoon.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_inconsolata.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_lato.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_merriweather-sans.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_montserrat.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_old-standard.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_open-sans.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_podkova.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_pt-sans.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_raleway.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_roboto-condensed.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_roboto-mono.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_roboto.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_satisfy.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_source-code-pro.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_source-sans-pro.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_special-elite.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_tauri.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_ubuntu-mono.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_ubuntu.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_varela-round.sass +0 -0
- data/app/assets/stylesheets/{options → modules}/web-fonts/_vt323.sass +0 -0
- data/app/assets/stylesheets/settings/functions/_animation.sass +4 -4
- data/app/assets/stylesheets/settings/functions/_background.sass +25 -18
- data/app/assets/stylesheets/settings/functions/_color.sass +12 -1
- data/app/assets/stylesheets/settings/functions/_timing.sass +28 -0
- data/app/assets/stylesheets/settings/initializers/_reboot.sass +8 -0
- data/app/assets/stylesheets/settings/initializers/_sanitize.sass +168 -106
- data/app/assets/stylesheets/settings/mixins/_animation.sass +32 -28
- data/app/assets/stylesheets/settings/mixins/_background.sass +34 -33
- data/app/assets/stylesheets/settings/mixins/_block.sass +17 -21
- data/app/assets/stylesheets/settings/mixins/_line.sass +7 -7
- data/app/assets/stylesheets/settings/mixins/_text.sass +9 -4
- data/app/assets/stylesheets/settings/variables/_default.sass +14 -44
- data/app/assets/stylesheets/settings/variables/_modules.sass +55 -0
- data/bower.json +1 -4
- data/lib/oulu/version.rb +1 -1
- data/oulu.gemspec +0 -2
- data/package.json +2 -5
- metadata +34 -57
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6f8bb84e1c041c792b9e404d28fbd91a9d9cabd0
|
4
|
+
data.tar.gz: caa87c2362a7b24ba9e979f38c74cbe58fa9f7ef
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 43c2a621b4d0b4aee61fca2f43af13188d649f533544d987865ae6726e02c9d758ba8f2d823c9e381f2f17a799e4ba8653edd58087b68680a7c7c9ad05c436c5
|
7
|
+
data.tar.gz: 13e21d28e2b2bf0bc0cc71aa7518bb87860426be47d7c464293d3b3871bdb4a7a27db685c57bf8de8f4b4cef4671004cd1d1492aa263f72b8e4518294c5df769
|
@@ -2,19 +2,11 @@
|
|
2
2
|
//settings
|
3
3
|
//////////////
|
4
4
|
|
5
|
-
// bourbon
|
6
|
-
///////////////////
|
7
|
-
|
8
|
-
@import bourbon
|
9
|
-
|
10
|
-
// variables
|
11
|
-
///////////////////
|
12
|
-
|
13
|
-
@import settings/variables/default
|
14
|
-
|
15
5
|
// functions
|
16
6
|
///////////////////
|
7
|
+
|
17
8
|
@import settings/functions/math
|
9
|
+
@import settings/functions/timing
|
18
10
|
@import settings/functions/list
|
19
11
|
@import settings/functions/number
|
20
12
|
@import settings/functions/string
|
@@ -31,6 +23,13 @@
|
|
31
23
|
@import settings/functions/animation
|
32
24
|
@import settings/functions/display
|
33
25
|
|
26
|
+
// variables
|
27
|
+
///////////////////
|
28
|
+
|
29
|
+
@import settings/variables/default
|
30
|
+
@import settings/variables/modules
|
31
|
+
|
32
|
+
|
34
33
|
// mixins
|
35
34
|
///////////////////
|
36
35
|
|
File without changes
|
@@ -2,12 +2,12 @@
|
|
2
2
|
+inline-block(middle)
|
3
3
|
cursor: pointer
|
4
4
|
text-align: center
|
5
|
-
|
5
|
+
user-select: none
|
6
6
|
touch-action: manipulation
|
7
7
|
text-decoration: none
|
8
8
|
-webkit-tap-highlight-color: transparent
|
9
9
|
|
10
|
-
=button-size($size, $border-width:
|
10
|
+
=button-size($size, $border-width: false, $border-radius: 4px)
|
11
11
|
$font-size: ""
|
12
12
|
@if $size == 'xs'
|
13
13
|
$font-size: $xs-button-font-size
|
@@ -19,14 +19,15 @@
|
|
19
19
|
$font-size: $lg-button-font-size
|
20
20
|
@else if $size == 'xl'
|
21
21
|
$font-size: $xl-button-font-size
|
22
|
-
$height: round($font-size * 2
|
22
|
+
$button-height: round($font-size * 2.5 - if($border-width, $border-width, 0) * 2)
|
23
23
|
@if $border-width
|
24
24
|
+border(all, $border-width)
|
25
25
|
@else
|
26
26
|
$border-width: 0
|
27
|
-
|
28
|
-
|
29
|
-
+
|
27
|
+
$vertical-padding: ($button-height - round($font-size * 1.45) - ($border-width* 2)) / 2
|
28
|
+
+padding(vertical, $vertical-padding)
|
29
|
+
+text-block($font-size 1.45)
|
30
|
+
+padding(horizontal, $button-height/1.6)
|
30
31
|
@if $border-radius
|
31
32
|
+border-radius($border-radius)
|
32
33
|
@if $font-size > 12px
|
@@ -50,11 +51,67 @@
|
|
50
51
|
position: relative
|
51
52
|
i,
|
52
53
|
.is-button-icon
|
53
|
-
+position(absolute, left $height/2, top 0)
|
54
|
-
line-height: $height - ($border-width*2)
|
54
|
+
+position(absolute, left $button-height/2, top 0)
|
55
|
+
line-height: $button-height - ($border-width*2)
|
55
56
|
input
|
56
|
-
+padding(horizontal, ($height + if($font-size > 28, $font-size/4, $font-size/3)) $height/2)
|
57
|
-
height: $height - ($border-width*2)
|
57
|
+
+padding(horizontal, ($button-height + if($font-size > 28, $font-size/4, $font-size/3)) $button-height/2)
|
58
|
+
height: $button-height - ($border-width*2)
|
59
|
+
&.is-dummy-select
|
60
|
+
$icon-width: round($font-size * 2.7)
|
61
|
+
$icon-size: round($font-size * 1.3)
|
62
|
+
$button-height: $button-height
|
63
|
+
padding-left: $icon-width
|
64
|
+
&:before
|
65
|
+
+fa("\f0d7")
|
66
|
+
+position(absolute, left 0, top 0)
|
67
|
+
border-right: 1px solid shade($secondary, 15%)
|
68
|
+
+text-block($icon-size $button-height, center shade($secondary, 55%))
|
69
|
+
+size($icon-width $button-height)
|
70
|
+
&.is-select
|
71
|
+
padding: 0
|
72
|
+
$icon-width: round($font-size * 2.7)
|
73
|
+
$icon-size: round($font-size * 1.3)
|
74
|
+
position: relative
|
75
|
+
&:after
|
76
|
+
+fa("\f0d7")
|
77
|
+
+position(absolute, right 0, top 0 bottom 0, 0)
|
78
|
+
+text-block($icon-size $button-height, center)
|
79
|
+
+size($icon-width null)
|
80
|
+
select
|
81
|
+
padding: 0 (round($font-size * 1.4) + $icon-width) 0 round($font-size * 1.4)
|
82
|
+
font-size: inherit
|
83
|
+
+padding(vertical, $vertical-padding)
|
84
|
+
+position(relative, 1)
|
85
|
+
&.is-radio,
|
86
|
+
&.is-checkbox
|
87
|
+
$icon-space: round($font-size * 2.2)
|
88
|
+
padding-left: $icon-space
|
89
|
+
position: relative
|
90
|
+
&:before
|
91
|
+
content: ""
|
92
|
+
display: block
|
93
|
+
+position(absolute, left 16px, top 50%)
|
94
|
+
$check-base-size: round($font-size * .9)
|
95
|
+
+size($check-base-size)
|
96
|
+
margin-top: round($check-base-size / -2)
|
97
|
+
&:after
|
98
|
+
$check-icon-size: round($font-size * 1.4)
|
99
|
+
+fa("\f00c")
|
100
|
+
opacity: 0
|
101
|
+
+size($check-icon-size)
|
102
|
+
+text-block($check-icon-size 1, $checked-icon)
|
103
|
+
text-shadow: rgba(black, .4) 0 1px 1px
|
104
|
+
+position(absolute, left 14px, top 50%)
|
105
|
+
margin-top: round($check-icon-size / -2 * 1.2)
|
106
|
+
|
107
|
+
// button-grounp
|
108
|
+
.is-button-group >li &
|
109
|
+
border-radius: 0
|
110
|
+
.is-button-group >li:first-child &
|
111
|
+
border-radius: $border-radius 0 0 $border-radius
|
112
|
+
.is-button-group >li:last-child &
|
113
|
+
border-radius: 0 $border-radius $border-radius 0
|
114
|
+
|
58
115
|
|
59
116
|
=button-group
|
60
117
|
.is-button-group
|
@@ -1,33 +1,57 @@
|
|
1
1
|
// button option
|
2
2
|
[class^="is-button"]
|
3
|
-
&.is-block
|
4
|
-
display: block
|
5
|
-
width: 100%
|
6
3
|
&.has-image
|
7
4
|
height: auto
|
8
5
|
.is-button-note
|
9
6
|
+inline-block
|
10
7
|
font-size: 12px
|
11
8
|
margin-left: 6px
|
9
|
+
&.is-block
|
10
|
+
display: block
|
11
|
+
width: 100%
|
12
|
+
select
|
13
|
+
display: block
|
14
|
+
width: 100%
|
15
|
+
&.is-radio,
|
16
|
+
&.is-checkbox
|
17
|
+
display: block
|
18
|
+
input
|
19
|
+
opacity: 0
|
20
|
+
+position(absolute)
|
21
|
+
&.is-checked
|
22
|
+
&:after
|
23
|
+
opacity: 1
|
24
|
+
&.is-radio
|
25
|
+
&:before
|
26
|
+
border-radius: 50%
|
27
|
+
&.is-checkbox
|
28
|
+
&:before
|
29
|
+
border-radius: 3px
|
30
|
+
&.is-no-move
|
31
|
+
&:active,
|
32
|
+
&.is-checked
|
33
|
+
top: 0
|
12
34
|
&.is-disabled,
|
13
35
|
&:disabled
|
14
36
|
pointer-events: none
|
15
37
|
cursor: default
|
16
38
|
select
|
17
39
|
cursor: default
|
40
|
+
&.is-select
|
41
|
+
select
|
42
|
+
vertical-align: middle
|
43
|
+
font-size: inherit
|
44
|
+
color: inherit
|
45
|
+
cursor: pointer
|
18
46
|
|
19
47
|
// button-group
|
20
48
|
.is-button-group
|
21
49
|
font-size: 0
|
22
50
|
>li
|
23
|
-
display: inline
|
51
|
+
display: inline-block
|
24
52
|
letter-spacing: normal
|
25
53
|
font-size: 0
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
+border-radius(left, 4px)
|
31
|
-
&:last-child
|
32
|
-
[class^="is-button"]
|
33
|
-
+border-radius(right, 4px)
|
54
|
+
@for $i from 1 through 12
|
55
|
+
&.is-#{$i}-items
|
56
|
+
>li
|
57
|
+
width: 100% / $i
|
@@ -1,7 +1,3 @@
|
|
1
|
-
$button-sizes: xs, sm, md, lg, xl !default
|
2
|
-
$button-color-names: default, primary, success, warning, danger !default
|
3
|
-
$button-styles: normal, border, bold-border, flat-emboss, material, flat-round !default
|
4
|
-
|
5
1
|
@import button-base
|
6
2
|
|
7
3
|
// button styles
|
@@ -10,6 +6,7 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
|
|
10
6
|
@import styles/flat-emboss
|
11
7
|
@import styles/material
|
12
8
|
@import styles/flat-round
|
9
|
+
@import styles/super-bold-border
|
13
10
|
|
14
11
|
@import button-helper
|
15
12
|
|
@@ -31,8 +28,11 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
|
|
31
28
|
+button-size($size, false, false)
|
32
29
|
+material-button($color)
|
33
30
|
@else if $style == flat-round
|
34
|
-
+button-size($size, false,
|
31
|
+
+button-size($size, false, 1000px)
|
35
32
|
+flat-round-button($color)
|
33
|
+
@else if $style == super-bold-border
|
34
|
+
+button-size($size, false, 3px)
|
35
|
+
+super-bold-border-button($color, $size)
|
36
36
|
@each $option in $options
|
37
37
|
@if $option == 'left'
|
38
38
|
text-align: left
|
@@ -46,8 +46,8 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
|
|
46
46
|
@each $button-color-name in $button-color-names
|
47
47
|
@each $button-style in $button-styles
|
48
48
|
.is-button-#{$button-style}-#{$button-size}-#{$button-color-name}
|
49
|
-
@if $button-color-name ==
|
50
|
-
$button-color: $
|
49
|
+
@if $button-color-name == secondary
|
50
|
+
$button-color: $secondary
|
51
51
|
@else if $button-color-name == primary
|
52
52
|
$button-color: $primary
|
53
53
|
@else if $button-color-name == success
|
@@ -56,4 +56,6 @@ $button-styles: normal, border, bold-border, flat-emboss, material, flat-round !
|
|
56
56
|
$button-color: $warning
|
57
57
|
@else if $button-color-name == danger
|
58
58
|
$button-color: $danger
|
59
|
+
@else if $button-color-name == info
|
60
|
+
$button-color: $info
|
59
61
|
+button($button-style, $button-size, $button-color)
|
@@ -1,6 +1,6 @@
|
|
1
1
|
=border-button($color)
|
2
2
|
+border(all, solid)
|
3
|
-
@if $color == $
|
3
|
+
@if $color == $secondary
|
4
4
|
$color: $root-color
|
5
5
|
@else
|
6
6
|
color: $color
|
@@ -13,12 +13,36 @@
|
|
13
13
|
&.hover,
|
14
14
|
&.is-hover
|
15
15
|
color: $color
|
16
|
-
background-color: rgba($color, .
|
16
|
+
background-color: rgba($color, .2)
|
17
17
|
&:active,
|
18
18
|
&.active,
|
19
19
|
&.is-active
|
20
|
-
color: $color
|
21
|
-
background-color: rgba($color, .3)
|
22
|
-
&.is-checked
|
23
20
|
color: luma_contrast_color($color)
|
24
21
|
background-color: $color
|
22
|
+
|
23
|
+
// radio & checkbos
|
24
|
+
&.is-radio,
|
25
|
+
&.is-checkbox
|
26
|
+
&:before
|
27
|
+
box-shadow: $color 0 0 0 1px
|
28
|
+
|
29
|
+
// checked
|
30
|
+
&.is-checked
|
31
|
+
color: luma_contrast_color($checked)
|
32
|
+
background-color: $checked
|
33
|
+
border-color: shade($checked, 20%)
|
34
|
+
&:before
|
35
|
+
box-shadow: luma_contrast_color($checked) 0 0 0 1px
|
36
|
+
|
37
|
+
// select
|
38
|
+
&.is-select
|
39
|
+
&:after
|
40
|
+
color: $color
|
41
|
+
border-left: 1px solid $color
|
42
|
+
|
43
|
+
// disabled
|
44
|
+
&.is-disabled,
|
45
|
+
&:disabled
|
46
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
47
|
+
color: rgba($color, .7)
|
48
|
+
border-color: $color
|
@@ -1,5 +1,5 @@
|
|
1
1
|
=flat-emboss-button($color: blue)
|
2
|
-
|
2
|
+
transition: .5s background-image
|
3
3
|
background-color: $color
|
4
4
|
color: luma_contrast_color($color)
|
5
5
|
box-shadow: shade($color, 18%) 0 3px 0
|
@@ -22,3 +22,38 @@
|
|
22
22
|
background-color: $color
|
23
23
|
box-shadow: shade($color, 18%) 0 2px 0
|
24
24
|
+top(1px)
|
25
|
+
|
26
|
+
// radio & checkbos
|
27
|
+
&.is-radio,
|
28
|
+
&.is-checkbox
|
29
|
+
&:before
|
30
|
+
box-shadow: rgba(black, 0.3) 0 1px 1px inset, #{if(luma_bright($color), shade($color, 40%), tint($color, 20%))} 0 0 0 1px
|
31
|
+
background-color: #{if(luma_bright($color), shade($color, 30%), tint($color, 30%))}
|
32
|
+
|
33
|
+
// checked
|
34
|
+
&.is-checked
|
35
|
+
color: luma_contrast_color($checked)
|
36
|
+
background-color: $checked
|
37
|
+
text-shadow: if(luma_bright($checked), lighten($checked, 8%) 0 1px 0, darken($checked, 8%) 0 -1px 0)
|
38
|
+
box-shadow: shade($checked, 18%) 0 2px 0
|
39
|
+
+top(1px)
|
40
|
+
&:before
|
41
|
+
box-shadow: rgba(black, 0.3) 0 1px 1px inset, #{if(luma_bright($checked), shade($checked, 40%), tint($checked, 40%))} 0 0 0 1px
|
42
|
+
background-color: #{if(luma_bright($checked), shade($checked, 30%), tint($checked, 30%))}
|
43
|
+
|
44
|
+
// select
|
45
|
+
&.is-select
|
46
|
+
&:after
|
47
|
+
color: rgba(luma_contrast_color($color), .7)
|
48
|
+
border-left: 1px solid
|
49
|
+
border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
50
|
+
|
51
|
+
// disabled
|
52
|
+
&.is-disabled,
|
53
|
+
&:disabled
|
54
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
55
|
+
background-color: rgba($color, 7)
|
56
|
+
color: rgba(luma_contrast_color($color), .7)
|
57
|
+
border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
|
58
|
+
text-shadow: none
|
59
|
+
box-shadow: none
|
@@ -1,9 +1,8 @@
|
|
1
1
|
=flat-round-button($color: blue)
|
2
|
-
|
2
|
+
transition: .5s (background-image)
|
3
3
|
background-color: $color
|
4
4
|
color: luma_contrast_color($color)
|
5
5
|
font-weight: bold
|
6
|
-
border-radius: 1000px
|
7
6
|
&:hover,
|
8
7
|
&.hover,
|
9
8
|
&.is-hover
|
@@ -21,3 +20,33 @@
|
|
21
20
|
@else
|
22
21
|
background-color: $color
|
23
22
|
+top(1px)
|
23
|
+
|
24
|
+
// radio & checkbos
|
25
|
+
&.is-radio,
|
26
|
+
&.is-checkbox
|
27
|
+
&:before
|
28
|
+
box-shadow: rgba(black, 0.2) 0 1px 1px inset
|
29
|
+
background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
30
|
+
|
31
|
+
// checked
|
32
|
+
&.is-checked
|
33
|
+
color: luma_contrast_color($checked)
|
34
|
+
background-color: $checked
|
35
|
+
+top(1px)
|
36
|
+
&:before
|
37
|
+
box-shadow: rgba(black, 0.3) 0 1px 1px inset
|
38
|
+
background-color: #{if(luma_bright($checked), shade($checked, 40%), tint($checked, 40%))}
|
39
|
+
|
40
|
+
// select
|
41
|
+
&.is-select
|
42
|
+
&:after
|
43
|
+
color: rgba(luma_contrast_color($color), .7)
|
44
|
+
border-left: 1px solid
|
45
|
+
border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
46
|
+
|
47
|
+
// disabled
|
48
|
+
&.is-disabled,
|
49
|
+
&:disabled
|
50
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
51
|
+
background-color: rgba($color, 7)
|
52
|
+
color: rgba(luma_contrast_color($color), .7)
|
@@ -2,7 +2,7 @@
|
|
2
2
|
+position(relative, 1)
|
3
3
|
overflow: hidden
|
4
4
|
will-change: opacity, transform
|
5
|
-
|
5
|
+
transition: all .3s ease-out
|
6
6
|
.waves-ripple
|
7
7
|
position: absolute
|
8
8
|
border-radius: 50%
|
@@ -28,13 +28,13 @@
|
|
28
28
|
background-color: lighten($color, 45%)
|
29
29
|
@else
|
30
30
|
background-color: darken($color, 20%)
|
31
|
-
|
31
|
+
transition: all 0.7s ease-out
|
32
32
|
transition-property: transform, opacity
|
33
|
-
|
33
|
+
transform: scale(0)
|
34
34
|
pointer-events: none
|
35
35
|
|
36
36
|
=material-button($color: blue)
|
37
|
-
|
37
|
+
transition: .2s ease-out
|
38
38
|
+border-radius(2px)
|
39
39
|
background-color: $color
|
40
40
|
color: luma_contrast_color($color)
|
@@ -60,13 +60,19 @@
|
|
60
60
|
background-color: $color
|
61
61
|
box-shadow: shade($color, 18%) 0 2px 0
|
62
62
|
+top(1px)
|
63
|
+
// disabled
|
64
|
+
&.is-disabled,
|
65
|
+
&:disabled
|
66
|
+
color: #9F9F9F
|
67
|
+
background-color: #DFDFDF
|
68
|
+
box-shadow: none
|
63
69
|
|
64
70
|
.waves-effect
|
65
71
|
+waves-effect($color: white)
|
66
72
|
.waves-notransition
|
67
|
-
|
73
|
+
transition: none !important
|
68
74
|
.waves-circle
|
69
|
-
|
75
|
+
transform: translateZ(0)
|
70
76
|
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
|
71
77
|
.waves-input-wrapper
|
72
78
|
border-radius: .2em
|
@@ -1,7 +1,7 @@
|
|
1
1
|
=normal-button-color($color, $root-color: true)
|
2
2
|
background-color: $color
|
3
|
-
|
4
|
-
|
3
|
+
background-image: linear-gradient(top, tint($color, 6%) 0%, shade($color, 6%) 100%)
|
4
|
+
border-style: solid
|
5
5
|
border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
|
6
6
|
@if $root-color
|
7
7
|
color: luma_contrast_color($color)
|
@@ -15,11 +15,8 @@
|
|
15
15
|
color: luma_contrast_color($color)
|
16
16
|
|
17
17
|
=normal-button($color: blue)
|
18
|
-
|
19
|
-
|
20
|
-
+normal-button-color(#f2f2f2)
|
21
|
-
@else
|
22
|
-
+normal-button-color($color)
|
18
|
+
transition: .5s (background-image)
|
19
|
+
+normal-button-color($color)
|
23
20
|
box-shadow: tint($color, 32%) 0 1px 0 inset, shade($color, 26%) 0 1px 0, rgba(black, .15) 0 2px 1px
|
24
21
|
&:hover,
|
25
22
|
&.hover,
|
@@ -40,3 +37,38 @@
|
|
40
37
|
$color: lighten($color, 7%)
|
41
38
|
+normal-button-color($color, false)
|
42
39
|
box-shadow: darken($color, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
|
40
|
+
|
41
|
+
// radio & checkbos
|
42
|
+
&.is-radio,
|
43
|
+
&.is-checkbox
|
44
|
+
&:before
|
45
|
+
box-shadow: rgba(black, 0.2) 0 1px 1px inset
|
46
|
+
background-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
47
|
+
|
48
|
+
// checked
|
49
|
+
&.is-checked
|
50
|
+
color: luma_contrast_color($checked)
|
51
|
+
+normal-button-color($checked, true)
|
52
|
+
border-color: shade($checked, 10%) shade($checked, 16%) shade($checked, 26%)
|
53
|
+
box-shadow: darken($checked, 12%) 0 1px 0 inset, rgba(white, .3) 0 1px 1px
|
54
|
+
+top(1px)
|
55
|
+
&:before
|
56
|
+
box-shadow: rgba(black, 0.2) 0 1px 1px inset
|
57
|
+
background-color: #{if(luma_bright($checked), tint($checked, 20%), shade($checked, 20%))}
|
58
|
+
|
59
|
+
// select
|
60
|
+
&.is-select
|
61
|
+
&:after
|
62
|
+
color: rgba(luma_contrast_color($color), .7)
|
63
|
+
border-left: 1px solid
|
64
|
+
border-left-color: #{if(luma_bright($color), shade($color, 20%), tint($color, 20%))}
|
65
|
+
|
66
|
+
// disabled
|
67
|
+
&.is-disabled,
|
68
|
+
&:disabled
|
69
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
70
|
+
background-color: rgba($color, 7)
|
71
|
+
color: rgba(luma_contrast_color($color), .7)
|
72
|
+
border-color: shade($color, 10%) shade($color, 16%) shade($color, 26%)
|
73
|
+
text-shadow: none
|
74
|
+
box-shadow: none
|
@@ -0,0 +1,63 @@
|
|
1
|
+
=super-bold-border-button($color, $size)
|
2
|
+
$border-width: ""
|
3
|
+
@if $size == 'xs'
|
4
|
+
$border-width: $xs-button-font-size/3
|
5
|
+
@else if $size == 'sm'
|
6
|
+
$border-width: $sm-button-font-size/3
|
7
|
+
@else if $size == 'md'
|
8
|
+
$border-width: $md-button-font-size/3
|
9
|
+
@else if $size == 'lg'
|
10
|
+
$border-width: $lg-button-font-size/3
|
11
|
+
@else if $size == 'xl'
|
12
|
+
$border-width: $xl-button-font-size/3
|
13
|
+
border: solid $default-text $border-width
|
14
|
+
background-color: $color
|
15
|
+
color: luma_contrast_color($color)
|
16
|
+
box-shadow: rgba(black, 0.6) 0 1px 0 1px
|
17
|
+
&:link,
|
18
|
+
&:visited
|
19
|
+
color: luma_contrast_color($color)
|
20
|
+
&:hover,
|
21
|
+
&.hover,
|
22
|
+
&.is-hover
|
23
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
24
|
+
color: luma_contrast_color($color)
|
25
|
+
background-color: $color
|
26
|
+
&:active,
|
27
|
+
&.active,
|
28
|
+
&.is-active
|
29
|
+
color: luma_contrast_color($color)
|
30
|
+
background-color: $color
|
31
|
+
+top(1px)
|
32
|
+
box-shadow: none
|
33
|
+
|
34
|
+
// radio & checkbos
|
35
|
+
&.is-radio,
|
36
|
+
&.is-checkbox
|
37
|
+
&:before
|
38
|
+
box-shadow: $default-text 0 0 0 2px
|
39
|
+
|
40
|
+
// checked
|
41
|
+
&.is-checked
|
42
|
+
color: luma_contrast_color($checked)
|
43
|
+
background-color: $checked
|
44
|
+
+top(1px)
|
45
|
+
box-shadow: none
|
46
|
+
&:before
|
47
|
+
box-shadow: luma_contrast_color($checked) 0 0 0 2px
|
48
|
+
|
49
|
+
// select
|
50
|
+
&.is-select
|
51
|
+
&:after
|
52
|
+
color: rgba(luma_contrast_color($color), .7)
|
53
|
+
border-left: 2px solid
|
54
|
+
border-left-color: rgba($default-text, .7)
|
55
|
+
|
56
|
+
// disabled
|
57
|
+
&.is-disabled,
|
58
|
+
&:disabled
|
59
|
+
$color: if(luma_bright($color), shade($color, 20%), tint($color, 20%))
|
60
|
+
color: rgba(luma_contrast_color($color), .7)
|
61
|
+
background-color: rgba($color, .7)
|
62
|
+
border-color: rgba($default-text, .7)
|
63
|
+
box-shadow: none
|
@@ -1,9 +1,9 @@
|
|
1
|
-
|
1
|
+
keyframes noise-anim
|
2
2
|
$steps: 20
|
3
3
|
@for $i from 0 through $steps
|
4
4
|
#{percentage($i * 1 / $steps)}
|
5
5
|
clip: rect(random(100) + px, 9999px, random(100) + px, 0)
|
6
|
-
|
6
|
+
keyframes noise-anim-2
|
7
7
|
$steps: 20
|
8
8
|
@for $i from 0 through $steps
|
9
9
|
#{percentage($i * 1 / $steps)}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
keyframes noise-anim
|
2
|
+
$steps: 20
|
3
|
+
@for $i from 0 through $steps
|
4
|
+
#{percentage($i * 1 / $steps)}
|
5
|
+
clip: rect(random(100) + px, 9999px, random(100) + px, 0)
|
6
|
+
keyframes noise-anim-2
|
7
|
+
$steps: 20
|
8
|
+
@for $i from 0 through $steps
|
9
|
+
#{percentage($i * 1 / $steps)}
|
10
|
+
clip: rect(random(100) + px, 9999px, random(100) + px, 0)
|
11
|
+
|
12
|
+
=glitch($cl: white, $bg-col: black)
|
13
|
+
position: relative
|
14
|
+
overflow: hidden
|
15
|
+
display: inline-block
|
16
|
+
color: $cl
|
17
|
+
&:after,
|
18
|
+
&:before
|
19
|
+
content: attr(data-text)
|
20
|
+
color: $cl
|
21
|
+
background-color: $bg-col
|
22
|
+
overflow: hidden
|
23
|
+
clip: rect(0, 900px, 0, 0)
|
24
|
+
&:after
|
25
|
+
+position(absolute, left 1px, top 0)
|
26
|
+
text-shadow: -1px 0 0 rgba(red, 0.4)
|
27
|
+
+animation(noise-anim 2s infinite linear alternate-reverse)
|
28
|
+
&:before
|
29
|
+
+position(absolute, left -1px, top 0)
|
30
|
+
text-shadow: 1px 0 0 rgba(blue, 0.4)
|
31
|
+
+animation(noise-anim-2 3s infinite linear alternate-reverse)
|
@@ -1,11 +1,3 @@
|
|
1
|
-
$tabs-nav-border-color: black !default
|
2
|
-
$tabs-nav-background-color: white !default
|
3
|
-
$tabs-nav-border-width: 2px !default
|
4
|
-
$tabs-nav-font-size: 16px !default
|
5
|
-
$tabs-nav-item-gutter: 8px !default
|
6
|
-
$tabs-nav-font-color: black !default
|
7
|
-
$tabs-nav-current-font-color: red !default
|
8
|
-
|
9
1
|
.tabs-nav__items
|
10
2
|
font-size: 0
|
11
3
|
position: relative
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|