projekte
/
oho
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

set color with css for svg icons. JQuery is needed!

This commit is contained in:
bmen 2019-04-14 21:37:20 +02:00
parent 1da9185337
commit 70c75f080c
2 changed files with 125 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
index.html
View File

@ -15,26 +15,64 @@
}); });
</script> </script>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
$("#searchfield-global").focus(function(){ $("#searchfield-global").focus(function(){
$( ".search-filter-quick" ).slideDown( "slow", function() {}); $( ".search-filter-quick" ).slideDown( "slow", function() {});
});
}); });
</script>
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".scroll");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 2280) {
header.removeClass('scroll').addClass("fixed");
} else {
header.removeClass("fixed").addClass('scroll');
}
});
}); });
</script> </script>
<script> <script>
$(function() { $(function(){
//caches a jQuery object containing the header element jQuery('img.svg').each(function(){
var header = $(".scroll"); var $img = jQuery(this);
$(window).scroll(function() { var imgID = $img.attr('id');
var scroll = $(window).scrollTop(); 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');
if (scroll >= 2280) {
header.removeClass('scroll').addClass("fixed");
} else {
header.removeClass("fixed").addClass('scroll');
}
}); });
}); });
</script> </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">&nbsp;</div> <div class="clearer">&nbsp;</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">&nbsp;</div> <div class="clearer">&nbsp;</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">&nbsp;</div> <div class="clearer">&nbsp;</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">&nbsp;</div> <div class="clearer">&nbsp;</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">&nbsp;</div> <div class="clearer">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div> <div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date"> <div class="search-results-variante3-item-meta-date">

20
style.css
View File

@ -55,9 +55,9 @@ a:hover {
position: relative; position: relative;
min-width: 777px; min-width: 777px;
background: -moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%); background: -moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%);
background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 );
} }
.product-detail .row.content { .product-detail .row.content {
margin-top:118px; margin-top:118px;
@ -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;