$subheader-line-height: 1em !default; $subheader-font-size: 0.9em !default; $subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2) !default; $subheader-font-weight: 400 !default; $subheader-margin: 0 0 0 0 !default; $subheader-margin-right: 16px !default; $subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default; @keyframes subheaderStickyHoverIn { 0% { box-shadow: 0 0 0 0 transparent; } 100% { box-shadow: $subheader-sticky-shadow; } } @keyframes subheaderStickyHoverOut { 0% { box-shadow: $subheader-sticky-shadow; } 100% { box-shadow: 0 0 0 0 transparent; } } .md-subheader { display: block; font-size: $subheader-font-size; font-weight: $subheader-font-weight; line-height: $subheader-line-height; padding: $subheader-padding; margin: $subheader-margin; margin-right: $subheader-margin-right; position: relative; &:not(.md-sticky-no-effect) { &:after { position: absolute; left: 0; bottom: 0; top: 0; right: -$subheader-margin-right; content: ''; } transition: 0.2s ease-out margin; &[sticky-state="active"] { margin-top: -2px; } &:not(.md-sticky-clone)[sticky-prev-state="active"]:after { animation: subheaderStickyHoverOut 0.3s ease-out both; } } }