@iamproperty/components 6.0.0 → 6.1.0--beta

package/assets/sass/components/record-card.component.scss

@@ -0,0 +1,204 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+
+:host {
+  --card-head-height: 9rem;
+  --card-right-padding: 1rem;
+  
+  background: transparent!important;
+  position: relative;
+}
+
+:host(:is(:hover,:focus,.hover)) {
+
+  --hover-outline-colour-default: var(--colour, var(--colour-primary));
+  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+  outline-offset: -2px;
+}
+
+:host([data-record]) {
+
+  .card__head {
+
+    &:before {
+      font-family: var(--record-icon-font,"Font Awesome 6 Pro");
+      font-weight: normal;
+      font-size: rem(24);
+      content: var(--record-icon);
+      display: block;
+      position: absolute;
+      top: auto;
+      left: 50%;
+      bottom: 0;
+      background-color: var(--record-colour);
+      border-radius: 50%;
+      height: rem(64);
+      line-height: rem(64);
+      width: rem(64);
+      text-align: center;
+      transform: translate(-50%,0);
+    }
+  }
+}
+
+:host([data-initials]:before) {
+
+  content: (data-initials);
+  display: block;
+}
+  
+
+
+:host([data-initials]) {
+
+  .card__head {
+
+    &:before {
+      display: none!important;
+    }
+  }
+
+  &:before {
+    font-family: var(--font-body);
+    font-weight: normal;
+    font-size: rem(32);
+    content: attr(data-initials);
+    display: block;
+    position: absolute;
+    top: var(--card-head-height);
+    left: 50%;
+    bottom: 0;
+    background-color: var(--record-colour);
+    border-radius: 50%;
+    height: rem(64);
+    margin-top: rem(-64);
+    line-height: rem(64);
+    width: rem(64);
+    text-align: center;
+    transform: translate(-50%,0);
+  }
+
+}
+
+.card__head {
+  background: transparent!important;
+  position: relative;
+  min-height: var(--card-head-height);
+
+  .card__avatar {
+
+    display: block;
+    position: absolute;
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    border-radius: 50%;
+    height: rem(64);
+    line-height: rem(64);
+    width: rem(64);
+    text-align: center;
+    transform: translate(-50%,0);
+    margin: 0;
+    object-fit: cover;
+  }
+}
+
+.card__badges {
+  
+  position: absolute;
+  top: 0;
+  text-align: left;
+  left: 0;
+  z-index: 9;
+}
+
+.card__body {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical; overflow: hidden;
+  overflow: hidden;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.card__details {
+  padding: 0 var(--card-right-padding) 1.5rem var(--card-left-padding);
+}
+
+
+::slotted(span:not(.badge)){
+  display: block!important;
+  font-weight: normal!important;
+  font-size: rem(14)!important;
+  line-height: rem(24)!important;
+}
+
+::slotted(span:not(.badge):not([class*=pt-])) {
+  padding-top: 1rem !important;
+}
+
+::slotted(*:not(.badge)){
+  display: block!important;
+  font-weight: normal!important;
+  font-size: rem(14)!important;
+  line-height: rem(24)!important;
+}
+
+
+:host([data-initials]) {
+  --record-content: attr(data-initials);
+  --record-colour: var(--wider-colour-2);
+}
+
+
+:host([data-record="business"]) {
+  --record-icon: '\f54f';
+  --record-colour: var(--wider-colour-2);
+}
+:host([data-record="page"]) {
+  --record-icon: '\f15c';
+  --record-colour: var(--wider-colour-3);
+}
+:host([data-record="contact"]) {
+  --record-icon: "\f2b9";
+  --record-colour: var(--wider-colour-4);
+}
+:host([data-record="lettings"]) {
+  --record-icon: "\E003";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-5);
+}
+
+:host([data-record="sales"]) {
+  --record-icon: "\E004";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-7);
+}
+:host([data-record="landlord"]) {
+  --record-icon: "\E001";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-8);
+}
+
+:host([data-record="contractor"]) {
+  --record-icon: "\f82c";
+  --record-colour: var(--wider-colour-9);
+}
+
+:host([data-record="vendor"]) {
+  --record-icon: "\E002";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-13);
+}
+
+:host([data-record="tenant"]) {
+  --record-icon: "\e1b0";
+  --record-colour: var(--wider-colour-6);
+}
+:host([data-record="sales-applicant"]) {
+  --record-icon: "\E006";
+  --record-icon-font: Font Awesome Kit;
+  --record-colour: var(--wider-colour-10);
+}

