@iamproperty/components 3.0.0 → 3.1.0

package/assets/sass/_functions/utilities.scss

@@ -87,113 +87,6 @@ $utilities: map-merge(
 );
 // #endregion
 
-// #region Remove the responsive classes for the spacing utilities
-/*
-The spacing utilities are useful but could be mis-used. The spacing of elements should be defined via the elements/components CSS.
-But at times tweaks/fixes to spacing needs to be made and can prevent the need of duplicate CSS to be created.
-However our spacing rules should be consistant across devices and we shouldn't allow device specific 'fixes' to be made
-Removing the resposive classes aves around 8kbs
-*/
-$utilities: map-merge(
-  $utilities,
-  (
-    // Padding
-    "padding": map-merge(
-      map-get($utilities, "padding"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-x": map-merge(
-      map-get($utilities, "padding-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-y": map-merge(
-      map-get($utilities, "padding-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-top": map-merge(
-      map-get($utilities, "padding-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-end": map-merge(
-      map-get($utilities, "padding-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-bottom": map-merge(
-      map-get($utilities, "padding-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-start": map-merge(
-      map-get($utilities, "padding-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Margin
-    "margin": map-merge(
-      map-get($utilities, "margin"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-x": map-merge(
-      map-get($utilities, "margin-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-y": map-merge(
-      map-get($utilities, "margin-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-top": map-merge(
-      map-get($utilities, "margin-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-end": map-merge(
-      map-get($utilities, "margin-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-bottom": map-merge(
-      map-get($utilities, "margin-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-start": map-merge(
-      map-get($utilities, "margin-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Gap
-    "gap": map-merge(
-      map-get($utilities, "gap"),
-      (
-        responsive: false
-      ),
-    ),
-  )
-);
-// #endregion
-
 // #region Fonts
 $utilities: map-merge(
   $utilities,

package/assets/sass/_tests/colours.spec.scss

@@ -23,7 +23,7 @@ $test_colors: map-merge((
   "hover": var(--colour-hover-theme),
   "active-theme": #b4e6a5,
   "active": var(--colour-active-theme),
-  "selected-theme": #b4e6a5,
+  "selected-theme": #1ebee6,
   "selected": var(--colour-selected-theme)
 ), $test_colors);
 

package/assets/sass/components/carousel.scss

@@ -53,7 +53,7 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
 
 // #region carousel controls/pips
 .carousel:not(.hide-controls) {
-  padding-bottom: 4.5rem;
+  padding-bottom: 4.5rem!important;
 }
 
 .carousel.hide-controls .carousel__controls {

package/assets/sass/components/nav.scss

@@ -916,4 +916,46 @@ nav + main > *:first-child {
     }
   }
 }
+// #endregion
+
+// #region
+
+.nav--just-account {
+
+  .nav__menu,
+  .nav__account-btn {
+    display: none!important;
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    .nav__menu,
+    .nav__account-btn {
+      display: block!important;
+    }
+  }
+
+  #showMenu:checked ~ .nav__menu--account {
+    height: 100vh;
+    overflow: visible;
+    overflow-x: auto;
+    left: 0;
+    pointer-events: none;
+    background: transparent;
+
+    @include media-breakpoint-up(sm) {
+    
+      width: rem(375);
+      left: calc(100% - #{rem(375)});
+    }
+
+    > .container:first-child {
+      opacity: 0;
+    }
+    > .container:not(:first-child) {
+      pointer-events: all;
+    }
+  }
+}
+
 // #endregion

package/assets/sass/elements/buttons.scss

@@ -19,7 +19,7 @@
   border-radius: rem(20);
   margin-bottom: rem(24);
   margin-right: rem(16);
-  transition: background-color .5s, color .5s;
+  transition: all .5s, color .5s;
   height: auto;
 
   a:hover &,
@@ -79,6 +79,11 @@
   &.btn-tag.btn-primary {
     --btn-bg: var(--colour-warning);
   }
+
+  &.btn-admin:not(:hover):not(:focus) {
+    background: var(--colour-admin);
+    border-color: var(--colour-admin)!important;
+  }
 }
 
 input:checked + .btn:not(:hover):not(:focus),
@@ -96,9 +101,9 @@ details[open] > summary.btn:first-child {
 
 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);
+  background: var(--colour-selected);
+  border-color: var(--colour-selected)!important;
+  color: var(--colour-primary);
 }
 
 
@@ -205,6 +210,43 @@ input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:
     width: 100%;
   }
 }
+
+.btn-group--admin {
+
+  position: relative;
+
+  &:before {
+    content: "";
+    width: calc(100% - 2px);
+    height: rem(48);
+    background-color: var(--colour-admin)!important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: 0.5rem!important;
+  }
+
+  > .btn:not(:hover):not(:focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-admin);
+
+    border-color: var(--colour-admin)!important;
+  }
+
+  > .btn:is(:hover, :focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-selected);
+
+    border-color: var(--colour-admin)!important;
+    color: var(--colour-primary);
+  }
+
+  > input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active) {
+    border-color: var(--colour-admin)!important;
+
+  }
+}
 // #endregion
 
 @import "../../../node_modules/bootstrap/scss/_button-group.scss";

package/assets/sass/elements/card.scss

@@ -84,6 +84,26 @@ a.card {
   }
 }
 
+.card-banner {
+  padding: 0.5rem;
+
+  &__tag {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--colour-secondary);
+    font-size: rem(14);
+    font-weight: bold;
+    aspect-ratio: 1;
+    padding: 0.75rem;
+    border-radius: 50%;
+    transform: translate(-0.25rem,-1.25rem) rotate(-25deg);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;
+
+  }
+}
+
 .card-body {
 
   color: var(--colour-body);
@@ -175,3 +195,95 @@ a.card {
   }
 }
 // #endregion
+
+// #region Small cards 
+.card--small {
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: 0.5rem;
+
+  .card-header__wrapper,
+  .card-body > *:not(.card-title) {
+    display: none;
+  }
+
+  .card-body,
+  .card-footer {
+    padding: 0.5rem;
+  }
+
+  .card-title {
+    margin: 0;
+  }
+
+  .btn {
+    margin-right: 0;
+    white-space: nowrap;
+
+    &:not(.btn--link) {
+      padding: 0.5em 1em
+    }
+  }
+
+  &:not([target="_blank"]) .btn-primary:not(.btn--link):after {
+      
+    content: "";
+    height: 1em;    
+    width: 1em;
+    margin-left: 0.5em;
+    margin-right: -0.5em;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -0.15em;
+
+    mask-image: var(--icon-arrow);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    mask-position: 0 0;
+  
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 0 0;
+    background-color: currentColor;
+  }
+
+    
+  @include media-breakpoint-up(md) {
+
+    flex-wrap: wrap;
+    .card-footer {
+      min-width: 100%;
+      text-align: right;
+    }
+  }
+}
+
+.card--danger,
+.card--warning,
+.card--success {
+  position: relative;
+  padding-left: 1.5rem;
+
+  &:after {
+
+    content: "";
+    height: 100%;
+    width: 1rem;
+    background: var(--colour-danger);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.card--warning:after {
+  background: var(--colour-warning);
+}
+.card--success:after {
+  background: var(--colour-success);
+}
+// #endregion

package/assets/sass/elements/container.scss

@@ -15,12 +15,11 @@
     max-width: rem(1440);
   }
   
-  .container {
+  .container:not(.container-xs-breakout) {
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-top: 0;
-    content-visiblity: unset!important; /* We only want to delay the painting of top level containers */
   }
 
   &[class*="bg-"] {
@@ -45,6 +44,18 @@
     clear: both;
     content: "";
   }
+
+  &.container-xs-breakout {
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+    width: calc(100% + 2.5rem);
+
+    @include media-breakpoint-up(sm) {
+      margin-left: auto;
+      margin-right: auto;
+      width: 100%;
+    }
+  }
 }
 // #endregion
 

package/assets/sass/elements/forms.scss

@@ -192,3 +192,71 @@ select[multiple]::-webkit-scrollbar-thumb {
 }
 
 // #endregion
+
+
+// #region large upload field
+
+.form-control__wrapper.form-control--lrg-file {
+  aspect-ratio: 4/2;
+  border: 1px dashed var(--colour-selected);
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left:50%;
+    transform: translate(-50%,calc(-50% - 1rem));
+    color: var(--colour-muted);
+    font-size: 5rem;
+    height: 1em;
+    width: 1em;
+    pointer-events: none;
+  }
+
+  > label {
+    
+    position: absolute;
+    top: calc(50% + 2rem);
+    left:50%;
+    transform: translate(-50%,-50%);
+    width: 100%;
+    text-align: center;
+  }
+
+  > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+  }
+
+  .file-uploaded & {
+    border: 3px solid var(--colour-success);
+    border-radius: 50%;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    max-width: 10rem;
+
+    > label {
+      content: "File uploaded";
+    }
+  }
+}
+
+.file-upload__add {
+  display: none;
+
+  .file-uploaded & {
+    display: block;
+    margin-inline: auto;
+    color: var(--colour-muted);
+    font-size: rem(14);
+    text-align: center;
+    margin-top: -1rem;
+    margin-bottom: 1rem;
+    cursor: pointer;
+  }
+}
+// #endrgion

package/assets/sass/elements/links.scss

@@ -43,7 +43,8 @@ a,
     @include var (color, --colour-active);
   }
 
-  &[target="_blank"]:after {
+  &[target="_blank"]:not(.card):after,
+  &.card[target="_blank"] .btn:after {
     
     content: "";
     height: 1em;    

package/assets/sass/elements/lists.scss

@@ -50,7 +50,7 @@
 
     &.tick--incomplete:before {
 
-      background: currentColor;
+      background: var(--colour-admin);
       mask-image: none;
       -webkit-mask-image: none;
       border-radius: 50%;
@@ -110,4 +110,51 @@
       text-transform: uppercase;
     }
   }
+}
+
+.orderable-list {
+
+  margin-left: 3.5rem;
+  counter-reset: countItem; 
+  padding-left: 0;
+
+  li {
+    position: relative;
+    list-style: none;
+    --spread: 0.75rem;
+    box-shadow: 0 2px var(--spread) 0 rgba(154, 154, 154, 0.25);
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+    cursor: grab;
+  }
+
+  li:before {
+    content: "";
+    --gradient-direction: 180deg;
+    background-color: var(--colour-info);
+    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
+    height: 100%;
+    width: 2.5rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    right: calc(100% + 1rem);
+    border-radius: 0.5rem;
+  }
+
+  li:after {
+    counter-increment: countItem; /* Increment the value of section counter by 1 */
+    content: counter(countItem);
+    height: 2rem;
+    width: 2.5rem;
+    line-height: 2rem;
+    font-size: rem(20);
+    font-weight: bold;
+    display: inline-block;
+    position: absolute;
+    top: calc(50% - 1rem);
+    right: calc(100% + 1rem);
+    text-align: center;
+  }
 }

package/assets/sass/elements/tables.scss

@@ -99,7 +99,7 @@ table.border-0 {
 
 // #region Tables are only stacked on mobile
 @media screen and (max-width: 36em) {
-  .table__wrapper:not(.table-fullwidth) {
+  .table__wrapper:not(.table-fullwidth):not(.client-table) {
 
     overflow: hidden;
 

package/assets/sass/foundations/icons.scss

@@ -26,6 +26,14 @@
   & + .icon {
     margin-inline-start: 1rem;
   }
+
+  &[class*="fs-"] {
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: text-top;
+    margin-top: -0.15em;
+    margin-inline: 0.25em;
+  }
 }
 
 @include inline-text(){

package/assets/sass/foundations/root.scss

@@ -104,4 +104,23 @@
     
     --colour-underline: white;
   }
+}
+
+
+
+@include media-breakpoint-up(md) {
+
+  .invert-colours-md {
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
+    }
+    color: white;
+    --colour-underline: white;
+  }
+
+  [class*="bg-"].bg-md-transparent {
+    background: transparent!important;
+  }
 }

package/assets/ts/main.ts

@@ -3,7 +3,7 @@
 import * as helpers from '../js/modules/helpers'
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
-import accordion from './modules/accordion'
+import accordion from '../js/modules/accordion'
 import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'