281 lines
9.2 KiB
SCSS
281 lines
9.2 KiB
SCSS
//
|
|
// Variables
|
|
//
|
|
|
|
$colors: map-merge((
|
|
"alabaster": #f8f8f8,
|
|
"athens-gray": #f0f0f0,
|
|
"wild-sand": #f4f4f4,
|
|
"rolling-stone": rgba(black,0.8),
|
|
"mine-shaft": #333333,
|
|
), $colors);
|
|
|
|
$theme-colors: map-merge((
|
|
"black": #222222,
|
|
"brand": #505cfd,
|
|
"new-gray": #d8d8d8,
|
|
"new-white": #ffffff,
|
|
), $theme-colors);
|
|
|
|
|
|
$body-color: color("rolling-stone");
|
|
$border-color: color("athens-gray");
|
|
$border-radius: rem(3px);
|
|
$text-muted: #a3a6a8;
|
|
|
|
|
|
|
|
// Links
|
|
//
|
|
// Style anchor elements.
|
|
|
|
$link-color: $red_jipe; //theme-color("brand")
|
|
$link-hover-color: darken($link-color, 15%);
|
|
$link-hover-decoration: none;
|
|
|
|
|
|
// Fonts
|
|
//
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
|
|
$font-size-base: rem(14px);
|
|
$line-height-base: 1.8;
|
|
$font-family-base: "Nunito", Arial;
|
|
$font-family-serif: "Playfair Display", sans-serif;
|
|
|
|
$h1-font-size: rem(30px);
|
|
$h2-font-size: rem(24px);
|
|
$h3-font-size: rem(20px);
|
|
$h4-font-size: rem(18px);
|
|
$h5-font-size: rem(17px);
|
|
$h6-font-size: rem(16px);
|
|
|
|
$h1-font-weight: 600;
|
|
$h2-font-weight: 600;
|
|
$h3-font-weight: 600;
|
|
$h4-font-weight: 600;
|
|
$h5-font-weight: 600;
|
|
$h6-font-weight: 600;
|
|
|
|
$headings-line-height: 1.3;
|
|
$headings-margin-bottom: rem(10px);
|
|
$headings-color: theme-color("black");
|
|
$blockquote-font-size: rem(18px);
|
|
$lead-font-size: rem(15px);
|
|
$lead-font-weight: 400;
|
|
$hr-border-color: $border-color;
|
|
|
|
// Btns
|
|
|
|
$btn-font-weight: 600;
|
|
$btn-font-size: rem(12px);
|
|
$btn-text-transform: uppercase;
|
|
$btn-letter-spacing: rem(1.8px);
|
|
$btn-padding-y: rem(16px);
|
|
$btn-padding-x: rem(30px);
|
|
$btn-padding-y-sm: rem(10px);
|
|
$btn-padding-x-sm: rem(24px);
|
|
$btn-padding-y-lg: rem(19px);
|
|
$btn-padding-x-lg: rem(36px);
|
|
$btn-border-width: 2px;
|
|
$btn-border-radius: $border-radius;
|
|
$btn-border-radius-lg: $border-radius;
|
|
$btn-border-radius-sm: $border-radius;
|
|
|
|
|
|
// Forms
|
|
|
|
$input-border-width: 1px;
|
|
$input-border-color: darken($border-color, 1%);
|
|
$input-border-radius: $border-radius;
|
|
$input-focus-box-shadow: none;
|
|
$input-focus-border-color: darken($input-border-color, 8%);
|
|
$input-padding-y: $btn-padding-y + (rem($btn-border-width) / 2);
|
|
$input-padding-x: rem(14px);
|
|
$input-padding-y-sm: $btn-padding-y-sm + (rem($btn-border-width) / 2);
|
|
$input-padding-x-sm: $input-padding-x;
|
|
$input-padding-y-lg: $btn-padding-y-lg + (rem($btn-border-width) / 2);
|
|
$input-padding-x-lg: $input-padding-x;
|
|
$input-height-inner: ($btn-font-size * $btn-line-height) + ($btn-padding-y * 2) + (rem($btn-border-width) * 2);
|
|
$input-height: $input-height-inner;
|
|
$input-height-inner-sm: ($btn-font-size * $btn-line-height) + ($btn-padding-y-sm * 2) + (rem($btn-border-width) * 2);
|
|
$input-height-sm: $input-height-inner-sm;
|
|
$input-height-inner-lg: ($btn-font-size * $btn-line-height) + ($btn-padding-y-lg * 2) + (rem($btn-border-width) * 2);
|
|
$input-height-lg: $input-height-inner-lg;
|
|
|
|
|
|
// Alert
|
|
|
|
$alert-padding-y: rem(18px);
|
|
$alert-padding-x: rem(18px);
|
|
$alert-border-width: 0;
|
|
|
|
|
|
// Breadcrumb
|
|
|
|
$breadcrumb-bg: transparent;
|
|
$breadcrumb-font-size: rem(13px);
|
|
$breadcrumb-divider-font-size: rem(10px);
|
|
$breadcrumb-divider-color: $body-color;
|
|
|
|
|
|
// Pagination:
|
|
|
|
$pagination-color: $body-color;
|
|
$pagination-border-width: 0;
|
|
$pagination-padding-y: rem(8px);
|
|
$pagination-padding-x: rem(14px);
|
|
$pagination-hover-color: theme-color("black");
|
|
$pagination-hover-bg: color("wild-sand");
|
|
$pagination-active-color: $body-bg;
|
|
$pagination-active-bg: theme-color("brand");
|
|
$pagination-active-border-color: $pagination-active-bg;
|
|
|
|
|
|
// Progress Bars
|
|
|
|
$progress-bg: darken(color("wild-sand"), .5%);
|
|
$progress-height: rem(14px);
|
|
$progress-border-radius: 0;
|
|
|
|
|
|
// Pie
|
|
|
|
$pie-size: 150px;
|
|
$pie-box-shadow: 0 0 60px rgba(0, 0, 0, .07);
|
|
|
|
|
|
// Pricing Tables
|
|
|
|
$pricing-background: $body-bg;
|
|
$pricing-border-color: $border-color;
|
|
|
|
|
|
// Nav, Tabs, Pills
|
|
|
|
$nav-link-padding-y: rem(10px);
|
|
$nav-link-padding-x: rem(16px);
|
|
$nav-tabs-border-width: 1px;
|
|
$nav-tabs-border-color: $border-color;
|
|
$nav-tabs-link-active-bg: transparent;
|
|
$nav-tabs-link-active-border-width: 2px;
|
|
$nav-tabs-link-active-border-color: theme-color("brand");
|
|
$tabs-padding-y: 24px;
|
|
$tabs-padding-x: 0;
|
|
|
|
|
|
// Modules/Section
|
|
|
|
$module-cover-padding-top: 1px;
|
|
$module-cover-padding-bottom: 0px;
|
|
$module-padding-top: 120px;
|
|
$module-padding-bottom: 100px;
|
|
$module-page-title-padding-top: 45px;
|
|
$module-page-title-padding-bottom: 45px;
|
|
$module-gray-background: color("alabaster");
|
|
$module-overlay-color: color("mine-shaft");
|
|
$module-gradient-left: theme-color("brand");
|
|
$module-gradient-right: #00dbde;
|
|
|
|
|
|
// Header
|
|
|
|
$header-height: 74px;
|
|
$header-brand-text-transform: none;
|
|
$header-brand-letter-spacing: 0;
|
|
$header-brand-font-weight: 600;
|
|
$header-brand-font-size: rem(20px);
|
|
$header-link-text-transform: uppercase;
|
|
$header-link-letter-spacing: rem(.9px);
|
|
$header-link-font-weight: 600;
|
|
$header-link-font-size: rem(12px);
|
|
$header-icon-font-size: rem(17px);
|
|
$header-link-indents: 7px;
|
|
$header-icon-indents: 11px;
|
|
$header-transparent-link-clr: color("white");
|
|
$header-transparent-link-clr-hvr: rgba($header-transparent-link-clr, .7);
|
|
|
|
|
|
// Header Small
|
|
|
|
$header-small-height: 60px;
|
|
$header-small-background: color("white");
|
|
$header-small-screen-background: theme-color("black");
|
|
$header-small-border-color: rgba($border-color, .8);
|
|
$header-small-link-clr: theme-color("black");
|
|
$header-small-link-clr-hvr: #962122;
|
|
|
|
|
|
// Sub-menu
|
|
|
|
$submenu-background: color("white");
|
|
$submenu-box-shadow: 0 14px 32px 4px rgba(0, 0, 0, .1);
|
|
$submenu-border-radius: 2px;
|
|
$submenu-min-width: 180px;
|
|
$submenu-mega-column-min-width: $submenu-min-width;
|
|
$submenu-link-clr: #9d9d9d;
|
|
$submenu-link-clr-hvr: rgba($submenu-link-clr, .65);
|
|
$submenu-text-transform: uppercase;
|
|
$submenu-letter-spacing: rem(1px);
|
|
$submenu-font-weight: 500;
|
|
$submenu-font-size: rem(12px);
|
|
|
|
|
|
// Widgets
|
|
|
|
$widget-margin-y: 60px;
|
|
|
|
|
|
// Footer
|
|
|
|
$footer-padding-y: 90px;
|
|
$footer-background: theme-color("black");
|
|
$footer-headings-color: color("white");
|
|
$footer-link-color: #cecece;
|
|
|
|
|
|
// Offcanvas
|
|
|
|
$offcanvas-width: 400px;
|
|
$offcanvas-background: $footer-background;
|
|
$offcanvas-overlay-color: rgba(0, 0, 0, .5);
|
|
$offcanvas-headings-color: $footer-headings-color;
|
|
$offcanvas-link-color: $footer-link-color;
|
|
|
|
|
|
// Comments - Shop Review
|
|
|
|
$avatar-border-radius: 100%;
|
|
$reply-link-border-radius: $border-radius;
|
|
|
|
|
|
// Timeline
|
|
|
|
$timeline-border-color: $border-color;
|
|
$timeline-border-radius: $border-radius;
|
|
|
|
|
|
// Tooltip
|
|
|
|
$tooltip-bg: $body-bg;
|
|
$tooltip-arrow-color: $tooltip-bg;
|
|
$tooltip-padding-y: rem(5px);
|
|
$tooltip-padding-x: rem(12px);
|
|
$tooltip-font-size: rem(11px);
|
|
$tooltip-border-radius: rem(2px);
|
|
$tooltip-margin: 4px;
|
|
|
|
|
|
// Preloader
|
|
|
|
$preloader-size: 30px;
|
|
$preloader-color: theme-color("brand");
|
|
$preloader-background: $body-bg;
|
|
|
|
|
|
// Scroll Top Button
|
|
|
|
$srcoll-top-border-radius: 100%;
|
|
$srcoll-top-position: rem(25px);
|
|
$srcoll-top-font-size: rem(14px);
|
|
$srcoll-top-size: rem(38px); |