// ==========================================================================
// Utilities
// ==========================================================================
// Color Palette
// -------------------------------------------------------
//
// @param $palette: color map name
// @param $tone: color map variation, default is base
//
// USAGE:
// color: palette(purple);
// color: palette(purple, light);
@function palette($palette, $tone: 'base') {
@return map-get(map-get($palettes, $palette), $tone);
}
// The strip-unit function returns a unitless number.
// -------------------------------------------------------
//
// @param [number] $val; value with or without unit
//
// USAGE:
// strip-unit(42px);
@function strip-unit($val) {
@return ($val / ($val * 0 + 1));
}
// The map-fetch function fetches nested map values.
// -------------------------------------------------------
//
// @param [map] $map; nested map
// @param [list] $keys; keys to establish path to value
//
// USAGE:
// map-fetch($my-map, $key-1a key-1b);
@function map-fetch($map, $keys) {
$key: nth($keys, 1);
$length: length($keys);
$value: map-get($map, $key);
@if ($length > 1) {
$rest: ();
@for $i from 2 through $length {
$rest: append($rest, nth($keys, $i))
}
@return map-fetch($value, $rest)
} @else {
@return $value;
}
}
// The rem function converts a pixel value to a rem value.
// -------------------------------------------------------
//
// @param [number] $val-px; pixel value to be converted
// @param [number] $rem-base-px; pixel value equivalent to 1rem
//
// USAGE:
// rem(16px);
@function rem($val-px, $rem-base-px: $type-base-px) {
@return strip-unit($val-px) / strip-unit($rem-base-px) * 1rem;
}
// The type-style mixin sets the font stack and font size/s based on map.
// -------------------------------------------------------
//
// @param [map] $font-map; font map
// @param [string] $base-font-size; map key for base font size
// @param [map] $alt-size-keys; map of breakpoints and paired $font-map keys
//
// USAGE:
// $alt-size-map: ( mobile_w: 40, tablet: 52 );
// @include type-style($brand-font-1, x-small, $alt-size-map)
@mixin type-style($font-map, $base-size-key, $alt-size-keys: null) {
// Cache the base map
$base-map : map-fetch($font-map, $base-size-key);
font-family: unquote(map-fetch($font-map, stack));
font-size: rem(map-fetch($base-map, font-size));
// Set letter-spacing if we have it
@if (map-has-key($font-map, spacing)) {
letter-spacing: unquote(map-fetch($font-map, spacing));
}
// Set line-height if we have it
@if (map-has-key($base-map, line-height)) {
line-height: map-fetch($base-map, line-height);
}
// Check if we have a alternate map for other breakpoints
@if (type-of($alt-size-keys) == map) {
// Iterate over the $alt-size-keys map, and for each item in the map,
// set $bp to the key and $alt-size-key to the value
@each $bp, $alt-size-key in $alt-size-keys {
// If there is a key in the properties map that was the value in the $alt-size-keys map
@if (map-has-key($font-map, $alt-size-key)) {
// Cache the font properties
$font-properties-map : map-fetch($font-map, $alt-size-key);
// Add a respond-mixin, with the appropriate values
@include respond-to($bp) {
// Fetch the font-size from the font-properties-map
font-size: rem(map-fetch($font-properties-map, font-size));
// If the map has a line-height key set, add it as well.
@if(map-has-key($font-properties-map, line-height)) {
line-height: map-fetch($font-properties-map, line-height);
}
}
}
}
}
}
// Breakpoint Map
// -------------------------------------------------------
//
// Maps a breakpoint value in pixels to it's value in rems
// Used in @mixin respond-to()
//
$breakpoint-map : (
280: 17.5rem,
320: 20rem,
400: 25rem,
450: 28.125rem,
480: 30rem,
500: 31.25rem,
550: 34.375rem,
600: 37.5rem,
650: 40.625rem,
700: 43.75rem,
768: 48rem,
800: 50rem,
980: 61.25rem,
1000: 62.5rem,
1024: 64rem,
1180: 73.75rem,
1200: 75rem,
1600: 100rem
);
// Breakpoint Labels
// -------------------------------------------------------
// NOTE: Keep map values in ascending order
$breakpoint-labels: (
mobile: 320,
mobile-wide: 480,
tablet: 650,
tablet-wide: 768,
desktop: 980,
desktop-wide: 1180,
desktop-max: 1200,
desktop-extra-wide: 1600
);
// Common Breakpoint Values
// -------------------------------------------------------
// Pixel values for use with the respond-to mixin
$breakpoint-mobile: map-get( $breakpoint-labels, mobile );
$breakpoint-mobile-wide: map-get( $breakpoint-labels, mobile-wide );
$breakpoint-tablet: map-get( $breakpoint-labels, tablet );
$breakpoint-tablet-wide: map-get( $breakpoint-labels, tablet-wide );
$breakpoint-desktop: map-get( $breakpoint-labels, desktop );
$breakpoint-desktop-wide: map-get( $breakpoint-labels, desktop-wide );
$breakpoint-desktop-max: map-get( $breakpoint-labels, desktop-max );
$breakpoint-desktop-extra-wide: map-get( $breakpoint-labels, desktop-extra-wide );
// Rem values for use with the breakpoint mixin
$bp-mobile: map-get( $breakpoint-map, $breakpoint-mobile );
$bp-mobile-w: map-get( $breakpoint-map, $breakpoint-mobile-wide );
$bp-tablet: map-get( $breakpoint-map, $breakpoint-tablet );
$bp-tablet-w: map-get( $breakpoint-map, $breakpoint-tablet-wide );
$bp-desktop: map-get( $breakpoint-map, $breakpoint-desktop );
$bp-desktop-w: map-get( $breakpoint-map, $breakpoint-desktop-wide );
$bp-desktop-max: map-get( $breakpoint-map, $breakpoint-desktop-max );
// Respond To
// -------------------------------------------------------
//
// @param [number] $val-px, a value, given in pixels
//
// @param [string] $condition, a condition or rule to be passed in as a 'media feature'
// ie. a specific feature of the user agent or display device, ex. max-device-width
// defaults to min-width
// for a complete list of features, see:
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Media_features
//
// @param [string] $media the media type
// defaults to screen
//
// USAGE:
// @include respond-to(600){
// width: 35%;
// }
//
@mixin respond-to($val-px, $condition: min-width, $media: screen){
$rems : map-fetch($breakpoint-map, $val-px);
@media only #{$media} and ($condition: $rems){@content;}
}
// The breakpoint mixin wraps the content in a min-width media query for the specified breakpoint.
// -------------------------------------------------------
//
// @param [string] $point; breakpoint name
// @param [boolean] $fallback; whether to provide fallback
// @param [string] $fallbackClass; name of fallback class
//
// USAGE:
// @include breakpoint(mobile_w) { @content };
@mixin breakpoint($point, $fallback: false, $fallbackClass: 'lt-ie9') {
@if $point == mobile {
@media (min-width: $bp-mobile) { @content; }
} @else if $point == tablet {
@media (min-width: $bp-tablet) { @content; }
} @else if $point == desktop {
@media (min-width: $bp-desktop) { @content; }
}
@if $fallback {
.#{$fallbackClass} & {
@content;
}
}
}
// The aspect-ratio mixin forces a container to maintain the given aspect ratio.
// -------------------------------------------------------
//
// @param [number] $width; proportional width
// @param [number] $height; proportional height
//
// USAGE:
// @include aspect-ratio( 16, 9 );
@mixin aspect-ratio( $width: 1, $height: 1 ) {
position: relative;
&:before {
content: "";
display: block;
width: 100%;
padding-bottom: ( $height / $width ) * 100%;
}
& > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// The svg-bkgd mixin sets an svg background image, with fallback.
// -------------------------------------------------------
//
// @param [string] $filname; name of image file (no file extension)
// @param [string] $extension; file extension to use for fallback
//
// USAGE:
// @include svg-bkgd('logo', '.jpg');
@mixin svg-bkgd($filename, $extension: '.png') {
background-image: url($filename + '.svg');
html.no-svg & {
background-image: url($filename + $extension);
}
}
// The background-gradient mixin sets element background gradient.
// -------------------------------------------------------
//
// @param [list] $gradient-colors; list of 2 colors
// @param [string] $gradient-direction; direction of gradient
//
// USAGE:
// $gradient-brand-1: (#000000, #FFFFFF);
// @include background-gradient($gradient-brand-1, to left);
@mixin background-gradient($gradient-colors, $gradient-direction: "to bottom") {
background-image: linear-gradient(unquote($gradient-direction), nth($gradient-colors, 1), nth($gradient-colors, 2) );
}
// The background-combo mixin sets background combo of image and gradient.
// -------------------------------------------------------
//
// @param [string] $image-url; url of image
// @param [list] $gradient-colors; list of 2 colors
// @param [string] $gradient-direction; direction of gradient
//
// USAGE:
// $gradient-brand-1: (#000000, #FFFFFF);
// @include background-gradient('image.png', $gradient-brand-1, to left);
@mixin background-combo($image-url, $gradient-colors, $gradient-direction: "to bottom") {
background: image-url($image-url), linear-gradient(unquote($gradient-direction), nth($gradient-colors, 1), nth($gradient-colors, 2) );
}
// The set-background mixin sets background combo containing
// color, image and/or gradient.
// -------------------------------------------------------
//
// @param [map] $options; map containing color, image and/or gradient values
// @param [string] $gradient-direction; direction to use for gradient mixin
// @param [boolean] $pseudoClass: when used inside a pseudo (:after, :before) set to true
//
// USAGE:
// $module-background-1:
// ( color: #FF0000, image: $pattern-1,
// gradient: ( colors: $gradient-brand-1, direction: to left )
// );
// @include set-background($module-background-1);
@mixin set-background($options, $gradient-direction: "to bottom", $pseudoClass: false) {
$image-url: null;
$gradient: null;
$gradient-colors: null;
@if map-has-key($options, color) {
$color: map-get($options, color);
background-color: $color;
}
@if map-has-key($options, image) {
$image-url: map-get($options, image);
}
@if map-has-key($options, gradient) {
$gradient: map-get($options, gradient);
$gradient-colors: map-get($gradient, colors);
}
@if $image-url and $gradient-colors {
@include background-combo($image-url, $gradient-colors);
} @elseif $image-url {
@if ( $pseudoClass ) {
.with-bg & {
background-image: image-url( $image-url );
}
} @else {
&.with-bg {
background-image: image-url( $image-url );
}
}
} @elseif $gradient-colors {
@if map-has-key($gradient, direction) {
$gradient-direction: map-get($gradient, direction);
}
@include background-gradient($gradient-colors, $gradient-direction);
}
}
// border-serrated - Creates a serrated border given size, side of box, and outer color
// -------------------------------------------------------
// @param [number] $size - size of the triangle
// @param [string] $side - side to be serrated left/right/top/bottom
// @param [color] $color-outer - outer color (inner color is transparent to match container's bg)
//
// USAGE:
// @include border-serrated( 12px, left, #fff );
//
@mixin border-serrated( $side, $size, $color-outer ) {
$top: 0;
$bottom: 0;
$left: 0;
$right: 0;
$width: 100%;
$height: auto;
$bg-repeat: repeat-x;
$bg-position: left;
$deg1: 0;
$deg2: 0;
@if $side == top {
$bottom: auto;
$right: auto;
$height: $size;
$deg1: -135deg;
$deg2: 135deg;
}
@if $side == bottom {
$top: auto;
$right: auto;
$height: $size;
$deg1: -45deg;
$deg2: 45deg;
}
@if $side == left {
$right: auto;
$width: $size;
$deg1: 45deg;
$deg2: 135deg;
$repeat: repeat-y;
$position: top;
}
@if $side == right {
$left: auto;
$width: $size;
$deg1: -45deg;
$deg2: -135deg;
$repeat: repeat-y;
$position: top;
}
& {
position: relative;
overflow: auto;
padding-#{$side}: $size;
}
&:after {
top: $top;
bottom: $bottom;
left: $left;
right: $right;
width: $width;
height: $height;
background: linear-gradient( $deg1, $color-outer $size/2, transparent 0 ), linear-gradient( $deg2, $color-outer $size/2, transparent 0 );
background-size: $size $size;
background-repeat: $bg-repeat;
background-position: $bg-position;
position: absolute;
display: block;
content: " ";
}
}
// The circle mixin creates a circle shape.
// -------------------------------------------------------
//
// @param [number] $width; diameter of circle
//
// USAGE:
// @include circle(10px);
@mixin circle($width) {
width: $width;
height: $width;
line-height:$width;
-webkit-border-radius: $width / 2;
-moz-border-radius: $width / 2;
border-radius: $width / 2;
}
// The arrow mixin creates a triangle shape.
// -------------------------------------------------------
//
// @param [string] $direction; direction of arrow (up,down,left,right)
// @param [number] $width; width of arrow in pixels
// @param [number] $height; height of arrow in pixels
// @param [color] $color; arrow background color
//
// USAGE:
// @include arrow(up, #FF0000, 10px, 10px);
@mixin arrow( $direction: down, $color: $color-gray-6 , $width: 15px, $height: 15px) {
width: 0;
height: 0;
@if ($direction == down) {
border-left: $width solid transparent;
border-right: $width solid transparent;
border-top: $height solid $color;
}
@if ($direction == up) {
border-left: $width solid transparent;
border-right: $width solid transparent;
border-bottom: $height solid $color;
}
@if ($direction == left) {
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-right: $height solid $color;
}
@if ($direction == right) {
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-left: $height solid $color;
}
}
// The diamond mixin creates a diamond shape.
// -------------------------------------------------------
//
// @param [number] $width; width of diamond in pixels
// @param [number] $height; height of diamond in pixels
// @param [boolena] $pseudo; boolean indicating if this is being called inside a pseudo class( :before/:after )
//
// USAGE:
// @include diamond(10px, 10px);
@mixin diamond($width, $height, $background: null, $pseudo: false) {
display: block;
width: $width;
height: $height;
transform: rotate(135deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
@if ($background) {
@include set-background($background, $pseudoClass: $pseudo);
}
}
// Rounded corners
// -------------------------------------------------------
@mixin rounded-corners($border-radius: 4px) {
border-radius: $border-radius;
}
// The noscroll mixin disables scrolling, up to breakpoint if specified.
// -------------------------------------------------------
//
// @param [string] $bp; breakpoint name
//
// USAGE:
// @include noscroll(desktop);
@mixin noscroll($bp: "") {
overflow: hidden;
@if $bp != "" {
@include breakpoint($bp) {
overflow: auto;
}
}
}
// The truncate mixin truncates text, up to breakpoint if specified.
// -------------------------------------------------------
//
// @param [string] $bp; breakpoint name
//
// USAGE:
// @include truncate(desktop);
@mixin truncate($bp: "") {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@if $bp != "" {
@include breakpoint($bp) {
white-space: inherit;
overflow: inherit;
text-overflow: inherit;
}
}
}
// The grid-col-width mixin prints the percentage width for
// the specified number of columns (including margins) for modern
// browsers, and the percentage width for the specified number of
// columns (not including margins) to provide an IE8 fallback,
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
// @param [number] $parent-cols; number of cols in parent (if nested) or total grid
// @param [percentage] $col-gutter; margin between grid cols
// @param [number] $total-cols; number of cols in total grid (only needed if element is nested)
// @param [boolean] $nested; if element is nested and gutters are relatively scaled
// @param [boolean] $last-in-row; if element is last in grid row (no right margin)
// @param [boolean] $inline; if element is to be displayed inline-block. If left unset or set to false, element will be floated
@mixin grid-col-width($num-of-cols, $parent-cols: $total-columns, $col-gutter: $gutter-width, $total-cols: $total-columns, $nested: false, $last-in-row: false, $inline: false) {
// Check to see how we're displaying the items, with float or with display inline-block
@if ($inline == false) {
float: left;
} @else {
display: inline-block;
}
@if ($num-of-cols < $total-cols) and ($last-in-row == false) {
@if $nested {
margin-right: relative-gutter($total-cols, $col-gutter: $col-gutter);
} @else {
margin-right: $col-gutter;
}
} @elseif $last-in-row == true {
margin-right: 0;
}
@if $nested {
width: col-width($num-of-cols, $parent-cols, $col-gutter, $total-cols, $nested: $nested);
} @else {
width: col-width($num-of-cols, $parent-cols, $col-gutter);
}
}
// The col-width function calculates the percentage width
// of an element that spans the specified number of columns.
// -------------------------------------------------------
// NOTE: if element is nested and gutters should be relatively scaled,
// pass $col-gutter through relative-gutter() function
// e.g. col-width(3, 6, relative-gutter(6))
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
// @param [number] $parent-cols; number of cols in parent (if nested) or total grid
// @param [percentage] $col-gutter; margin between grid cols
// @param [number] $total-cols; number of cols in total grid (only needed if element is nested)
// @param [boolean] $nested; if element is nested and gutters are relatively scaled
// @param [boolean] $extra-gutter; if grid row has an extra gutter
// @param [boolean] $last-in-row; if element is last in grid row (no right margin)
@function col-width($num-of-cols, $parent-cols: $total-columns, $col-gutter: $gutter-width, $total-cols: $total-columns, $nested: false, $extra-gutter: false) {
@if ($nested == true) {
$col-gutter: relative-gutter($parent-cols, $col-gutter, $total-cols);
}
$gutter-count: $parent-cols / $num-of-cols - 1;
$gutter-total: strip-unit($col-gutter) * $gutter-count;
$gutter-split: $gutter-total / ($parent-cols / $num-of-cols);
$col-pct : (100 / $parent-cols * $num-of-cols);
$width: ($col-pct - $gutter-split) / 100;
@if ($extra-gutter == true) {
$width: ($col-pct - $gutter-split + strip-unit($col-gutter)) / 100;
}
@return percentage($width);
}
// The responsive-grid mixin uses grid-col-width and tablet and tablet wide breakpoints
// to calulate the number of items in a "grid".
//
// This is implemented in the content search modal, but can be used
// anywhere items need to flow inline in a grid-like format -
// the number of columns of items being dependant on screen width.
// -------------------------------------------------------
//
// @param {int} $tablet-cols Column count for "tablet"
// @param {int} $tablet-wide-cols Column count for "tablet-wide" and above
@mixin responsive-grid($tablet-cols: 3, $tablet-wide-cols: 5) {
// Mobile Width
@include grid-col-width(24, $inline: true);
// Tablet Width
@include respond-to( $breakpoint-tablet ) {
@include grid-col-width(1, $parent-cols: $tablet-cols);
&:nth-of-type(#{$tablet-cols}n) {
@include grid-col-width(1, $parent-cols: $tablet-cols, $last-in-row: true);
}
}
// Tablet Wide Width
@include respond-to( $breakpoint-tablet-wide ) {
@include grid-col-width(1, $parent-cols: $tablet-wide-cols);
&:nth-of-type(#{$tablet-cols}n) {
@include grid-col-width(1, $parent-cols: $tablet-wide-cols, $last-in-row: false);
}
&:nth-of-type(#{$tablet-wide-cols}n) {
@include grid-col-width(1, $parent-cols: $tablet-wide-cols, $last-in-row: true);
}
}
}
// responsive-grid-col is a mixin that allows you to set grid-col-widths on an item
// at multiple breakpoints with a single mixin.
// -------------------------------------------------------
//
// Usage:
// The include below would cause an item to take up ~33% on mobile, 20% on tablet,
// and 12.5% on desktop wide.
//
// @include responsive-grid-col( (
// $breakpoint-mobile: 3,
// $breakpoint-tablet: 5,
// $breakpoint-desktop-wide: 8
// ) );
// -------------------------------------------------------
//
// @param {map} $bp-map Map of breakpoint keys to their column width values
// @param {bool} $nth-of-type Whether or not to use nth-of-type, for margin resets
// @param {bool} $inline if element is to be displayed inline-block. If left unset or set to false, element will be floated
@mixin responsive-grid-col( $bp-map: (), $nth-of-type: false , $inline: false) {
$last: false;
@each $bp, $cols in $bp-map {
@if ( $bp == $breakpoint-mobile ) {
@include responsive-grid-col-content( $cols, $last, $nth-of-type, $inline );
} @else {
@include respond-to( $bp ) {
@include responsive-grid-col-content( $cols, $last, $nth-of-type, $inline );
}
}
$last: $cols;
}
}
// responsive-grid-col-content includes the actual content for the responsive-grid-col
// mixin and is not meant to be called directly
// -------------------------------------------------------
@mixin responsive-grid-col-content( $cols, $last: false, $nth-of-type: false, $inline: false ) {
@include grid-col-width( 1, $parent-cols: $cols, $inline: $inline );
$selector: if( $nth-of-type, "nth-of-type", "nth-child" );
@if $last {
&:#{$selector}( #{$last}n ) {
margin-right: $gutter-width;
}
&:#{$selector}( #{$last}n + 1 ) {
clear: none;
}
}
&:#{$selector}( #{$cols}n ) {
margin-right: 0;
}
&:#{$selector}( #{$cols}n + 1 ) {
clear: left;
}
}
// The relative-gutter function calculates the gutter width percentage
// for a nested element, relatively scaled based on parent's percentage width.
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
// @param [percentage] $col-gutter; margin between grid cols
// @param [number] $total-cols; number of cols in total grid
@function relative-gutter($parent-cols, $col-gutter: $gutter-width, $total-cols: $total-columns) {
$parent-pct: col-width($parent-cols, $total-cols, $col-gutter);
$relative-col-gutter: percentage($col-gutter / $parent-pct);
@return $relative-col-gutter;
}
// The col-width-fixed function calculates the percentage width of a fixed
// position element that spans the specified number of columns in grid.
// -------------------------------------------------------
// NOTE: if breakpoint is higher than site max width, use col-width-fixed-max() function
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
// @param [number] $outer-gutter; width of outer gutter (individual)
// @param [number] $total-cols; total number of cols in grid
// @param [percentage] $col-gutter; margin between grid cols
@function col-width-fixed($num-of-cols, $outer-gutter, $total-cols: $total-columns, $col-gutter: $gutter-width) {
$pct : col-width($num-of-cols, $total-cols, $col-gutter);
$outer-gutter-total: $outer-gutter * 2;
$outer-gutter-split: $outer-gutter-total / $total-cols * $num-of-cols;
@return calc(#{$pct} - #{$outer-gutter-split});
}
// The col-width-fixed-max function calculates the percentage width of a fixed
// position element that spans the specified number of columns in grid if browser width
// is greater than site max width.
// -------------------------------------------------------
// NOTE: if breakpoint is lower than site max width, use col-width-fixed() function
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
@function col-width-fixed-max($num-of-cols, $total-cols: $total-columns, $col-gutter: $gutter-width) {
@return (col-width($num-of-cols, $total-cols, $col-gutter)) / 100% * $site-max-width-inner;
}
// The marginless-col-width function calculates the percentage width of
// an element that spans the specified number of columns in grid (or
// parent element if nested), ignoring margins. Can be used as an IE8
// fallback for colWidth mixin.
// -------------------------------------------------------
//
// @param [number] $num-of-cols; number of cols to span
// @param [number] $total-cols; total number of cols in grid or parent element
@function marginless-col-width($num-of-cols, $total-cols: $total-columns) {
$pct : (100 / $total-cols * $num-of-cols) + '%';
@return #{$pct};
}
// Transition and Animation mixins
// ---------------------------------------------------
//Set default transition and tranform vars
$default-translate-x: 1rem;
$default-translate-y: $default-translate-x;
$default-origin-y: 50%;
$default-origin-x: 50%;
$default-vector-x: 1;
$default-vector-y: 1;
$default-vector-z: 1;
$default-rotate: 45%;
// transition()
//
// USAGE:
// @include transition($trans-standard, background-color);
// @include transition($trans-fast, all);
// @include transition(all, .4s, ease-out);
@mixin transition($transition-property, $transition-time: .3s, $method: ease-in-out) {
transition: $transition-property $transition-time $method;
}
// translateX()
//
// Defines a 2D translation, moving the element along the X-axis
// For more information on translateX, see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
//
// $trans-x a length in px, rem, or %
//
// USAGE:
// @include translateX(-50%); When combined with left: 50%; this will horizontally align an absolutely positioned element
//
@mixin translateX($trans-x: $default-translate-x) {
$trans: translateX($trans-x);
transform: $trans;
}
// translateY()
//
// Defines a 2D translation, moving the element along the Y-axis
// For more information on translateY, see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
//
// $trans-y a length in px, rem, or %
//
// USAGE:
// @include translateY(3rem); Move the element up 3rem
//
@mixin translateY($trans-y: $default-translate-y) {
$trans: translateY($trans-y);
transform: $trans;
}
// transform-origin()
//
// Modify the origin for transformations of an element.
// For example, the transform-origin of the rotate() function is the centre of rotation.
// (This property is applied by first translating the element by the negated value of the property,
// then applying the element's transform, then translating by the property value.)
//
// $origin-x
// $origin-y
// For more information on transform-origin property, see: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
//
// USAGE: @include apply-origin(50%, 50%); This will set the point of transformation to the object's center
// @include apply-origin(3rem, 3rem); This will set the point of transformation to 3rem to the right and above (top: 3rem) of the object
//
@mixin transform-origin($origin-x: $default-origin-x, $origin-y: $default-origin-y) {
$origin: unquote("");
@if $origin-x or $origin-y {
@if $origin-x {
$origin: $origin-x;
}
@else {
$origin: 50%;
}
@if $origin-y {
$origin: $origin $origin-y;
}
transform-origin: $origin;
}
}
// rotate3d
//
// Defines a transformation that moves the element around a fixed axis without deforming it.
// For more information on rotate3d, see transform, here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()
//
// vector-x, vector-y, vector-z unitless numbers representing the axis of rotation which pass by the origin, as defined in transform-origin
// rotate angle for rotations, given as a a number followed by 'deg', ex. 45deg
//
// NOTE: the vector variables above are not important on their own, but in relation to one another creating an axis from your
// transform-origin, along the axis of Xx = Yy = Zz.
//
// USAGE: @include rotate3d(0, 0, 1, 45deg); This will rotate an object around the vector 0x = 0y = 1z axis, 45 degrees
//
@mixin rotate3d($vector-x: $default-vector-x, $vector-y: $default-vector-y, $vector-z: $default-vector-z, $rotate: $default-rotate) {
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
transform: $trans;
}
// triangleWithBorderUp
//
// Creates two pseudo elements, :before and :after, and defines there borders such that they appear as up triangles.
// These two triangles are displayed on top of one another, the bottom of which, the :before, appearing as a border around the :after element,
// which appears as the triangle interior.
//
// USAGE:
// @include triangleWithBorderUp(pink, white, 1rem);
//
// @param [string] $border-color the color of the :before element, ie. the border
// @param [string] $triangle-color the color of the :after element, ie. the triangle
// @param [string] $triangle-size A value, given with units, ie. 10px or 1rem or 15%
@mixin triangleWithBorderUp($border-color: palette(black), $triangle-color: palette(white), $triangle-size: 0.625rem ) {
&:after, &:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-bottom-color: $triangle-color;
border-width: $triangle-size;
margin-left: -$triangle-size;
}
&:before {
border-bottom-color: $border-color;
border-width: $triangle-size * 1.5;
margin-left: -$triangle-size * 1.5;
}
}
// diagGradient()
//
// This mixin is used to create the striped background found on many of the editorial interface UI elements
// It uses the repeating-linear-gradient function, creating an image of repeating gradients
// For more information on the repeating-linear-gradient function, see: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
//
// USAGE:
// @include diagGradient(120deg, 1rem, pink, #ececec);
// @param [string] $border-color the angle of the stripes, given in a number with deg, ie. 180deg, -90deg
// @param [string] $stripe-width the width of the stripes, given is a unit based value, ie. 1rem, 20px
// @param [string] $stripe-one-color the color of the first stripe
// @param [string] $stripe-two-color the color of the second stripe
@mixin diagGradient($angle: -55deg, $stripe-width: 0.5rem, $stripe-one-color: palette(grey, light), $stripe-two-color: palette(grey, xlight) ) {
background: repeating-linear-gradient(
$angle,
$stripe-one-color,
$stripe-one-color $stripe-width,
$stripe-two-color $stripe-width,
$stripe-two-color $stripe-width * 2
);
}
// listingPageAfterPositioner()
//
// This mixin is a stop-gap fix for listing pages to place their "after" elements accordingly per section
// It's abstracted here to keep calc functionality DRY within the block template
//
// USAGE:
// @include listingPageAfterPositioner(2)
//
// @param [int] $i The iterator to use when calculating values
// @param [mixed] $initial Intiial baseline value to use in calc function
// @param [int] $breakpoint Breakpoint value to be used
@mixin listingPageAfterPositioner($i: 0, $initial: 4rem, $breakpoint: 1000) {
$multiple: 6.5 * $i;
// NOTE: grunt production compiles 0rem as 0, which is invalid css
// This may be due to csswring, which is handling css minification, being out of date
// TODO: update csswring to latest version, 5.0.0
// TODO: update postcss, a dep of csswring, to 5.0.14
@if $multiple == 0 {
left: calc(#{$initial} + 45%);
} @else {
left: calc(#{$initial} + 45% + #{$multiple}rem);
}
@include respond-to($breakpoint) {
left: calc(#{$initial} + 35% + (((65% - 14rem)/5) * #{$i}));
}
}
// center()
//
// This mixin allows to center vertically or horizontally or both
//
// USAGE:
// @include center()
// @include center( true, false )
//
// @param [bool] $centerX Whether to center horizontally
// @param [bool] $centerY Whether to center vertically
@mixin center( $centerX: true, $centerY: true ) {
position: absolute;
@if $centerX == true and $centerY == true {
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
} @elseif $centerX {
left: 50%;
transform: translateX( -50% );
} @elseif $centerY {
top: 50%;
transform: translateY( -50% );
}
}
// border-all()
//
// This mixin allows you to add a border by using either: value + position(s) or a map
//
// USAGE:
//
// Variables:
//
// string example:
// $border-main: 20px solid #3d3d3d - string
//
// map example:
// $border-main-2: (
// top: 5px solid red,
// bottom: 10px solid green,
// left: 7px dashed white,
// right: 20px double orange
// );
//
// Includes:
//
// @include border-all( $border-main, top left right) - gives a top, left and right border with values in $border-main
// @include border-all( $border-main, top) - gives only border-top with values in $border-main
// @include border-all( $border-main, full) - gives a full top, right, bottom and left border with values in $border-main
// @include border-all( $border-main-2, ) - passes map values, can be from 1-4 sides
//
// @param [string/map] $border-val border variable with either single or map values
// @param [map] $side border sides, could be singular or multiple
// @param [boolean] $hasMap whether or not to pass a map
@mixin border-all($border-val:"", $side:"") {
@if ( type-of($border-val) == map ) {
border-top: map-get($border-val, top);
border-right: map-get($border-val, right);
border-bottom: map-get($border-val, bottom);
border-left: map-get($border-val, left);
} @else {
@if ($side == full) {
border: $border-val;
} @else {
@each $side in $side {
border-#{$side}: $border-val;
}
}
}
}
// break-out-margin()
//
// This mixin allows for negative margins needed to "break out" of a grid container
// Used only on longform article for now - breaking out of body copy well
//
// USAGE:
// @include break-out-margin( left, 1, $cols-longform-article-body-tablet, true );
// @include break-out-margin( both, 2, $cols-longform-article-body-desktop, true );
// @include break-out-margin( both, 4, $cols-longform-article-body-desktop-wide, true );
//
// @param [string] $direction Direction to apply negative margin, can be left, right, or both
// @param [int] $columns Number of grid columns to break out
// @param [string] $context Number of grid columns out of which the $columns is being taken
// @param [bool] $nested Whether grid element is nested within other elements
@mixin break-out-margin( $direction: both, $columns: 0, $context: $cols-longform-article-body-desktop, $nested: true ) {
// don't use this for top or bottom margins, ya dummy
@if ( $direction == top or $direction == bottom ) {
@error "break-out-margin should only be used for left or right margins";
}
// default is both left and right
@if ( $direction == both ) {
margin-left: -( col-width( $columns, $context, $nested: $nested ) + relative-gutter( $context ) );
margin-right: -( col-width( $columns, $context, $nested: $nested ) + relative-gutter( $context ) );
}
// or left or right individually
@else {
margin-#{$direction}: -( col-width( $columns, $context, $nested: $nested ) + relative-gutter( $context ) );
}
}
// nth-child function for longer arrays
//
// This allows you to set an array of nth-children and write out each "child" as a number
// and can also pass in equations
//
// USAGE:
// A variable with the array must be set: $array-something-specific: '8', '10';
//
// #{nth-children( $array-something-specific )} { @content; }
//
// Results In:
// &:nth-child(6),
// &:nth-child(10) {
// @content;
// }
//
// Example can be found in _grid.scss
@function nth-child-add( $item ) {
@return '&:nth-child( ' + $item + ' )';
}
@function nth-children( $array ) {
$x: '';
@each $i in $array {
@if $x != '' {
$x: append( $x, ',' + nth-child-add( $i ) );
}
@else {
$x: append( $x, nth-child-add( $i ) );
}
}
@return $x;
}
// Outline Style Mixin
//
// This allows you to create an outline on fonts, with a fallback for FF
//
// USAGE:
// @include outline( $text-fill-color, $stroke-width, $color );
// -------------------------------------------------------
@mixin outline( $fill-color, $stroke-width, $stroke-color ) {
-webkit-text-fill-color: $fill-color;
-webkit-text-stroke-width: $stroke-width;
-webkit-text-stroke-color: $stroke-color;
}
// Slideshow or other horizontal layout Mixin
//
// This allows you to put inline items side-by-side with calculated widths
//
// USAGE:
// @include horizontal-slide( $someNumberVariable );
// @include horizontal-slide( 6 );
// -------------------------------------------------------
@mixin horizontal-slide( $itemCount ) {
float: left;
height: 100%;
margin-bottom: 0;
width: calc(100%/#{$itemCount});
}
// Text-shadow function for fancy underline mixin below
//
// Applies a string of text-shadows to create "breaks" between
// text and background-image when using mixin
//
// USAGE: underline-text-shadow( $size-of-shadow-around-text, $color-of-background-for-site )
// -------------------------------------------------------
@function underline-text-shadow( $shadow-size, $shadow-color, $selectshadow: false ) {
@if ( $selectshadow == true ) {
$shadowvalue:
$shadow-size 0 $shadow-color,
-$shadow-size 0 $shadow-color,
0 $shadow-size $shadow-color,
0 ( -$shadow-size ) $shadow-color;
@return $shadowvalue;
} @else {
$shadowvalue:
$shadow-size 0 $shadow-color,
-$shadow-size 0 $shadow-color,
0 $shadow-size $shadow-color,
0 ( -$shadow-size ) $shadow-color,
$shadow-size * 2 0 $shadow-color,
( -$shadow-size * 2 ) 0 $shadow-color,
$shadow-size * 3 0 $shadow-color,
( -$shadow-size * 3 ) 0 $shadow-color,
$shadow-size * 4 0 $shadow-color,
( -$shadow-size * 4 ) 0 $shadow-color,
$shadow-size * 5 0 $shadow-color,
( -$shadow-size * 5 ) 0 $shadow-color;
@return $shadowvalue;
}
}
// Fancy Underline Mixin
//
// Better underlines similar to Medium.com
//
// USAGE:
// @include fancy-underline();
//
// USAGE WITH OPTIONS:
// @include fancy-underline(
// $site-background-color: palette( grey, xxlight ),
// $color: palette( grey, xdark ),
// $offset: 0.15rem,
// $underline-size: 0.0625rem 0.0625rem,
// $underline-position: 1.05rem,
// $text-shadow: underline-text-shadow( 0.03rem, $site-background-color )
// );
// --------------------------------------------------------
@mixin fancy-underline(
$site-background-color: palette( white ),
$color: palette( black ),
$offset: 0.15rem,
$underline-size: 0.125rem 0.125rem,
$underline-position: 1.05rem,
$text-shadow: underline-text-shadow( 0.03rem, $site-background-color )
) {
color: $color;
background-image: linear-gradient( to bottom, rgba( $site-background-color, 0 ) 50%, $color 50% );
background-repeat: repeat-x;
background-size: $underline-size;
background-position: 0 $underline-position; // fallback
background-position: 0 calc( 43% + 0.44em + #{$offset} ); // magic numbers
text-shadow: $text-shadow;
}
// Firefox Only
// The firefox-only mixin specifies styles for Firefox browser alone
//
// USAGE:
// @include firefox-only{ @content; };
// -------------------------------------------------------
@mixin firefox-only {
@at-root {
@-moz-document url-prefix() {
& {
@content;
}
}
}
}
// IE and Edge
// The mixin specifies styles for both IE and Edge browsers alone
//
// USAGE:
// @include ie-and-edge{ @content; };
// -------------------------------------------------------
@mixin ie-and-edge() {
.ie & {
@content;
}
@supports ( -ms-accelerator:true ) {
@content;
}
}
// Optimize Image Mixin
// This mixin specifies an algorithm to scale images.
// For more information on the image-rendering property, see: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
//
// USAGE:
// @include optimize-image(-webkit-optimize-contrast);
// @include optimize-image(pixelated);
// --------------------------------------------------------
@mixin optimize-image( $render-type ) {
image-rendering: $render-type;
}
// ============================================================================
// System - "Set it and forget it!"
// ============================================================================
// Fonts
// -------------------------------------------------------
$type-base: 1rem; // 16px
$type-base-px: 16px;
// Icon Sizes
// -------------------------------------------------------
$icon-size-xxxs: .5rem;
$icon-size-xxs: 1rem;
$icon-size-xs: 1.063rem;
$icon-size-s: 1.25rem;
$icon-size-m: 1.5rem;
$icon-size-l: 1.875rem;
$icon-size-xl: 2.5rem;
$icon-size-xxl: 3.125rem;
$icon-size-xxxl: 3.75rem;
$icon-size-xxxxl: 4.6rem;
$icon-size-xxxxxl: 5rem;
// Padding and Margin
// -------------------------------------------------------
$margin-center: 0 auto;
$margin-xxxs: 0.25rem;
$margin-xxs: 0.3125rem;
$margin-xs: 0.625rem;
$margin-s: 0.9375rem;
$margin-m: 1.25rem;
$margin-l: 1.875rem;
$margin-xl: 4.375rem;
$nmargin-m: -1.25rem;
$nmargin-l: -1.875rem;
// Z-index
// -------------------------------------------------------
$zUnder: -1;
$zLow: 1;
$zMiddle: 999;
$zHeader: 5999996;
$zOverlay: 5999997;
$zSearchlayer: 5999998;
$zMessage: 9999998;
$zTop: 9999999;
// Social Color Map
// -------------------------------------------------------
$social-button-colors : (
facebook : #3b5998,
pinterest : #C92228,
twitter : #00aced,
googleplus : #dd4b39,
youtube : #bb0000,
email : #333,
instagram : #517fa4,
tumblr : #35465c,
reddit : #ff4500,
whatsapp : #5cbe4a,
line : #00c300,
print : #999
);
$color-bg-alpha: rgba(black, 0.8);
$color-bg-alpha-dk: rgba(black, 0.9);
$color-bg-arrow: rgba(black, 0.6);
$color-bg-alpha-lt: rgba(black, 0.2);
// Grid
// -------------------------------------------------------
$total-columns: 24;
$gutter-width: 2%;
$mobile-outer-gutter: 0.938rem; // 15px
$tablet-outer-gutter: 2.5rem; // 40px
$site-max-width: $bp-desktop-max;
$site-max-width-inner: $site-max-width - ( $tablet-outer-gutter * 2 );
// Clearfix
// -------------------------------------------------------
.clearfix {
&::after {
content: " ";
display: table;
clear: both;
}
}
// Grid and Layout
// ------------------------------------------------------------
%grid-container {
padding-left: $mobile-outer-gutter;
padding-right: $mobile-outer-gutter;
@include breakpoint(tablet) {
padding-left: $tablet-outer-gutter;
padding-right: $tablet-outer-gutter;
}
}
// use for variable grid modules that have half left and right gutters on
// grid items to support even spacing without known positions of items in grid
%grid-container-plus {
padding-left: calc(#{$mobile-outer-gutter} - #{$gutter-width / 2});
padding-right: calc(#{$mobile-outer-gutter} - #{$gutter-width / 2});
@include breakpoint(tablet) {
padding-left: calc(#{$tablet-outer-gutter} - #{$gutter-width / 2});
padding-right: calc(#{$tablet-outer-gutter} - #{$gutter-width / 2});
}
}
%grid-container-tablet {
@include breakpoint(tablet) {
padding-left: $tablet-outer-gutter;
padding-right: $tablet-outer-gutter;
}
}
%max-width {
max-width: $site-max-width;
margin: 0 auto;
}
%max-width-container {
@extend %grid-container;
max-width: $site-max-width;
margin: 0 auto;
}
// The break-out-below-tablet placeholer allows an element to break out of a
// grid container on mobile viewport only to span the full width of the window.
// -------------------------------------------------------
%grid-break-out-below-tablet {
transform: translate( -$mobile-outer-gutter, 0 );
width: calc( 100% + ( #{$mobile-outer-gutter} * 2 ) );
@include respond-to( $breakpoint-tablet ) {
transform: none;
width: auto;
}
}
// The break-out-below-desktop placeholder allows an element to break out of a
// grid container on mobile and tablet viewports to span the full width of the window.
// This one is for ADVERTISEMENTS ONLY, because using transform breaks parallax units.
// -------------------------------------------------------
%ad-grid-break-out-below-desktop {
width: 100vw;
margin-left: -$mobile-outer-gutter;
@include respond-to( $breakpoint-tablet ) {
transform: translate( -$tablet-outer-gutter, 0 );
width: calc( 100% + ( #{$tablet-outer-gutter} * 2 ) );
margin-left: inherit;
}
@include respond-to( $breakpoint-desktop ) {
transform: none;
width: auto;
}
}
// The break-out-below-desktop placeholder allows an element to break out of a
// grid container on mobile and tablet viewports to span the full width of the window.
// -------------------------------------------------------
%grid-break-out-below-desktop {
@extend %grid-break-out-below-tablet;
@include respond-to( $breakpoint-tablet ) {
transform: translate( -$tablet-outer-gutter, 0 );
width: calc( 100% + ( #{$tablet-outer-gutter} * 2 ) );
}
@include respond-to( $breakpoint-desktop ) {
transform: none;
width: auto;
}
}
// The grid-break-out placeholder allows an element to break out of a
// grid container on ALL viewports to span the full width of the window.
// -------------------------------------------------------
%grid-break-out {
transform: translate( -$mobile-outer-gutter, 0 );
width: calc( 100% + ( #{$mobile-outer-gutter} * 2 ) );
clear: both;
@include respond-to( $breakpoint-tablet ) {
transform: none;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
}
// Mobile Ads Grid Breakout
// Different from other breakouts to allow parallax ads
// -------------------------------------------------------
%grid-breakout-mobile-ads {
clear: both;
width: 100vw; // size the breakers as 100% of the viewport
margin-left: -$margin-s; // negative margin to break out
@include respond-to( $breakpoint-tablet ) {
// to give back correct margins for tablet and up
// instead of adjusting all ad classes
margin: inherit;
}
}
// Aspect Ratios
// Below are a list of placeholders and class names you
// can use in your project to force a container to maintain
// a specific aspect ratio.
// NOTE: These should be used on the container of a media
// element like an ![]()
or . Not on the element
// itself.
// -------------------------------------------------------
$aspect-ratios: (
"8x1": ( 8, 1 ),
"5x1": ( 5, 1 ),
"8x10": ( 8, 10 ),
"16x9": ( 16, 9 ),
"3x1": ( 3, 1 ),
"1x1": ( 1, 1 ),
"6x4": ( 6, 4 ),
"2x1": ( 2, 1 ),
"4x6": ( 4, 6 ),
"4x3": ( 4, 3 ),
);
// Loop through aspect-ratios and create placeholders/classes
@each $crop, $ratio in $aspect-ratios {
// Add placeholder
%aspect-ratio-#{$crop} {
@include aspect-ratio( nth( $ratio, 1 ), nth( $ratio, 2 ) );
}
// Add class name
.aspect-ratio-#{$crop} {
@extend %aspect-ratio-#{$crop};
}
}
// Deprecated Placeholers
// DO NOT ADD MORE PLACEHOLDERS USING THIS FORMAT
%aspect-ratio-16-9 {
@include aspect-ratio( 16, 9 );
}
%aspect-ratio-2-1 {
@include aspect-ratio( 2 );
}
%aspect-ratio-1-1 {
@include aspect-ratio();
}
// Transitions & Animations
// -------------------------------------------------------
%trans-slow {
@include transition(.45s, all);
}
%trans-color {
@include transition( color, .3s );
}
%trans-standard-bg {
@include transition(.3s, background-color);
}
%trans-fade-in-from-none {
// Fades an element in from a display:none -like state
// with no layout to a state that takes up layout.
@include transition( opacity );
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
&.active {
width: auto;
height: auto;
overflow: inherit;
opacity: 1;
}
}
// General Placeholders
// -------------------------------------------------------
%pointer {
cursor: pointer;
}
%nobullet {
list-style-type: none;
}
%detruncate {
white-space: inherit;
overflow: inherit;
text-overflow: inherit;
}
// Centers elements vertically - Parent container needs display:table
// Shouldnt the parent then be included in this as a mixin? seems pointless to have a half working placeholder
%vertical-centering {
display: table-cell;
vertical-align: middle;
}
// More than Normalize
// ------------------------------------------------------------
.link {
text-decoration: none;
cursor: pointer;
}
.link-button {
outline: none;
border: none;
}
.icon {
line-height: inherit;
}
body {
position: relative;
font-kerning: normal;
}
img {
max-width: 100%;
}
ul {
list-style-position: inside;
list-style-type: disc;
}
ol {
list-style-position: outside;
list-style-type: decimal;
}
strong, b {
font-weight: 600;
}
em, i, q {
font-style: italic;
}
// Animation Placeholders
// -------------------------------------------------------
%accelerated {
backface-visibility: hidden;
perspective: 1000;
}
%hue-rotator {
animation: hue-rotator 1.5s infinite alternate;
}
%pulse {
animation-name: pulse;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
%color-transition {
transition: color 0.3s ease-in-out;
}
// ============================================================================
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
// ============================================================================
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/**
* Enforce border-box
*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0;
}
h2 {
margin: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
// ============================================================================
// Variables
// ============================================================================
// Colors
// -------------------------------------------------------
$color-base-grey: #CDCDCD;
// Color Palettes
// -------------------------------------------------------
$palettes: (
black: (
base: #000000
),
white: (
base: #FFFFFF
),
grey: (
base: $color-base-grey,
xxxlight: lighten($color-base-grey,24%),
xxlight: lighten($color-base-grey, 18%),
xlight: lighten($color-base-grey, 15%),
light: lighten($color-base-grey, 12%),
medium: darken($color-base-grey, 18%),
dark: darken($color-base-grey, 32%),
xdark: darken($color-base-grey, 40%),
xxdark: darken($color-base-grey, 55%),
xxxdark: darken($color-base-grey, 63%),
),
yellow: (
base: #F6F489
)
);
// Headlines
// -------------------------------------------------------
$color-text-headline: palette( grey, xxxdark );
$letter-spacing-headline: -0.02em;
// Borders
// -------------------------------------------------------
// Thicknesses
$border-thickness-thin: 0.0625rem;
$border-thickness-thick: 0.125rem;
// Dotted
$border-dotted-neutral: $border-thickness-thin dotted palette( grey, medium );
$border-dotted-dark: $border-thickness-thin dotted palette( grey, xdark );
$border-dotted-darkest: $border-thickness-thin dotted palette(black);
// Solid
$border-solid-light: $border-thickness-thin solid palette( grey, light );
$border-solid-neutral: $border-thickness-thin solid palette( grey, dark );
// Vertical Rhythm
// -------------------------------------------------------
$vertical-rhythm-outer: $margin-l;
$vertical-rhythm-inner: $margin-m;
// Layout Variables
// -------------------------------------------------------
// Standard Article Variables
$standard-body-cols: 16;
$standard-rail-cols: 8;
$standard-gutter: relative-gutter( $standard-body-cols );
// Listicle Article Variables
$listicle-body-cols: 16;
$listicle-rail-cols: 8;
// Marquee
// -------------------------------------------------------
// SVG Width & Desktop Height
$height-marquee-logo-desktop: 6.8125rem;
$width-marquee-logo-svg: 100%;
// Logo Widths Per Breakpoint
$width-marquee-logo-mobile: 65%;
$width-marquee-logo-mobile-w: 50%;
$width-marquee-logo-tablet: 50%;
$width-marquee-logo-desktop: 31.25rem;
// Nav
// -------------------------------------------------------
$color-bg-nav: (
color: palette( grey, xxxdark )
);
$height-nav: 3.375rem;
$width-nav-logo: 7.5rem;
$height-nav-logo: 1.75rem;
$icon-size-nav: $icon-size-m;
$margin-nav-subscribe: 2rem;
$margin-nav-social-button: 2rem;
// Swipeable Nav
$color-nav-slide-gradient-start: rgba( map-get($color-bg-nav, color), .85 );
$color-nav-slide-gradient-end: rgba( map-get($color-bg-nav, color), 0);
// Sponsor Nav
$color-nav-sponsor-label-svg-logo: palette( black );
$color-nav-sponsor-svg-logo: inherit;
// Side panel
// -------------------------------------------------------
$color-bg-sidepanel: (
color: palette( black )
);
$color-bg-sidepanel-submenu: (
color: palette( grey, xxxdark )
);
$color-icon-sidepanel: palette( white );
$icon-size-sidepanel: $icon-size-m;
// Top Pathing
// -------------------------------------------------------
$simple-item-index-width: 1.5625rem;
$simple-item-index-margin-right: $margin-xs;
$top-pathing-item-wrap-margin-right: $margin-xs;
// Search overlay
// -------------------------------------------------------
$color-bg-search-overlay: (
color: palette( black )
);
// Feed Pages
// -------------------------------------------------------
// Full Item List
// Margin Bottom For Image In First Story On Feed That Is Next To Ad
$margin-bottom-ad-full-item-image: $margin-l;
// Margin Bottom For Metadata In First Story On Feed That Is Next To Ad
$margin-bottom-ad-full-item-metadata: $margin-xxs;
// space between parent link and publish date
$margin-full-item-metadata-spacing: 0 $margin-l 0 0;
// full item border - displays tablet and up on feed items
@mixin full-item-border() {
border-bottom: $border-dotted-dark;
}
// Curated Breaker
// Sets Margin Bottom For Curated Item Images
$color-bg-curated-breaker-header: transparent;
// Collection Breaker
$color-bg-collection-breaker-header: transparent;
$transform-collection-breaker-item-title: translate( 0, -$margin-s );
// Newsletter Breaker
$color-bg-newsletter-outer: transparent;
$color-bg-newsletter-inner: transparent;
$border-newsletter: 0;
$margin-newsletter-title-dek: 0 0 $margin-l;
// List Header
// Sets Margin Bottom For Small Items From Mobile to Tablet
$margin-bottom-list-header-small-item-image: $margin-xxs;
// Grid List Feed
$gradient-grid-list-feed: (rgba(255, 255, 255, 0), palette( black ));
// Footer
// -------------------------------------------------------
$color-bg-footer: (
color: palette( black )
);
$width-footer-logo: 11.875rem;
$height-footer-logo: 2.1875rem;
$position-top-footer-social-menu: $height-footer-logo + $margin-l;
// Social Buttons
// -------------------------------------------------------
// Standard Article Styled Properties
$icon-size-social-button: inherit;
$color-social-default-icon: palette( white );
// Longform Article Styled Properties
$border-social-button-transparent: $border-thickness-thin solid palette( grey, light );
$color-bg-social-buttons: transparent;
// Embed Pullquote Social Button
$width-embed-pullquote-social-button: 2.5rem;
$height-embed-pullquote-social-button: $width-embed-pullquote-social-button;
$margin-embed-pullquote-social-button: $margin-xxs;
// Sticky Social Menu Bar Properties
// Revealed once primary social buttons scroll out of view (mobile to tablet)
$width-social-menu-button: 2.5rem;
$height-social-menu-button: 2.5rem;
$margin-social-menu-button: 1%;
$padding-sticky-social-menu: $margin-xxs;
$margin-social-menu-button-label: $margin-xxs;
// Variable For Use With Arrow Mixin
$color-bg-full-item-social: palette( grey, xlight );
// Opinion Label
// -------------------------------------------------------
$color-bg-opinion-label-bar: palette( grey, light );
// Content Info
// -------------------------------------------------------
// Author Image
$size-image-content-info-author: 2.5rem;
$margin-content-info-author-image: $margin-xs;
// Social Buttons
// Width Height Margin Used For Social Buttons Within:
// _slide-media.scss & _content-info.scss Variations
$width-content-info-social-button: 2.5rem;
$height-content-info-social-button: $width-content-info-social-button;
$margin-content-info-social-button: $margin-xxs;
// Right Padding When Aggregate Count Is Visible
$padding-right-aggregate-count-show: $margin-xs;
// Bottom Margin for Longform Header
$margin-bottom-longform-header: $margin-m;
// Embeds
// -------------------------------------------------------
// Instagram
$border-instagram-embed: $border-solid-light;
// Ratings
$color-embed-rating-icon: palette( yellow );
// Youtube PLaylist
$youtube-playlist-thumbnail-background: palette( grey, dark );
$youtube-playlist-thumbnails-margin-top: $margin-xxs;
$youtube-playlist-arrow-button-width: 5%;
// Lazy Element Background Color
// -------------------------------------------------------
$color-bg-lazy: palette( grey, light );
// Ads
// -------------------------------------------------------
// Background Color
$color-bg-ad: palette( grey, xlight );
// Standard Variables
// Should Change Only If Required On A Site Level
// -------------------------------------------------------
// Asset Path
$assetPath: "/assets/";
// Side Panel
$width-sidepanel: 17rem;
$width-sidepanel-submenu: 13rem;
// Grid item
$grid-simple-item-height-tablet: 25.5rem;
$grid-simple-item-height-desktop: 29.125rem;
$grid-simple-vertical-ad-height-desktop: $grid-simple-item-height-desktop;
// Gallery Slideshow
// This is the maximum number of slides that will fit in the
// slide container. This is mostly used to calculate the widths
// of each slide and the container, but the layout WILL BREAK
// if there are more than this many slides in a slideshow.
$max-slide-count: 1000;
// Flyout Height For Mask, Flyout & Next Button
$height-gallery-flyout: 5.3125rem;
// Z-Indexes To Use Throughout The Slideshow
$slideshow-base-z: $zMiddle;
$slideshow-lede-z: $slideshow-base-z + 30;
// Quizzes
$border-dotted-transparent: $border-thickness-thin dotted transparent;
$border-thick-brand: 0.375rem solid palette( black );
$quiz-border: 0.5rem solid palette( grey, xxxlight );
$color-valid: palette( white );
$color-error: palette( yellow );
$quiz-enhanced-answer-background: rgba(58, 58, 58, 0.8);
$quiz-background: (
color: palette( black )
);
$gallery-button-background: (
color: palette( black )
);
// Image Copyright
$image-copyright-credit-delimiter: " ";
// Embedded Gallery Module
$thumbnail-arrow-width: $margin-m;
$thumbnail-image-margin-right: $margin-xs;
$embedded-gallery-button-background: palette( black );
// Location Choice
$width-location-choice-icon: 1.2rem;
$width-location-choice-icon-mobile: 1rem;
// CLICKABLE IMAGE CTA
// --------------------------------------------------------
$color-bg-clickable-image-button: palette( white );
$color-bg-hover-clickable-image-button: palette( grey );
// Gradient Body Fade
$gradient-body-fade: ( rgba( palette( white ), 0 ), rgba( palette( white ), 1 ) );
// Font Stacks
// @@ Note: font-size is pixel value that gets converted into rems through the mixin @@
// @@ Note: line-height value should be a multiplier @@
// -------------------------------------------------------
$font-sans: (
stack: 'Helvetica, Arial, Sans-serif',
16: (
font-size: 16,
line-height: 1.2
),
27: (
font-size: 27,
line-height: 1.2
)
);
$font-serif: (
stack: 'Georgia, Times, Serif',
14: (
font-size: 14,
line-height: 1.5
)
);
// Common Font Styles
// NOTE: Reserved only for variation files that repeat type styles
// Body
// -------------------------------------------------------
%type-body-text {
@include type-style( $font-sans, 16 );
color: palette( black );
}
// Link Text
// -------------------------------------------------------
// main link style
%link-text-base {
transition: color 0.3s ease-in-out;
text-decoration: none;
@include respond-to( $breakpoint-desktop ) {
&:hover {
color: palette( grey, xxxlight );
}
}
}
// Game Embed Variables
$game-embed-height-desktop: 600px;
$game-embed-height-mobile: 450px;
// ============================================================================
// Variables - Elle Decor
// ============================================================================
// Site Asset Path
// -------------------------------------------------------
$siteAssetPath: "/sites/elledecor/assets/";
// Color Palettes
// -------------------------------------------------------
$palettes: (
black: (
base: #000000
),
white: (
base: #FFFFFF
),
grey: (
base: $color-base-grey,
xxxlight: lighten( $color-base-grey, 24% ),
xxlight: lighten( $color-base-grey, 17% ),
xlight: lighten( $color-base-grey, 15% ),
light: lighten( $color-base-grey, 12% ),
medlight: lighten( $color-base-grey, 9% ),
medmedium: darken( $color-base-grey, 2% ),
medium: darken( $color-base-grey, 18% ),
dark: darken( $color-base-grey, 32% ),
xdark: darken( $color-base-grey, 40% ),
xxdark: darken( $color-base-grey, 55% ),
xxxdark: darken( $color-base-grey, 63% ),
),
blue: (
base: #3777BC
)
);
// Borders
// -----------------------------------------------------
// Thickness
$border-thickness-thicker: 0.525rem;
$border-thickness-medium: 0.325rem;
// Border Styles
$border-solid-thin-light: $border-thickness-thin solid palette( grey, medlight );
$border-solid-thin-dark: $border-thickness-thin solid palette( black );
$border-solid-neutral: $border-thickness-thin solid palette( grey, medmedium );
$border-solid-thick-neutral: $border-thickness-medium solid palette( grey, dark );
$border-solid-medium-dark: $border-thickness-medium solid palette( black );
$border-solid-thick-dark: $border-thickness-thicker solid palette( black );
$border-solid-dark: $border-thickness-thin solid palette( black );
$border-solid-blue: 0.225rem solid palette( blue );
// Border Applicatons
$border-custom-promo: $border-thickness-thicker solid palette( black );
$border-content-info-byline: $border-solid-thin-light;
// Lazy Element Background Color
// -------------------------------------------------------
$color-bg-lazy: palette( grey, xlight );
// Marquee
// -------------------------------------------------------
$height-marquee-logo-desktop: auto;
// Nav
// -------------------------------------------------------
$color-bg-nav: (
color: palette( black )
);
// Sponsor Nav
$color-nav-sponsor-label-svg-logo: palette( black );
$color-nav-sponsor-svg-logo: palette( black );
// Top Pathing
// -------------------------------------------------------
$simple-item-index-width: $margin-l;
// Search Overlay
// -------------------------------------------------------
$color-bg-search-overlay: (
color: rgba( 0, 0, 0, 0.9 )
);
// Feed Pages
// -------------------------------------------------------
$margin-bottom-ad-full-item-image: $margin-s;
$margin-full-item-metadata-spacing: 0 $margin-s 0 0;
// used to set styles for landing feed items - initially: padding/margin
%full-item-padding {
padding-top: $margin-s;
margin-bottom: $margin-m;
}
// full item border - displays tablet and up on feed items
@mixin full-item-border() {
border-top: $border-solid-neutral;
&:first-of-type {
border-top: 0;
}
}
// Collection Breaker
$color-bg-collection-breaker-header: transparent;
$transform-collection-breaker-item-title: translate( 0, -$margin-l );
// Newsletter Breaker
$color-bg-newsletter-outer: palette( black );
// List Header
$margin-bottom-list-header-small-item-image: $margin-s;
// Footer
// -------------------------------------------------------
$position-top-footer-social-menu: 3.125rem;
$height-footer-logo: rem(45px);
// Social Buttons
// -------------------------------------------------------
$icon-size-social-button: $icon-size-xs;
$icon-size-full-item-social-button: $icon-size-xxs;
// Embed Pullquote Social Button
$width-embed-pullquote-social-button: 2rem;
$height-embed-pullquote-social-button: $width-embed-pullquote-social-button;
$margin-embed-pullquote-social-button: 0;
// Embeds
// -------------------------------------------------------
// Related Content
$border-related-content: $border-thickness-thin dotted palette( grey, medlight );
// Ratings
$color-embed-rating-icon: palette( black );
// Youtube Playlist
$youtube-playlist-arrow-button-bg: palette( blue );
$youtube-playlist-arrow-button-bg-hover: transparentize( palette( blue ), 0.25 );
$youtube-playlist-arrow-color: palette( white );
// Longform
// -------------------------------------------------------
$background-longform-image-credit: transparentize( palette( black ), 0.5 );
// Image Copyright
$image-copyright-credit-delimiter: " / ";
// Embedded Gallery Module
$thumbnail-arrow-width: rem( 28px );
$thumbnail-image-margin-right: $margin-xxs;
// Font Stacks
// @@ Note: font-size is pixel value that gets converted into rems through the mixin @@
// @@ Note: line-height value should be a multiplier @@
// -------------------------------------------------------
$font-central: (
stack: '"central", Helvetica, Arial, Sans-serif',
10: (
font-size: 10,
line-height: 1
),
11: (
font-size: 11,
line-height: 1
),
12: (
font-size: 12,
line-height: 1
),
13: (
font-size: 13,
line-height: 1
),
14: (
font-size: 14,
line-height: 1.2
),
15: (
font-size: 15,
line-height: 1.3
),
16: (
font-size: 16,
line-height: 1.2
),
18: (
font-size: 18,
line-height: 1.2
),
19: (
font-size: 19,
line-height: 1.2
),
20: (
font-size: 20,
line-height: 1.2
),
21: (
font-size: 21,
line-height: 1.2
),
22: (
font-size: 22,
line-height: 1.2
),
24: (
font-size: 24,
line-height: 1.1
),
26: (
font-size: 26,
line-height: 1.1
),
27: (
font-size: 27,
line-height: 1.1
),
28: (
font-size: 28,
line-height: 1.1
),
31: (
font-size: 31,
line-height: 1.1
),
32: (
font-size: 32,
line-height: 1.1
),
35: (
font-size: 35,
line-height: 1.1
),
37: (
font-size: 37,
line-height: 1.1
),
39: (
font-size: 39,
line-height: 1.1
),
40: (
font-size: 40,
line-height: 1
),
44: (
font-size: 44,
line-height: 1
),
46: (
font-size: 46,
line-height: 1
),
48: (
font-size: 48,
line-height: 1
),
52: (
font-size: 52,
line-height: 1
),
56: (
font-size: 56,
line-height: 1
),
59: (
font-size: 59,
line-height: 1
),
72: (
font-size: 72,
line-height: 1
),
76: (
font-size: 76,
line-height: 1
)
);
$font-sabon: (
stack: '"sabon", Georgia, Times, Serif',
12: (
font-size: 12,
line-height: 1
),
14: (
font-size: 14,
line-height: 1
),
15: (
font-size: 15,
line-height: 1
),
16: (
font-size: 16,
line-height: 1.4
),
17: (
font-size: 17,
line-height: 1.2
),
18: (
font-size: 18,
line-height: 1.3
),
20: (
font-size: 20,
line-height: 1.3
),
21: (
font-size: 21,
line-height: 1.3
),
23: (
font-size: 23,
line-height: 1.3
),
24: (
font-size: 24,
line-height: 1.3
),
27: (
font-size: 27,
line-height: 1.3
),
31: (
font-size: 31,
line-height: 1.2
),
35: (
font-size: 35,
line-height: 1.2
),
37: (
font-size: 37,
line-height: 1.2
),
40: (
font-size: 40,
line-height: 1.2
),
44: (
font-size: 44,
line-height: 1.2
),
46: (
font-size: 46,
line-height: 1
),
50: (
font-size: 50,
line-height: 1
),
70: (
font-size: 70,
line-height: 1
),
80: (
font-size: 80,
line-height: 1
),
85: (
font-size: 85,
line-height: 1.2
),
88: (
font-size: 88,
line-height: 1
),
90: (
font-size: 90,
line-height: 1
),
100: (
font-size: 100,
line-height: 1
)
);
// Common Font Styles
// NOTE: Reserved only for variation files that repeat type styles
// CLICKABLE IMAGE CTA
// --------------------------------------------------------
$color-bg-clickable-image-button: palette( black );
$color-bg-hover-clickable-image-button: palette( blue );
// Body
// -------------------------------------------------------
%site-background {
background: palette( white );
}
%type-body-text {
@include type-style( $font-sabon, 18 );
color: palette( black );
line-height: 1.6;
& ::selection { //this is for the color of highlighted text
background-color: palette( black );
color: palette( white );
}
}
// Headlines
// -------------------------------------------------------
%type-headline {
$alt-size-map: (
$breakpoint-tablet: 28,
$breakpoint-desktop: 39
);
@include type-style( $font-central, 22, $alt-size-map );
font-weight: bold;
text-transform: uppercase;
letter-spacing: $letter-spacing-headline;
}
// Link Text Placeholder
// -------------------------------------------------------
// main link style
%link-text-base {
text-decoration: none;
transition: color 0.3s ease-in-out;
@include respond-to( $breakpoint-desktop ) {
&:hover {
color: palette( blue );
}
}
& u {
text-decoration: none;
}
}
// used in body links
%link-text-body {
text-decoration: none;
transition: color 0.3s ease-in-out;
color: palette( blue );
@include respond-to( $breakpoint-desktop ) {
&:hover {
color: palette( grey, dark );
}
}
& u {
text-decoration: none;
}
}
%link-text-navigation {
text-decoration: none;
transition: color 0.3s ease-in-out;
@include respond-to( $breakpoint-desktop ) {
text-decoration: none;
&:hover {
color: palette( grey, medium );
}
}
}
// Content Info
// -------------------------------------------------------
%type-content-info {
@include type-style( $font-sabon, 16 );
color: palette( black );
font-style: italic;
}
// Publish Date
// -------------------------------------------------------
%type-list-feed-item-metadata {
@include type-style( $font-central, 12 );
color: palette( grey, medium );
text-transform: uppercase;
}
// Global Byline Variations
// -------------------------------------------------------
%byline-global-variation {
@extend %type-body-text;
}
%byline-name-global-variation {
color: palette( grey, dark );
& a {
@extend %link-text-base;
}
}
// Item Image Hover
// -------------------------------------------------------
%item-image-hover {
@include respond-to( $breakpoint-desktop ) {
transition: opacity .3s;
&:after {
content: "";
position: absolute;
top: auto;
left: auto;
right: 0;
bottom: 0;
width: 0;
height: $margin-xxs;
background: palette( blue );
opacity: 1;
transition: width 0.3s;
}
&:hover:after {
width: 100%;
left: 0;
}
&:hover {
opacity: 0.8;
}
}
}
@if (type-of(#000000) == color) {
#palettes-stylejam-black-stylejam-base {
background-color: #000000;
button:before {
content: quote(#000000);
}
}
}
@if (type-of(#FFFFFF) == color) {
#palettes-stylejam-white-stylejam-base {
background-color: #FFFFFF;
button:before {
content: quote(#FFFFFF);
}
}
}
@if (type-of($color-base-grey) == color) {
#palettes-stylejam-grey-stylejam-base {
background-color: $color-base-grey;
button:before {
content: quote($color-base-grey);
}
}
}
@if (type-of(lighten( $color-base-grey, 24% )) == color) {
#palettes-stylejam-grey-stylejam-xxxlight {
background-color: lighten( $color-base-grey, 24% );
button:before {
content: quote(lighten( $color-base-grey, 24% ));
}
}
}
@if (type-of(lighten( $color-base-grey, 17% )) == color) {
#palettes-stylejam-grey-stylejam-xxlight {
background-color: lighten( $color-base-grey, 17% );
button:before {
content: quote(lighten( $color-base-grey, 17% ));
}
}
}
@if (type-of(lighten( $color-base-grey, 15% )) == color) {
#palettes-stylejam-grey-stylejam-xlight {
background-color: lighten( $color-base-grey, 15% );
button:before {
content: quote(lighten( $color-base-grey, 15% ));
}
}
}
@if (type-of(lighten( $color-base-grey, 12% )) == color) {
#palettes-stylejam-grey-stylejam-light {
background-color: lighten( $color-base-grey, 12% );
button:before {
content: quote(lighten( $color-base-grey, 12% ));
}
}
}
@if (type-of(lighten( $color-base-grey, 9% )) == color) {
#palettes-stylejam-grey-stylejam-medlight {
background-color: lighten( $color-base-grey, 9% );
button:before {
content: quote(lighten( $color-base-grey, 9% ));
}
}
}
@if (type-of(darken( $color-base-grey, 2% )) == color) {
#palettes-stylejam-grey-stylejam-medmedium {
background-color: darken( $color-base-grey, 2% );
button:before {
content: quote(darken( $color-base-grey, 2% ));
}
}
}
@if (type-of(darken( $color-base-grey, 18% )) == color) {
#palettes-stylejam-grey-stylejam-medium {
background-color: darken( $color-base-grey, 18% );
button:before {
content: quote(darken( $color-base-grey, 18% ));
}
}
}
@if (type-of(darken( $color-base-grey, 32% )) == color) {
#palettes-stylejam-grey-stylejam-dark {
background-color: darken( $color-base-grey, 32% );
button:before {
content: quote(darken( $color-base-grey, 32% ));
}
}
}
@if (type-of(darken( $color-base-grey, 40% )) == color) {
#palettes-stylejam-grey-stylejam-xdark {
background-color: darken( $color-base-grey, 40% );
button:before {
content: quote(darken( $color-base-grey, 40% ));
}
}
}
@if (type-of(darken( $color-base-grey, 55% )) == color) {
#palettes-stylejam-grey-stylejam-xxdark {
background-color: darken( $color-base-grey, 55% );
button:before {
content: quote(darken( $color-base-grey, 55% ));
}
}
}
@if (type-of(darken( $color-base-grey, 63% )) == color) {
#palettes-stylejam-grey-stylejam-xxxdark {
background-color: darken( $color-base-grey, 63% );
button:before {
content: quote(darken( $color-base-grey, 63% ));
}
}
}
@if (type-of(#3777BC) == color) {
#palettes-stylejam-blue-stylejam-base {
background-color: #3777BC;
button:before {
content: quote(#3777BC);
}
}
}
@if (type-of(palette( black )) == color) {
#color-bg-nav-stylejam-color {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of(rgba( 0, 0, 0, 0.9 )) == color) {
#color-bg-search-overlay-stylejam-color {
background-color: rgba( 0, 0, 0, 0.9 );
button:before {
content: quote(rgba( 0, 0, 0, 0.9 ));
}
}
}
@if (type-of('"central", Helvetica, Arial, Sans-serif') == color) {
#font-central-stylejam-stack {
background-color: '"central", Helvetica, Arial, Sans-serif';
button:before {
content: quote('"central", Helvetica, Arial, Sans-serif');
}
}
}
@if (type-of(10) == color) {
#font-central-stylejam-10-stylejam-font-size {
background-color: 10;
button:before {
content: quote(10);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-10-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(11) == color) {
#font-central-stylejam-11-stylejam-font-size {
background-color: 11;
button:before {
content: quote(11);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-11-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(12) == color) {
#font-central-stylejam-12-stylejam-font-size {
background-color: 12;
button:before {
content: quote(12);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-12-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(13) == color) {
#font-central-stylejam-13-stylejam-font-size {
background-color: 13;
button:before {
content: quote(13);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-13-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(14) == color) {
#font-central-stylejam-14-stylejam-font-size {
background-color: 14;
button:before {
content: quote(14);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-14-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(15) == color) {
#font-central-stylejam-15-stylejam-font-size {
background-color: 15;
button:before {
content: quote(15);
}
}
}
@if (type-of(1.3) == color) {
#font-central-stylejam-15-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(16) == color) {
#font-central-stylejam-16-stylejam-font-size {
background-color: 16;
button:before {
content: quote(16);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-16-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(18) == color) {
#font-central-stylejam-18-stylejam-font-size {
background-color: 18;
button:before {
content: quote(18);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-18-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(19) == color) {
#font-central-stylejam-19-stylejam-font-size {
background-color: 19;
button:before {
content: quote(19);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-19-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(20) == color) {
#font-central-stylejam-20-stylejam-font-size {
background-color: 20;
button:before {
content: quote(20);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-20-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(21) == color) {
#font-central-stylejam-21-stylejam-font-size {
background-color: 21;
button:before {
content: quote(21);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-21-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(22) == color) {
#font-central-stylejam-22-stylejam-font-size {
background-color: 22;
button:before {
content: quote(22);
}
}
}
@if (type-of(1.2) == color) {
#font-central-stylejam-22-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(24) == color) {
#font-central-stylejam-24-stylejam-font-size {
background-color: 24;
button:before {
content: quote(24);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-24-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(26) == color) {
#font-central-stylejam-26-stylejam-font-size {
background-color: 26;
button:before {
content: quote(26);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-26-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(27) == color) {
#font-central-stylejam-27-stylejam-font-size {
background-color: 27;
button:before {
content: quote(27);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-27-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(28) == color) {
#font-central-stylejam-28-stylejam-font-size {
background-color: 28;
button:before {
content: quote(28);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-28-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(31) == color) {
#font-central-stylejam-31-stylejam-font-size {
background-color: 31;
button:before {
content: quote(31);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-31-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(32) == color) {
#font-central-stylejam-32-stylejam-font-size {
background-color: 32;
button:before {
content: quote(32);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-32-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(35) == color) {
#font-central-stylejam-35-stylejam-font-size {
background-color: 35;
button:before {
content: quote(35);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-35-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(37) == color) {
#font-central-stylejam-37-stylejam-font-size {
background-color: 37;
button:before {
content: quote(37);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-37-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(39) == color) {
#font-central-stylejam-39-stylejam-font-size {
background-color: 39;
button:before {
content: quote(39);
}
}
}
@if (type-of(1.1) == color) {
#font-central-stylejam-39-stylejam-line-height {
background-color: 1.1;
button:before {
content: quote(1.1);
}
}
}
@if (type-of(40) == color) {
#font-central-stylejam-40-stylejam-font-size {
background-color: 40;
button:before {
content: quote(40);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-40-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(44) == color) {
#font-central-stylejam-44-stylejam-font-size {
background-color: 44;
button:before {
content: quote(44);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-44-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(46) == color) {
#font-central-stylejam-46-stylejam-font-size {
background-color: 46;
button:before {
content: quote(46);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-46-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(48) == color) {
#font-central-stylejam-48-stylejam-font-size {
background-color: 48;
button:before {
content: quote(48);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-48-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(52) == color) {
#font-central-stylejam-52-stylejam-font-size {
background-color: 52;
button:before {
content: quote(52);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-52-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(56) == color) {
#font-central-stylejam-56-stylejam-font-size {
background-color: 56;
button:before {
content: quote(56);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-56-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(59) == color) {
#font-central-stylejam-59-stylejam-font-size {
background-color: 59;
button:before {
content: quote(59);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-59-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(72) == color) {
#font-central-stylejam-72-stylejam-font-size {
background-color: 72;
button:before {
content: quote(72);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-72-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(76) == color) {
#font-central-stylejam-76-stylejam-font-size {
background-color: 76;
button:before {
content: quote(76);
}
}
}
@if (type-of(1) == color) {
#font-central-stylejam-76-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of('"sabon", Georgia, Times, Serif') == color) {
#font-sabon-stylejam-stack {
background-color: '"sabon", Georgia, Times, Serif';
button:before {
content: quote('"sabon", Georgia, Times, Serif');
}
}
}
@if (type-of(12) == color) {
#font-sabon-stylejam-12-stylejam-font-size {
background-color: 12;
button:before {
content: quote(12);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-12-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(14) == color) {
#font-sabon-stylejam-14-stylejam-font-size {
background-color: 14;
button:before {
content: quote(14);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-14-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(15) == color) {
#font-sabon-stylejam-15-stylejam-font-size {
background-color: 15;
button:before {
content: quote(15);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-15-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(16) == color) {
#font-sabon-stylejam-16-stylejam-font-size {
background-color: 16;
button:before {
content: quote(16);
}
}
}
@if (type-of(1.4) == color) {
#font-sabon-stylejam-16-stylejam-line-height {
background-color: 1.4;
button:before {
content: quote(1.4);
}
}
}
@if (type-of(17) == color) {
#font-sabon-stylejam-17-stylejam-font-size {
background-color: 17;
button:before {
content: quote(17);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-17-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(18) == color) {
#font-sabon-stylejam-18-stylejam-font-size {
background-color: 18;
button:before {
content: quote(18);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-18-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(20) == color) {
#font-sabon-stylejam-20-stylejam-font-size {
background-color: 20;
button:before {
content: quote(20);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-20-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(21) == color) {
#font-sabon-stylejam-21-stylejam-font-size {
background-color: 21;
button:before {
content: quote(21);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-21-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(23) == color) {
#font-sabon-stylejam-23-stylejam-font-size {
background-color: 23;
button:before {
content: quote(23);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-23-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(24) == color) {
#font-sabon-stylejam-24-stylejam-font-size {
background-color: 24;
button:before {
content: quote(24);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-24-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(27) == color) {
#font-sabon-stylejam-27-stylejam-font-size {
background-color: 27;
button:before {
content: quote(27);
}
}
}
@if (type-of(1.3) == color) {
#font-sabon-stylejam-27-stylejam-line-height {
background-color: 1.3;
button:before {
content: quote(1.3);
}
}
}
@if (type-of(31) == color) {
#font-sabon-stylejam-31-stylejam-font-size {
background-color: 31;
button:before {
content: quote(31);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-31-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(35) == color) {
#font-sabon-stylejam-35-stylejam-font-size {
background-color: 35;
button:before {
content: quote(35);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-35-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(37) == color) {
#font-sabon-stylejam-37-stylejam-font-size {
background-color: 37;
button:before {
content: quote(37);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-37-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(40) == color) {
#font-sabon-stylejam-40-stylejam-font-size {
background-color: 40;
button:before {
content: quote(40);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-40-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(44) == color) {
#font-sabon-stylejam-44-stylejam-font-size {
background-color: 44;
button:before {
content: quote(44);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-44-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(46) == color) {
#font-sabon-stylejam-46-stylejam-font-size {
background-color: 46;
button:before {
content: quote(46);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-46-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(50) == color) {
#font-sabon-stylejam-50-stylejam-font-size {
background-color: 50;
button:before {
content: quote(50);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-50-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(70) == color) {
#font-sabon-stylejam-70-stylejam-font-size {
background-color: 70;
button:before {
content: quote(70);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-70-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(80) == color) {
#font-sabon-stylejam-80-stylejam-font-size {
background-color: 80;
button:before {
content: quote(80);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-80-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(85) == color) {
#font-sabon-stylejam-85-stylejam-font-size {
background-color: 85;
button:before {
content: quote(85);
}
}
}
@if (type-of(1.2) == color) {
#font-sabon-stylejam-85-stylejam-line-height {
background-color: 1.2;
button:before {
content: quote(1.2);
}
}
}
@if (type-of(88) == color) {
#font-sabon-stylejam-88-stylejam-font-size {
background-color: 88;
button:before {
content: quote(88);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-88-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(90) == color) {
#font-sabon-stylejam-90-stylejam-font-size {
background-color: 90;
button:before {
content: quote(90);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-90-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(100) == color) {
#font-sabon-stylejam-100-stylejam-font-size {
background-color: 100;
button:before {
content: quote(100);
}
}
}
@if (type-of(1) == color) {
#font-sabon-stylejam-100-stylejam-line-height {
background-color: 1;
button:before {
content: quote(1);
}
}
}
@if (type-of(28) == color) {
#alt-size-map-stylejam-breakpoint-tablet {
background-color: 28;
button:before {
content: quote(28);
}
}
}
@if (type-of(39) == color) {
#alt-size-map-stylejam-breakpoint-desktop {
background-color: 39;
button:before {
content: quote(39);
}
}
}
@if (type-of("/sites/elledecor/assets/") == color) {
#siteAssetPath {
background-color: "/sites/elledecor/assets/";
button:before {
content: quote("/sites/elledecor/assets/");
}
}
}
@if (type-of(0.525rem) == color) {
#border-thickness-thicker {
background-color: 0.525rem;
button:before {
content: quote(0.525rem);
}
}
}
@if (type-of(0.325rem) == color) {
#border-thickness-medium {
background-color: 0.325rem;
button:before {
content: quote(0.325rem);
}
}
}
@if (type-of($border-thickness-thin solid palette( grey, medlight )) == color) {
#border-solid-thin-light {
background-color: $border-thickness-thin solid palette( grey, medlight );
button:before {
content: quote($border-thickness-thin solid palette( grey, medlight ));
}
}
}
@if (type-of($border-thickness-thin solid palette( black )) == color) {
#border-solid-thin-dark {
background-color: $border-thickness-thin solid palette( black );
button:before {
content: quote($border-thickness-thin solid palette( black ));
}
}
}
@if (type-of($border-thickness-thin solid palette( grey, medmedium )) == color) {
#border-solid-neutral {
background-color: $border-thickness-thin solid palette( grey, medmedium );
button:before {
content: quote($border-thickness-thin solid palette( grey, medmedium ));
}
}
}
@if (type-of($border-thickness-medium solid palette( grey, dark )) == color) {
#border-solid-thick-neutral {
background-color: $border-thickness-medium solid palette( grey, dark );
button:before {
content: quote($border-thickness-medium solid palette( grey, dark ));
}
}
}
@if (type-of($border-thickness-medium solid palette( black )) == color) {
#border-solid-medium-dark {
background-color: $border-thickness-medium solid palette( black );
button:before {
content: quote($border-thickness-medium solid palette( black ));
}
}
}
@if (type-of($border-thickness-thicker solid palette( black )) == color) {
#border-solid-thick-dark {
background-color: $border-thickness-thicker solid palette( black );
button:before {
content: quote($border-thickness-thicker solid palette( black ));
}
}
}
@if (type-of($border-thickness-thin solid palette( black )) == color) {
#border-solid-dark {
background-color: $border-thickness-thin solid palette( black );
button:before {
content: quote($border-thickness-thin solid palette( black ));
}
}
}
@if (type-of(0.225rem solid palette( blue )) == color) {
#border-solid-blue {
background-color: 0.225rem solid palette( blue );
button:before {
content: quote(0.225rem solid palette( blue ));
}
}
}
@if (type-of($border-thickness-thicker solid palette( black )) == color) {
#border-custom-promo {
background-color: $border-thickness-thicker solid palette( black );
button:before {
content: quote($border-thickness-thicker solid palette( black ));
}
}
}
@if (type-of($border-solid-thin-light) == color) {
#border-content-info-byline {
background-color: $border-solid-thin-light;
button:before {
content: quote($border-solid-thin-light);
}
}
}
@if (type-of(palette( grey, xlight )) == color) {
#color-bg-lazy {
background-color: palette( grey, xlight );
button:before {
content: quote(palette( grey, xlight ));
}
}
}
@if (type-of(auto) == color) {
#height-marquee-logo-desktop {
background-color: auto;
button:before {
content: quote(auto);
}
}
}
@if (type-of(palette( black )) == color) {
#color-nav-sponsor-label-svg-logo {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of(palette( black )) == color) {
#color-nav-sponsor-svg-logo {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of($margin-l) == color) {
#simple-item-index-width {
background-color: $margin-l;
button:before {
content: quote($margin-l);
}
}
}
@if (type-of($margin-s) == color) {
#margin-bottom-ad-full-item-image {
background-color: $margin-s;
button:before {
content: quote($margin-s);
}
}
}
@if (type-of(0 $margin-s 0 0) == color) {
#margin-full-item-metadata-spacing {
background-color: 0 $margin-s 0 0;
button:before {
content: quote(0 $margin-s 0 0);
}
}
}
@if (type-of(transparent) == color) {
#color-bg-collection-breaker-header {
background-color: transparent;
button:before {
content: quote(transparent);
}
}
}
@if (type-of(translate( 0, -$margin-l )) == color) {
#transform-collection-breaker-item-title {
background-color: translate( 0, -$margin-l );
button:before {
content: quote(translate( 0, -$margin-l ));
}
}
}
@if (type-of(palette( black )) == color) {
#color-bg-newsletter-outer {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of($margin-s) == color) {
#margin-bottom-list-header-small-item-image {
background-color: $margin-s;
button:before {
content: quote($margin-s);
}
}
}
@if (type-of(3.125rem) == color) {
#position-top-footer-social-menu {
background-color: 3.125rem;
button:before {
content: quote(3.125rem);
}
}
}
@if (type-of(rem(45px)) == color) {
#height-footer-logo {
background-color: rem(45px);
button:before {
content: quote(rem(45px));
}
}
}
@if (type-of($icon-size-xs) == color) {
#icon-size-social-button {
background-color: $icon-size-xs;
button:before {
content: quote($icon-size-xs);
}
}
}
@if (type-of($icon-size-xxs) == color) {
#icon-size-full-item-social-button {
background-color: $icon-size-xxs;
button:before {
content: quote($icon-size-xxs);
}
}
}
@if (type-of(2rem) == color) {
#width-embed-pullquote-social-button {
background-color: 2rem;
button:before {
content: quote(2rem);
}
}
}
@if (type-of($width-embed-pullquote-social-button) == color) {
#height-embed-pullquote-social-button {
background-color: $width-embed-pullquote-social-button;
button:before {
content: quote($width-embed-pullquote-social-button);
}
}
}
@if (type-of(0) == color) {
#margin-embed-pullquote-social-button {
background-color: 0;
button:before {
content: quote(0);
}
}
}
@if (type-of($border-thickness-thin dotted palette( grey, medlight )) == color) {
#border-related-content {
background-color: $border-thickness-thin dotted palette( grey, medlight );
button:before {
content: quote($border-thickness-thin dotted palette( grey, medlight ));
}
}
}
@if (type-of(palette( black )) == color) {
#color-embed-rating-icon {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of(palette( blue )) == color) {
#youtube-playlist-arrow-button-bg {
background-color: palette( blue );
button:before {
content: quote(palette( blue ));
}
}
}
@if (type-of(transparentize( palette( blue ), 0.25 )) == color) {
#youtube-playlist-arrow-button-bg-hover {
background-color: transparentize( palette( blue ), 0.25 );
button:before {
content: quote(transparentize( palette( blue ), 0.25 ));
}
}
}
@if (type-of(palette( white )) == color) {
#youtube-playlist-arrow-color {
background-color: palette( white );
button:before {
content: quote(palette( white ));
}
}
}
@if (type-of(transparentize( palette( black ), 0.5 )) == color) {
#background-longform-image-credit {
background-color: transparentize( palette( black ), 0.5 );
button:before {
content: quote(transparentize( palette( black ), 0.5 ));
}
}
}
@if (type-of(" / ") == color) {
#image-copyright-credit-delimiter {
background-color: " / ";
button:before {
content: quote(" / ");
}
}
}
@if (type-of(rem( 28px )) == color) {
#thumbnail-arrow-width {
background-color: rem( 28px );
button:before {
content: quote(rem( 28px ));
}
}
}
@if (type-of($margin-xxs) == color) {
#thumbnail-image-margin-right {
background-color: $margin-xxs;
button:before {
content: quote($margin-xxs);
}
}
}
@if (type-of(palette( black )) == color) {
#color-bg-clickable-image-button {
background-color: palette( black );
button:before {
content: quote(palette( black ));
}
}
}
@if (type-of(palette( blue )) == color) {
#color-bg-hover-clickable-image-button {
background-color: palette( blue );
button:before {
content: quote(palette( blue ));
}
}
}
@function borderwidth($input) {
@each $part in $input {
@if type-of($part) == number {
@return true;
}
}
@return false;
}
@function bordercolor($input) {
@each $part in $input {
@if type-of($part) == color {
@return true;
}
}
@return false;
}
@if bordercolor( $border-thickness-thin dotted palette( grey, medlight )) and borderwidth( $border-thickness-thin dotted palette( grey, medlight )) {
#border-related-content {
border: $border-thickness-thin dotted palette( grey, medlight );
button:before {
content: quote( $border-thickness-thin dotted palette( grey, medlight ));
}
}
}
@if bordercolor( $border-thickness-thin solid palette( grey, medlight )) and borderwidth( $border-thickness-thin solid palette( grey, medlight )) {
#border-solid-thin-light {
border: $border-thickness-thin solid palette( grey, medlight );
button:before {
content: quote( $border-thickness-thin solid palette( grey, medlight ));
}
}
}
@if bordercolor( $border-thickness-thin solid palette( black )) and borderwidth( $border-thickness-thin solid palette( black )) {
#border-solid-thin-dark {
border: $border-thickness-thin solid palette( black );
button:before {
content: quote( $border-thickness-thin solid palette( black ));
}
}
}
@if bordercolor( $border-thickness-thin solid palette( grey, medmedium )) and borderwidth( $border-thickness-thin solid palette( grey, medmedium )) {
#border-solid-neutral {
border: $border-thickness-thin solid palette( grey, medmedium );
button:before {
content: quote( $border-thickness-thin solid palette( grey, medmedium ));
}
}
}
@if bordercolor( $border-thickness-medium solid palette( grey, dark )) and borderwidth( $border-thickness-medium solid palette( grey, dark )) {
#border-solid-thick-neutral {
border: $border-thickness-medium solid palette( grey, dark );
button:before {
content: quote( $border-thickness-medium solid palette( grey, dark ));
}
}
}
@if bordercolor( $border-thickness-medium solid palette( black )) and borderwidth( $border-thickness-medium solid palette( black )) {
#border-solid-medium-dark {
border: $border-thickness-medium solid palette( black );
button:before {
content: quote( $border-thickness-medium solid palette( black ));
}
}
}
@if bordercolor( $border-thickness-thicker solid palette( black )) and borderwidth( $border-thickness-thicker solid palette( black )) {
#border-solid-thick-dark {
border: $border-thickness-thicker solid palette( black );
button:before {
content: quote( $border-thickness-thicker solid palette( black ));
}
}
}
@if bordercolor( $border-thickness-thin solid palette( black )) and borderwidth( $border-thickness-thin solid palette( black )) {
#border-solid-dark {
border: $border-thickness-thin solid palette( black );
button:before {
content: quote( $border-thickness-thin solid palette( black ));
}
}
}
@if bordercolor( 0.225rem solid palette( blue )) and borderwidth( 0.225rem solid palette( blue )) {
#border-solid-blue {
border: 0.225rem solid palette( blue );
button:before {
content: quote( 0.225rem solid palette( blue ));
}
}
}
@if bordercolor( $border-thickness-thicker solid palette( black )) and borderwidth( $border-thickness-thicker solid palette( black )) {
#border-custom-promo {
border: $border-thickness-thicker solid palette( black );
button:before {
content: quote( $border-thickness-thicker solid palette( black ));
}
}
}