@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/foundations/buttons.scss

@@ -0,0 +1,366 @@
+@use "../_func.scss" as *;
+
+// #region button primary
+.btn {
+
+  &:not(.btn-secondary)[class*="colour-"]{
+    --colour-btn-bg: var(--colour);
+    --colour-btn-border: var(--colour);
+  }
+
+  &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
+    --colour-btn: #{$colour-inverted};
+  }
+
+  display: inline-block;
+  font-weight: bold;
+  text-align: left;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+
+  background: var(--colour-btn-bg);
+  border: 2px solid var(--colour-btn-border);
+  color: var(--colour-btn);
+
+  font-size: rem(18);
+  line-height: rem(24);
+  padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
+  border-radius: rem(24);
+  margin-bottom: rem(24);
+  margin-right: rem(24);
+  transition: background .5s, color .5s;
+  height: auto;
+  max-width: fit-content;
+  appearance: none;
+  white-space: nowrap;
+
+  a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
+  &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+    outline: 0;
+    text-decoration: none;
+
+    background: var(--colour-btn-bg-hover);
+    color: var(--colour-btn-hover);
+    border-radius: rem(24);
+  }
+
+  a:is(:active, .active):not([disabled]) &,
+  &:is(:active, .active):not([disabled]) {
+    
+    filter: brightness(85%);
+    transition: background .1s, color .1s;
+    color: var(--colour-btn);
+    border-radius: rem(24);
+  }
+
+  a:disabled &,
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+// #endregion
+
+// #region secondary button
+.btn-secondary {
+
+  background: var(--colour-btn-secondary-bg);
+  border: 2px solid var(--colour-btn-secondary-border);
+  color: var(--colour-btn-secondary);
+}
+
+a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
+.btn-secondary:is(:hover, :focus, .hover, :focus-within, :active, .active):not([disabled]) {
+  background: var(--colour-btn-secondary-bg-hover);
+  color: var(--colour-btn-secondary-hover);
+}
+// #endregion
+
+// #region button with icon
+.btn {
+  &[class*="fa-"]:before {
+
+    font-family: "Font Awesome 6 Pro";
+    margin-right: 1rem;
+  }
+
+  [class*="fa-"]{
+    
+    font-family: "Font Awesome 6 Pro";
+    margin-right: 1rem;
+
+    font-style: inherit;
+    &:not(:first-child){
+      margin-left: 1rem;
+      margin-right: 0;
+    }
+  }
+}
+// #endregion
+
+// #region button with prompt 
+.btn.btn--prompt {
+  &:after {
+    content: "";
+    height: rem(24);
+    width: rem(16);
+    display: inline-block;
+    background: currentColor;
+    mask-image: var(--icon-arrow);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+    vertical-align: bottom;
+    margin-left: 1rem;
+  }
+
+  
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
+  &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    &:after {
+      margin-left: 1.5rem;
+      margin-right: -0.5rem;
+    }
+  }
+}
+// #endregion
+
+// #region button small and tag
+.btn.btn-sm {
+
+  padding: em(8) em(32);
+}
+// #endregion
+
+// #region btn compact
+.btn-compact {
+  padding: calc(rem(12) - 2px)!important;
+  margin-bottom: rem(8)!important;
+  margin-right: rem(8)!important;
+
+  text-align: center;
+  width: calc(rem(48) - 4px);
+  height: calc(rem(48) - 4px)!important;
+  text-indent: -300px;
+  overflow: hidden;
+
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-indent: 0;
+    line-height: calc(3rem - 6px);
+    font-weight: 900;
+  }
+
+  &.btn-secondary {
+    
+    --colour-btn-border: transparent;
+    border-color: transparent;
+
+    &:not([class*="colour-"]){
+      --colour: var(--colour-light)
+    }
+  }
+
+  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, :focus-within):not([disabled]) {
+    background-color: var(--colour);
+    color: var(--colour-primary);
+
+    &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
+      color: var(--colour-inverted);
+    }
+  }
+}
+// #endregion
+
+// #region btn with colour success
+.btn.colour-success {
+
+  --colour-btn-bg-hover: var(--colour);
+  --colour-btn-border-hover: var(--colour);
+  position: relative;
+  padding-left: rem(56);
+  padding-right: rem(56);
+
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
+  &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+
+    padding-left: rem(40);
+    padding-right: rem(40);
+
+    &:before {
+      content: "\f00c";
+      font-family: "Font Awesome 6 Pro";
+      margin-right: 1rem;
+      font-style: inherit;
+      width: 1rem;
+      display: inline-block;
+      height: rem(24);
+      vertical-align: bottom;
+    }
+  }
+
+
+}
+// #endregion
+
+// #region Select as button
+
+.btn:has(select) {
+  position: relative;
+  padding-right: rem(56);
+
+  &:not(.mw-100){
+    max-width: rem(112 + 40 + 56);
+  }
+
+  select {
+    
+    padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
+    margin: calc(rem(-12)) calc(rem(-40));
+    
+    padding-right: rem(56);
+    margin-right: rem(-56);
+    border-radius: rem(24);
+    appearance: none;
+    background: none;
+    border: none!important;
+    color: inherit;
+    display: block;
+    min-width: calc(100% + rem(40) + rem(56));
+    outline: none;
+    font-weight: bold;
+    
+    option {
+      padding: 0;
+      text-align: left;
+      color: var(--colour-primary);
+    }
+  }
+
+
+  &:after {
+    position: absolute;
+    top: rem(8);
+    right: rem(40);
+
+    content: "";
+    height: rem(24);
+    width: rem(16);
+    display: inline-block;
+    background: currentColor;
+    mask-image: var(--icon-arrow);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+    vertical-align: bottom;
+    margin-left: 1rem;
+    transform: rotate(90deg);
+    pointer-events: none;
+  }
+
+  &.active:after{
+    transform: rotate(-90deg);
+  }
+}
+
+.btn:has(select:focus):after{
+  transform: rotate(-90deg);
+}
+
+// #endregion
+
+
+
+// #region button that opens up a filter dialog
+.btn-filter {
+  &:after {
+    content: "";
+  
+    display: inline-block;
+    margin-left: 1em;
+    margin-bottom: -0.15em;
+    height: 1em;
+    width: 1em;
+    z-index: var(--index-focus);
+    background: currentColor;
+    mask-image: var(--icon-filter);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-filter);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+  }
+}
+// #endregion
+
+
+// #region Rertiary Button
+
+.btn {
+
+  &.btn-tertiary {
+
+    background-color: transparent;
+    border: none;
+    color: var(--colour-link);
+    margin: 0 rem(24) rem(24) 0;
+    padding: 0;
+    font-size: rem(18);
+    line-height: rem(24);
+    min-height: rem(24);
+    position: relative;
+
+    &:not(.text-decoration-none):after {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      width: 100%;
+      transform: translate(-50%,0);
+      background: var(--colour-underline);
+      transition: width 0.5s;
+    }
+
+    [class*=fa-] {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+    [class*=fa-]:not(:first-child) {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+
+    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+
+      &:after {
+        width: 60%;
+      }
+    }
+    &:is(:active, .active):not([disabled]) {
+
+      color: var(--colour-active);
+    }
+  }
+
+}
+

package/assets/sass/foundations/icons.scss

@@ -4,7 +4,7 @@
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 0;
-  @include var(color,--colour-brand);
+  @include var(color,--colour-primary);
   width: rem(64);
   height: rem(64);
   display: inline-block;

package/assets/sass/foundations/links.scss

@@ -0,0 +1,125 @@
+@use "../_func.scss" as *;
+
+// global
+a {
+  color: var(--colour-link);
+
+  &:is(:hover, :focus, .hover, :focus-within) {
+
+    color: var(--colour-hover);
+  }   
+
+  &:is(:active, .active) {
+
+    color: var(--colour-active);
+  }
+}
+
+a:where(:not(.btn):not(:has(.card)):not(:has(iam-card))),
+.link {
+  background-color: transparent;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+  color: var(--colour-link);
+  margin: 0 rem(24) rem(24) 0;
+  padding: 0;
+  font-size: rem(18);
+  line-height: rem(24);
+  min-height: rem(24);
+  position: relative;
+  font-weight: bold;
+
+  &:not(.text-decoration-none){
+    &:after {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      width: 100%;
+      transform: translate(-50%,0);
+      background: var(--colour-underline);
+      transition: width 0.5s;
+    }
+  }
+
+  [class*=fa-] {
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
+  [class*=fa-]:not(:first-child) {
+    margin-left: 0.5rem;
+    margin-right: 0;
+  }
+
+  &:is(:hover, :focus, .hover, :active, .active, :focus-within) {
+
+    &:after {
+      width: 60%;
+    }
+  }     
+}
+
+@include inline-text(){
+  a:not(.btn) {
+    min-height: none;
+    display: inline;
+    margin: 0;
+    text-decoration: underline;
+
+    &:after {
+      display: none;
+    }
+
+    [class*="fa-"]{
+      margin: 0;
+      display: inline;
+    }
+
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 2px;
+
+    &:is(:hover, :focus, .hover, :focus-within) {
+
+      color: var(--colour-hover);
+      text-decoration: none;
+    }   
+
+    &:is(:active, .active) {
+
+      color: var(--colour-active);
+      text-decoration: none;
+    }
+  }
+}
+
+// #region Support card component
+:is(a,button,label):has(.card, iam-card){
+
+  &:before {
+    display: none;
+  }
+  border: none;
+  background: none;
+  padding:0;
+  display: flex;
+  margin: 0 0 rem(24) 0;
+  outline: none!important;
+  text-decoration: none;
+
+  &:not(.d-inline-block){
+      
+    width: 100%;
+  }
+
+  iam-card {
+    width: 100%;
+  }
+}
+
+.col > :is(a,button):has(.card, iam-card):first-child:last-child{
+  min-height: calc(100% - rem(24));
+}
+// #endregion

package/assets/sass/foundations/media.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_images.scss";
+@import "../../bootstrap/scss/_images.scss";
 
 img {
   max-width: 100%;

package/assets/sass/foundations/reboot.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_reboot.scss";
+@import "../../bootstrap/scss/_reboot.scss";
 
 /* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
 html {
@@ -8,9 +8,8 @@ html {
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
   height: 100%;
   width: 100%;
-  overflow: hidden;
-  overflow-y: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
   font-size: vw($device-xs-width);
   scroll-padding-top: rem(100);
   
@@ -44,27 +43,32 @@ html {
 }
 
 body {
-
-  font-family: 'qanelasmedium', arial, sans-serif;
+  color-scheme: light dark;
+  @include var(background,--colour-canvas);
+  @include var(font-family,--font-body);
   @include var(color,--colour-body);
   width: 100%;
   line-height: 1.2;
-  height: 100%;
-  //overflow-y: scroll;
-  //overflow-x: hidden;
-}
+  min-height: 100%;
 
-@media (hover: none) {
-  body {
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
 }
 
-#app {
-  min-height: 100%;
+// #region scrollbars
+div::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+ 
+div::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 2px;
+}
+ 
+div::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 2px;
 }
+//#endregion
 
 body > footer,
 body > #app > footer {

package/assets/sass/foundations/root.scss

@@ -1,6 +1,6 @@
 @use "../func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_root.scss";
+@import "../../bootstrap/scss/_root.scss";
 
 :root {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars
@@ -25,27 +25,15 @@
   }
 
   // Extra vars needed
-  --body-bg: white;
-  --colour-underline: var(--colour-primary);
-  --colour-heading: var(--colour-primary);
-  --alpha: var(--bg-opacity,1);
-  --#{$variable-prefix}gradient: #{$gradient};
   --content-max-width: #{$content-max-width};
+  
   --colour-brand: var(--colour-primary);
-
-  /* Button colours */
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
+  
 }
 
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
-    --body-bg: var(--colour-primary);
-    --colour-admin: var(--colour-primary);
     @include invert-colours();
   }
 
@@ -53,38 +41,27 @@
     color: #{$colour-inverted}!important;
   }
 
