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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
background-color: $endColor;
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
background-color: mix($startColor, $endColor, 60%);
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(top, $startColor, $endColor); // The standard
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
background-color: $endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
background-color: $outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
background-repeat: no-repeat;
// Opera cannot do radial gradients yet
}
@mixin gradient-striped($color,$angle: -45deg) {
background-color: $color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
//background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
// Gradient Bar Colors for buttons and alerts
@mixin gradientBar($primaryColor, $secondaryColor) {
@include gradient-vertical($primaryColor, $secondaryColor);
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
}
// Reset filters for IE
@mixin reset-filter() {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
//
// An UL,LI menu that looks like a cutout and is positioned at the bottom
// of the enclosing block.
//
// This mixin is applied to the enclosing block.
//
// the markup should look like this:
//
// enclosing-block
// ul#id
// li.tab
// a.tab
// li.tab
// a.tab
//
// the id for the ul is passed in as the first argument.
//
// it is difficult to create cutout tabs with a border that look good
// in all browsers and at different client font-sizes.
//
// the problem is that the tab element needs to line up exactly with the
// bottom of the enclosing block in order to make the cutout illusion work.
// most methods of doing this create weird jitters in webkit
// and gecko when resizing the screen or changing the font size. it does not
// look so good to have a dark line under your tab, breaking the illusion of
// a cutout.
//
// the method which makes this jitter-free is to use a height and a line-height
// for the <a> tag instead of vertical padding. This requires that <a> is a block
// which requires that the <li> is block & floated, instead of inline.
//
// This method seems to produce by far the most consistant results of letting
// the active tab sit snugly on the bottom of the enclosing div.
//
// Change with caution: I spent way too much time getting this to work.
//
@mixin cutout-menu(
$ul_id,
$tab_margin: 10px,
$active_background: white,
$active_border: false) {
// allows us to put the menu at the bottom
position: relative;
ul##{$ul_id} {
margin: 0;
padding: 0;
// allows us to put the menu at the bottom
position: absolute;
// puts the menu at the bottom of the enclosing block,
// minus the overhand needed to cover the border:
// bottom: -(border_width($active_border));
bottom: -1px;
// padding-left: don't do it.
// ^^ In some cases, we need width of 100% to actually be the screen width,
// but adding padding makes 100% width be wider than the screen.
// So, instead, we add margin to the first and last li.
white-space: nowrap;
li.tab {
display: block;
float: left;
&.first {margin-left: $tab_margin;}
&.last {margin-right: $tab_margin;}
a.tab {
// @include cg-hover-link;
display: block;
padding: 3px 15px;
// using height and line-height makes for much more consistant rendering
// than using vertical padding. essential to prevent tabs from looking
// horrible at different fonts sizes.
height: 1.75em;
line-height: 1.75em;
// the transparent border is needed to prevent the menu from jittering
// when the active border is applied.
border: 1px solid transparent;
border-bottom: 0;
&.active {
background-color: $active_background;
@if $active_border {
border: $active_border;
border-bottom: 0;
}
}
}
}
}
}
|
