Skip to content

Dropdown

Styles for a h-dropdown webcomponent.

Structurally .dropdown contains following slements:

  • .dropdown__toggler
  • .dropdown__content
  • .dropdown__close

And following modifiers:

  • .dropdown__content_visible
  • .dropdown__content_show-direction-start
  • .dropdown__content_show-direction-end
  • .dropdown__content_no-padding
  • .dropdown__content_right

LESS

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

Variables used to style dropdown.

@dropdownTogglerColor: @globalFontColor;
@dropdownTogglerFill: @globalFontColor;
@dropdownTogglerBorder: none;
@dropdownTogglerBorderRadius: 2px;
@dropdownTogglerBgColor: transparent;
@dropdownTogglerTextDecorationHover: underline;

@dropdownTogglerOutlineColorFocus: @primaryColors700;

@dropdownContentBgColor: @globalBodyBackgroundColor;
@dropdownContentBoxShadow: @shadowL;

@dropdownContentPadding: @globalSpacing;

@dropdownContentBorder: 1px solid @neutralColors100;
@dropdownContentBorderRadius: 4px;

@dropdownBackdropBgColor: @neutralColors900;

@dropdownTransition: opacity 0.15s ease-in-out;
@dropdownChangeableProperties: opacity;

@dropdownMinWidthMobile: 310px;

@dropdownTransitionMobile: @dropdownTransition, transform 0.15s cubic-bezier(0, 1, 0.59, 0.97);
@dropdownChangeablePropertiesMobile: @dropdownChangeableProperties, transform;

If you want to change dropdown styles, you can just change the variables. To change default background-color of the dropdown content just modify @dropdownContentBgColor variable.

@dropdownContentBgColor: red;

Here are standard dropdown styles.

h-dropdown {
    h-dropdown-content {
        display: none;
    }
}

.dropdown {
    &__toggler {
        border-radius: @dropdownTogglerBorderRadius;
        display: block;
        width: fit-content;

        &:focus-within {
            outline: 2px solid @dropdownTogglerOutlineColorFocus;
            outline-offset: 0.125rem;
        }
    }

    &__content {
        width: fit-content;

        background-color: @dropdownContentBgColor;
        box-shadow: @dropdownContentBoxShadow;

        padding: @dropdownContentPadding;

        border: @dropdownContentBorder;
        border-radius: @dropdownContentBorderRadius;

        transition: @dropdownTransition;
        will-change: @dropdownChangeableProperties;
        overflow-y: auto;
        overflow-x: hidden;

        &_visible {
            z-index: 5;
            display: block;
            width: fit-content;
        }

        &_show-direction-start,
        &_hide-direction-end {
            opacity: 0;
        }

        &_show-direction-end,
        &_hide-direction-start {
            opacity: 1;
        }

        &_no-padding {
            padding: 0;
        }
    }

    &__close {
        display: flex;
        cursor: pointer;
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .dropdown {
        &__content {
            position: fixed;
            top: 0;
            left: 0;

            height: 100dvh;
            width: 70vw;
            min-width: @dropdownMinWidthMobile;

            z-index: 1;

            transition: @dropdownTransitionMobile;
            will-change: @dropdownChangeablePropertiesMobile;

            &_show-direction-start,
            &_hide-direction-end {
                opacity: 0;
                transform: translateX(-100%);
            }

            &_show-direction-end,
            &_hide-direction-start {
                opacity: 1;
                transform: translateX(0);
            }

            &_right {
                left: unset;
                right: 0;

                &.dropdown__content_show-direction-end,
                &.dropdown__content_hide-direction-start {
                    opacity: 0;
                    transform: translateX(200%);
                }

                &.dropdown__content_show-direction-start,
                &.dropdown__content_hide-direction-end {
                    opacity: 1;
                    transform: translateX(100%);
                }
            }
        }
    }
}

Webcomponents reference