/* variables specific to current element */ $element-specific-variables: ""; .#{$namespace}actionMenu { /* Save root element context for easy access if nesting is needed */ $self: &; /* properties of current element + media queries */ /* 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 */ // actionMenu__reorder &__reorder { // follows same logic as parent color: map-deep-get($token-color-brand-map, "secondary", "100"); } &__scrollHeader { position: sticky; top: -$dropdown-padding-y; z-index: z("low"); @include custom-prop-fallback("background-color","comp-dropdown-background-color"); margin-top: -$dropdown-padding-y; padding-top: $dropdown-padding-y; padding-bottom: $dropdown-divider-margin-y; margin-bottom: $dropdown-divider-margin-y; transition: transform 0.25s linear; &::after { content: ""; position: absolute; bottom: 0; left: $dropdown-item-padding-x; right: $dropdown-item-padding-x; @include nav-divider($dropdown-divider-bg, 0, true); } } &__scrollSort { padding-bottom: $dropdown-divider-margin-y; } &__scrollNoMarginTop { margin-top: 0 !important; } /* modifiers */ // actionMenu -altStyle &.-filters { // follows same logic as base element width: 320px; overflow-y: auto; overscroll-behavior: contain; } &.-reorder { width: 320px; } /* random parent element */ /* * * Syntax : .randomParentElt & {} * */ /* Pseudo Classes */ &:hover { @media (hover: hover) { } } &:focus { } &:active { } &:focus, &:active { } }