@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/components/dialog.scss

@@ -0,0 +1,208 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// non-js fallback
+body:not(.js-enabled) dialog:not([open]):target {
+  display: block;
+}
+
+// #region Default styling of both modals and popovers
+dialog[open] {
+
+  --dialog-padding: #{rem(24)};
+
+  width: fit-content;
+  height: fit-content;  
+  border: none;
+  overscroll-behavior: contain;
+  background: white;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+  border-radius: rem(28);
+  padding: var(--dialog-padding);
+
+  // Close button
+  > form:first-child {
+
+    position: static;
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    position: absolute;
+    top: var(--dialog-padding);
+    right: var(--dialog-padding);
+    z-index: var(--index-floating);
+
+    text-indent: 300%;
+    overflow: hidden;
+    border: none;
+    height: rem(20);
+    width: rem(20);
+    background: transparent;
+
+    &:after {
+      content: "";
+      top: 0;
+      left: 0;
+      position: absolute;
+      display: block;
+      height: rem(20);
+      width: rem(20);
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-close);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-close);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    & + * {
+      padding-right: rem(36);
+    }
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+  > :is(p):last-child {
+    padding-bottom: 0;
+  }
+}
+// #endregion
+
+// #region modal styling
+*:not(.dialog__wrapper) > dialog[open] {
+  
+  min-width: 100%;
+  max-width: 80vw;
+  max-height: 85vh;
+  margin-top: 12vh;
+
+  @include media-breakpoint-up(sm) {
+    
+    --dialog-padding: #{rem(56)};
+
+    min-width: 80vw;
+    max-height: 80vh;
+    margin-top: auto;
+    border-radius: rem(34);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(1112);
+    width: rem(1112);
+    max-width: rem(1112);
+  }
+
+  &:has(.youtube-embed){
+    padding: 0!important;
+  }
+}
+
+
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+}
+// #endregion
+
+// #region popover styling
+.dialog__wrapper {
+
+  position: relative;
+  display: inline-block;
+
+
+  > .btn:first-child {
+    &: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-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%;
+
+      transform: rotate(90deg);
+    }
+
+    &.active:after {
+
+      transform: rotate(-90deg);
+    }
+  }
+
+  &:has(dialog[open]) > .btn:first-child:after {
+
+    transform: rotate(270deg);
+  }
+
+  > dialog[open] {
+
+    left: 0;
+    top: 100%;
+    z-index: var(--index-floating);
+    min-width: rem(320);
+    border-radius: rem(16);
+    max-width: rem(600);
+  }
+
+  &.dialog__wrapper--right > dialog[open]{
+
+    right: 0;
+    left: auto;
+  }  
+
+  @include media-breakpoint-up(sm) {
+    
+    &.dialog__wrapper--sm-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--sm-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }  
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    &.dialog__wrapper--md-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--md-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }  
+  }
+}
+
+// Show hide the indidual or multiple label
+.dialog__wrapper:has(input:checked) .empty,
+.dialog__wrapper:not(:has(input:checked)) .individual,
+.dialog__wrapper:has(input:checked ~ input:checked) .individual,
+.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+
+  display: none;
+}
+// #endregion

package/assets/sass/components/forms.scss

@@ -74,9 +74,41 @@
   }
 }
 
