Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 1 | /* Sprite CSS */ |
| 2 | .sprite-account{ background-position: 0 0; width: 32px; height: 40px; } |
Anand Doshi | 40ee8d6 | 2012-02-24 19:21:47 +0530 | [diff] [blame] | 3 | .sprite-buying{ background-position: 0 -90px; width: 40px; height: 40px; } |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 4 | .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 Doshi | 40ee8d6 | 2012-02-24 19:21:47 +0530 | [diff] [blame] | 13 | .sprite-selling{ background-position: 0 -931px; width: 34px; height: 40px; } |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 14 | .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 Doshi | 40ee8d6 | 2012-02-24 19:21:47 +0530 | [diff] [blame] | 24 | .sprite-selling{ margin-top: 8px; margin-left: 12px; } |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 25 | .sprite-stock{ margin-top: 8px; margin-left: 8px; } |
Anand Doshi | 40ee8d6 | 2012-02-24 19:21:47 +0530 | [diff] [blame] | 26 | .sprite-buying{ margin-top: 8px; margin-left: 8px; } |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 27 | .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; |
Anand Doshi | 0e14096 | 2012-03-01 12:16:02 +0530 | [diff] [blame] | 44 | -moz-border-radius: 10px; |
| 45 | -webkit-border-radius: 10px; |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 46 | width: 56px; |
| 47 | height: 56px; |
| 48 | border: 4px solid white; |
Rushabh Mehta | 9b1afe1 | 2012-03-20 14:37:44 +0530 | [diff] [blame] | 49 | box-shadow: 0 0 4px 1px black; |
| 50 | -moz-box-shadow: 0 0 4px 1px black; |
| 51 | -webkit-box-shadow: 0 0 4px 1px black; |
| 52 | -o-box-shadow: 0 0 4px 1px black; |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 53 | margin: auto; |
| 54 | } |
| 55 | |
| 56 | .case-wrapper { |
| 57 | margin: 24px; |
| 58 | float: left; |
| 59 | width: 100px; |
| 60 | height: 100px; |
| 61 | } |
| 62 | |
| 63 | .case-label { |
| 64 | color: white; |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 65 | padding-top: 10px; |
| 66 | text-align: center; |
Rushabh Mehta | 3f46696 | 2012-03-22 11:37:08 +0530 | [diff] [blame] | 67 | text-shadow: 1px 1px 2px #000, 1px 1px 2px #000, 1px 1px 2px #000, 0px 0px 2px #000; |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 68 | } |
| 69 | |
| 70 | /* Hover and click effects */ |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 71 | .case-border:hover, .circle:hover, .hover-effect { |
Rushabh Mehta | 9b1afe1 | 2012-03-20 14:37:44 +0530 | [diff] [blame] | 72 | box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; |
| 73 | -moz-box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; |
| 74 | -webkit-box-shadow: 0 0 2px 0px black, 0 0 4px 1px white !important; |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 75 | -o-box-shadow: 0 0 2px 0px black, 0 0 10px 1px white !important; |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 76 | } |
| 77 | |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 78 | .case-border:active, .case-border:focus, .case-border-click { |
Anand Doshi | ac14412 | 2012-02-27 19:16:24 +0530 | [diff] [blame] | 79 | transform: scale(0.98, 0.98); |
| 80 | -ms-transform: scale(0.98, 0.98); /* IE 9 */ |
| 81 | -webkit-transform: scale(0.98, 0.98); /* Safari and Chrome */ |
| 82 | -o-transform: scale(0.98, 0.98); /* Opera */ |
| 83 | -moz-transform: scale(0.98, 0.98); /* Firefox */ |
Anand Doshi | eaaf651 | 2012-02-24 15:29:07 +0530 | [diff] [blame] | 84 | } |
| 85 | |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 86 | .circle:active, .circle:focus, .circle-click { |
| 87 | transform: scale(1, 1); |
| 88 | -ms-transform: scale(1, 1); /* IE 9 */ |
| 89 | -webkit-transform: scale(1, 1); /* Safari and Chrome */ |
| 90 | -o-transform: scale(1, 1); /* Opera */ |
| 91 | -moz-transform: scale(1, 1); /* Firefox */ |
| 92 | } |
| 93 | |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 94 | .circle { |
Anand Doshi | 08c8edb | 2012-03-01 14:53:05 +0530 | [diff] [blame] | 95 | border-radius: 30px; |
| 96 | -moz-border-radius: 30px; |
| 97 | -webkit-border-radius: 30px; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 98 | height: 15px; |
Anand Doshi | 08c8edb | 2012-03-01 14:53:05 +0530 | [diff] [blame] | 99 | line-height: 12px; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 100 | min-width: 15px; |
| 101 | background: #B00D07; |
| 102 | padding: 3px; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 103 | float: right; |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 104 | margin-top: -74px; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 105 | margin-right: 10px; |
| 106 | border: 2px solid white; |
Rushabh Mehta | 9b1afe1 | 2012-03-20 14:37:44 +0530 | [diff] [blame] | 107 | box-shadow: 0 0 4px 1px black; |
| 108 | -moz-box-shadow: 0 0 4px 1px black; |
| 109 | -webkit-box-shadow: 0 0 4px 1px black; |
| 110 | -o-box-shadow: 0 0 4px 1px black; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 111 | } |
| 112 | |
| 113 | .circle-text { |
| 114 | color: white; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 115 | text-align: center; |
| 116 | display: inline-block; |
Anand Doshi | 7854f81 | 2012-03-14 12:01:13 +0530 | [diff] [blame] | 117 | margin-top: 1px; |
Anand Doshi | db62876 | 2012-02-24 17:56:00 +0530 | [diff] [blame] | 118 | } |
| 119 | |