@iamproperty/components 3.1.0 → 3.2.0

package/assets/sass/components/drawer.scss

@@ -1,47 +1,47 @@
-@use "../_func" as *;
-
-.drawer__btn {
-
-  position: sticky;
-  bottom: 1.5rem;
-  left: 0;
-  width: 100%;
-  z-index: var(--index-floating);
-  margin-bottom: -6rem;
-
-  .btn {
-    margin-bottom: 0;
-  }
-}
-
-.drawer {
-
-  > .container:first-child {
-    display: none;
-    margin-bottom: -2rem;
-    position: relative;
-    z-index: var(--index-focus);
-  }
-
-  margin-top: 1rem;
-  padding-top: 2rem;
-  position: relative;
-  z-index: var(--index-menu);
-  background: rgb(255,255,255);
-  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 1.5rem, rgba(255,255,255,1) 100%);
-}
-
-#showDrawer:checked ~ .drawer {
-  
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgb(255,255,255);
-  //border-top: 1px solid var(--colour-border);
-  box-shadow: 0 -1px 20px -10px rgb(51 51 51 / 25%);
-
-  > .container:first-child {
-    display: block;
-  }
+@use "../_func" as *;
+
+.drawer__btn {
+
+  position: sticky;
+  bottom: 1.5rem;
+  left: 0;
+  width: 100%;
+  z-index: var(--index-floating);
+  margin-bottom: -6rem;
+
+  .btn {
+    margin-bottom: 0;
+  }
+}
+
+.drawer {
+
+  > .container:first-child {
+    display: none;
+    margin-bottom: -2rem;
+    position: relative;
+    z-index: var(--index-focus);
+  }
+
+  margin-top: 1rem;
+  padding-top: 2rem;
+  position: relative;
+  z-index: var(--index-menu);
+  background: rgb(255,255,255);
+  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 1.5rem, rgba(255,255,255,1) 100%);
+}
+
+#showDrawer:checked ~ .drawer {
+  
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgb(255,255,255);
+  //border-top: 1px solid var(--colour-border);
+  box-shadow: 0 -1px 20px -10px rgb(51 51 51 / 25%);
+
+  > .container:first-child {
+    display: block;
+  }
 }

package/assets/sass/components/header.scss

