Archives
/
RTL
mirror of https://github.com/Ride-The-Lightning/RTL
2
0
Fork 0
Code Issues Releases Wiki Activity

initial draft

Browse Source 
initial draft
pull/260/head
Shahana Farooqui 5 years ago
parent 486807b4b2
commit a8c5280506
55 changed files with 327 additions and 937 deletions
Show Stats Download Patch File Download Diff File

BIN
angular/assets/images/RTL-Helmet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
angular/assets/images/RTL-Helmet_Trans.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
angular/assets/images/favicon/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
angular/assets/images/favicon/android-chrome-512x512.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
angular/assets/images/favicon/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
angular/assets/images/favicon/favicon-16x16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 676 B

BIN
angular/assets/images/favicon/favicon-32x32.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
angular/assets/images/favicon/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
angular/assets/images/favicon/site.webmanifest
Unescape Escape View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

9
angular/index.html
Unescape Escape View File

@ -5,9 +5,12 @@
<title>RTL</title>
<base href="/rtl/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="styles.41a6644c686ce68dce93.css"></head>
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.ded33f2cb836dada7910.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.c588f78aaf36ce63d59d.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.23f7c8bc7bb9dd44ff2c.js"></script></body>
<script src="runtime.c588f78aaf36ce63d59d.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.971e5a69649a6fda0de6.js"></script></body>
</html>

2
angular/main.23f7c8bc7bb9dd44ff2c.js → angular/main.971e5a69649a6fda0de6.js
View File

File diff suppressed because one or more lines are too long

1
angular/styles.41a6644c686ce68dce93.css
View File

File diff suppressed because one or more lines are too long

1
angular/styles.ded33f2cb836dada7910.css
View File

File diff suppressed because one or more lines are too long

2
package-lock.json generated
Unescape Escape View File

