particle 1.0
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/README.md +53 -0
- data/lib/particle.rb +3 -0
- data/stylesheets/_particle.scss +2 -0
- data/stylesheets/particle/_css3.scss +5 -0
- data/stylesheets/particle/_layout.scss +5 -0
- data/stylesheets/particle/_typography.scss +3 -0
- data/stylesheets/particle/css3/_blend-modes.scss +367 -0
- data/stylesheets/particle/css3/_drop-shadow.scss +18 -0
- data/stylesheets/particle/css3/_gradient.scss +41 -0
- data/stylesheets/particle/css3/_noise.scss +13 -0
- data/stylesheets/particle/css3/_rotate.scss +12 -0
- data/stylesheets/particle/layout/_apprise.scss +66 -0
- data/stylesheets/particle/layout/_images.scss +25 -0
- data/stylesheets/particle/layout/_jquery-ui.scss +142 -0
- data/stylesheets/particle/layout/_slider.scss +4 -0
- data/stylesheets/particle/layout/_ui.scss +178 -0
- data/stylesheets/particle/layout/slider/_anything.scss +347 -0
- data/stylesheets/particle/layout/slider/_jcarousel.scss +220 -0
- data/stylesheets/particle/layout/slider/_nivo.scss +563 -0
- data/stylesheets/particle/layout/slider/_tiny.scss +186 -0
- data/stylesheets/particle/typography/_legible-color-text.scss +6 -0
- data/stylesheets/particle/typography/_render-fix.scss +19 -0
- data/stylesheets/particle/typography/_text-replacement.scss +32 -0
- data/templates/project/manifest.rb +12 -0
- data/templates/project/style.scss +10 -0
- metadata +85 -0
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
@import "compass/css3", "compass/utilities";
|
|
2
|
+
@import "particle/css3/gradient";
|
|
3
|
+
@import "particle/css3/drop-shadow";
|
|
4
|
+
@import "particle/typography/render-fix";
|
|
5
|
+
@import "particle/utilities/user";
|
|
6
|
+
|
|
7
|
+
$default-jqueryui-base-color: #bec6cc !default;
|
|
8
|
+
|
|
9
|
+
@mixin jquery-ui($base-color: $default-jqueryui-base-color) {
|
|
10
|
+
#dialog_link {
|
|
11
|
+
padding: 0.4em 1em 0.4em 20px;
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
position: relative;
|
|
14
|
+
span.ui-icon {
|
|
15
|
+
margin: 0 5px 0 0;
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: 0.2em;
|
|
18
|
+
top: 50%;
|
|
19
|
+
margin-top: -8px; } }
|
|
20
|
+
|
|
21
|
+
ul#icons {
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
li {
|
|
25
|
+
margin: 2px;
|
|
26
|
+
position: relative;
|
|
27
|
+
padding: 4px 0;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
float: left;
|
|
30
|
+
list-style: none; }
|
|
31
|
+
span.ui-icon {
|
|
32
|
+
float: left;
|
|
33
|
+
margin: 0 4px; } }
|
|
34
|
+
|
|
35
|
+
// UI.TabsView
|
|
36
|
+
#tabs, #tabsMobile {
|
|
37
|
+
padding: 0 !important;
|
|
38
|
+
@include gradient(#fefffe, #e6e6e6);
|
|
39
|
+
@include text-shadow(white 0 1px 0);
|
|
40
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset white 0 -1px 1px);
|
|
41
|
+
ul {
|
|
42
|
+
@include border-bottom-radius(0px);
|
|
43
|
+
border-top: none !important;
|
|
44
|
+
border-right: none !important;
|
|
45
|
+
border-bottom: #777777 1px solid !important;
|
|
46
|
+
border-left: none !important; } }
|
|
47
|
+
|
|
48
|
+
#tabsMobile {
|
|
49
|
+
ul li {
|
|
50
|
+
display: inline;
|
|
51
|
+
float: none;
|
|
52
|
+
&.ui-state-active a {
|
|
53
|
+
color: #005ae4; } } }
|
|
54
|
+
|
|
55
|
+
// UI.ButtonView
|
|
56
|
+
button.ui-button {
|
|
57
|
+
@include border-radius(30px); }
|
|
58
|
+
|
|
59
|
+
.ui-button {
|
|
60
|
+
@include gradient(#fefffe, #e6e6e6);
|
|
61
|
+
@include text-shadow(white 0 1px 0);
|
|
62
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset white 0 -1px 1px);
|
|
63
|
+
color: black;
|
|
64
|
+
border: darken($base-color, 15) 1px solid !important;
|
|
65
|
+
padding: 0 !important;
|
|
66
|
+
height: 30px !important;
|
|
67
|
+
width: 153px;
|
|
68
|
+
margin-bottom: 5px;
|
|
69
|
+
&.ui-state-hover {
|
|
70
|
+
border: darken($base-color, 15) 1px solid !important; }
|
|
71
|
+
&:active {
|
|
72
|
+
@include gradient(#444444, #999999);
|
|
73
|
+
@include text-shadow(black 0 -1px 0);
|
|
74
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset lighten(#999999, 15) 0 -1px 1px);
|
|
75
|
+
color: white; }
|
|
76
|
+
&.ui-disabled {
|
|
77
|
+
@include user-select;
|
|
78
|
+
@include opacity(0.5);
|
|
79
|
+
cursor: default;
|
|
80
|
+
&:active {
|
|
81
|
+
@include gradient(#fefffe, #e6e6e6);
|
|
82
|
+
@include text-shadow(white 0 1px 0);
|
|
83
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset white 0 -1px 1px);
|
|
84
|
+
color: black; } }
|
|
85
|
+
&.ui-default {
|
|
86
|
+
@include gradient(#62c1fc, #1f4cff);
|
|
87
|
+
@include text-shadow(#1f4cff 0 -1px 0);
|
|
88
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset #62c1fc 0 -1px 3px);
|
|
89
|
+
color: white;
|
|
90
|
+
border: #153987 1px solid !important;
|
|
91
|
+
&:active {
|
|
92
|
+
@include gradient(#12183c, #39568f);
|
|
93
|
+
@include text-shadow(#4264a4 0 -1px, 0);
|
|
94
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset #4571df 0 -1px 1px);
|
|
95
|
+
color: white; }
|
|
96
|
+
&.ui-disabled:active {
|
|
97
|
+
@include gradient(#62c1fc, #1f4cff);
|
|
98
|
+
@include text-shadow(#1f4cff 0 -1px 0);
|
|
99
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset #62c1fc 0 -1px 3px);
|
|
100
|
+
color: white;
|
|
101
|
+
border: #153987 1px solid !important; } } }
|
|
102
|
+
|
|
103
|
+
.ellipsis {
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
text-overflow: ellipsis;
|
|
106
|
+
white-space: nowrap; }
|
|
107
|
+
|
|
108
|
+
#radio {
|
|
109
|
+
label.ui-state-active {
|
|
110
|
+
@include gradient(#62c1fc, #1f4cff);
|
|
111
|
+
@include text-shadow(#1f4cff 0 -1px 0);
|
|
112
|
+
@include box-shadow(darken($base-color, 20) 0 0 2px, inset #62c1fc 0 -1px 3px);
|
|
113
|
+
color: white;
|
|
114
|
+
border: #153987 1px solid !important; } }
|
|
115
|
+
|
|
116
|
+
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
|
|
117
|
+
@include gradient-bg(#e8e8e8, 15); }
|
|
118
|
+
|
|
119
|
+
.ui-widget-overlay {
|
|
120
|
+
background-color: $base-color;
|
|
121
|
+
background-image: none; }
|
|
122
|
+
|
|
123
|
+
#slider.ui-slider-horizontal {
|
|
124
|
+
border: #999999 1px solid;
|
|
125
|
+
@include border-radius(20px);
|
|
126
|
+
@include gradient-inverse-bg(darken($base-color, 20), 10, 30);
|
|
127
|
+
@include box-shadow(lighten($base-color, 20) 0 1px 1px);
|
|
128
|
+
.ui-slider-range {
|
|
129
|
+
@include gradient-inverse-bg(darken(#d2d2d6, 5), 10, 30); }
|
|
130
|
+
.ui-slider-handle {
|
|
131
|
+
@include border-radius(20px);
|
|
132
|
+
@include gradient(#fefffe, #d2d2d6);
|
|
133
|
+
@include box-shadow(darken($base-color, 20) 0 2px 2px, inset white 0 -1px 1px);
|
|
134
|
+
border: darken($base-color, 20) 1px solid !important;
|
|
135
|
+
&:active {
|
|
136
|
+
@include gradient-bg(#666666, 15);
|
|
137
|
+
@include box-shadow(darken($base-color, 20) 0 2px 2px, inset black 0 -1px 1px);
|
|
138
|
+
border: darken($base-color, 40) 1px solid !important; } } }
|
|
139
|
+
|
|
140
|
+
.ui-progressbar-value {
|
|
141
|
+
@include gradient(#62c1fc, #1f4cff); }
|
|
142
|
+
}
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
@import "compass/css3/background-clip";
|
|
2
|
+
@import "compass/css3/border-radius";
|
|
3
|
+
@import "compass/css3/box-shadow";
|
|
4
|
+
@import "compass/css3/text-shadow";
|
|
5
|
+
@import "compass/css3/transition";
|
|
6
|
+
@import "compass/css3/inline-block";
|
|
7
|
+
@import "compass/css3/images";
|
|
8
|
+
|
|
9
|
+
$link : '&:link, &:visited';
|
|
10
|
+
$focus : '&:hover, &:focus, &:active';
|
|
11
|
+
|
|
12
|
+
$lte9 : '.ie8 &, .ie7 &';
|
|
13
|
+
$lte10 : '.ie9 &, .ie8 &, .ie7 &';
|
|
14
|
+
|
|
15
|
+
// Modernizr Browser Selectors
|
|
16
|
+
$lte8m : '.not-box-sizing &';
|
|
17
|
+
$lte9m : '.not-rgba &';
|
|
18
|
+
$lte10m : '.not-css-gradients &';
|
|
19
|
+
|
|
20
|
+
@mixin ui {
|
|
21
|
+
.ui-dialog {
|
|
22
|
+
@include border-radius(8px);
|
|
23
|
+
@include box-shadow(#CCC 0 0 4px);
|
|
24
|
+
@include text-shadow(white 0 1px 0);
|
|
25
|
+
background-color: #f5f5f5;
|
|
26
|
+
border: #cccccc 1px solid;
|
|
27
|
+
padding: 24px 0 6px;
|
|
28
|
+
margin: 0 0 20px !important;
|
|
29
|
+
*margin-top: -19px !important;
|
|
30
|
+
*padding-bottom: 0 !important;
|
|
31
|
+
*position: relative;
|
|
32
|
+
div.admin & {
|
|
33
|
+
width: 710px;
|
|
34
|
+
padding: 20px 30px;
|
|
35
|
+
table {
|
|
36
|
+
margin-bottom: 20px;
|
|
37
|
+
} //table
|
|
38
|
+
td {
|
|
39
|
+
padding: 0 !important;
|
|
40
|
+
} //td
|
|
41
|
+
.icon {
|
|
42
|
+
display: none;
|
|
43
|
+
} //.icon
|
|
44
|
+
} //div.admin &
|
|
45
|
+
#{headings(all)} {
|
|
46
|
+
color: #666666 !important;
|
|
47
|
+
} //#{headings(all)}
|
|
48
|
+
#{headings(2)}, .ui-inner {
|
|
49
|
+
padding: 0 32px;
|
|
50
|
+
} //#{headings(2)}…
|
|
51
|
+
a {
|
|
52
|
+
color: #888888 !important;
|
|
53
|
+
text-decoration: none !important;
|
|
54
|
+
} //a
|
|
55
|
+
hr {
|
|
56
|
+
border-bottom: white 1px solid !important;
|
|
57
|
+
} //hr
|
|
58
|
+
hr.space.clearfix {
|
|
59
|
+
height: 0 !important;
|
|
60
|
+
margin-bottom: -10px;
|
|
61
|
+
} //hr.space.clearfix
|
|
62
|
+
.left {
|
|
63
|
+
float: left;
|
|
64
|
+
padding-right: 20px;
|
|
65
|
+
width: 48.5%;
|
|
66
|
+
} //.left
|
|
67
|
+
.ui-label {
|
|
68
|
+
@include border-radius(4px);
|
|
69
|
+
@include box-shadow(white 0 1px 0);
|
|
70
|
+
@include text-shadow(white 0 0 0);
|
|
71
|
+
@include transition-duration(0.25s);
|
|
72
|
+
@include transition-timing-function(ease-in);
|
|
73
|
+
@include inline-block;
|
|
74
|
+
background-color: #cccccc;
|
|
75
|
+
color: white !important;
|
|
76
|
+
padding: 5px 12px;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
font-weight: bold;
|
|
79
|
+
margin: 3px 0 0 !important;
|
|
80
|
+
&:hover {
|
|
81
|
+
@include transition-duration(0.25s);
|
|
82
|
+
@include transition-timing-function(ease-in);
|
|
83
|
+
background-color: #919393;
|
|
84
|
+
} //&:hover
|
|
85
|
+
} //.ui-label
|
|
86
|
+
} //.ui-dialog
|
|
87
|
+
.gecko .ui-inner {
|
|
88
|
+
margin-bottom: 46px;
|
|
89
|
+
} //.gecko .ui-inner
|
|
90
|
+
.ui-border {
|
|
91
|
+
@include border-radius(8px);
|
|
92
|
+
border: #cccccc 1px solid;
|
|
93
|
+
padding: 24px 30px 6px;
|
|
94
|
+
margin: 0 0 10px !important;
|
|
95
|
+
} //.ui-border
|
|
96
|
+
.item-grid {
|
|
97
|
+
@include background-clip;
|
|
98
|
+
@include border-radius(4px);
|
|
99
|
+
@include box-shadow(white 0 1px 0);
|
|
100
|
+
background-color: white;
|
|
101
|
+
border: 1px solid #A8A8A8;
|
|
102
|
+
font-size: 12px !important;
|
|
103
|
+
margin: -1px -1px 20px;
|
|
104
|
+
.item {
|
|
105
|
+
@include background(linear-gradient(top, #EFEFEF, #D1D1D1));
|
|
106
|
+
@include box-shadow(white 0 1px 0 inset);
|
|
107
|
+
@include filter-gradient(#EFEFEF, #D1D1D1);
|
|
108
|
+
@include inline-block;
|
|
109
|
+
border: 1px solid #A8A8A8;
|
|
110
|
+
padding: 15px;
|
|
111
|
+
text-align: center;
|
|
112
|
+
margin: -1px -2px !important;
|
|
113
|
+
height: 100px;
|
|
114
|
+
width: 127px;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
&:first-child {
|
|
117
|
+
@include border-top-left-radius(4px);
|
|
118
|
+
}
|
|
119
|
+
&:nth-child(4) {
|
|
120
|
+
@include border-top-right-radius(4px);
|
|
121
|
+
}
|
|
122
|
+
&:nth-last-of-type(even) {
|
|
123
|
+
@include border-bottom-right-radius(4px);
|
|
124
|
+
} //last-of-type
|
|
125
|
+
a {
|
|
126
|
+
color: #5A5A5A;
|
|
127
|
+
&:hover {
|
|
128
|
+
text-decoration: none !important;
|
|
129
|
+
} //hover
|
|
130
|
+
} //a
|
|
131
|
+
img {
|
|
132
|
+
border-top: #777 1px solid !important;
|
|
133
|
+
border-bottom: white 1px solid !important;
|
|
134
|
+
display: block;
|
|
135
|
+
margin: 0 auto !important;
|
|
136
|
+
} //img
|
|
137
|
+
} //.item
|
|
138
|
+
} //.item-grid
|
|
139
|
+
.ui-tag {
|
|
140
|
+
@include border-radius(4px);
|
|
141
|
+
@include text-shadow(rgb(50, 50, 50) 0 -1px 0);
|
|
142
|
+
@include box-shadow(rgb(50, 50, 50) 0 1px 0);
|
|
143
|
+
@include inline-block;
|
|
144
|
+
border: none !important;
|
|
145
|
+
color: white !important;
|
|
146
|
+
background-color: #909292;
|
|
147
|
+
padding: 5px 10px !important;
|
|
148
|
+
margin: 4px !important;
|
|
149
|
+
&:hover {
|
|
150
|
+
color: white !important;
|
|
151
|
+
background-color: #777878;
|
|
152
|
+
} //&:hover
|
|
153
|
+
} //.ui-tag
|
|
154
|
+
.ui-photo {
|
|
155
|
+
@include box-shadow(rgb(50, 50, 50) 0 2px 5px);
|
|
156
|
+
border: white 1px solid !important;
|
|
157
|
+
padding: 1px !important;
|
|
158
|
+
margin-bottom: 10px !important;
|
|
159
|
+
&.rotate-right {
|
|
160
|
+
-moz-transform: rotate(2deg);
|
|
161
|
+
-o-transform: rotate(2deg);
|
|
162
|
+
-webkit-transform: rotate(2deg);
|
|
163
|
+
.ie8 & {
|
|
164
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958)";
|
|
165
|
+
zoom: 1;
|
|
166
|
+
} //.ie8 &
|
|
167
|
+
} //&.rotate-right
|
|
168
|
+
&.rotate-left {
|
|
169
|
+
-moz-transform: rotate(-2deg);
|
|
170
|
+
-o-transform: rotate(-2deg);
|
|
171
|
+
-webkit-transform: rotate(-2deg);
|
|
172
|
+
.ie8 & {
|
|
173
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958)";
|
|
174
|
+
zoom: 1;
|
|
175
|
+
} //.ie8 &
|
|
176
|
+
} //&.rotate-left
|
|
177
|
+
} //.ui-photo
|
|
178
|
+
}
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
@import "compass/css3/border-radius";
|
|
2
|
+
@import "compass/css3/transition";
|
|
3
|
+
|
|
4
|
+
$default-anythingSlider-path: "images" !default;
|
|
5
|
+
|
|
6
|
+
@mixin anythingSlider($path: $default-anythingSlider-path) {
|
|
7
|
+
/*
|
|
8
|
+
AnythingSlider v1.7+ Default (base) theme
|
|
9
|
+
By Chris Coyier: http://css-tricks.com
|
|
10
|
+
with major improvements by Doug Neiner: http://pixelgraphics.us/
|
|
11
|
+
based on work by Remy Sharp: http://jqueryfordesigners.com/
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/*****************************
|
|
15
|
+
SET DEFAULT DIMENSIONS HERE
|
|
16
|
+
*****************************/
|
|
17
|
+
/* change the ID to match your slider */
|
|
18
|
+
#slider {
|
|
19
|
+
width: 700px;
|
|
20
|
+
height: 390px;
|
|
21
|
+
list-style: none;
|
|
22
|
+
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
|
|
23
|
+
overflow-y: auto;
|
|
24
|
+
overflow-x: hidden;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/*****************
|
|
28
|
+
SET COLORS HERE
|
|
29
|
+
*****************/
|
|
30
|
+
/**** Default state (no keyboard focus) ****/
|
|
31
|
+
/* slider window - top & bottom borders, default state */
|
|
32
|
+
div.anythingSlider .anythingWindow {
|
|
33
|
+
border-top: 3px solid #777;
|
|
34
|
+
border-bottom: 3px solid #777;
|
|
35
|
+
}
|
|
36
|
+
/* Navigation buttons, default state */
|
|
37
|
+
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
|
|
38
|
+
background: #777;
|
|
39
|
+
color: #000;
|
|
40
|
+
}
|
|
41
|
+
/* start-stop button, stopped, default state */
|
|
42
|
+
div.anythingSlider .start-stop {
|
|
43
|
+
background-color: #040;
|
|
44
|
+
color: #fff;
|
|
45
|
+
}
|
|
46
|
+
/* start-stop button, playing, default state */
|
|
47
|
+
div.anythingSlider .start-stop.playing {
|
|
48
|
+
background-color: #800;
|
|
49
|
+
}
|
|
50
|
+
/* start-stop button, default hovered text color (when visible) */
|
|
51
|
+
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
|
|
52
|
+
color: #ddd;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**** Active State (slider has keyboard focus) ****/
|
|
56
|
+
/* slider window - top & bottom borders, active state */
|
|
57
|
+
div.anythingSlider.activeSlider .anythingWindow {
|
|
58
|
+
border-color: #7C9127;
|
|
59
|
+
}
|
|
60
|
+
/* Navigation buttons, active state */
|
|
61
|
+
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
|
|
62
|
+
background-color: #7C9127;
|
|
63
|
+
}
|
|
64
|
+
/* start-stop button, stopped, active state */
|
|
65
|
+
div.anythingSlider .start-stop {
|
|
66
|
+
background-color: #080;
|
|
67
|
+
color: #fff;
|
|
68
|
+
}
|
|
69
|
+
/* start-stop button, playing, active state */
|
|
70
|
+
div.anythingSlider .start-stop.playing {
|
|
71
|
+
background-color: #d00;
|
|
72
|
+
}
|
|
73
|
+
/* start-stop button, active slider hovered text color (when visible) */
|
|
74
|
+
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
|
|
75
|
+
color: #fff;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/***********************
|
|
79
|
+
COMMON SLIDER STYLING
|
|
80
|
+
***********************/
|
|
81
|
+
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
|
|
82
|
+
div.anythingSlider {
|
|
83
|
+
display: block;
|
|
84
|
+
margin: 0 auto;
|
|
85
|
+
overflow: visible !important; /* needed for Opera and Safari */
|
|
86
|
+
position: relative;
|
|
87
|
+
padding: 0 45px 28px 45px;
|
|
88
|
+
}
|
|
89
|
+
/* anythingSlider viewport window */
|
|
90
|
+
div.anythingSlider .anythingWindow {
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
position: relative;
|
|
93
|
+
width: 100%;
|
|
94
|
+
height: 100%;
|
|
95
|
+
}
|
|
96
|
+
/* anythingSlider base (original element) */
|
|
97
|
+
.anythingBase {
|
|
98
|
+
background: transparent;
|
|
99
|
+
list-style: none;
|
|
100
|
+
position: absolute;
|
|
101
|
+
overflow: visible !important;
|
|
102
|
+
top: 0;
|
|
103
|
+
left: 0;
|
|
104
|
+
margin: 0;
|
|
105
|
+
padding: 0;
|
|
106
|
+
}
|
|
107
|
+
/* all panels inside the slider */
|
|
108
|
+
.anythingBase .panel {
|
|
109
|
+
background: transparent;
|
|
110
|
+
display: block;
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
float: left;
|
|
113
|
+
padding: 0;
|
|
114
|
+
margin: 0;
|
|
115
|
+
}
|
|
116
|
+
.anythingBase .panel.vertical {
|
|
117
|
+
float: none;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Navigation Arrows */
|
|
121
|
+
div.anythingSlider .arrow {
|
|
122
|
+
top: 50%;
|
|
123
|
+
position: absolute;
|
|
124
|
+
display: block;
|
|
125
|
+
}
|
|
126
|
+
div.anythingSlider .arrow a {
|
|
127
|
+
display: block;
|
|
128
|
+
height: 140px;
|
|
129
|
+
margin: -70px 0 0 0; /* half height of image */
|
|
130
|
+
width: 45px;
|
|
131
|
+
text-align: center;
|
|
132
|
+
outline: 0;
|
|
133
|
+
background: url("#{$path}/default.png") no-repeat;
|
|
134
|
+
}
|
|
135
|
+
/* hide text, target the span so IE7 doesn't text-indent the link */
|
|
136
|
+
div.anythingSlider .arrow a span { display: block; visibility: hidden; }
|
|
137
|
+
/* back arrow */
|
|
138
|
+
div.anythingSlider .back { left: 0; }
|
|
139
|
+
div.anythingSlider .back a { background-position: left top; }
|
|
140
|
+
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
|
|
141
|
+
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
|
|
142
|
+
/* forward arrow */
|
|
143
|
+
div.anythingSlider .forward { right: 0; }
|
|
144
|
+
div.anythingSlider .forward a { background-position: right top; }
|
|
145
|
+
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
|
|
146
|
+
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
|
|
147
|
+
|
|
148
|
+
/* Navigation Links */
|
|
149
|
+
div.anythingSlider .anythingControls { outline: 0; display: none; }
|
|
150
|
+
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
|
|
151
|
+
div.anythingSlider .anythingControls ul li { display: inline; }
|
|
152
|
+
div.anythingSlider .anythingControls ul a {
|
|
153
|
+
@include border-bottom-radius(5px);
|
|
154
|
+
font: 11px/18px Georgia, Serif;
|
|
155
|
+
display: inline-block;
|
|
156
|
+
text-decoration: none;
|
|
157
|
+
padding: 2px 8px;
|
|
158
|
+
height: 18px;
|
|
159
|
+
margin: 0 5px 0 0;
|
|
160
|
+
background-image: url("#{$path}/default.png");
|
|
161
|
+
background-position: center -288px ;
|
|
162
|
+
background-repeat: repeat-x;
|
|
163
|
+
text-align: center;
|
|
164
|
+
outline: 0;
|
|
165
|
+
}
|
|
166
|
+
div.anythingSlider .anythingControls ul a:hover {
|
|
167
|
+
background-image: none;
|
|
168
|
+
}
|
|
169
|
+
/* Navigation size window */
|
|
170
|
+
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
|
|
171
|
+
|
|
172
|
+
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
|
173
|
+
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
|
174
|
+
div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
|
175
|
+
div.anythingSlider.rtl .anythingWindow {
|
|
176
|
+
direction: ltr;
|
|
177
|
+
unicode-bidi: bidi-override;
|
|
178
|
+
}
|
|
179
|
+
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
|
180
|
+
|
|
181
|
+
/* Autoplay Start/Stop button */
|
|
182
|
+
div.anythingSlider .start-stop {
|
|
183
|
+
@include border-bottom-radius(5px);
|
|
184
|
+
background-image: url("#{$path}/default.png");
|
|
185
|
+
background-position: center -288px;
|
|
186
|
+
background-repeat: repeat-x;
|
|
187
|
+
padding: 2px 5px;
|
|
188
|
+
width: 40px;
|
|
189
|
+
text-align: center;
|
|
190
|
+
text-decoration: none;
|
|
191
|
+
float: right;
|
|
192
|
+
z-index: 100;
|
|
193
|
+
outline: 0;
|
|
194
|
+
}
|
|
195
|
+
/* hide cell shading on hover - makes the button appear to come forward */
|
|
196
|
+
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
|
|
197
|
+
|
|
198
|
+
/* probably not necessary, but added just in case */
|
|
199
|
+
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
|
|
200
|
+
@include transition-duration(0);
|
|
201
|
+
}
|
|
202
|
+
} //anythingSlider
|
|
203
|
+
|
|
204
|
+
@mixin anythingMetallic {
|
|
205
|
+
/*
|
|
206
|
+
AnythingSlider v1.5.10 Metallic Theme
|
|
207
|
+
By Rob Garrison
|
|
208
|
+
*/
|
|
209
|
+
|
|
210
|
+
/****** SET COLORS HERE *******/
|
|
211
|
+
/* Default State */
|
|
212
|
+
div.anythingSlider-metallic .anythingWindow {
|
|
213
|
+
border-top: 3px solid #333;
|
|
214
|
+
border-bottom: 3px solid #333;
|
|
215
|
+
}
|
|
216
|
+
div.anythingSlider-metallic .anythingControls ul a {
|
|
217
|
+
border: 1px solid #000;
|
|
218
|
+
}
|
|
219
|
+
div.anythingSlider-metallic .start-stop {
|
|
220
|
+
border: 1px solid #000;
|
|
221
|
+
}
|
|
222
|
+
div.anythingSlider-metallic .start-stop.playing {
|
|
223
|
+
background-color: #300;
|
|
224
|
+
}
|
|
225
|
+
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
|
|
226
|
+
color: #ddd;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* Active State */
|
|
230
|
+
div.anythingSlider-metallic.activeSlider .anythingWindow {
|
|
231
|
+
border-color: #0355a3;
|
|
232
|
+
}
|
|
233
|
+
div.anythingSlider-metallic.activeSlider .anythingControls ul a {
|
|
234
|
+
background-color: transparent;
|
|
235
|
+
background-position: -68px -40px;
|
|
236
|
+
}
|
|
237
|
+
div.anythingSlider-metallic.activeSlider .anythingControls ul a:hover, div.anythingSlider-metallic.activeSlider .anythingControls ul a.cur {
|
|
238
|
+
background-position: -76px -57px;
|
|
239
|
+
/* background: #fff; */
|
|
240
|
+
}
|
|
241
|
+
div.anythingSlider-metallic.activeSlider .start-stop.playing {
|
|
242
|
+
background-color: #f00;
|
|
243
|
+
}
|
|
244
|
+
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
|
|
245
|
+
color: #fff;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Navigation Arrows */
|
|
249
|
+
div.anythingSlider-metallic .arrow {
|
|
250
|
+
top: 50%;
|
|
251
|
+
position: absolute;
|
|
252
|
+
display: block;
|
|
253
|
+
z-index: 100;
|
|
254
|
+
}
|
|
255
|
+
div.anythingSlider-metallic .arrow a {
|
|
256
|
+
display: block;
|
|
257
|
+
height: 95px;
|
|
258
|
+
margin-top: -47px; /* half height of image */
|
|
259
|
+
width: 45px;
|
|
260
|
+
outline: 0;
|
|
261
|
+
background: url("#{$path}/arrows-metallic.png") no-repeat;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
div.anythingSlider-metallic .forward { right: 0; }
|
|
265
|
+
div.anythingSlider-metallic .back { left: 0; }
|
|
266
|
+
div.anythingSlider-metallic .forward a { background-position: right bottom; }
|
|
267
|
+
div.anythingSlider-metallic .back a { background-position: left bottom; }
|
|
268
|
+
div.anythingSlider-metallic .forward a:hover, div.anythingSlider-metallic .forward a.hover { background-position: right top; }
|
|
269
|
+
div.anythingSlider-metallic .back a:hover, div.anythingSlider-metallic .back a.hover { background-position: left top; }
|
|
270
|
+
|
|
271
|
+
/* Navigation Links */
|
|
272
|
+
div.anythingSlider-metallic .anythingControls {
|
|
273
|
+
float: right;
|
|
274
|
+
position: absolute;
|
|
275
|
+
bottom: 0;
|
|
276
|
+
right: 15%;
|
|
277
|
+
z-index: 100;
|
|
278
|
+
opacity: 0.90;
|
|
279
|
+
filter: alpha(opacity=90);
|
|
280
|
+
}
|
|
281
|
+
div.anythingSlider-metallic .anythingControls ul {
|
|
282
|
+
margin: 0;
|
|
283
|
+
z-index: 100;
|
|
284
|
+
}
|
|
285
|
+
div.anythingSlider-metallic .anythingControls ul li {
|
|
286
|
+
display: block;
|
|
287
|
+
float: left;
|
|
288
|
+
}
|
|
289
|
+
div.anythingSlider-metallic .anythingControls ul a {
|
|
290
|
+
@include border-radius(5px);
|
|
291
|
+
display: block;
|
|
292
|
+
background: transparent url("#{$path}arrows-metallic.png") -68px -136px no-repeat;
|
|
293
|
+
height: 10px;
|
|
294
|
+
width: 10px;
|
|
295
|
+
margin: 3px;
|
|
296
|
+
padding: 0;
|
|
297
|
+
outline: 0;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
div.anythingSlider-metallic .anythingControls ul a:hover, div.anythingSlider-metallic .anythingControls ul a.cur {
|
|
301
|
+
background: transparent url("#{$path}/arrows-metallic.png") -76px -57px no-repeat;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Navigation size window arrows */
|
|
305
|
+
div.anythingSlider-metallic .anythingControls li.next a span, div.anythingSlider-metallic .anythingControls li.prev a span {
|
|
306
|
+
text-indent: 1px;
|
|
307
|
+
margin-top: 3px;
|
|
308
|
+
}
|
|
309
|
+
div.anythingSlider-metallic .anythingControls li.prev a, div.anythingSlider-metallic .anythingControls li.next a {
|
|
310
|
+
color: #ddd;
|
|
311
|
+
}
|
|
312
|
+
div.anythingSlider-metallic .anythingControls li.next a:hover, div.anythingSlider-metallic .anythingControls li.prev a:hover {
|
|
313
|
+
color: #000;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
|
317
|
+
div.anythingSlider-metallic.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
|
318
|
+
div.anythingSlider-metallic.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
|
319
|
+
/* div.anythingSlider-metallic.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
|
320
|
+
|
|
321
|
+
/* Autoplay Start/Stop button */
|
|
322
|
+
div.anythingSlider-metallic .start-stop {
|
|
323
|
+
@include border-radius(7px);
|
|
324
|
+
margin: 3px;
|
|
325
|
+
padding: 0;
|
|
326
|
+
display: inline-block;
|
|
327
|
+
width: 14px;
|
|
328
|
+
height: 14px;
|
|
329
|
+
position: relative;
|
|
330
|
+
bottom: 2px;
|
|
331
|
+
left: 0;
|
|
332
|
+
z-index: 100;
|
|
333
|
+
float: right;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/* Extra - replace defaults */
|
|
337
|
+
div.anythingSlider-metallic {
|
|
338
|
+
padding: 6px 23px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
|
342
|
+
div.anythingSlider-metallic .arrow a span, div.anythingSlider-metallic .anythingControls ul a span, div.anythingSlider-metallic .start-stop span {
|
|
343
|
+
display: block;
|
|
344
|
+
line-height: 1px; /* needed for IE7 */
|
|
345
|
+
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
|
|
346
|
+
}
|
|
347
|
+
}
|