eSales Media Git repositories
Browse code

Style benefits bar, use SVGs

Martin Filipovic Hinrichs authored on28/01/2026 11:57:46
Showing6 changed files
src/Resources/app/storefront/src/scss/areas/_header.scss
History View file @6f9d650
... ... 
@@ -1,23 +1,30 @@
1 1 
 #benefits-bar {
2 
-  position: sticky;
3 
-  top: 0;
4 
-  z-index: 100;
5 
-  background-color: $dark;
6 
-  color: white;
7 
-  padding: 10px 0;
2 
+  display: none;
8 3
9 
-  ul.container {
10 
-    display: flex;
11 
-    justify-content: space-between;
12 
-    list-style-type: none;
13 
-    margin-bottom: 0;
14 
-    li {
15 
-      font-size: 12px;
16 
-      text-transform: uppercase;
4 
+  @include media-breakpoint-up(lg) {
5 
+    display: block;
6 
+    position: sticky;
7 
+    top: 0;
8 
+    z-index: 100;
9 
+    background-color: $dark;
10 
+    color: white;
11 
+    padding: 10px 0;
12 
+
13 
+    ul.container {
17 14 
       display: flex;
18 
-      align-items: center;
19 
-      img {
20 
-        margin-right: 1rem;
15 
+      justify-content: space-between;
16 
+      list-style-type: none;
17 
+      margin-bottom: 0;
18 
+
19 
+      li {
20 
+        font-size: 12px;
21 
+        text-transform: uppercase;
22 
+        display: flex;
23 
+        align-items: center;
24 
+
25 
+        img {
26 
+          margin-right: 1rem;
27 
+        }
21 28 
       }
22 29 
     }
23 30 
   }
src/Resources/public/img/daumen.svg
History View file @6f9d650
24 31 
new file mode 100755
... ... 
@@ -0,0 +1,37 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200">
3 
+  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
4 
+  <defs>
5 
+    <style>
6 
+      .st0 {
7 
+        fill: none;
8 
+      }
9 
+
10 
+      .st1 {
11 
+        fill: #a18152;
12 
+      }
13 
+
14 
+      .st2 {
15 
+        fill: #fff;
16 
+      }
17 
+
18 
+      .st3 {
19 
+        clip-path: url(#clippath);
20 
+      }
21 
+    </style>
22 
+    <clipPath id="clippath">
23 
+      <rect class="st0" x="41.08" y="40.09" width="113.91" height="117.26"/>
24 
+    </clipPath>
25 
+  </defs>
26 
+  <circle id="Ellipse_5" class="st2" cx="100" cy="100" r="100"/>
27 
+  <g id="Gruppe_180">
28 
+    <rect id="Rechteck_55" class="st1" x="41.08" y="91.87" width="14.31" height="65.49"/>
29 
+    <g id="Gruppe_127">
30 
+      <g class="st3">
31 
+        <g id="Gruppe_126">
32 
+          <path id="Pfad_120" class="st1" d="M66.96,95.8v46.3h15.23c6.09,0,16.76,7.93,27.11,7.93s25.94.81,31.43-3.51c4.16-3.25,5.09-5.94,5.04-8.24-.06-2.86-1.26-4.13-.35-7.32,1.09-3.8,3.46-3.07,5.16-9.09.71-2.44-1.35-5.84-.81-8.69s3.85-5,4.07-9.77c.27-5.84-3.94-4.07-3.75-9.12.21-5.32,4.88-4.57,4.88-10.06s-5.71-10-28.32-7.31c-7.61.91-9.75,0-7.61-8.84,2.14-8.84,7.69-28-10.09-28-4.36,0-2.21,9.01-3.13,14.49-.91,5.48-19.66,26.02-29.11,32.41s-9.74,8.81-9.74,8.81"/>
33 
+        </g>
34 
+      </g>
35 
+    </g>
36 
+  </g>
37 
+</svg>
0 38 
\ No newline at end of file
src/Resources/public/img/erzeuger.svg
History View file @6f9d650
1 39 
new file mode 100755
... ... 
@@ -0,0 +1,43 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200">
3 
+  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
4 
+  <defs>
5 
+    <style>
6 
+      .st0 {
7 
+        fill: none;
8 
+      }
9 
+
10 
+      .st1 {
11 
+        fill: #a18152;
12 
+      }
13 
+
14 
+      .st2 {
15 
+        fill: #fff;
16 
+      }
17 
+
18 
+      .st3 {
19 
+        clip-path: url(#clippath);
20 
+      }
21 
+    </style>
22 
+    <clipPath id="clippath">
23 
+      <rect class="st0" x="41.57" y="36.5" width="120.19" height="128.46"/>
24 
+    </clipPath>
25 
+  </defs>
26 
+  <g id="Gruppe_185">
27 
+    <circle id="Ellipse_6" class="st2" cx="100" cy="100" r="100"/>
28 
+    <g id="Gruppe_181">
29 
+      <g class="st3">
30 
+        <g id="Gruppe_134">
31 
+          <path id="Pfad_132" class="st1" d="M111.01,96.81c0,5.66-4.59,10.25-10.25,10.25s-10.25-4.59-10.25-10.25,4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
32 
+          <path id="Pfad_133" class="st1" d="M136.39,96.81c0,5.66-4.59,10.25-10.25,10.25s-10.25-4.59-10.25-10.25c0-5.66,4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
33 
+          <path id="Pfad_134" class="st1" d="M161.76,96.81c0,5.66-4.59,10.25-10.25,10.25s-10.25-4.59-10.25-10.25c0-5.66,4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
34 
+          <path id="Pfad_135" class="st1" d="M123.7,121.56c0,5.66-4.59,10.25-10.25,10.25-5.66,0-10.25-4.59-10.25-10.25s4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
35 
+          <path id="Pfad_136" class="st1" d="M149.05,121.56c0,5.66-4.59,10.25-10.25,10.25-5.66,0-10.25-4.59-10.25-10.25,0-5.66,4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
36 
+          <path id="Pfad_137" class="st1" d="M136.39,146.32c0,5.66-4.59,10.25-10.25,10.25-5.66,0-10.25-4.59-10.25-10.25,0-5.66,4.59-10.25,10.25-10.25h0c5.66,0,10.25,4.59,10.25,10.25"/>
37 
+          <path id="Pfad_138" class="st1" d="M56.47,55.18c.46,1.34,1.04,2.64,1.74,3.88,1.09,2.07,2.68,3.83,4.63,5.12.86.54,1.84.85,2.86.88,1.53-.08,2.97-.7,4.09-1.74,1.39-1.23,2.56-2.69,3.44-4.32.68-1.21,1.25-2.47,1.69-3.79h0c1.3,0,3.5-1.43,3.5-3.13s-1.05-3.12-2.34-3.12h0v-.51c.59-5.98-3.78-11.31-9.76-11.91-.2-.02-.4-.03-.61-.04-6,.22-10.69,5.27-10.47,11.27,0,.23.02.46.05.69v.56c-1.29.44-2.12,1.71-2,3.07,0,1.58,1.85,2.86,3.15,3.09"/>
38 
+          <path id="Pfad_139" class="st1" d="M117.86,64.8h-42.86c-.04.08-.07.16-.1.24-2.07,3.27-5.56,5.37-9.42,5.67-3.56-.5-6.65-2.71-8.28-5.91-5.58,1.41-10.87,3.79-15.64,7.02v47.61c0,2.31,1.88,4.18,4.19,4.18h5.49v41.36h29.33v-89.01h37.29c3,0,5.44-2.43,5.44-5.44,0,0,0,0,0,0v-.27c0-3-2.43-5.44-5.44-5.44"/>
39 
+        </g>
40 
+      </g>
41 
+    </g>
42 
+  </g>
43 
+</svg>
0 44 
\ No newline at end of file
src/Resources/public/img/vegan.svg
History View file @6f9d650
1 45 
new file mode 100755
... ... 
@@ -0,0 +1,40 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200">
3 
+  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
4 
+  <defs>
5 
+    <style>
6 
+      .st0 {
7 
+        fill: none;
8 
+      }
9 
+
10 
+      .st1 {
11 
+        fill: #a18152;
12 
+      }
13 
+
14 
+      .st2 {
15 
+        fill: #fff;
16 
+      }
17 
+
18 
+      .st3 {
19 
+        clip-path: url(#clippath);
20 
+      }
21 
+    </style>
22 
+    <clipPath id="clippath">
23 
+      <rect class="st0" x="37.62" y="34.4" width="125.2" height="138.47"/>
24 
+    </clipPath>
25 
+  </defs>
26 
+  <circle id="Ellipse_8" class="st2" cx="100" cy="100" r="100"/>
27 
+  <g id="Gruppe_183">
28 
+    <g class="st3">
29 
+      <g id="Gruppe_124">
30 
+        <path id="Pfad_113" class="st1" d="M96.18,59.84l-2.11-12.91c-.2-1.03-1.19-1.71-2.22-1.51-1.03.2-1.71,1.19-1.51,2.22l3.89,19.08c.21,1.08,1.25,1.79,2.33,1.58.8-.15,1.43-.78,1.58-1.58l3.91-19.11c.2-1.03-.48-2.03-1.51-2.22-1.03-.2-2.03.48-2.22,1.51h0l-2.14,12.94Z"/>
31 
+        <path id="Pfad_114" class="st1" d="M107.99,68.28h6.56c.98,0,1.77-.79,1.77-1.77h0v-.19c0-.98-.79-1.77-1.77-1.77h-4.59v-6.06h3.77c.99,0,1.79-.8,1.79-1.79s-.8-1.79-1.79-1.79h-3.77v-6.06h4.59c.99,0,1.79-.8,1.79-1.79s-.8-1.79-1.79-1.79h-6.56c-.98,0-1.77.79-1.77,1.77h0v19.41c0,.98.79,1.77,1.77,1.77h0"/>
32 
+        <path id="Pfad_115" class="st1" d="M129.95,55.41h-2.59c-.92,0-1.67.75-1.67,1.67s.75,1.67,1.67,1.67h.26v3.96c.05.56-.15,1.12-.56,1.52-.79.65-1.93.65-2.72,0-.4-.4-.61-.96-.56-1.52v-11.84c-.05-.56.15-1.12.56-1.52.79-.65,1.93-.65,2.72,0,.41.41.61.98.56,1.55,0,.76.63,1.37,1.39,1.37.01,0,.02,0,.04,0h.94c.76.02,1.4-.58,1.43-1.34,0,0,0-.02,0-.03.02-.87-.15-1.73-.49-2.52-.31-.69-.75-1.31-1.3-1.82-.54-.46-1.16-.81-1.83-1.05-1.31-.48-2.74-.48-4.05,0-.66.24-1.27.6-1.8,1.06-.57.51-1.02,1.13-1.33,1.82-.34.79-.51,1.64-.49,2.5v11.85c-.02.87.15,1.74.5,2.54.31.67.76,1.27,1.32,1.75.52.48,1.14.85,1.81,1.09,1.31.48,2.74.48,4.05,0,.67-.24,1.29-.61,1.83-1.09.55-.49.99-1.09,1.29-1.76.35-.8.52-1.66.5-2.54v-5.93c0-.79-.64-1.43-1.43-1.43"/>
33 
+        <path id="Pfad_116" class="st1" d="M139.32,46.74l-4.29,19.33c-.2.99.44,1.95,1.43,2.14.99.2,1.95-.44,2.14-1.43l.66-3.36h3.95l.66,3.36c.18.84.92,1.43,1.78,1.43h0c1,0,1.81-.82,1.81-1.82,0-.13-.01-.26-.04-.39l-4.29-19.33c-.18-.83-.91-1.42-1.76-1.43h-.29c-.85,0-1.59.6-1.77,1.43M142.44,59.85h-2.59l1.29-6.67,1.29,6.67Z"/>
34 
+        <path id="Pfad_117" class="st1" d="M159.09,47.2v10.59l-3.98-11.09c-.39-1.08-1.57-1.64-2.65-1.25-.83.3-1.38,1.09-1.37,1.97v19.01c0,1.03.84,1.87,1.87,1.87s1.87-.84,1.87-1.87v-10.59l4.05,11.11c.37,1.06,1.53,1.62,2.59,1.25.83-.29,1.38-1.08,1.36-1.96v-19.03c0-1.03-.84-1.87-1.87-1.87s-1.87.84-1.87,1.87"/>
35 
+        <path id="Pfad_118" class="st1" d="M78.15,34.4c-43.99,37.69-49.54,75-29.29,108.04,6.8,11.08,19.67,16.89,32.48,14.67,4.27,5.75,9.23,10.94,14.78,15.46.35.28.82.37,1.24.24l4.86-1.49c.72-.22,1.12-.98.9-1.69-.1-.31-.3-.58-.58-.76-17-10.75-32.71-35.71-39.55-66.74-2.13-12.44-2.18-25.14-.16-37.6.03-.13.16-.2.29-.17.1.02.17.11.18.22-.3,36.36,12.3,68.89,28.9,86.43.75.78,1.96.88,2.82.24,11.88-8.88,16-24.82,9.9-38.34-3.09-6.59-7.27-12.6-12.38-17.79-29.13-30.27-14.39-60.71-14.39-60.71"/>
36 
+        <path id="Pfad_119" class="st1" d="M139.99,83.64c20,25.77,18.82,46.99,3.9,62.91-5,5.34-12.75,7.09-19.56,4.41-3.01,2.69-6.33,4.99-9.91,6.85-.22.12-.49.12-.71,0l-2.51-1.37c-.37-.2-.51-.66-.31-1.03.09-.17.24-.29.41-.36,13.48-6.74,23.95-18.27,29.38-32.33,2.58-6.62,4.05-13.62,4.35-20.71-.02-.07-.09-.12-.16-.1-.05.01-.09.05-.1.1-2.87,17.44-12.02,33.22-25.71,44.39-.5.35-1.18.27-1.59-.19-5.54-6.24-6.01-15.5-1.12-22.26,2.45-3.28,5.44-6.12,8.84-8.4,11.08-6.53,16.98-19.23,14.81-31.91"/>
37 
+      </g>
38 
+    </g>
39 
+  </g>
40 
+</svg>
0 41 
\ No newline at end of file
src/Resources/public/img/zahlung.svg
History View file @6f9d650
1 42 
new file mode 100755
... ... 
@@ -0,0 +1,37 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200">
3 
+  <!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136)  -->
4 
+  <defs>
5 
+    <style>
6 
+      .st0 {
7 
+        fill: none;
8 
+      }
9 
+
10 
+      .st1 {
11 
+        fill: #a18152;
12 
+      }
13 
+
14 
+      .st2 {
15 
+        fill: #fff;
16 
+      }
17 
+
18 
+      .st3 {
19 
+        clip-path: url(#clippath);
20 
+      }
21 
+    </style>
22 
+    <clipPath id="clippath">
23 
+      <rect class="st0" x="37.39" y="45.28" width="121.99" height="122.28"/>
24 
+    </clipPath>
25 
+  </defs>
26 
+  <g id="Gruppe_186">
27 
+    <circle id="Ellipse_7" class="st2" cx="100" cy="100" r="100"/>
28 
+    <g id="Gruppe_182">
29 
+      <g class="st3">
30 
+        <g id="Gruppe_131">
31 
+          <path id="Pfad_130" class="st1" d="M49.19,133.44c-2.76,0-5-2.24-5-5v-56.64h110.59v-20.86c0-3.12-2.52-5.66-5.64-5.66h0s-106.09,0-106.09,0c-3.13,0-5.66,2.54-5.66,5.66v83.62c0,3.12,2.53,5.65,5.65,5.65,0,0,0,0,0,0h34.02c3.08,0,2.97-6.74,0-6.74l-27.88-.03ZM134.54,54.16c0-1.04.84-1.89,1.89-1.89h9.69c1.04,0,1.89.85,1.89,1.89v9.69c0,1.04-.85,1.87-1.89,1.88h-9.69c-1.03,0-1.87-.84-1.88-1.88v-9.69ZM114.94,54.16c0-1.04.84-1.89,1.88-1.89h9.69c1.04,0,1.89.85,1.89,1.89v9.69c0,1.04-.85,1.87-1.89,1.88h-9.69c-1.04,0-1.87-.84-1.88-1.88v-9.69Z"/>
32 
+          <path id="Pfad_131" class="st1" d="M159.38,95.73l-2.93-.93c-9.88-3.42-19.57-7.37-29.02-11.84l-1.8-.8-1.8.85c-9.45,4.47-19.14,8.42-29.01,11.84l-2.94.93v22.08c0,18.9,24.66,49.73,33.75,49.73,6.86,0,18.02-14.64,20.2-17.58,7.51-9.19,12.22-20.35,13.57-32.14l-.02-22.14ZM100.29,117.81v-15.93c9.73-3.36,21-8.46,25.34-10.46v67.57c-5.31-2.86-25.34-25.65-25.34-41.16"/>
33 
+        </g>
34 
+      </g>
35 
+    </g>
36 
+  </g>
37 
+</svg>
0 38 
\ No newline at end of file
src/Resources/views/storefront/layout/header/benefits-bar.html.twig
History View file @6f9d650
... ... 
@@ -1,8 +1,8 @@
1 1 
 <div id="benefits-bar">
2 2 
     <ul class="container">
3 
-        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/zufriedenheit.png', 'asset')}}" width="32" height="32">Zufriedenheits-Garantie</li>
4 
-        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/erzeuger.png', 'asset')}}" width="32" height="32">Alle Weine direkt vom Erzeuger</li>
5 
-        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/sicher.png', 'asset')}}" width="32" height="32">Sichere Bezahlung, schnelle Lieferung</li>
6 
-        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/vegan.png', 'asset')}}" width="32" height="32">Vegane Weine</li>
3 
+        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/daumen.svg', 'asset')}}" width="32" height="32">Zufriedenheits-Garantie</li>
4 
+        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/erzeuger.svg', 'asset')}}" width="32" height="32">Alle Weine direkt vom Erzeuger</li>
5 
+        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/zahlung.svg', 'asset')}}" width="32" height="32">Sichere Bezahlung, schnelle Lieferung</li>
6 
+        <li><img src="{{  asset('/bundles/weinmanufakturtheme/img/vegan.svg', 'asset')}}" width="32" height="32">Vegane Weine</li>
7 7 
     </ul>
8 8 
 </div>