blob: 564a361852dd11aee74e85a0e8ababa988913932 [file] [log] [blame]
Anand Doshieaaf6512012-02-24 15:29:07 +05301/* Sprite CSS */
2.sprite-account{ background-position: 0 0; width: 32px; height: 40px; }
Anand Doshi40ee8d62012-02-24 19:21:47 +05303.sprite-buying{ background-position: 0 -90px; width: 40px; height: 40px; }
Anand Doshieaaf6512012-02-24 15:29:07 +05304.sprite-calendar{ background-position: 0 -180px; width: 35px; height: 40px; }
5.sprite-dashboard{ background-position: 0 -270px; width: 40px; height: 29px; }
6.sprite-feed{ background-position: 0 -349px; width: 32px; height: 40px; }
7.sprite-hr{ background-position: 0 -439px; width: 40px; height: 32px; }
8.sprite-kb{ background-position: 0 -521px; width: 24px; height: 39px; }
9.sprite-messages{ background-position: 0 -610px; width: 40px; height: 26px; }
10.sprite-production{ background-position: 0 -686px; width: 40px; height: 33px; }
11.sprite-project{ background-position: 0 -769px; width: 40px; height: 22px; }
12.sprite-report{ background-position: 0 -841px; width: 29px; height: 40px; }
Anand Doshi40ee8d62012-02-24 19:21:47 +053013.sprite-selling{ background-position: 0 -931px; width: 34px; height: 40px; }
Anand Doshieaaf6512012-02-24 15:29:07 +053014.sprite-setting{ background-position: 0 -1021px; width: 37px; height: 40px; }
15.sprite-stock{ background-position: 0 -1111px; width: 34px; height: 39px; }
16.sprite-support{ background-position: 0 -1200px; width: 40px; height: 40px; }
17.sprite-todo{ background-position: 0 -1290px; width: 40px; height: 34px; }
18.sprite-website{ background-position: 0 -1374px; width: 40px; height: 40px; }
19
20.sprite-image { background-image: url("images/sprite-desktop.png"); }
21
22
23.sprite-account{ margin-top: 8px; margin-left: 12px; }
Anand Doshi40ee8d62012-02-24 19:21:47 +053024.sprite-selling{ margin-top: 8px; margin-left: 12px; }
Anand Doshieaaf6512012-02-24 15:29:07 +053025.sprite-stock{ margin-top: 8px; margin-left: 8px; }
Anand Doshi40ee8d62012-02-24 19:21:47 +053026.sprite-buying{ margin-top: 8px; margin-left: 8px; }
Anand Doshieaaf6512012-02-24 15:29:07 +053027.sprite-support{ margin-top: 8px; margin-left: 8px; }
28.sprite-hr{ margin-top: 12px; margin-left: 8px; }
29.sprite-project{ margin-top: 16px; margin-left: 8px; }
30.sprite-production{ margin-top: 10px; margin-left: 8px; }
31.sprite-website{ margin-top: 8px; margin-left: 8px; }
32.sprite-setting{ margin-top: 8px; margin-left: 8px; }
33.sprite-dashboard{ margin-top: 14px; margin-left: 8px; }
34.sprite-report{ margin-top: 8px; margin-left: 14px; }
35
36.sprite-messages{ margin-top: 14px; margin-left: 8px; }
37.sprite-todo{ margin-top: 10px; margin-left: 10px; }
38.sprite-calendar{ margin-top: 8px; margin-left: 10px; }
39.sprite-kb{ margin-top: 8px; margin-left: 16px; }
40.sprite-feed{ margin-top: 8px; margin-left: 14px; }
41
42.case-border {
43 border-radius: 10px;
44 width: 56px;
45 height: 56px;
46 border: 4px solid white;
47 box-shadow: 0 0 10px 1px black;
48 margin: auto;
49}
50
51.case-wrapper {
52 margin: 24px;
53 float: left;
54 width: 100px;
55 height: 100px;
56}
57
58.case-label {
59 color: white;
Anand Doshidb628762012-02-24 17:56:00 +053060 /*font-size: 12px;*/
Anand Doshieaaf6512012-02-24 15:29:07 +053061 padding-top: 10px;
62 text-align: center;
63 text-shadow: 1px 1px 5px #000, 3px 3px 5px #000;
64}
65
66/* Hover and click effects */
Anand Doshidb628762012-02-24 17:56:00 +053067.case-border:hover, .circle:hover {
68 animation: hover-effect 0.1s;
69 -moz-animation: hover-effect 0.1s; /* Firefox */
70 -webkit-animation: hover-effect 0.05s; /* Safari and Chrome */
71
72 animation-timing-function:linear;
73 -moz-animation-timing-function:linear; /* Firefox */
74 -webkit-animation-timing-function:linear; /* Safari and Chrome */
Anand Doshieaaf6512012-02-24 15:29:07 +053075 box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;
76}
77
Anand Doshidb628762012-02-24 17:56:00 +053078.case-border:active, .case-border:focus, .circle:active, .circle:focus {
Anand Doshie68a1e52012-02-27 18:31:15 +053079 box-shadow: 0 0 2px 0 black, 0 0 15px 2px white;
Anand Doshieaaf6512012-02-24 15:29:07 +053080}
81
82@keyframes hover-effect
83{
84 from {box-shadow: 0 0 10px 1px black}
85 to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
86}
87
88@-moz-keyframes hover-effect /* Firefox */
89{
90 from {box-shadow: 0 0 10px 1px black}
91 to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
92}
93
94@-webkit-keyframes hover-effect /* Safari and Chrome */
95{
96 from {box-shadow: 0 0 10px 1px black}
97 to {box-shadow: 0 0 2px 0 black, 0 0 10px 1px white;}
98}
99
Anand Doshidb628762012-02-24 17:56:00 +0530100.circle {
101 border-radius: 100%;
102 height: 15px;
103 min-width: 15px;
104 background: #B00D07;
105 padding: 3px;
106 z-index: 2;
107 float: right;
108 margin-top: -10px;
109 margin-right: 10px;
110 border: 2px solid white;
111 box-shadow: 0 0 10px 1px black;
112}
113
114.circle-text {
115 color: white;
Anand Doshidb628762012-02-24 17:56:00 +0530116 vertical-align: middle;
117 text-align: center;
118 display: inline-block;
Anand Doshie68a1e52012-02-27 18:31:15 +0530119 margin-top: -3px;
Anand Doshidb628762012-02-24 17:56:00 +0530120 text-shadow: 1px 1px 5px #000;
121}
122