Adding SVG version of icons and map for ULS

SVG versions of the icons used in the ULs has been added and
the CSS has been modified so that the png fallback is supported by old browsers.
This commit is contained in:
Pau Giner
2013-02-06 11:56:04 +01:00
parent b3f28e718f
commit 34a6c98327
6 changed files with 1190 additions and 10 deletions

View File

@@ -1,7 +1,9 @@
.uls-trigger { .uls-trigger {
/* @embed */ /* @embed */
background: url('../images/icon-language.png') no-repeat scroll left background: transparent url('../images/icon-language.png') no-repeat scroll left center;
center transparent; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/icon-language.svg');
background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg');
padding-left: 30px; padding-left: 30px;
} }
@@ -69,8 +71,10 @@
.uls-worldmap { .uls-worldmap {
/* @embed */ /* @embed */
background: url('../images/world_map.png') no-repeat scroll right top background: transparent url('../images/world_map.png') no-repeat scroll right top;
transparent; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/world_map.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/world_map.svg');
background-image: linear-gradient(transparent, transparent), url('../images/world_map.svg');
background-size: 100%; background-size: 100%;
} }
@@ -159,8 +163,10 @@ div.uls-region {
.icon-close { .icon-close {
/* @embed */ /* @embed */
background: url('../images/close.png') no-repeat scroll center center background: transparent url('../images/close.png') no-repeat scroll center center;
transparent; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/close.svg');
background-image: linear-gradient(transparent, transparent), url('../images/close.svg');
float: right; float: right;
padding: 15px; padding: 15px;
cursor: pointer; cursor: pointer;
@@ -205,8 +211,10 @@ div.uls-region {
.uls-menu .search-label { .uls-menu .search-label {
/* @embed */ /* @embed */
background: url('../images/search.png') no-repeat scroll right center background: transparent url('../images/search.png') no-repeat scroll right center;
transparent; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/search.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/search.svg');
background-image: linear-gradient(transparent, transparent), url('../images/search.svg');
background-size: 30px; background-size: 30px;
height: 32px; height: 32px;
width: 32px; width: 32px;
@@ -215,8 +223,10 @@ div.uls-region {
.uls-menu .languagefilter-clear { .uls-menu .languagefilter-clear {
/* @embed */ /* @embed */
background: url('../images/clear.png') no-repeat scroll left center background: transparent url('../images/clear.png') no-repeat scroll left center;
transparent; background-image: -webkit-linear-gradient(transparent, transparent), url('../images/clear.svg');
background-image: -moz-linear-gradient(transparent, transparent), url('../images/clear.svg');
background-image: linear-gradient(transparent, transparent), url('../images/clear.svg');
cursor: pointer; cursor: pointer;
height: 32px; height: 32px;
position: absolute; position: absolute;

44
images/clear.svg Executable file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="12.520475"
height="12.52047"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<rect
width="1.6884073"
height="16.018188"
x="-0.84419048"
y="0.84421676"
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7-4"
style="fill:#555555;fill-opacity:1;stroke:none" />
<rect
width="1.6884073"
height="16.018188"
x="8.0091028"
y="-8.0090809"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7-4-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

48
images/close.svg Executable file
View File

@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="13.591901"
height="13.591884"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-578.6585,-309.30142)"
id="layer1">
<rect
width="3.2036376"
height="16.018188"
x="188.86241"
y="629.48431"
transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
id="rect9372-4-9-5-4-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
<rect
width="3.2036376"
height="16.018188"
x="-639.09521"
y="182.45512"
transform="matrix(-0.70710678,-0.70710678,0.70710678,-0.70710678,0,0)"
id="rect9372-5-6-44-7-7-7"
style="fill:#555555;fill-opacity:1;stroke:none" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

1010
images/icon-language.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 52 KiB

36
images/search.svg Executable file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="32"
height="32.000031"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-576.51154,-295.86765)"
id="layer1">
<path
d="m 579.88857,299.24469 c 4.50273,-4.50274 11.80568,-4.50272 16.3085,6e-5 4.07216,4.07223 4.41687,10.42533 1.12323,14.93559 l 11.19124,11.19116 -2.49615,2.49618 -11.19125,-11.19116 c -4.51016,3.29363 -10.86328,2.9491 -14.93549,-1.12339 -4.50281,-4.50264 -4.50279,-11.80558 -8e-5,-16.30844 z m 2.12176,2.12187 c -3.34229,3.34214 -3.38386,8.76418 -0.0416,12.10657 3.34232,3.34223 8.80592,3.34224 12.1482,-2e-5 3.34223,-3.34239 3.30056,-8.76429 -0.0417,-12.10668 -3.3422,-3.34213 -8.72263,-3.34213 -12.06491,1.3e-4 z"
id="path3017-6-34-0"
style="fill:#555555;fill-opacity:1;stroke:none" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

32
images/world_map.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 99 KiB