@iamproperty/components 3.5.0 → 3.7.0

package/assets/js/tests/table.spec.js

@@ -7,6 +7,9 @@ const basicTable = `<thead>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
+    <th>Heading 4</th>
+    <th>Heading 5</th>
+    <th>Heading 6</th>
   </tr>
 </thead>
 <tbody>
@@ -14,21 +17,33 @@ const basicTable = `<thead>
     <td>Cell 1</td>
     <td>Low</td>
     <td>Cell 3</td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>Medium</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>High</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
 </tbody>`;
 describe('addDataAttributes', () => {
@@ -131,11 +146,10 @@ describe('populateDataQueries', () => {
     const table = document.createElement('table');
     table.innerHTML = basicTable;
     const form = document.createElement('form');
-    form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+    form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
     tableModule.addDataAttributes(table);
     tableModule.filterTable(table, form, document.createElement('div'));
     tableModule.populateDataQueries(table, form);
-    console.log(table.outerHTML);
     test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
         expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
         expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');

package/assets/sass/_corefiles.scss

@@ -14,6 +14,7 @@
 @use "components/tooltips.scss";
 @use "components/container.scss";
 @use "components/table.scss";
+@use "components/tabs.scss";
 @use "foundations/links.scss";
 @use "foundations/buttons";
 @use "components/admin-panel.scss";
@@ -37,5 +38,7 @@
 @import "../bootstrap/scss/helpers/text-truncation";
 //@import "../bootstrap/scss/helpers/vr";
 
+@import "helpers/max-height.scss";
+
 // Utilities
 @import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/_functions/functions.scss

@@ -86,9 +86,8 @@
 	@return $colour;
 }
 
-@function tint($colour, $percent)
-{
-	@return $colour;
+@function tint($colour, $percentage) {
+  @return mix(white, $colour, $percentage);
 }
 @function shade($colour, $percent)
 {

package/assets/sass/_functions/mixins.scss

@@ -139,8 +139,6 @@
     --colour-#{$color}: #{$value};
   }
 
-
-
   .text-primary {
     color: var(--colour-primary)!important;
   }
@@ -148,22 +146,8 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
-  @each $color, $value in $dark-mode-colors {
+  @each $color, $value in $dark-mode-functional-colors {
 
     --colour-#{$color}: #{$value};
   }
-
-  --btn-bg: var(--colour-inverted);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: var(--colour-inverted);;
-  --btn-tertiary-hover-text: var(--colour-primary);
-
-  
-  --colour-body: #{$colour-inverted};
-  --colour-heading: #{$colour-inverted};
-  --colour-link: #{$colour-inverted};
-  --colour-hover: #{$colour-inverted};
-  --colour-border: #{$colour-inverted};
-  --colour-brand: #{$colour-inverted};
-}
+}

package/assets/sass/_functions/utilities.scss

@@ -115,9 +115,9 @@ $utilities: map-merge(
       ),
       values:
       (
-        "success": linear-gradient(var(--gradient-direction), var(--colour-success) 0, transparent 100%),
-        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
-        "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
+        "success": linear-gradient(var(--gradient-direction), var(--colour-success-theme) 0, transparent 100%),
+        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%),
+        "info": linear-gradient(var(--gradient-direction), var(--colour-info-theme) 0, transparent 100%)
       )
     ),
     "colour": (
@@ -200,3 +200,35 @@ $utilities: map-merge(
   )
 );
 // #endregion
+
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "max-heights": (
+      property: max-height,
+      class: mh,
+      values: (
+        "sm": #{rem(200)},
+        "md": #{rem(400)},
+        "lg": #{rem(600)}
+      )
+    )
+  )
+);
+// #endregion
+
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "container": (
+      property: container-type,
+      class: ct,
+      values: (
+        "inline": inline-size
+      )
+    )
+  )
+);
+// #endregion

package/assets/sass/_functions/variables.scss

@@ -108,59 +108,43 @@ $theme-colors: map-merge((
   "secondary":    $secondary,
   "info":       $info,
   "warning":    $warning,
-  "danger":     $danger,
   "success":    $success,
+  "complete":   #0F9D58,
+  "danger":     $danger,
   "dark":       $dark,
   "light":      $light,
-  "white":      $canvas
+  "canvas":     $canvas,
+  "white":      #FCFCFC,
 ), $theme-colors);
 
 @each $color, $value in $theme-colors {
 
   $vars: map-merge((
-    --colour-#{$color}-hex: $value
+    --colour-#{$color}: $value,
+    --colour-#{$color}-theme: $value
   ), $vars);
 }
 
 
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-
-
-@each $color, $value in $theme-colors-rgb {
-
-  $vars: map-merge((
-    --colour-#{$color}-hex: $value,
-    --colour-#{$color}-rgb: $value,
-    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb), var(--bg-opacity,1))
-  ), $vars);
-}
 
 //  RGB Theme colours
 @function show-css-var($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bg-opacity));
+  @return var(--colour-#{$identifier});
 }
 @function show-css-var-text($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--text-opacity));
+  @return var(--colour-#{$identifier});
 }
 
-$utilities-colors: $theme-colors-rgb;
+$utilities-colors: $theme-colors;
 
 $utilities-text: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "muted": to-rgb($colour-muted),
-    "body": to-rgb($body-color)
+    "black": $black,
+    "muted": $colour-muted,
+    "body": $body-color
   )
 );
 
@@ -175,26 +159,26 @@ $non-theme-colors: map-merge((
   "muted":      $colour-muted,
   "body":       $body-color,
   "border":     $colour-border,
-  "link":       var(--colour-primary),
+  "link":       var(--colour-primary-theme),
   "brand":      var(--colour-primary),
   "underline":  var(--colour-secondary),
   "heading":    var(--colour-primary),
-  "focus":      var(--colour-primary),
-  "hover":      var(--colour-primary),
-  "active":     var(--colour-primary),
+  "focus":      var(--colour-primary-theme),
+  "hover":      var(--colour-primary-theme),
+  "active":     var(--colour-primary-theme),
   "selected":   var(--colour-info),
   "inverted":   $canvas,
-  "canvas":     $canvas,
-  "btn": var(--colour-primary),
+  "btn": var(--colour-primary-theme),
   "btn-bg": var(--colour-warning),
   "btn-border": var(--colour-warning),
   "btn-bg-hover": transparent,
-  "btn-hover": var(--colour-primary),
-  "btn-secondary": var(--colour-primary),
-  "btn-secondary-border": var(--colour-primary),
+  "btn-hover": var(--colour-primary-theme),
+  "btn-secondary": var(--colour-primary-theme),
+  "btn-secondary-border": var(--colour-primary-theme),
   "btn-secondary-bg": transparent,
-  "btn-secondary-bg-hover": var(--colour-primary),
-  "btn-secondary-hover": var(--colour-inverted)
+  "btn-secondary-bg-hover": var(--colour-primary-theme),
+  "btn-secondary-hover": var(--colour-inverted),
+  "canvas-2":     var(--colour-canvas)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -204,31 +188,45 @@ $non-theme-colors: map-merge((
   ), $vars);
 }
 
-$dark-mode-colors: map-merge($non-theme-colors, (
-  "link": var(--colour-inverted),
-  "body": var(--colour-inverted),
-  "heading": var(--colour-inverted),
-  "hover": var(--colour-inverted),
-  "active": var(--colour-inverted),
-  "border": var(--colour-inverted),
-  "brand": var(--colour-inverted),
-  "underline": var(--colour-inverted),
-  "canvas": var(--colour-primary),
+
+$dark-mode-colors: (
+
+  "primary": #B3C1C5,
+  "warning": #ffb733,
+  "info": #35C5E9,
+  "success": #B4E6A5,
+  "danger": #E7727D,
+  "dark": #B599B1,
   "light": $light,
+);
 
-  
+$dark-mode-functional-colors: (
+
+  "canvas": #262626,
+  "canvas-2": #313131,
+  "body": #BFBFBF,
+  "heading": var(--colour-white),
+  "link": var(--colour-white),
+  "hover": var(--colour-white),
+  "active": var(--colour-white),
+  "border": var(--colour-white),
+  "brand": var(--colour-white),
   "btn": #{$primary},
-  "btn-border": #{$colour-inverted},
-  "btn-bg": #{$colour-inverted},
-  "btn-hover": #{$colour-inverted},
-
-  
-  "btn-secondary": var(--colour-inverted),
-  "btn-secondary-border": var(--colour-inverted),
+  "btn-border": var(--colour-white),
+  "btn-bg": var(--colour-white),
+  "btn-hover": var(--colour-white),
+  "btn-secondary": var(--colour-white),
+  "btn-secondary-border": var(--colour-white),
   "btn-secondary-bg": transparent,
-  "btn-secondary-bg-hover": var(--colour-inverted),
-  "btn-secondary-hover": var(--colour-primary)
-));
+  "btn-secondary-bg-hover": var(--colour-white),
+  "btn-secondary-hover": var(--colour-primary-theme)
+);
+
+
+// Kill bootstrap colors
+$colors: ();
+$theme-colors-rgb: ();
+
 // #endregion
 
 // #region aspect ratios
@@ -354,7 +352,7 @@ $btn-padding-x-md: $btn-padding-x;
 
 // #region Forms
 // label
-$form-label-font-size: $h5-font-size;
+$form-label-font-size: rem(18);
 $form-label-font-weight: bold;
 $form-label-color: var(--colour-heading);
 $form-label-margin-bottom: 0.25rem;
@@ -439,28 +437,15 @@ $card-cap-bg: transparent;
 // #endregion card-variables
 
 // #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='4px'></path></svg>");
-$icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
 $icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
-$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z'></path></svg>");
-
-
-$icon-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'><path d='M0,28.5a.5.5,0,0,0,.5.5H2.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H7.45a2.5,2.5,0,0,0-4.9,0H.5A.5.5,0,0,0,0,28.5Zm3.5,0A1.5,1.5,0,1,1,5,30,1.5,1.5,0,0,1,3.5,28.5Zm6-5A1.5,1.5,0,1,1,11,25a1.5,1.5,0,0,1-1.5-1.5ZM11,21a2.5,2.5,0,0,0-2.45,2H.5a.5.5,0,0,0,0,1H8.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H13.45A2.5,2.5,0,0,0,11,21ZM6,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6,20Zm2.45-2a2.5,2.5,0,0,0-4.9,0H.5a.5.5,0,0,0,0,1H3.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1Z' transform='translate(0 -16)'/></svg>");
-
 
 
 $vars: map-merge((
-  --icon-blank: #{escape-svg($icon-blank)},
-  --icon-sort: #{$icon-sort},
   --icon-arrow: #{escape-svg($icon-arrow)},
   --icon-close: #{escape-svg($icon-close)},
-  --icon-tick: #{escape-svg($icon-tick)},
-  --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)},
-  --icon-filter: #{escape-svg($icon-filter)}
+  --icon-question: #{escape-svg($icon-question)}
 ), $vars);
 // #endregion
 
@@ -541,10 +526,13 @@ $td-mw-px: 120;
 $td-mw: #{rem($td-mw-px)};
 $table-padding-px: 32;
 $table-padding: #{rem($table-padding-px)};
-$table-mh-sm-px: 200;
-$table-mh-sm: #{rem($table-mh-sm-px)};
-$table-mh-md-px: 400;
-$table-mh-md: #{rem($table-mh-md-px)};
-$table-mh-lg-px: 600;
-$table-mh-lg: #{rem($table-mh-lg-px)};
-// #endregion
+// #endregion
+
+// #region UT vars
+$ut-mh-sm-px: 200;
+$ut-mh-sm: #{rem($ut-mh-sm-px)};
+$ut-mh-md-px: 400;
+$ut-mh-md: #{rem($ut-mh-md-px)};
+$ut-mh-lg-px: 600;
+$ut-mh-lg: #{rem($ut-mh-lg-px)};
+// #endregion

package/assets/sass/_tests/colours.spec.scss

@@ -3,14 +3,14 @@
 
 $test_colors: ();
 $test_colors: map-merge((
-  "primary-hex":#00313c,
-  "secondary-hex":#b4e6a5,
-  "success-hex":#b4e6a5,
-  "info-hex":#1ebee6,
-  "warning-hex":#ffa500,
-  "danger-hex":#dc3545,
-  "light-hex":#EEEEEE,
-  "dark-hex":#46003c
+  "primary":#00313c,
+  "secondary":#b4e6a5,
+  "success":#b4e6a5,
+  "info":#1ebee6,
+  "warning":#ffa500,
+  "danger":#dc3545,
+  "light":#EEEEEE,
+  "dark":#46003c
 ), $test_colors);
 
 

package/assets/sass/_tests/func.spec.scss

@@ -178,7 +178,7 @@
         color: tint(#ffffff, 50);
       }
       @include expect {
-        color: #ffffff;
+        color: white;
       }
     }
   }

package/assets/sass/components/admin-panel.scss

@@ -1,18 +1,22 @@
 @use "../_func" as *;
 
 .admin-panel {
-  --wrapper-padding: #{rem(32)};
+  --padding-x: #{rem(32)};
+  --padding-top: #{rem(16)};
+  --padding-bottom: #{rem(24)};
   display: block;
-  padding: var(--wrapper-padding);
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
-  background-color: white;
+  background-color: var(--colour-canvas-2);
   border-radius: rem(8);
-  margin-bottom: rem(32);
+  margin-bottom: rem(24);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  &.bg-secondary{
-
-    background-color: rgba(#b4e6a5,0.3) !important;
-  }
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background-color: var(--colour-canvas-2);
+    color: var(--colour-body);
+  }  
 
   &:empty {
     display: none;
@@ -20,13 +24,18 @@
 
   > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
     
-    background-color: var(--colour-info);
-    background-image: linear-gradient(90deg, var(--colour-success) 0, transparent 100%);
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
 
+    &:not([class*="bg-"]){
+      color: var(--colour-primary-theme);
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    }
+    
     font-size: rem(18);
     line-height: rem(24);
-    padding: rem(16) var(--wrapper-padding);
-    margin: calc(var(--wrapper-padding) * -1) calc(var(--wrapper-padding) * -1) rem(32) calc(var(--wrapper-padding) * -1);
+    padding: rem(16) var(--padding-x);
+    margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
     display: block;
     border-top-left-radius: rem(8);
     border-top-right-radius: rem(8);
@@ -46,34 +55,92 @@
   > *:is(p):last-child{
     padding-bottom: 0!important;
   }
+
+  p {
+    max-width: 100%;
+    padding-bottom: rem(24);
+  }
+
+  > :is(.mh-sm,.mh-md,.mh-lg){
+    overflow: auto;
+    
+    padding: 0 var(--padding-x);
+    margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
+
+    &:before {
+      top: 100%;
+    }
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg){
+    padding-top: var(--padding-top);
+    margin-top: calc(var(--padding-top) * -1);
+  }
+  
+  > :is(.mh-sm,.mh-md,.mh-lg):last-child{
+    padding-bottom: var(--padding-bottom);
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+
+    > *:last-child{
+      margin-bottom: 0!important;
+    }
+  
+    > *:is(p):last-child{
+      padding-bottom: 0!important;
+    }
+  }
 }
 
-[class*="col"] .admin-panel:first-child:last-child {
+[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {
 
-  min-height: calc(100% - 2rem);
+  min-height: calc(100% - #{rem(24)});
 }
 
-.admin-panel .admin-panel__links {
+// #region panel links 
+.admin-panel :is(.admin-panel__links, .tabs__links) {
 
-  padding: 0 var(--wrapper-padding);
-  margin: calc(var(--wrapper-padding) * -1) calc(var(--wrapper-padding) * -1) rem(32) calc(var(--wrapper-padding) * -1);
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
+  border-top-left-radius: rem(8);
+  border-top-right-radius: rem(8);
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
+  &:after {
+    display: none;
+  }
+  
   @include media-breakpoint-up(sm) {
 
     flex-direction: row;
   }
 
-  :is(a, label) {
+  .link:not(.text-decoration-none):not(.btn) {
     margin: 0;
-    margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(8)} var(--wrapper-padding);
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
     width: 100%;
-    border-left: 3px solid var(--panel-tab-border, transparent);
     position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
+
+    &:not([class*="bg-"]){
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed="true"]){
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed="true"]){
+      background: var(--colour-canvas-2)!important;
+    }
 
     &:after {
       display: none;
@@ -82,25 +149,16 @@
     @include media-breakpoint-up(sm) {
 
       margin: 0;
-      padding: rem(24) rem(16) rem(8) rem(16);
-      width: auto;
-      border-left: none!important;
-      
-      border-bottom: 2px solid var(--panel-tab-border, transparent);
-
-      &:first-child {
-        margin-left: rem(-16);
-      }
-      &:last-child {
-        margin-right: rem(-16);
+
+      &:not(:first-child){
+          
+        border-left: 1px solid var(--colour-border)!important;
       }
     }
   }
 
-  .current {
-    
-    --is-current: 1;
-    --panel-tab-border: var(--colour-secondary);
+  .link:is(.current,[aria-pressed="true"]) {
     pointer-events: none;
   }
-}
+}
+// #endregion

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

@@ -17,6 +17,10 @@
   }
 }
 
+::slotted(*:last-child) {
+  margin-bottom: 0;
+}
+
 .applied-filters .filter {
   
   border: 1px solid var(--colour-border);