@iamproperty/components 2.7.9 → 3.0.0

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

package/assets/sass/components/alert.scss

@@ -1,99 +1,99 @@
-@use "../_func" as *;
-
-.alert {
-
-  &__inner {
-    position: relative;
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    @include border-radius($alert-border-radius);
-    //--bs-bg-opacity: 0.5;
-
-    &:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
-      --colour-body: black;
-      color: black;
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-
-    > * {
-      max-width: 100%;
-    }
-  }
-
-  &--fixed {
-    position: fixed;
-    padding-top: 2rem;
-    z-index: var(--index-floating);
-    left: 50%;
-    transform: translate(-50%,0);
-    bottom: 0;
-  }
-}
-
-// Dismissible alerts
-.alert--dismissible .alert__inner{
-  padding-right: 4rem;
-  overflow: hidden;
-
-  // Adjust close link position
-  .btn-close {
-    position: absolute;
-    top: 1.5rem;
-    right: 1.5rem;
-    height: 1rem;
-    width: 1rem;
-    padding:0;
-    border: none;
-    z-index: var(--index-focus);
-    background: currentColor;
-    mask-image: var(--icon-close);
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-  }
-}
-
-.alert__holder {
-  position: fixed;
-  z-index: var(--index-floating);
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  max-height: 100vh;
-  overflow: auto;
-  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
-
-  > *:first-child {
-    margin-top: 2rem;
-  }
-
-  .alert--fixed {
-    position: static;
-    transform: none;
-    padding-top: 0;
-  }
-}
-
-[data-timeout] .alert__inner:after {
-  
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0%;
-  height: 0.25rem;
-  background: black;
-  animation: progress var(--animation-length) linear;
-}
-
-@keyframes progress{
-  0%{
-    width: 0%;
-  }
-  100%{
-      width: 100%;
-  }
+@use "../_func" as *;
+
+.alert {
+
+  &__inner {
+    position: relative;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    @include border-radius($alert-border-radius);
+    //--bg-opacity: 0.5;
+
+    &:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
+      --colour-body: black;
+      color: black;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    > * {
+      max-width: 100%;
+    }
+  }
+
+  &--fixed {
+    position: fixed;
+    padding-top: 2rem;
+    z-index: var(--index-floating);
+    left: 50%;
+    transform: translate(-50%,0);
+    bottom: 0;
+  }
+}
+
+// Dismissible alerts
+.alert--dismissible .alert__inner{
+  padding-right: 4rem;
+  overflow: hidden;
+
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    height: 1rem;
+    width: 1rem;
+    padding:0;
+    border: none;
+    z-index: var(--index-focus);
+    background: currentColor;
+    mask-image: var(--icon-close);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+  }
+}
+
+.alert__holder {
+  position: fixed;
+  z-index: var(--index-floating);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-height: 100vh;
+  overflow: auto;
+  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
+
+  > *:first-child {
+    margin-top: 2rem;
+  }
+
+  .alert--fixed {
+    position: static;
+    transform: none;
+    padding-top: 0;
+  }
+}
+
+[data-timeout] .alert__inner:after {
+  
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  height: 0.25rem;
+  background: black;
+  animation: progress var(--animation-length) linear;
+}
+
+@keyframes progress{
+  0%{
+    width: 0%;
+  }
+  100%{
+      width: 100%;
+  }
 };