@iamproperty/components 2.7.7 → 2.9.0

package/assets/sass/_print.scss

@@ -1,62 +1,62 @@
-@use "_func" as *;
-
-$printMedia: print!default;
-@media #{$printMedia} {
-  :root {
-  --content-max-width: 100%;
-  }
-  html {
-    font-size: 11pt;
-    padding-left: 10px;
-    padding-right: 10px;
-
-    body {
-      background: white;
-      height: auto;
-      min-height: 100%;
-    }
-  }
-  .container {
-    padding-left: 0;
-    padding-right: 0;
-    overflow: hidden;
-  }
-  .print-header {
-    background-image: linear-gradient(45deg, var(--colour-secondary) 0%, transparent 80%) !important;
-  }
-  p a[href^=http]:after,
-  p a[href^=mailto]:after,
-  a.youtube-embed:after {
-    content: " (" attr(href) ")";
-    display: inline!important;
-    color: inherit;
-    mask: none;
-    -webkit-mask: none;
-    background: none;
-  }
-
-  // Nav fixes 
-  .nav {
-    position: relative;
-    box-shadow: none!important;
-  }
-  .nav [class*="col"]:not(.nav__logo){
-    display: none;
-  }
-  nav + main > *:first-child {
-    padding-top: 0;
-  }
-}
-@media print {
-  
-  html {
-    padding: 0;
-  }
-  
-  tr, img, svg, li {
-    break-inside: avoid;
-  }
-  [class*="bg-"]:not(.print-header) {
-    background: none!important;
-  }
+@use "_func" as *;
+
+$printMedia: print!default;
+@media #{$printMedia} {
+  :root {
+  --content-max-width: 100%;
+  }
+  html {
+    font-size: 11pt;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    body {
+      background: white;
+      height: auto;
+      min-height: 100%;
+    }
+  }
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+  }
+  .print-header {
+    background-image: linear-gradient(45deg, var(--colour-secondary) 0%, transparent 80%) !important;
+  }
+  p a[href^=http]:after,
+  p a[href^=mailto]:after,
+  a.youtube-embed:after {
+    content: " (" attr(href) ")";
+    display: inline!important;
+    color: inherit;
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+  }
+
+  // Nav fixes 
+  .nav {
+    position: relative;
+    box-shadow: none!important;
+  }
+  .nav [class*="col"]:not(.nav__logo){
+    display: none;
+  }
+  nav + main > *:first-child {
+    padding-top: 0;
+  }
+}
+@media print {
+  
+  html {
+    padding: 0;
+  }
+  
+  tr, img, svg, li {
+    break-inside: avoid;
+  }
+  [class*="bg-"]:not(.print-header) {
+    background: none!important;
+  }
 }

package/assets/sass/components/accordion.scss

