// scss-lint:disable VendorPrefix @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); } @mixin shadow-2dp() { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-3dp() { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-4dp() { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-6dp() { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-8dp() { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-16dp() { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); } //-- Animations @mixin material-animation-fast-out-slow-in($duration: .2s) { transition-timing-function: $animation-curve-fast-out-slow-in; transition-duration: $duration; } @mixin material-animation-linear-out-slow-in($duration: .2s) { transition-timing-function: $animation-curve-linear-out-slow-in; transition-duration: $duration; } @mixin material-animation-fast-out-linear-in($duration: .2s) { transition-timing-function: $animation-curve-fast-out-linear-in; transition-duration: $duration; } @mixin material-animation-default($duration: .2s) { transition-timing-function: $animation-curve-default; transition-duration: $duration; } @mixin no-webkit-scrollbar { &::-webkit-scrollbar { width: 0; height: 0; } } @mixin btn-colors($name, $color, $background, $hover) { .#{$name}:not([disabled]) { &.raised, &.floating { color: $color; background: $background; } &.flat, &.toggle { color: $background; &:focus:not(:active) { background: $hover; } } &.flat:hover { background: $hover; } } }