@posiwise/core-styles 1.0.11 → 1.0.12

package/scss/custom-bootstrap/_badge.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 .badge {
     font-size: 85%;
     font-weight: 500;
@@ -11,234 +12,234 @@
 
 // warning badges
 .bg-warning-1 {
-    background-color: map-get($warning, lighten-1);
+    background-color: map.get($warning, lighten-1);
 }
 
 .bg-warning-2 {
-    background-color: map-get($warning, darken-1);
+    background-color: map.get($warning, darken-1);
 }
 
 .bg-warning-3 {
-    background-color: map-get($warning, lighten-4);
+    background-color: map.get($warning, lighten-4);
 }
 
 .bg-warning-4 {
-    background-color: map-get($warning, darken-4);
+    background-color: map.get($warning, darken-4);
 }
 
 .bg-warning-5 {
-    background-color: map-get($warning, lighten-3);
+    background-color: map.get($warning, lighten-3);
 }
 
 .bg-warning-6 {
-    background-color: map-get($warning, darken-3);
+    background-color: map.get($warning, darken-3);
 }
 
 .bg-warning-7 {
-    background-color: map-get($warning, lighten-2);
+    background-color: map.get($warning, lighten-2);
 }
 
 .bg-warning-8 {
-    background-color: map-get($warning, darken-2);
+    background-color: map.get($warning, darken-2);
 }
 
 .bg-warning-9 {
-    background-color: map-get($warning, accent-4);
+    background-color: map.get($warning, accent-4);
 }
 
 .bg-warning-10 {
-    background-color: map-get($red-color, lighten-4);
+    background-color: map.get($red-color, lighten-4);
 }
 
 .bg-warning-11 {
-    background-color: map-get($red-color, accent-1);
+    background-color: map.get($red-color, accent-1);
 }
 
 .bg-warning-12 {
-    background-color: map-get($pink, lighten-1);
+    background-color: map.get($pink, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-warning-13 {
-    background-color: map-get($pink, darken-1);
+    background-color: map.get($pink, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-warning-14 {
-    background-color: map-get($pink, lighten-4);
+    background-color: map.get($pink, lighten-4);
     color: rgb(255 255 255);
 }
 
 .bg-warning-15 {
-    background-color: map-get($pink, accent-1);
+    background-color: map.get($pink, accent-1);
     color: rgb(255 255 255);
 }
 
 .bg-warning-16 {
-    background-color: map-get($pink, accent-4);
+    background-color: map.get($pink, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-warning-17 {
-    background-color: map-get($pink, lighten-2);
+    background-color: map.get($pink, lighten-2);
     color: rgb(255 255 255);
 }
 
 .bg-warning-18 {
-    background-color: map-get($pink, darken-3);
+    background-color: map.get($pink, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-warning-19 {
-    background-color: map-get($pink, darken-4);
+    background-color: map.get($pink, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-warning-20 {
-    background-color: map-get($default, lighten-1);
+    background-color: map.get($default, lighten-1);
 }
 
 .bg-warning-21 {
-    background-color: map-get($default, darken-1);
+    background-color: map.get($default, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-warning-22 {
-    background-color: map-get($default, lighten-4);
+    background-color: map.get($default, lighten-4);
 }
 
 .bg-warning-23 {
-    background-color: map-get($default, darken-4);
+    background-color: map.get($default, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-default-24 {
-    background-color: map-get($default, darken-3);
+    background-color: map.get($default, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-warning-25 {
-    background-color: map-get($default, lighten-2);
+    background-color: map.get($default, lighten-2);
 }
 
 .bg-default-26 {
-    background-color: map-get($default, accent-4);
+    background-color: map.get($default, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-warning-27 {
-    background-color: map-get($default, accent-1);
+    background-color: map.get($default, accent-1);
 }
 
 // default badges
 
 .bg-default-1 {
-    background-color: map-get($default, lighten-1);
+    background-color: map.get($default, lighten-1);
 }
 
 .bg-default-2 {
-    background-color: map-get($default, darken-1);
+    background-color: map.get($default, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-default-3 {
-    background-color: map-get($default, darken-3);
+    background-color: map.get($default, darken-3);
 }
 
 .bg-default-4 {
-    background-color: map-get($default, darken-4);
+    background-color: map.get($default, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-default-5 {
-    background-color: map-get($default, darken-3);
+    background-color: map.get($default, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-default-6 {
-    background-color: map-get($default, accent-4);
+    background-color: map.get($default, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-default-7 {
-    background-color: map-get($default, darken-1);
+    background-color: map.get($default, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-default-8 {
-    background-color: map-get($pink, lighten-1);
+    background-color: map.get($pink, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-default-9 {
-    background-color: map-get($pink, darken-1);
+    background-color: map.get($pink, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-default-10 {
-    background-color: map-get($pink, darken-3);
+    background-color: map.get($pink, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-default-11 {
-    background-color: map-get($pink, accent-1);
+    background-color: map.get($pink, accent-1);
     color: rgb(255 255 255);
 }
 
 .bg-default-12 {
-    background-color: map-get($pink, accent-4);
+    background-color: map.get($pink, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-default-13 {
-    background-color: map-get($pink, lighten-2);
+    background-color: map.get($pink, lighten-2);
     color: rgb(255 255 255);
 }
 
 .bg-default-14 {
-    background-color: map-get($pink, darken-3);
+    background-color: map.get($pink, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-default-15 {
-    background-color: map-get($pink, darken-4);
+    background-color: map.get($pink, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-default-16 {
-    background-color: map-get($warning, lighten-1);
+    background-color: map.get($warning, lighten-1);
 }
 
 .bg-default-17 {
-    background-color: map-get($warning, darken-1);
+    background-color: map.get($warning, darken-1);
 }
 
 .bg-default-18 {
-    background-color: map-get($warning, darken-2);
+    background-color: map.get($warning, darken-2);
 }
 
 .bg-default-19 {
-    background-color: map-get($warning, darken-4);
+    background-color: map.get($warning, darken-4);
 }
 
 .bg-default-20 {
-    background-color: map-get($warning, lighten-3);
+    background-color: map.get($warning, lighten-3);
 }
 
 .bg-default-21 {
-    background-color: map-get($warning, darken-3);
+    background-color: map.get($warning, darken-3);
 }
 
 .bg-default-22 {
-    background-color: map-get($warning, lighten-2);
+    background-color: map.get($warning, lighten-2);
 }
 
 .bg-default-23 {
-    background-color: map-get($warning, darken-2);
+    background-color: map.get($warning, darken-2);
 }
 
 .bg-default-24 {
-    background-color: map-get($warning, darken-1);
+    background-color: map.get($warning, darken-1);
 }
 
 // blue-grey badges
@@ -248,112 +249,112 @@
 }
 
 .bg-blue-grey-1 {
-    background-color: map-get($blue-grey, lighten-1);
+    background-color: map.get($blue-grey, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-2 {
-    background-color: map-get($blue-grey, darken-1);
+    background-color: map.get($blue-grey, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-3 {
-    background-color: map-get($blue-grey, darken-3);
+    background-color: map.get($blue-grey, darken-3);
 }
 
 .bg-blue-grey-4 {
-    background-color: map-get($blue-grey, darken-4);
+    background-color: map.get($blue-grey, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-5 {
-    background-color: map-get($blue-grey, darken-3);
+    background-color: map.get($blue-grey, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-6 {
-    background-color: map-get($blue-grey, accent-4);
+    background-color: map.get($blue-grey, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-7 {
-    background-color: map-get($blue-grey, accent-2);
+    background-color: map.get($blue-grey, accent-2);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-8 {
-    background-color: map-get($blue-grey, accent-4);
+    background-color: map.get($blue-grey, accent-4);
 }
 
 .bg-blue-grey-9 {
-    background-color: map-get($blue-grey, darken-1);
+    background-color: map.get($blue-grey, darken-1);
 }
 
 .bg-blue-grey-10 {
-    background-color: map-get($blue-grey, darken-2);
+    background-color: map.get($blue-grey, darken-2);
 }
 
 .bg-blue-grey-11 {
-    background-color: map-get($blue-grey, darken-4);
+    background-color: map.get($blue-grey, darken-4);
 }
 
 .bg-blue-grey-12 {
-    background-color: map-get($blue-grey, lighten-3);
+    background-color: map.get($blue-grey, lighten-3);
 }
 
 .bg-blue-grey-13 {
-    background-color: map-get($blue-grey, darken-3);
+    background-color: map.get($blue-grey, darken-3);
 }
 
 .bg-blue-grey-14 {
-    background-color: map-get($blue-grey, lighten-2);
+    background-color: map.get($blue-grey, lighten-2);
 }
 
 .bg-blue-grey-15 {
-    background-color: map-get($blue-grey, darken-2);
+    background-color: map.get($blue-grey, darken-2);
 }
 
 .bg-blue-grey-16 {
-    background-color: map-get($blue-grey, accent-4);
+    background-color: map.get($blue-grey, accent-4);
 }
 
 .bg-blue-grey-17 {
-    background-color: map-get($blue-grey, lighten-1);
+    background-color: map.get($blue-grey, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-18 {
-    background-color: map-get($blue-grey, darken-1);
+    background-color: map.get($blue-grey, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-19 {
-    background-color: map-get($blue-grey, lighten-4);
+    background-color: map.get($blue-grey, lighten-4);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-20 {
-    background-color: map-get($blue-grey, accent-1);
+    background-color: map.get($blue-grey, accent-1);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-21 {
-    background-color: map-get($blue-grey, accent-4);
+    background-color: map.get($blue-grey, accent-4);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-22 {
-    background-color: map-get($blue-grey, lighten-2);
+    background-color: map.get($blue-grey, lighten-2);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-23 {
-    background-color: map-get($blue-grey, darken-3);
+    background-color: map.get($blue-grey, darken-3);
     color: rgb(255 255 255);
 }
 
 .bg-blue-grey-24 {
-    background-color: map-get($blue-grey, darken-4);
+    background-color: map.get($blue-grey, darken-4);
     color: rgb(255 255 255);
 }
 
@@ -364,22 +365,22 @@
 }
 
 .bg-pink-1 {
-    background-color: map-get($pink, lighten-1);
+    background-color: map.get($pink, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-pink-2 {
-    background-color: map-get($pink, darken-1);
+    background-color: map.get($pink, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-pink-3 {
-    background-color: map-get($pink, lighten-4);
+    background-color: map.get($pink, lighten-4);
     color: rgb(255 255 255);
 }
 
 .bg-pink-4 {
-    background-color: map-get($pink, darken-4);
+    background-color: map.get($pink, darken-4);
     color: rgb(255 255 255);
 }
 
@@ -390,17 +391,17 @@
 }
 
 .bg-purple-1 {
-    background-color: map-get($purple, lighten-1);
+    background-color: map.get($purple, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-purple-2 {
-    background-color: map-get($purple, darken-1);
+    background-color: map.get($purple, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-purple-3 {
-    background-color: map-get($purple, lighten-4);
+    background-color: map.get($purple, lighten-4);
     color: rgb(255 255 255);
 }
 
@@ -415,64 +416,64 @@
 }
 
 .bg-cyan-1 {
-    background-color: map-get($cyan, lighten-1);
+    background-color: map.get($cyan, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-1 {
-    background-color: map-get($cyan, lighten-1);
+    background-color: map.get($cyan, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-2 {
-    background-color: map-get($cyan, darken-1);
+    background-color: map.get($cyan, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-3 {
-    background-color: map-get($cyan, lighten-4);
+    background-color: map.get($cyan, lighten-4);
 }
 
 .bg-cyan-4 {
-    background-color: map-get($cyan, darken-4);
+    background-color: map.get($cyan, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-5 {
-    background-color: map-get($cyan, lighten-3);
+    background-color: map.get($cyan, lighten-3);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-6 {
-    background-color: map-get($cyan, lighten-1);
+    background-color: map.get($cyan, lighten-1);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-7 {
-    background-color: map-get($cyan, darken-1);
+    background-color: map.get($cyan, darken-1);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-8 {
-    background-color: map-get($cyan, lighten-2);
+    background-color: map.get($cyan, lighten-2);
 }
 
 .bg-cyan-9 {
-    background-color: map-get($cyan, darken-4);
+    background-color: map.get($cyan, darken-4);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-10 {
-    background-color: map-get($cyan, lighten-3);
+    background-color: map.get($cyan, lighten-3);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-default {
-    background-color: map-get($cyan, lighten-3);
+    background-color: map.get($cyan, lighten-3);
     color: rgb(255 255 255);
 }
 
 .bg-cyan-default-change {
-    background-color: map-get($cyan, darken-1);
+    background-color: map.get($cyan, darken-1);
     color: rgb(255 255 255);
 }

package/scss/custom-bootstrap/_bootstrap_variables.scss

@@ -1,6 +1,8 @@
+@use 'sass:map';
 // What you put here will override the default bootstrap variables
 
 // WE ARE NOT USING THE THEME-COLORS AT THE MOMENT
+
 $theme-colors: (
     'primary': rgb(0 123 255),
     'secondary': rgb(108 117 125),
@@ -15,7 +17,7 @@ $theme-colors: (
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$sizes: map-merge(
+$sizes: map.merge(
     (
         25: 25%,
         50: 50%,

package/scss/custom-bootstrap/_card.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // https://www.google.com/design/spec/components/cards.html#cards-content-blocks
 .card {
     @extend %std-font;
@@ -63,7 +64,9 @@
     }
 
     .card {
-        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 8%);
+        box-shadow:
+            0 4px 8px 0 rgb(0 0 0 / 12%),
+            0 2px 4px 0 rgb(0 0 0 / 8%);
     }
 
     .card-img {
@@ -84,9 +87,11 @@
     }
 
     .btn-floating {
-        background-color: map-get($primary, base);
+        background-color: map.get($primary, base);
         border-radius: 50%;
-        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%),
+        box-shadow:
+            0 2px 2px 0 rgb(0 0 0 / 14%),
+            0 1px 5px 0 rgb(0 0 0 / 12%),
             0 3px 1px -2px rgb(0 0 0 / 20%);
         color: rgb(255 255 255);
         cursor: pointer;
@@ -311,9 +316,13 @@
 }
 
 .shadow-md {
-    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 8%);
+    box-shadow:
+        0 4px 8px 0 rgb(0 0 0 / 12%),
+        0 2px 4px 0 rgb(0 0 0 / 8%);
 }
 
 .shadow-lg {
-    box-shadow: 0 15px 30px 0 rgb(0 0 0 / 11%), 0 5px 15px 0 rgb(0 0 0 / 8%);
+    box-shadow:
+        0 15px 30px 0 rgb(0 0 0 / 11%),
+        0 5px 15px 0 rgb(0 0 0 / 8%);
 }