set color with css for svg icons. JQuery is needed!
This commit is contained in:
bmen
parent
1da9185337
commit
70c75f080c
123
index.html
123
index.html
|
|
@ -36,6 +36,44 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
jQuery('img.svg').each(function(){
|
||||||
|
var $img = jQuery(this);
|
||||||
|
var imgID = $img.attr('id');
|
||||||
|
var imgClass = $img.attr('class');
|
||||||
|
var imgURL = $img.attr('src');
|
||||||
|
|
||||||
|
jQuery.get(imgURL, function(data) {
|
||||||
|
// Get the SVG tag, ignore the rest
|
||||||
|
var $svg = jQuery(data).find('svg');
|
||||||
|
|
||||||
|
// Add replaced image's ID to the new SVG
|
||||||
|
if(typeof imgID !== 'undefined') {
|
||||||
|
$svg = $svg.attr('id', imgID);
|
||||||
|
}
|
||||||
|
// Add replaced image's classes to the new SVG
|
||||||
|
if(typeof imgClass !== 'undefined') {
|
||||||
|
$svg = $svg.attr('class', imgClass+' replaced-svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove any invalid XML tags as per http://validator.w3.org
|
||||||
|
$svg = $svg.removeAttr('xmlns:a');
|
||||||
|
|
||||||
|
// Check if the viewport is set, else we gonna set it if we can.
|
||||||
|
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
|
||||||
|
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace image with new SVG
|
||||||
|
$img.replaceWith($svg);
|
||||||
|
|
||||||
|
}, 'xml');
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--
|
<!--
|
||||||
|
|
@ -139,10 +177,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
@ -176,10 +214,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
@ -213,10 +251,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
@ -250,10 +288,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
@ -287,10 +325,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
@ -324,10 +362,47 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><i class="fas fa-language"></i> DE,EN</li>
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
<li><img src="img/OSH_logo.svg" width="16" /></li>
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
<li><i class="fas fa-book-open"></i></li>
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
|
</ul>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
<span class="updated">Updated: 03/27/19</span>
|
||||||
|
<span class="released">Released: 04/12/15</span>
|
||||||
|
</div>
|
||||||
|
<div class="clearer"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1-4-fixed">
|
||||||
|
<div class="search-results-variante3-item">
|
||||||
|
<div class="search-results-variante3-item-img">
|
||||||
|
<a href="detail.html"><img src="img/thumb07.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-info">
|
||||||
|
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
|
||||||
|
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta">
|
||||||
|
<div class="search-results-variante3-item-meta-status">
|
||||||
|
<p>Status</p>
|
||||||
|
<svg height="30" width="30">
|
||||||
|
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="search-results-variante3-item-meta-compl">
|
||||||
|
<p>Completeness</p>
|
||||||
|
<div class="search-results-variante3-item-meta-compl-bar">
|
||||||
|
<span style="width:25%"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
|
||||||
|
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
|
||||||
|
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
|
||||||
|
<li class="doc"><i class="fas fa-book-open"></i></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="clearer"> </div>
|
<div class="clearer"> </div>
|
||||||
<div class="search-results-variante3-item-meta-date">
|
<div class="search-results-variante3-item-meta-date">
|
||||||
|
|
|
||||||
14
style.css
14
style.css
|
|
@ -669,9 +669,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
|
||||||
}
|
}
|
||||||
.search-results-variante3-item .search-results-variante3-item-meta li {
|
.search-results-variante3-item .search-results-variante3-item-meta li {
|
||||||
}
|
}
|
||||||
.search-results-variante3-item .search-results-variante3-item-meta li svg {
|
.search-results-variante3-item .search-results-variante3-item-meta li.cert svg {
|
||||||
background-color: red;
|
width: 16px;
|
||||||
fill: currentColor;
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta li.din svg {
|
||||||
|
margin-top:-2px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
.search-results-variante3-item .search-results-variante3-item-meta li svg path {
|
||||||
|
fill: #296178 !important;
|
||||||
}
|
}
|
||||||
.search-results-variante3-item:hover .search-results-variante3-item-meta li {
|
.search-results-variante3-item:hover .search-results-variante3-item-meta li {
|
||||||
padding:2px 11px;
|
padding:2px 11px;
|
||||||
|
|
@ -725,7 +731,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
|
||||||
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
|
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
|
||||||
float:right;
|
float:right;
|
||||||
}
|
}
|
||||||
.search-results-variante3 svg {
|
.search-results-variante3 .search-results-variante3-item-meta-status svg {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
stroke-dasharray: 251; /* (2PI * 40px) */
|
stroke-dasharray: 251; /* (2PI * 40px) */
|
||||||
stroke-dashoffset: 251;
|
stroke-dashoffset: 251;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue