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
|
$direction: 'left' !default;
// Button reset
@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
cursor:pointer;
font:{
size: 0.875em;
family: Helmet, Freesans, sans-serif;
weight:bold;
}
text-transform:uppercase;
line-height: 1.375em;
padding: 0.7em 0.5em 0.5em;
margin:0;
width: auto;
height: auto;
@include border-radius(4px);
background: $c1;
@include linear-gradient($c1, $c2);
border:1px solid $c3;
color:$c4;
&:hover:enabled {
background:$c5;
@include linear-gradient($c6, $c5);
text-decoration: none;
border:1px solid $c7;
color:$c8;
}
}
// list reset
@mixin list-reset-soft {
list-style-type:none;
padding: 0;
margin: 0;
li{
list-style-type:none;
padding: 0;
margin: 0;
border: 0;
}
}
// LTR / RTL
$left: left;
@if $direction == right {
$left: right;
}
$right: right;
@if $direction == right {
$right: left;
}
@function flip($ltr, $rtl) {
@if $direction == left {
@return $ltr;
} @else {
@return $rtl;
}
}
// Compass-like mixins
@mixin box-sizing($bs) {
$bs: unquote($bs);
@include experimental(box-sizing, $bs, -moz, -webkit, not -o, not -ms, official);
}
@mixin border-radius($radius: 5px) {
@include experimental(border-radius, $radius, -moz, -webkit, not -o, not -ms, official);
}
@mixin box-shadow($shadow) {
@include experimental(box-shadow, $shadow, -moz, -webkit, not -o, not -ms, official);
}
@mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $official: true) {
@if $webkit { -webkit-#{$property} : $value; }
@if $moz { -moz-#{$property} : $value; }
@if $ms { -ms-#{$property} : $value; }
@if $o { -o-#{$property} : $value; }
@if $official { #{$property} : $value; }
}
@mixin inline-block($alignment: middle) {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
@mixin clearfix {
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
& { *zoom: 1; }
}
@mixin linear-gradient($stops...) {
$webkit-gradient-stops: ();
$webkit-end-point: 100%;
@each $stop in $stops {
$pos: none;
@if length($stop) > 1 {
@if length($stops) == 2 && unit(nth($stop, 2)) == 'px' {
$webkit-end-point: nth($stop, 2);
$pos: 100%;
} @else {
$pos: nth($stop, 2);
}
} @else if (length($stop) == 1 && index($stops, $stop) == 1) {
$pos: 0%;
} @else {
$pos: 100%;
}
$webkit-gradient-stops: append($webkit-gradient-stops,
color-stop($pos, nth($stop, 1)),
comma);
}
background: -webkit-gradient(linear, 0% 0%, 0% $webkit-end-point, $webkit-gradient-stops);
@each $prefix in -moz-, -o-, -webkit-, "" {
background: #{$prefix}linear-gradient($stops);
}
}
|
