_copy.scss

// ------------------------------
// 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;
}