@iamproperty/components 3.4.4 → 3.4.6

package/assets/sass/_functions/variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../node_modules/bootstrap/scss/_variables.scss";
 @import "../../../node_modules/bootstrap/scss/_maps.scss";
 
@@ -17,7 +18,7 @@ $grid-breakpoints: (
 
 $device-xs-width: 375;
 $device-sm-width: 768;
-$device-md-width: 1440;
+$device-md-width: 1280;
 
 $container-max-widths: (
   sm: 0,
@@ -27,9 +28,11 @@ $container-max-widths: (
 $grid-columns: 12;
 $grid-gutter-width: 1rem; // 15px
 
-$container-padding-x: 20;
-$container-padding-x-md: 60;
+$container-padding-x: 24;
+$container-padding-x-sm: 40;
+$container-padding-x-md: 84;
 $container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
+$container-padding-sm: var(--container-padding-top) rem($container-padding-x-sm) var(--container-padding-bottom) rem($container-padding-x-sm);
 $container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
 
 $vars: map-merge((
@@ -38,13 +41,37 @@ $vars: map-merge((
   "--container-padding-x": #{rem($container-padding-x)},
   "--container-padding-x-md": #{rem($container-padding-x-md)},
   "--container-padding": $container-padding,
+  "--container-padding-sm": $container-padding-sm,
   "--container-padding-md": $container-padding-md
 ), $vars);
 
+$varsSM: map-merge((
+  "--container-padding": var(--container-padding-sm),
+  "--container-padding-x": var(--container-padding-x-sm)
+), $varsSM);
+
 $varsMD: map-merge((
   "--container-padding": var(--container-padding-md),
   "--container-padding-x": var(--container-padding-x-md)
 ), $varsMD);
+
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .5,
+  2: $spacer,
+  3: $spacer * 1.5,
+  4: $spacer * 2,
+  5: $spacer * 3,
+);
+
+@each $key, $value in $spacers {
+
+  $vars: map-merge((
+    --spacing-#{$key}: #{$value}
+  ), $vars);
+}
+
 // #endregion
 
 // #region Colours
@@ -60,7 +87,7 @@ $dark:          #46003c;
 
 
 // Functional/state variables 
-$colour-body: #6f6f6f;
+$colour-body: #595959;
 $colour-muted: #9d9d9d;
 $colour-border: #6f6f6f;
 $colour-link: $primary;
@@ -68,6 +95,8 @@ $colour-focus: #000000;
 $colour-hover: #000000;
 $colour-active: $success;
 $colour-selected: $info;
+$body-color: $colour-body;
+$colour-inverted: #FCFCFC;
 
 $colors: ();
 $grays: ();
@@ -142,7 +171,9 @@ $non-theme-colors: map-merge((
   "focus":            $colour-focus,
   "hover":            $colour-hover,
   "active":           $colour-active,
-  "selected":         $colour-selected
+  "selected":         $colour-selected,
+  "body": $colour-body,
+  "inverted": $colour-inverted
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -154,7 +185,6 @@ $non-theme-colors: map-merge((
 }
 
 $vars: map-merge((
-  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
   "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
   "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
   "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
@@ -176,10 +206,10 @@ $aspect-ratios: (
 );
 // #endregion
 
-// #region fonts
+// #region Type
 
-$font-body: 'qanelasmedium', arial, sans-serif;
-$font-heading: 'qanelas_softextrabold', arial, sans-serif;
+$font-body: 'Qanelas', arial, sans-serif;
+$font-heading: 'Qanelas', arial, sans-serif;
 
 $fonts: ();
 $fonts: map-merge((
@@ -187,7 +217,6 @@ $fonts: map-merge((
   "body":   $font-body
 ), $fonts);
 
-
 @each $font, $value in $fonts {
 
   $vars: map-merge((
@@ -195,83 +224,82 @@ $fonts: map-merge((
   ), $vars);
 }
 
-// #endregion
-
-// #region Type
 
-$type-scale-1: #{rem(100)};
-$type-scale-2: #{rem(60)};
-$type-scale-3: #{rem(40)};
-$type-scale-4: #{rem(32)};
-$type-scale-5: #{rem(28)};
-$type-scale-6: #{rem(16)};
-$type-scale-7: #{rem(14)};
-
-$font-sizes: (
-  'display': $type-scale-3,
-  1: $type-scale-3,
-  2: $type-scale-4,
-  3: $type-scale-5,
-  4: $type-scale-6,
-  5: $type-scale-6,
-  6: $type-scale-6,
-  'badge': $badge-font-size,
-  'small': $type-scale-7,
-  'strapline': $type-scale-6
+/* Headings variables are setup this way so that we can export them into the vue documentation */
+$heading-sizes: (
+  /* H1 */
+  "h1_fs": 48,
+  "h1_lh": 56,
+  "h1_pb": 48,
+  "h1_fs_sm": 64,
+  "h1_lh_sm": 72,
+  "h1_pb_sm": 64,
+  /* H2 */
+  "h2_fs": 36,
+  "h2_lh": 44,
+  "h2_pb": 40,
+  "h2_fs_sm": 48,
+  "h2_lh_sm": 56,
+  "h2_pb_sm": 48,
+  /* H3 */
+  "h3_fs": 28,
+  "h3_lh": 36,
+  "h3_pb": 40,
+  "h3_fs_sm": 32,
+  "h3_lh_sm": 40,
+  "h3_pb_sm": 40,
+  /* H4 */
+  "h4_fs": 24,
+  "h4_lh": 32,
+  "h4_pb": 32,
+  "h4_fs_sm": 24,
+  "h4_lh_sm": 32,
+  "h4_pb_sm": 32,
+  "lead_fs": 18,
+  "lead_lh": 28,
+  "lead_pb": 48,
+  "body_fs": 16,
+  "body_lh": 24,
+  "body_pb": 48 - 24,
+  "body_end_pb": 48,
+  "small_fs": 14,
+  "small_lh": 24,
+  "small_pb": 48,
 );
 
-@each $size, $value in $font-sizes {
-
-  $vars: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $vars);
-}
+/* H2 */
+$h1-font-size: rem(map-get($heading-sizes,"h1_fs"));
+$h2-font-size: rem(map-get($heading-sizes,"h2_fs"));
+$h3-font-size: rem(map-get($heading-sizes,"h3_fs"));
+$h4-font-size: rem(map-get($heading-sizes,"h4_fs"));
+$h5-font-size: rem(map-get($heading-sizes,"h4_fs"));
+$h6-font-size: rem(map-get($heading-sizes,"h4_fs"));
 
-
-$h1-font-size: var(--fs-1);
-$h2-font-size: var(--fs-2);
-$h3-font-size: var(--fs-3);
-$h4-font-size: var(--fs-4);
-$h5-font-size: var(--fs-5);
-$h6-font-size: var(--fs-6);
-
-$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
-$headings-font-style: normal;
-$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
-$display-line-height: $headings-line-height;
+$heading-weight: 700;
 
 @if $compatible == 'true' {
   $headings-font-family: $font-heading;
-  $headings-font-weight: 700;
+  $headings-font-weight: $heading-weight;
   $headings-color: $primary;
 }
 @else {
   $headings-font-family: var(--font-heading);
   $headings-font-weight: var(--heading-weight);
-  $headings-color: var(--colour-primary);
+  $headings-color: var(--colour-heading);
 }
 
-$font-md-sizes: (
-  'display': $type-scale-1,
-  1: $type-scale-2,
-  2: $type-scale-3,
-  3: $type-scale-4,
-  4: $type-scale-5,
-  'strapline': $type-scale-5
-);
-
-@each $size, $value in $font-md-sizes {
+$headings-margin-bottom: 0;
+$headings-font-style: normal;
+$headings-line-height: 2rem;
+$display-line-height: $headings-line-height;
 
-  $varsMD: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $varsMD);
-}
 
 $vars: map-merge((
-  --heading-weight: 700
+  --heading-weight: $heading-weight
 ), $vars);
 
-$content-max-width: rem(820);
+$content-max-width-px: 800;
+$content-max-width: rem($content-max-width-px);
 $paragraph-margin-bottom: 2rem;
 
 // #endregion 

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

@@ -181,7 +181,7 @@
         @include font-size($h1-font-size, 'true');
       }
       @include expect {
-        font-size: var(--fs-1);
+        font-size: 3rem;
         font-size: $h1-font-size;
       }
     }

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

@@ -9,7 +9,7 @@
         font-family: map-get($vars, --font-body);
       }
       @include expect {
-        font-family: qanelasmedium, arial, sans-serif;
+        font-family: Qanelas, arial, sans-serif;
       }
     }
   }
@@ -19,7 +19,7 @@
         font-family: map-get($vars, --font-heading);
       }
       @include expect {
-        font-family: qanelas_softextrabold, arial, sans-serif;
+        font-family: Qanelas, arial, sans-serif;
       }
     }
   }

package/assets/sass/components/accordion.scss

@@ -1,7 +1,7 @@
 @use "../_func.scss" as *;
 
 // Accordion
-.accordion {
+:is(.accordion, iam-accordion) {
   --accordion-indent: 0.75rem;
   --accordion-right-padding: 3rem;
   --accordion-y-padding: 1rem;
@@ -17,7 +17,7 @@
   }
 }
 
-.accordion-button {
+.accordion-header {
 
   padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
   color: var(--colour-heading);
@@ -29,6 +29,7 @@
   --marker-bg: var(--colour-secondary);
   cursor: pointer;
   position: relative;
+  max-width: 100%;
 
   .badge {
     vertical-align: bottom;
@@ -105,7 +106,7 @@
 }
 
 // #region Coloured summary
-summary[class*="bg-"] {
+.accordion-header[class*="bg-"] {
 
   .accordion-button {
 
@@ -148,7 +149,7 @@ summary[class*="bg-"] {
   }
 }
 
-.accordion-body {
+.accordion-item summary ~ * {
   text-align: left;
   padding: 0 $accordion-body-padding-x;
 }
@@ -156,11 +157,11 @@ summary[class*="bg-"] {
 // #region Straight edge
 .accordion--straight {
   > details > summary:not([class*="bg-"]) > .accordion-button,
-  > details > .accordion-body {
+  > details > .accordion-item summary ~ * {
     padding-left: 0!important;
   }
 
-  > details > .accordion-body {
+  .accordion-item summary ~ * {
     padding-right: 0!important;
   }
 }
@@ -195,3 +196,5 @@ summary[class*="bg-"] {
   }
 }
 // #endregion
+
+

package/assets/sass/components/card.scss

@@ -25,6 +25,11 @@ a.card {
   overflow: hidden;
   max-width: rem(925);
 
+  .card-title {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
   &:hover,
   &:focus {
     --spread: #{rem(6)};
@@ -109,6 +114,7 @@ a.card {
   color: var(--colour-body);
 
   *:last-child {
+    padding-bottom: 0;
     margin-bottom: 0;
   }
 }
@@ -159,6 +165,7 @@ a.card {
 
   .card-title {
     margin-bottom: 0;
+    padding-bottom: 0;
     padding-left: 2em;
     position: relative;
 

package/assets/sass/components/container.scss

@@ -5,14 +5,14 @@
 
 // #region container
 .container {
-
+  display: block;
   margin-left: auto;
   margin-right: auto;
-  padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
+  padding: var(--container-padding);
   width: 100%;
 
   &:not(.container-fluid) {
-    max-width: rem(1440);
+    max-width: rem(1280);
   }
   
   .container:not(.container-xs-breakout) {
@@ -23,13 +23,13 @@
   }
 
   &[class*="bg-"] {
-    --container-padding-top: #{rem(48)};
-    --container-padding-bottom: #{rem(32)};
+    padding-top: #{rem(48)};
+    padding-bottom: #{rem(32)};
   }
 
   &[class*="bg-"] + .container:not([class*="bg-"]) {
 
-    --container-padding-top: #{rem(32)};
+    padding-top: #{rem(32)};
   }
 
 

package/assets/sass/components/forms.scss

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .form-control__wrapper {
   margin-bottom: 1.5rem;
   max-width: $content-max-width;

package/assets/sass/components/header.scss

@@ -5,6 +5,10 @@
   margin-bottom: rem(32);
   position: relative;
   overflow: hidden;
+  max-width: 100%!important;
+
+
+
   @include media-breakpoint-up(md) {
     min-height: rem(470);
   }
@@ -14,6 +18,18 @@
     position: relative;
   }
 
+  .breadcrumb {
+    
+    margin-top: rem(24);
+    margin-bottom: -0.5rem;
+
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      top: 0;
+      left: rem(60);
+    }
+  }
+
   &__inner {
     
     @include reset-colours();
@@ -30,13 +46,14 @@
       margin: rem(112) 0 rem(80) 0;
       padding: rem(56) rem(64);
     }
+
     > *:last-child {
       padding-bottom: 0;
       margin-bottom: 0;
     }
   }
 
-  > picture img {
+  picture img {
     display: none;
     @include media-breakpoint-up(md) {
       display: block;
@@ -50,15 +67,21 @@
     }
   }
 
-  > .container > .breadcrumb {
-    
-    margin-top: rem(24);
-    margin-bottom: -0.5rem;
+}
 
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      top: 0;
-      left: rem(60);
-    }
+// Web component CSS
+::slotted(.breadcrumb){
+  margin-top: rem(24)!important;
+  margin-bottom: -0.5rem!important;
+
+  @include media-breakpoint-up(md) {
+    position: absolute!important;
+    top: 0!important;
+    left: 5.25rem!important;
   }
-}
+}
+
+::slotted(*:last-child) {
+  padding-bottom: 0!important;
+  margin-bottom: 0!important;
+}

package/assets/sass/components/links.scss

@@ -8,6 +8,8 @@ a,
   margin-bottom: rem(16);
   position: relative;
   text-decoration: none;
+  background: none;
+  border: none;
   
   &:not(.text-decoration-none):not(.btn):before {
     content: '';
@@ -30,8 +32,7 @@ a,
     width: 0%;
   }
 
-  &:hover,
-  &:focus,
+  &:is(:hover, :focus, .focus),
   .card:hover &,
   .card:focus &  {
     @include var (color, --colour-hover);

package/assets/sass/components/panel.scss

@@ -33,7 +33,7 @@
     margin-top: var(--panel-gutter);
   }
 
-  > *:last-child {
+  > *:last-child:not(details) {
     margin-bottom: var(--panel-gutter);
   }
 
@@ -49,7 +49,7 @@
 
   > .table__wrapper,
   > .note-feed > .table__wrapper,
-  > .tabs__container:first-child > .tabs > .tab > .table__wrapper {
+  > .tabs > details > .table__wrapper {
 
     margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
     padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
@@ -105,8 +105,7 @@
   min-height: calc(100% - 2rem);
 }
 
-.admin-panel .admin-panel__links, 
-.admin-panel > .tabs__container:first-child > .tabs__links {
+.admin-panel .admin-panel__links {
 
   margin-top: -3px!important;
   margin-left: calc(var(--panel-gutter) * -1);

package/assets/sass/components/snapshot.scss

@@ -57,7 +57,7 @@
   }
 
   &__title {
-    margin-bottom: 1rem;
+    padding-bottom: 1rem;
 
     &:after {
       content: ":";

package/assets/sass/components/tabs.scss

@@ -1,16 +1,9 @@
 @use "../_func" as *;
 
-.tabs__container {
+.tabs {
 
   position: relative;
 
-  .tab__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
   > .tabs__links {
     margin-bottom: 1.5rem;
     overflow: hidden;
@@ -24,6 +17,7 @@
       margin: 0 0 0.5rem 0;
       float: left;
       clear: both;
+      padding: 0;
 
       @include media-breakpoint-up(sm) {
         clear: none;
@@ -37,51 +31,73 @@
       }
 
       &:hover:before,
-      &:focus:before {
+      &:focus:before,
+      &.focus:before {
         width: 100%;
       }
     }
   }
 
-  .tab {
-    display: none;
-  }
-
-  input:focus-visible ~ .tabs__links {
-    outline: blue outset 1px;
-  }
-
-  @for $i from 1 through 10 {
-    input:checked:nth-child(#{$i}) ~ .tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(#{$i}) {
+  .tabs__links .link:not(.text-decoration-none):not(.btn)[aria-pressed="true"] {
       
-      --is-current: 1;
-      --panel-tab-colour: white;
-      --panel-tab-border: var(--colour-secondary)
-    }
-    input:checked:nth-child(#{$i}) ~ .tabs > .tab:nth-child(#{$i}){
-      display: block;
-      display: contents;
-    }
+    --is-current: 1;
+    --panel-tab-colour: white;
+    --panel-tab-border: var(--colour-secondary)
   }
 }
 
 // #region admin panel
-.admin-panel > .tabs__container:first-child {
+.admin-panel .tabs__links,
+:host(.admin-panel) .tabs__links {
+
+  margin-top: -3px!important;
+  margin-left: calc(var(--panel-gutter) * -1);
+  margin-right: calc(var(--panel-gutter) * -1);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--body-bg);
+  border-bottom: 2px solid var(--colour-border-light);
+  margin-bottom: var(--panel-gutter);
+
+  @include media-breakpoint-up(sm) {
+
+    flex-direction: row;
+    border-top: 1px solid var(--colour-border-light);
+  }
 
-  display: contents;
+  .link:not(.text-decoration-none):not(.btn) {
+    padding: var(--panel-gutter);
+    margin: 0;
+    width: 100%;
+    background: var(--panel-tab-colour);
+    border-top: 1px solid var(--colour-border-light);
+    border-left: 3px solid var(--panel-tab-border, #fafafa);
+    text-align: left;
+
+    &:before {
+      display: none;
+    }
 
-  > .tabs {
-    display: contents;
-  }
+    @include media-breakpoint-up(sm) {
 
-  > .tabs__links {
+      margin-right: 0!important;
 
-    padding-bottom: 0;
+      &:first-child{
+        border-left: none!important;
+      }
 
-    .link:not(.text-decoration-none):not(.btn) {
+      &:not(:first-child){
 
-      margin-bottom: 0;
+        border-left: 1px solid var(--colour-border-light)!important;
+      }
+
+      border-top: 3px solid var(--panel-tab-border, #fafafa);
     }
   }
 }
+
+:host(.admin-panel) {
+
+  display: block;
+}
 // #endregion

package/assets/sass/components/timeline.scss

@@ -60,12 +60,12 @@
   }
 
   > * {
-    max-width: rem(math.div(1320,2) - 96);
+    max-width: rem(math.div(1112,2) - 96);
     order: 1;
   }
 
   > img {
-    max-width: min(100%, #{rem(math.div(1320,2) - 96)});
+    max-width: min(100%, #{rem(math.div(1112,2) - 96)});
     margin-bottom: 2rem;
   }