metro4/less/typography.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

html {
    font-family: @fontName;
    font-size: 100%;
}

body {
    font-family: @fontName;
    font-size: 1rem;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    color: @bodyColor;
}

.text {
    &-ultralight {
        font-weight: 100 !important;
    }
    &-light {
        font-weight: 200 !important;
    }
    &-normal {
        font-weight: 400 !important;
    }
    &-medium {
        font-weight: 500 !important;
    }
    &-bold {
        font-weight: 700 !important;
    }
}

.display4 {
    .px2rem(font-size, 112px);
    font-weight: 200;
}

.display3 {
    .px2rem(font-size, 56px);
    font-weight: 400;
}

.display2 {
    .px2rem(font-size, 48px);
    font-weight: 400;
}

.display1 {
    .px2rem(font-size, 36px);
    font-weight: 400;
}

.display1, .display2, .display3, .display4 {
    .px2rem(margin-bottom, 20px);
    line-height: 1.2;
}

.display4, .display3, .display2, .display1 {
    color: lighten(@black, 46%);
}

.leader, .h1, h1 {
    font-weight: 100;
    .px2rem(font-size, 48px);
}
.sub-leader, .h2, h2 {
    font-weight: 400;
    .px2rem(font-size, 32px);
}
.header, .h3, h3 {
    font-weight: 500;
    .px2rem(font-size, 28px);
}
.sub-header, .h4, h4 {
    font-weight: 500;
    .px2rem(font-size, 24px);
}
.alt-header, .h5, h5 {
    font-weight: 500;
    .px2rem(font-size, 20px);
}
.sub-alt-header, .h6, h6 {
    font-weight: 500;
    .px2rem(font-size, 18px);
}

.text-small {
    font-weight: 400;
    .px2rem(font-size, 12px);
}
.text-secondary {
    font-weight: 400;
    .px2rem(font-size, 14px);
}

.text-leader {
    .px2rem(font-size, 24px);
    font-weight: 300;
}
.text-leader2 {
    .px2rem(font-size, 20px);
    font-weight: 300;
}

.text-muted {
    color: @gray;
}

.leader, .h1, h1,
.sub-leader, .h2, h2,
.header, .h3, h3,
.sub-header, .h4, h4,
.alt-header, .h5, h5,
.sub-alt-header, .h6, h6 {
    color: inherit;
    margin-bottom: .5rem;
    line-height: 1.1;

    & > small, & > .small {
        font-weight: 400;
        font-size: .7em;
        line-height: 1;
        color: #777;
    }
}

.text-upper {text-transform: uppercase !important;}
.text-lower {text-transform: lowercase !important;}
.text-cap   {text-transform: capitalize !important;}
.text-left {text-align: left !important;}
.text-right {text-align: right !important;}
.text-center {text-align: center !important;}
.text-just {text-align: justify !important;}
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.va-top {vertical-align: top !important;}
.va-bottom {vertical-align: bottom !important;}
.va-baseline {vertical-align: baseline !important;}
.va-middle {vertical-align: middle !important;}
.va-sub {vertical-align: sub !important;}
.va-super {vertical-align: super !important;}
.va-text-top {vertical-align: text-top !important;}
.va-text-bottom {vertical-align: text-bottom !important;}

abbr {
    text-decoration: none;
    border-bottom: 1px @gray dotted;
    cursor: help;
    display: inline;
}

address {
    font-weight: normal;
    margin-bottom: 1rem;
    font-style: normal;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    .px2rem(font-size, 16px);
}

pre {
    margin-top: 0;
    .px2rem(margin-bottom, 16px);
    overflow: auto;
}

code {
    white-space: nowrap;
}


pre code {
    white-space: inherit;
}

a {
    position: relative;
    color: @linkColor;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    box-shadow: none;
}

a:hover {
    color: @linkColorHover;
    text-decoration: underline;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
    outline: 0;
}

.no-decor {
    text-decoration: none!important;
}

mark {
    .px2rem(padding, 3px);
    background-color: rgb(252, 248, 227);
    color: #000000;
}

del {
    color: @gray;
}

* + p {
    .px2rem(margin-top, 16px);
}

dl, ul, ol {
    margin-top: 0;
    .px2rem(margin-bottom, 16px);
    .px2rem(margin-left, 16px);
    list-style-position: inside;

    dl, ul, ol {
        margin-bottom: 0;
        .px2rem(padding-left, 24px);
    }
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
}

ol {
    list-style: decimal;
}

li.no-style {
        list-style-type: none;
}

ul {
    ul {
        list-style: circle;
        ul {
            list-style: square;
        }
    }
}

ol {
    list-style: upper-roman;

    ol {
        list-style: decimal;
        ol {
            list-style: lower-alpha;
        }
    }
}

ol {
    &.decimal {list-style: decimal;}
    &.roman-upper {list-style: upper-roman;}
    &.roman-lower {list-style: lower-roman;}
    &.alpha-upper {list-style: upper-alpha;}
    &.alpha-lower {list-style: lower-alpha;}
    &.latin-upper {list-style: upper-latin;}
    &.latin-lower {list-style: lower-latin;}
}

