@iamproperty/components 5.5.1-beta-1 → 5.5.1-beta-2

package/assets/sass/_elements.scss

@@ -15,7 +15,7 @@
   
 @import "elements/forms.scss";
 
-@import "elements/badge.scss";
+@import "elements/badge-tag.scss";
 @import "elements/details.scss";
 
 @import "elements/progress.scss";

package/assets/sass/_functions/variables.scss

@@ -225,6 +225,86 @@ $dark-mode-functional-colors: (
   "btn-action-hover-bg": var(--colour-canvas-2)
 );
 
+$wider-colours: (
+
+  "1": "#EEEEEE",
+  "2": "#EBD7F6",
+  "3": "#BEE8F8",
+  "4": "#A6DCC7",
+  "5": "#FAD0DA",
+  "6": "#AFCCF2",
+  "7": "#FFD2B4",
+  "8": "#CDF0F2",
+  "9": "#FFABC2",
+  "10": "#DCEAF2",
+  "11": "#EEBCB3",
+  "12": "#F0BDFF",
+  "13": "#FFF8CF",
+  "14": "#92E3DF",
+  "15": "#FEEAE8",
+  "16": "#8BC3A6",
+  "17": "#FEF0A6",
+  "18": "#FFBDA0",
+  "19": "#CBEFE1",
+  "20": "#FFDD90",
+  "21": "#97DBF2",
+  "22": "#FFAF91",
+  "23": "#C2DCD9"
+);
+
+$wider-colours-hover: (
+
+  "1": "#E0E0E0",
+  "2": "#DFCCE8",
+  "3": "#B6DEED",
+  "4": "#98CBB7",
+  "5": "#EFC8D1",
+  "6": "#A6C1E5",
+  "7": "#F4CAAF",
+  "8": "#C2E3E5",
+  "9": "#F5A2B9",
+  "10": "#CFDCE3",
+  "11": "#E3B2A9",
+  "12": "#E3B2F2",
+  "13": "#F0E9C2",
+  "14": "#8AD9D6",
+  "15": "#F8E1DF",
+  "16": "#81B59A",
+  "17": "#F2E5A0",
+  "18": "#F2B69D",
+  "19": "#C2E3D7",
+  "20": "#F2D28A",
+  "21": "#8FD0E6",
+  "22": "#F0A68B",
+  "23": "#B9D1CE"
+);
+
+$wider-colours-active: (
+
+  "1": "#D6D6D6",
+  "2": "#D4C2DD",
+  "3": "#ABD1DF",
+  "4": "#95C6B3",
+  "5": "#E1BBC4",
+  "6": "#9EB8DA",
+  "7": "#E6BDA2",
+  "8": "#B9D8DA",
+  "9": "#E69AAF",
+  "10": "#C6D3DA",
+  "11": "#D6A9A1",
+  "12": "#D8AAE6",
+  "13": "#E6DFBA",
+  "14": "#83CCC9",
+  "15": "#F4E0DE",
+  "16": "#7DB095",
+  "17": "#FEF0A6",
+  "18": "#E6AA90",
+  "19": "#CBEFE1",
+  "20": "#E6C782",
+  "21": "#88C5DA",
+  "22": "#E69E83",
+  "23": "#AFC6C3"
+);
 
 // Kill bootstrap colors
 $colors: ();

package/assets/sass/_utilities.scss

@@ -14,6 +14,7 @@
 @import "helpers/max-height.scss";
 @import "helpers/dynamic.scss";
 @import "helpers/line-clamp.scss";
+@import "helpers/wider-colours.scss";
 
 // Utilities
 @import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/components/actionbar.scss

@@ -202,6 +202,22 @@
   }
 }
 
+:host([data-large-safe-area]) .safe-area {
+  
+  width: rem(260);
+
+  @include container-up(sm) {
+
+    width: rem(620);
+  }
+
+  @include container-up(md) {
+
+    width: rem(1048);
+  }
+
+}
+
 :host([data-switchviews]) .safe-area {
   
   width: rem(144);

package/assets/sass/components/applied-filters.scss

@@ -8,62 +8,20 @@
     font-size: rem(18);
     line-height: rem(22);
     color: var(--colour-header);
-    margin-bottom: rem(16);
     display: block;
   }
-
-  &:not(:empty) {
-    margin-bottom: 1rem;
-  }
 }
 
-::slotted(*:last-child) {
-  margin-bottom: 0;
-}
 
-.applied-filters .filter {
-  
-  border: 1px solid var(--colour-border);
-  padding: 1rem rem(24) 1rem rem(24);
-  background: transparent;
-  margin-right: 0.5rem!important;
-  margin-bottom: 0.5rem!important;
-  line-height: rem(24);
-  white-space: nowrap;
+:host(.applied-filters--hide-title) {
 
-  &:after {
-    content: "";
-    display: inline-block;
-    height: rem(20);
-    width: rem(20);
-    padding:0;
-    margin-left: rem(24);
-    margin-bottom: -0.25rem;
-    border: none;
-    z-index: var(--index-focus);
-    background: currentColor;
-    mask-image: var(--icon-close);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-close);
-    -webkit-mask-size: 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
+  .applied-filters:before {
+    display: none;
   }
 }
+:host(.applied-filters--show-set) {
 
-.applied-filters--compact .filter {
-  background-color: var(--colour-light);
-  border: none;
-  padding: rem(10);
-  line-height: rem(16);
-    border-radius: rem(5);
-
-  &:after {
-    margin-left: rem(10);
-    height: rem(16);
-    width: rem(16);
-    margin-bottom: -0.1rem;
+  .tag--not-set {
+    display: none;
   }
 }

package/assets/sass/components/card.global.scss

@@ -32,6 +32,10 @@ iam-card {
     top: calc(50% - 0.5rem - 2px);
     left: 1rem;
   }
+
+  .badge {
+    margin-bottom: 0.25rem!important;
+  }
 }
 
 

package/assets/sass/components/card.scss

@@ -200,7 +200,7 @@
   position: absolute;
   top: 0;
   right: 0.25rem;
-  padding: 0.25rem;
+  padding: 0 0 0.25rem 0;
   z-index: 9;
   text-align: right;
   width: 1;