306 lines
13 KiB
SCSS
306 lines
13 KiB
SCSS
// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
|
|
$prefix: "";
|
|
|
|
// Use dark mode conditionally based on media queries from the browser to match the desktop theme
|
|
$color-mode-type: media-query;
|
|
|
|
// Variables
|
|
$white: #fff;
|
|
$whiteoffset: #fefefe;
|
|
$gray-100: #f8f9fa;
|
|
$gray-200: #e8e8e8;
|
|
$gray-300: #dee2e6; //used for toolbar and badges
|
|
$gray-400: #cdcdcd; //used for border-bottom sidebar-nav and toolbar normal border
|
|
$gray-500: #adb5bd; //used in toolbar and buttons for border
|
|
$gray-600: #666e76; //used for atum-text-dark and $secondary
|
|
$gray-700: #495057; //used for atum-text-dark, secondary
|
|
$gray-800: #343a40;
|
|
$gray-900: #212529; //used for tree header
|
|
$bluegray: #b2bfcd; // used for borders
|
|
$black: #000; //used for shadows
|
|
$dark-blue: #001b4c; //is the atum-special-color
|
|
$light-blue: #2a69b8; //is the template-link-color
|
|
|
|
// BS Colours
|
|
$blue: #2a69b7; // Same as hsl(213, 63%, 44%); // base color for calculation, Primary-color
|
|
$indigo: #0377be; //used in bootstrap
|
|
$purple: #6f42c1; //used in bootstrap
|
|
$pink: #971250; //used in bootstrap
|
|
$red: #c52827; //used in bootstrap
|
|
$red-dark: #3b0d0c; //used for alerts error
|
|
$yellow: #ffb514; //used in bootstrap
|
|
$green: #457d54; //used in bootstrap
|
|
$green-dark: #0f2f21; //used for alert success
|
|
$teal: #20c997; //used in bootstrap
|
|
$cyan: #107d8e; //used in bootstrap
|
|
$darkblue: #132f53;
|
|
$base-color: $darkblue;
|
|
|
|
// Atum colours defined as scss variables for use in scss functions
|
|
$atum-text-dark: $gray-700;
|
|
$success: $green;
|
|
$danger: $red;
|
|
$info: $light-blue;
|
|
$warning: $yellow;
|
|
|
|
$theme-colors: (
|
|
"primary": $darkblue,
|
|
"secondary": $gray-700,
|
|
"success": $success,
|
|
"info": $light-blue,
|
|
"warning": $yellow,
|
|
"danger": $danger,
|
|
"light": $gray-100,
|
|
"dark": $gray-900,
|
|
"action": $base-color,
|
|
"error": $red-dark) !default;
|
|
|
|
$template-background-light: #f0f4fb; //light background color, frontend dashboard background and installer body background
|
|
|
|
$atum-colors: (
|
|
template-sidebar-bg: var(--template-bg-dark-80),
|
|
template-sidebar-font-color: $white,
|
|
template-sidebar-link-color: $white,
|
|
template-bg-light: $template-background-light,
|
|
template-link-color: var(--link-color),
|
|
template-text-light: $white,
|
|
template-text-dark: $atum-text-dark,
|
|
template-special-color: $dark-blue,
|
|
template-contrast: $light-blue,
|
|
template-quickicon-color: hsl(var(--hue), 30%, 40%),
|
|
template-bg-dark: hsl(var(--hue), 40%, 20%),
|
|
template-bg-dark-3: hsl(var(--hue), 40%, 97%),
|
|
template-bg-dark-5: hsl(var(--hue), 40%, 95%),
|
|
template-bg-dark-7: hsl(var(--hue), 40%, 93%),
|
|
template-bg-dark-10: hsl(var(--hue), 40%, 90%),
|
|
template-bg-dark-15: hsl(var(--hue), 40%, 85%),
|
|
template-bg-dark-20: hsl(var(--hue), 40%, 80%),
|
|
template-bg-dark-30: hsl(var(--hue), 40%, 70%),
|
|
template-bg-dark-40: hsl(var(--hue), 40%, 60%),
|
|
template-bg-dark-50: hsl(var(--hue), 40%, 50%),
|
|
template-bg-dark-60: hsl(var(--hue), 40%, 40%),
|
|
template-bg-dark-65: hsl(var(--hue), 40%, 35%),
|
|
template-bg-dark-70: hsl(var(--hue), 40%, 30%),
|
|
template-bg-dark-75: hsl(var(--hue), 40%, 25%),
|
|
template-bg-dark-80: hsl(var(--hue), 40%, 20%),
|
|
template-bg-dark-90: hsl(var(--hue), 40%, 10%),
|
|
);
|
|
|
|
$colors: (
|
|
card-bg: rgba(255, 255, 255, .7),
|
|
card-color: var(--template-bg-dark-60),
|
|
bluegray: $bluegray,
|
|
lightbluegray: #f6f9fc,
|
|
toolbar-bg: $white,
|
|
success-border: var(--success),
|
|
info-border: var(--info),
|
|
warning-border: var(--warning),
|
|
danger-border: var(--danger),
|
|
login-main-bg: darken($base-color, 8%), //used on login
|
|
border: $gray-400,
|
|
"white": $white, // the key here must be in quotes to avoid scss compilation warnings.
|
|
white-offset: $whiteoffset,
|
|
focus: #39f,
|
|
focus-shadow: #eaeaea,
|
|
toggle-color: $white, //used in sidebar
|
|
);
|
|
|
|
// Alerts
|
|
$alert-border-level: 0;
|
|
$alert-color-level: 0;
|
|
|
|
// Global
|
|
$atum-box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
|
|
$btn-disabled-opacity: .4;
|
|
|
|
// Toolbar
|
|
$atum-toolbar-line-height: 2.45rem;
|
|
|
|
// Sidebar
|
|
$sidebar-width: 18rem;
|
|
$sidebar-width-login: 28.75rem;
|
|
$sidebar-width-closed: 3rem;
|
|
$main-brand-height: 3rem;
|
|
|
|
// Fonts
|
|
$font-family-sans-serif: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
|
$h1-font-size: 1.65rem;
|
|
$h2-font-size: 1.5rem;
|
|
$h3-font-size: 1.25rem;
|
|
$h4-font-size: 1rem;
|
|
$h5-font-size: .9286rem;
|
|
$h6-font-size: .8571rem;
|
|
$headings-color: var(--template-bg-dark);
|
|
$font-size-sm: .8rem;
|
|
$font-size-vsm: .6rem;
|
|
$display1-size: 1rem;
|
|
$display2-size: .875rem;
|
|
$content-font-size: .875rem;
|
|
$label-font-size: 1rem;
|
|
$danger-bg: #900;
|
|
$badge-font-size: .75rem;
|
|
$jicon-css-prefix: icon !default;
|
|
$fa-css-prefix: fa !default;
|
|
$fa-font-path: "../../../../media/vendor/fontawesome-free/webfonts";
|
|
$roboto-font-path: "../../../../../media/vendor/roboto-fontface/fonts";
|
|
|
|
// Font weights
|
|
$thin-weight: 100;
|
|
$extralight-weight: 200;
|
|
$light-weight: 300;
|
|
$normal-weight: 400;
|
|
$medium-weight: 500;
|
|
$semibold-weight: 600;
|
|
$bold-weight: 700;
|
|
$extrabold-weight: 800;
|
|
$black-weight: 900;
|
|
|
|
// Tables
|
|
$table-cell-padding-y: .75rem;
|
|
$table-cell-padding-x: 1rem;
|
|
$table-cell-padding-y-sm: .3rem;
|
|
$table-cell-padding-x-sm: .3rem;
|
|
$table-group-separator-color: $gray-300;
|
|
|
|
// Dropdowns
|
|
$dropdown-padding-y: 0;
|
|
$dropdown-box-shadow: 0 1px 1px rgba($black, .15);
|
|
$dropdown-link-hover-color: var(--template-text-dark);
|
|
$dropdown-border-width: 1px;
|
|
$dropdown-item-padding-y: .5rem;
|
|
$dropdown-item-padding-x: .75rem;
|
|
$dropdown-spacer: 0;
|
|
|
|
// Cards
|
|
$card-border-width: 0;
|
|
$card-border-color: transparent;
|
|
|
|
// Alerts
|
|
$state-success-text: $success;
|
|
$state-success-bg: lighten($success, 58%);
|
|
$state-success-border: hsl(var(--hue),50%,93%);
|
|
|
|
$state-info-text: var(--template-bg-dark-70);
|
|
$state-info-bg: var(--body-bg);
|
|
|
|
$state-warning-text: darken($warning, 24%);
|
|
$state-warning-bg: lighten($warning, 44%);
|
|
$state-warning-border: $warning;
|
|
|
|
$state-danger-text: $danger;
|
|
$state-danger-bg: lighten($danger, 52%);
|
|
$state-danger-border: $danger;
|
|
|
|
$state-error-text: $danger;
|
|
$state-error-bg: lighten($danger, 52%);
|
|
$state-error-border: $danger;
|
|
|
|
// Badges
|
|
$badge-padding-x: .2rem;
|
|
$badge-padding-y: .3rem;
|
|
$badge-border-radius: .2rem;
|
|
|
|
$success-bg: $green;
|
|
$success-txt: $white;
|
|
|
|
$warning-bg: #f9d71c;
|
|
$warning-txt: #000;
|
|
|
|
$danger-bg: #900;
|
|
$danger-txt: #fff;
|
|
|
|
$info-bg: $gray-300;
|
|
$info-txt: $white;
|
|
|
|
// Input Group
|
|
$input-group-addon-color: var(--white);
|
|
$input-group-addon-bg: $base-color;
|
|
$input-group-addon-border-color: var(--template-bg-dark);
|
|
|
|
// Treeselect
|
|
$treeselect-line-height: 2.2rem;
|
|
$treeselect-indent: 40px;
|
|
$treeselect-line-color: var(--template-bg-dark-7);
|
|
|
|
// List
|
|
$list-group-border-color: var(--template-bg-dark-15);
|
|
$list-group-item-padding-y: .75rem;
|
|
|
|
// Buttons
|
|
$input-btn-padding-y-sm-submenu: 0;
|
|
$input-btn-padding-x-sm-submenu: 1.625rem;
|
|
$input-btn-submenu-icon-distance: 1rem;
|
|
|
|
// Custom form
|
|
$form-select-indicator-padding: 3rem;
|
|
$form-select-bg: var(--template-bg-light);
|
|
$form-select-bg-size: calc(max(100%, 116rem));
|
|
$form-select-indicator: url("../images/select-bg.svg");
|
|
$form-select-indicator-rtl: url("../images/select-bg-rtl.svg");
|
|
$form-select-indicator-active: url("../../../images/select-bg.svg");
|
|
$form-select-indicator-active-rtl: url("../../../images/select-bg-rtl.svg");
|
|
$form-select-background: $form-select-bg $form-select-indicator no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
|
$form-select-background-rtl: $form-select-bg $form-select-indicator-rtl no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
|
$form-select-box-shadow: $atum-box-shadow;
|
|
$form-select-bg-size-sm: 75rem;
|
|
$form-select-multiple-padding-y: .3rem;
|
|
$form-file-button-color: var(--white);
|
|
|
|
// Input
|
|
$input-padding: .5rem 1rem;
|
|
$input-border-color: var(--template-bg-dark-20);
|
|
$input-focus-border-color: var(--focus);
|
|
$input-box-shadow: $atum-box-shadow;
|
|
$input-max-width: 100%;
|
|
$input-btn-focus-width: .2rem;
|
|
$input-btn-focus-color: var(--focus-shadow);
|
|
$input-btn-padding-y: .5rem;
|
|
$input-btn-padding-x: 1rem;
|
|
|
|
// Modals
|
|
$modal-header-height: 2.875rem;
|
|
|
|
// Quickicons
|
|
$quickicon-bg: var(--white);
|
|
$quickicon-box-shadow-success: 0 0 3px 0 var(--success);
|
|
$quickicon-box-shadow-danger: 0 0 3px 0 var(--danger);
|
|
$quickicon-box-shadow-warning: 0 0 3px 0 var(--warning);
|
|
$quickicon-icon-size: 2rem;
|
|
$quickicon-icon-size-sm: 1.3rem;
|
|
|
|
// Gutter
|
|
$grid-gutter-width: 2rem;
|
|
$grid-gutter-width-s: 15px;
|
|
|
|
// Breadcrumbs
|
|
$breadcrumb-bg: var(--white);
|
|
|
|
// Links
|
|
$link-color: $light-blue;
|
|
$link-hover-color: darken($light-blue, 20%);
|
|
$link-decoration: none;
|
|
|
|
// Z-Index list
|
|
$zindex-negative: -1;
|
|
$zindex-actions: auto;
|
|
$zindex-toolbar: 1000;
|
|
$zindex-sidebar: 1010;
|
|
$zindex-header: 1020;
|
|
$zindex-alerts: 1030;
|
|
$zindex-modal-backdrop: 1040;
|
|
$zindex-modal: 1050;
|
|
$zindex-popover: 1060;
|
|
$zindex-tooltip: 1070;
|
|
$zindex-mobile-bottom: 8000;
|
|
$zindex-mobile-toggle: 9999;
|
|
$zindex-mobile-menu: 9000;
|
|
|
|
// scss-docs-start border-radius-variables
|
|
$btn-border-radius: .25rem !default;
|
|
$border-radius: .25rem !default;
|
|
$border-radius-sm: .2rem !default;
|
|
$border-radius-lg: .3rem !default;
|
|
$border-radius-xl: .3rem !default;
|
|
$border-radius-2xl: .3rem !default;
|
|
// scss-docs-end border-radius-variables
|