1#@!#!123s

32759 1#@!#!123s
: / home / aissorg / www / scss / custom-styles /
Filename : _variables-custom.scss
back
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Temporary, used for calculation variables should by named `$_variable-name`
//
// Table of Contents
//
// Color system
// Body
// Page
// Components
// Fonts
// Links
// Z-index master list
// Grid breakpoints
// Grid containers
// Grid columns
// Buttons
// Form
// Pagination 
// Tooltips
//

//
// Color system
//

// Gray colors
$white: #fff;
$gray-100: #f5f6fa; 
$gray-200: #e8e9ee;
$gray-300: #aeb1be;
$gray-400: #74757f; 
$gray-500: #9b9b9b; 
$gray-600: #868e96;
$gray-dark: #c8c8c8;
$gray-light: #f7f7f7;
//$gray-700: #29293a;
$gray-800: #151515;
$gray-900: #111111;
$black: #000;
$black-1: #212121;


// main colors
$primary: #ff6600;
$primary-darken: #F25800;
$primary-lighten: #ff7f01;

$accent-dark: #29293a;




$color-1: #d3d5db;

//
// Body 
//  
$body-bg: $white;  
$body-color: $gray-400;

$theme-colors: ();

$color-1: #deef7f;
$color-2: #ff747b;

$danger-color: #dc0000;
$success-color: #98bf44;


// Additional colors
$facebook: #2059a0;
$twitter: #00aae6;
$google: #ff3807;
$linkedin: #2881a8;
$instagram: linear-gradient(to top, rgb(241, 88, 35) 0%, rgb(167, 5, 142) 100%);


//
// Page
//
$page-boxed-width: 1600px;
$page-boxed-background-color: $gray-100;
$page-boxed-background-image: url(../images/bg-pattern-boxed.png);

//
// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px;

$border-radius: 5;
$border-radius-lg: 6px;
$border-radius-sm: .2rem;

$transition-base: all .3s ease-in-out;

// Map
//
$map-height: 200px;
$map-xs-height: 250px;
$map-md-height: 300px;
$map-lg-height: 350px;
$map-xl-height: 440px;

// Custom
$shadow-area-1: -3px 0px 50px -2px rgba(0, 0, 0, 0.09);
$shadow-area-2: 1px 1px 10px 0 rgba(0, 0, 0, 0.2);
 
//
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif:   "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-sans-serif-1: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-serif:        "Roboto Slab", "Times New Roman", Times, serif;
$font-family-monospace:    Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

$font-family-base: $font-family-sans-serif;
$font-family-sec: $font-family-sans-serif-1;

$font-weight-bold: 700;

// Base fonts
$font-size-base: 16px;
$font-size-lg: 20px;  
$font-size-sm: 12px;
 
$_lh-base: 24px;
$_lh-lg: 32px;
$_lh-sm: 18px;

$font-weight-base: 300;

// ** < Calculated font values >
$line-height-base: ($_lh-base / $font-size-base);
$line-height-lg: ($_lh-lg / $font-size-lg);
$line-height-sm: ($_lh-sm / $font-size-sm);
// ** </ Calculated font values >

// Headings
$headings-font-family: $font-family-base;
$headings-font-weight: 400;
$headings-line-height: 1.1;
$headings-color: $accent-dark;

// Template Heading Values
$_h1-fsz: 68;
$_h2-fsz: 48;
$_h3-fsz: 36;
$_h4-fsz: 24;
$_h5-fsz: 20;
$_h6-fsz: 16;

$_h1-lh: 80;
$_h2-lh: 64;
$_h3-lh: 48;
$_h4-lh: 32;
$_h5-lh: 28;
$_h6-lh: 24;

// ** < Calculated Headings values >
$h1-font-size: $_h1-fsz * 1px;
$h2-font-size: $_h2-fsz * 1px;
$h3-font-size: $_h3-fsz * 1px;
$h4-font-size: $_h4-fsz * 1px;
$h5-font-size: $_h5-fsz * 1px;
$h6-font-size: $_h6-fsz * 1px;

$h1-line-height: ($_h1-lh / $_h1-fsz);
$h2-line-height: ($_h2-lh / $_h2-fsz);
$h3-line-height: ($_h3-lh / $_h3-fsz);
$h4-line-height: ($_h4-lh / $_h4-fsz);
$h5-line-height: ($_h5-lh / $_h5-fsz);
$h6-line-height: ($_h6-lh / $_h6-fsz);
// ** </ Calculated Headings values >

