// // Headlines // —————————————-
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: $heading-font-weight; margin: 0; &.brand { font-weight: 800; text-transform: uppercase; } &.underline, &.cluster { padding-left: 12px; padding-right: 12px; border-bottom: 1px solid $heading-border-color; } &.underline { text-align: center; } &.cluster { color: $font-color-light; } &.thin { font-weight: 200; } &.marketing-l { @include headline-variant($font-size-headline-marketing-elmt-l); font-weight: 200; } &.marketing-xl { @include headline-variant($font-size-headline-marketing-elmt-xl); font-weight: 200; } small, .small { color: $font-color-light; font-size: 84%; // -16% }
}
h1, .h1 { @include headline-variant($font-size-headline-h1); } h2, .h2 { @include headline-variant($font-size-headline-h2); } h3, .h3 { @include headline-variant($font-size-headline-h3); } h4, .h4 { @include headline-variant($font-size-headline-h4); } h5, .h5 { @include headline-variant($font-size-headline-h5); } h6, .h6 { @include headline-variant($font-size-headline-h6); }
// // Copytext // —————————————- p {
margin: 0; padding-top: capline-bu(1, $font-size-regular, $line-height-regular); // depends on body padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); // depends on body &.text-xsmall { padding-top: capline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small padding-bottom: baseline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small } &.text-small { padding-top: capline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small padding-bottom: baseline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small } &.text-large { padding-top: capline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large padding-bottom: baseline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large } &.text-xlarge { padding-top: capline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge padding-bottom: baseline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge }
}
// // Emphases // —————————————- small, .text-xsmall {
font-size: $font-size-xsmall;
}
.text-small {
font-size: $font-size-small;
}
.text-large {
font-size: $font-size-large;
}
.text-xlarge {
font-size: $font-size-xlarge;
}
.text-xxlarge {
font-size: $font-size-headline-h2;
}
.text-xxxlarge {
font-size: $font-size-headline-h2;
}
.text-marketing-l {
@include headline-variant($font-size-headline-marketing-elmt-l); font-weight: 200;
}
.text-marketing-xl {
@include headline-variant($font-size-headline-marketing-elmt-xl); font-weight: 200;
}
.text-thin {
font-weight: 200 !important;
}
.text-semibold {
font-weight: $font-weight-semibold !important;
}
.text-strong, .text-bold {
font-weight: bold !important;
}
.text-emphased, .text-italic {
font-style: italic !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-muted {
color: $color-muted !important;
}
dfn, abbr, abbr {
background-image: $dfn-background-image; background-position: 0 1em; background-repeat: repeat-x; background-size: 2px 1px; border-bottom: 0; // reset normalize font-style: inherit; cursor: help;
}
mark {
background-color: $marked-bgr-color; color: $marked-font-color; padding: $marked-padding;
}
.text-positive { @include emphasis-variant($font-color-positive); } .text-warning { @include emphasis-variant($font-color-warning); } .text-negative { @include emphasis-variant($font-color-negative); } .text-brand { @include emphasis-variant($font-color-brand); } .text-inactive { @include emphasis-variant($font-color-inactive, true); }
// // Lists // —————————————- .list-unordered, .list-unordered-plain {
list-style: none; margin: $list-unordered-margin; padding: $list-unordered-padding; > li:before { content: '\2013'; // endash + enspace padding-right: $list-unordered-indent; } .list-ordered, .list-unordered, .list-unordered-plain { margin-top: 0; }
}
.list-unordered-bullet > li:before {
content: '\25AA'; // black small square + enspace
}
.list-unordered-plain {
> li:before { content: none; padding-right: 0; }
}
.list-ordered {
list-style: none; margin: $list-ordered-margin; padding: $list-ordered-padding; counter-reset: list-index; > li { counter-increment: list-index; } &[reversed] > li { counter-increment: list-index - 1; } > li:before { content: counters(list-index, '.') ''; padding-right: $list-ordered-indent; } .list-ordered, .list-unordered { margin-top: 0; }
}
.list-ordered-semibold > li:before {
font-weight: $font-weight-semibold;
}
// // Description Lists // —————————————-
.list-desc {
margin-top: 0; // Remove browser default //margin-bottom: @line-height-computed; > dd { margin-left: 0; // Undo browser default padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); }
}
.list-desc-horizontal {
@include clearfix(); > dt { text-align: left; font-weight: 600; } > dd { margin: 0; padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); } @media (min-width: $description-list-breakpoint) { > dt { clear: left; float: left; text-align: right; width: ($component-offset-horizontal - building-units(1)); font-weight: normal; } > dd { margin-left: $component-offset-horizontal; padding-bottom: 0; } }
}
.list-desc-semibold {
> dt { font-weight: $font-weight-semibold; }
}
// // Price Labels // —————————————-
.price {
margin: 0; padding: 0; vertical-align: baseline; display: inline-block; > sup { line-height: $line-height-ratio; // override normalize display: inline-block; vertical-align: top; } @include price-variant($price-font-size-regular);
}
.price-large { @include price-variant($price-font-size-large); } .price-xlarge { @include price-variant($price-font-size-xlarge); }
.price-expired {
font-size: $price-font-size-expired; > sup { font-size: $price-font-size-expired; }
}
// // Blockquote // —————————————-
.quote {
font-size: $quote-font-size; font-style: italic; margin: 0; padding: 0;
}
.quote-author {
font-size: $quote-font-size-author; font-style: normal; font-weight: bold; margin: 0; margin-top: $quote-author-space; padding: 0; cite { font-style: normal; }
}
.figure {
font-size: $quote-font-size; margin: $quote-figure-margin; padding: $quote-figure-padding; border-left: $quote-figure-border-left;
}
.quote-list {
list-style: none; padding-left: building-units(2); .quote-list-item { border-left: $quote-figure-border-left; padding: $quote-figure-padding; .figure { border-left: 0; padding-left: 0; } *.quote-list { padding-left: building-units(1); } }
}
// // Adresses // —————————————-
address {
font-style: normal;
}
.address-header small, .address-body, .address-footer {
font-size: $address-font-ratio;
}
.address-header, .address-body, .address-footer {
margin: 0; padding: 0;
}
.address-header + .address-body, .address-body + .address-footer {
margin-top: $address-section-space;
}
.address-header {
font-weight: bold;
}
.address-footer label {
min-width: $address-label-offset;
}
// // Helpers // —————————————-
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
@mixin text-alignement($size) {
.text-#{$size}-left { text-align: left; } .text-#{$size}-center { text-align: center; } .text-#{$size}-right { text-align: right; }
}
// default @include text-alignement('l');
// down-sizing @media screen and (max-width: #{$grid-medium-max}px) {
@include text-alignement('m');
}
@media screen and (max-width: #{$grid-small-max}px) {
@include text-alignement('s');
}
// up-sizing @media screen and (min-width: #{$grid-extra-large-min}px) {
@include text-alignement('xl');
}
.text-nowrap {
white-space: nowrap;
}
.text-ellipsis {
@include ellipsis();
}