+
+.form-control__wrapper.form-control--inline-text {
+
+  display: inline;
+
+  label {
+    display: inline;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  select {  
+    display: inline;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    padding: 0 5px;
+    margin: 0 -5px;
+    display: inline-block;
+    width: auto;
+    padding-right: $form-select-padding-x;
+    background-position: right 0.2rem center;
+  }
+}
+
 // #region checkbox
 .form-check {
 
+  overflow: hidden;
+
   input,
   label {
     cursor: pointer;
@@ -153,21 +185,21 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 .form-control__wrapper :is(.prefix,.suffix) {
 
-  color: #212529;
-  background: #e9ecef;
+  color: var(--colour-white);
+  background: var(--colour-primary);
   padding: 0.75em 1em;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.5;
   position: absolute;
-  bottom: 1px;
+  bottom: 2px;
 }
 
 .form-control__wrapper .prefix {
 
   border-top-left-radius: 0.625rem;
   border-bottom-left-radius: 0.625rem;
-  left: 1px;
+  left: 0;
 }
 
 .form-control__wrapper :is(.prefix-sm,.suffix-sm) {
@@ -188,7 +220,7 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 .form-control__wrapper .suffix {
   left: auto;
-  right: 1px;
+  right: 0;
   border-top-right-radius: 0.625rem;
   border-bottom-right-radius: 0.625rem;
 }

package/assets/sass/components/lists.scss

@@ -32,6 +32,10 @@
       -webkit-mask-size: 100%;
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: 50% 50%;
+      @media (forced-colors: active) {
+        content: "\2713";
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--warning:before {
@@ -39,6 +43,11 @@
       background: var(--colour-warning);
       mask-image: var(--icon-warning);
       -webkit-mask-image: var(--icon-warning);
+      @media (forced-colors: active) {
+        content: "!";
+        mask-image: none;
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--danger:before {
@@ -46,6 +55,11 @@
       background: var(--colour-danger);
       mask-image: var(--icon-warning);
       -webkit-mask-image: var(--icon-warning);
+      @media (forced-colors: active) {
+        content: "!";
+        mask-image: none;
+        -webkit-mask-image: none;
+      }
     }
 
     &.tick--incomplete:before {
@@ -157,4 +171,19 @@
     right: calc(100% + 1rem);
     text-align: center;
   }
+}
+
+// list wrapper to apply a min height
+.list__wrapper {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.list__wrapper--small {
+  max-height: 12.5rem;
+}
+.list__wrapper--medium {
+  max-height: 25rem;
+}
+.list__wrapper--large {
+  max-height: 37.5rem;
 }

package/assets/sass/components/nav.scss

@@ -32,8 +32,8 @@
 
 // #region General styles
 .nav {
-
   
+  overflow-x: hidden;
   font-weight: bold;
 
   &__inner, 
@@ -400,7 +400,7 @@ nav + main > *:first-child {
   position: absolute;
   top: 0;
   left: 100%;
-  background: var(--body-bg);
+  background: var(--colour-canvas);
   z-index: 2;
   width: 100%;
   overscroll-behavior: contain;
@@ -416,6 +416,10 @@ nav + main > *:first-child {
   height: 100vh;
 }
 
+.nav:has(#showMenu:checked){
+  min-height: 100vh;
+}
+
 #showMenu:checked ~ .nav__inner,
 #showAccount:checked ~ .nav__menu--account {
 

package/assets/sass/components/pagination.scss

@@ -0,0 +1,140 @@
+@use "../_func" as *;
+
+@import "../../bootstrap/scss/_pagination.scss";
+
+// #region Basic fixes
+.pagination {
+  gap: rem(4);
+  padding-top: rem(24);
+}
+
+.pagination .page-link {
+  font-size: rem(14);
+  width: rem(28);
+  line-height: rem(28);
+  padding: 0;
+  text-align: center;
+  overflow: hidden;
+  border: none!important;
+}
+
+.pagination .page-item {
+  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+  border-radius: 4px!important;
+  @include transition($pagination-transition);
+
+  &:hover {
+    border-color: var(--#{$prefix}pagination-hover-border-color);
+  }
+
+  &:focus {
+    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+  }
+
+  &.active {
+    border-color: var(--#{$prefix}pagination-active-border-color);
+  }
+
+  &.disabled {
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
+  }
+}
+// #endregion
+
+// #region First and last buttons
+.pagination .page-item {
+
+  &:first-child .page-link,
+  &:last-child .page-link {
+
+    overflow: hidden;
+    text-indent: -300%;
+    background: currentColor;
+    mask-image: var(--icon-arrow);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+
+  &:first-child .page-link,
+  {
+    transform: rotate(180deg);
+  }
+}
+// #endregion
+
+// #region Minimise the amount of buttons on display 
+.pagination:has(.page-item:nth-child(8)) {
+
+  .page-item {
+    display: none;
+  }
+
+  .page-item:is(:first-child, :last-child, :nth-child(2), :nth-last-child(2)) {
+    display: block;
+  }
+
+  .page-item.active {
+    display: block;
+  }
+  
+  .page-item:has(+ .active),
+  .page-item.active + .page-item,
+  .page-item:nth-child(2).active + .page-item + .page-item,
+  .page-item:has(+ .page-item + .page-item:nth-last-child(2).active) {
+    display: block;
+  }
+
+  .page-item:nth-child(2),
+  .page-item:nth-last-child(2) {
+
+    margin-right: rem(4 + 28);
+    position: relative;
+
+    &:after {
+      content: "...";
+      display: block;
+      width: rem(28);
+      line-height: rem(28);
+      position: absolute;
+      left: calc(100% + #{rem(4)} + 2px);
+      top: -1px;
+      pointer-events: none;
+      border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+
+      border-radius: 4px;
+      text-align: center;
+    }
+  }
+
+  .page-item:nth-last-child(2) {
+
+    margin-left: rem(4 + 28);
+    margin-right: 0;
+
+    &:after {
+      left: auto;
+      right: calc(100% + #{rem(4)} + 2px);
+    }
+  }
+
+  .page-item:nth-child(2).active,
+  .page-item:nth-child(2):has(+ .active),
+  .page-item:nth-child(2):has(+ .page-item + .active),
+  .page-item:nth-last-child(4).active + .page-item + .page-item,
+  .page-item:nth-last-child(3).active + .page-item,
+  .page-item:nth-last-child(2).active {
+  
+    margin-left: 0;
+    margin-right: 0;
+
+    &:after {
+      display: none;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/stepper.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  border: 1px solid var(--body-bg);
+  border: 1px solid var(--colour-canvas);
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   ol {
     margin: 0;
     z-index: 1;
-    background: var(--body-bg);
+    background: var(--colour-canvas);
     counter-reset: section;
     width: 100%;
     overflow: auto;
@@ -40,7 +40,7 @@
     li {
       width: 100%;
       max-width: 100%;
-      background: var(--body-bg);
+      background: var(--colour-canvas);
       padding: 1px;
 
       @include media-breakpoint-up(sm) {