New Feature: Certificates Web View
- SOL-465: Initial implementation of certificates web view and signatories (names/titles) - SOL-718 Close button is working properly - SOL-801 Backbone Signatories Modeling - SOL-803 Underscore template: Editor (Add) - SOL-802 Signatories: Underscore template - Details - SOL-804 Signatories: Underscore template: Editor (Edit) - Add signatory delete Django view - SOL-805 Signatory editor (Delete) - Add Coffeescript router - SOL-716 Jasmine Tests - Added missing minified JS library - client side validation of signatory fields - SOL-390 signatories names - Remove obsolete extends Sass files - input maxlength limiting for signatory information - SOL-389: Course title override - SOL-466: Add capability to upload digitized signatures in Studio - ziafazal: fixed css for upload signature image - ziafazal: completed deletion of signature images - UX-1741: Add initial static rendering/styling for Open edX web certs * creating new global static dir * adding static version of edX UX pattern library assets * adding web certificates static assets * adding static (+abstracted) web certificates rendering * creating two tiers of rendering (base + distinguished) * providing sample assets for certificate rendering * supporting RTL layouts * adding certifcates assests to edX static asset pipeline * temporarily hiding the mozilla open badges share action * wiring print button to print view/page * fixup! addressing conflict artifact in valid cert template * fixup! adding missing %hd-subsection sass extend + components comment clean up * fixup! correcting pattern library .hd-4 font-weight value - SOL-468 Linked Student View for Web View Credential - SOL-467: Add capability to upload organization logos for certificates - SOL-391 / SOL-387: Signatory related info (assets) in certificates web view - kelketek: Fixes for static asset collection in certificate HTML view. - SOL-398 Web View: Public Access - mattdrayer: Post-merge branch stabilization - catong: Initial changes to Studio template and Help config file - ziafazal: Branch stabilizations - SOL-387: Display organization logo on LMS web view - talbs/mattdrayer: Branch Stabilizations - talbs: converting backpack action to use a button HTML element - talbs: revising placeholder assets + their rendering in cert view - mattdrayer: Username web view wireup - SOL-386 Certificate Mode Previews - SOL-905: Make organization logo and signatory signature uneditable - SOL-922: Improve test coverage - SOL-765: Add LinkedIn sharing - [marco] temporary styling adjustment to account for smaller linkedin share image / fake button - SOL-921: Address hardcoded template items - SOL-927: Deleting certificate should delete org logo image also * updated invalid template * removed hr * fix invalid certificate error - clrux: Add i18n to certificate templates and partials - mattdrayer: Pylint violations - SOL-920 Certificate Activation/Deactivation - mattdrayer: Added LMS support - SOL-932: Fix preview mode support in certificate view - SOL-934: Fixed bug reported and broken tests - SOL-935 removed the 'valid' word from web view title - talbs: RTL support updates/fixes * revising certificate type icon/name vertical alignment * removing unused older certificate template * revising styling for message/banner actions * abstracting accomplishment type to use course mode + adding in honor/verified-specific placeholders - mattdrayer: JSHint violations
This commit is contained in:
Matt Drayer
342
static/pattern-library/sass/components/_buttons.scss
Normal file
342
static/pattern-library/sass/components/_buttons.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
// ------------------------------
|
||||
// edX Pattern Library: Components - Buttons
|
||||
|
||||
// About: Contains base styling for demonstration and utility for buttons.
|
||||
// ----------------------------
|
||||
|
||||
// #LAYOUT
|
||||
// #GLOBALS
|
||||
// #BASE (size)
|
||||
// #LARGE (size)
|
||||
// #SMALL (size)
|
||||
// #DEFAULT (style)
|
||||
// #PRIMARY (style)
|
||||
// #SECONDARY (style)
|
||||
// #LINK (style)
|
||||
// #ELEVATED (type)
|
||||
// #ELEVATED-ALT (type)
|
||||
// #COMBO (type)
|
||||
// #ICONS (type)
|
||||
// #OVERLAY (type)
|
||||
// ----------------------------
|
||||
|
||||
// ----------------------------
|
||||
// #GLOBALS
|
||||
// ----------------------------
|
||||
.btn {
|
||||
@include transition(
|
||||
color timing(xx-fast) ease-in-out 0s,
|
||||
border-color timing(xx-fast) ease-in-out 0s,
|
||||
background timing(xx-fast) ease-in-out 0s,
|
||||
box-shadow timing(xx-fast) ease-in-out 0s
|
||||
);
|
||||
|
||||
// Display: inline, side-by-side
|
||||
display: inline-block;
|
||||
border-style: $buttons-border-style;
|
||||
border-radius: $buttons-border-radius;
|
||||
border-width: $buttons-border-size;
|
||||
font-weight: $buttons-font-weight;
|
||||
|
||||
// Display: block, one button per line, full width
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
@extend %state-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------
|
||||
// #BASE
|
||||
// ----------------------------
|
||||
.btn-base {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(base);
|
||||
font-size: font-size(base);
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #LARGE
|
||||
// ----------------------------
|
||||
.btn-large {
|
||||
padding: spacing-vertical(small) spacing-horizontal(mid-large);
|
||||
font-size: font-size(mid-large);
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #SMALL
|
||||
// ----------------------------
|
||||
.btn-small {
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(small);
|
||||
font-size: font-size(small);
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #DEFAULT
|
||||
// ----------------------------
|
||||
.btn-default {
|
||||
border-color: palette(primary, base);
|
||||
// background: palette(grayscale, white);
|
||||
color: palette(primary, base);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
background: palette(primary, base);
|
||||
color: palette(grayscale, white);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
border-color: palette(primary, dark);
|
||||
background: palette(primary, dark);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, light);
|
||||
background: palette(grayscale, white);
|
||||
color: palette(grayscale, base);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------
|
||||
// #PRIMARY
|
||||
// ----------------------------
|
||||
.btn-primary {
|
||||
border-color: palette(primary, base);
|
||||
background: palette(primary, base);
|
||||
color: palette(grayscale, white);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
border-color: palette(primary, accent);
|
||||
background: palette(primary, accent);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
border-color: palette(primary, base);
|
||||
background: palette(primary, base);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, light);
|
||||
background: palette(grayscale, light);
|
||||
color: palette(grayscale, base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #SECONDARY
|
||||
// ----------------------------
|
||||
.btn-secondary {
|
||||
border-color: $transparent;
|
||||
background: $transparent;
|
||||
color: palette(primary, base);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
border-color: palette(grayscale-cool, light);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
border-color: palette(primary, base);
|
||||
color: palette(primary, base);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, light);
|
||||
color: palette(grayscale, light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #LINK
|
||||
// ----------------------------
|
||||
.btn-link {
|
||||
@extend %link;
|
||||
|
||||
// reset of inherited buttons
|
||||
border-radius: 0;
|
||||
border-color: $transparent;
|
||||
padding: 1px;
|
||||
background: $transparent;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #ELEVATED
|
||||
// ----------------------------
|
||||
.btn-elevated {
|
||||
border-color: palette(primary, base);
|
||||
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
|
||||
background: palette(primary, base);
|
||||
color: palette(grayscale, white);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
|
||||
background: palette(primary, accent);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
|
||||
background: palette(primary, dark);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, x-light);
|
||||
box-shadow: inset 0 -1px 0 palette(grayscale, light);
|
||||
background: palette(grayscale, x-light);
|
||||
color: palette(grayscale, base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #ELEVATED-ALT
|
||||
// ----------------------------
|
||||
.btn-elevated-alt {
|
||||
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(grayscale-cool, light);
|
||||
border-color: palette(grayscale-cool, light);
|
||||
background: $transparent;
|
||||
color: palette(primary, base);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
border-color: palette(primary, base);
|
||||
box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, base);
|
||||
color: palette(grayscale, white);
|
||||
background: palette(primary, accent);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
|
||||
background: palette(primary, dark);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, x-light);
|
||||
box-shadow: inset 0 -1px 0 palette(grayscale, light);
|
||||
background: palette(grayscale, x-light);
|
||||
color: palette(grayscale, base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #COMBO
|
||||
// ----------------------------
|
||||
.btn-combo {
|
||||
border-radius: 0;
|
||||
|
||||
// targets the first element in a parent container
|
||||
&:first-of-type {
|
||||
@include border-top-left-radius($buttons-border-radius);
|
||||
@include border-bottom-left-radius($buttons-border-radius);
|
||||
}
|
||||
|
||||
// targets the last element in a parent container
|
||||
&:last-of-type {
|
||||
@include border-top-right-radius($buttons-border-radius);
|
||||
@include border-bottom-right-radius($buttons-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #ICONS
|
||||
// ----------------------------
|
||||
.has-icon {
|
||||
|
||||
}
|
||||
|
||||
.has-icon-reverse {
|
||||
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #OVERLAY
|
||||
// ----------------------------
|
||||
.btn-overlay {
|
||||
border-color: palette(grayscale, white);
|
||||
background: $transparent;
|
||||
color: palette(grayscale, white);
|
||||
font-weight: font-weight(semi-bold);
|
||||
|
||||
// STATE: hover and focus
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
background: palette(grayscale, white);
|
||||
color: palette(primary, base);
|
||||
}
|
||||
|
||||
// STATE: is pressed or active
|
||||
&:active,
|
||||
&.is-pressed,
|
||||
&.is-active {
|
||||
color: palette(primary, dark);
|
||||
}
|
||||
|
||||
// STATE: is disabled
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
border-color: palette(grayscale, trans);
|
||||
color: palette(grayscale, x-light);
|
||||
|
||||
&:hover {
|
||||
border-color: palette(grayscale, trans);
|
||||
background: $transparent;
|
||||
color: palette(grayscale, x-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
269
static/pattern-library/sass/components/_colors.scss
Normal file
269
static/pattern-library/sass/components/_colors.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
// ------------------------------
|
||||
// edX Pattern Library: Components - Colors
|
||||
|
||||
// About: Contains base styling for demonstration and utility color palette stylng.
|
||||
// ----------------------------
|
||||
|
||||
// #SWATCH LAYOUT
|
||||
// #SWATCH RENDERING
|
||||
// ----------------------------
|
||||
|
||||
// ----------------------------
|
||||
// #SWATCH LAYOUT
|
||||
// ----------------------------
|
||||
.example {
|
||||
@include transition(all timing(x-fast) ease-in-out);
|
||||
border: 1px solid palette(grayscale, x-light);
|
||||
border-radius: spacing-horizontal(xx-small);
|
||||
margin-bottom: spacing-vertical(mid-small);
|
||||
padding: spacing-vertical(x-small) spacing-horizontal(small);
|
||||
box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, xx-trans);
|
||||
background: palette(grayscale, white);
|
||||
color: palette(grayscale, white);
|
||||
|
||||
// STATE: hover, focus, and active
|
||||
&:hover, &:focus, &:active {
|
||||
@include transform(scale(1.05));
|
||||
box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, x-trans);
|
||||
}
|
||||
}
|
||||
|
||||
.swatch-color {
|
||||
display: block;
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
padding: spacing-vertical(mid-large) spacing-horizontal(mid-small);
|
||||
@include text-align(center);
|
||||
|
||||
.color-class {
|
||||
font-size: font-size(small);
|
||||
text-transform: lowercase;
|
||||
|
||||
// CASE: light text on dark bg
|
||||
&.lod {
|
||||
color: palette(grayscale, white);
|
||||
}
|
||||
|
||||
// CASE: dark text on light bg
|
||||
&.dol {
|
||||
color: palette(grayscale, black);
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: base color
|
||||
&.base {
|
||||
|
||||
.color-class {
|
||||
font-weight: font-weight(bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swatch-meta {
|
||||
padding: spacing-vertical(xx-small) spacing-horizontal(small);
|
||||
white-space: nowrap;
|
||||
font-size: font-size(small);
|
||||
@include text-align(center);
|
||||
color: palette(grayscale, dark);
|
||||
|
||||
.color-rgb {
|
||||
@include ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------
|
||||
// #SWATCH RENDERING
|
||||
// ----------------------------
|
||||
.brand-primary {
|
||||
|
||||
&.base {
|
||||
background: palette(primary, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(primary, light);
|
||||
}
|
||||
|
||||
&.x-light {
|
||||
background: palette(primary, x-light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(primary, dark);
|
||||
}
|
||||
|
||||
&.x-dark {
|
||||
background: palette(primary, x-dark);
|
||||
}
|
||||
|
||||
&.accent {
|
||||
background: palette(primary, accent);
|
||||
}
|
||||
|
||||
&.x-accent {
|
||||
background: palette(primary, x-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.brand-secondary {
|
||||
background: palette(secondary, base);
|
||||
|
||||
&.base {
|
||||
background: palette(secondary, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(secondary, light);
|
||||
}
|
||||
|
||||
&.x-light {
|
||||
background: palette(secondary, x-light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(secondary, dark);
|
||||
}
|
||||
|
||||
&.x-dark {
|
||||
background: palette(secondary, x-dark);
|
||||
}
|
||||
|
||||
&.accent {
|
||||
background: palette(secondary, accent);
|
||||
}
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
background: palette(grayscale, base);
|
||||
|
||||
&.base {
|
||||
background: palette(grayscale, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(grayscale, light);
|
||||
}
|
||||
|
||||
&.x-light {
|
||||
background: palette(grayscale, x-light);
|
||||
}
|
||||
|
||||
&.white {
|
||||
background: palette(grayscale, white);
|
||||
}
|
||||
|
||||
&.white-t {
|
||||
background: palette(grayscale, white-t);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(grayscale, dark);
|
||||
}
|
||||
|
||||
&.x-dark {
|
||||
background: palette(grayscale, x-dark);
|
||||
}
|
||||
|
||||
&.black {
|
||||
background: palette(grayscale, black);
|
||||
}
|
||||
|
||||
&.black-t {
|
||||
background: palette(grayscale, black-t);
|
||||
}
|
||||
|
||||
&.trans {
|
||||
background: palette(grayscale, trans);
|
||||
}
|
||||
|
||||
&.x-trans {
|
||||
background: palette(grayscale, x-trans);
|
||||
}
|
||||
|
||||
&.xx-trans {
|
||||
background: palette(grayscale, xx-trans);
|
||||
}
|
||||
}
|
||||
|
||||
.grayscale-cool {
|
||||
background: palette(grayscale-cool, base);
|
||||
|
||||
&.base {
|
||||
background: palette(grayscale-cool, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(grayscale-cool, light);
|
||||
}
|
||||
|
||||
&.x-light {
|
||||
background: palette(grayscale-cool, x-light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(grayscale-cool, dark);
|
||||
}
|
||||
|
||||
&.x-dark {
|
||||
background: palette(grayscale-cool, x-dark);
|
||||
}
|
||||
|
||||
&.trans {
|
||||
background: palette(grayscale-cool, trans);
|
||||
}
|
||||
|
||||
&.x-trans {
|
||||
background: palette(grayscale-cool, x-trans);
|
||||
}
|
||||
|
||||
&.xx-trans {
|
||||
background: palette(grayscale-cool, xx-trans);
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
background: palette(success, base);
|
||||
|
||||
&.base {
|
||||
background: palette(success, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(success, light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(success, dark);
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: palette(warning, base);
|
||||
|
||||
&.base {
|
||||
background: palette(warning, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(warning, light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(warning, dark);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: palette(error, base);
|
||||
|
||||
&.base {
|
||||
background: palette(error, base);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: palette(error, light);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: palette(error, dark);
|
||||
}
|
||||
}
|
||||
111
static/pattern-library/sass/components/_copy.scss
Normal file
111
static/pattern-library/sass/components/_copy.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
// ------------------------------
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
102
static/pattern-library/sass/components/_headings.scss
Normal file
102
static/pattern-library/sass/components/_headings.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
// ------------------------------
|
||||
// edX Pattern Library: Components - Headings
|
||||
|
||||
// About: Contains base styling for headings (leading type for sections of content and UI).
|
||||
|
||||
// #GLOBAL
|
||||
// #INDIVIDUAL HEADINGS
|
||||
|
||||
// ----------------------------
|
||||
// #GLOBAL
|
||||
// ----------------------------
|
||||
.hd-1,
|
||||
.hd-2,
|
||||
.hd-3,
|
||||
.hd-4,
|
||||
.hd-5,
|
||||
.hd-6 {
|
||||
@extend %reset-headings;
|
||||
|
||||
&.emphasized {
|
||||
color: $headings-primary-color;
|
||||
font-weight: $headings-font-weight-bold;
|
||||
}
|
||||
|
||||
&.de-emphasized {
|
||||
color: $headings-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hd-6,
|
||||
.hd-7 {
|
||||
font-weight: $headings-font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.emphasized {
|
||||
font-weight: $headings-font-weight-x-bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// #INDIVIDUAL HEADINGS
|
||||
// ----------------------------
|
||||
// Level one heading
|
||||
.hd-1 {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
font-size: font-size(xxx-large);
|
||||
line-height: line-height(xx-large);
|
||||
}
|
||||
|
||||
|
||||
// Level two heading
|
||||
.hd-2 {
|
||||
margin-bottom: spacing-vertical(small);
|
||||
font-size: font-size(xx-large);
|
||||
line-height: line-height(x-large);
|
||||
}
|
||||
|
||||
|
||||
// Level three heading
|
||||
.hd-3 {
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
font-size: font-size(x-large);
|
||||
line-height: line-height(large);
|
||||
|
||||
&.de-emphasized {
|
||||
color: palette(grayscale, base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Level four heading
|
||||
.hd-4 {
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
font-weight: font-weight(semi-bold);
|
||||
font-size: font-size(large);
|
||||
line-height: line-height(mid-small);
|
||||
}
|
||||
|
||||
|
||||
// Level five heading
|
||||
.hd-5 {
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
font-weight: font-weight(bold);
|
||||
font-size: font-size(mid-large);
|
||||
line-height: line-height(mid-large);
|
||||
}
|
||||
|
||||
|
||||
// Level six heading
|
||||
.hd-6 {
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
font-size: font-size(small);
|
||||
line-height: line-height(mid-small);
|
||||
}
|
||||
|
||||
// Level seven heading
|
||||
.hd-7 {
|
||||
margin-bottom: spacing-vertical(x-small);
|
||||
font-size: font-size(x-small);
|
||||
line-height: line-height(small);
|
||||
}
|
||||
Reference in New Issue
Block a user