/* variables specific to current element */ $testimonial-slider-breakpoint: "md"; .#{$namespace}testimonialSlider { /* Save root element context for easy access if nesting is needed */ $self: &; /* properties of current element + media queries */ display: flex; flex-direction: column-reverse; gap: map-deep-get($token-spacer-stack-max-map, "lg"); @include media-breakpoint-up($testimonial-slider-breakpoint) { flex-direction: row; align-items: center; gap: map-deep-get($token-spacer-unit-map, "64"); } /* Pseudo Elements */ &::before { } &::after { } /* Include elements that are linked to the current element but have to reside at the root level of the stylesheet (e.g: keyframes) */ @at-root { } /* children - write selector in full in comments in order to facilitate search */ // testimonialSlider__inner &__inner { overflow: hidden !important; } &__textContent { margin-bottom: 0; } &__nav { flex-shrink: 0; width: 100%; @include media-breakpoint-up($testimonial-slider-breakpoint) { width: auto; } } &__controls { margin-bottom: 0; display: flex; flex-direction: row !important; gap: map-deep-get($token-spacer-stack-max-map, "md"); @include media-breakpoint-up($testimonial-slider-breakpoint) { flex-direction: column !important; } } &__control { // follows same logic as parent width: map-deep-get($token-sizes-unit-map, "64"); height: map-deep-get($token-sizes-unit-map, "64"); padding: map-deep-get($token-spacer-inset-map, "sm"); border-radius: map-deep-get($token-radius-map, "16"); display: flex; align-items: center; justify-content: center; text-align: center; outline: $border-width*2 solid transparent !important; outline-offset: -($border-width*2); // swiperjs active class because other custom added defined class in options doesn't work .swiper-slide-thumb-active & { @include custom-prop-fallback("outline-color", "comp-tile-active-border-color", true, true); } } &__controlImg { border-radius: map-deep-get($token-radius-map, "circle"); width: map-deep-get($token-sizes-unit-map, "48"); height: map-deep-get($token-sizes-unit-map, "48"); flex-shrink: 0; IMG { object-fit: cover; } } &__slide { width: auto !important; padding: 0 !important; &.-isActive { #{$self}__slideBox, #{$self}__img { transform: translate(0,0); } } } &__slideInner { display: flex; align-items: center; } &__slideBox { @include media-breakpoint-up($testimonial-slider-breakpoint) { margin-top: map-deep-get($token-spacer-unit-map, "64"); margin-left: -(map-deep-get($token-spacer-unit-map, "64")); transform: translate(0, 50%); } @include media-breakpoint-up("lg") { margin-top: 0; } } &__img { display: none; flex-shrink: 0; border-radius: map-deep-get($token-radius-map, "16"); width: 200px; height: 200px; @include media-breakpoint-up($testimonial-slider-breakpoint) { display: block; } @include media-breakpoint-up("lg") { width: 375px; height: 375px; } IMG { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } } &__slideBox, &__img { transition: 0.15s transform linear; } &__textContent { position: relative; @include fluid-padding-right($min_width, $max_width, $h1-page-cover-font-size-min*1.35, $h1-page-cover-font-size*1.35, true); &::before { content: "“"; position: absolute; top: -0.1em; right: 0; font-family: $headings-font-family; font-weight: map-deep-get($token-font-weight-map, "semi-bold"); @include fluid-type($min_width, $max_width, $h1-page-cover-font-size-min*2, $h1-page-cover-font-size*2, true); @include custom-prop-fallback("color", "sys-color-text-highlight-vivid"); line-height: 1; text-align: right; } } &__meta { display: block; @include custom-prop-fallback("color", "sys-color-text-primary-muted"); font-style: normal } /* modifiers */ // testimonialSlider -altStyle &.-altStyle { // follows same logic as base element } /* random parent element */ /* * * Syntax : .randomParentElt & {} * */ /* Pseudo Classes */ &:hover { @media (hover: hover) { } } &:focus { } &:active { } &:focus, &:active { } }