@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/components/buttons.scss

@@ -1,252 +0,0 @@
-@use "../_func.scss" as *;
-
-.btn {
-
-  display: inline-block;
-  font-weight: 600;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  background: var(--btn-bg);
-  border: 2px solid var(--btn-bg);
-  color: var(--btn-text);
-  font-family: var(--font-heading);
-  font-size: 1rem;
-  line-height: 1.25;
-  padding: em(12) em(28);
-  border-radius: rem(20);
-  margin-bottom: rem(24);
-  margin-right: rem(16);
-  transition: all .5s, color .5s;
-  height: auto;
-
-  a:hover &,
-  a:focus &,
-  &:hover,
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-    border-radius: rem(20);
-    background: transparent;
-    border-color: var(--btn-bg)!important;
-    color: var(--btn-hover-text);
-  }
-
-  a:active &,
-  a.active &,
-  &:active,
-  &.active {
-    
-    border-radius: rem(20);
-    transition: 0s;
-    background: transparent;
-    border-color: var(--btn-text);
-    color: var(--btn-hover-text);
-
-    &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-    }
-  }
-
-  a:disabled &,
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-  
-  &.btn-secondary {
-
-    --btn-bg: var(--colour-secondary);
-  }
-
-  &.btn-tertiary,
-  &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-    background: var(--btn-tertiary-bg);
-    border-color: var(--btn-hover-text) !important;
-    color: var(--btn-tertiary-hover-text);
-
-    &:not(:hover):not(:focus) {
-
-      background: transparent;
-      color: var(--colour-link);
-      border-color: var(--btn-hover-text);
-    }
-  }
-
-  &.btn-tag.btn-primary {
-    --btn-bg: var(--colour-warning);
-  }
-
-  &.btn-admin:not(:hover):not(:focus) {
-    background: var(--colour-admin);
-    border-color: var(--colour-admin)!important;
-  }
-}
-
-input:checked + .btn:not(:hover):not(:focus),
-details[open] > summary.btn:first-child {
-  
-  transition: 0s;
-  background: var(--btn-tertiary-bg);
-  border-color: var(--btn-hover-text);
-  color: var(--btn-tertiary-hover-text);
-
-  &:focus {
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-  }
-}
-
-input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active),
-input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:focus):not(:active) {
-  background: var(--colour-selected);
-  border-color: var(--colour-selected)!important;
-  color: var(--colour-primary);
-}
-
-
-// #region button small and tag
-.btn-sm {
-
-  padding: em(6) em(12);
-}
-
-.btn-tag {
-  // btn tag also uses the styles of btn-tertiary by default, see above
-  padding: em(6) em(12);
-  margin-bottom: 0.5rem;
-  margin-right: 0.5rem;
-}
-// #endregion
-
-// #region Direction button
-.btn-next, 
-.btn-prev {
-  --marker-bg: var(--colour-secondary);
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  background: var(--marker-bg);
-  border-radius: 100%;
-  width: rem(36);
-  height: rem(36);
-
-  @include media-breakpoint-up(md) {
-
-    width: rem(48);
-    height: rem(48);
-  }
-  text-indent: -300rem;
-  overflow: hidden;
-  border: none;
-  position: relative;
-  margin: 0 rem(8);
-  padding: 0;
-
-  &:disabled {
-    opacity: 0.8;
-    pointer-events: none;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 60%;
-    -webkit-mask-image: escape-svg($accordion-button-icon);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 55% 50%;
-    transform: rotate(0deg);
-  }
-
-  &:hover,
-  &:focus {
-
-    background: var(--colour-warning);
-    color: var(--colour-hover);
-    border-radius: 100%;
-  }
-
-  &:active {
-    border-radius: 100%;
-  }
-}
-
-.btn-prev {
-  &:after {
-
-    transform: rotate(180deg);
-  }
-}
-// #endregion
-
-// #region button group 
-.btn-group {
-
-  flex-wrap: wrap;
-
-  > .btn {
-    margin-right: 0;
-    padding: 0.75rem;
-  }
-
-  > .btn:last-of-type {
-
-    border-top-right-radius: rem(20)!important;
-    border-bottom-right-radius: rem(20)!important;
-  }
-
-  > *:not(.btn) {
-    width: 100%;
-  }
-}
-
-.btn-group--admin {
-
-  position: relative;
-
-  &:before {
-    content: "";
-    width: calc(100% - 2px);
-    height: rem(48);
-    background-color: var(--colour-admin)!important;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    border-radius: 0.5rem!important;
-  }
-
-  > .btn:not(:hover):not(:focus) {
-    border-radius: 0.5rem!important;
-    background: var(--colour-admin);
-
-    border-color: var(--colour-admin)!important;
-  }
-
-  > .btn:is(:hover, :focus) {
-    border-radius: 0.5rem!important;
-    background: var(--colour-selected);
-
-    border-color: var(--colour-admin)!important;
-    color: var(--colour-primary);
-  }
-
-  > input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active) {
-    border-color: var(--colour-admin)!important;
-
-  }
-}
-// #endregion
-
-@import "../../../node_modules/bootstrap/scss/_button-group.scss";

