// vf-section-header @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ .vf-section-header__heading { @include set-type(text-heading--3, $custom-margin-bottom: 0); & + .vf-section-header__subheading, & + .vf-section-header__content { margin-top: map-get($vf-spacing-map, vf-spacing--500); } } .vf-section-header__heading--is-link, .vf-section-header__heading--is-link a { @include inline-link($vf-link--visited-color: color-interactive()); cursor: pointer; display: grid; grid-column-gap: space(100); grid-template-columns: auto 1fr; .vf-section-header__icon { fill: currentColor; padding-top: .1em; // to compensate for ascender, this value should be fairly consistent across most type families transform: translateX(map-get($vf-spacing-map, vf-spacing--100)); // @todo: some sort of centralised and reusable docs, tokens, guidance on animations transition-duration: 125ms; transition-property: transform; transition-timing-function: cubic-bezier(.45, .05, .55, .95); } &:hover, &:focus { .vf-section-header__icon { transform: translateX(map-get($vf-spacing-map, vf-spacing--200)); } &:visited { color: map-get($vf-colors-map, vf-color--blue--dark); } } } .vf-section-header__subheading { @include set-type(text-heading--4, $custom-margin-bottom: 0); } .vf-section-header__text { @include set-type(text-body--2, $custom-margin-bottom: 8px); a, .vf-link { @include inline-link; } &:last-of-type { @include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--0)); } .vf-section-header__heading + & { margin-top: 24px; } .vf-section-header__subheading + & { margin-top: 16px; } .vf-section-header__heading + & { margin-top: map-get($vf-spacing-map, vf-spacing--500); } .vf-section-header__subheading + & { margin-top: map-get($vf-spacing-map, vf-spacing--400); } }