@iamproperty/components 3.4.7 → 3.6.0

package/assets/sass/foundations/buttons.scss

@@ -0,0 +1,381 @@
+@use "../_func.scss" as *;
+
+// #region button primary
+.btn {
+
+  --btn-margin: #{rem(16)};
+
+  @include media-breakpoint-up(sm) { 
+
+    --btn-margin: #{rem(24)};
+  }
+
+
+  &: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: var(--btn-margin);
+  margin-right: var(--btn-margin);
+  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);
+  min-width: calc(rem(48) - 4px);
+  max-width: calc(rem(48) - 4px);
+  height: calc(rem(48) - 4px)!important;
+  text-indent: -300px;
+  overflow: hidden;
+  position: relative;
+  font-size: rem(20);
+
+  &: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-theme);
+
+    &: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);
+  --colour-btn-hover: var(--colour-primary-theme);
+  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 Tertiary Button
+
+.btn.btn-tertiary {
+
+  background-color: transparent;
+  border: none;
+  color: var(--colour-link);
+  margin: 0 var(--btn-margin) var(--btn-margin) 0;
+  padding: 0;
+  font-size: rem(18);
+  font-weight: normal;
+  line-height: rem(24);
+  min-height: rem(24);
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: "";
+    top: 100%;
+    left: 50%;
+    height: 2px;
+    width: 100%;
+    transform: translate(-50%,0);
+    background: var(--colour-underline);
+    transition: width 0.5s;
+  }
+
+
+  &.text-decoration-none:after {
+
+    width: 0%;
+  }
+
+  [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%!important;
+    }
+  }
+  &:is(:active, .active):not([disabled]) {
+
+    color: var(--colour-active);
+  }
+
+}
+// #endregion

package/assets/sass/foundations/links.scss

@@ -1,105 +1,103 @@
 @use "../_func.scss" as *;
 
-a,
+// 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 {
-  @include var (color, --colour-link);
-  display: inline-block;
-  min-height: em(28);
-  margin-bottom: rem(16);
-  position: relative;
+  background-color: transparent;
   text-decoration: none;
-  background: none;
+  display: inline-block;
   border: none;
-  
-  &:not(.text-decoration-none):not(.btn):before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    @include var(background-color,--colour-underline);
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: .3s ease-in;
-    transition: .3s ease-in;
-  }
+  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):not(.btn):hover:before,
-  .card:hover &:before,
-  details[open] &:not(.text-decoration-none):not(.btn):before {
-    width: 0%;
+  &: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;
+    }
   }
 
-  &:is(:hover, :focus, .focus),
-  .card:hover &,
-  .card:focus &  {
-    @include var (color, --colour-hover);
+  [class*=fa-] {
+    margin-left: 0;
+    margin-right: 0.5rem;
   }
-
-  &:active,
-  &.active,
-  .card:active & {
-    @include var (color, --colour-active);
+  [class*=fa-]:not(:first-child) {
+    margin-left: 0.5rem;
+    margin-right: 0;
   }
 
-  &[target="_blank"]:not(.card):after,
-  &.card[target="_blank"] .btn:after {
-    
-    content: "";
-    height: 1em;    
-    width: 1em;
-    margin-left: 0.5em;
-    margin-right: -0.2em;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: -0.15em;
-
-    mask-image: var(--icon-blank);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-    mask-position: 0 0;
-  
-    -webkit-mask-image: var(--icon-blank);
-    -webkit-mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 0 0;
-    background-color: currentColor;
-  }
-  
+  &:is(:hover, :focus, .hover, :active, .active, :focus-within) {
+
+    &:after {
+      width: 60%;
+    }
+  }     
 }
+
 @include inline-text(){
-  a {
+  a:not(.btn) {
     min-height: none;
     display: inline;
-    margin-bottom: 0;
+    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;
-    text-decoration-color: var(--colour-underline);
 
-    &:hover,
-    &:focus,
-    &:active{
+    &:is(:hover, :focus, .hover, :focus-within) {
 
+      color: var(--colour-hover);
       text-decoration: none;
-    }
-  
-    &:before {
+    }   
 
-      display: none;
-    }
+    &:is(:active, .active) {
 
-    &[target="_blank"]:after {
-      margin-left: 0.25em;
-      margin-right: 0.2em;
+      color: var(--colour-active);
+      text-decoration: none;
     }
   }
 }
 
-// Support card component
+// #region Support card component
 :is(a,button,label):has(.card, iam-card){
+
   &:before {
     display: none;
   }
@@ -109,6 +107,7 @@ a,
   display: flex;
   margin: 0 0 rem(24) 0;
   outline: none!important;
+  text-decoration: none;
 
   &:not(.d-inline-block){
       
@@ -122,4 +121,5 @@ a,
 
 .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 {
@@ -43,7 +43,8 @@ html {
 }
 
 body {
-
+  color-scheme: light dark;
+  @include var(background,--colour-canvas);
   @include var(font-family,--font-body);
   @include var(color,--colour-body);
   width: 100%;
@@ -54,24 +55,22 @@ body {
 
 // #region scrollbars
 div::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 6px;
 }
  
 div::-webkit-scrollbar-track {
   background-color: #f1f1f1;
-  border-radius: 2px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
  
 div::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
-  border-radius: 2px;
+  width: 6px;
+  border-left: 4px solid var(--bg-colour,var(--colour-canvas));
 }
 //#endregion
 
-#app {
-}
-
 body > footer,
 body > #app > footer {
   position: sticky;