ul, ol {
    &.unstyled-list {
        list-style: none inside;
        margin-left: 0;
    }
}

.inline-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    li {
        display: inline-block;
        margin-right: .625rem;
        &:last-child {
            margin-right: 0;
        }
    }
}

dl {

    dt, dd {
        line-height: 1.25rem;
    }

    dt {
        font-weight: bold;
    }

    dd {
        margin-left: .9375rem;
    }

    &.horizontal {
        dt {
            float: left;
            width: 10rem;
            overflow: hidden;
            clear: left;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        dd {
            margin-left: 11.25rem;
        }
    }
}

.indent {
    &:first-letter {
        margin-left: 2.5rem;
    }

    &-letter {
        &:first-letter {
            font-weight: bold;
            float: left;
            padding: 0;
            .px2rem(line-height, 40px);
            .px2rem(font-size, 48px);
            .px2rem(margin-right, 8px);
            .px2rem(margin-left, -2px);
            .px2rem(margin-top, 2px);
        }
    }
}

blockquote {
    margin-bottom: 1rem;
    padding: 0 0 0 .625rem;
    border-left: .25rem @light solid;

    small {
        color: @gray;

        &:before {
            content: "\2014 \00A0";
        }
    }

    &.place-right {
        border: 0;
        border-right: 4px @light solid;
        padding-right: .625rem;
        text-align: right;

        small {
            &:before {
                content: "";
            }
            &:after {
                content: " \00A0 \2014";
            }
        }
    }
}

hr {
    border: 0;
    height: 2px;
    background-color: @light;

    &.thin {
        height: 1px;
    }

    &.fat {
        height: 3px;
    }
}

.tally, code, kbd {
    display: inline-block;
    padding: 0 6px;
    font-size: 90%;
    color: #bd4147;
    background-color: #f8f9fa;
    border-radius: @borderRadius;
    line-height: 20px;
    vertical-align: middle;
    height: 20px;

    a & {
        text-decoration: underline;
        cursor: pointer;
    }
}

kbd {
    background-color: @brandColor2;
    color: @white;
}

.tally {
    line-height: 16px;
    background-color: darken(#f8f9fa, 5%);
}

pre code {
    background-color: inherit;
    height: auto;
}

.remark {
    display: block;
    position: relative;
    border: 1px solid @borderColor;
    border-left: 4px solid @borderColor;
    padding: 1rem;
    .px2rem(font-size, 14px);
    margin: 1rem 0;
}

.reduce-1 {font-size: .9em!important;}
.reduce-2 {font-size: .8em!important;}
.reduce-3 {font-size: .7em!important;}
.reduce-4 {font-size: .6em!important;}
.reduce-5 {font-size: .5em!important;}

.enlarge {font-size: 1em!important;}

.enlarge-1 {font-size: 1.1em!important;}
.enlarge-2 {font-size: 1.2em!important;}
.enlarge-3 {font-size: 1.3em!important;}
.enlarge-4 {font-size: 1.4em!important;}
.enlarge-5 {font-size: 1.5em!important;}

.align-size {font-size: 1em!important;}

.text-underline {
    text-decoration: underline;
}

.generate-text-media-options(@mediaBreakpointListMobileLength);
.generate-text-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
    @m: extract(@mediaBreakpointListMobile, @i);

    @media screen and (min-width: @@m) {
        .text-upper-@{m} {text-transform: uppercase !important;}
        .text-lower-@{m} {text-transform: lowercase !important;}
        .text-cap-@{m}   {text-transform: capitalize !important;}

        .text-left-@{m} {text-align: left !important;}
        .text-right-@{m} {text-align: right !important;}
        .text-center-@{m} {text-align: center !important;}
        .text-just-@{m} {text-align: justify !important;}

        .va-top-@{m} {vertical-align: top !important;}
        .va-bottom-@{m} {vertical-align: bottom !important;}
        .va-baseline-@{m} {vertical-align: baseline !important;}
        .va-middle-@{m} {vertical-align: middle !important;}
        .va-sub-@{m} {vertical-align: sub !important;}
        .va-super-@{m} {vertical-align: super !important;}
        .va-text-top-@{m} {vertical-align: text-top !important;}
        .va-text-bottom-@{m} {vertical-align: text-bottom !important;}

        .reduce-1-@{m} {font-size: .9em!important;}
        .reduce-2-@{m} {font-size: .8em!important;}
        .reduce-3-@{m} {font-size: .7em!important;}
        .reduce-4-@{m} {font-size: .6em!important;}
        .reduce-5-@{m} {font-size: .5em!important;}

        .enlarge-@{m} {font-size: 1em!important;}

        .enlarge-1-@{m} {font-size: 1.1em!important;}
        .enlarge-2-@{m} {font-size: 1.2em!important;}
        .enlarge-3-@{m} {font-size: 1.3em!important;}
        .enlarge-4-@{m} {font-size: 1.4em!important;}
        .enlarge-5-@{m} {font-size: 1.5em!important;}
    }

    .generate-text-media-options(@name, @i + 1);
}