diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/mods/mod_productgroups/show_2.phtml | 19 |
1 files changed, 18 insertions, 1 deletions
diff --git a/views/mods/mod_productgroups/show_2.phtml b/views/mods/mod_productgroups/show_2.phtml index 5d5db54..856fdfe 100644 --- a/views/mods/mod_productgroups/show_2.phtml +++ b/views/mods/mod_productgroups/show_2.phtml @@ -55,12 +55,16 @@ echo (($oProductgroup->hasActiveDiscount())?'active_discount':''); ?>"> - + <div class="title"><?php echo $oProductgroup->getLabel(); ?></div> <?php echo \wp_get_attachment_image($oProductgroup->getImage(), [462, 462], false, [ 'class' => 'bg' ]); ?> + + <?php if ($oProductgroup->hasActiveDiscount()) { ?> + <div class="badge_overlay"><div class="badge">SALE</div></div> + <?php } ?> </a> @@ -76,6 +80,19 @@ .wpsg_mod_productgroup_layout2.productgroups > .productgroup .title { z-index:2; border-radius:2px; transition:all 0.3s ease; position:absolute; left:1rem; top:1rem; background-color:#000000; color:#FFFFFF; padding:0 0.5rem; } .wpsg_mod_productgroup_layout2.productgroups > .productgroup:hover .title { background-color:#FFFFFF; color:#000000; } + .wpsg_mod_productgroup_layout2 .productgroup.active_discount { position:relative; } + .wpsg_mod_productgroup_layout2 .productgroup.active_discount .badge_overlay { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; pointer-events:none; z-index:100; } + .wpsg_mod_productgroup_layout2 .productgroup.active_discount .badge_overlay .badge { + margin:0; color:white; padding:3px 10px; font-size:1rem; text-align:center; + background:#ed1b24; position:absolute; top:0; right:0; transform:translateX(30%) translateY(0%) rotate(45deg); transform-origin:top left; + } + .wpsg_mod_productgroup_layout2 .productgroup.active_discount .badge_overlay .badge:before { + content:''; position:absolute; top:0; right:100%; margin:0 -1px; width:100%; height:100%; background:inherit; min-width:55px; + } + .wpsg_mod_productgroup_layout2 .productgroup.active_discount .badge_overlay .badge:after { + content:''; position:absolute; top:0; left:100%; margin:0 -1px; width:100%; height:100%; background:inherit; min-width:55px; + } + @media screen and (min-width:768px) { .wpsg_mod_productgroup_layout2.productgroups > .productgroup { padding-top:initial; grid-column:initial; } |