@iamproperty/components 4.1.1-beta-3 → 4.1.1-beta-4

package/assets/sass/_corefiles.scss

@@ -1,52 +1,129 @@
+@use "sass:math";
 @use "_func" as *;
 
+@layer reset, elements, components, templates, utilities, overrides;
+
 // Foundations
-@use "foundations/root.scss";
-@use "foundations/reboot.scss";
-@use "foundations/brand.scss";
-@use "foundations/icons.scss";
-@use "foundations/circles.scss";
-@use "foundations/media.scss";
-@use "foundations/type.scss";
-
-// elements
-@use "components/lists.scss";
-@use "components/tooltips.scss";
-@use "components/container.scss";
-@use "components/table.global.scss";
-@use "components/tabs.scss";
-@use "foundations/links.scss";
-@use "foundations/buttons";
-@use "components/admin-panel.scss";
-@use "components/dialog.scss";
-
-@use "components/accordion.scss";
-
-@use "components/card-global.scss";
-@use "components/actionbar-global.scss";
-
-// Bootstrap elements
-@import "../bootstrap/scss/_transitions.scss";
-@import "../bootstrap/scss/_badge.scss";
-
-// Helpers
-//@import "../bootstrap/scss/helpers";
-@import "../bootstrap/scss/helpers/clearfix";
-//@import "../bootstrap/scss/helpers/colored-links";
-@import "../bootstrap/scss/helpers/ratio";
-@import "../bootstrap/scss/helpers/position";
-@import "../bootstrap/scss/helpers/stacks";
-@import "../bootstrap/scss/helpers/visually-hidden";
-//@import "../bootstrap/scss/helpers/stretched-link";
-@import "../bootstrap/scss/helpers/text-truncation";
-//@import "../bootstrap/scss/helpers/vr";
-
-// Helpers
-@import "helpers/max-height.scss";
-@import "helpers/dynamic.scss";
-
-// Utilities
-@import "../bootstrap/scss/utilities/_api.scss";
-
-// Templates
-@import "templates/form.scss";
+@include layer('reset') {
+  @import "foundations/root.scss";
+  @import "foundations/reboot.scss";
+}
+
+@include layer('elements') {
+  @import "_elements.scss";
+}
+
+@include layer('components') {
+
+// #region Undefined web components
+:is(*):not(:defined):not(iam-nav):not(iam-pagination) {
+  display: block;
+  padding: rem(24);
+  margin-bottom: rem(24);
+  border-radius: rem(8);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 80rem;
+}
+
+main > :is(*):not(:defined) {
+
+  padding: var(--container-padding);
+  padding-top: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+    
+  main > :is(*):not(:defined) {
+    max-width: 100%!important;
+    padding-inline: calc(50% - #{rem(math.div(1112,2))});
+  }
+
+  iam-header:not(:defined) {
+    min-height: rem(470);
+  }
+}
+
+:is(iam-notification,iam-card):not(:defined) {
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+}
+
+main {
+  position: relative;
+  
+  > *:first-child {
+    padding-top: 2rem;
+  }
+}
+
+.container.notification__holder {
+
+  position: fixed;
+  top: var(--nav-height);
+  left: 50%;
+  transform: translate(-50%,0);
+  
+  bottom: 0;
+  z-index: 999999;
+  pointer-events: none;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  margin: 0;
+  width: 100%;
+  //max-width: rem(454);
+  flex-wrap: wrap;
+  align-content: flex-start;
+  flex-direction: column;
+  align-content: flex-end;
+  align-items: flex-end;
+
+  :is(.iam-notification, iam-notification) {
+    pointer-events: all;
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  &.bottom {
+    flex-direction: column-reverse;
+  }
+
+  &.left {
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+
+  &.middle {
+    align-content: space-around;
+    align-items: center;
+  }
+}
+// #endregion
+
+  @import "components/tabs.scss";
+  @import "components/accordion.scss";
+  @import "components/card-global.scss";
+  @import "components/actionbar-global.scss";
+  // Bootstrap elements
+  @import "../bootstrap/scss/_transitions.scss";
+  @import "../bootstrap/scss/_badge.scss";
+}
+
+@include layer('templates') {
+  @import "templates/form.scss";
+}
+
+@include layer('utilities') {
+    
+  @import "_utilities.scss";
+}
+
+@include layer('overrides') {
+  @media (prefers-reduced-motion) {
+   * {
+    transition: unset;
+    animation: none;
+   }
+  }
+}

package/assets/sass/_elements.scss

@@ -0,0 +1,18 @@
+@import "foundations/brand.scss";
+@import "foundations/icons.scss";
+@import "foundations/circles.scss";
+@import "foundations/media.scss";
+@import "foundations/type.scss";
+// elements
+@import "components/lists.scss";
+@import "components/tooltips.scss";
+@import "components/container.scss";
+@import "components/table.global.scss";
+
+@import "foundations/links.scss";
+@import "foundations/buttons";
+@import "components/dialog.scss";
+@import "components/admin-panel.scss";
+  
+@import "../bootstrap/scss/forms/_form-range";
+@import "components/forms.scss";

package/assets/sass/_func.scss

@@ -1,6 +1,7 @@
 $compatible: 'false'!default;
 $mobileOnly: 'false'!default;
 $darkMode: 'true'!default;
+$layers: 'true'!default;
 
 // Declare global vars variable
 $vars: ()!default;

package/assets/sass/_functions/mixins.scss

@@ -40,6 +40,19 @@
   }
 }
 
+@mixin layer($name){
+  @if $layers == "true" {
+
+    @layer #{$name} {
+
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
 @mixin container-up($name) {
   
   @if $name == 'sm' {

package/assets/sass/_utilities.scss

@@ -0,0 +1,18 @@
+// Helpers
+//@import "../bootstrap/scss/helpers";
+@import "../bootstrap/scss/helpers/clearfix";
+//@import "../bootstrap/scss/helpers/colored-links";
+@import "../bootstrap/scss/helpers/ratio";
+@import "../bootstrap/scss/helpers/position";
+@import "../bootstrap/scss/helpers/stacks";
+@import "../bootstrap/scss/helpers/visually-hidden";
+//@import "../bootstrap/scss/helpers/stretched-link";
+@import "../bootstrap/scss/helpers/text-truncation";
+//@import "../bootstrap/scss/helpers/vr";
+
+// Helpers
+@import "helpers/max-height.scss";
+@import "helpers/dynamic.scss";
+
+// Utilities
+@import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/components/actionbar.scss

@@ -48,7 +48,7 @@
 
 :host([data-search]) .actionbar [data-search] {
   display: block;
-  margin-left: rem(16)!important;
+  margin: 0 0 0 rem(16);
 }
 
 :is(.actionbar,.actionbar--selected,.actionbar--search){
@@ -231,6 +231,7 @@
 // #region Search bar
 .actionbar--search .btn{
 
+  margin: 0;
   margin-left: rem(-12)!important;
   margin-right: auto!important;
 }

package/assets/sass/components/address-lookup.scss

@@ -19,4 +19,13 @@ div:has(input[name="postcode"]) .suffix {
 .optional {
   
   display: var(--req-display,inline-block)!important;
+}
+
+.pre-filled p {
+  padding-bottom: 1rem;
+}
+.pre-filled button {
+  border: none;
+  background: none;
+  cursor: pointer;
 }

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

@@ -24,7 +24,7 @@
 
   > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
     
-    --gradient-direction: -90deg;
+    --gradient-direction: -90deg!important;
     background-color:var(--colour-success);
 
     &:not([class*="bg-"]){
@@ -68,7 +68,7 @@
     margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
 
     &:before {
-      top: 100%;
+      top: 100% !important;
     }
   }
 
@@ -100,73 +100,6 @@
   min-height: calc(100% - #{rem(24)});
 }
 
-// #region panel links 
-.admin-panel :is(.admin-panel__links, .tabs__links) {
-
-  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;
-  }
-
-  .link:not(.text-decoration-none):not(.btn) {
-    margin: 0;
-    //margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(16)} var(--padding-x);
-    width: 100%;
-    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;
-    }
-
-    @include media-breakpoint-up(sm) {
-
-      margin: 0;
-
-      &:not(:first-child){
-          
-        border-left: 1px solid var(--colour-border)!important;
-      }
-    }
-  }
-
-  .link:is(.current,[aria-pressed="true"]) {
-    pointer-events: none;
-  }
-}
-// #endregion
-
 // #region Has actionbar
 .admin-panel:has(iam-actionbar) {
 

package/assets/sass/components/card.scss

@@ -125,17 +125,17 @@
 }
 
 ::slotted(i){
-  font-size: rem(24);
-  margin: -3px var(--card-icon-right) 0 0;
-  font-weight: 400;
-  vertical-align: middle;
+  font-size: rem(24)!important;
+  margin: -3px var(--card-icon-right) 0 0!important;
+  font-weight: 400!important;
+  vertical-align: middle!important;
 }
 
 ::slotted(span){
-  display: block;
-  font-weight: normal;
-  padding-top: rem(24);
-  font-size: rem(16);
+  display: block!important;
+  font-weight: normal!important;
+  padding-top: rem(24)!important;
+  font-size: rem(16)!important;
 }
 // #endregion
 
@@ -277,4 +277,4 @@
   &:after {
     display: none!important;
   }
-}
+}

package/assets/sass/components/component.reset.scss

@@ -0,0 +1,44 @@
+@use "../_func.scss" as *;
+
+@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;
+}
+
+@import "../components/card-global.scss";
+@import "../components/nav-global.scss";
+
+:is(iam-card,iam-nav, iam-table) {
+  @import "../_utilities.scss";
+}
+
+body.js-enabled .js-hide {
+  display: none!important;
+}
+
+body:not(.js-enabled) .js-show {
+  display: none!important;
+}

package/assets/sass/components/dialog.scss

@@ -613,7 +613,9 @@ dialog::backdrop {
       }
 
       .btn-action {
-        border: none;
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
         margin: 0;
       }
     }

package/assets/sass/components/nav.scss

@@ -2,14 +2,14 @@
 
 :host{
   display: flex!important;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
+  flex-direction: row!important;
+  flex-wrap: wrap!important;
+  align-items: center!important;
 }
 
 ::slotted(.brand) {
 
-  margin-right: auto;
+  margin-right: auto!important;
 }
 
 .btn-menu {

package/assets/sass/components/tabs.scss

@@ -132,4 +132,72 @@
   .tabs__links__wrapper {
     margin: 0 auto 2.5rem;
   }
-}
+}
+
+
+// #region admin-panel links 
+.admin-panel :is(.admin-panel__links, .tabs__links) {
+
+  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;
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    margin: 0;
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
+    width: 100%;
+    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;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin: 0;
+
+      &:not(:first-child){
+          
+        border-left: 1px solid var(--colour-border)!important;
+      }
+    }
+  }
+
+  .link:is(.current,[aria-pressed="true"]) {
+    pointer-events: none;
+  }
+}
+// #endregion

