@iamproperty/components 3.4.5 → 3.4.7

package/assets/sass/components/dialog.scss

@@ -0,0 +1,202 @@
+@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: 0.5em;
+      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);
+    }
+  }
+
+  &: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

@@ -1,3 +1,5 @@
+@use "../_func" as *;
+
 .form-control__wrapper {
   margin-bottom: 1.5rem;
   max-width: $content-max-width;
@@ -72,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;
@@ -151,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) {
@@ -186,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/header.scss

@@ -5,6 +5,10 @@
   margin-bottom: rem(32);
   position: relative;
   overflow: hidden;
+  max-width: 100%!important;
+
+
+
   @include media-breakpoint-up(md) {
     min-height: rem(470);
   }
@@ -14,6 +18,18 @@
     position: relative;
   }
 
+  .breadcrumb {
+    
+    margin-top: rem(24);
+    margin-bottom: -0.5rem;
+
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      top: 0;
+      left: rem(60);
+    }
+  }
+
   &__inner {
     
     @include reset-colours();
@@ -30,13 +46,14 @@
       margin: rem(112) 0 rem(80) 0;
       padding: rem(56) rem(64);
     }
+
     > *:last-child {
       padding-bottom: 0;
       margin-bottom: 0;
     }
   }
 
-  > picture img {
+  picture img {
     display: none;
     @include media-breakpoint-up(md) {
       display: block;
@@ -50,15 +67,21 @@
     }
   }
 
-  > .container > .breadcrumb {
-    
-    margin-top: rem(24);
-    margin-bottom: -0.5rem;
+}
 
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      top: 0;
-      left: rem(60);
-    }
+// Web component CSS
+::slotted(.breadcrumb){
+  margin-top: rem(24)!important;
+  margin-bottom: -0.5rem!important;
+
+  @include media-breakpoint-up(md) {
+    position: absolute!important;
+    top: 0!important;
+    left: 5.25rem!important;
   }
-}
+}
+
+::slotted(*:last-child) {
+  padding-bottom: 0!important;
+  margin-bottom: 0!important;
+}

package/assets/sass/components/lists.scss

@@ -157,4 +157,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, 
@@ -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 "../../../node_modules/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/panel.scss

@@ -33,7 +33,7 @@
     margin-top: var(--panel-gutter);
   }
 
-  > *:last-child {
+  > *:last-child:not(details) {
     margin-bottom: var(--panel-gutter);
   }
 
@@ -49,7 +49,7 @@
 
   > .table__wrapper,
   > .note-feed > .table__wrapper,
-  > .tabs__container:first-child > .tabs > .tab > .table__wrapper {
+  > .tabs > details > .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);
@@ -105,8 +105,7 @@
   min-height: calc(100% - 2rem);
 }
 
-.admin-panel .admin-panel__links, 
-.admin-panel > .tabs__container:first-child > .tabs__links {
+.admin-panel .admin-panel__links {
 
   margin-top: -3px!important;
   margin-left: calc(var(--panel-gutter) * -1);

package/assets/sass/components/snapshot.scss

@@ -57,7 +57,7 @@
   }
 
   &__title {
-    margin-bottom: 1rem;
+    padding-bottom: 1rem;
 
     &:after {
       content: ":";