@@ -1,64 +1,64 @@
-@use "../_func" as *;
-
-.header-banner {
-  background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
-  margin-bottom: rem(32);
-  position: relative;
-  overflow: hidden;
-  @include media-breakpoint-up(md) {
-    min-height: rem(470);
-  }
-
-  > .container {
-    padding-bottom: 0;
-    position: relative;
-  }
-
-  &__inner {
-    
-    @include reset-colours();
-
-    color: var(--colour-body);
-    background: white;
-    padding: rem(32);
-    margin: rem(30) 0;
-    position: relative;
-    z-index: var(--index-above);
-    
-    @include media-breakpoint-up(md) {
-      max-width: rem(600);
-      margin: rem(112) 0 rem(80) 0;
-      padding: rem(56) rem(64);
-    }
-    > *:last-child {
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  > picture img {
-    display: none;
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      top: -0.5%;
-      left: 40%;
-      height: 101%;
-      object-fit: cover;
-      width: 60%;
-      pointer-events: none;
-    }
-  }
-
-  > .container > .breadcrumb {
-    
-    margin-top: rem(24);
-    margin-bottom: -0.5rem;
-
-    @include media-breakpoint-up(md) {
-      position: absolute;
-      top: 0;
-      left: rem(60);
-    }
-  }
+@use "../_func" as *;
+
+.header-banner {
+  background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
+  margin-bottom: rem(32);
+  position: relative;
+  overflow: hidden;
+  @include media-breakpoint-up(md) {
+    min-height: rem(470);
+  }
+
+  > .container {
+    padding-bottom: 0;
+    position: relative;
+  }
+
+  &__inner {
+    
+    @include reset-colours();
+
+    color: var(--colour-body);
+    background: white;
+    padding: rem(32);
+    margin: rem(30) 0;
+    position: relative;
+    z-index: var(--index-above);
+    
+    @include media-breakpoint-up(md) {
+      max-width: rem(600);
+      margin: rem(112) 0 rem(80) 0;
+      padding: rem(56) rem(64);
+    }
+    > *:last-child {
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  > picture img {
+    display: none;
+    @include media-breakpoint-up(md) {
+      display: block;
+      position: absolute;
+      top: -0.5%;
+      left: 40%;
+      height: 101%;
+      object-fit: cover;
+      width: 60%;
+      pointer-events: none;
+    }
+  }
+
+  > .container > .breadcrumb {
+    
+    margin-top: rem(24);
+    margin-bottom: -0.5rem;
+
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      top: 0;
+      left: rem(60);
+    }
+  }
 }

package/assets/sass/components/modal.scss

@@ -1,136 +1,136 @@
-@use "sass:math";
-@use "../_func" as *;
-
-.modal {
-  display: none;
-}
-
-.modal:target {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.25);
-  z-index: var(--index-overlay);
-  border: none;
-  overscroll-behavior: contain;
-
-  > a:first-child {
-      
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 8 8, pointer;
-  }
-
-  > button {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      z-index: var(--index-focus);
-      top: 50%;
-      transform: translate(0,-50%);
-      overflow: hidden;
-      text-indent: 300%;
-      width: 2rem;
-      height: 2rem;
-
-      &.btn:not(:hover):not(:focus) {
-        background-color: white;
-      }
-
-      &.modal__dock--left {
-        right: calc(50% + #{rem(math.div(820,2))} + 1rem);
-        
-        &:after {
-          transform: rotate(-180deg);
-        }
-      }
-      &.modal__dock--right {
-        left: calc(50% + #{rem(math.div(820,2))} + 1rem);
-      }
-    }
-  }
-
-
-  &.modal--left button.modal__dock--left {
-    display: none;
-  }
-
-  &.modal--left button.modal__dock--right {
-    left: calc(#{rem(640)} + 2rem);
-  }
-
-  &.modal--right button.modal__dock--right {
-    display: none;
-  }
-
-  &.modal--right button.modal__dock--left {
-    right: calc(#{rem(640)} + 2rem);
-  }
-}
-
-
-.modal__outer {
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 90%;
-  max-width: rem(820);
-  height: fit-content;
-  max-height: 90%;
-  overflow: visible;
-  transform: translate(-50%,-50%);
-
-  > .btn:first-child {
-    position: absolute;
-    top: 0;
-    right: 0;    
-    margin-top: -0.75rem;
-    margin-right: -0.75rem;
-    z-index: var(--index-focus);
-
-    &:not(:hover):not(:focus):not(:active){
-      background: white;
-    }
-  }
-  @include media-breakpoint-up(md) {
-    .modal--left & {
-      left: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-
-    .modal--right & {
-      left: auto;
-      right: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-  }
-}
-
-.modal__inner {
-  background: white;
-  overscroll-behavior: contain;
-  height: fit-content;
-  max-height: 90vh;
-  overflow: auto;
-
-  & > *:first-child {
-
-    padding: 1rem;
-    @include media-breakpoint-up(sm) {
-
-      padding: 2rem;
-    }
-  }
-}
+@use "sass:math";
+@use "../_func" as *;
+
+.modal {
+  display: none;
+}
+
+.modal:target {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.25);
+  z-index: var(--index-overlay);
+  border: none;
+  overscroll-behavior: contain;
+
+  > a:first-child {
+      
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 8 8, pointer;
+  }
+
+  > button {
+    display: none;
+
+    @include media-breakpoint-up(md) {
+      display: block;
+      position: absolute;
+      z-index: var(--index-focus);
+      top: 50%;
+      transform: translate(0,-50%);
+      overflow: hidden;
+      text-indent: 300%;
+      width: 2rem;
+      height: 2rem;
+
+      &.btn:not(:hover):not(:focus) {
+        background-color: white;
+      }
+
+      &.modal__dock--left {
+        right: calc(50% + #{rem(math.div(820,2))} + 1rem);
+        
+        &:after {
+          transform: rotate(-180deg);
+        }
+      }
+      &.modal__dock--right {
+        left: calc(50% + #{rem(math.div(820,2))} + 1rem);
+      }
+    }
+  }
+
+
+  &.modal--left button.modal__dock--left {
+    display: none;
+  }
+
+  &.modal--left button.modal__dock--right {
+    left: calc(#{rem(640)} + 2rem);
+  }
+
+  &.modal--right button.modal__dock--right {
+    display: none;
+  }
+
+  &.modal--right button.modal__dock--left {
+    right: calc(#{rem(640)} + 2rem);
+  }
+}
+
+
+.modal__outer {
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 90%;
+  max-width: rem(820);
+  height: fit-content;
+  max-height: 90%;
+  overflow: visible;
+  transform: translate(-50%,-50%);
+
+  > .btn:first-child {
+    position: absolute;
+    top: 0;
+    right: 0;    
+    margin-top: -0.75rem;
+    margin-right: -0.75rem;
+    z-index: var(--index-focus);
+
+    &:not(:hover):not(:focus):not(:active){
+      background: white;
+    }
+  }
+  @include media-breakpoint-up(md) {
+    .modal--left & {
+      left: 1rem;
+      transform: translate(0,-50%);
+      max-width: 40rem;
+    }
+
+    .modal--right & {
+      left: auto;
+      right: 1rem;
+      transform: translate(0,-50%);
+      max-width: 40rem;
+    }
+  }
+}
+
+.modal__inner {
+  background: white;
+  overscroll-behavior: contain;
+  height: fit-content;
+  max-height: 90vh;
+  overflow: auto;
+
+  & > *:first-child {
+
+    padding: 1rem;
+    @include media-breakpoint-up(sm) {
+
+      padding: 2rem;
+    }
+  }
+}