/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- components/typography.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@typography-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { .text-styling ( @body-text-color, @body-text-font-family, @body-text-font-size, @body-text-font-style, @body-text-font-weight, @body-text-line-height, @body-text-transform, @body-text-shadow ); & when (@body-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-link-text-color; text-decoration: @body-text-link-text-decoration; &:hover { color: @body-text-link-hover-text-color; text-decoration: @body-text-link-hover-text-decoration; } &:active { color: @body-text-link-active-text-color; text-decoration: @body-text-link-active-text-decoration; } &:disabled { color: @body-text-link-active-text-color; text-decoration: @body-text-link-active-text-decoration; } } } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @body-text-emphasize-color, @body-text-emphasize-font-family, @body-text-emphasize-font-size, @body-text-emphasize-font-style, @body-text-emphasize-font-weight, @body-text-emphasize-line-height, @body-text-emphasize-transform, @body-text-emphasize-shadow ); & when (@body-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-emphasize-link-text-color; text-decoration: @body-text-emphasize-link-text-decoration; &:hover { color: @body-text-emphasize-link-hover-text-color; text-decoration: @body-text-emphasize-link-hover-text-decoration; } &:active { color: @body-text-emphasize-link-active-text-color; text-decoration: @body-text-emphasize-link-active-text-decoration; } &:disabled { color: @body-text-emphasize-link-active-text-color; text-decoration: @body-text-emphasize-link-active-text-decoration; } } } } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @body-text-mute-color, @body-text-mute-font-family, @body-text-mute-font-size, @body-text-mute-font-style, @body-text-mute-font-weight, @body-text-mute-line-height, @body-text-mute-transform, @body-text-mute-shadow ); & when (@body-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-mute-link-text-color; text-decoration: @body-text-mute-link-text-decoration; &:hover { color: @body-text-mute-link-hover-text-color; text-decoration: @body-text-mute-link-hover-text-decoration; } &:active { color: @body-text-mute-link-active-text-color; text-decoration: @body-text-mute-link-active-text-decoration; } &:disabled { color: @body-text-mute-link-active-text-color; text-decoration: @body-text-mute-link-active-text-decoration; } } } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Header Styles -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6 { display: block; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Text Alignment & Transformation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .text-align-left { text-align: left; } .text-align-right { text-align: right; } .text-align-center { text-align: center; } .text-align-justify { text-align: justify; } .text-nowrap { white-space: nowrap; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { .text-styling ( @body-text-color, @body-text-font-family, @body-text-font-size, @body-text-font-style, @body-text-font-weight, @body-text-line-height, @body-text-transform, @body-text-shadow ); margin-top: @body-text-margin-top; margin-bottom: @body-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top; margin-bottom: @body-text-short-margin-bottom; } &.short-top { margin-top: @body-text-short-margin-top; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top; margin-bottom: @body-text-tall-margin-bottom; } &.tall-top { margin-top: @body-text-tall-margin-top; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom; } & when (@body-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-link-text-color; text-decoration: @body-text-link-text-decoration; &:hover { color: @body-text-link-hover-text-color; text-decoration: @body-text-link-hover-text-decoration; } &:active { color: @body-text-link-active-text-color; text-decoration: @body-text-link-active-text-decoration; } &:disabled { color: @body-text-link-active-text-color; text-decoration: @body-text-link-active-text-decoration; } } } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @body-text-emphasize-color, @body-text-emphasize-font-family, @body-text-emphasize-font-size, @body-text-emphasize-font-style, @body-text-emphasize-font-weight, @body-text-emphasize-line-height, @body-text-emphasize-transform, @body-text-emphasize-shadow ); & when (@body-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-emphasize-link-text-color; text-decoration: @body-text-emphasize-link-text-decoration; &:hover { color: @body-text-emphasize-link-hover-text-color; text-decoration: @body-text-emphasize-link-hover-text-decoration; } &:active { color: @body-text-emphasize-link-active-text-color; text-decoration: @body-text-emphasize-link-active-text-decoration; } &:disabled { color: @body-text-emphasize-link-active-text-color; text-decoration: @body-text-emphasize-link-active-text-decoration; } } } } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @body-text-mute-color, @body-text-mute-font-family, @body-text-mute-font-size, @body-text-mute-font-style, @body-text-mute-font-weight, @body-text-mute-line-height, @body-text-mute-transform, @body-text-mute-shadow ); & when (@body-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-mute-link-text-color; text-decoration: @body-text-mute-link-text-decoration; &:hover { color: @body-text-mute-link-hover-text-color; text-decoration: @body-text-mute-link-hover-text-decoration; } &:active { color: @body-text-mute-link-active-text-color; text-decoration: @body-text-mute-link-active-text-decoration; } &:disabled { color: @body-text-mute-link-active-text-color; text-decoration: @body-text-mute-link-active-text-decoration; } } } } } & when (@body-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @body-text-inverse-color; text-shadow: @body-text-inverse-shadow; & when (@body-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-link-text-color; text-decoration: @body-text-inverse-link-text-decoration; &:hover { color: @body-text-inverse-link-hover-text-color; text-decoration: @body-text-inverse-link-hover-text-decoration; } &:active { color: @body-text-inverse-link-active-text-color; text-decoration: @body-text-inverse-link-active-text-decoration; } &:disabled { color: @body-text-inverse-link-active-text-color; text-decoration: @body-text-inverse-link-active-text-decoration; } } } & when (@body-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @body-text-inverse-emphasize-color; text-shadow: @body-text-inverse-emphasize-shadow; & when (@body-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-emphasize-link-text-color; text-decoration: @body-text-inverse-emphasize-link-text-decoration; &:hover { color: @body-text-inverse-emphasize-link-hover-text-color; text-decoration: @body-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @body-text-inverse-emphasize-link-active-text-color; text-decoration: @body-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @body-text-inverse-emphasize-link-active-text-color; text-decoration: @body-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@body-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @body-text-inverse-mute-color; text-shadow: @body-text-inverse-mute-shadow; & when (@body-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-mute-link-text-color; text-decoration: @body-text-inverse-mute-link-text-decoration; &:hover { color: @body-text-inverse-mute-link-hover-text-color; text-decoration: @body-text-inverse-mute-link-hover-text-decoration; } &:active { color: @body-text-inverse-mute-link-active-text-color; text-decoration: @body-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @body-text-inverse-mute-link-active-text-color; text-decoration: @body-text-inverse-mute-link-active-text-decoration; } } } } } } } } & when (@small-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small { .text-styling ( @small-text-color, @small-text-font-family, @small-text-font-size, @small-text-font-style, @small-text-font-weight, @small-text-line-height, @small-text-transform, @small-text-shadow ); margin-top: @small-text-margin-top; margin-bottom: @small-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @small-text-short-margin-top; margin-bottom: @small-text-short-margin-bottom; } &.short-top { margin-top: @small-text-short-margin-top; } &.short-bottom { margin-bottom: @small-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @small-text-tall-margin-top; margin-bottom: @small-text-tall-margin-bottom; } &.tall-top { margin-top: @small-text-tall-margin-top; } &.tall-bottom { margin-bottom: @small-text-tall-margin-bottom; } & when (@small-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-link-text-color; text-decoration: @small-text-link-text-decoration; &:hover { color: @small-text-link-hover-text-color; text-decoration: @small-text-link-hover-text-decoration; } &:active { color: @small-text-link-active-text-color; text-decoration: @small-text-link-active-text-decoration; } &:disabled { color: @small-text-link-active-text-color; text-decoration: @small-text-link-active-text-decoration; } } } & when (@small-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @small-text-emphasize-color, @small-text-emphasize-font-family, @small-text-emphasize-font-size, @small-text-emphasize-font-style, @small-text-emphasize-font-weight, @small-text-emphasize-line-height, @small-text-emphasize-transform, @small-text-emphasize-shadow ); & when (@small-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-emphasize-link-text-color; text-decoration: @small-text-emphasize-link-text-decoration; &:hover { color: @small-text-emphasize-link-hover-text-color; text-decoration: @small-text-emphasize-link-hover-text-decoration; } &:active { color: @small-text-emphasize-link-active-text-color; text-decoration: @small-text-emphasize-link-active-text-decoration; } &:disabled { color: @small-text-emphasize-link-active-text-color; text-decoration: @small-text-emphasize-link-active-text-decoration; } } } } } & when (@small-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @small-text-mute-color, @small-text-mute-font-family, @small-text-mute-font-size, @small-text-mute-font-style, @small-text-mute-font-weight, @small-text-mute-line-height, @small-text-mute-transform, @small-text-mute-shadow ); & when (@small-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-mute-link-text-color; text-decoration: @small-text-mute-link-text-decoration; &:hover { color: @small-text-mute-link-hover-text-color; text-decoration: @small-text-mute-link-hover-text-decoration; } &:active { color: @small-text-mute-link-active-text-color; text-decoration: @small-text-mute-link-active-text-decoration; } &:disabled { color: @small-text-mute-link-active-text-color; text-decoration: @small-text-mute-link-active-text-decoration; } } } } } & when (@small-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @small-text-inverse-color; text-shadow: @small-text-inverse-shadow; & when (@small-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-inverse-link-text-color; text-decoration: @small-text-inverse-link-text-decoration; &:hover { color: @small-text-inverse-link-hover-text-color; text-decoration: @small-text-inverse-link-hover-text-decoration; } &:active { color: @small-text-inverse-link-active-text-color; text-decoration: @small-text-inverse-link-active-text-decoration; } &:disabled { color: @small-text-inverse-link-active-text-color; text-decoration: @small-text-inverse-link-active-text-decoration; } } } & when (@small-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @small-text-inverse-emphasize-color; text-shadow: @small-text-inverse-emphasize-shadow; & when (@small-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-inverse-emphasize-link-text-color; text-decoration: @small-text-inverse-emphasize-link-text-decoration; &:hover { color: @small-text-inverse-emphasize-link-hover-text-color; text-decoration: @small-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @small-text-inverse-emphasize-link-active-text-color; text-decoration: @small-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @small-text-inverse-emphasize-link-active-text-color; text-decoration: @small-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@small-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @small-text-inverse-mute-color; text-shadow: @small-text-inverse-mute-shadow; & when (@small-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @small-text-inverse-mute-link-text-color; text-decoration: @small-text-inverse-mute-link-text-decoration; &:hover { color: @small-text-inverse-mute-link-hover-text-color; text-decoration: @small-text-inverse-mute-link-hover-text-decoration; } &:active { color: @small-text-inverse-mute-link-active-text-color; text-decoration: @small-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @small-text-inverse-mute-link-active-text-color; text-decoration: @small-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@lead-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { .text-styling ( @lead-text-color, @lead-text-font-family, @lead-text-font-size, @lead-text-font-style, @lead-text-font-weight, @lead-text-line-height, @lead-text-transform, @lead-text-shadow ); margin-top: @lead-text-margin-top; margin-bottom: @lead-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @lead-text-short-margin-top; margin-bottom: @lead-text-short-margin-bottom; } &.short-top { margin-top: @lead-text-short-margin-top; } &.short-bottom { margin-bottom: @lead-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @lead-text-tall-margin-top; margin-bottom: @lead-text-tall-margin-bottom; } &.tall-top { margin-top: @lead-text-tall-margin-top; } &.tall-bottom { margin-bottom: @lead-text-tall-margin-bottom; } & when (@lead-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-link-text-color; text-decoration: @lead-text-link-text-decoration; &:hover { color: @lead-text-link-hover-text-color; text-decoration: @lead-text-link-hover-text-decoration; } &:active { color: @lead-text-link-active-text-color; text-decoration: @lead-text-link-active-text-decoration; } &:disabled { color: @lead-text-link-active-text-color; text-decoration: @lead-text-link-active-text-decoration; } } } & when (@lead-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @lead-text-emphasize-color, @lead-text-emphasize-font-family, @lead-text-emphasize-font-size, @lead-text-emphasize-font-style, @lead-text-emphasize-font-weight, @lead-text-emphasize-line-height, @lead-text-emphasize-transform, @lead-text-emphasize-shadow ); & when (@lead-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-emphasize-link-text-color; text-decoration: @lead-text-emphasize-link-text-decoration; &:hover { color: @lead-text-emphasize-link-hover-text-color; text-decoration: @lead-text-emphasize-link-hover-text-decoration; } &:active { color: @lead-text-emphasize-link-active-text-color; text-decoration: @lead-text-emphasize-link-active-text-decoration; } &:disabled { color: @lead-text-emphasize-link-active-text-color; text-decoration: @lead-text-emphasize-link-active-text-decoration; } } } } } & when (@lead-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @lead-text-mute-color, @lead-text-mute-font-family, @lead-text-mute-font-size, @lead-text-mute-font-style, @lead-text-mute-font-weight, @lead-text-mute-line-height, @lead-text-mute-transform, @lead-text-mute-shadow ); & when (@lead-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-mute-link-text-color; text-decoration: @lead-text-mute-link-text-decoration; &:hover { color: @lead-text-mute-link-hover-text-color; text-decoration: @lead-text-mute-link-hover-text-decoration; } &:active { color: @lead-text-mute-link-active-text-color; text-decoration: @lead-text-mute-link-active-text-decoration; } &:disabled { color: @lead-text-mute-link-active-text-color; text-decoration: @lead-text-mute-link-active-text-decoration; } } } } } & when (@lead-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @lead-text-inverse-color; text-shadow: @lead-text-inverse-shadow; & when (@lead-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-inverse-link-text-color; text-decoration: @lead-text-inverse-link-text-decoration; &:hover { color: @lead-text-inverse-link-hover-text-color; text-decoration: @lead-text-inverse-link-hover-text-decoration; } &:active { color: @lead-text-inverse-link-active-text-color; text-decoration: @lead-text-inverse-link-active-text-decoration; } &:disabled { color: @lead-text-inverse-link-active-text-color; text-decoration: @lead-text-inverse-link-active-text-decoration; } } } & when (@lead-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @lead-text-inverse-emphasize-color; text-shadow: @lead-text-inverse-emphasize-shadow; & when (@lead-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-inverse-emphasize-link-text-color; text-decoration: @lead-text-inverse-emphasize-link-text-decoration; &:hover { color: @lead-text-inverse-emphasize-link-hover-text-color; text-decoration: @lead-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @lead-text-inverse-emphasize-link-active-text-color; text-decoration: @lead-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @lead-text-inverse-emphasize-link-active-text-color; text-decoration: @lead-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@lead-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @lead-text-inverse-mute-color; text-shadow: @lead-text-inverse-mute-shadow; & when (@lead-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @lead-text-inverse-mute-link-text-color; text-decoration: @lead-text-inverse-mute-link-text-decoration; &:hover { color: @lead-text-inverse-mute-link-hover-text-color; text-decoration: @lead-text-inverse-mute-link-hover-text-decoration; } &:active { color: @lead-text-inverse-mute-link-active-text-color; text-decoration: @lead-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @lead-text-inverse-mute-link-active-text-color; text-decoration: @lead-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h1-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { .text-styling ( @heading-h1-text-color, @heading-h1-text-font-family, @heading-h1-text-font-size, @heading-h1-text-font-style, @heading-h1-text-font-weight, @heading-h1-text-line-height, @heading-h1-text-transform, @heading-h1-text-shadow ); margin-top: @heading-h1-text-margin-top; margin-bottom: @heading-h1-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h1-text-short-margin-top; margin-bottom: @heading-h1-text-short-margin-bottom; } &.short-top { margin-top: @heading-h1-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h1-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h1-text-tall-margin-top; margin-bottom: @heading-h1-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h1-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h1-text-tall-margin-bottom; } & when (@heading-h1-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-link-text-color; text-decoration: @heading-h1-text-link-text-decoration; &:hover { color: @heading-h1-text-link-hover-text-color; text-decoration: @heading-h1-text-link-hover-text-decoration; } &:active { color: @heading-h1-text-link-active-text-color; text-decoration: @heading-h1-text-link-active-text-decoration; } &:disabled { color: @heading-h1-text-link-active-text-color; text-decoration: @heading-h1-text-link-active-text-decoration; } } } & when (@heading-h1-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h1-text-emphasize-color, @heading-h1-text-emphasize-font-family, @heading-h1-text-emphasize-font-size, @heading-h1-text-emphasize-font-style, @heading-h1-text-emphasize-font-weight, @heading-h1-text-emphasize-line-height, @heading-h1-text-emphasize-transform, @heading-h1-text-emphasize-shadow ); & when (@heading-h1-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-emphasize-link-text-color; text-decoration: @heading-h1-text-emphasize-link-text-decoration; &:hover { color: @heading-h1-text-emphasize-link-hover-text-color; text-decoration: @heading-h1-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h1-text-emphasize-link-active-text-color; text-decoration: @heading-h1-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h1-text-emphasize-link-active-text-color; text-decoration: @heading-h1-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h1-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h1-text-mute-color, @heading-h1-text-mute-font-family, @heading-h1-text-mute-font-size, @heading-h1-text-mute-font-style, @heading-h1-text-mute-font-weight, @heading-h1-text-mute-line-height, @heading-h1-text-mute-transform, @heading-h1-text-mute-shadow ); & when (@heading-h1-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-mute-link-text-color; text-decoration: @heading-h1-text-mute-link-text-decoration; &:hover { color: @heading-h1-text-mute-link-hover-text-color; text-decoration: @heading-h1-text-mute-link-hover-text-decoration; } &:active { color: @heading-h1-text-mute-link-active-text-color; text-decoration: @heading-h1-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h1-text-mute-link-active-text-color; text-decoration: @heading-h1-text-mute-link-active-text-decoration; } } } } } & when (@heading-h1-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h1-text-inverse-color; text-shadow: @heading-h1-text-inverse-shadow; & when (@heading-h1-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-inverse-link-text-color; text-decoration: @heading-h1-text-inverse-link-text-decoration; &:hover { color: @heading-h1-text-inverse-link-hover-text-color; text-decoration: @heading-h1-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h1-text-inverse-link-active-text-color; text-decoration: @heading-h1-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h1-text-inverse-link-active-text-color; text-decoration: @heading-h1-text-inverse-link-active-text-decoration; } } } & when (@heading-h1-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h1-text-inverse-emphasize-color; text-shadow: @heading-h1-text-inverse-emphasize-shadow; & when (@heading-h1-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-inverse-emphasize-link-text-color; text-decoration: @heading-h1-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h1-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h1-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h1-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h1-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h1-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h1-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h1-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h1-text-inverse-mute-color; text-shadow: @heading-h1-text-inverse-mute-shadow; & when (@heading-h1-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h1-text-inverse-mute-link-text-color; text-decoration: @heading-h1-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h1-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h1-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h1-text-inverse-mute-link-active-text-color; text-decoration: @heading-h1-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h1-text-inverse-mute-link-active-text-color; text-decoration: @heading-h1-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h2-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { .text-styling ( @heading-h2-text-color, @heading-h2-text-font-family, @heading-h2-text-font-size, @heading-h2-text-font-style, @heading-h2-text-font-weight, @heading-h2-text-line-height, @heading-h2-text-transform, @heading-h2-text-shadow ); margin-top: @heading-h2-text-margin-top; margin-bottom: @heading-h2-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h2-text-short-margin-top; margin-bottom: @heading-h2-text-short-margin-bottom; } &.short-top { margin-top: @heading-h2-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h2-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h2-text-tall-margin-top; margin-bottom: @heading-h2-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h2-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h2-text-tall-margin-bottom; } & when (@heading-h2-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-link-text-color; text-decoration: @heading-h2-text-link-text-decoration; &:hover { color: @heading-h2-text-link-hover-text-color; text-decoration: @heading-h2-text-link-hover-text-decoration; } &:active { color: @heading-h2-text-link-active-text-color; text-decoration: @heading-h2-text-link-active-text-decoration; } &:disabled { color: @heading-h2-text-link-active-text-color; text-decoration: @heading-h2-text-link-active-text-decoration; } } } & when (@heading-h2-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h2-text-emphasize-color, @heading-h2-text-emphasize-font-family, @heading-h2-text-emphasize-font-size, @heading-h2-text-emphasize-font-style, @heading-h2-text-emphasize-font-weight, @heading-h2-text-emphasize-line-height, @heading-h2-text-emphasize-transform, @heading-h2-text-emphasize-shadow ); & when (@heading-h2-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-emphasize-link-text-color; text-decoration: @heading-h2-text-emphasize-link-text-decoration; &:hover { color: @heading-h2-text-emphasize-link-hover-text-color; text-decoration: @heading-h2-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h2-text-emphasize-link-active-text-color; text-decoration: @heading-h2-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h2-text-emphasize-link-active-text-color; text-decoration: @heading-h2-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h2-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h2-text-mute-color, @heading-h2-text-mute-font-family, @heading-h2-text-mute-font-size, @heading-h2-text-mute-font-style, @heading-h2-text-mute-font-weight, @heading-h2-text-mute-line-height, @heading-h2-text-mute-transform, @heading-h2-text-mute-shadow ); & when (@heading-h2-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-mute-link-text-color; text-decoration: @heading-h2-text-mute-link-text-decoration; &:hover { color: @heading-h2-text-mute-link-hover-text-color; text-decoration: @heading-h2-text-mute-link-hover-text-decoration; } &:active { color: @heading-h2-text-mute-link-active-text-color; text-decoration: @heading-h2-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h2-text-mute-link-active-text-color; text-decoration: @heading-h2-text-mute-link-active-text-decoration; } } } } } & when (@heading-h2-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h2-text-inverse-color; text-shadow: @heading-h2-text-inverse-shadow; & when (@heading-h2-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-inverse-link-text-color; text-decoration: @heading-h2-text-inverse-link-text-decoration; &:hover { color: @heading-h2-text-inverse-link-hover-text-color; text-decoration: @heading-h2-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h2-text-inverse-link-active-text-color; text-decoration: @heading-h2-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h2-text-inverse-link-active-text-color; text-decoration: @heading-h2-text-inverse-link-active-text-decoration; } } } & when (@heading-h2-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h2-text-inverse-emphasize-color; text-shadow: @heading-h2-text-inverse-emphasize-shadow; & when (@heading-h2-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-inverse-emphasize-link-text-color; text-decoration: @heading-h2-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h2-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h2-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h2-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h2-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h2-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h2-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h2-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h2-text-inverse-mute-color; text-shadow: @heading-h2-text-inverse-mute-shadow; & when (@heading-h2-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h2-text-inverse-mute-link-text-color; text-decoration: @heading-h2-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h2-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h2-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h2-text-inverse-mute-link-active-text-color; text-decoration: @heading-h2-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h2-text-inverse-mute-link-active-text-color; text-decoration: @heading-h2-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h3-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { .text-styling ( @heading-h3-text-color, @heading-h3-text-font-family, @heading-h3-text-font-size, @heading-h3-text-font-style, @heading-h3-text-font-weight, @heading-h3-text-line-height, @heading-h3-text-transform, @heading-h3-text-shadow ); margin-top: @heading-h3-text-margin-top; margin-bottom: @heading-h3-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h3-text-short-margin-top; margin-bottom: @heading-h3-text-short-margin-bottom; } &.short-top { margin-top: @heading-h3-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h3-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h3-text-tall-margin-top; margin-bottom: @heading-h3-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h3-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h3-text-tall-margin-bottom; } & when (@heading-h3-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-link-text-color; text-decoration: @heading-h3-text-link-text-decoration; &:hover { color: @heading-h3-text-link-hover-text-color; text-decoration: @heading-h3-text-link-hover-text-decoration; } &:active { color: @heading-h3-text-link-active-text-color; text-decoration: @heading-h3-text-link-active-text-decoration; } &:disabled { color: @heading-h3-text-link-active-text-color; text-decoration: @heading-h3-text-link-active-text-decoration; } } } & when (@heading-h3-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h3-text-emphasize-color, @heading-h3-text-emphasize-font-family, @heading-h3-text-emphasize-font-size, @heading-h3-text-emphasize-font-style, @heading-h3-text-emphasize-font-weight, @heading-h3-text-emphasize-line-height, @heading-h3-text-emphasize-transform, @heading-h3-text-emphasize-shadow ); & when (@heading-h3-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-emphasize-link-text-color; text-decoration: @heading-h3-text-emphasize-link-text-decoration; &:hover { color: @heading-h3-text-emphasize-link-hover-text-color; text-decoration: @heading-h3-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h3-text-emphasize-link-active-text-color; text-decoration: @heading-h3-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h3-text-emphasize-link-active-text-color; text-decoration: @heading-h3-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h3-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h3-text-mute-color, @heading-h3-text-mute-font-family, @heading-h3-text-mute-font-size, @heading-h3-text-mute-font-style, @heading-h3-text-mute-font-weight, @heading-h3-text-mute-line-height, @heading-h3-text-mute-transform, @heading-h3-text-mute-shadow ); & when (@heading-h3-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-mute-link-text-color; text-decoration: @heading-h3-text-mute-link-text-decoration; &:hover { color: @heading-h3-text-mute-link-hover-text-color; text-decoration: @heading-h3-text-mute-link-hover-text-decoration; } &:active { color: @heading-h3-text-mute-link-active-text-color; text-decoration: @heading-h3-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h3-text-mute-link-active-text-color; text-decoration: @heading-h3-text-mute-link-active-text-decoration; } } } } } & when (@heading-h3-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h3-text-inverse-color; text-shadow: @heading-h3-text-inverse-shadow; & when (@heading-h3-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-inverse-link-text-color; text-decoration: @heading-h3-text-inverse-link-text-decoration; &:hover { color: @heading-h3-text-inverse-link-hover-text-color; text-decoration: @heading-h3-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h3-text-inverse-link-active-text-color; text-decoration: @heading-h3-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h3-text-inverse-link-active-text-color; text-decoration: @heading-h3-text-inverse-link-active-text-decoration; } } } & when (@heading-h3-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h3-text-inverse-emphasize-color; text-shadow: @heading-h3-text-inverse-emphasize-shadow; & when (@heading-h3-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-inverse-emphasize-link-text-color; text-decoration: @heading-h3-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h3-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h3-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h3-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h3-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h3-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h3-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h3-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h3-text-inverse-mute-color; text-shadow: @heading-h3-text-inverse-mute-shadow; & when (@heading-h3-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h3-text-inverse-mute-link-text-color; text-decoration: @heading-h3-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h3-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h3-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h3-text-inverse-mute-link-active-text-color; text-decoration: @heading-h3-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h3-text-inverse-mute-link-active-text-color; text-decoration: @heading-h3-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h4-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { .text-styling ( @heading-h4-text-color, @heading-h4-text-font-family, @heading-h4-text-font-size, @heading-h4-text-font-style, @heading-h4-text-font-weight, @heading-h4-text-line-height, @heading-h4-text-transform, @heading-h4-text-shadow ); margin-top: @heading-h4-text-margin-top; margin-bottom: @heading-h4-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h4-text-short-margin-top; margin-bottom: @heading-h4-text-short-margin-bottom; } &.short-top { margin-top: @heading-h4-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h4-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h4-text-tall-margin-top; margin-bottom: @heading-h4-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h4-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h4-text-tall-margin-bottom; } & when (@heading-h4-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-link-text-color; text-decoration: @heading-h4-text-link-text-decoration; &:hover { color: @heading-h4-text-link-hover-text-color; text-decoration: @heading-h4-text-link-hover-text-decoration; } &:active { color: @heading-h4-text-link-active-text-color; text-decoration: @heading-h4-text-link-active-text-decoration; } &:disabled { color: @heading-h4-text-link-active-text-color; text-decoration: @heading-h4-text-link-active-text-decoration; } } } & when (@heading-h4-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h4-text-emphasize-color, @heading-h4-text-emphasize-font-family, @heading-h4-text-emphasize-font-size, @heading-h4-text-emphasize-font-style, @heading-h4-text-emphasize-font-weight, @heading-h4-text-emphasize-line-height, @heading-h4-text-emphasize-transform, @heading-h4-text-emphasize-shadow ); & when (@heading-h4-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-emphasize-link-text-color; text-decoration: @heading-h4-text-emphasize-link-text-decoration; &:hover { color: @heading-h4-text-emphasize-link-hover-text-color; text-decoration: @heading-h4-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h4-text-emphasize-link-active-text-color; text-decoration: @heading-h4-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h4-text-emphasize-link-active-text-color; text-decoration: @heading-h4-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h4-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h4-text-mute-color, @heading-h4-text-mute-font-family, @heading-h4-text-mute-font-size, @heading-h4-text-mute-font-style, @heading-h4-text-mute-font-weight, @heading-h4-text-mute-line-height, @heading-h4-text-mute-transform, @heading-h4-text-mute-shadow ); & when (@heading-h4-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-mute-link-text-color; text-decoration: @heading-h4-text-mute-link-text-decoration; &:hover { color: @heading-h4-text-mute-link-hover-text-color; text-decoration: @heading-h4-text-mute-link-hover-text-decoration; } &:active { color: @heading-h4-text-mute-link-active-text-color; text-decoration: @heading-h4-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h4-text-mute-link-active-text-color; text-decoration: @heading-h4-text-mute-link-active-text-decoration; } } } } } & when (@heading-h4-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h4-text-inverse-color; text-shadow: @heading-h4-text-inverse-shadow; & when (@heading-h4-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-inverse-link-text-color; text-decoration: @heading-h4-text-inverse-link-text-decoration; &:hover { color: @heading-h4-text-inverse-link-hover-text-color; text-decoration: @heading-h4-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h4-text-inverse-link-active-text-color; text-decoration: @heading-h4-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h4-text-inverse-link-active-text-color; text-decoration: @heading-h4-text-inverse-link-active-text-decoration; } } } & when (@heading-h4-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h4-text-inverse-emphasize-color; text-shadow: @heading-h4-text-inverse-emphasize-shadow; & when (@heading-h4-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-inverse-emphasize-link-text-color; text-decoration: @heading-h4-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h4-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h4-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h4-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h4-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h4-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h4-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h4-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h4-text-inverse-mute-color; text-shadow: @heading-h4-text-inverse-mute-shadow; & when (@heading-h4-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h4-text-inverse-mute-link-text-color; text-decoration: @heading-h4-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h4-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h4-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h4-text-inverse-mute-link-active-text-color; text-decoration: @heading-h4-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h4-text-inverse-mute-link-active-text-color; text-decoration: @heading-h4-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h5-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { .text-styling ( @heading-h5-text-color, @heading-h5-text-font-family, @heading-h5-text-font-size, @heading-h5-text-font-style, @heading-h5-text-font-weight, @heading-h5-text-line-height, @heading-h5-text-transform, @heading-h5-text-shadow ); margin-top: @heading-h5-text-margin-top; margin-bottom: @heading-h5-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h5-text-short-margin-top; margin-bottom: @heading-h5-text-short-margin-bottom; } &.short-top { margin-top: @heading-h5-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h5-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h5-text-tall-margin-top; margin-bottom: @heading-h5-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h5-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h5-text-tall-margin-bottom; } & when (@heading-h5-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-link-text-color; text-decoration: @heading-h5-text-link-text-decoration; &:hover { color: @heading-h5-text-link-hover-text-color; text-decoration: @heading-h5-text-link-hover-text-decoration; } &:active { color: @heading-h5-text-link-active-text-color; text-decoration: @heading-h5-text-link-active-text-decoration; } &:disabled { color: @heading-h5-text-link-active-text-color; text-decoration: @heading-h5-text-link-active-text-decoration; } } } & when (@heading-h5-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h5-text-emphasize-color, @heading-h5-text-emphasize-font-family, @heading-h5-text-emphasize-font-size, @heading-h5-text-emphasize-font-style, @heading-h5-text-emphasize-font-weight, @heading-h5-text-emphasize-line-height, @heading-h5-text-emphasize-transform, @heading-h5-text-emphasize-shadow ); & when (@heading-h5-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-emphasize-link-text-color; text-decoration: @heading-h5-text-emphasize-link-text-decoration; &:hover { color: @heading-h5-text-emphasize-link-hover-text-color; text-decoration: @heading-h5-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h5-text-emphasize-link-active-text-color; text-decoration: @heading-h5-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h5-text-emphasize-link-active-text-color; text-decoration: @heading-h5-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h5-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h5-text-mute-color, @heading-h5-text-mute-font-family, @heading-h5-text-mute-font-size, @heading-h5-text-mute-font-style, @heading-h5-text-mute-font-weight, @heading-h5-text-mute-line-height, @heading-h5-text-mute-transform, @heading-h5-text-mute-shadow ); & when (@heading-h5-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-mute-link-text-color; text-decoration: @heading-h5-text-mute-link-text-decoration; &:hover { color: @heading-h5-text-mute-link-hover-text-color; text-decoration: @heading-h5-text-mute-link-hover-text-decoration; } &:active { color: @heading-h5-text-mute-link-active-text-color; text-decoration: @heading-h5-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h5-text-mute-link-active-text-color; text-decoration: @heading-h5-text-mute-link-active-text-decoration; } } } } } & when (@heading-h5-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h5-text-inverse-color; text-shadow: @heading-h5-text-inverse-shadow; & when (@heading-h5-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-inverse-link-text-color; text-decoration: @heading-h5-text-inverse-link-text-decoration; &:hover { color: @heading-h5-text-inverse-link-hover-text-color; text-decoration: @heading-h5-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h5-text-inverse-link-active-text-color; text-decoration: @heading-h5-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h5-text-inverse-link-active-text-color; text-decoration: @heading-h5-text-inverse-link-active-text-decoration; } } } & when (@heading-h5-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h5-text-inverse-emphasize-color; text-shadow: @heading-h5-text-inverse-emphasize-shadow; & when (@heading-h5-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-inverse-emphasize-link-text-color; text-decoration: @heading-h5-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h5-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h5-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h5-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h5-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h5-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h5-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h5-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h5-text-inverse-mute-color; text-shadow: @heading-h5-text-inverse-mute-shadow; & when (@heading-h5-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h5-text-inverse-mute-link-text-color; text-decoration: @heading-h5-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h5-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h5-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h5-text-inverse-mute-link-active-text-color; text-decoration: @heading-h5-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h5-text-inverse-mute-link-active-text-color; text-decoration: @heading-h5-text-inverse-mute-link-active-text-decoration; } } } } } } } } } & when (@heading-h6-text-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { .text-styling ( @heading-h6-text-color, @heading-h6-text-font-family, @heading-h6-text-font-size, @heading-h6-text-font-style, @heading-h6-text-font-weight, @heading-h6-text-line-height, @heading-h6-text-transform, @heading-h6-text-shadow ); margin-top: @heading-h6-text-margin-top; margin-bottom: @heading-h6-text-margin-bottom; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h6-text-short-margin-top; margin-bottom: @heading-h6-text-short-margin-bottom; } &.short-top { margin-top: @heading-h6-text-short-margin-top; } &.short-bottom { margin-bottom: @heading-h6-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h6-text-tall-margin-top; margin-bottom: @heading-h6-text-tall-margin-bottom; } &.tall-top { margin-top: @heading-h6-text-tall-margin-top; } &.tall-bottom { margin-bottom: @heading-h6-text-tall-margin-bottom; } & when (@heading-h6-text-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-link-text-color; text-decoration: @heading-h6-text-link-text-decoration; &:hover { color: @heading-h6-text-link-hover-text-color; text-decoration: @heading-h6-text-link-hover-text-decoration; } &:active { color: @heading-h6-text-link-active-text-color; text-decoration: @heading-h6-text-link-active-text-decoration; } &:disabled { color: @heading-h6-text-link-active-text-color; text-decoration: @heading-h6-text-link-active-text-decoration; } } } & when (@heading-h6-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { .text-styling ( @heading-h6-text-emphasize-color, @heading-h6-text-emphasize-font-family, @heading-h6-text-emphasize-font-size, @heading-h6-text-emphasize-font-style, @heading-h6-text-emphasize-font-weight, @heading-h6-text-emphasize-line-height, @heading-h6-text-emphasize-transform, @heading-h6-text-emphasize-shadow ); & when (@heading-h6-text-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-emphasize-link-text-color; text-decoration: @heading-h6-text-emphasize-link-text-decoration; &:hover { color: @heading-h6-text-emphasize-link-hover-text-color; text-decoration: @heading-h6-text-emphasize-link-hover-text-decoration; } &:active { color: @heading-h6-text-emphasize-link-active-text-color; text-decoration: @heading-h6-text-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h6-text-emphasize-link-active-text-color; text-decoration: @heading-h6-text-emphasize-link-active-text-decoration; } } } } } & when (@heading-h6-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { .text-styling ( @heading-h6-text-mute-color, @heading-h6-text-mute-font-family, @heading-h6-text-mute-font-size, @heading-h6-text-mute-font-style, @heading-h6-text-mute-font-weight, @heading-h6-text-mute-line-height, @heading-h6-text-mute-transform, @heading-h6-text-mute-shadow ); & when (@heading-h6-text-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-mute-link-text-color; text-decoration: @heading-h6-text-mute-link-text-decoration; &:hover { color: @heading-h6-text-mute-link-hover-text-color; text-decoration: @heading-h6-text-mute-link-hover-text-decoration; } &:active { color: @heading-h6-text-mute-link-active-text-color; text-decoration: @heading-h6-text-mute-link-active-text-decoration; } &:disabled { color: @heading-h6-text-mute-link-active-text-color; text-decoration: @heading-h6-text-mute-link-active-text-decoration; } } } } } & when (@heading-h6-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @heading-h6-text-inverse-color; text-shadow: @heading-h6-text-inverse-shadow; & when (@heading-h6-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-inverse-link-text-color; text-decoration: @heading-h6-text-inverse-link-text-decoration; &:hover { color: @heading-h6-text-inverse-link-hover-text-color; text-decoration: @heading-h6-text-inverse-link-hover-text-decoration; } &:active { color: @heading-h6-text-inverse-link-active-text-color; text-decoration: @heading-h6-text-inverse-link-active-text-decoration; } &:disabled { color: @heading-h6-text-inverse-link-active-text-color; text-decoration: @heading-h6-text-inverse-link-active-text-decoration; } } } & when (@heading-h6-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @heading-h6-text-inverse-emphasize-color; text-shadow: @heading-h6-text-inverse-emphasize-shadow; & when (@heading-h6-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-inverse-emphasize-link-text-color; text-decoration: @heading-h6-text-inverse-emphasize-link-text-decoration; &:hover { color: @heading-h6-text-inverse-emphasize-link-hover-text-color; text-decoration: @heading-h6-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @heading-h6-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h6-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @heading-h6-text-inverse-emphasize-link-active-text-color; text-decoration: @heading-h6-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@heading-h6-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @heading-h6-text-inverse-mute-color; text-shadow: @heading-h6-text-inverse-mute-shadow; & when (@heading-h6-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @heading-h6-text-inverse-mute-link-text-color; text-decoration: @heading-h6-text-inverse-mute-link-text-decoration; &:hover { color: @heading-h6-text-inverse-mute-link-hover-text-color; text-decoration: @heading-h6-text-inverse-mute-link-hover-text-decoration; } &:active { color: @heading-h6-text-inverse-mute-link-active-text-color; text-decoration: @heading-h6-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @heading-h6-text-inverse-mute-link-active-text-color; text-decoration: @heading-h6-text-inverse-mute-link-active-text-decoration; } } } } } } } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { padding: 0px; list-style: none; margin-top: @body-text-margin-top; margin-bottom: @body-text-margin-bottom; position: relative; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top; margin-bottom: @body-text-short-margin-bottom; } &.short-top { margin-top: @body-text-short-margin-top; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top; margin-bottom: @body-text-tall-margin-bottom; } &.tall-top { margin-top: @body-text-tall-margin-top; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom; } /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { margin-bottom: @body-text-margin-bottom * 0.5; padding-left: @body-text-margin-bottom * 1.75; position: relative; &:before { content: ''; position: absolute; top: ceil((@body-text-line-height - ceil(@body-text-font-size * 0.3)) / 2); left: 0px; display: block; width: ceil(@body-text-font-size * 0.3); height: ceil(@body-text-font-size * 0.3); background-color: @body-text-color; border-radius: ceil(@body-text-font-size * 0.3); } &:last-child { margin-bottom: 0px; } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { margin-top: @body-text-margin-bottom * 0.5; margin-bottom: @body-text-margin-bottom * 0.5; } } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { padding-left: @body-text-margin-bottom; } /* ----------------------------------------------------------------------------- Unstyled List ----------------------------------------------------------------------------- */ &.list-unstyled { > li { padding-left: 0px; &:before { display: none; } } } /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ &.list-inline { margin-top: -@body-text-margin-bottom * 0.5; margin-left: -@body-text-margin-bottom; .clearfix(); > li { padding-left: 0px; float: left; display: block; margin-top: @body-text-margin-bottom * 0.5; margin-left: @body-text-margin-bottom; margin-bottom: 0px; &:before { display: none; } } } & when (@body-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { color: @body-text-inverse-color; text-shadow: @body-text-inverse-shadow; /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { &:before { background-color: @body-text-inverse-color; } } & when (@body-text-inverse-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-link-text-color; text-decoration: @body-text-inverse-link-text-decoration; &:hover { color: @body-text-inverse-link-hover-text-color; text-decoration: @body-text-inverse-link-hover-text-decoration; } &:active { color: @body-text-inverse-link-active-text-color; text-decoration: @body-text-inverse-link-active-text-decoration; } &:disabled { color: @body-text-inverse-link-active-text-color; text-decoration: @body-text-inverse-link-active-text-decoration; } } } & when (@body-text-inverse-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize Inverse ----------------------------------------------------------------------------- */ strong, .emphasize { color: @body-text-inverse-emphasize-color; text-shadow: @body-text-inverse-emphasize-shadow; & when (@body-text-inverse-emphasize-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-emphasize-link-text-color; text-decoration: @body-text-inverse-emphasize-link-text-decoration; &:hover { color: @body-text-inverse-emphasize-link-hover-text-color; text-decoration: @body-text-inverse-emphasize-link-hover-text-decoration; } &:active { color: @body-text-inverse-emphasize-link-active-text-color; text-decoration: @body-text-inverse-emphasize-link-active-text-decoration; } &:disabled { color: @body-text-inverse-emphasize-link-active-text-color; text-decoration: @body-text-inverse-emphasize-link-active-text-decoration; } } } } } & when (@body-text-inverse-mute-enabled) { /* ----------------------------------------------------------------------------- Mute Inverse ----------------------------------------------------------------------------- */ .mute { color: @body-text-inverse-mute-color; text-shadow: @body-text-inverse-mute-shadow; & when (@body-text-inverse-mute-link-enabled) { /* ----------------------------------------------------------------------------- Links ----------------------------------------------------------------------------- */ a { color: @body-text-inverse-mute-link-text-color; text-decoration: @body-text-inverse-mute-link-text-decoration; &:hover { color: @body-text-inverse-mute-link-hover-text-color; text-decoration: @body-text-inverse-mute-link-hover-text-decoration; } &:active { color: @body-text-inverse-mute-link-active-text-color; text-decoration: @body-text-inverse-mute-link-active-text-decoration; } &:disabled { color: @body-text-inverse-mute-link-active-text-color; text-decoration: @body-text-inverse-mute-link-active-text-decoration; } } } } } } } } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { counter-reset:li; > li { padding-left: @body-text-margin-bottom * 1.75; &:before { content: counter(li) + "."; counter-increment:li; text-align: left; height: @body-text-line-height; background: none; top: 0px; border-radius: none; } > ol { &.a { li { &:before { content: counter(li, lower-alpha) + "."; } } } &.A { li { &:before { content: counter(li, upper-alpha) + "."; } } } &.i { li { &:before { content: counter(li, lower-roman) + "."; } } } &.I { li { &:before { content: counter(li, upper-roman) + "."; } } } } } &.a { li { &:before { content: counter(li, lower-alpha) + "."; } } } &.A { li { &:before { content: counter(li, upper-alpha) + "."; } } } &.i { li { &:before { content: counter(li, lower-roman) + "."; } } } &.I { li { &:before { content: counter(li, upper-roman) + "."; } } } & when (@body-text-inverse-enabled) { /* ----------------------------------------------------------------------------- Inverse ----------------------------------------------------------------------------- */ &.inverse { /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { &:before { color: @body-text-inverse-color; background: none; width: auto; } } } } } } & when (@typography-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { & when (@body-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: @body-text-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-line-height * @body-text-line-height-scale-screen-mini; & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-mini; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-mini; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: @body-text-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-line-height * @body-text-line-height-scale-screen-mini; margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-mini; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-mini; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-mini; } } } } & when (@small-text-enabled) and (@small-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small { font-size: @small-text-font-size * @small-text-font-size-scale-screen-mini; line-height: @small-text-line-height * @small-text-line-height-scale-screen-mini; margin-top: @small-text-margin-top * @small-text-margin-top-scale-screen-mini; margin-bottom: @small-text-margin-bottom * @small-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-mini; margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-mini; margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-mini; } & when (@small-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @small-text-emphasize-font-size * @small-text-font-size-scale-screen-mini; line-height: @small-text-emphasize-line-height * @small-text-line-height-scale-screen-mini; } } & when (@small-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @small-text-mute-font-size * @small-text-font-size-scale-screen-mini; line-height: @small-text-mute-line-height * @small-text-line-height-scale-screen-mini; } } } } & when (@lead-text-enabled) and (@lead-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: @lead-text-font-size * @lead-text-font-size-scale-screen-mini; line-height: @lead-text-line-height * @lead-text-line-height-scale-screen-mini; margin-top: @lead-text-margin-top * @lead-text-margin-top-scale-screen-mini; margin-bottom: @lead-text-margin-bottom * @lead-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-mini; margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-mini; margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-mini; } & when (@lead-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @lead-text-emphasize-font-size * @lead-text-font-size-scale-screen-mini; line-height: @lead-text-emphasize-line-height * @lead-text-line-height-scale-screen-mini; } } & when (@lead-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @lead-text-mute-font-size * @lead-text-font-size-scale-screen-mini; line-height: @lead-text-mute-line-height * @lead-text-line-height-scale-screen-mini; } } } } & when (@heading-h1-text-enabled) and (@heading-h1-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: @heading-h1-text-font-size * @heading-h1-text-font-size-scale-screen-mini; line-height: @heading-h1-text-line-height * @heading-h1-text-line-height-scale-screen-mini; margin-top: @heading-h1-text-margin-top * @heading-h1-text-margin-top-scale-screen-mini; margin-bottom: @heading-h1-text-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-mini; margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-mini; margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-mini; } & when (@heading-h1-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h1-text-emphasize-font-size * @heading-h1-text-font-size-scale-screen-mini; line-height: @heading-h1-text-emphasize-line-height * @heading-h1-text-line-height-scale-screen-mini; } } & when (@heading-h1-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h1-text-mute-font-size * @heading-h1-text-font-size-scale-screen-mini; line-height: @heading-h1-text-mute-line-height * @heading-h1-text-line-height-scale-screen-mini; } } } } & when (@heading-h2-text-enabled) and (@heading-h2-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: @heading-h2-text-font-size * @heading-h2-text-font-size-scale-screen-mini; line-height: @heading-h2-text-line-height * @heading-h2-text-line-height-scale-screen-mini; margin-top: @heading-h2-text-margin-top * @heading-h2-text-margin-top-scale-screen-mini; margin-bottom: @heading-h2-text-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-mini; margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-mini; margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-mini; } & when (@heading-h2-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h2-text-emphasize-font-size * @heading-h2-text-font-size-scale-screen-mini; line-height: @heading-h2-text-emphasize-line-height * @heading-h2-text-line-height-scale-screen-mini; } } & when (@heading-h2-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h2-text-mute-font-size * @heading-h2-text-font-size-scale-screen-mini; line-height: @heading-h2-text-mute-line-height * @heading-h2-text-line-height-scale-screen-mini; } } } } & when (@heading-h3-text-enabled) and (@heading-h3-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: @heading-h3-text-font-size * @heading-h3-text-font-size-scale-screen-mini; line-height: @heading-h3-text-line-height * @heading-h3-text-line-height-scale-screen-mini; margin-top: @heading-h3-text-margin-top * @heading-h3-text-margin-top-scale-screen-mini; margin-bottom: @heading-h3-text-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-mini; margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-mini; margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-mini; } & when (@heading-h3-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h3-text-emphasize-font-size * @heading-h3-text-font-size-scale-screen-mini; line-height: @heading-h3-text-emphasize-line-height * @heading-h3-text-line-height-scale-screen-mini; } } & when (@heading-h3-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h3-text-mute-font-size * @heading-h3-text-font-size-scale-screen-mini; line-height: @heading-h3-text-mute-line-height * @heading-h3-text-line-height-scale-screen-mini; } } } } & when (@heading-h4-text-enabled) and (@heading-h4-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: @heading-h4-text-font-size * @heading-h4-text-font-size-scale-screen-mini; line-height: @heading-h4-text-line-height * @heading-h4-text-line-height-scale-screen-mini; margin-top: @heading-h4-text-margin-top * @heading-h4-text-margin-top-scale-screen-mini; margin-bottom: @heading-h4-text-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-mini; margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-mini; margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-mini; } & when (@heading-h4-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h4-text-emphasize-font-size * @heading-h4-text-font-size-scale-screen-mini; line-height: @heading-h4-text-emphasize-line-height * @heading-h4-text-line-height-scale-screen-mini; } } & when (@heading-h4-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h4-text-mute-font-size * @heading-h4-text-font-size-scale-screen-mini; line-height: @heading-h4-text-mute-line-height * @heading-h4-text-line-height-scale-screen-mini; } } } } & when (@heading-h5-text-enabled) and (@heading-h5-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: @heading-h5-text-font-size * @heading-h5-text-font-size-scale-screen-mini; line-height: @heading-h5-text-line-height * @heading-h5-text-line-height-scale-screen-mini; margin-top: @heading-h5-text-margin-top * @heading-h5-text-margin-top-scale-screen-mini; margin-bottom: @heading-h5-text-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-mini; margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-mini; margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-mini; } & when (@heading-h5-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h5-text-emphasize-font-size * @heading-h5-text-font-size-scale-screen-mini; line-height: @heading-h5-text-emphasize-line-height * @heading-h5-text-line-height-scale-screen-mini; } } & when (@heading-h5-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h5-text-mute-font-size * @heading-h5-text-font-size-scale-screen-mini; line-height: @heading-h5-text-mute-line-height * @heading-h5-text-line-height-scale-screen-mini; } } } } & when (@heading-h6-text-enabled) and (@heading-h6-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: @heading-h6-text-font-size * @heading-h6-text-font-size-scale-screen-mini; line-height: @heading-h6-text-line-height * @heading-h6-text-line-height-scale-screen-mini; margin-top: @heading-h6-text-margin-top * @heading-h6-text-margin-top-scale-screen-mini; margin-bottom: @heading-h6-text-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-mini; margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-mini; margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-mini; } & when (@heading-h6-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h6-text-emphasize-font-size * @heading-h6-text-font-size-scale-screen-mini; line-height: @heading-h6-text-emphasize-line-height * @heading-h6-text-line-height-scale-screen-mini; } } & when (@heading-h6-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h6-text-mute-font-size * @heading-h6-text-font-size-scale-screen-mini; line-height: @heading-h6-text-mute-line-height * @heading-h6-text-line-height-scale-screen-mini; } } } } & when (@body-text-scale-screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-mini; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-mini; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-mini; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 0.5; padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 2.0; &:before { top: ceil((ceil(@body-text-line-height * @body-text-line-height-scale-screen-mini) - ceil(@body-text-font-size * @body-text-font-size-scale-screen-mini * 0.4)) / 2); width: ceil(@body-text-font-size * @body-text-font-size-scale-screen-mini * 0.3); height: ceil(@body-text-font-size * @body-text-font-size-scale-screen-mini * 0.3); border-radius: ceil(@body-text-font-size * @body-text-font-size-scale-screen-mini * 0.3); } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 0.5; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 0.5; } } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ &.list-inline { margin-top: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 0.5; margin-left: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini; > li { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 0.5; margin-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini; } } } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { > li { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-mini * 2.0; &:before { top: 0px; width: auto; height: @body-text-line-height * @body-text-line-height-scale-screen-mini; } } } } } } & when (@typography-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { & when (@body-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: @body-text-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-line-height * @body-text-line-height-scale-screen-small; & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-small; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-small; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: @body-text-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-line-height * @body-text-line-height-scale-screen-small; margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-small; } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-small; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-small; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-small; } } } } & when (@small-text-enabled) and (@small-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small { font-size: @small-text-font-size * @small-text-font-size-scale-screen-small; line-height: @small-text-line-height * @small-text-line-height-scale-screen-small; margin-top: @small-text-margin-top * @small-text-margin-top-scale-screen-small; margin-bottom: @small-text-margin-bottom * @small-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-small; margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-small; margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-small; } & when (@small-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @small-text-emphasize-font-size * @small-text-font-size-scale-screen-small; line-height: @small-text-emphasize-line-height * @small-text-line-height-scale-screen-small; } } & when (@small-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @small-text-mute-font-size * @small-text-font-size-scale-screen-small; line-height: @small-text-mute-line-height * @small-text-line-height-scale-screen-small; } } } } & when (@lead-text-enabled) and (@lead-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: @lead-text-font-size * @lead-text-font-size-scale-screen-small; line-height: @lead-text-line-height * @lead-text-line-height-scale-screen-small; margin-top: @lead-text-margin-top * @lead-text-margin-top-scale-screen-small; margin-bottom: @lead-text-margin-bottom * @lead-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-small; margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-small; margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-small; } & when (@lead-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @lead-text-emphasize-font-size * @lead-text-font-size-scale-screen-small; line-height: @lead-text-emphasize-line-height * @lead-text-line-height-scale-screen-small; } } & when (@lead-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @lead-text-mute-font-size * @lead-text-font-size-scale-screen-small; line-height: @lead-text-mute-line-height * @lead-text-line-height-scale-screen-small; } } } } & when (@heading-h1-text-enabled) and (@heading-h1-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: @heading-h1-text-font-size * @heading-h1-text-font-size-scale-screen-small; line-height: @heading-h1-text-line-height * @heading-h1-text-line-height-scale-screen-small; margin-top: @heading-h1-text-margin-top * @heading-h1-text-margin-top-scale-screen-small; margin-bottom: @heading-h1-text-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-small; margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-small; margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-small; } & when (@heading-h1-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h1-text-emphasize-font-size * @heading-h1-text-font-size-scale-screen-small; line-height: @heading-h1-text-emphasize-line-height * @heading-h1-text-line-height-scale-screen-small; } } & when (@heading-h1-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h1-text-mute-font-size * @heading-h1-text-font-size-scale-screen-small; line-height: @heading-h1-text-mute-line-height * @heading-h1-text-line-height-scale-screen-small; } } } } & when (@heading-h2-text-enabled) and (@heading-h2-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: @heading-h2-text-font-size * @heading-h2-text-font-size-scale-screen-small; line-height: @heading-h2-text-line-height * @heading-h2-text-line-height-scale-screen-small; margin-top: @heading-h2-text-margin-top * @heading-h2-text-margin-top-scale-screen-small; margin-bottom: @heading-h2-text-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-small; margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-small; margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-small; } & when (@heading-h2-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h2-text-emphasize-font-size * @heading-h2-text-font-size-scale-screen-small; line-height: @heading-h2-text-emphasize-line-height * @heading-h2-text-line-height-scale-screen-small; } } & when (@heading-h2-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h2-text-mute-font-size * @heading-h2-text-font-size-scale-screen-small; line-height: @heading-h2-text-mute-line-height * @heading-h2-text-line-height-scale-screen-small; } } } } & when (@heading-h3-text-enabled) and (@heading-h3-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: @heading-h3-text-font-size * @heading-h3-text-font-size-scale-screen-small; line-height: @heading-h3-text-line-height * @heading-h3-text-line-height-scale-screen-small; margin-top: @heading-h3-text-margin-top * @heading-h3-text-margin-top-scale-screen-small; margin-bottom: @heading-h3-text-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-small; margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-small; margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-small; } & when (@heading-h3-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h3-text-emphasize-font-size * @heading-h3-text-font-size-scale-screen-small; line-height: @heading-h3-text-emphasize-line-height * @heading-h3-text-line-height-scale-screen-small; } } & when (@heading-h3-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h3-text-mute-font-size * @heading-h3-text-font-size-scale-screen-small; line-height: @heading-h3-text-mute-line-height * @heading-h3-text-line-height-scale-screen-small; } } } } & when (@heading-h4-text-enabled) and (@heading-h4-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: @heading-h4-text-font-size * @heading-h4-text-font-size-scale-screen-small; line-height: @heading-h4-text-line-height * @heading-h4-text-line-height-scale-screen-small; margin-top: @heading-h4-text-margin-top * @heading-h4-text-margin-top-scale-screen-small; margin-bottom: @heading-h4-text-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-small; margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-small; margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-small; } & when (@heading-h4-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h4-text-emphasize-font-size * @heading-h4-text-font-size-scale-screen-small; line-height: @heading-h4-text-emphasize-line-height * @heading-h4-text-line-height-scale-screen-small; } } & when (@heading-h4-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h4-text-mute-font-size * @heading-h4-text-font-size-scale-screen-small; line-height: @heading-h4-text-mute-line-height * @heading-h4-text-line-height-scale-screen-small; } } } } & when (@heading-h5-text-enabled) and (@heading-h5-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: @heading-h5-text-font-size * @heading-h5-text-font-size-scale-screen-small; line-height: @heading-h5-text-line-height * @heading-h5-text-line-height-scale-screen-small; margin-top: @heading-h5-text-margin-top * @heading-h5-text-margin-top-scale-screen-small; margin-bottom: @heading-h5-text-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-small; margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-small; margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-small; } & when (@heading-h5-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h5-text-emphasize-font-size * @heading-h5-text-font-size-scale-screen-small; line-height: @heading-h5-text-emphasize-line-height * @heading-h5-text-line-height-scale-screen-small; } } & when (@heading-h5-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h5-text-mute-font-size * @heading-h5-text-font-size-scale-screen-small; line-height: @heading-h5-text-mute-line-height * @heading-h5-text-line-height-scale-screen-small; } } } } & when (@heading-h6-text-enabled) and (@heading-h6-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: @heading-h6-text-font-size * @heading-h6-text-font-size-scale-screen-small; line-height: @heading-h6-text-line-height * @heading-h6-text-line-height-scale-screen-small; margin-top: @heading-h6-text-margin-top * @heading-h6-text-margin-top-scale-screen-small; margin-bottom: @heading-h6-text-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-small; margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-small; margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-small; } & when (@heading-h6-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h6-text-emphasize-font-size * @heading-h6-text-font-size-scale-screen-small; line-height: @heading-h6-text-emphasize-line-height * @heading-h6-text-line-height-scale-screen-small; } } & when (@heading-h6-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h6-text-mute-font-size * @heading-h6-text-font-size-scale-screen-small; line-height: @heading-h6-text-mute-line-height * @heading-h6-text-line-height-scale-screen-small; } } } } & when (@body-text-scale-screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-small; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-small; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-small; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-small; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-small; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 0.5; padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 2.0; &:before { top: ceil((ceil(@body-text-line-height * @body-text-line-height-scale-screen-small) - ceil(@body-text-font-size * @body-text-font-size-scale-screen-small * 0.4)) / 2); width: ceil(@body-text-font-size * @body-text-font-size-scale-screen-small * 0.3); height: ceil(@body-text-font-size * @body-text-font-size-scale-screen-small * 0.3); border-radius: ceil(@body-text-font-size * @body-text-font-size-scale-screen-small * 0.3); } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 0.5; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 0.5; } } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small; } /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ &.list-inline { margin-top: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 0.5; margin-left: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small; > li { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 0.5; margin-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small; } } } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { > li { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-small * 2.0; &:before { top: 0px; width: auto; height: @body-text-line-height * @body-text-line-height-scale-screen-small; } } } } } } & when (@typography-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { & when (@body-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: @body-text-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-line-height * @body-text-line-height-scale-screen-medium; & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-medium; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-medium; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: @body-text-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-line-height * @body-text-line-height-scale-screen-medium; margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-medium; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-medium; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-medium; } } } } & when (@small-text-enabled) and (@small-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small { font-size: @small-text-font-size * @small-text-font-size-scale-screen-medium; line-height: @small-text-line-height * @small-text-line-height-scale-screen-medium; margin-top: @small-text-margin-top * @small-text-margin-top-scale-screen-medium; margin-bottom: @small-text-margin-bottom * @small-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-medium; margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-medium; margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-medium; } & when (@small-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @small-text-emphasize-font-size * @small-text-font-size-scale-screen-medium; line-height: @small-text-emphasize-line-height * @small-text-line-height-scale-screen-medium; } } & when (@small-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @small-text-mute-font-size * @small-text-font-size-scale-screen-medium; line-height: @small-text-mute-line-height * @small-text-line-height-scale-screen-medium; } } } } & when (@lead-text-enabled) and (@lead-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: @lead-text-font-size * @lead-text-font-size-scale-screen-medium; line-height: @lead-text-line-height * @lead-text-line-height-scale-screen-medium; margin-top: @lead-text-margin-top * @lead-text-margin-top-scale-screen-medium; margin-bottom: @lead-text-margin-bottom * @lead-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-medium; margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-medium; margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-medium; } & when (@lead-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @lead-text-emphasize-font-size * @lead-text-font-size-scale-screen-medium; line-height: @lead-text-emphasize-line-height * @lead-text-line-height-scale-screen-medium; } } & when (@lead-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @lead-text-mute-font-size * @lead-text-font-size-scale-screen-medium; line-height: @lead-text-mute-line-height * @lead-text-line-height-scale-screen-medium; } } } } & when (@heading-h1-text-enabled) and (@heading-h1-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: @heading-h1-text-font-size * @heading-h1-text-font-size-scale-screen-medium; line-height: @heading-h1-text-line-height * @heading-h1-text-line-height-scale-screen-medium; margin-top: @heading-h1-text-margin-top * @heading-h1-text-margin-top-scale-screen-medium; margin-bottom: @heading-h1-text-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-medium; margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-medium; margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-medium; } & when (@heading-h1-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h1-text-emphasize-font-size * @heading-h1-text-font-size-scale-screen-medium; line-height: @heading-h1-text-emphasize-line-height * @heading-h1-text-line-height-scale-screen-medium; } } & when (@heading-h1-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h1-text-mute-font-size * @heading-h1-text-font-size-scale-screen-medium; line-height: @heading-h1-text-mute-line-height * @heading-h1-text-line-height-scale-screen-medium; } } } } & when (@heading-h2-text-enabled) and (@heading-h2-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: @heading-h2-text-font-size * @heading-h2-text-font-size-scale-screen-medium; line-height: @heading-h2-text-line-height * @heading-h2-text-line-height-scale-screen-medium; margin-top: @heading-h2-text-margin-top * @heading-h2-text-margin-top-scale-screen-medium; margin-bottom: @heading-h2-text-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-medium; margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-medium; margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-medium; } & when (@heading-h2-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h2-text-emphasize-font-size * @heading-h2-text-font-size-scale-screen-medium; line-height: @heading-h2-text-emphasize-line-height * @heading-h2-text-line-height-scale-screen-medium; } } & when (@heading-h2-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h2-text-mute-font-size * @heading-h2-text-font-size-scale-screen-medium; line-height: @heading-h2-text-mute-line-height * @heading-h2-text-line-height-scale-screen-medium; } } } } & when (@heading-h3-text-enabled) and (@heading-h3-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: @heading-h3-text-font-size * @heading-h3-text-font-size-scale-screen-medium; line-height: @heading-h3-text-line-height * @heading-h3-text-line-height-scale-screen-medium; margin-top: @heading-h3-text-margin-top * @heading-h3-text-margin-top-scale-screen-medium; margin-bottom: @heading-h3-text-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-medium; margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-medium; margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-medium; } & when (@heading-h3-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h3-text-emphasize-font-size * @heading-h3-text-font-size-scale-screen-medium; line-height: @heading-h3-text-emphasize-line-height * @heading-h3-text-line-height-scale-screen-medium; } } & when (@heading-h3-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h3-text-mute-font-size * @heading-h3-text-font-size-scale-screen-medium; line-height: @heading-h3-text-mute-line-height * @heading-h3-text-line-height-scale-screen-medium; } } } } & when (@heading-h4-text-enabled) and (@heading-h4-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: @heading-h4-text-font-size * @heading-h4-text-font-size-scale-screen-medium; line-height: @heading-h4-text-line-height * @heading-h4-text-line-height-scale-screen-medium; margin-top: @heading-h4-text-margin-top * @heading-h4-text-margin-top-scale-screen-medium; margin-bottom: @heading-h4-text-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-medium; margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-medium; margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-medium; } & when (@heading-h4-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h4-text-emphasize-font-size * @heading-h4-text-font-size-scale-screen-medium; line-height: @heading-h4-text-emphasize-line-height * @heading-h4-text-line-height-scale-screen-medium; } } & when (@heading-h4-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h4-text-mute-font-size * @heading-h4-text-font-size-scale-screen-medium; line-height: @heading-h4-text-mute-line-height * @heading-h4-text-line-height-scale-screen-medium; } } } } & when (@heading-h5-text-enabled) and (@heading-h5-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: @heading-h5-text-font-size * @heading-h5-text-font-size-scale-screen-medium; line-height: @heading-h5-text-line-height * @heading-h5-text-line-height-scale-screen-medium; margin-top: @heading-h5-text-margin-top * @heading-h5-text-margin-top-scale-screen-medium; margin-bottom: @heading-h5-text-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-medium; margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-medium; margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-medium; } & when (@heading-h5-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h5-text-emphasize-font-size * @heading-h5-text-font-size-scale-screen-medium; line-height: @heading-h5-text-emphasize-line-height * @heading-h5-text-line-height-scale-screen-medium; } } & when (@heading-h5-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h5-text-mute-font-size * @heading-h5-text-font-size-scale-screen-medium; line-height: @heading-h5-text-mute-line-height * @heading-h5-text-line-height-scale-screen-medium; } } } } & when (@heading-h6-text-enabled) and (@heading-h6-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: @heading-h6-text-font-size * @heading-h6-text-font-size-scale-screen-medium; line-height: @heading-h6-text-line-height * @heading-h6-text-line-height-scale-screen-medium; margin-top: @heading-h6-text-margin-top * @heading-h6-text-margin-top-scale-screen-medium; margin-bottom: @heading-h6-text-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-medium; margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-medium; margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-medium; } & when (@heading-h6-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h6-text-emphasize-font-size * @heading-h6-text-font-size-scale-screen-medium; line-height: @heading-h6-text-emphasize-line-height * @heading-h6-text-line-height-scale-screen-medium; } } & when (@heading-h6-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h6-text-mute-font-size * @heading-h6-text-font-size-scale-screen-medium; line-height: @heading-h6-text-mute-line-height * @heading-h6-text-line-height-scale-screen-medium; } } } } & when (@body-text-scale-screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-medium; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-medium; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-medium; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 0.5; padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 2.0; &:before { top: ceil((ceil(@body-text-line-height * @body-text-line-height-scale-screen-medium) - ceil(@body-text-font-size * @body-text-font-size-scale-screen-medium * 0.4)) / 2); width: ceil(@body-text-font-size * @body-text-font-size-scale-screen-medium * 0.3); height: ceil(@body-text-font-size * @body-text-font-size-scale-screen-medium * 0.3); border-radius: ceil(@body-text-font-size * @body-text-font-size-scale-screen-medium * 0.3); } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 0.5; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 0.5; } } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ &.list-inline { margin-top: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 0.5; margin-left: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium; > li { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 0.5; margin-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium; } } } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { > li { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-medium * 2.0; &:before { top: 0px; width: auto; height: @body-text-line-height * @body-text-line-height-scale-screen-medium; } } } } } } & when (@typography-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { & when (@body-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body { font-size: @body-text-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-line-height * @body-text-line-height-scale-screen-large; & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-large; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-large; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Paragraph -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ p { font-size: @body-text-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-line-height * @body-text-line-height-scale-screen-large; margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-large; } & when (@body-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @body-text-emphasize-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-emphasize-line-height * @body-text-line-height-scale-screen-large; } } & when (@body-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @body-text-mute-font-size * @body-text-font-size-scale-screen-large; line-height: @body-text-mute-line-height * @body-text-line-height-scale-screen-large; } } } } & when (@small-text-enabled) and (@small-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Small Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .small { font-size: @small-text-font-size * @small-text-font-size-scale-screen-large; line-height: @small-text-line-height * @small-text-line-height-scale-screen-large; margin-top: @small-text-margin-top * @small-text-margin-top-scale-screen-large; margin-bottom: @small-text-margin-bottom * @small-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-large; margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @small-text-short-margin-top * @small-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @small-text-short-margin-bottom * @small-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-large; margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @small-text-tall-margin-top * @small-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @small-text-tall-margin-bottom * @small-text-margin-bottom-scale-screen-large; } & when (@small-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @small-text-emphasize-font-size * @small-text-font-size-scale-screen-large; line-height: @small-text-emphasize-line-height * @small-text-line-height-scale-screen-large; } } & when (@small-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @small-text-mute-font-size * @small-text-font-size-scale-screen-large; line-height: @small-text-mute-line-height * @small-text-line-height-scale-screen-large; } } } } & when (@lead-text-enabled) and (@lead-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lead Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .lead { font-size: @lead-text-font-size * @lead-text-font-size-scale-screen-large; line-height: @lead-text-line-height * @lead-text-line-height-scale-screen-large; margin-top: @lead-text-margin-top * @lead-text-margin-top-scale-screen-large; margin-bottom: @lead-text-margin-bottom * @lead-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-large; margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @lead-text-short-margin-top * @lead-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @lead-text-short-margin-bottom * @lead-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-large; margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @lead-text-tall-margin-top * @lead-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @lead-text-tall-margin-bottom * @lead-text-margin-bottom-scale-screen-large; } & when (@lead-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @lead-text-emphasize-font-size * @lead-text-font-size-scale-screen-large; line-height: @lead-text-emphasize-line-height * @lead-text-line-height-scale-screen-large; } } & when (@lead-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @lead-text-mute-font-size * @lead-text-font-size-scale-screen-large; line-height: @lead-text-mute-line-height * @lead-text-line-height-scale-screen-large; } } } } & when (@heading-h1-text-enabled) and (@heading-h1-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading H1 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h1, .h1 { font-size: @heading-h1-text-font-size * @heading-h1-text-font-size-scale-screen-large; line-height: @heading-h1-text-line-height * @heading-h1-text-line-height-scale-screen-large; margin-top: @heading-h1-text-margin-top * @heading-h1-text-margin-top-scale-screen-large; margin-bottom: @heading-h1-text-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-large; margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h1-text-short-margin-top * @heading-h1-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h1-text-short-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-large; margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h1-text-tall-margin-top * @heading-h1-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h1-text-tall-margin-bottom * @heading-h1-text-margin-bottom-scale-screen-large; } & when (@heading-h1-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h1-text-emphasize-font-size * @heading-h1-text-font-size-scale-screen-large; line-height: @heading-h1-text-emphasize-line-height * @heading-h1-text-line-height-scale-screen-large; } } & when (@heading-h1-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h1-text-mute-font-size * @heading-h1-text-font-size-scale-screen-large; line-height: @heading-h1-text-mute-line-height * @heading-h1-text-line-height-scale-screen-large; } } } } & when (@heading-h2-text-enabled) and (@heading-h2-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h2 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h2, .h2 { font-size: @heading-h2-text-font-size * @heading-h2-text-font-size-scale-screen-large; line-height: @heading-h2-text-line-height * @heading-h2-text-line-height-scale-screen-large; margin-top: @heading-h2-text-margin-top * @heading-h2-text-margin-top-scale-screen-large; margin-bottom: @heading-h2-text-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-large; margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h2-text-short-margin-top * @heading-h2-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h2-text-short-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-large; margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h2-text-tall-margin-top * @heading-h2-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h2-text-tall-margin-bottom * @heading-h2-text-margin-bottom-scale-screen-large; } & when (@heading-h2-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h2-text-emphasize-font-size * @heading-h2-text-font-size-scale-screen-large; line-height: @heading-h2-text-emphasize-line-height * @heading-h2-text-line-height-scale-screen-large; } } & when (@heading-h2-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h2-text-mute-font-size * @heading-h2-text-font-size-scale-screen-large; line-height: @heading-h2-text-mute-line-height * @heading-h2-text-line-height-scale-screen-large; } } } } & when (@heading-h3-text-enabled) and (@heading-h3-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h3 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h3, .h3 { font-size: @heading-h3-text-font-size * @heading-h3-text-font-size-scale-screen-large; line-height: @heading-h3-text-line-height * @heading-h3-text-line-height-scale-screen-large; margin-top: @heading-h3-text-margin-top * @heading-h3-text-margin-top-scale-screen-large; margin-bottom: @heading-h3-text-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-large; margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h3-text-short-margin-top * @heading-h3-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h3-text-short-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-large; margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h3-text-tall-margin-top * @heading-h3-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h3-text-tall-margin-bottom * @heading-h3-text-margin-bottom-scale-screen-large; } & when (@heading-h3-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h3-text-emphasize-font-size * @heading-h3-text-font-size-scale-screen-large; line-height: @heading-h3-text-emphasize-line-height * @heading-h3-text-line-height-scale-screen-large; } } & when (@heading-h3-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h3-text-mute-font-size * @heading-h3-text-font-size-scale-screen-large; line-height: @heading-h3-text-mute-line-height * @heading-h3-text-line-height-scale-screen-large; } } } } & when (@heading-h4-text-enabled) and (@heading-h4-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h4 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h4, .h4 { font-size: @heading-h4-text-font-size * @heading-h4-text-font-size-scale-screen-large; line-height: @heading-h4-text-line-height * @heading-h4-text-line-height-scale-screen-large; margin-top: @heading-h4-text-margin-top * @heading-h4-text-margin-top-scale-screen-large; margin-bottom: @heading-h4-text-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-large; margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h4-text-short-margin-top * @heading-h4-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h4-text-short-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-large; margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h4-text-tall-margin-top * @heading-h4-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h4-text-tall-margin-bottom * @heading-h4-text-margin-bottom-scale-screen-large; } & when (@heading-h4-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h4-text-emphasize-font-size * @heading-h4-text-font-size-scale-screen-large; line-height: @heading-h4-text-emphasize-line-height * @heading-h4-text-line-height-scale-screen-large; } } & when (@heading-h4-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h4-text-mute-font-size * @heading-h4-text-font-size-scale-screen-large; line-height: @heading-h4-text-mute-line-height * @heading-h4-text-line-height-scale-screen-large; } } } } & when (@heading-h5-text-enabled) and (@heading-h5-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h5 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h5, .h5 { font-size: @heading-h5-text-font-size * @heading-h5-text-font-size-scale-screen-large; line-height: @heading-h5-text-line-height * @heading-h5-text-line-height-scale-screen-large; margin-top: @heading-h5-text-margin-top * @heading-h5-text-margin-top-scale-screen-large; margin-bottom: @heading-h5-text-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-large; margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h5-text-short-margin-top * @heading-h5-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h5-text-short-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-large; margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h5-text-tall-margin-top * @heading-h5-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h5-text-tall-margin-bottom * @heading-h5-text-margin-bottom-scale-screen-large; } & when (@heading-h5-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h5-text-emphasize-font-size * @heading-h5-text-font-size-scale-screen-large; line-height: @heading-h5-text-emphasize-line-height * @heading-h5-text-line-height-scale-screen-large; } } & when (@heading-h5-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h5-text-mute-font-size * @heading-h5-text-font-size-scale-screen-large; line-height: @heading-h5-text-mute-line-height * @heading-h5-text-line-height-scale-screen-large; } } } } & when (@heading-h6-text-enabled) and (@heading-h6-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Heading h6 Text -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ h6, .h6 { font-size: @heading-h6-text-font-size * @heading-h6-text-font-size-scale-screen-large; line-height: @heading-h6-text-line-height * @heading-h6-text-line-height-scale-screen-large; margin-top: @heading-h6-text-margin-top * @heading-h6-text-margin-top-scale-screen-large; margin-bottom: @heading-h6-text-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-large; margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @heading-h6-text-short-margin-top * @heading-h6-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @heading-h6-text-short-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-large; margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @heading-h6-text-tall-margin-top * @heading-h6-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @heading-h6-text-tall-margin-bottom * @heading-h6-text-margin-bottom-scale-screen-large; } & when (@heading-h6-text-emphasize-enabled) { /* ----------------------------------------------------------------------------- Emphasize ----------------------------------------------------------------------------- */ strong, .emphasize { font-size: @heading-h6-text-emphasize-font-size * @heading-h6-text-font-size-scale-screen-large; line-height: @heading-h6-text-emphasize-line-height * @heading-h6-text-line-height-scale-screen-large; } } & when (@heading-h6-text-mute-enabled) { /* ----------------------------------------------------------------------------- Mute ----------------------------------------------------------------------------- */ .mute { font-size: @heading-h6-text-mute-font-size * @heading-h6-text-font-size-scale-screen-large; line-height: @heading-h6-text-mute-line-height * @heading-h6-text-line-height-scale-screen-large; } } } } & when (@body-text-scale-screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Lists -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ ul, ol { margin-top: @body-text-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large; /* ----------------------------------------------------------------------------- Short ----------------------------------------------------------------------------- */ &.short { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-large; } &.short-top { margin-top: @body-text-short-margin-top * @body-text-margin-top-scale-screen-large; } &.short-bottom { margin-bottom: @body-text-short-margin-bottom * @body-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Tall ----------------------------------------------------------------------------- */ &.tall { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-large; margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-large; } &.tall-top { margin-top: @body-text-tall-margin-top * @body-text-margin-top-scale-screen-large; } &.tall-bottom { margin-bottom: @body-text-tall-margin-bottom * @body-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- List Item ----------------------------------------------------------------------------- */ li { margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 0.5; padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 2.0; &:before { top: ceil((ceil(@body-text-line-height * @body-text-line-height-scale-screen-large) - ceil(@body-text-font-size * @body-text-font-size-scale-screen-large * 0.4)) / 2); width: ceil(@body-text-font-size * @body-text-font-size-scale-screen-large * 0.3); height: ceil(@body-text-font-size * @body-text-font-size-scale-screen-large * 0.3); border-radius: ceil(@body-text-font-size * @body-text-font-size-scale-screen-large * 0.3); } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 0.5; margin-bottom: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 0.5; } } /* ----------------------------------------------------------------------------- Nested List ----------------------------------------------------------------------------- */ > ul, > ol { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large; } /* ----------------------------------------------------------------------------- Inline List ----------------------------------------------------------------------------- */ &.list-inline { margin-top: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 0.5; margin-left: -@body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large; > li { margin-top: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 0.5; margin-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large; } } } /* ----------------------------------------------------------------------------- Ordered List ----------------------------------------------------------------------------- */ ol { > li { padding-left: @body-text-margin-bottom * @body-text-margin-bottom-scale-screen-large * 2.0; &:before { top: 0px; width: auto; height: @body-text-line-height * @body-text-line-height-scale-screen-large; } } } } } } & when (@typography-enabled) and (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@typography-enabled) and (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }