bourbon 3.2.0.beta.2 → 3.2.0
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/.npmignore +9 -0
- data/Gemfile.lock +3 -3
- data/app/assets/stylesheets/_bourbon.scss +5 -3
- data/app/assets/stylesheets/addons/_button.scss +142 -41
- data/app/assets/stylesheets/addons/_directional-values.scss +5 -8
- data/app/assets/stylesheets/addons/_html5-input-types.scss +39 -15
- data/app/assets/stylesheets/addons/_prefixer.scss +5 -5
- data/app/assets/stylesheets/addons/_triangle.scss +51 -13
- data/app/assets/stylesheets/addons/_word-wrap.scss +8 -0
- data/app/assets/stylesheets/css3/_columns.scss +1 -1
- data/app/assets/stylesheets/css3/_filter.scss +5 -0
- data/app/assets/stylesheets/css3/_font-feature-settings.scss +10 -0
- data/app/assets/stylesheets/css3/_image-rendering.scss +1 -0
- data/app/assets/stylesheets/css3/_keyframes.scss +9 -10
- data/app/assets/stylesheets/css3/_transition.scss +47 -4
- data/app/assets/stylesheets/functions/_color-lightness.scss +13 -0
- data/app/assets/stylesheets/functions/_modular-scale.scss +1 -1
- data/app/assets/stylesheets/functions/_px-to-rem.scss +15 -0
- data/bourbon.gemspec +2 -2
- data/bower.json +1 -0
- data/dist/_bourbon.scss +5 -2
- data/dist/addons/_button.scss +142 -41
- data/dist/addons/_directional-values.scss +5 -8
- data/dist/addons/_html5-input-types.scss +3 -3
- data/dist/addons/_triangle.scss +51 -13
- data/dist/addons/_word-wrap.scss +8 -0
- data/dist/css3/_columns.scss +1 -1
- data/dist/css3/_filter.scss +5 -0
- data/dist/css3/_font-feature-settings.scss +10 -0
- data/dist/css3/_image-rendering.scss +1 -0
- data/dist/css3/_keyframes.scss +6 -7
- data/dist/css3/_placeholder.scss +3 -24
- data/dist/css3/_transition.scss +47 -4
- data/dist/functions/_color-lightness.scss +13 -0
- data/dist/functions/_modular-scale.scss +1 -1
- data/dist/functions/_px-to-rem.scss +15 -0
- data/lib/bourbon/version.rb +1 -1
- data/package.json +24 -0
- data/readme.md +20 -21
- metadata +30 -20
- data/app/assets/stylesheets/addons/_rem.scss +0 -33
- data/app/assets/stylesheets/functions/_assign.scss +0 -11
- data/dist/addons/_rem.scss +0 -33
@@ -37,9 +37,9 @@
|
|
37
37
|
}
|
38
38
|
|
39
39
|
@mixin disable-prefix-for-all() {
|
40
|
-
$prefix-for-webkit: false
|
41
|
-
$prefix-for-mozilla: false
|
42
|
-
$prefix-for-microsoft: false
|
43
|
-
$prefix-for-opera: false
|
44
|
-
$prefix-for-spec: false
|
40
|
+
$prefix-for-webkit: false;
|
41
|
+
$prefix-for-mozilla: false;
|
42
|
+
$prefix-for-microsoft: false;
|
43
|
+
$prefix-for-opera: false;
|
44
|
+
$prefix-for-spec: false;
|
45
45
|
}
|
@@ -2,44 +2,82 @@
|
|
2
2
|
height: 0;
|
3
3
|
width: 0;
|
4
4
|
|
5
|
+
$width: nth($size, 1);
|
6
|
+
$height: nth($size, length($size));
|
7
|
+
|
8
|
+
$foreground-color: nth($color, 1);
|
9
|
+
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
10
|
+
|
5
11
|
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
6
|
-
|
7
|
-
|
8
|
-
|
12
|
+
|
13
|
+
$width: $width / 2;
|
14
|
+
$height: if(length($size) > 1, $height, $height/2);
|
9
15
|
|
10
16
|
@if $direction == up {
|
11
|
-
border-
|
17
|
+
border-left: $width solid $background-color;
|
18
|
+
border-right: $width solid $background-color;
|
19
|
+
border-bottom: $height solid $foreground-color;
|
12
20
|
|
13
21
|
} @else if $direction == right {
|
14
|
-
border-
|
22
|
+
border-top: $width solid $background-color;
|
23
|
+
border-bottom: $width solid $background-color;
|
24
|
+
border-left: $height solid $foreground-color;
|
15
25
|
|
16
26
|
} @else if $direction == down {
|
17
|
-
border-
|
27
|
+
border-left: $width solid $background-color;
|
28
|
+
border-right: $width solid $background-color;
|
29
|
+
border-top: $height solid $foreground-color;
|
18
30
|
|
19
31
|
} @else if $direction == left {
|
20
|
-
border-
|
32
|
+
border-top: $width solid $background-color;
|
33
|
+
border-bottom: $width solid $background-color;
|
34
|
+
border-right: $height solid $foreground-color;
|
21
35
|
}
|
22
36
|
}
|
23
37
|
|
24
38
|
@else if ($direction == up-right) or ($direction == up-left) {
|
25
|
-
border-top: $
|
39
|
+
border-top: $height solid $foreground-color;
|
26
40
|
|
27
41
|
@if $direction == up-right {
|
28
|
-
border-left: $
|
42
|
+
border-left: $width solid $background-color;
|
29
43
|
|
30
44
|
} @else if $direction == up-left {
|
31
|
-
border-right: $
|
45
|
+
border-right: $width solid $background-color;
|
32
46
|
}
|
33
47
|
}
|
34
48
|
|
35
49
|
@else if ($direction == down-right) or ($direction == down-left) {
|
36
|
-
border-bottom: $
|
50
|
+
border-bottom: $height solid $foreground-color;
|
37
51
|
|
38
52
|
@if $direction == down-right {
|
39
|
-
border-left: $
|
53
|
+
border-left: $width solid $background-color;
|
40
54
|
|
41
55
|
} @else if $direction == down-left {
|
42
|
-
border-right: $
|
56
|
+
border-right: $width solid $background-color;
|
43
57
|
}
|
44
58
|
}
|
59
|
+
|
60
|
+
@else if ($direction == inset-up) {
|
61
|
+
border-width: $height $width;
|
62
|
+
border-style: solid;
|
63
|
+
border-color: $background-color $background-color $foreground-color;
|
64
|
+
}
|
65
|
+
|
66
|
+
@else if ($direction == inset-down) {
|
67
|
+
border-width: $height $width;
|
68
|
+
border-style: solid;
|
69
|
+
border-color: $foreground-color $background-color $background-color;
|
70
|
+
}
|
71
|
+
|
72
|
+
@else if ($direction == inset-right) {
|
73
|
+
border-width: $width $height;
|
74
|
+
border-style: solid;
|
75
|
+
border-color: $background-color $background-color $background-color $foreground-color;
|
76
|
+
}
|
77
|
+
|
78
|
+
@else if ($direction == inset-left) {
|
79
|
+
border-width: $width $height;
|
80
|
+
border-style: solid;
|
81
|
+
border-color: $background-color $foreground-color $background-color $background-color;
|
82
|
+
}
|
45
83
|
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
// Font feature settings mixin and property default.
|
2
|
+
// Examples: @include font-feature-settings("liga");
|
3
|
+
// @include font-feature-settings("lnum" false);
|
4
|
+
// @include font-feature-settings("pnum" 1, "kern" 0);
|
5
|
+
// @include font-feature-settings("ss01", "ss02");
|
6
|
+
|
7
|
+
@mixin font-feature-settings($settings...) {
|
8
|
+
@if length($settings) == 0 { $settings: none; }
|
9
|
+
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
10
|
+
}
|
@@ -8,29 +8,28 @@
|
|
8
8
|
|
9
9
|
@if $original-prefix-for-webkit {
|
10
10
|
@include disable-prefix-for-all();
|
11
|
-
$prefix-for-webkit: true
|
11
|
+
$prefix-for-webkit: true;
|
12
12
|
@-webkit-keyframes #{$name} {
|
13
13
|
@content;
|
14
14
|
}
|
15
15
|
}
|
16
16
|
@if $original-prefix-for-mozilla {
|
17
17
|
@include disable-prefix-for-all();
|
18
|
-
$prefix-for-mozilla: true
|
18
|
+
$prefix-for-mozilla: true;
|
19
19
|
@-moz-keyframes #{$name} {
|
20
20
|
@content;
|
21
21
|
}
|
22
22
|
}
|
23
|
+
|
24
|
+
$prefix-for-webkit: $original-prefix-for-webkit;
|
25
|
+
$prefix-for-mozilla: $original-prefix-for-mozilla;
|
26
|
+
$prefix-for-microsoft: $original-prefix-for-microsoft;
|
27
|
+
$prefix-for-opera: $original-prefix-for-opera;
|
28
|
+
$prefix-for-spec: $original-prefix-for-spec;
|
29
|
+
|
23
30
|
@if $original-prefix-for-spec {
|
24
|
-
@include disable-prefix-for-all();
|
25
|
-
$prefix-for-spec: true !global;
|
26
31
|
@keyframes #{$name} {
|
27
32
|
@content;
|
28
33
|
}
|
29
34
|
}
|
30
|
-
|
31
|
-
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
32
|
-
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
33
|
-
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
34
|
-
$prefix-for-opera: $original-prefix-for-opera !global;
|
35
|
-
$prefix-for-spec: $original-prefix-for-spec !global;
|
36
35
|
}
|
@@ -4,13 +4,56 @@
|
|
4
4
|
// @include transition-property (transform, opacity);
|
5
5
|
|
6
6
|
@mixin transition ($properties...) {
|
7
|
-
|
8
|
-
|
7
|
+
// Fix for vendor-prefix transform property
|
8
|
+
$needs-prefixes: false;
|
9
|
+
$webkit: ();
|
10
|
+
$moz: ();
|
11
|
+
$spec: ();
|
12
|
+
|
13
|
+
// Create lists for vendor-prefixed transform
|
14
|
+
@each $list in $properties {
|
15
|
+
@if nth($list, 1) == "transform" {
|
16
|
+
$needs-prefixes: true;
|
17
|
+
$list1: -webkit-transform;
|
18
|
+
$list2: -moz-transform;
|
19
|
+
$list3: ();
|
20
|
+
|
21
|
+
@each $var in $list {
|
22
|
+
$list3: join($list3, $var);
|
23
|
+
|
24
|
+
@if $var != "transform" {
|
25
|
+
$list1: join($list1, $var);
|
26
|
+
$list2: join($list2, $var);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
$webkit: append($webkit, $list1);
|
31
|
+
$moz: append($moz, $list2);
|
32
|
+
$spec: append($spec, $list3);
|
33
|
+
}
|
34
|
+
|
35
|
+
// Create lists for non-prefixed transition properties
|
36
|
+
@else {
|
37
|
+
$webkit: append($webkit, $list, comma);
|
38
|
+
$moz: append($moz, $list, comma);
|
39
|
+
$spec: append($spec, $list, comma);
|
40
|
+
}
|
9
41
|
}
|
10
42
|
|
43
|
+
@if $needs-prefixes {
|
44
|
+
-webkit-transition: $webkit;
|
45
|
+
-moz-transition: $moz;
|
46
|
+
transition: $spec;
|
47
|
+
}
|
11
48
|
@else {
|
12
|
-
$properties
|
13
|
-
|
49
|
+
@if length($properties) >= 1 {
|
50
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
51
|
+
}
|
52
|
+
|
53
|
+
@else {
|
54
|
+
$properties: all 0.15s ease-out 0s;
|
55
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
56
|
+
}
|
14
57
|
}
|
15
58
|
}
|
16
59
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// Programatically determines whether a color is light or dark
|
2
|
+
// Returns a boolean
|
3
|
+
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
|
4
|
+
|
5
|
+
@function is-light($hex-color) {
|
6
|
+
$-local-red: red(rgba($hex-color, 1.0));
|
7
|
+
$-local-green: green(rgba($hex-color, 1.0));
|
8
|
+
$-local-blue: blue(rgba($hex-color, 1.0));
|
9
|
+
|
10
|
+
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
11
|
+
|
12
|
+
@return $-local-lightness > .6;
|
13
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// Convert pixels to rems
|
2
|
+
// eg. for a relational value of 12px write rem(12)
|
3
|
+
// Assumes $em-base is the font-size of <html>
|
4
|
+
|
5
|
+
@function rem($pxval) {
|
6
|
+
@if not unitless($pxval) {
|
7
|
+
$pxval: strip-units($pxval);
|
8
|
+
}
|
9
|
+
|
10
|
+
$base: $em-base;
|
11
|
+
@if not unitless($base) {
|
12
|
+
$base: strip-units($base);
|
13
|
+
}
|
14
|
+
@return ($pxval / $base) * 1rem;
|
15
|
+
}
|
data/bourbon.gemspec
CHANGED
@@ -6,7 +6,7 @@ Gem::Specification.new do |s|
|
|
6
6
|
s.name = "bourbon"
|
7
7
|
s.version = Bourbon::VERSION
|
8
8
|
s.platform = Gem::Platform::RUBY
|
9
|
-
s.authors = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "Andres Mejia", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea", "Reda Lemeden"]
|
9
|
+
s.authors = ["Phil LaPier", "Chad Mazzola", "Matt Jankowski", "Nick Quaranto", "Jeremy Raines", "Mike Burns", "Andres Mejia", "Travis Haynes", "Chris Lloyd", "Gabe Berke-Williams", "J. Edward Dewyea", "Reda Lemeden", "Kyle Fiedler"]
|
10
10
|
s.email = ["support@thoughtbot.com"]
|
11
11
|
s.license = 'MIT'
|
12
12
|
s.homepage = "https://github.com/thoughtbot/bourbon"
|
@@ -27,7 +27,7 @@ that support only CSS3 prefixed properties.
|
|
27
27
|
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
28
28
|
s.require_paths = ["lib"]
|
29
29
|
|
30
|
-
s.add_dependency('sass', '
|
30
|
+
s.add_dependency('sass', '~> 3.2')
|
31
31
|
s.add_dependency('thor')
|
32
32
|
|
33
33
|
s.add_development_dependency('aruba', '~> 0.4')
|
data/bower.json
CHANGED
data/dist/_bourbon.scss
CHANGED
@@ -11,12 +11,14 @@
|
|
11
11
|
@import "helpers/shape-size-stripper";
|
12
12
|
|
13
13
|
// Custom Functions
|
14
|
+
@import "functions/color-lightness";
|
14
15
|
@import "functions/flex-grid";
|
15
|
-
@import "functions/grid-width";
|
16
16
|
@import "functions/golden-ratio";
|
17
|
+
@import "functions/grid-width";
|
17
18
|
@import "functions/linear-gradient";
|
18
19
|
@import "functions/modular-scale";
|
19
20
|
@import "functions/px-to-em";
|
21
|
+
@import "functions/px-to-rem";
|
20
22
|
@import "functions/radial-gradient";
|
21
23
|
@import "functions/strip-units";
|
22
24
|
@import "functions/tint-shade";
|
@@ -34,6 +36,7 @@
|
|
34
36
|
@import "css3/box-sizing";
|
35
37
|
@import "css3/calc";
|
36
38
|
@import "css3/columns";
|
39
|
+
@import "css3/filter";
|
37
40
|
@import "css3/flex-box";
|
38
41
|
@import "css3/font-face";
|
39
42
|
@import "css3/hyphens";
|
@@ -59,11 +62,11 @@
|
|
59
62
|
@import "addons/html5-input-types";
|
60
63
|
@import "addons/position";
|
61
64
|
@import "addons/prefixer";
|
62
|
-
@import "addons/rem";
|
63
65
|
@import "addons/retina-image";
|
64
66
|
@import "addons/size";
|
65
67
|
@import "addons/timing-functions";
|
66
68
|
@import "addons/triangle";
|
69
|
+
@import "addons/word-wrap";
|
67
70
|
|
68
71
|
// Soon to be deprecated Mixins
|
69
72
|
@import "bourbon-deprecated-upcoming";
|
data/dist/addons/_button.scss
CHANGED
@@ -1,38 +1,51 @@
|
|
1
|
-
@mixin button ($style: simple, $base-color: #4294f0) {
|
1
|
+
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
2
2
|
|
3
|
-
@if type-of($style) == color {
|
3
|
+
@if type-of($style) == string and type-of($base-color) == color {
|
4
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
5
|
+
}
|
6
|
+
|
7
|
+
@if type-of($style) == string and type-of($base-color) == number {
|
8
|
+
$padding: $text-size;
|
9
|
+
$text-size: $base-color;
|
10
|
+
$base-color: #4294f0;
|
11
|
+
|
12
|
+
@if $padding == inherit {
|
13
|
+
$padding: 7px 18px;
|
14
|
+
}
|
15
|
+
|
16
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
17
|
+
}
|
18
|
+
|
19
|
+
@if type-of($style) == color and type-of($base-color) == color {
|
4
20
|
$base-color: $style;
|
5
21
|
$style: simple;
|
22
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
6
23
|
}
|
7
24
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
25
|
+
@if type-of($style) == color and type-of($base-color) == number {
|
26
|
+
$padding: $text-size;
|
27
|
+
$text-size: $base-color;
|
28
|
+
$base-color: $style;
|
29
|
+
$style: simple;
|
13
30
|
|
14
|
-
@
|
15
|
-
|
31
|
+
@if $padding == inherit {
|
32
|
+
$padding: 7px 18px;
|
16
33
|
}
|
17
34
|
|
18
|
-
@
|
19
|
-
@include pill($base-color, $grayscale: true);
|
20
|
-
}
|
35
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
21
36
|
}
|
22
37
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
38
|
+
@if type-of($style) == number {
|
39
|
+
$padding: $base-color;
|
40
|
+
$text-size: $style;
|
41
|
+
$base-color: #4294f0;
|
42
|
+
$style: simple;
|
28
43
|
|
29
|
-
@
|
30
|
-
|
44
|
+
@if $padding == #4294f0 {
|
45
|
+
$padding: 7px 18px;
|
31
46
|
}
|
32
47
|
|
33
|
-
@
|
34
|
-
@include pill($base-color);
|
35
|
-
}
|
48
|
+
@include buttonstyle($style, $base-color, $text-size, $padding);
|
36
49
|
}
|
37
50
|
|
38
51
|
&:disabled {
|
@@ -42,16 +55,55 @@
|
|
42
55
|
}
|
43
56
|
|
44
57
|
|
58
|
+
// Selector Style Button
|
59
|
+
//************************************************************************//
|
60
|
+
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
61
|
+
// Grayscale button
|
62
|
+
@if $type == simple and $b-color == grayscale($b-color) {
|
63
|
+
@include simple($b-color, true, $t-size, $pad);
|
64
|
+
}
|
65
|
+
|
66
|
+
@if $type == shiny and $b-color == grayscale($b-color) {
|
67
|
+
@include shiny($b-color, true, $t-size, $pad);
|
68
|
+
}
|
69
|
+
|
70
|
+
@if $type == pill and $b-color == grayscale($b-color) {
|
71
|
+
@include pill($b-color, true, $t-size, $pad);
|
72
|
+
}
|
73
|
+
|
74
|
+
@if $type == flat and $b-color == grayscale($b-color) {
|
75
|
+
@include flat($b-color, true, $t-size, $pad);
|
76
|
+
}
|
77
|
+
|
78
|
+
// Colored button
|
79
|
+
@if $type == simple {
|
80
|
+
@include simple($b-color, false, $t-size, $pad);
|
81
|
+
}
|
82
|
+
|
83
|
+
@else if $type == shiny {
|
84
|
+
@include shiny($b-color, false, $t-size, $pad);
|
85
|
+
}
|
86
|
+
|
87
|
+
@else if $type == pill {
|
88
|
+
@include pill($b-color, false, $t-size, $pad);
|
89
|
+
}
|
90
|
+
|
91
|
+
@else if $type == flat {
|
92
|
+
@include flat($b-color, false, $t-size, $pad);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
|
45
97
|
// Simple Button
|
46
98
|
//************************************************************************//
|
47
|
-
@mixin simple($base-color, $grayscale: false) {
|
99
|
+
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
48
100
|
$color: hsl(0, 0, 100%);
|
49
101
|
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
50
102
|
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
51
103
|
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
52
104
|
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
53
105
|
|
54
|
-
@if
|
106
|
+
@if is-light($base-color) {
|
55
107
|
$color: hsl(0, 0, 20%);
|
56
108
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
57
109
|
}
|
@@ -68,10 +120,10 @@
|
|
68
120
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
69
121
|
color: $color;
|
70
122
|
display: inline-block;
|
71
|
-
font-size:
|
123
|
+
font-size: $textsize;
|
72
124
|
font-weight: bold;
|
73
125
|
@include linear-gradient ($base-color, $stop-gradient);
|
74
|
-
padding:
|
126
|
+
padding: $padding;
|
75
127
|
text-decoration: none;
|
76
128
|
text-shadow: 0 1px 0 $text-shadow;
|
77
129
|
background-clip: padding-box;
|
@@ -92,7 +144,8 @@
|
|
92
144
|
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
93
145
|
}
|
94
146
|
|
95
|
-
&:active:not(:disabled)
|
147
|
+
&:active:not(:disabled),
|
148
|
+
&:focus:not(:disabled) {
|
96
149
|
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
97
150
|
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
98
151
|
|
@@ -102,14 +155,14 @@
|
|
102
155
|
}
|
103
156
|
|
104
157
|
border: 1px solid $border-active;
|
105
|
-
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active
|
158
|
+
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
106
159
|
}
|
107
160
|
}
|
108
161
|
|
109
162
|
|
110
163
|
// Shiny Button
|
111
164
|
//************************************************************************//
|
112
|
-
@mixin shiny($base-color, $grayscale: false) {
|
165
|
+
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
113
166
|
$color: hsl(0, 0, 100%);
|
114
167
|
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
115
168
|
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
@@ -119,7 +172,7 @@
|
|
119
172
|
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
120
173
|
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
121
174
|
|
122
|
-
@if
|
175
|
+
@if is-light($base-color) {
|
123
176
|
$color: hsl(0, 0, 20%);
|
124
177
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
125
178
|
}
|
@@ -140,10 +193,10 @@
|
|
140
193
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
141
194
|
color: $color;
|
142
195
|
display: inline-block;
|
143
|
-
font-size:
|
196
|
+
font-size: $textsize;
|
144
197
|
font-weight: bold;
|
145
198
|
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
146
|
-
padding:
|
199
|
+
padding: $padding;
|
147
200
|
text-align: center;
|
148
201
|
text-decoration: none;
|
149
202
|
text-shadow: 0 -1px 1px $text-shadow;
|
@@ -168,21 +221,22 @@
|
|
168
221
|
$fourth-stop-hover 100%);
|
169
222
|
}
|
170
223
|
|
171
|
-
&:active:not(:disabled)
|
224
|
+
&:active:not(:disabled),
|
225
|
+
&:focus:not(:disabled) {
|
172
226
|
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
173
227
|
|
174
228
|
@if $grayscale == true {
|
175
229
|
$inset-shadow-active: grayscale($inset-shadow-active);
|
176
230
|
}
|
177
231
|
|
178
|
-
box-shadow: inset 0 0 20px 0 $inset-shadow-active
|
232
|
+
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
179
233
|
}
|
180
234
|
}
|
181
235
|
|
182
236
|
|
183
237
|
// Pill Button
|
184
238
|
//************************************************************************//
|
185
|
-
@mixin pill($base-color, $grayscale: false) {
|
239
|
+
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
186
240
|
$color: hsl(0, 0, 100%);
|
187
241
|
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
188
242
|
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
@@ -191,7 +245,7 @@
|
|
191
245
|
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
192
246
|
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
193
247
|
|
194
|
-
@if
|
248
|
+
@if is-light($base-color) {
|
195
249
|
$color: hsl(0, 0, 20%);
|
196
250
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
197
251
|
}
|
@@ -208,14 +262,14 @@
|
|
208
262
|
border: 1px solid $border-top;
|
209
263
|
border-color: $border-top $border-sides $border-bottom;
|
210
264
|
border-radius: 16px;
|
211
|
-
box-shadow: inset 0 1px 0 0 $inset-shadow
|
265
|
+
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
212
266
|
color: $color;
|
213
267
|
display: inline-block;
|
214
|
-
font-size:
|
268
|
+
font-size: $textsize;
|
215
269
|
font-weight: normal;
|
216
270
|
line-height: 1;
|
217
271
|
@include linear-gradient ($base-color, $stop-gradient);
|
218
|
-
padding:
|
272
|
+
padding: $padding;
|
219
273
|
text-align: center;
|
220
274
|
text-decoration: none;
|
221
275
|
text-shadow: 0 -1px 1px $text-shadow;
|
@@ -249,7 +303,8 @@
|
|
249
303
|
background-clip: padding-box;
|
250
304
|
}
|
251
305
|
|
252
|
-
&:active:not(:disabled)
|
306
|
+
&:active:not(:disabled),
|
307
|
+
&:focus:not(:disabled) {
|
253
308
|
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
254
309
|
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
255
310
|
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
@@ -267,7 +322,53 @@
|
|
267
322
|
background: $active-color;
|
268
323
|
border: 1px solid $border-active;
|
269
324
|
border-bottom: 1px solid $border-bottom-active;
|
270
|
-
box-shadow: inset 0 0 6px 3px $inset-shadow-active
|
325
|
+
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
271
326
|
text-shadow: 0 -1px 1px $text-shadow-active;
|
272
327
|
}
|
273
328
|
}
|
329
|
+
|
330
|
+
|
331
|
+
|
332
|
+
// Flat Button
|
333
|
+
//************************************************************************//
|
334
|
+
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
335
|
+
$color: hsl(0, 0, 100%);
|
336
|
+
|
337
|
+
@if is-light($base-color) {
|
338
|
+
$color: hsl(0, 0, 20%);
|
339
|
+
}
|
340
|
+
|
341
|
+
background-color: $base-color;
|
342
|
+
border-radius: 3px;
|
343
|
+
border: none;
|
344
|
+
color: $color;
|
345
|
+
display: inline-block;
|
346
|
+
font-size: inherit;
|
347
|
+
font-weight: bold;
|
348
|
+
padding: 7px 18px;
|
349
|
+
text-decoration: none;
|
350
|
+
background-clip: padding-box;
|
351
|
+
|
352
|
+
&:hover:not(:disabled){
|
353
|
+
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
354
|
+
|
355
|
+
@if $grayscale == true {
|
356
|
+
$base-color-hover: grayscale($base-color-hover);
|
357
|
+
}
|
358
|
+
|
359
|
+
background-color: $base-color-hover;
|
360
|
+
cursor: pointer;
|
361
|
+
}
|
362
|
+
|
363
|
+
&:active:not(:disabled),
|
364
|
+
&:focus:not(:disabled) {
|
365
|
+
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
366
|
+
|
367
|
+
@if $grayscale == true {
|
368
|
+
$base-color-active: grayscale($base-color-active);
|
369
|
+
}
|
370
|
+
|
371
|
+
background-color: $base-color-active;
|
372
|
+
cursor: pointer;
|
373
|
+
}
|
374
|
+
}
|