// Icon Fonts
$fa: 'FontAwesome';
$mdi: 'Material Design Icons';
$mi: 'Material Icons';

// Lead
$lead-font-size: 24px;
$lead-line-height: 34px;
$lead-font-weight: 300;

// Hr
$hr-border-color: $gray-200;
$hr-border-width: $border-width;

// Mark
$mark-padding: 5px 10px;
$mark-bg: $primary;

$dt-font-weight: inherit;
$list-inline-padding: 5px;

// Code
$code-font-size: 90%;
$code-padding-y: 4px;
$code-padding-x: 5px;
$code-color: $gray-900;
$code-bg: $gray-100;

//
// Links
//
$link-color: $primary;
$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-press-color: darken($link-color, 15%);
$link-hover-decoration: underline;

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1140;
$zindex-modal: 1150;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
// Custom
$zindex-rd-navbar: 1080;
$zindex-layout-panel: 1100;
$zindex-gallery: 1200;

//
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1600px
);

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

$screen-fullhd: 1600px;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1200px
);
@include _assert-ascending($container-max-widths, "$container-max-widths");

//
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-gutter-width-narrow: 30px;

//
// Buttons
//

$input-btn-padding-y: 13px;
$input-btn-padding-x: 35px;
$input-btn-font-size: 14px;
$input-btn-line-height: 1.25;

$input-btn-padding-y-sm: 9px;
$input-btn-padding-x-sm: 32px;
$input-btn-line-height-sm: 1.5;
 
$input-btn-padding-y-lg: 14px;
$input-btn-padding-x-lg: 55px;
$input-btn-line-height-lg: 1.5;

$btn-font-family: $font-family-sec;
$btn-font-weight: 500;
$btn-letter-spacing: .2em;
$btn-text-transform: uppercase;

$btn-box-shadow: 0;
$btn-focus-box-shadow: 0;
$btn-active-box-shadow: 0;

$btn-link-disabled-color: $gray-600;

$btn-block-spacing-y: .5rem;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: 6px;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;

$btn-transition: all .15s ease-in-out;

//
// Forms
//
$form-input-height: 48px;
$form-input-lg-height: 56px;
$form-input-sm-height: 40px;

$form-input-color: $gray-700;
$form-input-color-placeholder: $form-input-color;

$form-input-background: $white;
$form-input-border-color: #c5c6cd;
$form-input-border-radius: 6px;
 
$form-input-font-size: $font-size-base;
$form-input-line-height-base: $_lh-base;
$form-input-font-weight: 400;

$form-input-border: 1px solid $form-input-border-color;
$form-input-padding-horizontal: 19px;
$form-input-line-height: $form-input-line-height-base / $form-input-font-size;

$form-input-padding-vertical: round(($form-input-height - $form-input-line-height-base) / 2);
$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;

@if ($form-input-border != none) {
	$form-input-padding-vertical: round(($form-input-height - $form-input-line-height-base ) / 2 - nth($form-input-border, 1));
	$form-input-padding: $form-input-padding-vertical $form-input-padding-horizontal;
}

$form-textarea-default-height: 150px;
$form-textarea-default-min-height: $form-input-height;
$form-textarea-default-max-height: round($form-textarea-default-height * 1.7);

$form-feedback-focus-color: $primary;
$form-feedback-valid-color: $success-color;
$form-feedback-invalid-color: $danger-color;

//
// Pagination
//
$pagination-padding-y: 10px;
$pagination-padding-x: 10px;
$pagination-font-size: 14px;
$pagination-line-height: 24px;

$pagination-color: $white;
$pagination-bg: $primary;
$pagination-border-width: 0;
$pagination-border-color: $gray-200;

$pagination-hover-color: $white;
$pagination-hover-bg: $primary-darken;
$pagination-hover-border-color: $primary;

$pagination-active-color: $pagination-hover-color;
$pagination-active-bg: $pagination-hover-bg;
$pagination-active-border-color: $primary;

$pagination-disabled-color: $gray-400;
$pagination-disabled-bg: $gray-200;
$pagination-disabled-border-color: $gray-200;

//
// Tooltips
//
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $primary; 
$tooltip-opacity: 1;
$tooltip-padding-y: 6px;
$tooltip-padding-x: 10px;
$tooltip-margin: 0;

$tooltip-arrow-width: 14px;
$tooltip-arrow-height: 7px;
$tooltip-arrow-color: $tooltip-bg;