-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathcss3-basic.scss
148 lines (136 loc) · 4.06 KB
/
css3-basic.scss
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/*
* Mixin for clearfix
* @include clearfix;
*/
@mixin clearfix {
&:before, &:after { content: ""; display: table; }
&:after { clear: both; }
*zoom: 1;
}
/*
* Apply a CSS3 box-shadow
* @include boxShadow(5px, 5px, 10px, #000);
*/
@mixin boxShadow($x: 5px, $y: 5px, $blur: 10px, $spread: 10px, $color: #000) {
-webkit-box-shadow: $x $y $blur $spread $color;
box-shadow: $x $y $blur $spread $color;
}
/*
* Apply an inset CSS3 box-shadow
* @include insetBoxShadow(5px, 5px, 10px, #000);
*/
@mixin insetBoxShadow($x: 5px, $y: 5px, $blur: 10px, $spread: 10px, $color: #000) {
-webkit-box-shadow: inset $x $y $blur $spread $color;
box-shadow: inset $x $y $blur $spread $color;
}
/*
* Apply a CSS3 border radius
* @include borderRadius(4px);
*/
@mixin borderRadius($radius: 4px) {
-webkit-border-radius: $radius;
border-radius: $radius;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/*
* Apply a CSS3 border radius to the top corners only
* @include borderTopRadius(4px);
*/
@mixin borderRightRadius($radius: 4px) {
-webkit-border-top-right-radius: $radius;
-webkit-border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
/*
* Apply a CSS3 border radius to the right corners only
* @include borderRightRadius(4px);
*/
@mixin borderLeftRadius($radius: 4px) {
-webkit-border-top-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
/*
* Apply a CSS3 border radius to the bottom corners only
* @include borderBottomRadius(4px);
*/
@mixin borderBottomRadius($radius: 4px) {
-webkit-border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomright: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
/*
* Apply a CSS3 border radius to the left corners only
* @include borderLeftRadius(4px);
*/
@mixin borderLeftRadius($radius: 4px) {
-webkit-border-top-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-topleft: $radius;
-moz-border-radius-bottomleft: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
/*
* Apply a CSS3 linear gradient
*
* $from - The original colour stop of the gradient, eg #FF0000 or #FF0000 20%
* $to - The final colour stop of the gradient
* $fallback - A fallback background-color; if none is provided, the $from colour is used
* $start - The starting point of the gradient
*
* @include linearGradient(red, green);
* @include linearGradient(red, green, transparent);
* @include linearGradient(red 50%, green 100%);
*/
@mixin linearGradient($from, $to, $solid: false, $start: top) {
@if ($solid) {
background-color: $solid;
} @else {
background-color: $from;
}
background-image: -webkit-linear-gradient($start, $from, $to);
background-image: -moz-linear-gradient($start, $from, $to);
background-image: -ms-linear-gradient($start, $from, $to);
background-image: -o-linear-gradient($start, $from, $to);
background-image: linear-gradient($start, $from, $to);
}
/*
* Apply a CSS3 box-rotate
* @include boxRotate(10deg);
*/
@mixin boxRotate($deg) {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
transform: rotate($deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;
}
/*
* Box sizing
* content-box | border-box | padding-box
* @include boxSizing(border-box);
*/
@mixin boxSizing($sizing) {
-webkit-box-sizing: $sizing;
-moz-box-sizing: $sizing;
box-sizing: $sizing;
}
/*
* Apply a CSS3 transform-origin
* @include setTransformOrigin(origin);
*/
@mixin setTransformOrigin($origin) {
-webkit-transform-origin:$origin;
-moz-transform-origin:$origin;
-ms-transform-origin:$origin;
-o-transform-origin:$origin;
transform-origin:$origin;
}