// Color variables
$black: #212123; $white: #FFFFFF; $dark-blue: #0C1464; $slate-blue: #1C3E57; $bright-blue: #4F66EE;
$red-1: #F5E9E5; $red-2: #EFCABB; $red-3: #C9563A; $red-4: #BC4427;
$yellow-1: #F8F1DF; $yellow-2: #F9E3A3; $yellow-3: #F4C435; $yellow-4: #E7B22E;
$green-1: #E9F7EC; $green-2: #C0E2C5; $green-3: #00896D; $green-4: #1B674D;
$blue-1: #EDF4F7; $blue-2: #A9D6EA;
$purple-1: #EDEBF6; $purple-2: #CCCCED; $purple-3: #8266BC; $purple-4: #5D4099;
$grey-1: f8f8f8; $grey-2: f1f1f1; $grey-3: e9e9e9; $grey-4: d3d3d3; $grey-5: #323a45;
// Measurements
$radius: 8px; $base-font-size: 16; $t-light: 300; $t-normal: 400; $t-medium: 500; $t-bold: 500;
$not-big: 768px; $big: 1280px;
$z-menu-mobile: 200; $z-menu-mobile-close: 300; $z-search-input-clear: 300;
// @todo prefix breakpoints with $bp- $tiny-screen: 320px; $mobile-screen: 700px; $medium-screen: 768px; $narrow-screen: 950px; $wide-screen: 1280px;
$breakpointz: (
'not-big': $not-big, 'big': $big
) !default;
@mixin clearfix {
&::after, &::before { content: ''; display: table; } &::after { clear: both; }
}
@mixin visually-hidden {
clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; word-wrap: normal; overflow: hidden; position: absolute !important;
}
.visually-hidden {
@include visually-hidden;
}
@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
&:link { color: $normal; } @if $visited { &:visited, &:link:visited { color: $visited; } } @else { &:visited, &:link:visited { color: $normal; } } @if $focus { &:focus { color: $focus; } } @else { &:focus { color: $normal; } } @if $hover { &.active:hover, &.is-active:hover, &.active-trail:hover, &.visited:hover, &:hover { color: $hover; } } @if $active { &.is-active, &:active, &.active-trail { color: $active; } } @else { &.is-active, &:active, &.active-trail { color: $normal; } }
}
@mixin media($bp) {
@media screen and (min-width: #{$bp}) { @content; }
}
@mixin media-max($bp) {
@media screen and (max-width: #{$bp}) { @content; }
}
@mixin rubik {
font-family: "Rubik", sans-serif;
}
@mixin background-image($file-name, $position: 50% 50%, $color: transparent) {
background: url('/assets/images/#{$file-name}') no-repeat $position $color;
}
@mixin less-than($breakpoint) {
@if map-has-key($breakpointz, $breakpoint) { @media (max-width: map-get($breakpointz, $breakpoint)) { @content; } }
}
@mixin greater-than($breakpoint) {
@if map-has-key($breakpointz, $breakpoint) { @media (min-width: map-get($breakpointz, $breakpoint)) { @content; } }
}
@mixin contain { // @todo Deprecate this mixin.
margin: 0 auto; max-width: 1276px; padding-left: 20px; padding-right: 20px; @include media($medium-screen) { padding-left: 96px; padding-right: 96px; }
}
@mixin contain-1280 { // Zeplin Artboard.
margin: 0 auto; max-width: 1280px; width: 100%;
}
@mixin contain-1210 { // Para titles.
margin: 0 auto; max-width: 1210px; padding-left: 20px; padding-right: 20px; width: 100%; @include media($wide-screen) { padding: 0; }
}
@mixin contain-1150 { // Contents with offset.
margin: 0 auto; max-width: 1210px; padding-left: 20px; padding-right: 20px; width: 100%; @include media($wide-screen) { padding: 0 60px 0 0; }
}
@mixin contain-1090-table { // Match 1090 spacing when a 3-column table is the child.
margin: 0 auto; max-width: 1130px; padding-left: 20px; padding-right: 20px; width: 100%; @include media($medium-screen) { padding: 0; }
}
@mixin contain-1090 { // Most contents.
margin: 0 auto; max-width: 1090px; padding-left: 20px; padding-right: 20px; width: 100%; @include media($wide-screen) { padding: 0; }
}
@mixin fs-display-1 {
font-size: 72px; font-weight: $t-light; letter-spacing: -2px; line-height: 80.2px;
}
@mixin fs-title-1 {
font-size: 62px; font-weight: $t-medium; letter-spacing: 0; line-height: 70px;
}
@mixin fs-header-title-2 {
font-size: 50px; font-weight: $t-light; letter-spacing: 0; line-height: 59px;
}
@mixin fs-display-1-mobile {
font-size: 42px; font-weight: $t-light; letter-spacing: 0; line-height: 43px;
}
@mixin fs-title-2 {
font-size: 40px; font-weight: $t-medium; line-height: 47px;
}
@mixin fs-title-1-mobile {
font-size: 33px; font-weight: $t-medium; line-height: 43px;
}
@mixin fs-big-description {
font-size: 24px; font-weight: $t-normal; line-height: 36px;
}
@mixin fs-title-5 {
font-size: 20px; font-weight: $t-medium; line-height: 27px;
}
@mixin fs-body-bold {
font-size: 17px; font-weight: $t-medium; line-height: 24px;
}
@mixin fs-body-short {
font-size: 17px; font-weight: $t-normal; line-height: 24px;
}
@mixin fs-body-long {
font-size: 17px; font-weight: $t-normal; line-height: 28px;
}
@mixin fs-title-3 {
font-size: 30px; font-weight: $t-medium; line-height: 42px;
}
@mixin fs-big-description-mobile {
font-size: 20px; font-weight: $t-normal; line-height: 29px;
}
@mixin fs-title-3-mobile {
font-size: 24px; font-weight: $t-medium; line-height: 30px;
}
@mixin fs-title-4 {
font-size: 24px; font-weight: $t-normal; line-height: 34px;
}
@mixin fs-title-3-mobile {
font-size: 24px; font-weight: $t-medium; line-height: 30px;
}
@mixin fs-small-text {
font-size: 14px; font-weight: $t-normal; line-height: 18px;
}
// Styles from older Zeplin file to deprecate. // app.zeplin.io/project/5ccb490a87477603a8753db7/styleguide
@mixin fs-h1-small {
font-size: 33px; font-weight: $t-medium; letter-spacing: -.3px; line-height: 43px;
}
@mixin fs-display-1-mobile {
font-size: 33px; font-weight: $t-light; letter-spacing: 0; line-height: 39px;
}
@mixin fs-pull-small {
font-size: 20px; font-weight: $t-medium; line-height: 34px;
}
@mixin fs-pull-large {
font-size: 20px; font-weight: $t-medium; line-height: 32px;
}
@mixin fs-news-title {
font-size: 20px; font-weight: $t-medium; line-height: 30px;
}
@mixin fs-new-website-text {
font-size: 20px; font-weight: $t-normal; line-height: 28px;
}
@mixin fs-title-right {
font-size: 20px; font-weight: $t-medium; line-height: 24px;
}
@mixin fs-big-link {
font-size: 20px; font-weight: $t-medium; line-height: 27px;
}
@mixin fs-body-3 {
font-size: 17px; font-weight: $t-normal; line-height: 28.9px;
}
@mixin fs-title {
font-size: 17px; font-weight: $t-medium; line-height: 24px; text-decoration: underline;
}
@mixin fs-nav-link {
font-size: 17px; font-weight: $t-medium; line-height: 20px;
}
@mixin fs-news-type {
font-size: 16px; font-weight: $t-bold; line-height: 28px;
}
// Complex mixins. @mixin fs-h1 {
@include fs-h1-small; @include media($medium-screen) { @include fs-title-1; }
}
@mixin fs-h1-default {
@include fs-display-1-mobile; @include media($medium-screen) { @include fs-display-1; }
}
@mixin fs-h1-home {
@include fs-display-1-mobile; @include media($medium-screen) { @include fs-display-1; }
}
@mixin fs-pull {
@include fs-pull-small; @include media($medium-screen) { @include fs-pull-large; }
}