@iamproperty/components 2.6.2 → 2.7.1

package/assets/sass/elements/buttons.scss

@@ -1,15 +1,6 @@
-.btn {
-  --btn-bg: var(--colour-warning);
-  --btn-outline: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-
-  --btn-bg-hover: white;
-  --btn-outline-hover: var(--colour-warning);
-  --btn-text-hover: var(--colour-primary);
+@use "../_func.scss" as *;
 
-  --btn-bg-active: white;
-  --btn-outline-active: var(--colour-primary);
-  --btn-text-active: var(--colour-primary);
+.btn {
 
   display: inline-block;
   font-weight: 600;
@@ -19,7 +10,7 @@
   cursor: pointer;
   user-select: none;
   background: var(--btn-bg);
-  border: 2px solid var(--btn-outline);
+  border: 2px solid var(--btn-bg);
   color: var(--btn-text);
   font-family: var(--font-heading);
   font-size: 1rem;
@@ -38,26 +29,21 @@
     outline: 0;
     text-decoration: none;
     border-radius: rem(20);
-    
-    background: var(--btn-bg-hover);
-    border-color: var(--btn-outline-hover);
-    color: var(--btn-text-hover);
+    background: transparent;
+    border-color: var(--btn-bg)!important;
+    color: var(--btn-hover-text);
   }
 
   a:active &,
   a.active &,
   &:active,
-  &.active,
-  *:checked + &,
-  details[open] > &:is(summary):first-child {
-    --btn-colour: var(--btn-active-colour);
-    @include box-shadow($btn-active-box-shadow);
+  &.active {
+    
     border-radius: rem(20);
     transition: 0s;
-
-    background: var(--btn-bg-active);
-    border-color: var(--btn-outline-active);
-    color: var(--btn-text-active);
+    background: transparent;
+    border-color: var(--btn-text);
+    color: var(--btn-hover-text);
 
     &:focus {
       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
@@ -73,83 +59,49 @@
   &.btn-secondary {
 
     --btn-bg: var(--colour-secondary);
-    --btn-outline: var(--colour-secondary);
-    --btn-outline-hover: var(--colour-secondary);
   }
 
   &.btn-tertiary,
   &.btn-tag:not(.btn-primary):not(.btn-secondary) {
 
-    --btn-bg: transparent;
-    --btn-bg-hover: var(--colour-primary);
-    --btn-bg-active: var(--colour-primary);
-    --btn-outline: var(--colour-primary);
-    --btn-outline-hover: var(--colour-primary);
-    --btn-text-hover:  #ffffff;
-    --btn-text-active: #ffffff;
-  }
-
-  [class*="bg-"]:not(.prevent-invert) & {
-
-    --btn-bg: var(--colour-primary);
-    --btn-bg-hover: transparent;
-    --btn-bg-active: transparent;
-    --btn-outline: var(--colour-primary);
-    --btn-outline-hover: var(--colour-primary);
-    --btn-text-hover:  var(--colour-primary);
-    --btn-text:  #ffffff;
+    background: var(--btn-tertiary-bg);
+    border-color: var(--btn-hover-text) !important;
+    color: var(--btn-tertiary-hover-text);
 
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+    &:not(:hover):not(:focus) {
 
-      --btn-bg: transparent;
-      --btn-bg-hover: var(--colour-primary);
-      --btn-text:  var(--colour-primary);
-      --btn-text-hover:  #ffffff;
+      background: transparent;
+      color: var(--colour-link);
+      border-color: var(--btn-hover-text);
     }
   }
 
-  @include invert-colours {
-    
-    --btn-bg: #ffffff;
-    --btn-bg-hover: transparent;
-    --btn-outline: #ffffff;
-    --btn-outline-hover: #ffffff;
-    --btn-text-hover:  #ffffff;
-    --btn-text:  var(--colour-primary-theme);
-
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-      --btn-bg: transparent;
-      --btn-bg-hover: #ffffff;
-      --btn-text:  #ffffff;
-      --btn-text-hover:  var(--colour-primary-theme);
-    }
+  &.btn-tag.btn-primary {
+    --btn-bg: var(--colour-warning);
   }
+}
 
-  [class*="bg-"].bg-light:not(.prevent-invert) & {
-    
-    --btn-bg: #ffffff;
-    --btn-bg-hover: transparent;
-    --btn-outline: #ffffff;
-    --btn-outline-hover: var(--colour-dark-theme);
-    --btn-text-hover: var(--colour-dark-theme);
-    --btn-text: var(--colour-dark-theme);
-
-    &.btn-tertiary,
-    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-      --btn-bg: transparent;
-      --btn-bg-hover: #ffffff;
-      --btn-text:  var(--colour-dark-theme);
-      --btn-outline:  var(--colour-dark-theme);
-      --btn-outline-hover: #ffffff;
-      --btn-text-hover:  var(--colour-dark-theme);
-    }
+input:checked + .btn:not(:hover):not(:focus),
+details[open] > summary.btn:first-child {
+  
+  transition: 0s;
+  background: var(--btn-tertiary-bg);
+  border-color: var(--btn-hover-text);
+  color: var(--btn-tertiary-hover-text);
+
+  &:focus {
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 
+input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active),
+input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:focus):not(:active) {
+  background: var(--btn-tertiary-bg);
+  border-color: var(--btn-hover-text);
+  color: var(--btn-tertiary-hover-text);
+}
+
+
 // #region button small and tag
 .btn-sm {
 
@@ -253,5 +205,6 @@
     width: 100%;
   }
 }
+// #endregion
 
-// #endregion
+@import "../../../node_modules/bootstrap/scss/_button-group.scss";

package/assets/sass/{components → elements}/card.scss

@@ -1,3 +1,7 @@
+@use "../_func.scss" as *;
+
+@import "../../../node_modules/bootstrap/scss/_card.scss";
+
 // #region Defaul Card
 // Reset the link
 a.card {
@@ -9,7 +13,12 @@ a.card {
   }
 }
 
+.card:not(.card--simple) {
+
+  @include reset-colours();
+}
 .card {
+
   --spread: #{rem(12)};
   box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
   min-height: 100%;

package/assets/sass/elements/container.scss

@@ -1,3 +1,8 @@
+@use "sass:math";
+@use "../_func.scss" as *;
+
+@import "../../../node_modules/bootstrap/scss/_grid.scss";
+
 // #region container
 .container {
 
@@ -48,15 +53,10 @@
   position: relative;
   z-index: 1;
 
-
-  &[class*="circle-pattern"] {
-    //overflow: hidden;
-  }
-
   > .circle {
 
     position: absolute;
-    z-index: -1;
+    z-index: var(--index-below);
     border-width: 3px;
   }
 
@@ -130,6 +130,7 @@
 
 
 // #region Curve
+$default-curve-width: 576!default;
 @mixin curve($start: 10, $point-1: 20, $point-2: 95, $end: 70, $padding-top:16)
 {
   // Constant rules
@@ -137,8 +138,8 @@
   
   // Let vars
   $height: 100;
-  $width: 576;
-  $middle-x: $width/2;
+  $width: $default-curve-width;
+  $middle-x: math.div($width,2);
   $edge: 2;
   $modify: 1;
 
@@ -146,21 +147,23 @@
   width: #{$width}px;
   padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
   margin-top: -#{($height*$modify)}px;
-  margin-left: calc(-#{($width/2)}px + 50vw);
+  margin-left: calc(-#{math.div($width,2)}px + 50vw);
   clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end * $modify)+' L'+$width+',5000 L0,5000 Z'}');
 
+  padding-inline: calc((#{math.div($width,2)}px - 50vw) + var(--container-padding-x));
+
   @include media-breakpoint-up(sm) {
 
     // Tablet vars
     $width: 992;
-    $middle-x: $width/2;
+    $middle-x: math.div($width,2);
     $modify: 1.5;
 
     // Tablet CSS rules
     width: #{$width}px;
     padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
     margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{($width/2)}px + 50vw);
+    margin-left: calc(-#{math.div($width,2)}px + 50vw);
     clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
   }
 
@@ -168,7 +171,7 @@
 
     // Desktop vars
     $width: 1440;
-    $middle-x: $width/2;
+    $middle-x: math.div($width,2);
     $modify: 2;
 
     // Desktop CSS rules
@@ -176,7 +179,7 @@
     max-width: #{$width}px!important;
     padding-top: calc(#{($height*$modify)}px + #{$padding-top}px)!important;
     margin-top: -#{($height*$modify)}px;
-    margin-left: calc(-#{($width/2)}px + 50vw);
+    margin-left: calc(-#{math.div($width,2)}px + 50vw);
     clip-path: path('#{'M0,'+($start*$modify)+' L'+($edge)+','+($start*$modify)+' C'+$middle-x+','+($point-1*$modify)+' '+$middle-x+','+($point-2*$modify)+' '+($width - $edge)+','+($end*$modify)+' L'+($width + $edge)+','+($end*$modify)+' L'+$width+',5000 L0,5000 Z'}');
   }
 }
@@ -193,7 +196,6 @@
   }
 }
 
-
 .container--curve {
 
   @include curve();
@@ -215,8 +217,9 @@
 
   position: relative;
 
-  @media (min-width: #{em(1440)}) {
+  @media (min-width: #{em($device-md-width)}) {
     margin-left: auto;
+    padding-inline: var(--container-padding-x);
   }
 }
 // #endregion

package/assets/sass/elements/forms.scss

@@ -1,10 +1,30 @@
 .form-control__wrapper {
   margin-bottom: 1.5rem;
   max-width: $content-max-width;
+  position: relative;
 
   label {
     display: block;
 
+    &[title]:after{
+
+      content: "";
+      display: inline-block;
+      margin-left: 0.25em;
+      margin-bottom: 0.1em;
+      width: 1em;
+      height: 1em;
+      vertical-align: text-bottom;
+      background: currentColor;
+      mask-image: var(--icon-question);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-question);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
   }
 }
 
@@ -126,3 +146,49 @@ select[multiple]::-webkit-scrollbar-thumb {
   border-radius: 0.35rem;
 }
 // #endregion
+
+// #region prefix
+
+.form-control__wrapper :is(.prefix,.suffix) {
+
+  color: #212529;
+  background: #e9ecef;
+  padding: 0.75em 1em;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  position: absolute;
+  bottom: 1px;
+}
+
+.form-control__wrapper .prefix {
+
+  border-top-left-radius: 0.625rem;
+  border-bottom-left-radius: 0.625rem;
+  left: 1px;
+}
+
+.form-control__wrapper :is(.prefix-sm,.suffix-sm) {
+
+  font-size: var(--fs-small);
+}
+.form-control__wrapper :is(.prefix-lg,.suffix-lg) {
+
+  font-size: 1.5rem;
+}
+
+.form-control__wrapper .prefix + .form-control {
+  padding-left: em(64);
+}
+.form-control__wrapper .suffix + .form-control {
+  padding-right: em(64);
+}
+
+.form-control__wrapper .suffix {
+  left: auto;
+  right: 1px;
+  border-top-right-radius: 0.625rem;
+  border-bottom-right-radius: 0.625rem;
+}
+
+// #endregion

package/assets/sass/elements/links.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 a,
 .link {
   @include var (color, --colour-link);

package/assets/sass/elements/lists.scss

@@ -1,8 +1,72 @@
-ol li,
-ul li{
+@use "../_func.scss" as *;
+
+@include is('ol, ul','','li'){
   max-width: $content-max-width;
 }
 
+.tick-list {
+
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    padding-bottom: 1rem;
+    padding-left: 2.5rem;
+    
+    &:before {
+      
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 1.5em;
+      
+      background: var(--colour-secondary);
+      mask-image: var(--icon-tick);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-tick);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    &[class*="bg-"] {
+      padding: 1rem;
+      padding-left: 4rem;
+      margin-bottom: 1rem;
+      border-radius: 0.5rem;
+      z-index: 0;
+
+      &:before,
+      &:after {
+      
+        top: 50%;
+        left: 1rem;
+        width: 2rem;
+        height: 2rem;
+        margin-top: -1rem;
+      }
+
+      &:after {
+      
+        content: "";
+        position: absolute;
+        z-index: -1;
+        background-color: white;
+        border-radius: 50%;
+        transform-origin: 50% 50%;
+        transform: scale(0.9);
+      }
+
+    }
+  }
+}
+
+
 .breadcrumb {
 
   font-size: rem(14);

package/assets/sass/elements/panel.scss

@@ -0,0 +1,162 @@
+@use "../_func" as *;
+
+.admin-panel {
+  --panel-gutter: 1rem;
+  --panel-tab-colour: #fafafa;
+  background: var(--bs-body-bg);
+
+  &.bg-secondary{
+
+    background-color: rgba(#b4e6a5,0.3) !important;
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+
+    --panel-tab-colour: transparent;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    --panel-gutter: 1.5rem;
+  }
+
+  padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
+  border: 1px solid var(--colour-border-light);
+  border-top: 3px solid var(--colour-secondary);
+  margin-bottom: 2rem;
+
+  &:empty {
+    display: none;
+  }
+
+  > *:not(.note-feed):first-child {
+    margin-top: var(--panel-gutter);
+  }
+
+  > *:last-child {
+    margin-bottom: var(--panel-gutter);
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    border-bottom: 2px solid var(--colour-border-light);
+    font-size: var(--fs-4);
+    line-height: 1;
+    letter-spacing: 1;
+    padding: var(--panel-gutter) var(--panel-gutter) var(--panel-gutter) var(--panel-gutter);
+    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+    display: block;
+  }
+
+  > .table__wrapper,
+  > .note-feed > .table__wrapper,
+  > .tabs__container:first-child > .tabs > .tab > .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);
+    min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+    
+    table {
+
+      margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
+      min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
+      padding-right: 0;
+
+    }
+
+    tr {
+      :is(th, td) {
+        padding-left: var(--panel-gutter);
+        padding-right: var(--panel-gutter);
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+
+      thead tr:first-child {
+
+        border-top: none;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      tbody tr:last-child {
+
+        border-bottom: none;
+      }
+    }
+  }
+
+  // Table margin top override
+  :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__links, .tabs__links) + :is(.table__wrapper, table, .note-feed) {
+    margin-top: calc(var(--panel-gutter) * -1);
+
+    tr:first-child {
+
+      border-top: none;
+    }
+  }
+}
+
+[class*="col"] .admin-panel:first-child:last-child {
+
+  min-height: calc(100% - 2rem);
+}
+
+.admin-panel .admin-panel__links, 
+.admin-panel > .tabs__container:first-child .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(--bs-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);
+  }
+
+  :is(a, label) {
+    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);
+
+    &:before {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin-right: 0!important;
+
+      &:first-child{
+        border-left: none!important;
+      }
+
+      &:not(:first-child){
+
+        border-left: 1px solid var(--colour-border-light)!important;
+      }
+
+      border-top: 3px solid var(--panel-tab-border, #fafafa);
+    }
+  }
+
+  .current {
+    
+    --is-current: 1;
+    --panel-tab-colour: var(--bs-body-bg);;
+    --panel-tab-border: var(--colour-secondary);
+    pointer-events: none;
+  }
+}

package/assets/sass/elements/tables.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // #region Default table
 table {
   --border-width: 2px;
@@ -17,6 +19,7 @@ td,th {
   border: none;
   font-size: rem(16);
   line-height: rem(24);
+  color: var(--colour-body);
 
   &:first-child {
     padding-left: rem(8);
@@ -97,6 +100,9 @@ table.border-0 {
 // #region Tables are only stacked on mobile
 @media screen and (max-width: 36em) {
   .table__wrapper:not(.table-fullwidth) {
+
+    overflow: hidden;
+
     thead {
       display: none;
     }
@@ -210,6 +216,12 @@ table.border-0 {
 .table__pagination select {
   max-width: rem(240);
 }
+.table__pagination .showing-input-field {
+  min-width: 4.5rem;
+}
+.table__pagination .page-number {
+  min-width: 7rem;
+}
 // #endregion
 
 // #region Reorderable
@@ -255,3 +267,25 @@ table.border-0 {
 }
 
 // #endregion
+
+
+.note-feed {
+
+  td:last-child {
+    min-width: 20rem;
+
+    /*
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    padding-bottom: 0;
+    margin-bottom: 1rem;
+
+    &:hover {
+
+    -webkit-line-clamp: inherit;
+    }
+    */
+  }
+}