1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
// Survival ✚ Kit
// Add a Bendy shadow to a squar element.
// @author Chris Eppstein
@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
@include box-shadow(0 10px 5px -5px $color);
position: relative;
z-index: 1;
&:before, &:after {
@include box-shadow(0 10px 10px 1px $color);
bottom: 2px;
content: "";
height: 10px;
position: absolute;
width: $width / 2;
z-index: -1;
}
&:before {
@include rotate(-$angle);
left: 10px;
}
&:after {
@include rotate($angle);
right: 10px;
}
}
// Sexy button !
@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
// Params
$bg-light: $light-color;
$bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
$border-inset-color: $bg-light;
$border-inside-light: lighten($border-inset-color, 13%);
$border-inside-dark: $border-inset-color;
$border-outside: darken($bg-dark, 9%);
$box-shadow: rgba(35, 35, 35, 0.2);
$text-shadow: darken($bg-dark, 7%);
@extend .bradius-inner;
@include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
@include gradient($bg-light, $bg-dark);
@include text-shadow(2px 2px 1px $text-shadow);
border:1px solid $border-outside;
color:#FFF !important;
font-size:size(13px);
font-weight: bold;
padding: 9px 60px;
text-decoration: none;
text-decoration: none !important;
&:hover {
@include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
@include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
}
&:active {
@include box-shadow(inset 0px 2px 3px $bg-dark);
background: mix($bg-light, $bg-dark, 50%);
}
&.small {
font-size: 12px;
padding: 7px 22px;
}
}
//
// @TODO: Add docs to shiny-button-colors!
//
@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
// Params
$bg-light: $light-color;
$bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
$border-inset-color: $bg-light;
$border-inside-light: lighten($border-inset-color, 13%);
$border-inside-dark: $border-inset-color;
$border-outside: darken($bg-dark, 9%);
$box-shadow: rgba(35, 35, 35, 0.2);
$text-shadow: darken($bg-dark, 7%);
@include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
@include gradient($bg-light, $bg-dark);
@include text-shadow(2px 2px 1px $text-shadow);
border:1px solid $border-outside;
&:hover {
@include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
@include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
}
&:active {
@include box-shadow(inset 0px 2px 3px $bg-dark);
background: mix($bg-light, $bg-dark, 50%);
}
}
|
