// 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 $focuscolor: #39f; //used for focus color $dark-blue: #001b4c; //is the atum-special-color $light-blue: #2a69b8; //is the template-link-color $focusshadow: 0 0 0 .2rem #eaeaea; // BS Colours $blue: 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: (); $theme-colors: map-merge(( primary: $base-color, //used only in bootstrap, please use $atum-bg-dark secondary: $gray-700, //used for btn-secondary success: $success, info: $light-blue, warning: $yellow, danger: $danger, light: $gray-100, //used in bootstrap dark: $gray-900, //used in bootstrap and for table-border action: $base-color, error: $red-dark, alert-success: $green-dark ), $theme-colors); $atum-colors: ( template-sidebar-bg: var(--template-bg-dark-80), template-sidebar-font-color: $white, template-sidebar-link-color: $white, template-bg-light: #f0f4fb, //light background color, frontend dashboard background template-text-light: $white, template-special-color: $dark-blue, template-link-color: $light-blue, template-link-hover-color: darken($light-blue, 20%), template-contrast: $light-blue, 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), 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: $focuscolor, focus-shadow: $focusshadow, 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); $enable-rounded: true; $input-box-shadow: inset 0 0 0 .1rem #e9e9e9; $input-btn-padding-y: .5rem; $input-btn-padding-x: 1rem; $input-max-width: 100%; $btn-disabled-opacity: .4; // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas $variable-prefix: ""; // 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-bg: var(--white); $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(--white); $state-info-border: var(--template-bg-dark-70); $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; // List $list-group-bg: var(--white-offset); $list-group-border-color: hsl(var(--hue),40%,85%); $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: 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-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-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: solid 1px var(--template-bg-dark-20); // 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: var(--template-link-color); $link-hover-color: var(--template-link-hover-color); $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;