package/assets/sass/foundations/buttons.scss

@@ -124,7 +124,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   &:is(:active, .active):not([disabled]) {
     
     filter: brightness(85%);
-    transition: background .1s, color .1s;
+    transition: all .1s;
     color: var(--colour-heading);
   }
 }
@@ -199,7 +199,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   --compact-size: #{rem(48)};
 
   padding: 0!important;
-  margin-bottom: rem(8)!important;
+  margin-bottom: rem(8);
   
   &:not(:last-child){
     margin-right: rem(8);
@@ -227,8 +227,14 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     width: 100%;
     height: 100%;
     text-indent: 0;
-    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width))!important;
+    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width));
     font-weight: 900;
+    
+  }
+
+  &[class*=fa-]:before {
+    
+    line-height: calc(var(--compact-size) - var(--btn-border-width) - var(--btn-border-width))!important;
   }
 
   &.btn-sm {
@@ -263,6 +269,7 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   &.btn-secondary:is(:hover, :focus, .hover, :active, .active, :focus-within):not([disabled]) {
     background-color: var(--colour);
     color: var(--colour-primary-theme);
+    border-color: transparent!important;
 
     &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
       color: var(--colour-inverted);

package/assets/sass/foundations/reboot.scss

@@ -138,90 +138,3 @@ details summary > * {
 details {
   width: 100%;
 }
-
-
-// #region Undefined web components
-:is(*):not(:defined):not(iam-nav) {
-  display: block;
-  padding: rem(24);
-  margin-bottom: rem(24);
-  border-radius: rem(8);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 80rem;
-}
-
-main > :is(*):not(:defined) {
-
-  padding: var(--container-padding);
-  padding-top: 1rem;
-}
-
-@include media-breakpoint-up(md) {
-    
-  main > :is(*):not(:defined) {
-    max-width: 100%!important;
-    padding-inline: calc(50% - #{rem(math.div(1112,2))});
-  }
-
-  iam-header:not(:defined) {
-    min-height: rem(470);
-  }
-}
-
-:is(iam-notification,iam-card):not(:defined) {
-  box-shadow: var(--card-box-shadow);
-  border-radius: var(--card-border-radius);
-  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-}
-
-main {
-  position: relative;
-  
-  > *:first-child {
-    padding-top: 2rem;
-  }
-}
-
-.container.notification__holder {
-
-  position: fixed;
-  top: var(--nav-height);
-  left: 50%;
-  transform: translate(-50%,0);
-  
-  bottom: 0;
-  z-index: 999999;
-  pointer-events: none;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  display: flex;
-  margin: 0;
-  width: 100%;
-  max-width: rem(454);
-  flex-wrap: wrap;
-  align-content: flex-start;
-  flex-direction: column;
-  align-content: flex-end;
-  align-items: flex-end;
-
-  :is(.iam-notification, iam-notification) {
-    pointer-events: all;
-    margin: 0.5rem 0 0.5rem 0;
-  }
-
-  &.bottom {
-    flex-direction: column-reverse;
-  }
-
-  &.left {
-    align-content: flex-start;
-    align-items: flex-start;
-  }
-
-  &.middle {
-    align-content: space-around;
-    align-items: center;
-  }
-}
-// #endregion