Skip to content

Commit 805eed6

Browse files
ahmad-sa3dahmad-sa3d
committed
Initial Repository Commit.
0 parents  commit 805eed6

File tree

4 files changed

+1013
-0
lines changed

4 files changed

+1013
-0
lines changed

‎css/switcher.css‎

Lines changed: 360 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,360 @@
1+
.swraper
2+
{
3+
display: inline-block;
4+
5+
overflow: hidden !important;
6+
/*width: 60px;*/
7+
/*line-height: 20px;*/
8+
vertical-align: middle;
9+
position: relative;
10+
margin: 5px;
11+
12+
-webkit-touch-callout: none;
13+
-webkit-user-select: none;
14+
-khtml-user-select: none;
15+
-moz-user-select: none;
16+
-ms-user-select: none;
17+
user-select: none;
18+
19+
z-index: 99;
20+
cursor: pointer;
21+
-webkit-mask-image: -webkit-radial-gradient(white, black);
22+
}
23+
24+
.swraper.disabled
25+
{
26+
27+
opacity: .6;
28+
cursor: not-allowed;
29+
30+
}
31+
32+
.swraper .stoggler
33+
{
34+
position: relative;
35+
text-align: center;
36+
width: 200%;
37+
z-index: 1;
38+
-webkit-transition: all .4s ease-out .1s;
39+
-moz-transition: all .4s ease-out .1s;
40+
-o-transition: all .4s ease-out .1s;
41+
-ms-transition: all .4s ease-out .1s;
42+
transition: all .4s ease-out .1s;
43+
}
44+
45+
.stoggler, .stoggler span
46+
{
47+
display: inline-block;
48+
vertical-align: middle;
49+
}
50+
51+
.stoggler .sblob
52+
{
53+
display: inline-block;
54+
/*width: 20px;*/
55+
/*height: 20px;*/
56+
position: absolute;
57+
top: 50%;
58+
left: 50%;
59+
/*margin-right: -50%;*/
60+
-webkit-transform: translate(-50%, -50%);
61+
-moz-transform: translate(-50%, -50%);
62+
-o-transform: translate(-50%, -50%);
63+
-ms-transform: translate(-50%, -50%);
64+
transform: translate( -50%, -50%);
65+
}
66+
67+
.stoggler .slabel-on, .stoggler .slabel-off
68+
{
69+
width: 50%;
70+
text-align: center;
71+
letter-spacing: 2px;
72+
}
73+
74+
75+
76+
/* THEMES */
77+
78+
/* ------------ THEME LIGHT ------------ */
79+
.swraper.light
80+
{
81+
border-radius: 99px;
82+
box-shadow: 0 0 0px 1px #999;
83+
border: 1px solid rgba( 50, 50, 50, .3 );
84+
}
85+
86+
.swraper.light .stoggler
87+
{
88+
text-shadow: 0 1px rgba( 255, 255, 255, 0.2 );
89+
background: -webkit-linear-gradient(#cfcfcf, #f5f5f5);
90+
background: -o-linear-gradient(#cfcfcf, #f5f5f5);
91+
background: linear-gradient(#cfcfcf, #f5f5f5);
92+
93+
color: rgba( 0, 0, 0, 0.6 );
94+
font-size: 10px;
95+
font-weight: bold;
96+
font-family: Arial;
97+
}
98+
99+
.swraper.light .stoggler.on
100+
{
101+
background: #45a31f;
102+
box-shadow: inset 2px 2px 6px rgba( 0, 0, 0, 0.2 );
103+
text-shadow: 1px 1px rgba( 0, 0, 0, 0.2 );
104+
color: rgba( 255, 255, 255, 0.8 );
105+
}
106+
107+
.swraper.light .stoggler .sblob
108+
{
109+
border-radius: 99px;
110+
background: -webkit-linear-gradient( #f5f5f5, #cfcfcf );
111+
background: linear-gradient( #f5f5f5, #cfcfcf );
112+
box-shadow: 1px 1px 2px #888;
113+
}
114+
115+
.swraper.light .stoggler .sblob:hover
116+
{
117+
background: -webkit-linear-gradient(#e4e4e4, #f9f9f9);
118+
background: -o-linear-gradient(#e4e4e4, #f9f9f9);
119+
background: linear-gradient(#e4e4e4, #f9f9f9);
120+
}
121+
122+
.swraper.light .stoggler .slabel-on, .swraper.light .stoggler .slabel-off{}
123+
124+
/* ------------ END THEME LIGHT ------------ */
125+
126+
127+
/* ------------ THEME MODERN ------------ */
128+
.swraper.modern
129+
{
130+
border-radius: 4px;
131+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.2);
132+
background: -webkit-linear-gradient(#c0c5c9, #a1a9af);
133+
background: -o-linear-gradient(#c0c5c9, #a1a9af);
134+
background: linear-gradient(#c0c5c9, #a1a9af);
135+
-webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.15);
136+
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.15);
137+
}
138+
139+
.swraper.modern .stoggler
140+
{
141+
background: -webkit-linear-gradient(#737e8d, #3f454e);
142+
background: -o-linear-gradient(#737e8d, #3f454e);
143+
background: linear-gradient(#737e8d, #3f454e);
144+
text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
145+
-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
146+
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
147+
148+
color: white;
149+
font-size: 9px;
150+
font-weight: 500;
151+
font-family: Arial;
152+
}
153+
154+
.swraper.modern .stoggler.on
155+
{
156+
background: -webkit-linear-gradient(#4894cd, #2852a6);
157+
background: -o-linear-gradient(#4894cd, #2852a6);
158+
background: linear-gradient(#4894cd, #2852a6);
159+
}
160+
161+
.swraper.modern .stoggler .sblob
162+
{
163+
background: -webkit-linear-gradient(#c0c6c9, #81898f);
164+
background: -o-linear-gradient(#c0c6c9, #81898f);
165+
background: linear-gradient(#c0c6c9, #81898f);
166+
-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.2);
167+
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0, 0, 0, 0.2);
168+
border-radius: 3px;
169+
}
170+
171+
.swraper.modern .stoggler .sblob:hover
172+
{
173+
background-image: -webkit-linear-gradient(#a1a9af, #a1a9af);
174+
background-image: -o-linear-gradient(#a1a9af, #a1a9af);
175+
background-image: linear-gradient(#a1a9af, #a1a9af);
176+
}
177+
178+
.swraper.modern .stoggler .slabel-on, .swraper.modern .stoggler .slabel-off{}
179+
180+
/* ------------ END THEME MODERN ------------ */
181+
182+
/* ------------ THEME DARK ------------ */
183+
.swraper.dark
184+
{
185+
border-radius: 5px;
186+
/*-webkit-box-shadow: 0 0 0 1px #242529, 0 1px 0 1px #666;*/
187+
/*box-shadow: 0 0 0 1px #242529, 0 1px 0 1px #666;*/
188+
/*border: 1px solid #666;*/
189+
}
190+
191+
.swraper.dark .stoggler
192+
{
193+
background: -webkit-linear-gradient(#242529 0%, #34363b 100%);
194+
background: -o-linear-gradient(#242529 0%, #34363b 100%);
195+
background: linear-gradient(#242529 0%, #34363b 100%);
196+
197+
color: rgba(255, 255, 255, 0.7);
198+
font-size: 9px;
199+
font-weight: 500;
200+
font-family: Arial;
201+
}
202+
203+
.swraper.dark .stoggler.on
204+
{
205+
background: -webkit-linear-gradient(#1a70be 0%, #31a2e1 100%);
206+
background: -o-linear-gradient(#1a70be 0%, #31a2e1 100%);
207+
background: linear-gradient(#1a70be 0%, #31a2e1 100%);
208+
}
209+
210+
.swraper.dark .stoggler .sblob
211+
{
212+
color: rgba(255, 255, 255, 0.7);
213+
border-radius: 4px;
214+
background: -webkit-linear-gradient(#cfcfcf 0%, #f5f5f5 100%);
215+
background: -o-linear-gradient(#cfcfcf 0%, #f5f5f5 100%);
216+
background: linear-gradient(#cfcfcf 0%, #f5f5f5 100%);
217+
-webkit-box-shadow: inset 0 0 0 1px #888, inset 0 0 0 2px white;
218+
box-shadow: inset 0 0 0 1px #888, inset 0 0 0 2px white;
219+
220+
}
221+
222+
.swraper.dark .stoggler .sblob:hover
223+
{
224+
background: -webkit-linear-gradient(#c0c0c0 0%, #dadada 100%);
225+
background: -o-linear-gradient(#c0c0c0 0%, #dadada 100%);
226+
background: linear-gradient(#c0c0c0 0%, #dadada 100%);
227+
-webkit-box-shadow: inset 0 0 0 1px #888,inset 0 0 0 2px #ddd;
228+
box-shadow: inset 0 0 0 1px #888,inset 0 0 0 2px #ddd;
229+
}
230+
231+
.swraper.dark .stoggler .slabel-on, .swraper.dark .stoggler .slabel-off{}
232+
233+
/* ------------ END THEME DARK ------------ */
234+
235+
236+
/* ------------ THEME iPHONE ------------ */
237+
.swraper.iphone
238+
{
239+
border-radius: 9999px;
240+
-webkit-box-shadow: 0 0 0 1px #999;
241+
box-shadow: 0 0 0 1px #999;
242+
border: 1px solid #999;
243+
}
244+
245+
.swraper.iphone .stoggler
246+
{
247+
-webkit-box-shadow: inset -2px 2px 5px rgba(0, 0, 0, 0.4);
248+
box-shadow: inset -2px 2px 5px rgba(0, 0, 0, 0.4);
249+
background: #ECECEC;
250+
251+
color: #828282;
252+
text-shadow: 0 0 1px white;
253+
font-size: 11px;
254+
font-weight: bold;
255+
}
256+
257+
.swraper.iphone .stoggler.on
258+
{
259+
-webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
260+
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
261+
262+
background: #037bda;
263+
color: #ffe;
264+
}
265+
266+
.swraper.iphone .stoggler .sblob
267+
{
268+
border-radius: 50px;
269+
background: -webkit-linear-gradient(#d1d1d1 0%, #fafafa 100%);
270+
background: -o-linear-gradient(#d1d1d1 0%, #fafafa 100%);
271+
background: linear-gradient(#d1d1d1 0%, #fafafa 100%);
272+
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.6);
273+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.6);
274+
}
275+
276+
.swraper.iphone .stoggler .sblob:hover{}
277+
278+
.swraper.iphone .stoggler .slabel-on, .swraper.iphone .stoggler .slabel-off{}
279+
280+
/* ------------ END THEME iPHONE ------------ */
281+
282+
/* ------------ THEME FLAT ------------ */
283+
284+
.swraper.flat
285+
{
286+
border-radius: 4px;
287+
border: 1px solid #c6c5c5;
288+
}
289+
290+
.swraper.flat .stoggler
291+
{
292+
background: #b2b2b2;
293+
color: #ffe;
294+
font-size: 11px;
295+
}
296+
297+
298+
.swraper.flat .stoggler.on
299+
{
300+
background: #76bc43;
301+
color: #ffe;
302+
}
303+
304+
.swraper.flat .stoggler .sblob
305+
{
306+
border-radius: 3px;
307+
background: #f1f1f1;
308+
border: 1px solid #e6e5e5;
309+
box-shadow: 0 0 8px 1px #888;
310+
311+
}
312+
313+
.swraper.flat .stoggler.on .sblob
314+
{
315+
box-shadow: 0 0 10px -1px #337733;
316+
}
317+
318+
.swraper.flat .stoggler .sblob:hover{}
319+
320+
.swraper.flat .stoggler .slabel-on:before, .swraper.flat .stoggler .slabel-off:before{}
321+
322+
/* ------------ END THEME Flat ------------ */
323+
324+
325+
326+
body{
327+
/*background: #444;*/
328+
vertical-align: middle;
329+
}
330+
331+
.container{
332+
/* background: #f5f5f5;*/
333+
width: 590px;
334+
margin: 50px auto;
335+
padding: 10px;
336+
}
337+
338+
.container:before, .container:after{
339+
content: "";
340+
display: table;
341+
clear: both;
342+
#zoom: 1;
343+
}
344+
345+
label{
346+
display: inline-block;
347+
width: 150px;
348+
}
349+
350+
body div {
351+
width: 250px;
352+
background: #ededed;
353+
padding: 4px 10px;
354+
float: left;
355+
height: 200px;
356+
margin: 10px;
357+
border: 1px solid #ccc;
358+
border-radius: 4px;
359+
}
360+

0 commit comments

Comments
 (0)