/* Template Name: Material Ad Astra Author: UnEspace Email: rampeur@gmail.com File: scss */ @use 'sass:color'; @use 'sass:map'; @use './components'; @use '@angular/material' as mat; /* Bootstrap */ // Functions first @import "bootstrap/scss/functions"; // Variable overrides second @import 'variable'; @import 'palettes'; // Required Bootstrap imports @import "bootstrap/scss/variables"; //@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; // Layout & components @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/containers"; @import "bootstrap/scss/grid"; //@import "bootstrap/scss/tables"; @import "bootstrap/scss/transitions"; @import "bootstrap/scss/pagination"; @import "bootstrap/scss/badge"; @import "bootstrap/scss/alert"; // Helpers @import "bootstrap/scss/helpers"; // Utilities @import "bootstrap/scss/utilities/api"; @include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ //$adastra_app-primary: mat.define-palette(mat.$light-green-palette); //$adastra_app-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400); //$adastra_app-warn: mat.define-palette(mat.$blue-palette); $adastra_app-primary: mat.m2-define-palette($md-custom-primary, 500); $adastra_app-secondary: mat.m2-define-palette($md-custom-warn); $adastra_app-accent: mat.m2-define-palette($md-custom-accent, A200, A100, A400); //$adastra_app-warn: mat.define-palette($md-custom-warn); $adastra_app-warn: mat.m2-define-palette($md-custom-raspberry, 400); $adastra_app-danger: mat.m2-define-palette($md-custom-red, 700); $adastra_app-success: mat.m2-define-palette($md-custom-green); $adastra_app-info: mat.m2-define-palette($md-custom-blue); $adastra_app-warning: mat.m2-define-palette($md-custom-orange, 700); $adastra_app-blue: mat.m2-define-palette($md-custom-blue, 700); $adastra_app-red: mat.m2-define-palette($md-custom-red); $adastra_app-green: mat.m2-define-palette($md-custom-green, 400); $adastra_app-turquoise: mat.m2-define-palette($md-custom-turquoise); $adastra_app-cyan: mat.m2-define-palette($md-custom-cyan); $adastra_app-navy: mat.m2-define-palette($md-custom-navy); $adastra_app-purple: mat.m2-define-palette($md-custom-purple); $adastra_app-raspberry: mat.m2-define-palette($md-custom-raspberry); $adastra_app-orange: mat.m2-define-palette($md-custom-orange); $adastra_app-yellow: mat.m2-define-palette($md-custom-yellow); $adastra_app-teal: mat.m2-define-palette($md-custom-teal); $adastra_app-magenta: mat.m2-define-palette($md-custom-magenta); $adastra_app-pink: mat.m2-define-palette($md-custom-pink); $adastra_app-megna: mat.m2-define-palette($md-custom-megna); $adastra_app-purple-light: mat.m2-define-palette($md-custom-purple-light); $adastra_app-navy-light: mat.m2-define-palette($md-custom-navy-light); $adastra_app-grey: mat.m2-define-palette(mat.$m2-grey-palette, 400); $adastra_app-muted: mat.m2-define-palette(mat.$m2-grey-palette, 300); $custom-typography: mat.m2-define-typography-config( $font-family: 'Barlow, sans-serif', $body-1: mat.m2-define-typography-level( $font-family: 'Barlow, sans-serif', $font-weight: 400, $font-size: 14px, $line-height: 1.42857143, $letter-spacing: normal, ), $body-2: mat.m2-define-typography-level( $font-family: 'Barlow, sans-serif', $font-weight: 500, $font-size: 14px, $line-height: 22px, $letter-spacing: normal, ) ); // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". //$adastra_app-theme: mat.define-dark-theme(( $adastra_app-theme: mat.m2-define-light-theme(( color: ( primary: $adastra_app-primary, accent: $adastra_app-accent, warn: $adastra_app-warn, ), typography: $custom-typography, density: 0 )); $adastra_app-variants: ( secondary: $adastra_app-secondary, danger: $adastra_app-danger, success: $adastra_app-success, info: $adastra_app-info, warning: $adastra_app-warning, red: $adastra_app-red, green: $adastra_app-green, blue: $adastra_app-blue, cyan: $adastra_app-cyan, teal: $adastra_app-teal, turquoise: $adastra_app-turquoise, megna: $adastra_app-megna, navy: $adastra_app-navy, navy-light: $adastra_app-navy-light, raspberry: $adastra_app-raspberry, orange: $adastra_app-orange, yellow: $adastra_app-yellow, purple: $adastra_app-purple, purple-light: $adastra_app-purple-light, magenta: $adastra_app-magenta, pink: $adastra_app-pink, grey: $adastra_app-grey, muted: $adastra_app-muted ); /* $config: mat.get-color-config($adastra_app-theme); $foreground: map.get($config, foreground); $background: map.get($config, background); */ $foreground: map.get($adastra_app-theme, foreground); $background: map.get($adastra_app-theme, background); /* @use './components'; @include mat.core-theme($adastra_app-theme); @include mat.button-theme($adastra_app-theme); @include mat.badge-theme($adastra_app-theme); @include mat.icon-theme($adastra_app-theme); @include mat.icon-button-theme($adastra_app-theme); @include mat.toolbar-theme($adastra_app-theme); @include mat.card-theme($adastra_app-theme); @include mat.table-theme($adastra_app-theme); @include mat.sort-theme($adastra_app-theme); @include mat.paginator-theme($adastra_app-theme); @include mat.tabs-theme($adastra_app-theme); @include mat.form-field-theme($adastra_app-theme); @include mat.input-theme($adastra_app-theme); @include mat.select-theme($adastra_app-theme); @include mat.progress-spinner-theme($adastra_app-theme); @include mat.dialog-theme($adastra_app-theme); @include mat.menu-theme($adastra_app-theme); @include mat.snack-bar-theme($adastra_app-theme); @include components.theme($adastra_app-theme, $custom-typography, $adastra_app-variants); */ @include mat.all-component-themes($adastra_app-theme); @include components.theme($adastra_app-theme, $custom-typography, $adastra_app-variants); //@import "chartist/dist/index"; @each $variant, $var-color in $grays { .bg-gray-#{"" + $variant} { --#{$prefix}-bg-opacity: 1; background-color: RGBA(color.red($var-color), color.green($var-color), color.blue($var-color), var(--#{$prefix}bg-opacity, 1)) !important; /* background-color: RGBA(color.channel($var-color, "red"), color.channel($var-color, "green"), color.channel($var-color, "blue"), var(--#{$prefix}bg-opacity, 1)) !important; */ } } @each $variant, $variant-palette in $adastra_app-variants { .text-bg-#{"" + $variant} { color: mat.m2-get-contrast-color-from-palette($variant-palette, 500) !important; } } @import 'spinner'; @import 'icomoon'; @import 'header'; @import 'sidebar'; @import 'tables'; @import 'charts'; @import 'responsive'; @import 'app'; //@import "../styles/icons/material-design-iconic-font/css/materialdesignicons.min.css";