web-experiments/cheap-toggle.css at master · alanhogan/web-experiments · GitHub

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

.toggle {
	z-index: 1;
}
.toggle a {
	z-index: 10;
	text-decoration: none;
	color: #55595f;
	background: #ddd;
	padding: 2px 5px;
	border: 1px solid #889;


	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: DarkGrey;
	background: DarkGrey\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFFFFAFA, endColorstr=#A9A9A9);
}
@media all and (min-width: 0px) {
	.toggle a {
		/* Recent browsers */
		background-image: -moz-linear-gradient(
			top,
			snow,
			DarkGrey
		);
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(snow),
			to(DarkGrey)
		);
	}
}

.toggle a.enabled {
	z-index: 12;
	color: #f0f4f9;
	background: #696f78;
	border-color: #33373f;

	/* Internet Explorer */
	*background: LightSlateGray;
	background: LightSlateGray\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#696f78, endColorstr=#778899);
}
@media all and (min-width: 0px) {
	.toggle a.enabled {
		/* Recent browsers */
		background-image: -moz-linear-gradient(
			top,
			#696f78,
			LightSlateGray
		);
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#696f78),
			to(#778899)
		);
	}
}


.toggle a + a {
	margin-left: -1px;
}
.toggle a.enabled + a {
	border-left-color: #33373f;
}

.toggle a:first-of-type {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.toggle a:last-of-type {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}