package/assets/sass/components/cardDeck.scss

@@ -1,108 +0,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(--gutter-y) var(--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

package/assets/sass/components/links.scss

@@ -1,99 +0,0 @@
-@use "../_func.scss" as *;
-
-a,
-.link {
-  @include var (color, --colour-link);
-  display: inline-block;
-  min-height: em(28);
-  margin-bottom: rem(16);
-  position: relative;
-  text-decoration: none;
-  background: none;
-  border: none;
-  
-  &:not(.text-decoration-none):not(.btn):before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    @include var(background-color,--colour-underline);
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: .3s ease-in;
-    transition: .3s ease-in;
-  }
-
-  &:not(.text-decoration-none):not(.btn):hover:before,
-  .card:hover &:before,
-  details[open] &:not(.text-decoration-none):not(.btn):before {
-    width: 0%;
-  }
-
-  &:is(:hover, :focus, .focus),
-  .card:hover &,
-  .card:focus &  {
-    @include var (color, --colour-hover);
-  }
-
-  &:active,
-  &.active,
-  .card:active & {
-    @include var (color, --colour-active);
-  }
-
-  &[target="_blank"]:not(.card):after,
-  &.card[target="_blank"] .btn:after {
-    
-    content: "";
-    height: 1em;    
-    width: 1em;
-    margin-left: 0.5em;
-    margin-right: -0.2em;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: -0.15em;
-
-    mask-image: var(--icon-blank);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-    mask-position: 0 0;
-  
-    -webkit-mask-image: var(--icon-blank);
-    -webkit-mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 0 0;
-    background-color: currentColor;
-  }
-  
-}
-@include inline-text(){
-  a {
-    min-height: none;
-    display: inline;
-    margin-bottom: 0;
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--colour-underline);
-
-    &:hover,
-    &:focus,
-    &:active{
-
-      text-decoration: none;
-    }
-  
-    &:before {
-
-      display: none;
-    }
-
-    &[target="_blank"]:after {
-      margin-left: 0.25em;
-      margin-right: 0.2em;
-    }
-  }
-}

package/assets/sass/components/modal.scss

@@ -1,136 +0,0 @@
-@use "sass:math";
-@use "../_func" as *;
-
-.modal {
-  display: none;
-}
-
-.modal:target {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.25);
-  z-index: var(--index-overlay);
-  border: none;
-  overscroll-behavior: contain;
-
-  > a:first-child {
-      
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 8 8, pointer;
-  }
-
-  > button {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      z-index: var(--index-focus);
-      top: 50%;
-      transform: translate(0,-50%);
-      overflow: hidden;
-      text-indent: 300%;
-      width: 2rem;
-      height: 2rem;
-
-      &.btn:not(:hover):not(:focus) {
-        background-color: white;
-      }
-
-      &.modal__dock--left {
-        right: calc(50% + #{rem(math.div(820,2))} + 1rem);
-        
-        &:after {
-          transform: rotate(-180deg);
-        }
-      }
-      &.modal__dock--right {
-        left: calc(50% + #{rem(math.div(820,2))} + 1rem);
-      }
-    }
-  }
-
-
-  &.modal--left button.modal__dock--left {
-    display: none;
-  }
-
-  &.modal--left button.modal__dock--right {
-    left: calc(#{rem(640)} + 2rem);
-  }
-
-  &.modal--right button.modal__dock--right {
-    display: none;
-  }
-
-  &.modal--right button.modal__dock--left {
-    right: calc(#{rem(640)} + 2rem);
-  }
-}
-
-
-.modal__outer {
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 90%;
-  max-width: rem(820);
-  height: fit-content;
-  max-height: 90%;
-  overflow: visible;
-  transform: translate(-50%,-50%);
-
-  > .btn:first-child {
-    position: absolute;
-    top: 0;
-    right: 0;    
-    margin-top: -0.75rem;
-    margin-right: -0.75rem;
-    z-index: var(--index-focus);
-
-    &:not(:hover):not(:focus):not(:active){
-      background: white;
-    }
-  }
-  @include media-breakpoint-up(md) {
-    .modal--left & {
-      left: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-
-    .modal--right & {
-      left: auto;
-      right: 1rem;
-      transform: translate(0,-50%);
-      max-width: 40rem;
-    }
-  }
-}
-
-.modal__inner {
-  background: white;
-  overscroll-behavior: contain;
-  height: fit-content;
-  max-height: 90vh;
-  overflow: auto;
-
-  & > *:first-child {
-
-    padding: 1rem;
-    @include media-breakpoint-up(sm) {
-
-      padding: 2rem;
-    }
-  }
-}