Adjust various component styling (to support usage of au-icon instead…

… of the auk font-icons) + version bump
kanselarij-vlaanderen · May 28, 2024 · b0889ae · b0889ae
1 parent a75c85f
commit b0889ae
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 34 deletions.
diff --git a/_auk-accordion-panel.scss b/_auk-accordion-panel.scss
@@ -9,7 +9,7 @@
   overflow: hidden;
 
   .auk-accordion-panel__item {
-    .auk-toolbar-complex__left .auk-icon:first-child {
+    .auk-toolbar-complex__left .au-c-icon:first-child {
       transform: rotate(90deg);
       transition: .150s ease-in-out;
     }
@@ -25,7 +25,7 @@
         display: none;
       }
 
-      .auk-toolbar-complex__left .auk-icon:first-child {
+      .auk-toolbar-complex__left .au-c-icon:first-child {
         transform: rotate(0deg);
       }
     }

diff --git a/_auk-accordion.scss b/_auk-accordion.scss
@@ -51,7 +51,7 @@
       color: $auk-gray-700;
       opacity: .3;
 
-      .auk-icon {
+      .au-c-icon {
         color: $auk-gray-600;
       }
     }

diff --git a/_auk-avatar.scss b/_auk-avatar.scss
@@ -18,10 +18,9 @@
 .auk-avatar--small {
   width: 2rem;
   height: 2rem;
-  .auk-icon {
-    width: 1.2rem;
-    height: 1.2rem;
-    font-size: 1.2rem;
+
+  .au-c-icon {
+    --au-icon-size: 1.2rem;
   }
 }
 

diff --git a/_auk-button-link.scss b/_auk-button-link.scss
@@ -77,8 +77,8 @@
 }
 
 .auk-button-link {
-  .auk-icon + .auk-button__label,
-  .auk-button__label + .auk-icon {
+  .au-c-icon + .auk-button__label,
+  .auk-button__label + .au-c-icon {
     margin-left: .5rem;
   }
 }
@@ -87,14 +87,14 @@
   padding: .8rem;
 }
 
-.auk-button-link .auk-icon {
+.auk-button-link .au-c-icon {
   width: 1.8rem;
   height: 1.8rem;
   position: relative;
   line-height: 0;
 }
 
-.auk-button-link--small .auk-icon {
+.auk-button-link--small .au-c-icon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/_auk-button.scss b/_auk-button.scss
@@ -41,8 +41,8 @@ a.auk-button {
 }
 
 .auk-button {
-  .auk-icon + .auk-button__label,
-  .auk-button__label + .auk-icon {
+  .au-c-icon + .auk-button__label,
+  .auk-button__label + .au-c-icon {
     margin-left: 0.6rem;
   }
 }
@@ -119,7 +119,7 @@ a.auk-button {
     color: #fff;
     background-color: $auk-gray-300;
 
-    .auk-icon {
+    .au-c-icon {
       color: #fff;
     }
   }
@@ -132,7 +132,7 @@ a.auk-button {
     color: $auk-gray-700;
     box-shadow: inset 0 0 0 0.2rem $auk-gray-600;
     opacity: .3;
-    .auk-icon {
+    .au-c-icon {
       color: $auk-gray-600;
     }
   }
@@ -145,7 +145,7 @@ a.auk-button {
     color: $auk-gray-700;
     box-shadow: inset 0 0 0 0.1rem $auk-gray-300;
     opacity: .3;
-    .auk-icon {
+    .au-c-icon {
       color: $auk-gray-600;
     }
   }
@@ -193,7 +193,7 @@ a.auk-button {
     color: #fff;
     background-color: $auk-red-100;
 
-    .auk-icon {
+    .au-c-icon {
       color: #fff;
     }
   }
@@ -252,7 +252,7 @@ a.auk-button {
     color: $auk-gray-700;
     box-shadow: inset 0 0 0 0.1rem $auk-gray-300;
     opacity: .3;
-    .auk-icon {
+    .au-c-icon {
       color: $auk-gray-600;
     }
   }

diff --git a/_auk-form-help-text.scss b/_auk-form-help-text.scss
@@ -10,31 +10,31 @@
   align-items: center;
   font-size: 1.3rem;
 
-  .auk-icon {
+  .au-c-icon {
     margin-right: 0.5rem;
   }
 }
 
 .auk-form-help-text--danger {
   color: $auk-red-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-red-500;
   }
 }
 
 .auk-form-help-text--success {
   color: $auk-green-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-green-500;
   }
 }
 
 .auk-form-help-text--warning {
   color: $auk-yellow-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-yellow-500;
   }
 }

diff --git a/_auk-status-pill.scss b/_auk-status-pill.scss
@@ -41,14 +41,14 @@
     border-left-style: solid;
   }
 
-  .auk-icon {
-    width: 1.8rem;
-    height: 1.8rem;
+  .au-c-icon {
+    --au-icon-size: 1.8rem;
   }
+}
 
-  .auk-icon--small {
-    width: 1.5rem;
-    height: 1.5rem;
+.auk-status-pill--small {
+  .au-c-icon {
+    --au-icon-size: 1.5rem;
   }
 }
 
@@ -64,7 +64,7 @@
 
   color: $auk-blue-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-blue-700;
   }
 
@@ -78,7 +78,7 @@
 
   color: $auk-green-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-green-700;
   }
 
@@ -92,7 +92,7 @@
 
   color: $auk-red-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-red-700;
   }
 
@@ -106,7 +106,7 @@
 
   color: $auk-gray-700;
 
-  .auk-icon {
+  .au-c-icon {
     color: $auk-gray-700;
   }
 

diff --git a/_auk-u-print.scss b/_auk-u-print.scss
@@ -3,7 +3,7 @@
   ========================================================================== */
 
 @media print {
-  .auk-icon,
+  .au-c-icon,
   .auk-u-text-muted {
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kanselarij-vlaanderen/au-kaleidos-css",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "AppUniversum inspired Kaleidos CSS as a separate package.",
   "main": "auk-standalone.css",
   "scripts": {