Use sprite for images

This commit is contained in:
Ruud
2012-02-26 21:44:23 +01:00
parent ffd64c5122
commit f5b3144c07
5 changed files with 13 additions and 30 deletions
@@ -22,7 +22,7 @@
margin: 0 0 -5px -20px; margin: 0 0 -5px -20px;
top: 4px; top: 4px;
right: 5px; right: 5px;
background: url('../images/checks.png') right -36px no-repeat; background: url('../images/sprite.png') right -36px no-repeat;
cursor: pointer; cursor: pointer;
} }
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

+8 -9
View File
@@ -258,15 +258,14 @@ body > .spinner, .mask{
height: 16px; height: 16px;
width: 16px; width: 16px;
cursor: pointer; cursor: pointer;
background: url('../images/sprite.png') no-repeat -200px;
} }
.check.highlighted { background-color: #424c59; } .check.highlighted { background-color: #424c59; }
.check.checked { .check.checked { background-position: -2px 0; }
background-image: url('../images/checks.png'); .check.indeterminate { background-position: -1px -119px; }
background-position: -2px 0; .check input {
} display: none !important;
.check input { }
display: none !important;
}
.select { .select {
cursor: pointer; cursor: pointer;
@@ -281,14 +280,14 @@ body > .spinner, .mask{
box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20); box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
background: url('../images/checks.png') no-repeat 94% -53px, -webkit-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -webkit-gradient(
linear, linear,
left bottom, left bottom,
left top, left top,
color-stop(0, #406db8), color-stop(0, #406db8),
color-stop(1, #5b9bd1) color-stop(1, #5b9bd1)
); );
background: url('../images/checks.png') no-repeat 94% -53px, -moz-linear-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
center top, center top,
#5b9bd1 0%, #5b9bd1 0%,
#406db8 100% #406db8 100%
+4 -20
View File
@@ -118,22 +118,6 @@
padding-left: 2%; padding-left: 2%;
} }
.check {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
cursor: pointer;
}
.check.highlighted { background-color: #424c59; }
.check.checked {
background-image: url('../../images/checks.png');
background-position: -2px 0;
}
.check input {
display: none;
}
.page .check + .formHint { .page .check + .formHint {
float: none; float: none;
width: auto; width: auto;
@@ -354,28 +338,28 @@
border-radius: 2px; border-radius: 2px;
} }
.page .tag_input > ul:hover > li.choice { .page .tag_input > ul:hover > li.choice {
background: url('../images/checks.png') no-repeat 94% -53px, -webkit-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -webkit-gradient(
linear, linear,
left bottom, left bottom,
left top, left top,
color-stop(0, rgba(255,255,255,0.1)), color-stop(0, rgba(255,255,255,0.1)),
color-stop(1, rgba(255,255,255,0.3)) color-stop(1, rgba(255,255,255,0.3))
); );
background: url('../images/checks.png') no-repeat 94% -53px, -moz-linear-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
center top, center top,
rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 100% rgba(255,255,255,0.1) 100%
); );
} }
.page .tag_input > ul > li.choice:hover { .page .tag_input > ul > li.choice:hover {
background: url('../images/checks.png') no-repeat 94% -53px, -webkit-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -webkit-gradient(
linear, linear,
left bottom, left bottom,
left top, left top,
color-stop(0, #406db8), color-stop(0, #406db8),
color-stop(1, #5b9bd1) color-stop(1, #5b9bd1)
); );
background: url('../images/checks.png') no-repeat 94% -53px, -moz-linear-gradient( background: url('../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
center top, center top,
#5b9bd1 0%, #5b9bd1 0%,
#406db8 100% #406db8 100%