Skip to content

Scroller

Styles for a scrolling content component (scroller) used in the scroller module.

Structurally .scroller contains several elements:

  • .scroller__wrapper - flex container that wraps the carousel track
  • .scroller__content - container for the carousel track with transform skew capabilities
  • .scroller__slide - individual slide wrapper with image positioning support
  • .scroller__controls - container for carousel control buttons

And slide modifiers for image placement:

  • .image_left - image positioned on the left
  • .image_right - image positioned on the right
  • .image_above - image positioned above content
  • .image_below - image positioned below content

Control button modifiers:

  • .scroller__controls_play - play button control
  • .scroller__controls_pause - pause button control

Example

Here is an example of a scrolling content element usage. We also use splide carousel styles here for presentation purposes.

HTML
<h-scroller-play class="scroller__controls scroller__controls_play">
    <h-icon>
        <svg class="icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-play"></use>
        </svg>
    </h-icon>
</h-scroller-play>

LESS

You can modify any scroller less variable in your User Less section to change scroller styles.

Variables

@scrollerGap: @globalSpacing;
@scrollerPadding: @globalSpacing * 0.5;
@scrollerWithButtonsPadding: 24px;

@scrollerButtonOffset: 4px;
@scrollerButtonSize: @scrollerWithButtonsPadding;

@scrollerIconBackgroundColor: @neutralColors800;
@scrollerIconBorderRadius: 50%;
@scrollerIconColor: @neutralColors0;
@scrollerIconSize: 24px;
@scrollerIconSvgSize: 12px;

If you want to change scrolling-content styles, you can just change the variables. To change a default padding-block of the scroller content, just modify @scrollerPadding variable.

@scrollerPadding: 1rem;

Scrolling-content standard styles

Here are standard scroller styles.

.scroller {
    position: relative;

    &__wrapper {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: var(--height, auto);
        background-color: var(--bgColor, transparent);
    }

    &__content {
        height: 100%;
        place-content: center;

        .splide {
            position: static;
            height: 100%;
            align-items: var(--vertical-alignment, end);

            &__track {
                --invertedSkew: ~'calc(var(--skew, 0deg) * -1)';
                transform: skew(var(--invertedSkew), var(--skew, 0deg));
                padding-block: @scrollerPadding;
            }
        }
    }

    &:has(.scroller__controls) {
        .splide__track {
            padding-block: @scrollerWithButtonsPadding;
        }
    }

    .splide__slide {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: @scrollerGap;
    }
    &__slide {
        max-height: var(--height, auto);
        &.image {
            &_left {
                flex-direction: row;
            }
            &_right {
                flex-direction: row-reverse;
            }
            &_above {
                flex-direction: column;
            }
            &_below {
                flex-direction: column-reverse;
            }
        }
    }

    &__controls {
        position: absolute;
        display: grid;
        place-content: center;
        top: @scrollerButtonOffset;
        right: @scrollerButtonOffset;
        width: @scrollerButtonSize;
        height: @scrollerButtonSize;

        h-icon {
            background-color: @scrollerIconBackgroundColor;
            border-radius: @scrollerIconBorderRadius;
            width: @scrollerIconSize;
            height: @scrollerIconSize;

            svg {
                width: @scrollerIconSvgSize;
                height: @scrollerIconSvgSize;
                fill: transparent;
                stroke: @scrollerIconColor;
            }
        }

        &_play {
            svg {
                transform: translateX(1px);
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .splide.is-active .splide__list {
            transform: none !important;
        }
    }
}

Styles reference

Modules reference