compass-recipes 0.2.0 → 0.2.1
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.
- data/VERSION +1 -1
- data/stylesheets/recipes/animation/_fade.scss +29 -0
- data/stylesheets/recipes/animation/_timing-function.scss +29 -0
- data/stylesheets/recipes/form/_element.scss +0 -1
- data/stylesheets/recipes/ui/_button.scss +120 -0
- data/stylesheets/recipes/ui/button/_state-selectors.scss +40 -0
- data/stylesheets/recipes/ui/button/style/_default.scss +12 -0
- data/stylesheets/recipes/ui/button/style/todo/_bonbon.scss +489 -0
- data/stylesheets/recipes/ui/button/style/todo/_bourbon.scss +169 -0
- data/stylesheets/recipes/ui/button/style/todo/_fancy.sass +178 -0
- data/stylesheets/recipes/ui/button/style/todo/_necolas-animated.scss +81 -0
- data/stylesheets/recipes/ui/button/style/todo/_ubuwaits.scss +654 -0
- metadata +15 -5
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.2.
|
|
1
|
+
0.2.1
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@include keyframes(fade-in)
|
|
2
|
+
{
|
|
3
|
+
0% {
|
|
4
|
+
opacity: 0;
|
|
5
|
+
}
|
|
6
|
+
100% {
|
|
7
|
+
opacity: 1;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin fade-in
|
|
12
|
+
{
|
|
13
|
+
// @todo ?
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@include keyframes(fade-out)
|
|
17
|
+
{
|
|
18
|
+
0% {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
}
|
|
21
|
+
100% {
|
|
22
|
+
opacity: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin fade-out
|
|
27
|
+
{
|
|
28
|
+
// @todo ?
|
|
29
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
|
|
2
|
+
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
|
|
3
|
+
|
|
4
|
+
// EASE IN
|
|
5
|
+
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
|
6
|
+
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
|
7
|
+
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
|
8
|
+
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
9
|
+
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
|
10
|
+
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
|
11
|
+
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
|
12
|
+
|
|
13
|
+
// EASE OUT
|
|
14
|
+
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
|
15
|
+
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
16
|
+
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
|
17
|
+
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
|
18
|
+
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
|
19
|
+
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
|
20
|
+
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
|
21
|
+
|
|
22
|
+
// EASE IN OUT
|
|
23
|
+
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
|
24
|
+
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
25
|
+
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
|
26
|
+
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
|
27
|
+
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
|
28
|
+
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
|
29
|
+
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Buttons mixins
|
|
3
|
+
*
|
|
4
|
+
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
|
5
|
+
*/
|
|
6
|
+
@import "recipes/ui/button/state-selectors";
|
|
7
|
+
@import "recipes/ui/button/style/default";
|
|
8
|
+
/*
|
|
9
|
+
* source for code
|
|
10
|
+
http://lab.simurai.com/css/buttons/
|
|
11
|
+
http://brandonmathis.com/projects/fancy-buttons/demo/
|
|
12
|
+
https://github.com/ubuwaits/css3-buttons/blob/gh-pages/scss/buttons.scss
|
|
13
|
+
http://nicolasgallagher.com/lab/css3-animated-button/
|
|
14
|
+
|
|
15
|
+
* source for predefined buttons
|
|
16
|
+
http://forrst.com/posts/CSS_Button_Contest-5J1
|
|
17
|
+
http://houseofbuttons.tumblr.com/
|
|
18
|
+
http://ubuwaits.github.com/css3-buttons/
|
|
19
|
+
https://github.com/maxart/CSS3-Push-Button/blob/master/style.css
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/*
|
|
23
|
+
A button is defined by multiples attributes:
|
|
24
|
+
typography
|
|
25
|
+
colors
|
|
26
|
+
shape (round, oval, brackets, skew, back, knife, shield, drop, morph)
|
|
27
|
+
size (+predefined: xs, s, m, l, xl, xxl)
|
|
28
|
+
hover/active/disabled effect
|
|
29
|
+
material (glossy, glass, texture ?)
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
// here are predefined values (default for all buttons)
|
|
33
|
+
//$ui-button-xxx: value;
|
|
34
|
+
|
|
35
|
+
@mixin ui-button(
|
|
36
|
+
// color
|
|
37
|
+
$color: #e8e8e8,
|
|
38
|
+
|
|
39
|
+
// shape & material
|
|
40
|
+
$style: default,
|
|
41
|
+
//
|
|
42
|
+
|
|
43
|
+
// typo
|
|
44
|
+
$font-weight: bold,
|
|
45
|
+
// size
|
|
46
|
+
$margin: 0,
|
|
47
|
+
$padding: .2em .4em,
|
|
48
|
+
|
|
49
|
+
$outline: none,
|
|
50
|
+
$vertical-align: middle,
|
|
51
|
+
$white-space: nowrap,
|
|
52
|
+
|
|
53
|
+
// this is a button right ?
|
|
54
|
+
$cursor: pointer,
|
|
55
|
+
// disable text selection
|
|
56
|
+
$user-select: none
|
|
57
|
+
)
|
|
58
|
+
{
|
|
59
|
+
font-weight: $font-weight;
|
|
60
|
+
margin: $margin;
|
|
61
|
+
padding: $padding;
|
|
62
|
+
|
|
63
|
+
outline: $outline;
|
|
64
|
+
vertical-align: $vertical-align;
|
|
65
|
+
white-space: $white-space;
|
|
66
|
+
|
|
67
|
+
cursor: $cursor;
|
|
68
|
+
|
|
69
|
+
-webkit-user-select: $user-select;
|
|
70
|
+
-moz-user-select: $user-select;
|
|
71
|
+
user-select: $user-select;
|
|
72
|
+
|
|
73
|
+
//$mixinName: ui-button-normal-state-#{$style};
|
|
74
|
+
@include ui-button-normal-state( //#{$mixinName}
|
|
75
|
+
$color,
|
|
76
|
+
$style
|
|
77
|
+
);
|
|
78
|
+
@include ui-button-hover-state(
|
|
79
|
+
|
|
80
|
+
);
|
|
81
|
+
@include ui-button-active-state(
|
|
82
|
+
|
|
83
|
+
);
|
|
84
|
+
@include ui-button-disabled-state(
|
|
85
|
+
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@mixin ui-button-normal-state(
|
|
90
|
+
$color: #e8e8e8,
|
|
91
|
+
$border-radius: .2em
|
|
92
|
+
)
|
|
93
|
+
{
|
|
94
|
+
@include border-radius($border-radius);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@mixin ui-button-hover-state()
|
|
98
|
+
{
|
|
99
|
+
@include ui-button-hover-selector()
|
|
100
|
+
{
|
|
101
|
+
border: 1px solid #444;
|
|
102
|
+
@include background(linear-gradient(#fff, #ccc));
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@mixin ui-button-active-state()
|
|
107
|
+
{
|
|
108
|
+
@include ui-button-active-selector()
|
|
109
|
+
{
|
|
110
|
+
@include background(linear-gradient(#E3E3E3 40%, #F9F9F9 70%));
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@mixin ui-button-disabled-state()
|
|
115
|
+
{
|
|
116
|
+
@include ui-button-disabled-selector()
|
|
117
|
+
{
|
|
118
|
+
color: #ccc;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Buttons selector mixins
|
|
3
|
+
*
|
|
4
|
+
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
// normal state is completly useless
|
|
8
|
+
/*
|
|
9
|
+
@mixin ui-button-normal-selector()
|
|
10
|
+
{
|
|
11
|
+
&
|
|
12
|
+
{
|
|
13
|
+
@content;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
@mixin ui-button-hover-selector()
|
|
19
|
+
{
|
|
20
|
+
&:not([disabled]):hover
|
|
21
|
+
{
|
|
22
|
+
@content;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin ui-button-active-selector()
|
|
27
|
+
{
|
|
28
|
+
&:not([disabled]):active
|
|
29
|
+
{
|
|
30
|
+
@content;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@mixin ui-button-disabled-selector()
|
|
35
|
+
{
|
|
36
|
+
&[disabled]
|
|
37
|
+
{
|
|
38
|
+
@content;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@mixin ui-button-normal-state-default()
|
|
2
|
+
{
|
|
3
|
+
text-shadow: 0 1px 0 lighten($color, 60%);
|
|
4
|
+
|
|
5
|
+
// background
|
|
6
|
+
@include background(linear-gradient(lighten($color, 10%) 40%, darken($color, 10%) 70%));
|
|
7
|
+
border: 1px solid darken($color, 40%);
|
|
8
|
+
@include box-shadow(0 1px 0 rgba(lighten($color, 60%), .5) inset);
|
|
9
|
+
|
|
10
|
+
//shape
|
|
11
|
+
@include border-radius(3px);
|
|
12
|
+
}
|
|
@@ -0,0 +1,489 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* BonBon Buttons 1.1 by simurai.com
|
|
4
|
+
|
|
5
|
+
1.1 Added unprefixed attributes, :focus style, <button> support
|
|
6
|
+
1.0 Released
|
|
7
|
+
|
|
8
|
+
Usage:
|
|
9
|
+
|
|
10
|
+
Default button: <a href="" class="button">Label</a>
|
|
11
|
+
More fancy with icon: <a href="" class="button orange glossy" data-icon="★">Label</a>
|
|
12
|
+
|
|
13
|
+
Following additional class names are supported:
|
|
14
|
+
|
|
15
|
+
Color: orange, pink, blue, green, transparent
|
|
16
|
+
Font: serif
|
|
17
|
+
Material: glossy, glass
|
|
18
|
+
Size: xs, xl
|
|
19
|
+
Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
|
|
20
|
+
Icon only: icon
|
|
21
|
+
Disabled: disabled
|
|
22
|
+
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
|
|
27
|
+
@import url(http://fonts.googleapis.com/css?family=Lobster);
|
|
28
|
+
@import url(pictos/pictos.css);
|
|
29
|
+
@import url(writesocial/font-face/stylesheet.css);
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* -------------- THE button -------------- */
|
|
33
|
+
.button {
|
|
34
|
+
|
|
35
|
+
/* text */
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
font: 24px/1em 'Droid Sans', sans-serif;
|
|
38
|
+
font-weight: bold;
|
|
39
|
+
text-shadow: rgba(255,255,255,.5) 0 1px 0;
|
|
40
|
+
-webkit-user-select: none;
|
|
41
|
+
-moz-user-select: none;
|
|
42
|
+
user-select: none;
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
/* layout */
|
|
46
|
+
padding: .5em .6em .4em .6em;
|
|
47
|
+
margin: .5em;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
position: relative;
|
|
50
|
+
|
|
51
|
+
-webkit-border-radius: 8px;
|
|
52
|
+
-moz-border-radius: 8px;
|
|
53
|
+
border-radius: 8px;
|
|
54
|
+
|
|
55
|
+
/* effects */
|
|
56
|
+
border-top: 1px solid rgba(255,255,255,0.8);
|
|
57
|
+
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
58
|
+
|
|
59
|
+
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
|
|
60
|
+
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
|
|
61
|
+
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
|
|
62
|
+
|
|
63
|
+
-webkit-transition: background .2s ease-in-out;
|
|
64
|
+
-moz-transition: background .2s ease-in-out;
|
|
65
|
+
transition: background .2s ease-in-out;
|
|
66
|
+
|
|
67
|
+
/* color */
|
|
68
|
+
color: hsl(0, 0%, 40%) !important;
|
|
69
|
+
background-color: hsl(0, 0%, 75%);
|
|
70
|
+
|
|
71
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
72
|
+
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
|
73
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
74
|
+
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
75
|
+
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
|
76
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
77
|
+
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
78
|
+
hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
|
|
79
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* -------------- button (tag) -------------- */
|
|
83
|
+
|
|
84
|
+
button.button {
|
|
85
|
+
border-left: none;
|
|
86
|
+
border-right: none;
|
|
87
|
+
}
|
|
88
|
+
button.button:hover {
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
/* -------------- icon -------------- */
|
|
94
|
+
.button:before {
|
|
95
|
+
font: 1.2em/0 'Pictos', sans-serif;
|
|
96
|
+
content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
|
|
97
|
+
margin-right: 0.4em;
|
|
98
|
+
}
|
|
99
|
+
.button.social:before {
|
|
100
|
+
font: 2em/.5em 'writesocialRegular', sans-serif;
|
|
101
|
+
vertical-align: -.08em;
|
|
102
|
+
margin-right: 0.25em;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
/* icon only */
|
|
107
|
+
.icon {
|
|
108
|
+
font-weight: normal;
|
|
109
|
+
font-style: normal;
|
|
110
|
+
text-indent: -999em;
|
|
111
|
+
}
|
|
112
|
+
.icon:before, .icon.social:before {
|
|
113
|
+
margin-right: 0;
|
|
114
|
+
display: block;
|
|
115
|
+
height: 0;
|
|
116
|
+
text-indent: 0px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
/* -------------- colours -------------- */
|
|
122
|
+
|
|
123
|
+
.button.orange {
|
|
124
|
+
color: hsl(39, 100%, 30%) !important;
|
|
125
|
+
background-color: hsl(39, 100%, 50%);
|
|
126
|
+
|
|
127
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
128
|
+
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
|
129
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
130
|
+
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
131
|
+
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
|
132
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
133
|
+
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
134
|
+
hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
|
|
135
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
136
|
+
}
|
|
137
|
+
.button.orange:hover { background-color: hsl(39, 100%, 65%); }
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
.button.blue {
|
|
141
|
+
color: hsl(208, 50%, 40%) !important;
|
|
142
|
+
background-color: hsl(208, 100%, 75%);
|
|
143
|
+
|
|
144
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
145
|
+
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
|
146
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
147
|
+
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
148
|
+
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
|
149
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
150
|
+
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
151
|
+
hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
|
|
152
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
153
|
+
}
|
|
154
|
+
.button.blue:hover { background-color: hsl(208, 100%, 83%); }
|
|
155
|
+
|
|
156
|
+
.button.green {
|
|
157
|
+
color: hsl(88, 70%, 30%) !important;
|
|
158
|
+
background-color: hsl(88, 70%, 60%);
|
|
159
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
160
|
+
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
|
161
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
162
|
+
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
163
|
+
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
|
164
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
165
|
+
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
166
|
+
hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
|
|
167
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
168
|
+
}
|
|
169
|
+
.button.green:hover { background-color: hsl(88, 70%, 75%); }
|
|
170
|
+
|
|
171
|
+
.button.pink {
|
|
172
|
+
color: hsl(340, 100%, 30%) !important;
|
|
173
|
+
background-color: hsl(340, 100%, 75%);
|
|
174
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
175
|
+
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
|
176
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
177
|
+
-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
178
|
+
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
|
179
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
180
|
+
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
|
|
181
|
+
hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
|
|
182
|
+
rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
|
|
183
|
+
}
|
|
184
|
+
.button.pink:hover { background-color: hsl(340, 100%, 83%); }
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
.button.transparent {
|
|
189
|
+
color: rgba(0,0,0,0.5) !important;
|
|
190
|
+
}
|
|
191
|
+
.button.transparent, .button.transparent:hover, .button.transparent:active {
|
|
192
|
+
background-color: transparent;
|
|
193
|
+
background-image: none;
|
|
194
|
+
}
|
|
195
|
+
.button.transparent:hover {
|
|
196
|
+
opacity: .9;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
/* -------------- States -------------- */
|
|
202
|
+
|
|
203
|
+
.button:hover {
|
|
204
|
+
background-color: hsl(0, 0%, 83%);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
.button:active {
|
|
210
|
+
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
|
211
|
+
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
|
212
|
+
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
|
|
213
|
+
|
|
214
|
+
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
|
215
|
+
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
|
216
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
217
|
+
-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
|
218
|
+
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
|
219
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
220
|
+
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
|
|
221
|
+
rgba(0,0,0,0.4) 0 .1em 1px, /* border */
|
|
222
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
223
|
+
|
|
224
|
+
-webkit-transform: translateY(.2em);
|
|
225
|
+
-moz-transform: translateY(.2em);
|
|
226
|
+
transform: translateY(.2em);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.button:focus {
|
|
230
|
+
outline: none;
|
|
231
|
+
color: rgba(254,255,255,0.9) !important;
|
|
232
|
+
text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
|
|
236
|
+
opacity: .5;
|
|
237
|
+
cursor: default;
|
|
238
|
+
color: rgba(0,0,0,0.2) !important;
|
|
239
|
+
text-shadow: none !important;
|
|
240
|
+
background-color: rgba(0,0,0,0.05);
|
|
241
|
+
background-image: none;
|
|
242
|
+
border-top: none;
|
|
243
|
+
|
|
244
|
+
-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
|
|
245
|
+
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
|
|
246
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
247
|
+
-moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
|
|
248
|
+
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
|
|
249
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
250
|
+
box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
|
|
251
|
+
rgba(0,0,0,0.3) 0 .1em 1px, /* border */
|
|
252
|
+
rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
|
|
253
|
+
|
|
254
|
+
-webkit-transform: translateY(5px);
|
|
255
|
+
-moz-transform: translateY(5px);
|
|
256
|
+
transform: translateY(5px);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* -------------- Fonts -------------- */
|
|
260
|
+
|
|
261
|
+
.serif {
|
|
262
|
+
font-family: 'Lobster', serif;
|
|
263
|
+
font-weight: normal;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
/* -------------- Sizes -------------- */
|
|
268
|
+
|
|
269
|
+
.xs { font-size: 16px; }
|
|
270
|
+
.xl { font-size: 32px; }
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
/* -------------- Materials -------------- */
|
|
274
|
+
|
|
275
|
+
.button.glossy:after, .button.glass:after {
|
|
276
|
+
content: "";
|
|
277
|
+
position: absolute;
|
|
278
|
+
width: 90%;
|
|
279
|
+
height: 60%;
|
|
280
|
+
top: 0;
|
|
281
|
+
left: 5%;
|
|
282
|
+
|
|
283
|
+
-webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
|
|
284
|
+
-moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
|
|
285
|
+
border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
|
|
286
|
+
|
|
287
|
+
background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
|
|
288
|
+
color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
|
|
289
|
+
background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
|
|
290
|
+
background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
|
|
291
|
+
color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
|
|
292
|
+
}
|
|
293
|
+
.button.glossy:active:after,
|
|
294
|
+
.button.glass:active:after,
|
|
295
|
+
.button.disabled:after,
|
|
296
|
+
.button[disabled]:after
|
|
297
|
+
{ opacity: .6; }
|
|
298
|
+
|
|
299
|
+
.button.icon.glossy:after,
|
|
300
|
+
.button.icon.glass:after { height: 75% ; }
|
|
301
|
+
|
|
302
|
+
/* -------------- Glass + Transparent -------------- */
|
|
303
|
+
.button.glass {
|
|
304
|
+
text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
|
|
305
|
+
}
|
|
306
|
+
.button.glass:active {
|
|
307
|
+
text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
/* -------------- Shapes -------------- */
|
|
312
|
+
|
|
313
|
+
/* round */
|
|
314
|
+
.round, .round.glossy:after, .round.glass:after {
|
|
315
|
+
border-top: none;
|
|
316
|
+
-webkit-border-radius: 1em;
|
|
317
|
+
-moz-border-radius: 1em;
|
|
318
|
+
border-radius: 1em;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* oval */
|
|
322
|
+
.oval {
|
|
323
|
+
border-top: none;
|
|
324
|
+
padding-left: .8em;
|
|
325
|
+
padding-right: .8em;
|
|
326
|
+
-webkit-border-radius: 5em / 2em;
|
|
327
|
+
-moz-border-radius: 5em / 2em;
|
|
328
|
+
border-radius: 5em / 2em;
|
|
329
|
+
}
|
|
330
|
+
.oval.glossy:after, .oval.glass:after {
|
|
331
|
+
top: 5%;
|
|
332
|
+
-webkit-border-radius: 5em / 2em 2em 1em 1em;
|
|
333
|
+
-moz-border-radius: 5em / 2em 2em 1em 1em;
|
|
334
|
+
border-radius: 5em / 2em 2em 1em 1em;
|
|
335
|
+
}
|
|
336
|
+
.oval.icon {
|
|
337
|
+
padding-left: .8em;
|
|
338
|
+
padding-right: .8em;
|
|
339
|
+
-webkit-border-radius: 1.5em / 1em;
|
|
340
|
+
-moz-border-radius: 1.5em / 1em;
|
|
341
|
+
border-radius: 1.5em / 1em;
|
|
342
|
+
}
|
|
343
|
+
.oval.icon.glossy:after, .oval.icon.glass:after {
|
|
344
|
+
-webkit-border-radius: 1.5em / 1em;
|
|
345
|
+
-moz-border-radius: 1.5em / 1em;
|
|
346
|
+
border-radius: 1.5em / 1em;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* brackets */
|
|
350
|
+
.brackets, .brackets.glossy:after, .brackets.glass:after {
|
|
351
|
+
border-top: none;
|
|
352
|
+
-webkit-border-radius: .5em / 1em;
|
|
353
|
+
-moz-border-radius: .5em / 1em;
|
|
354
|
+
border-radius: .5em / 1em;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
/* skew */
|
|
358
|
+
.skew {
|
|
359
|
+
border-top: none;
|
|
360
|
+
padding-right: 1.2em;
|
|
361
|
+
padding-left: 0.8em;
|
|
362
|
+
-webkit-border-radius: 5em 1em / 5em 1em;
|
|
363
|
+
-moz-border-radius: 5em 1em / 5em 1em;
|
|
364
|
+
border-radius: 5em 1em / 5em 1em;
|
|
365
|
+
}
|
|
366
|
+
.skew.glossy:after, .skew.glass:after {
|
|
367
|
+
left: 10%;
|
|
368
|
+
-webkit-border-radius: 7em 1em / 5em 1em;
|
|
369
|
+
-moz-border-radius: 7em 1em / 5em 1em;
|
|
370
|
+
border-radius: 7em 1em / 5em 1em;
|
|
371
|
+
}
|
|
372
|
+
.skew.icon {
|
|
373
|
+
padding-right: .9em;
|
|
374
|
+
padding-left: .8em;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* back */
|
|
378
|
+
.back, .back.glossy:after, .back.glass:after {
|
|
379
|
+
border-top-color: rgba(255,255,255,0.5);
|
|
380
|
+
-webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
|
|
381
|
+
-moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
|
|
382
|
+
border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
|
|
383
|
+
}
|
|
384
|
+
.back.glossy:after, .back.glass:after {
|
|
385
|
+
left: 6%;
|
|
386
|
+
width: 88%;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* knife */
|
|
390
|
+
.knife {
|
|
391
|
+
padding-left: 1.5em;
|
|
392
|
+
-webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
|
|
393
|
+
-moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
|
|
394
|
+
border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
|
|
395
|
+
}
|
|
396
|
+
.knife.glossy:after, .knife.glass:after {
|
|
397
|
+
left: 3%;
|
|
398
|
+
width: 97%;
|
|
399
|
+
-webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
|
|
400
|
+
-moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
|
|
401
|
+
border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
|
|
402
|
+
}
|
|
403
|
+
.knife.glossy.icon:after, .knife.glass.icon:after {
|
|
404
|
+
left: 5%;
|
|
405
|
+
width: 95%;
|
|
406
|
+
-webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
|
|
407
|
+
-moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
|
|
408
|
+
border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* shield */
|
|
412
|
+
.shield, .shield.glossy:after, .shield.glass:after {
|
|
413
|
+
-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
414
|
+
-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
415
|
+
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
416
|
+
}
|
|
417
|
+
.shield {
|
|
418
|
+
padding-left: .8em;
|
|
419
|
+
padding-right: .8em;
|
|
420
|
+
}
|
|
421
|
+
.shield.icon {
|
|
422
|
+
padding-left: .6em;
|
|
423
|
+
padding-right: .6em;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* drop */
|
|
427
|
+
.drop {
|
|
428
|
+
border-top: none;
|
|
429
|
+
-webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
|
|
430
|
+
-moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
|
|
431
|
+
border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
|
|
432
|
+
}
|
|
433
|
+
.drop.glossy:after, .drop.glass:after {
|
|
434
|
+
left: 4%;
|
|
435
|
+
-webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
|
|
436
|
+
-moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
|
|
437
|
+
border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
|
|
438
|
+
}
|
|
439
|
+
.drop.icon {
|
|
440
|
+
padding-right: .6em;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
/* morph */
|
|
445
|
+
.morph {
|
|
446
|
+
border-top: none;
|
|
447
|
+
-webkit-border-radius: 5em / 2em;
|
|
448
|
+
-moz-border-radius: 5em / 2em;
|
|
449
|
+
border-radius: 5em / 2em;
|
|
450
|
+
-webkit-transition: -webkit-border-radius .3s ease-in-out;
|
|
451
|
+
-moz-transition: -moz-border-radius .3s ease-in-out;
|
|
452
|
+
transition: -moz-border-radius .3s ease-in-out;
|
|
453
|
+
}
|
|
454
|
+
.morph:hover {
|
|
455
|
+
-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
456
|
+
-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
457
|
+
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
|
|
458
|
+
}
|
|
459
|
+
.morph:active {
|
|
460
|
+
-webkit-border-radius: .3em;
|
|
461
|
+
-moz-border-radius: .3em;
|
|
462
|
+
border-radius: .3em;
|
|
463
|
+
}
|
|
464
|
+
.morph:after {
|
|
465
|
+
display: none;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
/* Some ugly hacks for FF.
|
|
472
|
+
Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */
|
|
473
|
+
@-moz-document url-prefix() {
|
|
474
|
+
.button { text-align: center; }
|
|
475
|
+
.icon { padding: .5em 1em; }
|
|
476
|
+
.icon:before { margin-left: -.42em; float: left; }
|
|
477
|
+
.social.icon:before { margin-left: -.22em; }
|
|
478
|
+
|
|
479
|
+
.drop.icon { padding-right: 1.1em; }
|
|
480
|
+
.shield.icon { padding-left: 1.1em; padding-right: 1.1em; }
|
|
481
|
+
.skew.icon { padding-right: 1.4em; padding-left: 1.3em; }
|
|
482
|
+
.oval.icon { padding-left: 1.3em; padding-right: 1.3em; }
|
|
483
|
+
.knife { padding-left: 2em; }
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
|
|
489
|
+
/* Damn, this became a fat baby.. */
|