Init app
This commit is contained in:
Peter Rossa
446
rossa-tech-cli/src/styles.scss
Normal file
446
rossa-tech-cli/src/styles.scss
Normal file
@@ -0,0 +1,446 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
|
||||
|
||||
$mat-primary: (
|
||||
50: #e0edf7,
|
||||
100: #b3d2ec,
|
||||
200: #80b4df,
|
||||
300: #4d96d2,
|
||||
400: #2680c9,
|
||||
500: #0069bf,
|
||||
600: #0061b9,
|
||||
700: #0056b1,
|
||||
800: #004ca9,
|
||||
900: #003b9b,
|
||||
A100: #c6d7ff,
|
||||
A200: #93b3ff,
|
||||
A400: #6090ff,
|
||||
A700: #477eff,
|
||||
contrast: (
|
||||
50: #333333,
|
||||
100: #333333,
|
||||
200: #333333,
|
||||
300: #333333,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #333333,
|
||||
A200: #333333,
|
||||
A400: #333333,
|
||||
A700: #ffffff,
|
||||
),
|
||||
);
|
||||
|
||||
$mat-accent: (
|
||||
50: #f1f8e5,
|
||||
100: #ddedbf,
|
||||
200: #c6e194,
|
||||
300: #afd469,
|
||||
400: #9dcb49,
|
||||
500: #8cc229,
|
||||
600: #84bc24,
|
||||
700: #79b41f,
|
||||
800: #6fac19,
|
||||
900: #5c9f0f,
|
||||
A100: #e7ffcf,
|
||||
A200: #cdff9c,
|
||||
A400: #b3ff69,
|
||||
A700: #a6ff4f,
|
||||
contrast: (
|
||||
50: #333333,
|
||||
100: #333333,
|
||||
200: #333333,
|
||||
300: #333333,
|
||||
400: #333333,
|
||||
500: #333333,
|
||||
600: #333333,
|
||||
700: #333333,
|
||||
800: #333333,
|
||||
900: #ffffff,
|
||||
A100: #333333,
|
||||
A200: #333333,
|
||||
A400: #333333,
|
||||
A700: #333333,
|
||||
),
|
||||
);
|
||||
|
||||
$mat-warn: (
|
||||
50: #fde8e8,
|
||||
100: #f9c6c6,
|
||||
200: #f6a0a0,
|
||||
300: #f27a7a,
|
||||
400: #ef5e5e,
|
||||
500: #ec4141,
|
||||
600: #ea3b3b,
|
||||
700: #e73232,
|
||||
800: #e42a2a,
|
||||
900: #df1c1c,
|
||||
A100: #ffffff,
|
||||
A200: #ffe0e0,
|
||||
A400: #ffadad,
|
||||
A700: #ff9494,
|
||||
contrast: (
|
||||
50: #333333,
|
||||
100: #333333,
|
||||
200: #333333,
|
||||
300: #333333,
|
||||
400: #333333,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #333333,
|
||||
A200: #333333,
|
||||
A400: #333333,
|
||||
A700: #333333,
|
||||
),
|
||||
);
|
||||
|
||||
// http://material-angular-dashboard.creativeit.io/
|
||||
|
||||
// define-typography-level(font-size, line-height, font-weight, letter-spacing)
|
||||
$typography: mat.define-typography-config(
|
||||
$font-family: 'Open Sans',
|
||||
$body-1: mat.define-typography-level(14px, 20px, 400, $letter-spacing: normal),
|
||||
$button: mat.define-typography-level(16px, 20px, 400, $letter-spacing: normal),
|
||||
);
|
||||
|
||||
// $fontConfig: (
|
||||
// display-4: mat.define-typography-level(112px, 112px, 300, 'Open Sans', -0.0134em),
|
||||
// display-3: mat.define-typography-level(56px, 56px, 400, 'Open Sans', -0.0089em),
|
||||
// display-2: mat.define-typography-level(45px, 48px, 400, 'Open Sans', 0.0000em),
|
||||
// display-1: mat.define-typography-level(34px, 40px, 400, 'Open Sans', 0.0074em),
|
||||
// headline: mat.define-typography-level(24px, 32px, 400, 'Open Sans', 0.0000em),
|
||||
// title: mat.define-typography-level(20px, 32px, 500, 'Open Sans', 0.0075em),
|
||||
// subheading-2: mat.define-typography-level(16px, 28px, 400, 'Open Sans', 0.0094em),
|
||||
// subheading-1: mat.define-typography-level(15px, 24px, 500, 'Open Sans', 0.0067em),
|
||||
// body-2: mat.define-typography-level(14px, 24px, 500, 'Open Sans', 0.0179em),
|
||||
// body-1: mat.define-typography-level(14px, 20px, 400, 'Open Sans', 0.0179em),
|
||||
// button: mat.define-typography-level(14px, 14px, 500, 'Open Sans', 0.0893em),
|
||||
// caption: mat.define-typography-level(12px, 20px, 400, 'Open Sans', 0.0333em),
|
||||
// input: mat.define-typography-level(inherit, 1.125, 400, 'Open Sans', 1.5px)
|
||||
// );
|
||||
|
||||
$primary: mat.define-palette($mat-primary);
|
||||
$accent: mat.define-palette($mat-accent);
|
||||
$warn: mat.define-palette($mat-warn);
|
||||
|
||||
$theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
),
|
||||
typography: $typography,
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.core();
|
||||
@include mat.core-theme($theme);
|
||||
@include mat.all-component-themes($theme);
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #2f2f2f;
|
||||
color: #ffffffcc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
//prevent scroll on dialog open
|
||||
html.cdk-global-scrollblock {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
// margin: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
// height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.mat-grid-tile-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
height: 56px;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
// grid list
|
||||
div.mat-grid-tile-content {
|
||||
align-items: unset;
|
||||
}
|
||||
|
||||
//meter-data-list
|
||||
.meter-data-list-wrapper {
|
||||
height: 270px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/*--------------------------------------------------*/
|
||||
|
||||
// /**
|
||||
// * Generated theme by Material Theme Generator
|
||||
// * https://materialtheme.arcsine.dev
|
||||
// * Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzQ0NDQ0NCIsIj9lcjwjYzdjN2M3IiwiO2VyPCMyZDJkMmR$LCIlPmBePCMyYTdhYWIiLCI~ZXI8I2JmZDdlNiIsIjtlcjwjMTk1ZDkxfiwid2Fybj5gXjwjZjE4ZTU0IiwiP2VyPCNmYmRkY2MiLCI7ZXI8I2ViNzEzYX4sIj9UZXh0PCMyYzJjMmMiLCI~PTwjZTllNGU0IiwiO1RleHQ8I2U5ZTRlNCIsIjs9PCMyYzJjMmN$LCJmb250cz5bYEA8KC00IiwiZmFtaWx5PE9wZW4gU2Fuc34sYEA8KC0zIiwiZmFtaWx5PE9wZW4gU2Fuc34sYEA8KC0yIiwiZmFtaWx5PE9wZW4gU2Fuc34sYEA8KC0xIiwiZmFtaWx5PE9wZW4gU2Fuc34sYEA8aGVhZGxpbmUiLCJmYW1pbHk8T3BlbiBTYW5zfixgQDx0aXRsZSIsImZhbWlseTxPcGVuIFNhbnN$LGBAPHN1YiktMiIsImZhbWlseTxPcGVuIFNhbnN$LGBAPHN1YiktMSIsImZhbWlseTxPcGVuIFNhbnN$LGBAPGJvZHktMiIsImZhbWlseTxPcGVuIFNhbnN$LGBAPGJvZHktMSIsImZhbWlseTxPcGVuIFNhbnN$LGBAPGJ1dHRvbiIsImZhbWlseTxPcGVuIFNhbnN$LGBAPGNhcHRpb24iLCJmYW1pbHk8T3BlbiBTYW5zfixgQDxpbnB1dCIsImZhbWlseTxPcGVuIFNhbnMiLCJzaXplPm51bGx9XSwiaWNvbnM8RmlsbGVkIiwiP25lc3M$ZmFsc2UsInZlcnNpb24$MTN9
|
||||
// */
|
||||
|
||||
// @use '@angular/material' as mat;
|
||||
|
||||
// // Include the common styles for Angular Material. We include this here so that you only
|
||||
// // have to load a single css file for Angular Material in your app.
|
||||
|
||||
// // Fonts
|
||||
|
||||
// // Foreground Elements
|
||||
|
||||
// // Light Theme Text
|
||||
// $dark-text: #2c2c2c;
|
||||
// $dark-primary-text: rgba($dark-text, 0.87);
|
||||
// $dark-accent-text: rgba($dark-primary-text, 0.54);
|
||||
// $dark-disabled-text: rgba($dark-primary-text, 0.38);
|
||||
// $dark-dividers: rgba($dark-primary-text, 0.12);
|
||||
// $dark-focused: rgba($dark-primary-text, 0.12);
|
||||
|
||||
// $mat-light-theme-foreground: (
|
||||
// base: black,
|
||||
// divider: $dark-dividers,
|
||||
// dividers: $dark-dividers,
|
||||
// disabled: $dark-disabled-text,
|
||||
// disabled-button: rgba($dark-text, 0.26),
|
||||
// disabled-text: $dark-disabled-text,
|
||||
// elevation: black,
|
||||
// secondary-text: $dark-accent-text,
|
||||
// hint-text: $dark-disabled-text,
|
||||
// accent-text: $dark-accent-text,
|
||||
// icon: $dark-accent-text,
|
||||
// icons: $dark-accent-text,
|
||||
// text: $dark-primary-text,
|
||||
// slider-min: $dark-primary-text,
|
||||
// slider-off: rgba($dark-text, 0.26),
|
||||
// slider-off-active: $dark-disabled-text,
|
||||
// );
|
||||
|
||||
// // Dark Theme text
|
||||
// $light-text: #e9e4e4;
|
||||
// $light-primary-text: $light-text;
|
||||
// $light-accent-text: rgba($light-primary-text, 0.7);
|
||||
// $light-disabled-text: rgba($light-primary-text, 0.5);
|
||||
// $light-dividers: rgba($light-primary-text, 0.12);
|
||||
// $light-focused: rgba($light-primary-text, 0.12);
|
||||
|
||||
// $mat-dark-theme-foreground: (
|
||||
// base: $light-text,
|
||||
// divider: $light-dividers,
|
||||
// dividers: $light-dividers,
|
||||
// disabled: $light-disabled-text,
|
||||
// disabled-button: rgba($light-text, 0.3),
|
||||
// disabled-text: $light-disabled-text,
|
||||
// elevation: black,
|
||||
// hint-text: $light-disabled-text,
|
||||
// secondary-text: $light-accent-text,
|
||||
// accent-text: $light-accent-text,
|
||||
// icon: $light-text,
|
||||
// icons: $light-text,
|
||||
// text: $light-text,
|
||||
// slider-min: $light-text,
|
||||
// slider-off: rgba($light-text, 0.3),
|
||||
// slider-off-active: rgba($light-text, 0.3),
|
||||
// );
|
||||
|
||||
// // Background config
|
||||
// // Light bg
|
||||
// $light-background: #e9e4e4;
|
||||
// $light-bg-darker-5: darken($light-background, 5%);
|
||||
// $light-bg-darker-10: darken($light-background, 10%);
|
||||
// $light-bg-darker-20: darken($light-background, 20%);
|
||||
// $light-bg-darker-30: darken($light-background, 30%);
|
||||
// $light-bg-lighter-5: lighten($light-background, 5%);
|
||||
// $dark-bg-tooltip: lighten(#2c2c2c, 20%);
|
||||
// $dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
|
||||
// $dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
|
||||
|
||||
// $mat-light-theme-background: (
|
||||
// background: $light-background,
|
||||
// status-bar: $light-bg-darker-20,
|
||||
// app-bar: $light-bg-darker-5,
|
||||
// hover: $dark-bg-alpha-4,
|
||||
// card: $light-bg-lighter-5,
|
||||
// dialog: $light-bg-lighter-5,
|
||||
// tooltip: $dark-bg-tooltip,
|
||||
// disabled-button: $dark-bg-alpha-12,
|
||||
// raised-button: $light-bg-lighter-5,
|
||||
// focused-button: $dark-focused,
|
||||
// selected-button: $light-bg-darker-20,
|
||||
// selected-disabled-button: $light-bg-darker-30,
|
||||
// disabled-button-toggle: $light-bg-darker-10,
|
||||
// unselected-chip: $light-bg-darker-10,
|
||||
// disabled-list-option: $light-bg-darker-10,
|
||||
// );
|
||||
|
||||
// // Dark bg
|
||||
// $dark-background: #2c2c2c;
|
||||
// $dark-bg-lighter-5: lighten($dark-background, 5%);
|
||||
// $dark-bg-lighter-10: lighten($dark-background, 10%);
|
||||
// $dark-bg-lighter-20: lighten($dark-background, 20%);
|
||||
// $dark-bg-lighter-30: lighten($dark-background, 30%);
|
||||
// $light-bg-alpha-4: rgba(#e9e4e4, 0.04);
|
||||
// $light-bg-alpha-12: rgba(#e9e4e4, 0.12);
|
||||
|
||||
// // Background palette for dark themes.
|
||||
// $mat-dark-theme-background: (
|
||||
// background: $dark-background,
|
||||
// status-bar: $dark-bg-lighter-20,
|
||||
// app-bar: $dark-bg-lighter-5,
|
||||
// hover: $light-bg-alpha-4,
|
||||
// card: $dark-bg-lighter-5,
|
||||
// dialog: $dark-bg-lighter-5,
|
||||
// tooltip: $dark-bg-lighter-20,
|
||||
// disabled-button: $light-bg-alpha-12,
|
||||
// raised-button: $dark-bg-lighter-5,
|
||||
// focused-button: $light-focused,
|
||||
// selected-button: $dark-bg-lighter-20,
|
||||
// selected-disabled-button: $dark-bg-lighter-30,
|
||||
// disabled-button-toggle: $dark-bg-lighter-10,
|
||||
// unselected-chip: $dark-bg-lighter-20,
|
||||
// disabled-list-option: $dark-bg-lighter-10,
|
||||
// );
|
||||
|
||||
// // Compute font config
|
||||
// @include mat.core();
|
||||
// // @include mat.core($fontConfig);
|
||||
|
||||
// // Theme Config
|
||||
|
||||
// body {
|
||||
// --primary-color: #444444;
|
||||
// --primary-lighter-color: #c7c7c7;
|
||||
// --primary-darker-color: #2d2d2d;
|
||||
// --text-primary-color: #{$light-primary-text};
|
||||
// --text-primary-lighter-color: #{$dark-primary-text};
|
||||
// --text-primary-darker-color: #{$light-primary-text};
|
||||
// }
|
||||
// $mat-primary: (
|
||||
// main: #444444,
|
||||
// lighter: #c7c7c7,
|
||||
// darker: #2d2d2d,
|
||||
// 200: #444444, // For slide toggle,
|
||||
// contrast : (
|
||||
// main: $light-primary-text,
|
||||
// lighter: $dark-primary-text,
|
||||
// darker: $light-primary-text,
|
||||
// )
|
||||
// );
|
||||
// $theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
|
||||
|
||||
// body {
|
||||
// --accent-color: #2a7aab;
|
||||
// --accent-lighter-color: #bfd7e6;
|
||||
// --accent-darker-color: #195d91;
|
||||
// --text-accent-color: #{$light-primary-text};
|
||||
// --text-accent-lighter-color: #{$dark-primary-text};
|
||||
// --text-accent-darker-color: #{$light-primary-text};
|
||||
// }
|
||||
// $mat-accent: (
|
||||
// main: #2a7aab,
|
||||
// lighter: #bfd7e6,
|
||||
// darker: #195d91,
|
||||
// 200: #2a7aab, // For slide toggle,
|
||||
// contrast : (
|
||||
// main: $light-primary-text,
|
||||
// lighter: $dark-primary-text,
|
||||
// darker: $light-primary-text,
|
||||
// )
|
||||
// );
|
||||
// $theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
|
||||
|
||||
// body {
|
||||
// --warn-color: #f18e54;
|
||||
// --warn-lighter-color: #fbddcc;
|
||||
// --warn-darker-color: #eb713a;
|
||||
// --text-warn-color: #{$dark-primary-text};
|
||||
// --text-warn-lighter-color: #{$dark-primary-text};
|
||||
// --text-warn-darker-color: #{$dark-primary-text};
|
||||
// }
|
||||
// $mat-warn: (
|
||||
// main: #f18e54,
|
||||
// lighter: #fbddcc,
|
||||
// darker: #eb713a,
|
||||
// 200: #f18e54, // For slide toggle,
|
||||
// contrast : (
|
||||
// main: $dark-primary-text,
|
||||
// lighter: $dark-primary-text,
|
||||
// darker: $dark-primary-text,
|
||||
// )
|
||||
// );
|
||||
// $theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
|
||||
// ;
|
||||
|
||||
// $theme: (
|
||||
// primary: $theme-primary,
|
||||
// accent: $theme-accent,
|
||||
// warn: $theme-warn,
|
||||
// is-dark: true,
|
||||
// foreground: $mat-dark-theme-foreground,
|
||||
// background: $mat-dark-theme-background,
|
||||
// );
|
||||
// $altTheme: (
|
||||
// primary: $theme-primary,
|
||||
// accent: $theme-accent,
|
||||
// warn: $theme-warn,
|
||||
// is-dark: false,
|
||||
// foreground: $mat-light-theme-foreground,
|
||||
// background: $mat-light-theme-background,
|
||||
// );
|
||||
|
||||
// // Theme Init
|
||||
// @include mat.all-component-themes($theme);
|
||||
|
||||
// .theme-alternate {
|
||||
// @include mat.all-component-themes($altTheme);
|
||||
// }
|
||||
|
||||
// // Specific component overrides, pieces that are not in line with the general theming
|
||||
|
||||
// // Handle buttons appropriately, with respect to line-height
|
||||
// .mat-raised-button, .mat-stroked-button, .mat-flat-button {
|
||||
// padding: 0 1.15em;
|
||||
// margin: 0 .65em;
|
||||
// min-width: 3em;
|
||||
// line-height: 36.4px
|
||||
// }
|
||||
|
||||
// .mat-standard-chip {
|
||||
// padding: .5em .85em;
|
||||
// min-height: 2.5em;
|
||||
// }
|
||||
|
||||
// .material-icons {
|
||||
// font-size: 24px;
|
||||
// font-family: 'Material Icons', 'Material Icons';
|
||||
// .mat-badge-content {
|
||||
// font-family: 'Open Sans';
|
||||
// }
|
||||
// }
|
||||
Reference in New Issue
Block a user