-  body .bg-white {
-    background-color: transparent!important;
-  }
+  
 }
 
 @media screen {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-canvas):not(.invert-colours) {
 
     @include reset-colours();
 
     --colour-body: var(--colour-primary);
     --colour-heading: var(--colour-primary);
     color: var(--colour-body);
-
-    --btn-bg: var(--colour-primary);
-    --btn-text: var(--colour-white);
     --colour-underline: var(--colour-primary);
-
-    .btn-secondary {
-
-      --btn-text: var(--colour-primary);
-    }
-    
   }
 
   
 
   // Slight colour adjustments on the light background to match brand guidelines
   .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --body-bg: var(--colour-light);
+    --colour-canvas: var(--colour-light);
     --colour-heading: var(--colour-dark);
     color: var(--colour-dark);
   }
@@ -96,6 +73,8 @@
   .bg-black:not(.prevent-invert),
   .invert-colours {
     
+    --btn-bg: #{$colour-inverted};
+
     @if $compatible != "true" {
       
       @include invert-colours();
@@ -103,6 +82,7 @@
     color: #{$colour-inverted};
   }
 
+
   // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
   .bg-dark:not(.prevent-invert),
   .bg-danger:not(.prevent-invert),

package/assets/sass/foundations/type.scss

@@ -11,7 +11,7 @@ small {
   @include font-size($small-font-size);
 }
 
-@import "../../../node_modules/bootstrap/scss/_type.scss";
+@import "../../bootstrap/scss/_type.scss";
 
 // #region headings
 %heading {