Files
amble_api/public/scss/common/light/_variables.scss
2025-07-15 15:54:43 +05:30

298 lines
7.9 KiB
SCSS

////////// COLOR SYSTEM //////////
$blue: #5E50F9;
$indigo: #6610f2;
$purple: #6a008a;
$pink: #E91E63;
$red: #f96868;
$orange: #f2a654;
$yellow: #f6e84e;
$green: #46c35f;
$teal: #58d8a3;
$cyan: #57c7d4;
$black: #000;
$white: #ffffff;
$white-smoke: #f2f7f8;
$violet: #41478a;
$darkslategray : #2e383e;
$dodger-blue : #3498db;
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: #434a54,
gray-light: #aab2bd,
gray-lighter: #e8eff4,
gray-lightest: #e6e9ed,
gray-dark: #0f1531,
black: #000000
);
$theme-colors: (
primary: #52B56D,
secondary: #6f7580,
success: #52B56D;,
info: #5D97F6,
warning: #FCD050,
danger: #f02632,
light: #f1f1f4,
dark: #1c273c
);
$theme-gradient-colors: (
primary: linear-gradient(230deg, #759bff, #843cf6),
secondary: linear-gradient(to right, #e7ebf0, #868e96),
success: linear-gradient(45deg, #7bffce, #30c93e),
info: linear-gradient(to bottom, #0e4cfd, #6a8eff),
warning: linear-gradient(135deg, #ffc480, #ff763b),
danger: linear-gradient(316deg, #fc5286, #fbaaa2),
light: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%),
dark: linear-gradient(to right, #7d7979 0%, #000000 100%)
);
////////// COLOR SYSTEM //////////
////////// COLOR VARIABLES //////////
$content-bg: #f3f4f7;
$border-color: #eeeef0;
$light-grey: #f4f5f6;
////////// COLOR VARIABLES //////////
////////// SOCIAL COLORS //////////
$social-colors: (
twitter: #2caae1,
facebook: #3b579d,
google: #dc4a38,
linkedin: #0177b5,
pinterest: #cc2127,
youtube: #e52d27,
github: #333333,
behance: #1769ff,
dribbble: #ea4c89,
reddit: #ff4500
);
////////// SOCIAL COLORS //////////
////////// FONTS//
$type1: 'Rubik', sans-serif;
$default-font-size: .875rem; // 14px as base font size
$text-muted: #95999d;
$body-color: #2e294e;
////////// FONT VARIABLES //////////
///////// FOOTER ////////
$footer-height: 75px;
$footer-bg: $content-bg;
$footer-color: color(dark);
///////// FOOTER ////////
///////// BUTTONS ////////
$button-fixed-width: 150px;
$btn-padding-y: .875rem;
$btn-padding-x: 1.5rem;
$btn-line-height: 1;
$btn-padding-y-xs: 0.625rem;
$btn-padding-x-xs: 0.625rem;
$btn-padding-y-sm: .50rem;
$btn-padding-x-sm: .81rem;
$btn-padding-y-lg: 1rem;
$btn-padding-x-lg: 3rem;
$btn-font-size: .875rem;
$btn-font-size-xs: .625rem;
$btn-font-size-sm: .875rem;
$btn-font-size-lg: .875rem;
$btn-border-radius: .1875rem;
$btn-border-radius-xs: .1875rem;
$btn-border-radius-sm: .1875rem;
$btn-border-radius-lg: .1875rem;
$btn-box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
$btn-box-shadow-hover:inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
$modal-box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
///////// BUTTONS ////////
////////// TOOLTIP VARIABLES //////////
//default styles
$tooltip-font-size: .75rem;
$tooltip-padding-y: .4rem;
$tooltip-padding-x: .75rem;
$tooltip-border-radius: .375rem;
////////// TOOLTIP VARIABLES //////////
///////// FORMS /////////
$input-bg: color(white);
$input-border-radius: 2px;
$input-placeholder-color: #c9c8c8;
$input-font-size: .875rem;
$input-padding-y: .875rem;
$input-padding-x: 1.375rem;
$input-line-height: 1;
$input-padding-y-xs: .5rem;
$input-padding-x-xs: .75rem;
$input-padding-y-sm: .50rem;
$input-padding-x-sm: .81rem;
$input-padding-y-lg: .94rem;
$input-padding-x-lg: 1.94rem;
///////// FORMS /////////
//////// DROPDOWNS ///////
$dropdown-border-color: $border-color;
$dropdown-divider-bg: $border-color;
$dropdown-link-color: $body-color;
$dropdown-header-color: $body-color;
$dropdown-link-hover-bg: #eaeaf1;
//////// DROPDOWNS ///////
//////// TABLES ////////
$table-accent-bg: #f1f1f4;
$table-hover-bg: #eaeaf1;
$table-cell-padding: .625rem .9375rem;
$table-border-color: rgba(200, 186, 186, 0.5);
$table-inverse-bg: #2a2b32;
$table-inverse-color: color(white);
//////// TABLES ////////
////////// MEASUREMENT AND PROPERTY VARIABLES //////////
$border-property: 1px solid $border-color;
$card-spacing-y: 1.25rem;
$card-padding-y: 1.5rem;
$card-padding-x: 1.5rem;
$card-border-radius: 10px;
$card-border-color: #e7eaed;
$card-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.08), -5px -6px 10px 0 rgba(253, 253, 253, 0.9);
$card-background-image: linear-gradient(to top, #f1f2f5, rgba(255, 255, 255, 0)), linear-gradient(to bottom, #f6f6f9, #f6f6f9);
$card-title-color: #2e294e;
$card-description-color: #76838f;
$grid-gutter-width: 20px;
$action-transition-duration: 0.25s;
$action-transition-timing-function: ease;
////////// OTHER VARIABLES //////////
////////// BREAD CRUMBS VARIABLES //////////
// default styles
$breadcrumb-padding-y: 0.56rem;
$breadcrumb-padding-x: 1.13rem;
$breadcrumb-item-padding: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-font-size: $default-font-size;
$breadcrumb-bg: transparent;
$breadcrumb-border-color: $border-color;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-700;
$breadcrumb-divider: "/";
// custom styles
$breadcrumb-custom-padding-y: 0;
$breadcrumb-custom-padding-x: 0;
$breadcrumb-custom-item-padding-y: 0.56rem;
$breadcrumb-custom-item-padding-x: 10px;
$breadcrumb-custom-item-color: $black;
$breadcrumb-item-bg: #dbe3e6;
////////// BREAD CRUMBS VARIABLES //////////
////////// MODALS VARIABLES //////////
$modal-inner-padding: 0.9375rem;
$modal-dialog-margin: 10px;
$modal-dialog-margin-y-sm-up: 30px;
$modal-title-line-height: $line-height-base;
$modal-content-bg: $white;
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5);
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5);
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-content-border-color: $border-color;
$modal-footer-border-color: $border-color;
$modal-header-border-width: $border-width;
$modal-content-border-width: $border-width;
$modal-footer-border-width: $border-width;
$modal-header-padding-x: 26px;
$modal-header-padding-y: 25px;
$modal-body-padding-x: 26px;
$modal-body-padding-y: 35px;
$modal-footer-padding-x: 31px;
$modal-footer-padding-y: 15px;
$modal-lg: 90%;
$modal-md: 500px;
$modal-sm: 300px;
$modal-transition: transform .4s ease;
////////// MODALS VARIABLES //////////
///////// TABS VARIABLES //////////
$nav-tabs-border-color: #ebedf2;
$nav-tabs-link-bg: #f6f8fa;
$nav-tabs-link-color: #000000;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;
$nav-tabs-link-active-color: $body-color;
$nav-tabs-link-active-bg: $white;
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;
$nav-pills-custom-bg: #fcfcfd;
//////// TABS VARIABLES /////////
//////// CALENDAR //////////////
$fullcalendar-color: #a8b2b9;
//////// CALENDAR //////////////
$bg-light : #f1f1f4;