200 lines
7.1 KiB
SCSS
200 lines
7.1 KiB
SCSS
/*
|
|
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";
|