@iamproperty/components 7.7.1--beta18 → 7.7.1--beta20

package/assets/sass/components/carousel.component.scss

@@ -6,643 +6,3 @@
 *::after {
   box-sizing: border-box;
 }
-
-
-@layer components {
-
-  :host {
-    width: 100%;
-  }
-  .carousel-wrapper {
-
-    padding-inline: 1.5rem;
-    margin-inline: -1.5rem;
-    overflow: hidden;
-    container-type: inline-size;
-    display: block;    
-    margin-bottom: var(--carousel-mb, 1.5rem);
-  }
-
-  .carousel {
-    --button-height: 3rem;
-    --marker-height: 1.25rem;
-    --marker-mb: 1rem;
-    padding-inline: 0.5rem;
-    margin-inline: -0.5rem;
-    padding-bottom: calc(1rem + var(--button-height) + var(--marker-height) + var(--marker-mb));
-
-    scroll-padding: 0.5rem;
-    display: grid;
-    grid-auto-flow: column;
-    gap: var(--gap);
-    anchor-scope: all;
-    anchor-name: --carousel;
-    overflow-x: auto;
-    overscroll-behavior-x: contain;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: none;
-    scroll-marker-group: before;
-    scroll-behavior: smooth;
-    grid-auto-flow: column;
-    grid-auto-columns: calc((100% / var(--count,1)) - ((var(--gap) * (var(--count,1) - 1)) / var(--count,1)));
-  }
-
-  /* #region items */
-
-  .carousel > * {
-
-    container-type: scroll-state;
-    grid-column: auto;
-    min-height: 100%;
-    margin: 0;
-    scroll-snap-align: start;
-  }
-  /* #endregion */
-
-  /* #region left and right buttons */
-  .carousel {
-    
-    &::scroll-button(*) {
-
-      cursor: pointer;
-      position-anchor: --carousel;
-      background: none;
-      border: none;
-    
-      font-size: 1rem !important;
-      padding: 0 !important;
-      margin-bottom: .5rem;
-      text-align: center;
-      width: var(--button-height);
-      height: var(--button-height);
-      align-content: center;
-      line-height: 1 !important;
-      overflow: hidden;
-      font-size: 1rem;
-      font-family: "Font Awesome 7 Pro" !important;
-      display: none;
-      position: absolute;
-      position-area: block-end center;
-      border-radius: 50%;
-      margin-top: calc((var(--button-height) + var(--marker-height) + var(--marker-mb)) * -1);
-
-    }
-
-    &::scroll-button(left) {
-
-      display: inline-block;
-      //left: anchor(left);
-      content: "\f053" / "Scroll left"!important;
-      margin-left: calc(var(--button-height) * -1) !important;
-    }
-
-    &::scroll-button(right) {
-
-      display: inline-block;
-      //right: anchor(right);
-      content: "\f054" / "Scroll right"!important;
-      margin-right: calc(var(--button-height) * -1) !important;
-    }
-    
-    &::scroll-button(*):disabled {
-      pointer-events: none;
-    }
-
-    &::scroll-button(*):is(:hover,:focus-visible) {
-      outline-offset: 5px;
-      background-color: var(--colour-light);
-      border-color: var(--colour);
-    }
-  }
-  /* #endregion */
-
-  /* #region left and right buttons on desktop */
-  .carousel-wrapper .carousel {
-    
-    @container (min-width: 62em) {
-      
-      --button-height: 0rem;
-
-      &::scroll-button(*) {
-        --button-height: 3rem;
-        margin-top: -1rem;
-      }
-      &::scroll-button(left) {
-        position-area: center inline-start;
-      }
-
-      &::scroll-button(right) {
-        position-area: center inline-end;
-      }
-    }
-  }
-  /* #endregion */
-
-  @container style(--hide-carousel-btns) {
-    .carousel {
-    
-      --button-height: 0rem;
-    }
-    .carousel::scroll-button(*) {
-    
-      display: none!important;
-    }
-  }
-
-  /* #region markers */
-  .carousel {
-    &::scroll-marker-group {
-
-      position: absolute;
-      position-anchor: --carousel;
-      container: marker-group / inline-size;
-      display: grid;
-      place-content: safe center;
-      box-sizing: border-box;
-      border-radius: var(--radius-round);
-      scrollbar-width: none;
-      scroll-behavior: smooth;
-      inline-size: 100%;
-      max-inline-size: 100cqi;
-      overflow-x: auto;
-      scroll-snap-type: x mandatory;
-      overscroll-behavior-x: contain;
-      grid-auto-columns: var(--marker-height); /* Magic number */
-      grid-auto-rows: var(--marker-height); /* Magic number */
-      
-      overflow-x: auto;
-      top: auto;
-      bottom: anchor(bottom);
-      grid-auto-flow: column;
-      justify-items: center;
-      align-items: center;
-      padding-block: 0;
-      margin-bottom: var(--marker-mb);
-    }
-
-    
-    > *::scroll-marker {
-      content: "";
-      scroll-snap-align: start;
-      cursor: pointer;
-      text-decoration: none;
-      interactivity: auto;
-      //display: none;
-      width: .5rem;
-      aspect-ratio: 1;
-      border-radius: 50%;
-      overflow: hidden;
-      background: #a5ecfd; /* Magic colour */
-      cursor: pointer;
-      border: none;
-    }
-
-    > *::scroll-marker:target-current {
-
-      border-color: var(--colour-info);
-      background: var(--colour-info);
-      width: 1rem;
-      height: 1rem;
-      min-height: 1rem;
-      margin-inline: .125rem; /* Magic number */
-    }
-    
-  }
-  /* #endregion */
-
-  /* #region count the number of items and set variables to hide the controls/markers */
-  .carousel-wrapper:has(.carousel > *:first-child:last-child) {
-    
-    --hide-buttons: 1;
-    --hide-markers: 1;
-  }
-  
-  .carousel {
-    
-    @container (min-width: 36em) {
-      &[data-smcols='2']:not(:has(> *:nth-child(3))) {
-
-        --hide-buttons: 1;
-        --hide-markers: 1;
-
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-      }
-      &[data-smcols='3']:not(:has(> *:nth-child(4))) {
-
-        --hide-buttons: 1;
-        --hide-markers: 1;
-
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-      }
-    }
-
-    @container (min-width: 62em) {
-      &[data-mdcols='2']:not(:has(> *:nth-child(3))) {
-
-        --hide-buttons: 1;
-        --hide-markers: 1;
-
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-      }
-      &[data-mdcols='3']:not(:has(> *:nth-child(4))) {
-
-        --hide-buttons: 1;
-        --hide-markers: 1;
-
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-      }
-    }
-  }
-  /* #endregion */
-
-  /* #region change the item count via queries */
-  .carousel {
-    
-    @container (min-width: 36em) {
-      &[data-smcols='2'] {
-
-        --count: 2;
-      }
-      &[data-smcols='3'] {
-
-        --count: 3;
-      }
-    }
-
-    @container (min-width: 64em) {
-      &[data-mdcols='2'] {
-
-        --count: 2;
-      }
-      &[data-mdcols='3'] {
-
-        --count: 3;
-      }
-    }
-  }
-  /* #endregion */
-
-  /* #region carousel responsive to the count number variable */
-  .carousel {
-
-    > * {
-
-      @container style(--count) {
-
-        scroll-snap-align: unset;
-        
-        &::scroll-marker{
-
-          display: none;
-        }
-      }
-
-      @container not scroll-state(snapped: x) {
-        
-        --opacity: 0;
-      }
-      
-      @container style(--count: 2) {
-
-        &:nth-child(2n - 1) {
-          scroll-snap-align: start;
-          scroll-snap-stop: always;
-        }
-
-        &:nth-child(2n - 1)::scroll-marker{
-
-          display: block;
-        }
-      }
-
-      @container style(--count: 3) {
-
-        &:nth-child(3n - 2) {
-          scroll-snap-align: start;
-          scroll-snap-stop: always;
-        }
-
-        &:nth-child(3n - 2)::scroll-marker{
-
-          display: block;
-        }
-      }
-    } 
-  }
-
-  /* #endregion */
-
-  /* #region hide controls/markers */
-  .carousel-wrapper {
-    
-
-    @container style(--hide-buttons) {
-
-      --button-height: 0rem;
-      
-      .carousel::scroll-button(*) {
-        display: none;
-      }
-    }
-
-    @container style(--hide-markers) {
-
-      --marker-height: 0rem;
-      --marker-mb: 0rem;
-
-      .carousel::scroll-marker-group {
-        display: none;
-      }
-    }
-  }
-  /* #endregion */
-
-  /* #region carousel inside of admin panel */
-  .admin-panel {
-    
-    --hide-buttons: 1;
-
-    .carousel {
-        
-      --button-height: 0rem;
-      --marker-mb: 0rem;
-      margin-bottom: 0;
-    }
-  }
-  /* #endregion */
-
-
-  /* #region progress bar */
-  .carousel__progress {
-    text-align: center;
-    display: none;
-  }
-
-  input[type='range'] {
-    --track-size: 0.5rem;
-    --track-colour: #a5ecfd;
-    --thumb-colour: var(--colour-info);
-    --thumb-size: 1rem;
-    --thumb-size-outline: 0;
-    width: 90%;
-    max-width: 10.75rem; /* 172 */
-
-    background: transparent;
-    cursor: pointer;
-    margin: 0;
-    height: 1rem;
-    border-radius: 50%;
-    accent-color: var(--thumb-colour);
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  /*  Track Styles */
-  input[type='range']::-webkit-slider-runnable-track {
-    background: var(--track-colour);
-    height: var(--track-size);
-    border-radius: 0.5625rem; /* 9 */
-  }
-
-  input[type='range']::-moz-range-track {
-    background: var(--track-colour);
-    height: var(--track-size);
-    border-radius: 0.5625rem; /* 9 */
-  }
-
-  /*  Extended track functionality */
-  input[type='range']::-webkit-slider-runnable-track {
-    background: linear-gradient(
-      to right,
-      var(--track-colour),
-      var(--track-colour) var(--start-percent, 0%),
-      var(--thumb-colour) var(--start-percent, 0%),
-      var(--thumb-colour) calc(var(--percent, 0%)),
-      var(--track-colour) calc(var(--percent, 0%))
-    );
-  }
-
-  input[type='range']::-moz-range-track {
-    background: linear-gradient(
-      to right,
-      var(--track-colour),
-      var(--track-colour) var(--start-percent, 0%),
-      var(--thumb-colour) var(--start-percent, 0%),
-      var(--thumb-colour) calc(var(--percent, 0%)),
-      var(--track-colour) calc(var(--percent, 0%))
-    );
-  }
-
-  /*  Thumb Styles */
-  input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none; /* Override default look */
-    appearance: none;
-    margin-top: -0.25rem; /* Centers thumb on the track */
-    background-color: var(--thumb-colour);
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    border-radius: 50%;
-    position: relative;
-    z-index: 99;
-    pointer-events: all;
-  }
-
-  input[type='range']::-moz-range-thumb {
-    border: none; /*Removes extra border that FF applies*/
-    background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    border-radius: 50%;
-    position: relative;
-    z-index: 99;
-    pointer-events: all;
-  }
-
-  /*  Focus Styles */
-  input[type='range']:focus {
-    outline: none;
-  }
-
-  input[type='range']:hover::-webkit-slider-thumb,
-  input[type='range']:focus::-webkit-slider-thumb {
-    outline: var(--thumb-size-outline) solid var(--thumb-colour);
-  }
-
-  input[type='range']:active::-webkit-slider-thumb {
-    outline: var(--thumb-size-outline) solid var(--thumb-colour);
-  }
-
-  input[type='range']:hover::-moz-range-thumb,
-  input[type='range']:focus::-moz-range-thumb {
-    outline: var(--thumb-size-outline) solid var(--thumb-colour);
-  }
-  input[type='range']:focus::-moz-range-thumb {
-    outline: var(--thumb-size-outline) solid var(--thumb-colour);
-  }
-
-  /* #endregion */
-
-  @supports not selector(::scroll-marker-group) {
-    
-    .carousel {
-      --button-height: 0rem;
-      --marker-height: 0rem;
-      --marker-mb: 0rem;
-    }
-
-    #carousel__progress {
-      display: block;
-    }
-
-    @container (min-width: 36em) {
-
-      #carousel__progress {
-        display: none;
-      }
-      #carousel__progress-sm {
-        display: block;
-      }
-    }
-
-    @container (min-width: 62em) {
-
-      #carousel__progress-sm {
-        display: none;
-      }
-      #carousel__progress-md {
-        display: block;
-      }
-    }
-
-  }
-
-  @supports selector(::scroll-marker-group) {
-    
-
-    @container (max-width: 36em) {
-      .carousel:has(> *:nth-child(5)){
-        
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-        --hide-buttons: 1;
-        --hide-markers: 1;
-      }
-      .carousel:has(> *:nth-child(5)) + #carousel__progress {
-        display: block;
-      }
-    }
-
-    @container (min-width: 36em) {
-
-      #carousel__progress {
-        display: none;
-      }
-
-      .carousel[data-smcols="2"]:has(> *:nth-child(10)){
-        
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-        --hide-buttons: 1;
-        --hide-markers: 1;
-      }
-      .carousel[data-smcols="2"]:has(> *:nth-child(10)) + #carousel__progress-sm {
-        display: block;
-      }
-
-      .carousel[data-smcols="3"]:has(> *:nth-child(15)){
-        
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-        --hide-buttons: 1;
-        --hide-markers: 1;
-      }
-      
-      .carousel[data-smcols="3"]:has(> *:nth-child(15)) + #carousel__progress-sm {
-        display: block;
-      }
-    }
-
-    @container (min-width: 62em) {
-
-      #carousel__progress-sm {
-        display: none;
-      }
-
-      .carousel[data-mdcols="2"]:has(> *:nth-child(10)){
-        
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-        --hide-buttons: 1;
-        --hide-markers: 1;
-      }
-      
-      .carousel[data-mdcols="2"]:has(> *:nth-child(10)) + #carousel__progress-md {
-        display: block;
-      }
-
-      .carousel[data-mdcols="3"]:has(> *:nth-child(15)){
-        
-        --button-height: 0rem;
-        --marker-height: 0rem;
-        --marker-mb: 0rem;
-        --hide-buttons: 1;
-        --hide-markers: 1;
-      }
-      
-      .carousel[data-mdcols="3"]:has(> *:nth-child(15)) + #carousel__progress-md {
-        display: block;
-      }
-    }
-
-  }
-
-
-  /* #region thumbnails */
-
-  .carousel__controls {
-    display: flex !important;
-    flex-wrap: wrap;
-    max-width: 100%;
-    overflow: visible;
-
-    button {
-      padding: 0;
-      margin: 0 0.2rem 0.4rem;
-
-      width: 6rem;
-      height: auto;
-      aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
-
-      border-radius: 0;
-      position: relative;
-      border-radius: 0.25rem;
-
-      img {
-        position: absolute;
-        inset: 0;
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        margin: 0;
-      }
-
-      &[aria-current] {
-        outline: 2px solid var(--colour-info);
-      }
-    }
-  }
-
-  /* #endregion */
-}