vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add mixins for typography

old
Javi Velasco 2015-10-06 21:32:31 +02:00
parent 91cdb517b2
commit 366f81db93
2 changed files with 201 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
components/mixins.scss
View File

@ -1,3 +1,195 @@
//-- Typography
@mixin typo-preferred-font($use-preferred: true) {
@if $use-preferred {
font-family: $preferred-font;
}
}
@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 11.2rem;
font-weight: 300;
line-height: 1;
letter-spacing: -.04em;
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 5.6rem;
font-weight: 400;
line-height: 1.35;
letter-spacing: -.02em;
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 4.5rem;
font-weight: 400;
line-height: 4.8rem;
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 3.4rem;
font-weight: 400;
line-height: 4rem;
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 2.4rem;
font-weight: 400;
line-height: 3.2rem;
-moz-osx-font-smoothing: grayscale;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-title($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 2rem;
font-weight: 500;
line-height: 1;
letter-spacing: .02em;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: .04em;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 1.6rem;
font-weight: 400;
line-height: 2.8rem;
letter-spacing: .04em;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
@include typo-preferred-font($use-preferred);
font-size: 1.4rem;
line-height: 2.4rem;
letter-spacing: 0;
@if $use-preferred {
font-weight: 500;
} @else {
font-weight: bold;
}
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
@include typo-preferred-font($use-preferred);
font-size: 1.4rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: 0;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-caption($color-contrast: false, $use-preferred: false) {
@include typo-preferred-font($use-preferred);
font-size: 1.2rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
position: relative;
font-size: 2.4rem;
font-style: italic;
font-weight: 300;
line-height: 1.35;
letter-spacing: .08em;
&:before {
position: absolute;
left: -.5em;
content: "“";
}
&:after {
margin-left: -.05em;
content: "”";
}
@if $color-contrast {
opacity: .54;
}
}
@mixin typo-menu($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
@if $color-contrast {
opacity: .87;
}
}
@mixin typo-button($color-contrast: false, $use-preferred: true) {
@include typo-preferred-font($use-preferred);
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
@if $color-contrast {
opacity: .87;
}
}
//-- Shadows
@mixin focus-shadow() {
box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);

17
components/variables.scss
View File

@ -20,14 +20,15 @@ $offset: 1.6 * $unit;
$border-radius: 0.2 * $unit;
// -- Fonts
$font-size: 1.6 * $unit;
$font-size-tiny: 1.2 * $unit;
$font-size-small: 1.4 * $unit;
$font-size-normal: $font-size;
$font-size-big: 1.8 * $unit;
$font-weight-thin: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
$font-size: 1.6 * $unit !default;
$font-size-tiny: 1.2 * $unit !default;
$font-size-small: 1.4 * $unit !default;
$font-size-normal: $font-size !default;
$font-size-big: 1.8 * $unit !default;
$font-weight-thin: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
//-- Shadows
$shadow-key-umbra-opacity: 0.2 !default;