From 5bb6580324cbeee6ee517001c8b79e6e006bf087 Mon Sep 17 00:00:00 2001
From: tischsoic <symfiz@gmail.com>
Date: Mon, 20 Feb 2023 12:11:55 +0100
Subject: [PATCH 1/2] IBX-5131: Add status badge

---
 src/bundle/Resources/public/scss/_badges.scss | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/bundle/Resources/public/scss/_badges.scss b/src/bundle/Resources/public/scss/_badges.scss
index 3069319668..2dbe4977ce 100644
--- a/src/bundle/Resources/public/scss/_badges.scss
+++ b/src/bundle/Resources/public/scss/_badges.scss
@@ -9,57 +9,107 @@
     background-color: $ibexa-color-light-500;
     white-space: nowrap;
 
+    &--status {
+        position: relative;
+        padding-left: 16px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        border-width: 1px;
+        border-style: solid;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 8px;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
     &--primary {
         color: $ibexa-color-primary;
         background-color: $ibexa-color-primary-200;
+        border-color: $ibexa-color-primary;
 
         .ibexa-icon {
             fill: $ibexa-color-primary;
         }
+
+        &::before {
+            background-color: $ibexa-color-primary;
+        }
     }
 
     &--secondary {
         color: $ibexa-color-dark;
         background-color: $ibexa-color-light-500;
+        border-color: $ibexa-color-dark;
 
         .ibexa-icon {
             fill: $ibexa-color-dark;
         }
+
+        &::before {
+            background-color: $ibexa-color-dark;
+        }
     }
 
     &--info {
         color: $ibexa-color-info;
         background-color: $ibexa-color-info-200;
+        border-color: $ibexa-color-info;
 
         .ibexa-icon {
             fill: $ibexa-color-info;
         }
+
+        &::before {
+            background-color: $ibexa-color-info;
+        }
     }
 
     &--danger {
         color: $ibexa-color-danger;
         background-color: $ibexa-color-danger-200;
+        border-color: $ibexa-color-danger;
 
         .ibexa-icon {
             fill: $ibexa-color-danger;
         }
+
+        &::before {
+            background-color: $ibexa-color-danger;
+        }
     }
 
     &--success {
         color: $ibexa-color-success;
         background-color: $ibexa-color-success-200;
+        border-color: $ibexa-color-success;
 
         .ibexa-icon {
             fill: $ibexa-color-success;
         }
+
+        &::before {
+            background-color: $ibexa-color-success;
+        }
     }
 
     &--complementary {
         color: $ibexa-color-complementary;
         background-color: $ibexa-color-complementary-200;
+        border-color: $ibexa-color-complementary;
 
         .ibexa-icon {
             fill: $ibexa-color-complementary;
         }
+
+        &::before {
+            background-color: $ibexa-color-complementary;
+        }
     }
 }

From 13fd178ea1338080032b1f1791162efa6553c7eb Mon Sep 17 00:00:00 2001
From: tischsoic <symfiz@gmail.com>
Date: Mon, 20 Feb 2023 22:39:30 +0100
Subject: [PATCH 2/2] use mixin

---
 src/bundle/Resources/public/scss/_badges.scss | 90 +++++--------------
 1 file changed, 22 insertions(+), 68 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_badges.scss b/src/bundle/Resources/public/scss/_badges.scss
index 2dbe4977ce..5583dabefb 100644
--- a/src/bundle/Resources/public/scss/_badges.scss
+++ b/src/bundle/Resources/public/scss/_badges.scss
@@ -11,105 +11,59 @@
 
     &--status {
         position: relative;
-        padding-left: 16px;
-        padding-top: 3px;
-        padding-bottom: 3px;
-        border-width: 1px;
+        padding-left: calculateRem(16px);
+        padding-top: calculateRem(3px);
+        padding-bottom: calculateRem(3px);
+        border-width: calculateRem(1px);
         border-style: solid;
 
         &::before {
             content: '';
             position: absolute;
-            left: 8px;
-            width: 4px;
-            height: 4px;
+            left: calculateRem(8px);
+            width: calculateRem(4px);
+            height: calculateRem(4px);
             border-radius: 50%;
             top: 50%;
             transform: translateY(-50%);
         }
     }
 
-    &--primary {
-        color: $ibexa-color-primary;
-        background-color: $ibexa-color-primary-200;
-        border-color: $ibexa-color-primary;
+    @mixin version-properties($color, $background-color) {
+        color: $color;
+        background-color: $background-color;
+        border-color: $color;
 
         .ibexa-icon {
-            fill: $ibexa-color-primary;
+            fill: $color;
         }
 
         &::before {
-            background-color: $ibexa-color-primary;
+            background-color: $color;
         }
     }
 
-    &--secondary {
-        color: $ibexa-color-dark;
-        background-color: $ibexa-color-light-500;
-        border-color: $ibexa-color-dark;
-
-        .ibexa-icon {
-            fill: $ibexa-color-dark;
-        }
+    &--primary {
+        @include version-properties($ibexa-color-primary, $ibexa-color-primary-200);
+    }
 
-        &::before {
-            background-color: $ibexa-color-dark;
-        }
+    &--secondary {
+        @include version-properties($ibexa-color-dark, $ibexa-color-light-500);
     }
 
     &--info {
-        color: $ibexa-color-info;
-        background-color: $ibexa-color-info-200;
-        border-color: $ibexa-color-info;
-
-        .ibexa-icon {
-            fill: $ibexa-color-info;
-        }
-
-        &::before {
-            background-color: $ibexa-color-info;
-        }
+        @include version-properties($ibexa-color-info, $ibexa-color-info-200);
     }
 
     &--danger {
-        color: $ibexa-color-danger;
-        background-color: $ibexa-color-danger-200;
-        border-color: $ibexa-color-danger;
-
-        .ibexa-icon {
-            fill: $ibexa-color-danger;
-        }
-
-        &::before {
-            background-color: $ibexa-color-danger;
-        }
+        @include version-properties($ibexa-color-danger, $ibexa-color-danger-200);
     }
 
     &--success {
-        color: $ibexa-color-success;
-        background-color: $ibexa-color-success-200;
-        border-color: $ibexa-color-success;
-
-        .ibexa-icon {
-            fill: $ibexa-color-success;
-        }
-
-        &::before {
-            background-color: $ibexa-color-success;
-        }
+        @include version-properties($ibexa-color-success, $ibexa-color-success-200);
     }
 
     &--complementary {
-        color: $ibexa-color-complementary;
-        background-color: $ibexa-color-complementary-200;
-        border-color: $ibexa-color-complementary;
-
-        .ibexa-icon {
-            fill: $ibexa-color-complementary;
-        }
-
-        &::before {
-            background-color: $ibexa-color-complementary;
-        }
+        @include version-properties($ibexa-color-complementary, $ibexa-color-complementary-200);
     }
 }