mirror of
https://github.com/netzbegruenung/podcast.netzbegruenung.de.git
synced 2024-04-29 01:24:52 +02:00
101 lines
3 KiB
SCSS
101 lines
3 KiB
SCSS
// Typeset your type.
|
|
//
|
|
// @param string $typestyle
|
|
// A type style from the $typestyles map.
|
|
// @param number|string $context
|
|
// (optional) Only used if em is the $base-unit. The value of the
|
|
// elements/parents font-size if it differs from $base-font-size.
|
|
// Specified as a t-shirt size or value in px.
|
|
@mixin typeset($typestyle, $context: $base-font-size) {
|
|
$typestyle: map-get($typestyles, $typestyle);
|
|
|
|
$font-size: false;
|
|
$line-height: false;
|
|
$weight: false;
|
|
$style: false;
|
|
$case: false;
|
|
$letter-spacing: false;
|
|
|
|
// Assign values to variables when $typestyle is a keyed map.
|
|
@if type-of($typestyle) == "map" {
|
|
@if map-has-key($typestyle, font-size) {
|
|
$font-size: map-get($typestyle, font-size);
|
|
}
|
|
@if map-has-key($typestyle, line-height) {
|
|
$line-height: map-get($typestyle, line-height);
|
|
}
|
|
@if map-has-key($typestyle, weight) {
|
|
$weight: map-get($typestyle, weight);
|
|
}
|
|
@if map-has-key($typestyle, style) {
|
|
$style: map-get($typestyle, style);
|
|
}
|
|
@if map-has-key($typestyle, case) {
|
|
$case: map-get($typestyle, case);
|
|
}
|
|
@if map-has-key($typestyle, letter-spacing) {
|
|
$letter-spacing: map-get($typestyle, letter-spacing);
|
|
}
|
|
}
|
|
|
|
// Assign values to variables when $typestyle is shorthand.
|
|
@if type-of($typestyle) == "list" {
|
|
@each $value in $typestyle {
|
|
// The first value is always font-size.
|
|
@if index($typestyle, $value) == 1 {
|
|
$font-size: $value;
|
|
}
|
|
// This is a line-height value.
|
|
@else if type-of($value) == "number" and index($typestyle, $value) == 2 {
|
|
$line-height: $value;
|
|
}
|
|
// This is a font-weight value.
|
|
@else if map-has-key($font-weight, $value) {
|
|
$weight: $value;
|
|
}
|
|
// This is a case value.
|
|
@else if type-of($value) == "string" and index($text-transform-values, $value) != null {
|
|
$case: $value;
|
|
}
|
|
// This is a style value.
|
|
@else if type-of($value) == "string" and index($font-style-values, $value) != null {
|
|
$style: $value;
|
|
}
|
|
// This is a letter-spacing value.
|
|
@else if type-of($value) == "number" and index($typestyle, $value) != 2 and index($typestyle, $value) != 1 {
|
|
$letter-spacing: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// $typestyle may also be a solitary font-size.
|
|
@if type-of($typestyle) != "map" and type-of($typestyle) != "list" {
|
|
$font-size: $typestyle;
|
|
}
|
|
|
|
// Output properties.
|
|
@if $font-size {
|
|
@include font-size($font-size, $context);
|
|
}
|
|
@if $line-height {
|
|
@include typey-debug-grid($line-height, $font-size);
|
|
@include line-height($line-height, $font-size);
|
|
}
|
|
@else {
|
|
// Using default line-height so set debug grid accordingly.
|
|
@include typey-debug-grid($base-line-height, $font-size);
|
|
}
|
|
@if $weight {
|
|
font-weight: weight($weight);
|
|
}
|
|
@if $style {
|
|
font-style: $style;
|
|
}
|
|
@if $case {
|
|
text-transform: $case;
|
|
}
|
|
@if $letter-spacing {
|
|
letter-spacing: calculate-em-px($letter-spacing, $font-size);
|
|
}
|
|
}
|