@iamproperty/components 2.7.7 → 2.9.0

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);
+    //--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%;
+  }
 };

package/assets/sass/components/cardDeck.scss

@@ -1,108 +1,108 @@
-@use "../_func" as *;
-
-// #region Card Deck
-.card-deck.container:not([data-card-type="simple"]) {
-
-  padding-bottom: 3rem;
-
-  > .row:first-child {
-    padding-top: 0.5rem;
-  }
-
-  &[class*="bg-"] {
-    padding-bottom: 5rem;
-  }
-}
-// #endregion
-
-// #region Fake container query that transforms the card into a vertical card
-@mixin vertical-card(){
-  .card-header__wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 45.8%;
-    height: 100%;
-    padding: 0;
-  }
-  .card-header__wrapper ~ .card-body,
-  .card-header__wrapper ~ .card-footer {
-    padding-left: calc(45.8% + #{$card-spacer-x + $card-spacer-x});
-  }
-}
-
-@media screen and (min-width: 36em) and (max-width: 61.99em) {
-
-  .card-deck .row-cols-sm-1 {
-    @include vertical-card();
-  }
-}
-
-@include media-breakpoint-up(md) {
-
-  .card-deck:not(.card-deck--featured) .row-cols-md-1 {
-    
-    @include vertical-card();
-  }
-}
-// #endregion
-
-// #region Featured Card deck
-.card-deck--featured {
-
-  > .row > .col:nth-child(4) ~ .col {
-    display: none;
-  }
-
-  > .row > .col:not(:first-child) .card-header__wrapper {
-    display: none;
-  }
-
-  .row-cols-sm-1 > .col:not(:first-child) .card-header__wrapper ~ .card-body {
-    padding-left: 1.5rem;
-  }
-
-  .card-footer {
-    display: none;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    > .row {
-      display: grid;
-      grid-template-columns: 1fr 1fr 41.66666667%; 
-      grid-template-rows: auto auto auto; 
-      gap: var(--bs-gutter-y) var(--bs-gutter-x); 
-      grid-template-areas: 
-        "featured featured card2"
-        "featured featured card3"
-        "featured featured card4";
-      margin-top:0;
-    }
-    > .row > .col:first-child {
-      grid-area: featured;
-    }
-    > .row > .col:not(:first-child) {
-      min-height: 0;
-    }
-
-    > .row > .col:nth-child(2) {
-      grid-area: card2;
-    }
-
-    > .row > .col:nth-child(3) {
-      grid-area: card3;
-    }
-
-    > .row > .col:nth-child(4) {
-      grid-area: card4;
-    }
-
-    > .row > .col {
-      width: 100%;
-      margin-top:0;
-    }
-
-  }
-}
+@use "../_func" as *;
+
+// #region Card Deck
+.card-deck.container:not([data-card-type="simple"]) {
+
+  padding-bottom: 3rem;
+
+  > .row:first-child {
+    padding-top: 0.5rem;
+  }
+
+  &[class*="bg-"] {
+    padding-bottom: 5rem;
+  }
+}
+// #endregion
+
+// #region Fake container query that transforms the card into a vertical card
+@mixin vertical-card(){
+  .card-header__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 45.8%;
+    height: 100%;
+    padding: 0;
+  }
+  .card-header__wrapper ~ .card-body,
+  .card-header__wrapper ~ .card-footer {
+    padding-left: calc(45.8% + #{$card-spacer-x + $card-spacer-x});
+  }
+}
+
+@media screen and (min-width: 36em) and (max-width: 61.99em) {
+
+  .card-deck .row-cols-sm-1 {
+    @include vertical-card();
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  .card-deck:not(.card-deck--featured) .row-cols-md-1 {
+    
+    @include vertical-card();
+  }
+}
+// #endregion
+
+// #region Featured Card deck
+.card-deck--featured {
+
+  > .row > .col:nth-child(4) ~ .col {
+    display: none;
+  }
+
+  > .row > .col:not(:first-child) .card-header__wrapper {
+    display: none;
+  }
+
+  .row-cols-sm-1 > .col:not(:first-child) .card-header__wrapper ~ .card-body {
+    padding-left: 1.5rem;
+  }
+
+  .card-footer {
+    display: none;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    > .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr 41.66666667%; 
+      grid-template-rows: auto auto auto; 
+      gap: var(--bs-gutter-y) var(--bs-gutter-x); 
+      grid-template-areas: 
+        "featured featured card2"
+        "featured featured card3"
+        "featured featured card4";
+      margin-top:0;
+    }
+    > .row > .col:first-child {
+      grid-area: featured;
+    }
+    > .row > .col:not(:first-child) {
+      min-height: 0;
+    }
+
+    > .row > .col:nth-child(2) {
+      grid-area: card2;
+    }
+
+    > .row > .col:nth-child(3) {
+      grid-area: card3;
+    }
+
+    > .row > .col:nth-child(4) {
+      grid-area: card4;
+    }
+
+    > .row > .col {
+      width: 100%;
+      margin-top:0;
+    }
+
+  }
+}
 // #endregion