@iamproperty/components 3.0.0 → 3.2.0

package/assets/sass/elements/card.scss

@@ -1,177 +1,289 @@
-@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-banner {
+  padding: 0.5rem;
+
+  &__tag {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--colour-secondary);
+    font-size: rem(14);
+    font-weight: bold;
+    aspect-ratio: 1;
+    padding: 0.75rem;
+    border-radius: 50%;
+    transform: translate(-0.25rem,-1.25rem) rotate(-25deg);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;
+
+  }
+}
+
+.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
+
+// #region Small cards 
+.card--small {
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: 0.5rem;
+
+  .card-header__wrapper,
+  .card-body > *:not(.card-title) {
+    display: none;
+  }
+
+  .card-body,
+  .card-footer {
+    padding: 0.5rem;
+  }
+
+  .card-title {
+    margin: 0;
+  }
+
+  .btn {
+    margin-right: 0;
+    white-space: nowrap;
+
+    &:not(.btn--link) {
+      padding: 0.5em 1em
+    }
+  }
+
+  &:not([target="_blank"]) .btn-primary:not(.btn--link):after {
+      
+    content: "";
+    height: 1em;    
+    width: 1em;
+    margin-left: 0.5em;
+    margin-right: -0.5em;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -0.15em;
+
+    mask-image: var(--icon-arrow);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    mask-position: 0 0;
+  
+    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 0 0;
+    background-color: currentColor;
+  }
+
+    
+  @include media-breakpoint-up(md) {
+
+    flex-wrap: wrap;
+    .card-footer {
+      min-width: 100%;
+      text-align: right;
+    }
+  }
+}
+
+.card--danger,
+.card--warning,
+.card--success {
+  position: relative;
+  padding-left: 1.5rem;
+
+  &:after {
+
+    content: "";
+    height: 100%;
+    width: 1rem;
+    background: var(--colour-danger);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.card--warning:after {
+  background: var(--colour-warning);
+}
+.card--success:after {
+  background: var(--colour-success);
+}
+// #endregion