@ -1,6 +1,6 @@
{
"name": "rtl",
"version": "0.5.2-beta",
"version": "0.5.3-beta",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
Unescape Escape View File

@ -1,6 +1,6 @@
{
"name": "rtl",
"version": "0.5.2-beta",
"version": "0.5.3-beta",
"license": "MIT",
"scripts": {
"ng": "ng",

25
src/app/app.component.html
Unescape Escape View File

@ -5,7 +5,7 @@
<rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)"></rtl-side-navigation>
</mat-sidenav>
<mat-sidenav-content perfectScrollbar class="overflow-auto">
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" color="primary" class="padding-gap-x">
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary">
<div fxLayoutAlign="center center">
<button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle()">
<mat-icon>menu</mat-icon>
@ -47,3 +47,26 @@
<h4>Loading RTL...</h4>
</div>
</div>
<!-- <div perfectScrollbar id="rtl-container" class="rtl-container purple-white-light-theme">
<mat-toolbar class="bg-alternate-primary toolbar-nodes">
<div class="toolbar-node-info">Node 1</div>
<div class="toolbar-node-info">Node 2</div>
<span class="spacer"></span>
<div fxLayoutAlign="space-between center">
<rtl-top-menu></rtl-top-menu>
</div>
</mat-toolbar>
<mat-sidenav-container class="container">
<mat-sidenav #sidenav class="bg-primary mat-elevation-z24" mode="side">
<p><button mat-raised-button class="bg-accent" (click)="sidenav.toggle()">Toggle</button></p>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="bg-primary toolbar">
<span>Lightning Menu</span>
<span class="spacer"></span>
<p><button mat-raised-button class="btn-primary-darker" (click)="sidenav.toggle()">show public key</button></p>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div> -->

2
src/app/shared/components/settings-nav/settings-nav.component.html
Unescape Escape View File

@ -57,11 +57,13 @@
</div>
<h4>Skins</h4>
<div fxLayout="row" fxLayoutAlign="start start" class="p-0">
<div class="skin dark-purple m-1px" (click)="changeTheme('purple-white-dark-theme')"></div>
<div class="skin dark-blue m-1px" (click)="changeTheme('dark-blue')"></div>
<div class="skin dark-green m-1px" (click)="changeTheme('dark-green')"></div>
<div class="skin dark-pink m-1px" (click)="changeTheme('dark-pink')"></div>
</div>
<div fxLayout="row" fxLayoutAlign="start start" class="p-0">
<div class="skin light-purple m-1px" (click)="changeTheme('purple-white-light-theme')"></div>
<div class="skin light-blue m-1px" (click)="changeTheme('light-blue')"></div>
<div class="skin light-teal m-1px" (click)="changeTheme('light-teal')"></div>
<div class="skin light-blue-gray m-1px" (click)="changeTheme('light-blue-gray')"></div>

50
src/app/shared/theme/skins/bluegray-amber.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-blue-gray, 800),
app-bar: map_get($mat-blue-gray, 700),
background: map_get($mat-blue-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-blue-gray, 200),
dialog: map_get($mat-blue-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-blue-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$amber-bluegray-primary: mat-palette($mat-amber, 500, 100, 700);
$amber-bluegray-accent: mat-palette($mat-purple);
$amber-bluegray-warn: mat-palette($mat-red, A700);
$amber-bluegray-theme: create-custom-theme($amber-bluegray-primary, $amber-bluegray-accent, $amber-bluegray-warn);

50
src/app/shared/theme/skins/bluegray-deeppurple.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-blue-gray, 800),
app-bar: map_get($mat-blue-gray, 700),
background: map_get($mat-blue-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-blue-gray, 200),
dialog: map_get($mat-blue-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-blue-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$deeppurple-bluegray-primary: mat-palette($mat-deep-purple, 600, 100, 900);
$deeppurple-bluegray-accent: mat-palette($mat-pink);
$deeppurple-bluegray-warn: mat-palette($mat-red, A700);
$deeppurple-bluegray-theme: create-custom-theme($deeppurple-bluegray-primary, $deeppurple-bluegray-accent, $deeppurple-bluegray-warn);

50
src/app/shared/theme/skins/bluegray-lightgreen.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-blue-gray, 800),
app-bar: map_get($mat-blue-gray, 700),
background: map_get($mat-blue-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-blue-gray, 200),
dialog: map_get($mat-blue-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-blue-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$lightgreen-bluegray-primary: mat-palette($mat-light-green, 700, 100, 900);
$lightgreen-bluegray-accent: mat-palette($mat-deep-orange);
$lightgreen-bluegray-warn: mat-palette($mat-red, A700);
$lightgreen-bluegray-theme: create-custom-theme($lightgreen-bluegray-primary, $lightgreen-bluegray-accent, $lightgreen-bluegray-warn);

32
src/app/shared/theme/skins/color-swatches/blue-primary.swatch.scss
Unescape Escape View File

@ -0,0 +1,32 @@
$blue-primary: (
50 : #e4e5e6,
100 : #bdbfc1,
200 : #919498,
300 : #64696f,
400 : #434850,
500 : #222831,
600 : #1e242c,
700 : #191e25,
800 : #14181f,
900 : #0c0f13,
A100 : #589bff,
A200 : #257cff,
A400 : #0060f1,
A700 : #0056d7,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);

65
src/app/shared/theme/skins/color-swatches/purple-primary.swatch.scss
Unescape Escape View File

@ -0,0 +1,65 @@
// $purple-primary: (
// 50 : #ebe6ed,
// 100 : #cdc1d3,
// 200 : #ac98b5,
// 300 : #8b6f97,
// 400 : #725081,
// 500 : #59316b,
// 600 : #512c63,
// 700 : #482558,
// 800 : #3e1f4e,
// 900 : #442553, // #2e133c,
// A100 : #cd7aff,
// A200 : #ba47ff,
// A400 : #a814ff,
// A700 : #9d00f9, // #222831,
// contrast: (
// 50 : #000000,
// 100 : #000000,
// 200 : #000000,
// 300 : #ffffff,
// 400 : #ffffff,
// 500 : #ffffff,
// 600 : #ffffff,
// 700 : #ffffff,
// 800 : #ffffff,
// 900 : #ffffff,
// A100 : #000000,
// A200 : #ffffff,
// A400 : #ffffff,
// A700 : #ffffff,
// )
// );
$purple-primary: (
50 : #eceaf4,
100 : #cfcae4,
200 : #afa7d2,
300 : #8e83c0,
400 : #7669b3,
500 : #5e4ea5,
600 : #56479d,
700 : #4c3d93,
800 : #42358a,
900 : #312579,
A100 : #c3baff,
A200 : #9787ff,
A400 : #6b54ff,
A700 : #553bff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);

32
src/app/shared/theme/skins/color-swatches/white-accent.swatch.scss
Unescape Escape View File

@ -0,0 +1,32 @@
$white-accent: (
50 : #ffffff,
100 : #ffffff,
200 : #ffffff,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
contrast: (
50 : #ebe6ed,
100 : #cdc1d3,
200 : #ac98b5,
300 : #8b6f97,
400 : #725081,
500 : #59316b,
600 : #512c63,
700 : #482558,
800 : #3e1f4e,
900 : #2e133c,
A100 : #cd7aff,
A200 : #ba47ff,
A400 : #a814ff,
A700 : #9d00f9,
)
);

12
src/app/shared/theme/skins/dark-blue.scss
Unescape Escape View File

@ -1,5 +1,15 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$blue-dark-primary: mat-palette($mat-light-blue, 700, 300, 900);
$blue-dark-accent: mat-palette($mat-amber, A100, 900, A700);
$blue-dark-warn: mat-palette($mat-red, A200);
$blue-dark-theme: mat-dark-theme($blue-dark-primary, $blue-dark-accent, $blue-dark-warn);
$blue-dark-theme: mat-dark-theme($blue-dark-primary, $blue-dark-accent, $blue-dark-warn);
$alternate-blue-dark-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-blue-dark-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-blue-dark-warn: mat-palette($mat-deep-orange);
$alternate-blue-dark-theme: mat-dark-theme($alternate-blue-dark-primary, $alternate-blue-dark-accent, $alternate-blue-dark-warn);

13
src/app/shared/theme/skins/dark-green.scss
Unescape Escape View File

@ -1,5 +1,16 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$green-dark-primary: mat-palette($mat-teal, 800, 300, 900);
$green-dark-accent: mat-palette($mat-amber, A100, 900, A700);
$green-dark-warn: mat-palette($mat-red, A200);
$green-dark-theme: mat-dark-theme($green-dark-primary, $green-dark-accent, $green-dark-warn);
$alternate-green-dark-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-green-dark-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-green-dark-warn: mat-palette($mat-deep-orange);
$alternate-green-dark-theme: mat-dark-theme($alternate-green-dark-primary, $alternate-green-dark-accent, $alternate-green-dark-warn);
$green-dark-theme: mat-dark-theme($green-dark-primary, $green-dark-accent, $green-dark-warn);

12
src/app/shared/theme/skins/dark-pink.scss
Unescape Escape View File

@ -1,5 +1,15 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$pink-dark-primary: mat-palette($mat-pink, 700, 400, 900);
$pink-dark-accent: mat-palette($mat-blue-grey, 700, 500, 900);
$pink-dark-warn: mat-palette($mat-red, A200);
$pink-dark-theme: mat-dark-theme($pink-dark-primary, $pink-dark-accent, $pink-dark-warn);
$pink-dark-theme: mat-dark-theme($pink-dark-primary, $pink-dark-accent, $pink-dark-warn);
$alternate-pink-dark-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-pink-dark-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-pink-dark-warn: mat-palette($mat-deep-orange);
$alternate-pink-dark-theme: mat-dark-theme($alternate-pink-dark-primary, $alternate-pink-dark-accent, $alternate-pink-dark-warn);

15
src/app/shared/theme/skins/dark-purple.scss
Unescape Escape View File

@ -0,0 +1,15 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$purple-white-dark-primary: mat-palette($purple-primary, 500, 300, 900);
$purple-white-dark-accent: mat-palette($white-accent, 800, 600, 900);
$purple-white-dark-warn: mat-palette($mat-deep-orange);
$purple-white-dark-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
$alternate-purple-white-dark-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-purple-white-dark-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-purple-white-dark-warn: mat-palette($mat-deep-orange);
$alternate-purple-white-dark-theme: mat-dark-theme($alternate-purple-white-dark-primary, $alternate-purple-white-dark-accent, $alternate-purple-white-dark-warn);

50
src/app/shared/theme/skins/gray-blue.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-gray, 800),
app-bar: map_get($mat-gray, 700),
background: map_get($mat-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-gray, 200),
dialog: map_get($mat-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$blue-gray-primary: mat-palette($mat-cyan, 500, 200, 900);
$blue-gray-accent: mat-palette($mat-deep-orange);
$blue-gray-warn: mat-palette($mat-red, A700);
$blue-gray-theme: create-custom-theme($blue-gray-primary, $blue-gray-accent, $blue-gray-warn);

50
src/app/shared/theme/skins/gray-lime.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-gray, 800),
app-bar: map_get($mat-gray, 700),
background: map_get($mat-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-gray, 200),
dialog: map_get($mat-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$lime-gray-primary: mat-palette($mat-lime, 300, 100, 700);
$lime-gray-accent: mat-palette($mat-purple);
$lime-gray-warn: mat-palette($mat-red, A700);
$lime-gray-theme: create-custom-theme($lime-gray-primary, $lime-gray-accent, $lime-gray-warn);

50
src/app/shared/theme/skins/gray-purple.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-gray, 800),
app-bar: map_get($mat-gray, 700),
background: map_get($mat-gray, 100),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-gray, 200),
dialog: map_get($mat-gray, 200),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$purple-gray-primary: mat-palette($mat-purple, 700, 100, 900);
$purple-gray-accent: mat-palette($mat-amber);
$purple-gray-warn: mat-palette($mat-red, A700);
$purple-gray-theme: create-custom-theme($purple-gray-primary, $purple-gray-accent, $purple-gray-warn);

12
src/app/shared/theme/skins/light-blue.scss
Unescape Escape View File

@ -1,3 +1,9 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$custom-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
@ -46,5 +52,9 @@ $custom-light-theme-foreground: (
$blue-light-primary: mat-palette($mat-indigo, 800, 300, 900);
$blue-light-accent: mat-palette($mat-pink, A200, A100, A400);
$blue-light-warn: mat-palette($mat-red, 500);
$blue-light-theme: create-custom-theme($blue-light-primary, $blue-light-accent, $blue-light-warn);
$alternate-blue-light-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-blue-light-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-blue-light-warn: mat-palette($mat-deep-orange);
$alternate-blue-light-theme: mat-dark-theme($alternate-blue-light-primary, $alternate-blue-light-accent, $alternate-blue-light-warn);

12
src/app/shared/theme/skins/light-bluegray.scss
Unescape Escape View File

@ -1,3 +1,9 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$custom-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
@ -46,5 +52,9 @@ $custom-light-theme-foreground: (
$blue-gray-light-primary: mat-palette($mat-blue-gray, 800, 200, 900);
$blue-gray-light-accent: mat-palette($mat-green, 600, 300, 900);
$blue-gray-light-warn: mat-palette($mat-deep-orange, A400);
$blue-gray-light-theme: create-custom-theme($blue-gray-light-primary, $blue-gray-light-accent, $blue-gray-light-warn);
$blue-gray-light-theme: create-custom-theme($blue-gray-light-primary, $blue-gray-light-accent, $blue-gray-light-warn);
$alternate-blue-gray-light-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-blue-gray-light-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-blue-gray-light-warn: mat-palette($mat-deep-orange);
$alternate-blue-gray-light-theme: mat-dark-theme($alternate-blue-gray-light-primary, $alternate-blue-gray-light-accent, $alternate-blue-gray-light-warn);

15
src/app/shared/theme/skins/light-purple.scss
Unescape Escape View File

@ -0,0 +1,15 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$purple-white-light-primary: mat-palette($purple-primary, 500, 300, 900);
$purple-white-light-accent: mat-palette($white-accent, 800, 600, 900);
$purple-white-light-warn: mat-palette($mat-deep-orange);
$purple-white-light-theme: mat-light-theme($purple-white-light-primary, $purple-white-light-accent, $purple-white-light-warn);
$alternate-purple-white-light-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-purple-white-light-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-purple-white-light-warn: mat-palette($mat-deep-orange);
$alternate-purple-white-light-theme: mat-light-theme($alternate-purple-white-light-primary, $alternate-purple-white-light-accent, $alternate-purple-white-light-warn);

12
src/app/shared/theme/skins/light-teal.scss
Unescape Escape View File

@ -1,3 +1,9 @@
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/white-accent.swatch.scss';
@import './color-swatches/blue-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
$custom-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
@ -46,5 +52,9 @@ $custom-light-theme-foreground: (
$teal-light-primary: mat-palette($mat-teal, 800, 300, 900);
$teal-light-accent: mat-palette($mat-amber, A200, A100, A700);
$teal-light-warn: mat-palette($mat-red, A200);
$teal-light-theme: create-custom-theme($teal-light-primary, $teal-light-accent, $teal-light-warn);
$teal-light-theme: create-custom-theme($teal-light-primary, $teal-light-accent, $teal-light-warn);
$alternate-teal-light-primary: mat-palette($blue-primary, 500, 300, 900);
$alternate-teal-light-accent: mat-palette($white-accent, 800, 600, 900);
$alternate-teal-light-warn: mat-palette($mat-deep-orange);
$alternate-teal-light-theme: mat-dark-theme($alternate-teal-light-primary, $alternate-teal-light-accent, $alternate-teal-light-warn);

83
src/app/shared/theme/skins/self-blue.scss
Unescape Escape View File

@ -1,83 +0,0 @@
$custom-blue: (
50 : #f3f8fc,
100 : #e2eef8,
200 : #cfe2f4,
300 : #bcd6ef,
400 : #adceeb,
500 : #9fc5e8,
600 : #97bfe5,
700 : #8db8e2,
800 : #83b0de,
900 : #72a3d8,
A100 : #ffffff,
A200 : #ffffff,
A400 : #eef6ff,
A700 : #d4e9ff,
contrast: (
50 : #ECEFF1,
100 : #CFD8DC,
200 : #37474F,
300 : #37474F,
400 : #37474F,
500 : #607D8B,
600 : #546E7A,
700 : #455A64,
800 : #37474F,
900 : #263238,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$custom-light-theme-background: (
status-bar: map_get($mat-blue-gray, 300),
app-bar: map_get($mat-blue-gray, 300),
background: map_get($custom-blue, 50),
hover: rgba(black, 0.04),
card: map_get($custom-blue, 100),
dialog: map_get($custom-blue, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-blue-gray, 100),
focused-button: $dark-focused,
selected-button: map_get($mat-blue-gray, 300),
selected-disabled-button: map_get($mat-blue-gray, 400),
disabled-button-toggle: map_get($mat-blue-gray, 200),
unselected-chip: map_get($mat-blue-gray, 300),
disabled-list-option: map_get($mat-blue-gray, 200),
);
$custom-light-theme-foreground: (
base: map_get($mat-blue-gray, 900),
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(map_get($mat-blue-gray, 900), 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(map_get($mat-blue-gray, 900), 0.54),
icons: rgba(map_get($mat-blue-gray, 900), 0.54),
text: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-min: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-off: rgba(map_get($mat-blue-gray, 900), 0.26),
slider-off-active: rgba(map_get($mat-blue-gray, 900), 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-light-theme-foreground,
background: $custom-light-theme-background
);
}
$blue-primary: mat-palette($custom-blue, 200, 50, 800);
$blue-accent: mat-palette($mat-brown, 600, 300, 900);
$blue-warn: mat-palette($mat-red, 500);
$blue-theme: create-custom-theme($blue-primary, $blue-accent, $blue-warn);

83
src/app/shared/theme/skins/self-brown.scss
Unescape Escape View File

@ -1,83 +0,0 @@
$custom-brown: (
50 : #fcf7f3,
100 : #f8ece2,
200 : #f4dfcf,
300 : #efd2bc,
400 : #ebc9ad,
500 : #e8bf9f,
600 : #e5b997,
700 : #e2b18d,
800 : #dea983,
900 : #d89b72,
A100 : #ffffff,
A200 : #ffffff,
A400 : #fff5ee,
A700 : #ffe5d4,
contrast: (
50 : #ECEFF1,
100 : #CFD8DC,
200 : #37474F,
300 : #37474F,
400 : #37474F,
500 : #607D8B,
600 : #546E7A,
700 : #455A64,
800 : #37474F,
900 : #263238,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$custom-light-theme-background: (
status-bar: map_get($mat-blue-gray, 300),
app-bar: map_get($mat-blue-gray, 300),
background: map_get($custom-brown, 50),
hover: rgba(black, 0.04),
card: map_get($custom-brown, 100),
dialog: map_get($custom-brown, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-blue-gray, 100),
focused-button: $dark-focused,
selected-button: map_get($mat-blue-gray, 300),
selected-disabled-button: map_get($mat-blue-gray, 400),
disabled-button-toggle: map_get($mat-blue-gray, 200),
unselected-chip: map_get($mat-blue-gray, 300),
disabled-list-option: map_get($mat-blue-gray, 200),
);
$custom-light-theme-foreground: (
base: map_get($mat-blue-gray, 900),
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(map_get($mat-blue-gray, 900), 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(map_get($mat-blue-gray, 900), 0.54),
icons: rgba(map_get($mat-blue-gray, 900), 0.54),
text: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-min: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-off: rgba(map_get($mat-blue-gray, 900), 0.26),
slider-off-active: rgba(map_get($mat-blue-gray, 900), 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-light-theme-foreground,
background: $custom-light-theme-background
);
}
$brown-primary: mat-palette($custom-brown, 200, 50, 800);
$brown-accent: mat-palette($mat-brown, 600, 300, 900);
$brown-warn: mat-palette($mat-red, 500);
$brown-theme: create-custom-theme($brown-primary, $brown-accent, $brown-warn);

50
src/app/shared/theme/skins/self-gray.scss
Unescape Escape View File

@ -1,50 +0,0 @@
$custom-dark-theme-background: (
status-bar: map_get($mat-gray, 900),
app-bar: map_get($mat-gray, 900),
background: map_get($mat-gray, 50),
hover: rgba(map_get($mat-grey, 900), 0.04),
card: map_get($mat-gray, 100),
dialog: map_get($mat-gray, 100),
disabled-button: rgba(map_get($mat-grey, 900), 0.12),
raised-button: map-get($mat-gray, 600),
focused-button: $light-focused,
selected-button: map_get($mat-grey, 800),
selected-disabled-button: map_get($mat-grey, 600),
disabled-button-toggle: map_get($mat-grey, 900),
unselected-chip: map_get($mat-grey, 700),
disabled-list-option: map_get($mat-grey, 900)
);
$custom-dark-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54),
icons: rgba(black, 0.54),
text: rgba(black, 0.87),
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-dark-theme-foreground,
background: $custom-dark-theme-background
);
}
$gray-primary: mat-palette($mat-gray, 500, 200, 900);
$gray-accent: mat-palette($mat-indigo);
$gray-warn: mat-palette($mat-red, 900);
$gray-theme: create-custom-theme($gray-primary, $gray-accent, $gray-warn);

83
src/app/shared/theme/skins/self-green.scss
Unescape Escape View File

@ -1,83 +0,0 @@
$custom-green: (
50 : #f6faf5,
100 : #e9f3e5,
200 : #dbebd4,
300 : #cce3c2,
400 : #c1ddb5,
500 : #b6d7a8,
600 : #afd3a0,
700 : #a6cd97,
800 : #9ec78d,
900 : #8ebe7d,
A100 : #ffffff,
A200 : #ffffff,
A400 : #e7ffde,
A700 : #d4ffc4,
contrast: (
50 : #ECEFF1,
100 : #CFD8DC,
200 : #37474F,
300 : #37474F,
400 : #37474F,
500 : #607D8B,
600 : #546E7A,
700 : #455A64,
800 : #37474F,
900 : #263238,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$custom-light-theme-background: (
status-bar: map_get($mat-blue-gray, 300),
app-bar: map_get($mat-blue-gray, 300),
background: map_get($custom-green, 50),
hover: rgba(black, 0.04),
card: map_get($custom-green, 100),
dialog: map_get($custom-green, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-blue-gray, 100),
focused-button: $dark-focused,
selected-button: map_get($mat-blue-gray, 300),
selected-disabled-button: map_get($mat-blue-gray, 400),
disabled-button-toggle: map_get($mat-blue-gray, 200),
unselected-chip: map_get($mat-blue-gray, 300),
disabled-list-option: map_get($mat-blue-gray, 200),
);
$custom-light-theme-foreground: (
base: map_get($mat-blue-gray, 900),
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(map_get($mat-blue-gray, 900), 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(map_get($mat-blue-gray, 900), 0.54),
icons: rgba(map_get($mat-blue-gray, 900), 0.54),
text: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-min: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-off: rgba(map_get($mat-blue-gray, 900), 0.26),
slider-off-active: rgba(map_get($mat-blue-gray, 900), 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-light-theme-foreground,
background: $custom-light-theme-background
);
}
$green-primary: mat-palette($custom-green, 200, 50, 800);
$green-accent: mat-palette($mat-brown, 600, 300, 900);
$green-warn: mat-palette($mat-red, 500);
$green-theme: create-custom-theme($green-primary, $green-accent, $green-warn);

83
src/app/shared/theme/skins/self-pink.scss
Unescape Escape View File

@ -1,83 +0,0 @@
$custom-pink: (
50 : #fcf4f5,
100 : #f8e3e6,
200 : #f4d1d6,
300 : #efbec5,
400 : #ebb0b8,
500 : #e8a2ac,
600 : #e59aa5,
700 : #e2909b,
800 : #de8692,
900 : #d87582,
A100 : #ffffff,
A200 : #ffffff,
A400 : #fff1f2,
A700 : #ffd7dc,
contrast: (
50 : #ECEFF1,
100 : #CFD8DC,
200 : #37474F,
300 : #90A4AE,
400 : #78909C,
500 : #607D8B,
600 : #546E7A,
700 : #455A64,
800 : #37474F,
900 : #263238,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$custom-light-theme-background: (
status-bar: map_get($mat-blue-gray, 300),
app-bar: map_get($mat-blue-gray, 300),
background: map_get($custom-pink, 50),
hover: rgba(black, 0.04),
card: map_get($custom-pink, 100),
dialog: map_get($custom-pink, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-blue-gray, 100),
focused-button: $dark-focused,
selected-button: map_get($mat-blue-gray, 300),
selected-disabled-button: map_get($mat-blue-gray, 400),
disabled-button-toggle: map_get($mat-blue-gray, 200),
unselected-chip: map_get($mat-blue-gray, 300),
disabled-list-option: map_get($mat-blue-gray, 200),
);
$custom-light-theme-foreground: (
base: map_get($mat-blue-gray, 900),
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(map_get($mat-blue-gray, 900), 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(map_get($mat-blue-gray, 900), 0.54),
icons: rgba(map_get($mat-blue-gray, 900), 0.54),
text: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-min: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-off: rgba(map_get($mat-blue-gray, 900), 0.26),
slider-off-active: rgba(map_get($mat-blue-gray, 900), 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-light-theme-foreground,
background: $custom-light-theme-background
);
}
$pink-primary: mat-palette($custom-pink, 200, 50, 800);
$pink-accent: mat-palette($mat-blue-gray, 600, 300, 900);
$pink-warn: mat-palette($mat-red, 700);
$pink-theme: create-custom-theme($pink-primary, $pink-accent, $pink-warn);

83
src/app/shared/theme/skins/self-yellow.scss
Unescape Escape View File

@ -1,83 +0,0 @@
$custom-yellow: (
50 : #fffcf3,
100 : #fff7e0,
200 : #fff2cc,
300 : #ffedb8,
400 : #ffe9a8,
500 : #ffe599,
600 : #ffe291,
700 : #ffde86,
800 : #ffda7c,
900 : #ffd36b,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffffff,
A700 : #fffbf3,
contrast: (
50 : #ECEFF1,
100 : #CFD8DC,
200 : #37474F,
300 : #37474F,
400 : #37474F,
500 : #607D8B,
600 : #546E7A,
700 : #455A64,
800 : #37474F,
900 : #263238,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$custom-light-theme-background: (
status-bar: map_get($mat-blue-gray, 300),
app-bar: map_get($mat-blue-gray, 300),
background: map_get($custom-yellow, 50),
hover: rgba(black, 0.04),
card: map_get($custom-yellow, 100),
dialog: map_get($custom-yellow, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-blue-gray, 100),
focused-button: $dark-focused,
selected-button: map_get($mat-blue-gray, 300),
selected-disabled-button: map_get($mat-blue-gray, 400),
disabled-button-toggle: map_get($mat-blue-gray, 200),
unselected-chip: map_get($mat-blue-gray, 300),
disabled-list-option: map_get($mat-blue-gray, 200),
);
$custom-light-theme-foreground: (
base: map_get($mat-blue-gray, 900),
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(map_get($mat-blue-gray, 900), 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(map_get($mat-blue-gray, 900), 0.54),
icons: rgba(map_get($mat-blue-gray, 900), 0.54),
text: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-min: rgba(map_get($mat-blue-gray, 900), 0.87),
slider-off: rgba(map_get($mat-blue-gray, 900), 0.26),
slider-off-active: rgba(map_get($mat-blue-gray, 900), 0.38),
);
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-light-theme-foreground,
background: $custom-light-theme-background
);
}
$yellow-primary: mat-palette($custom-yellow, 200, 50, 800);
$yellow-accent: mat-palette($mat-brown, 600, 300, 900);
$yellow-warn: mat-palette($mat-red, 500);
$yellow-theme: create-custom-theme($yellow-primary, $yellow-accent, $yellow-warn);

25
src/app/shared/theme/styles/change-theme.scss
Unescape Escape View File

@ -1,12 +1,15 @@
@import "constants";
@mixin change-theme($theme) {
@mixin change-theme($theme, $alternate-theme) {
$primary: map-get($theme, primary);
$primary-darker: mat-color(mat-palette($primary, darker));
$primary-node-toolbar : mat-color(mat-palette($primary, A700));
$accent: map-get($theme, accent);
$accent-color: mat-color(mat-palette($accent));
$warn: map-get($theme, warn);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$testColor: mat-palette($mat-red, A200);
$alternate-primary: map-get($alternate-theme, primary);
.bg-primary {
@include _mat-toolbar-color($primary);
@ -20,16 +23,26 @@
@include _mat-toolbar-color($warn);
}
.bg-test {
@include _mat-toolbar-color($testColor);
.btn-primary-darker {
background-color: $primary-darker;
color: $accent-color;
border-radius: 16px;
text-transform: capitalize;
}
.bg-alternate-primary {
@include _mat-toolbar-color($alternate-primary);
}
.toolbar-dropdown-menu {
@include _mat-toolbar-color($alternate-primary);
}
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
stroke: mat-color($foreground, text);
}
.mat-toolbar-row,
.mat-toolbar-single-row {
.mat-toolbar-row, .mat-toolbar-single-row {
height: $toolbar-height;
}

5
src/app/shared/theme/styles/constants.scss
Unescape Escape View File

@ -1,3 +1,8 @@
$font-family: 'Roboto', sans-serif;
$nodes-toolbar-height: 52px;
// $toolbar-height: 60px;
$font-family: 'Roboto', sans-serif;
$font-size: 14px;
$toolbar-height: 46px;

98
src/app/shared/theme/styles/root.scss
Unescape Escape View File

@ -17,6 +17,7 @@ html, body {
left:0;
right:0;
bottom:0;
overflow: hidden;
.mat-menu-panel .mat-menu-content {
padding-top: 0;
padding-bottom: 0;
@ -148,12 +149,6 @@ html, body {
font-size: $font-size !important;
}
.mat-raised-button {
width: 100%;
margin-top: 5px;
max-height: 36px;
}
.padding-gap {
padding: $gap !important;
}
@ -163,7 +158,8 @@ html, body {
}
.mat-raised-button {
margin-top: 5px !important;
width: 100%;
margin-top: 5px;
max-height: 36px;
}
@ -179,10 +175,6 @@ html, body {
border-radius: 2px !important;
}
.mat-toolbar-row, .mat-toolbar-single-row {
height: $toolbar-height;
}
.mat-card-actions{
display: block;
margin-bottom: 16px;
@ -489,6 +481,12 @@ html, body {
overflow: hidden;
cursor: pointer;
border: 16px solid;
&.light-purple{
border-left-color: #ffffff;
border-right-color: #ffffff;
border-top-color: #5e4ea5;
border-bottom-color: #5e4ea5;
}
&.light-blue{
border-top-color: #3F51B5;
border-bottom-color: #3F51B5;
@ -507,6 +505,12 @@ html, body {
border-top-color: #37474F;
border-bottom-color: #37474F;
}
&.dark-purple{
border-left-color: #262626;
border-right-color: #262626;
border-top-color: #5e4ea5;
border-bottom-color: #5e4ea5;
}
&.dark-blue{
border-left-color: #262626;
border-right-color: #262626;
@ -525,78 +529,6 @@ html, body {
border-top-color: #D81B60;
border-bottom-color: #D81B60;
}
&.gray-blue{
border-left-color: #EEEEEE;
border-right-color: #EEEEEE;
border-top-color: #00BCD4;
border-bottom-color: #00BCD4;
}
&.gray-lime{
border-left-color: #EEEEEE;
border-right-color: #EEEEEE;
border-top-color: #DCE775;
border-bottom-color: #DCE775;
}
&.gray-purple{
border-left-color: #EEEEEE;
border-right-color: #EEEEEE;
border-top-color: #512DA8;
border-bottom-color: #512DA8;
}
&.bluegray-amber{
border-left-color: #CFD8DC;
border-right-color: #CFD8DC;
border-top-color: #FFA000;
border-bottom-color: #FFA000;
}
&.bluegray-deeppurple{
border-left-color: #CFD8DC;
border-right-color: #CFD8DC;
border-top-color: #5E35B1;
border-bottom-color: #5E35B1;
}
&.bluegray-lightgreen{
border-left-color: #CFD8DC;
border-right-color: #CFD8DC;
border-top-color: #689F38;
border-bottom-color: #689F38;
}
&.self-gray{
border-left-color: #FAFAFA;
border-right-color: #FAFAFA;
border-top-color: #9e9e9e;
border-bottom-color: #9e9e9e;
}
&.self-green{
border-left-color: #dbebd4;
border-right-color: #dbebd4;
border-top-color: #9ec78d;
border-bottom-color: #9ec78d;
}
&.self-yellow{
border-left-color: #fff2cc;
border-right-color: #fff2cc;
border-top-color: #ffda7c;
border-bottom-color: #ffda7c;
}
&.self-blue{
border-left-color: #cfe2f4;
border-right-color: #cfe2f4;
border-top-color: #83b0de;
border-bottom-color: #83b0de;
}
&.self-brown{
border-left-color: #f4dfcf;
border-right-color: #f4dfcf;
border-top-color: #dea983;
border-bottom-color: #dea983;
}
&.self-pink{
border-left-color: #f4d1d6;
border-right-color: #f4d1d6;
border-top-color: #de8692;
border-bottom-color: #de8692;
}
}
}

86
src/app/shared/theme/styles/theme.scss
Unescape Escape View File

@ -3,94 +3,46 @@
@import 'change-theme';
.rtl-container{
&.purple-white-light-theme {
@debug "PURPLE LIGHT THEME";
@import "../skins/light-purple";
@include angular-material-theme($purple-white-light-theme);
@include change-theme($purple-white-light-theme, $alternate-purple-white-light-theme);
}
&.purple-white-dark-theme {
@debug "PURPLE DARK THEME";
@import "../skins/dark-purple";
@include angular-material-theme($purple-white-dark-theme);
@include change-theme($purple-white-dark-theme, $alternate-purple-white-dark-theme);
}
&.light-blue{
@import "../skins/light-blue";
@include angular-material-theme($blue-light-theme);
@include change-theme($blue-light-theme);
@include change-theme($blue-light-theme, $alternate-blue-light-theme);
}
&.light-teal{
@import "../skins/light-teal";
@include angular-material-theme($teal-light-theme);
@include change-theme($teal-light-theme);
@include change-theme($teal-light-theme, $alternate-teal-light-theme);
}
&.light-blue-gray{
&.light-blue-gray{
@import "../skins/light-bluegray";
@include angular-material-theme($blue-gray-light-theme);
@include change-theme($blue-gray-light-theme);
@include change-theme($blue-gray-light-theme, $alternate-blue-gray-light-theme);
}
&.dark-blue{
@import "../skins/dark-blue";
@include angular-material-theme($blue-dark-theme);
@include change-theme($blue-dark-theme);
@include change-theme($blue-dark-theme, $alternate-blue-dark-theme);
}
&.dark-green{
@import "../skins/dark-green";
@include angular-material-theme($green-dark-theme);
@include change-theme($green-dark-theme);
@include change-theme($green-dark-theme, $alternate-green-dark-theme);
}
&.dark-pink{
@import "../skins/dark-pink";
@include angular-material-theme($pink-dark-theme);
@include change-theme($pink-dark-theme);
}
&.gray-blue{
@import "../skins/gray-blue";
@include angular-material-theme($blue-gray-theme);
@include change-theme($blue-gray-theme);
}
&.gray-lime{
@import "../skins/gray-lime";
@include angular-material-theme($lime-gray-theme);
@include change-theme($lime-gray-theme);
}
&.gray-purple{
@import "../skins/gray-purple";
@include angular-material-theme($purple-gray-theme);
@include change-theme($purple-gray-theme);
}
&.bluegray-amber{
@import "../skins/bluegray-amber";
@include angular-material-theme($amber-bluegray-theme);
@include change-theme($amber-bluegray-theme);
}
&.bluegray-deeppurple{
@import "../skins/bluegray-deeppurple";
@include angular-material-theme($deeppurple-bluegray-theme);
@include change-theme($deeppurple-bluegray-theme);
}
&.bluegray-lightgreen{
@import "../skins/bluegray-lightgreen";
@include angular-material-theme($lightgreen-bluegray-theme);
@include change-theme($lightgreen-bluegray-theme);
}
&.self-gray{
@import "../skins/self-gray";
@include angular-material-theme($gray-theme);
@include change-theme($gray-theme);
}
&.self-green{
@import "../skins/self-green";
@include angular-material-theme($green-theme);
@include change-theme($green-theme);
}
&.self-yellow{
@import "../skins/self-yellow";
@include angular-material-theme($yellow-theme);
@include change-theme($yellow-theme);
}
&.self-blue{
@import "../skins/self-blue";
@include angular-material-theme($blue-theme);
@include change-theme($blue-theme);
}
&.self-brown{
@import "../skins/self-brown";
@include angular-material-theme($brown-theme);
@include change-theme($brown-theme);
}
&.self-pink{
@import "../skins/self-pink";
@include angular-material-theme($pink-theme);
@include change-theme($pink-theme);
@include change-theme($pink-dark-theme, $alternate-pink-dark-theme);
}
}

BIN
src/assets/images/RTL-Helmet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/images/RTL-Helmet_Trans.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/images/favicon/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/favicon/android-chrome-512x512.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
src/assets/images/favicon/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/favicon/favicon-16x16.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 676 B

BIN
src/assets/images/favicon/favicon-32x32.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/favicon/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
src/assets/images/favicon/site.webmanifest
Unescape Escape View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

2
src/environments/version.ts
Unescape Escape View File

@ -1 +1 @@
export const VERSION = '0.5.2-beta';
export const VERSION = '0.5.3-beta';

5
src/index.html
Unescape Escape View File

@ -5,7 +5,10 @@
<title>RTL</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
</head>
<body>
<rtl-app></rtl-app>

Write Preview
Loading…
Cancel
Save