OEL-2799: Improved demo.

openeuropa · Jun 11, 2024 · e7531fc · e7531fc · github-actions · Jun 12, 2024
1 parent 86de5fb
commit e7531fc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/src/compositions/bcl-icons-list/icons-manager.html.twig b/src/compositions/bcl-icons-list/icons-manager.html.twig
@@ -53,17 +53,41 @@
     <div>
     <div class="row">
       <h3 class="mt-4"> Icon Sizes </h3>
-      <div class="px-3 my-5 col">
-        <span class="icon mx-auto" data-icon="arrow-clockwise"></span>
-        <p class="text-center text-nowrap">Default</p>
-      </div>
-      <div class="px-3 my-5 col">
-        <span class="icon mx-auto icon-lg" data-icon="arrow-clockwise"></span>
-        <p class="text-center text-nowrap">LG - <b>icon-lg</b></p>
+      <div class="row">
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--2xs" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">2XS - <b>icon--2xs</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--xs" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">XS - <b>icon--xs</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--s" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">S - <b>icon--s</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--m" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">M - <b>icon--m</b></p>
+        </div>
       </div>
-      <div class="px-3 my-5 col">
-        <span class="icon mx-auto icon-xl" data-icon="arrow-clockwise"></span>
-        <p class="text-center text-nowrap">XL - <b>icon-xl</b></p>
+      <div class="row">
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--l" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">L - <b>icon--l</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--xl" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">XL - <b>icon--xl</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--2xl" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">2XL - <b>icon--2xl</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--fluid" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">Fluid - <b>icon--fluid</b></p>
+        </div>
       </div>
     <div>
     <div class="row">

diff --git a/src/themes/default/src/scss/_icon_manager.scss b/src/themes/default/src/scss/_icon_manager.scss
@@ -1,6 +1,6 @@
 .icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
   display: block;
   background-color: var(--bs-dark);
   -webkit-mask-size: contain;
@@ -14,12 +14,3 @@
     background-color: $value;
   }
 }
-
-.icon-lg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.icon-xl {
-  width: 2rem;
-  height: 2rem;
-}
diff --git a/src/themes/default/src/scss/oe-bcl-default.scss b/src/themes/default/src/scss/oe-bcl-default.scss
@@ -67,6 +67,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";
 @import "@openeuropa/bcl-theme-default/src/scss/tabs";
+@import "@openeuropa/bcl-theme-default/src/scss/icon_manager";
 @import "@openeuropa/bcl-theme-default/src/scss/icon";
 @import "@openeuropa/bcl-theme-default/src/scss/search-form";
 @import "@openeuropa/bcl-theme-default/src/scss/input";
@@ -81,4 +82,3 @@
 @import "@openeuropa/bcl-theme-default/src/scss/carousel";
 @import "@openeuropa/bcl-theme-default/src/scss/gallery";
 @import "@openeuropa/bcl-theme-default/src/scss/pagination";
-@import "@openeuropa/bcl-theme-default/src/scss/icon_manager";