Files
yeuchaybo/assets/scss/utilities/_variables.scss
T
2018-07-04 10:00:50 +07:00

176 lines
5.4 KiB
SCSS

// Breakpoints.
$breakpoints: (
xs: 512px,
sm: 896px,
md: 1024px,
lg: 1200px,
xl: 1360px
);
// Base Colors.
$black: #000;
$dark-grey: #333;
$mid-grey: #777;
$medium-grey: #999;
$light-grey: #ddd;
$blue: #0073e5;
$lighter-grey: #eee;
$lightest-grey: #f5f5f5;
$white: #fff;
$cta: red;
//$overlay: rgba($dark-grey, 0.2);
$overlay: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85));
// Base Fonts.
$base-font: "Muli", sans-serif;
$heading-font: "Muli", sans-serif;
// Transitions.
$transition: 0.2s ease-in-out;
// Border styles.
$border-width: 1px;
$border-style: solid;
$border-color: $lighter-grey;
$border: $border-width $border-style $border-color;
// Box Shadow.
$box-shadow-blur-radius: 20px;
$box-shadow-opacity: 0.075;
$box-shadow: 0 16px 65px rgba(0,0,0,.18);
//$box-shadow: 0 0 $box-shadow-blur-radius rgba($dark-grey, $box-shadow-opacity);
// Genesis Column Classes.
$margin-left: 2.564102564102564%;
$one-half: 48.71794871794871%;
$one-third: 31.62393162393162%;
$one-fifth: 17.94871794871794%;
$one-fourth: 23.07692307692307%;
$one-sixth: 14.52991452991453%;
$one-seventh: 12.08791208791208%;
$one-eighth: 10.25641025641025%;
$one-ninth: 8.831908831908832%;
$two-thirds: 65.81196581196582%;
$two-fourths: 48.71794871794871%;
$two-fifths: 38.46153846153846%;
$two-sixths: 31.62393162393162%;
$three-fourths: 74.35897435897436%;
$three-fifths: 58.97435897435897%;
$three-sixths: 48.71794871794871%;
$four-fifths: 79.48717948717948%;
$four-sixths: 65.81196581196582%;
$five-sixths: 82.90598290598291%;
// Font sizes.
$body--font-size: 1.8rem;
$h1--font-size: 4.4rem;
$h2--font-size: 3.2rem;
$h3--font-size: 2.6rem;
$h4--font-size: 2.2rem;
$h5--font-size: 2.0rem;
$h6--font-size: 1.8rem;
$button--font-size: 1.8rem;
$hero-section__h1--font-size: $h1--font-size * 1.5;
$archive-description__entry-title--font-size: 2.5rem;
$author-box-title--font-size: $archive-description__entry-title--font-size;
$breadcrumb--font-size: 1.8rem;
$entry-title--font-size: 3.2rem;
$featured-content__entry-title--font-size: 1.8rem;
$enews-widget__input--font-size: 1.8rem;
$site-title--font-size: 2rem;
$genesis-nav-menu--font-size: 1.5rem;
$genesis-nav-menu__sub-menu__link--font-size: 1.4rem;
$sidebar--font-size: 1.8rem;
$entry-content__caption--font-size: 1.4rem;
$entry-meta--font-size: 1.6rem;
$comments--font-size: 2.0rem;
$footer-widgets--font-size: 2.0rem;
$site-footer--font-size: 1.5rem;
$form--font-size: 1.8rem;
$widget-title--font-size: 1.8rem;
$archive-pagination--font-size: 1.6rem;
$blockquote__before--font-size: 3rem;
$after-entry__breadcrumb--font-size: 1.6rem;
$screen-reader--font-size-focus: 1em;
// Font families.
$body--font-family: $base-font;
$heading--font-family: $heading-font;
// Font weights.
$font-weight--regular: 400;
$font-weight--semibold: 600;
$font-weight--bold: 700;
// Line heights.
$line-height--big: 2;
$line-height--large: 1.875;
$line-height--normal: 1.625;
$line-height--medium: 1.5;
$line-height--medium-small: 1.4;
$line-height--small: 1.2;
$line-height--smaller: 1;
// Font colors.
$body--font-color: $dark-grey;
$link--font-color: $blue;
$link--font-color-hover: $dark-grey;
$button--font-color: $white;
$button--font-color-hover: $white;
$entry-title__link--font-color: $dark-grey;
$entry-title__link--font-color-hover: $blue;
$site-title__link--font-color: $dark-grey;
$genesis-nav-menu--font-color: $dark-grey;
$genesis-nav-menu--font-color-hover: $blue;
$menu-toggle--font-color: $dark-grey;
$menu-toggle--font-color-hover: $blue;
$sub-menu-toggle--font-color: $dark-grey;
$sub-menu-toggle--font-color-hover: $blue;
$menu-highlight__link--font-color: $white;
$sidebar__widget-title--font-color: $dark-grey;
$form--font-color: $dark-grey;
$archive-pagination--font-color: $dark-grey;
$archive-pagination--font-color-hover: $white;
$gs-faq__question--font-color: $dark-grey;
$gs-faq__question--font-color-hover: $blue;
$disabled--font-color: $mid-grey;
// Background colors.
$body--background-color: $white;
$page-boxed--background-color: $lightest-grey;
$site-container--background-color: $white;
$site-header--background-color: $white;
$mark--background-color: $light-grey;
$button--background-color: $dark-grey;
$button--background-color-hover: $blue;
$genesis-nav-menu__sub-menu__link--background-color: $white;
$nav-primary--background-color: $white;
$nav-secondary--background-color: $white;
$menu-toggle--background-color: transparent;
$sub-menu-toggle--background-color: transparent;
$hero-section--background-color: $white;
$footer-widgets--background-color: $white;
$site-footer--background-color: $white;
$menu-highlight__link--background-color: $dark-grey;
$menu-highlight__link--background-color-hover: $blue;
$forms__background-color: $white;
$sticky--background-color: $lightest-grey;
$author-box--background-color: $lightest-grey;
$code--background-color: $lightest-grey;
$archive-pagination--background-color: $lightest-grey;
$archive-pagination--background-color-hover: $dark-grey;
$enews__sidebar--background-color: $lightest-grey;
$disabled--background-color: $lighter-grey;
$gs-faq__question--background-color: transparent;
$gs-faq__question--background-color-hover: $gs-faq__question--background-color;
// WooCommerce.
$shop-page-navigation-link--font-size: 1.6rem;
$cart-table-td--font-size: 1.8rem;
$form-button--font-size: 1.6rem;
$form-quantity-qty--font-size: 2rem;
$account-page-address-title-h3--font-size: 2.6rem;
$breadcrumb-breadcrumb--font-size: 1.8rem;
$widgets-price-filter-price-slider-amount-button--font-size: 1.6rem;
$widgets-recent-reviews-reviewer--font-size: 1.2rem;