@@ -1,197 +1,197 @@
-@use "../_func.scss" as *;
-
-// Accordion
-.accordion {
-  --accordion-indent: 0.75rem;
-  --accordion-right-padding: 3rem;
-  --accordion-y-padding: 1rem;
-  --accordion-icon-size: #{rem(30)};
-  --accordion-icon-top: #{rem(12)};
-
-  @include media-breakpoint-up(md) {
-    //--accordion-indent: 1rem;
-    --accordion-right-padding: 6rem;
-    --accordion-y-padding: 2rem;
-    --accordion-icon-size: #{rem(48)};
-    --accordion-icon-top: #{rem(20)};
-  }
-}
-
-.accordion-button {
-
-  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
-  color: var(--colour-heading);
-  text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
-  overflow-anchor: none;
-  @include transition($accordion-transition);
-
-  --marker-bg: var(--colour-secondary);
-  cursor: pointer;
-  position: relative;
-
-  .badge {
-    vertical-align: bottom;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    margin-bottom: 0.1em;
-  }
-
-
-  &:before,
-  &:after {
-
-    content: "";
-    position: absolute;
-    right: var(--accordion-indent);
-    top: var(--accordion-icon-top);
-    margin-top: var(--accordion-icon-size-half);
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-  }
-
-  &:before {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    background: var(--marker-bg);
-    border-radius: 100%;
-  }
-
-  // Accordion icon
-  &::after {
-    background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-  
-    -webkit-mask-image: escape-svg($accordion-button-icon);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-
-    @include transition($accordion-icon-transition);
-    transform: rotate(90deg);
-  }
-
-  &:hover,
-  &:focus {
-
-    --marker-bg: var(--colour-warning);
-    color: var(--colour-hover);
-  }
-
-  &:hover {
-    z-index: var(--index-focus);
-  }
-
-  &:focus {
-    z-index: var(--index-focus);
-    border-color: $accordion-button-focus-border-color;
-    outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
-  }
-
-  [open] > summary > & {
-    color: var(--colour-heading);
-    background-color: $accordion-button-active-bg;
-    
-    &::after {
-      
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-// #region Coloured summary
-summary[class*="bg-"] {
-
-  .accordion-button {
-
-    border-bottom: 1px solid var(--colour-border);
-    margin-bottom: -1px;
-
-    &:before {
-      background: none!important;
-    }
-  }
-
-  &:hover .accordion-button {
-    opacity: 0.8;
-  }
-
-  & + .accordion-body {
-
-    padding-top: 2rem;
-  }
-}
-// #endregion
-
-
-
-.accordion-header {
-  margin-bottom: 0;
-}
-
-.accordion-item {
-  background-color: $accordion-bg;
-  border-bottom: $accordion-border-width solid $accordion-border-color;
-  margin-bottom: 2rem;
-
-  &:first-of-type {
-    border-top: $accordion-border-width solid $accordion-border-color;
-  }
-
-  & + .accordion-item {
-    margin-top: -2rem;
-  }
-}
-
-.accordion-body {
-  text-align: left;
-  padding: 0 $accordion-body-padding-x;
-}
-
-// #region Straight edge
-.accordion--straight {
-  > details > summary:not([class*="bg-"]) > .accordion-button,
-  > details > .accordion-body {
-    padding-left: 0!important;
-  }
-
-  > details > .accordion-body {
-    padding-right: 0!important;
-  }
-}
-// #endregion
-
-// #region Child accordion
-.accordion .accordion {
-
-  &:first-child {
-
-    padding-top: 1rem;
-  }
-
-  &:last-child {
-
-    padding-bottom: 2rem;
-  }
-
-  .accordion-button {
-    padding: 1rem 3rem 1rem var(--accordion-indent);
-
-    &:before,
-    &:after {
-      top: 0.75rem;
-      height: 2rem;
-      width: 2rem;
-      right: 0.5rem;
-    }
-    &:before {
-      background-color: var(--colour-light);
-    }
-  }
-}
-// #endregion
+@use "../_func.scss" as *;
+
+// Accordion
+.accordion {
+  --accordion-indent: 0.75rem;
+  --accordion-right-padding: 3rem;
+  --accordion-y-padding: 1rem;
+  --accordion-icon-size: #{rem(30)};
+  --accordion-icon-top: #{rem(12)};
+
+  @include media-breakpoint-up(md) {
+    //--accordion-indent: 1rem;
+    --accordion-right-padding: 6rem;
+    --accordion-y-padding: 2rem;
+    --accordion-icon-size: #{rem(48)};
+    --accordion-icon-top: #{rem(20)};
+  }
+}
+
+.accordion-button {
+
+  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
+  color: var(--colour-heading);
+  text-align: left; // Reset button style
+  background-color: $accordion-button-bg;
+  overflow-anchor: none;
+  @include transition($accordion-transition);
+
+  --marker-bg: var(--colour-secondary);
+  cursor: pointer;
+  position: relative;
+
+  .badge {
+    vertical-align: bottom;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-bottom: 0.1em;
+  }
+
+
+  &:before,
+  &:after {
+
+    content: "";
+    position: absolute;
+    right: var(--accordion-indent);
+    top: var(--accordion-icon-top);
+    margin-top: var(--accordion-icon-size-half);
+    width: var(--accordion-icon-size);
+    height: var(--accordion-icon-size);
+  }
+
+  &:before {
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    background: var(--marker-bg);
+    border-radius: 100%;
+  }
+
+  // Accordion icon
+  &::after {
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+  
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+    @include transition($accordion-icon-transition);
+    transform: rotate(90deg);
+  }
+
+  &:hover,
+  &:focus {
+
+    --marker-bg: var(--colour-warning);
+    color: var(--colour-hover);
+  }
+
+  &:hover {
+    z-index: var(--index-focus);
+  }
+
+  &:focus {
+    z-index: var(--index-focus);
+    border-color: $accordion-button-focus-border-color;
+    outline: 0;
+    box-shadow: $accordion-button-focus-box-shadow;
+  }
+
+  [open] > summary > & {
+    color: var(--colour-heading);
+    background-color: $accordion-button-active-bg;
+    
+    &::after {
+      
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+// #region Coloured summary
+summary[class*="bg-"] {
+
+  .accordion-button {
+
+    border-bottom: 1px solid var(--colour-border);
+    margin-bottom: -1px;
+
+    &:before {
+      background: none!important;
+    }
+  }
+
+  &:hover .accordion-button {
+    opacity: 0.8;
+  }
+
+  & + .accordion-body {
+
+    padding-top: 2rem;
+  }
+}
+// #endregion
+
+
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  background-color: $accordion-bg;
+  border-bottom: $accordion-border-width solid $accordion-border-color;
+  margin-bottom: 2rem;
+
+  &:first-of-type {
+    border-top: $accordion-border-width solid $accordion-border-color;
+  }
+
+  & + .accordion-item {
+    margin-top: -2rem;
+  }
+}
+
+.accordion-body {
+  text-align: left;
+  padding: 0 $accordion-body-padding-x;
+}
+
+// #region Straight edge
+.accordion--straight {
+  > details > summary:not([class*="bg-"]) > .accordion-button,
+  > details > .accordion-body {
+    padding-left: 0!important;
+  }
+
+  > details > .accordion-body {
+    padding-right: 0!important;
+  }
+}
+// #endregion
+
+// #region Child accordion
+.accordion .accordion {
+
+  &:first-child {
+
+    padding-top: 1rem;
+  }
+
+  &:last-child {
+
+    padding-bottom: 2rem;
+  }
+
+  .accordion-button {
+    padding: 1rem 3rem 1rem var(--accordion-indent);
+
+    &:before,
+    &:after {
+      top: 0.75rem;
+      height: 2rem;
+      width: 2rem;
+      right: 0.5rem;
+    }
+    &:before {
+      background-color: var(--colour-light);
+    }
+  }
+}
+// #endregion