// ------------------------------ // edX Pattern Library: Components - Copy // About: Contains base styling for copy (general text and type used in content and functionaly). // #GLOBAL // #INDIVIDUAL COPY CASES // ---------------------------- // #GLOBAL // ---------------------------- .copy { color: $text-base-color; &.emphasized { color: $text-emphasized-color; font-weight: $text-emphasized-font-weight; } &.de-emphasized { color: $text-de-emphasized-color; font-weight: $text-de-emphasized-font-weight; } } // ---------------------------- // #INDIVIDUAL COPY CASES // ---------------------------- // archetypes %copy-lead { font-size: font-size(large); line-height: line-height(mid-large); p, ol, ul, dl { margin-bottom: spacing-vertical(mid-small); } } %copy-large { font-size: font-size(mid-large); line-height: line-height(mid-large); p, ol, ul, dl { margin-bottom: spacing-vertical(small); } } %copy-base { font-size: font-size(base); line-height: line-height(mid-large); p, ol, ul, dl { margin-bottom: spacing-vertical(small); } } %copy-meta { font-size: font-size(small); line-height: line-height(mid-large); p, ol, ul, dl { margin-bottom: spacing-vertical(small); } } %copy-micro { font-size: font-size(x-small); line-height: line-height(small); p, ol, ul, dl { margin-bottom: spacing-vertical(small); } } // application of archetypes .copy-lead { @extend %copy-lead; } .copy-large { @extend %copy-large; } .copy-base { @extend %copy-base; } .copy-meta { @extend %copy-meta; } .copy-micro { @extend %copy-micro; }