/* variables specific to current element */ $element-specific-variables: ""; .#{$namespace}formDisclaimer { /* Save root element context for easy access if nesting is needed */ $self: &; /* properties of current element + media queries */ @include custom-prop-fallback("color","comp-disclaimer-text-color"); @extend %textHelperSmall; /* 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 */ // formDisclaimer__childElement A { @include custom-prop-fallback("color","comp-disclaimer-link-text-color"); text-decoration: underline !important; } /* modifiers */ // formDisclaimer -altStyle &.-small { font-size: map-deep-get($token-font-size-map, "body", "3xs"); } &.-medium { font-size: map-deep-get($token-font-size-map, "body", "s"); } &.-insetHorizMd { padding: 0 map-deep-get($token-spacer-inset-map, "md"); } &.-insetHorizLg { padding: 0 map-deep-get($token-spacer-inset-map, "md"); @include media-breakpoint-up("lg") { padding: 0 map-deep-get($token-spacer-inset-map, "lg"); } } /* random parent element */ /* * * Syntax : .randomParentElt & {} * */ /* Pseudo Classes */ &:hover { @media (hover: hover) { } } &:focus { } &:active { } &:focus, &:active { } }