package/assets/sass/components/video-card.component.scss

@@ -0,0 +1,80 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+
+
+:host {
+  --card-right-padding: 1rem;
+
+  --card-head-height: 10rem;
+
+  font-size: 1.5rem;
+  --line-height: 2rem;
+}
+
+
+//video-card--top
+
+
+:host(:is([data-youtube],[data-vimeo]):not(.video-card--top)) .card__head {
+  order: 2;
+}
+
+:host(:is([data-youtube],[data-vimeo])) .card__head {
+
+  cursor: pointer;
+  position: relative;
+
+  > *:not(img){
+    z-index: -1;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    background-color: var(--video-btn-colour, var(--colour-success));
+    height: 5rem;
+    width: 5rem;
+    position: absolute;
+    top: calc(50% - 2.5rem);
+    left: calc(50% - 2.5rem);
+    z-index: 2;
+    border-radius: 2.5rem;
+  }
+
+  &:after {
+
+    $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
+    --icon: #{$icon-play};
+
+    content: "";
+    display: block;
+    height: 2rem;
+    width: 2rem;
+    position: absolute;
+    top: calc(50% - 1rem);
+    left: calc(50% - 0.8rem);
+    z-index: 5;
+    background: var(--colour-primary-theme);
+    mask-image: var(--icon);
+    mask-size: 80%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon);
+    -webkit-mask-size: 80%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  &:is(:hover,:focus) {
+    --video-btn-colour: var(--colour-canvas);
+  }
+  &:is(:active) {
+    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
+  }
+}
+
+.embed {
+  aspect-ratio: 1 / 1;
+  display: block;
+  width: 10rem;
+}

package/assets/sass/components.reset.scss

@@ -1,46 +1,8 @@
-$darkModeLocal: 'false'!default;
+@charset "UTF-8";
 
-@use "_func.scss" as * with (
-  $darkMode: $darkModeLocal
+@use "_fonts";
+@use "_corefiles.scss" with (
+  $root: ":host", // copied directory from iamkey repo
+  $layers: "false"
 );
 
-@use "foundations/root.scss" with (
-  $root: ":is(iam-card,iam-nav,iam-table,.iamkey)" // copied directory from iamkey repo
-);
-
-a:has(iam-card) {
-  all: unset;
-}
-
-
-:is(iam-card,iam-nav, iam-table, .iamkey) {
-
-  @import "foundations/reboot.scss";
-  
-  @include var(font-family,--font-body);
-  @include var(color,--colour-body);
-  width: 100%;
-  line-height: 1.2;
-  min-height: 100%;
-
-  @import "_elements.scss";
-}
-
-:is(iam-table) {
-  width: auto;
-  max-width: rem(1112);
-  display: block;
-}
-
-
-:is(iam-card,iam-nav, iam-table, .iamkey) {
-  @import "_utilities.scss";
-}
-
-body.js-enabled .js-hide {
-  display: none!important;
-}
-
-body:not(.js-enabled) .js-show {
-  display: none!important;
-}

package/assets/sass/elements/badge-tag.scss

@@ -12,7 +12,7 @@
   text-align: center;
   white-space: nowrap;
   max-width: fit-content;
-  color: #262626!important;
+  color: #262626;
   position: relative;
   background: var(--wider-colour, var(--wider-colour-1));
   margin-bottom: 1rem;
@@ -24,6 +24,10 @@
   &:empty {
     display: none;
   }
+
+  &:is(.bg-primary,.bg-dark,.bg-danger){
+    color: #{$colour-inverted}!important;
+  }
 }
 
 .badge {

package/assets/sass/elements/buttons.scss

@@ -110,6 +110,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   color: var(--colour-heading);
 
   &.btn[class*=fa-]:before {
+    content: var(--fa);
     margin-right: rem(6);
   }
 
@@ -132,6 +133,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #region button with icon
 .btn {
   &[class*="fa-"]:before {
+    content: var(--fa);
     font-family: "Font Awesome 6 Pro";
     line-height: 1em;
   }
@@ -235,6 +237,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   font-size: rem(20);
 
   &:before {
+    content: var(--fa);
     position: absolute;
     top: 0;
     left: 0;