@iamproperty/components 2.7.9 → 3.0.0

package/assets/sass/elements/card.scss

@@ -1,177 +1,177 @@
-@use "../_func.scss" as *;
-
-@import "../../../node_modules/bootstrap/scss/_card.scss";
-
-// #region Defaul Card
-// Reset the link
-a.card {
-
-  cursor: pointer;
-  
-  &:before {
-    display: none;
-  }
-}
-
-.card:not(.card--simple) {
-
-  @include reset-colours();
-}
-.card {
-
-  --spread: #{rem(12)};
-  box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
-  min-height: 100%;
-  overflow: hidden;
-  max-width: rem(925);
-
-  &:hover,
-  &:focus {
-    --spread: #{rem(6)};
-
-    .card-body *:not(.badge) {
-      color: var(--colour-hover)!important;
-    }
-  }
-
-  &:active {
-    --spread: #{rem(3)};
-  }
-}
-
-.card-header__wrapper {
-  padding-bottom: 0;
-  padding-top: 55%;
-  position: relative;
-  overflow: hidden;
-  background: rgba(0,0,0,0.1);
-
-  > * {
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .card-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 101%;
-    height: 101%;
-    object-fit: cover;
-  }
-  
-  .card-header {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  .card-logo {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: auto;
-    height: 3.5rem;
-    width: 8rem;
-    object-fit: contain;
-    object-position: right;
-  }
-}
-
-.card-body {
-
-  color: var(--colour-body);
-
-  *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.card-footer {
-  padding-top: 0;
-}
-
-// Add a default margin bottom
-.row:not([class*="g-"]) .card {
-
-  margin-bottom: 1rem;
-}
-// #endregion
-
-// #region Simple card variant
-.card--simple {
-
-  box-shadow: none;
-  min-height: 0;
-  background: none;
-  
-  .card-header__wrapper {
-
-    @include border-radius($card-border-radius);
-    margin-bottom: 1rem;
-  }
-
-  .card-body {
-    padding-top: 0;
-  }
-  .card-body,
-  .card-footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-// #endregion
-
-// #region Quick link card
-.card--quick{
-  
-  .card-header,
-  .card-footer,
-  .card-body > *:not(.card-title) {
-    display: none;
-  }
-
-  .card-title {
-    margin-bottom: 0;
-    padding-left: 2em;
-    position: relative;
-
-    &:before,
-    &:after {
-
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 1.2em;
-      height: 1.2em;
-    }
-    &:before  {
-
-      left: 0.05em;
-      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%;
-    }
-
-    &:after {
-      border: 2px solid currentColor;
-      border-radius: 50%;
-    }
-
-  }
-}
-// #endregion
+@use "../_func.scss" as *;
+
+@import "../../../node_modules/bootstrap/scss/_card.scss";
+
+// #region Defaul Card
+// Reset the link
+a.card {
+
+  cursor: pointer;
+  
+  &:before {
+    display: none;
+  }
+}
+
+.card:not(.card--simple) {
+
+  @include reset-colours();
+}
+.card {
+
+  --spread: #{rem(12)};
+  box-shadow: 0 2px var(--spread) 0 rgba(154,154,154,0.25);
+  min-height: 100%;
+  overflow: hidden;
+  max-width: rem(925);
+
+  &:hover,
+  &:focus {
+    --spread: #{rem(6)};
+
+    .card-body *:not(.badge) {
+      color: var(--colour-hover)!important;
+    }
+  }
+
+  &:active {
+    --spread: #{rem(3)};
+  }
+}
+
+.card-header__wrapper {
+  padding-bottom: 0;
+  padding-top: 55%;
+  position: relative;
+  overflow: hidden;
+  background: rgba(0,0,0,0.1);
+
+  > * {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 101%;
+    height: 101%;
+    object-fit: cover;
+  }
+  
+  .card-header {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .card-logo {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: auto;
+    height: 3.5rem;
+    width: 8rem;
+    object-fit: contain;
+    object-position: right;
+  }
+}
+
+.card-body {
+
+  color: var(--colour-body);
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-footer {
+  padding-top: 0;
+}
+
+// Add a default margin bottom
+.row:not([class*="g-"]) .card {
+
+  margin-bottom: 1rem;
+}
+// #endregion
+
+// #region Simple card variant
+.card--simple {
+
+  box-shadow: none;
+  min-height: 0;
+  background: none;
+  
+  .card-header__wrapper {
+
+    @include border-radius($card-border-radius);
+    margin-bottom: 1rem;
+  }
+
+  .card-body {
+    padding-top: 0;
+  }
+  .card-body,
+  .card-footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+// #endregion
+
+// #region Quick link card
+.card--quick{
+  
+  .card-header,
+  .card-footer,
+  .card-body > *:not(.card-title) {
+    display: none;
+  }
+
+  .card-title {
+    margin-bottom: 0;
+    padding-left: 2em;
+    position: relative;
+
+    &:before,
+    &:after {
+
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 1.2em;
+      height: 1.2em;
+    }
+    &:before  {
+
+      left: 0.05em;
+      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%;
+    }
+
+    &:after {
+      border: 2px solid currentColor;
+      border-radius: 50%;
+    }
+
+  }
+}
+// #endregion