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

UX Font Sizes

Browse Source 
UX Font Sizes
pull/260/head
Shahana Farooqui 5 years ago
parent 17c3d1ade1
commit 9286d91031
13 changed files with 397 additions and 204 deletions
Show Stats Download Patch File Download Diff File

4
angular/index.html
Unescape Escape View File

@ -9,8 +9,8 @@
<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.cfd1bf8aa657426ee65b.css"></head>
<link rel="stylesheet" href="styles.af37888ae0a50662e82c.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.1624511154052a66aafa.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.7b048f9b5dcb992c42b6.js"></script></body>
<script src="runtime.1624511154052a66aafa.js"></script><script src="polyfills-es5.763f4f23e8aee5ec234d.js" nomodule></script><script src="polyfills.e59b6f9dc696bd89cf7f.js"></script><script src="main.c8f6a99c798effd26e08.js"></script></body>
</html>

2
angular/main.7b048f9b5dcb992c42b6.js → angular/main.c8f6a99c798effd26e08.js
View File

File diff suppressed because one or more lines are too long

1
angular/styles.af37888ae0a50662e82c.css
View File

File diff suppressed because one or more lines are too long

1
angular/styles.cfd1bf8aa657426ee65b.css
View File

File diff suppressed because one or more lines are too long

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

@ -4,12 +4,13 @@
<button *ngIf="settings.menu === 'Vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
<mat-icon>menu</mat-icon>
</button>
<svg *ngIf="settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" class="top-toolbar-icon icon-pinned mr-1" viewBox="0 0 24 24"
(click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
<div *ngIf="appConfig.nodes.length > 1" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<svg class="top-toolbar-icon icon-pinned">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
</button>
<div *ngIf="appConfig.nodes.length > 1" fxLayout="row" fxLayoutAlign="space-between center" class="ml-1">
<div *ngFor="let node of appConfig.nodes" tabindex="1" fxFlex="100">
<button [ngClass]="{'selected-node':node.index === selNode.index, 'app-config-nodes': true}" (click)="onSelectionChange(node)" fxLayoutAlign="center center" mat-button type="button">{{node.lnNode}} ({{node.lnImplementation}})</button>
</div>

9
src/app/app.component.scss
Unescape Escape View File

@ -1,11 +1,4 @@
.inline-spinner {
display: inline-flex !important;
top: 0px !important;
}
.icon-pinned {
padding-left: 16px;
width:24px;
height:24px;
cursor:pointer;
top: 0 !important;
}

2
src/app/shared/components/navigation/top-menu/top-menu.component.html
Unescape Escape View File

@ -18,5 +18,5 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="topMenu" class="top-toolbar-icon">
<img src="assets/images/RTL-Helmet_Trans.svg" alt="RTL Logo" style="width:24px;">
<img src="assets/images/RTL-Helmet_Trans.svg" alt="RTL Logo" class="top-toolbar-img">
</button>

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

@ -4,63 +4,10 @@
@import '~@angular/material/theming';
@include mat-core();
$small-typography: mat-typography-config(
$display-4: (font-size: 100px, line-height: 105px, font-weight: 300),
$display-3: (font-size: 50px, line-height: 54px, font-weight: 400),
$display-2: (font-size: 40px, line-height: 45px, font-weight: 400),
$display-1: (font-size: 30px, line-height: 35px, font-weight: 400),
$headline: (font-size: 20px, line-height: 28px, font-weight: 400),
$title: (font-size: 16px, line-height: 28px, font-weight: 500),
$subheading-2: (font-size: 14px, line-height: 25px, font-weight: 400),
$subheading-1: (font-size: 13px, line-height: 23px, font-weight: 400),
$body-2: (font-size: 12px, line-height: 20px, font-weight: 500),
$body-1: (font-size: 12px, line-height: 18px, font-weight: 400),
$caption: (font-size: 10px, line-height: 18px, font-weight: 400),
$button: (font-size: 12px, line-height: 12px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$regular-typography: mat-typography-config(
$display-4: (font-size: 112px, line-height: 112px, font-weight: 300),
$display-3: (font-size: 56px, line-height: 56px, font-weight: 400),
$display-2: (font-size: 45px, line-height: 48px, font-weight: 400),
$display-1: (font-size: 34px, line-height: 40px, font-weight: 400),
$headline: (font-size: 24px, line-height: 32px, font-weight: 400),
$title: (font-size: 20px, line-height: 32px, font-weight: 500),
$subheading-2: (font-size: 16px, line-height: 28px, font-weight: 400),
$subheading-1: (font-size: 15px, line-height: 24px, font-weight: 400),
$body-2: (font-size: 14px, line-height: 24px, font-weight: 500),
$body-1: (font-size: 14px, line-height: 20px, font-weight: 400),
$caption: (font-size: 12px, line-height: 20px, font-weight: 400),
$button: (font-size: 14px, line-height: 14px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$large-typography: mat-typography-config(
$display-4: (font-size: 124px, line-height: 124px, font-weight: 300),
$display-3: (font-size: 62px, line-height: 62px, font-weight: 400),
$display-2: (font-size: 54px, line-height: 60px, font-weight: 400),
$display-1: (font-size: 40px, line-height: 46px, font-weight: 400),
$headline: (font-size: 30px, line-height: 36px, font-weight: 400),
$title: (font-size: 26px, line-height: 38px, font-weight: 500),
$subheading-2: (font-size: 20px, line-height: 32px, font-weight: 400),
$subheading-1: (font-size: 18px, line-height: 28px, font-weight: 400),
$body-2: (font-size: 16px, line-height: 26px, font-weight: 500),
$body-1: (font-size: 16px, line-height: 22px, font-weight: 400),
$caption: (font-size: 14px, line-height: 22px, font-weight: 400),
$button: (font-size: 16px, line-height: 16px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$purple-white-dark-primary: mat-palette($purple-primary, 500, 400, 700);
$purple-white-dark-accent: mat-palette($white-accent, 800, 600, 900);
$purple-white-dark-warn: mat-palette($mat-deep-orange);
@include mat-core($small-typography);
$purple-white-dark-small-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
@include mat-core($regular-typography);
$purple-white-dark-regular-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
@include mat-core($large-typography);
$purple-white-dark-large-theme: mat-dark-theme($purple-white-dark-primary, $purple-white-dark-accent, $purple-white-dark-warn);
$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);

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

@ -38,6 +38,111 @@
@include _mat-toolbar-color($alternate-primary);
}
&.small-font {
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
min-height: $tree-node-height * 0.7;
height: $tree-node-height * 0.7;
}
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
font-size: 1.2rem * 1.1;
}
.validation-error-icon {
font-size: 1.2rem * 1.2;
}
.genseed-message {
font-size: 1.2rem * 1.2;
}
.insecure-message {
font-size: 1.2rem * 1.2;
}
.page-title {
font-size: 1.2rem * 1.1;
}
.mat-icon-button .top-toolbar-icon.icon-pinned, .mat-icon-button .top-toolbar-icon .top-toolbar-img {
font-size: 1.2rem;
}
.fa-icon-small {
font-size: 1.4rem;
}
.mat-icon-button .mat-button-wrapper .top-toolbar-icon.icon-pinned {
font-size: 0.8rem;
}
.top-toolbar-icon .top-toolbar-img {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
}
}
&.regular-font {
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
height: $tree-node-height;
}
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
font-size: 1.4rem * 1.1;
}
.validation-error-icon {
font-size: 1.4rem * 1.2;
}
.genseed-message {
font-size: 1.4rem * 1.2;
}
.insecure-message {
font-size: 1.4rem * 1.2;
}
.page-title {
font-size: 1.4rem * 1.1;
}
.mat-button .mat-icon-button .top-toolbar-icon.icon-pinned, .mat-icon-button .top-toolbar-icon .top-toolbar-img {
font-size: 1.4rem;
}
.fa-icon-small {
font-size: 1.8rem;
}
.top-toolbar-icon.icon-pinned {
font-size: 1.8rem;
}
.top-toolbar-icon .top-toolbar-img {
width: 2.5rem;
height: 2.5rem;
font-size: 1.8rem;
}
}
&.large-font {
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
height: $tree-node-height;
}
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
font-size: 1.6rem * 1.1;
}
.validation-error-icon {
font-size: 1.6rem * 1.2;
}
.genseed-message {
font-size: 1.6rem * 1.2;
}
.insecure-message {
font-size: 1.6rem * 1.2;
}
.page-title {
margin-top: 0.5rem;
font-size: 1.6rem * 1.1;
}
.fa-icon-small {
font-size: 2.2rem;
}
.top-toolbar-icon.icon-pinned {
font-size: 2rem;
}
.top-toolbar-icon .top-toolbar-img {
width: 3rem;
height: 3rem;
font-size: 2rem;
}
}
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
stroke: mat-color($foreground, text);
}
@ -71,10 +176,6 @@
border-bottom: 2px solid mat-color($primary);
}
.mat-button.app-config-nodes:hover, .top-toolbar-icon:hover {
background: mat-color($primary, darker);
}
.mat-button.app-config-nodes.selected-node {
border-bottom: 2px solid mat-color($accent);
}
@ -99,22 +200,9 @@
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
background: none;
font-weight: 900;
font-size: $font-size * 1.1;
}
.material-icons.primary { color: mat-color($primary); }
.material-icons.accent { color: mat-color($accent); }
.validation-error-message {
position: relative;
margin-top: 0.5rem;
width:100%;
color: mat-color($accent);
}
.validation-error-icon {
font-size: $font-size * 1.2;
position: relative;
top: 2px;
left: 0.4rem;
@ -123,13 +211,26 @@
.genseed-message {
width:10%;
color: mat-color($accent);
font-size: $font-size * 1.2;
}
.insecure-message {
width:100%;
color: mat-color($accent);
font-size: $font-size * 1.2;
}
.page-title {
color: mat-color($foreground);
}
.material-icons.primary { color: mat-color($primary); }
.material-icons.accent { color: mat-color($accent); }
.validation-error-message {
position: relative;
margin-top: 0.5rem;
width:100%;
color: mat-color($accent);
}
.mat-vertical-content {
@ -167,9 +268,4 @@
}
}
.page-title {
font-size: $font-size * 1.1;
color: mat-color($foreground);
}
}

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

@ -1,19 +1,19 @@
$font-family: 'Roboto', sans-serif;
$nodes-toolbar-height: 5.2rem;
$horizontal-toolbar-height: 6rem;
$nodes-toolbar-height: 52px;
$horizontal-toolbar-height: 60px;
$font-family: 'Roboto', sans-serif;
$font-size: 1.4rem;
$toolbar-height: 4.8rem;
$regular-sidenav-width: 22rem;
$compact-sidenav-width: 18.5rem;
$mini-sidenav-width: 10rem;
$sidenav-info-height: 9rem;
$settings-nav-width: 15rem;
$gap: 0.8rem;
$toolbar-height: 48px;
$regular-sidenav-width: 220px;
$compact-sidenav-width: 185px;
$mini-sidenav-width: 100px;
$sidenav-info-height: 90px;
$settings-nav-width: 150px;
$gap: 8px;
$icon-size: 3.6rem;
$pubkey-info-height: 1.5rem;
$pubkey-info-height: 15px;
$tree-node-height:48px;
$fa-icon-small-size: 2rem;
$fa-icon-regular-size: 4rem;

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

@ -7,23 +7,11 @@ html {
line-height: 1.5;
overflow-x: hidden;
font-family: $font-family !important;
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
@include respond(tab-land) { // width < 1200?
font-size: 56.25%; //1 rem = 9px, 9/16 = 50%
}
@include respond(tab-port) { // width < 900?
font-size: 50%; //1 rem = 8px, 8/16 = 50%
}
@include respond(big-desktop) {
font-size: 75%; //1rem = 12, 12/16
}
font-size: 62.5%;
}
body {
box-sizing: border-box;
@include respond(tab-port) {
padding: 0;
}
}
.rtl-container{
@ -42,6 +30,102 @@ body {
.mat-nested-tree-node-child>.mat-tree-node {
padding-left: 4rem;
}
&.small-font {
.material-icons {
font-size: 1.8rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
font-size: 1.2rem !important;
}
.logo {
font-size: 1.2rem * 2;
}
.font-60-percent {
font-size: 1.2rem * 0.6;
}
.fa-icon-regular {
font-size: 1.2rem * 1.75;
}
.icon-large {
font-size: 1.2rem * 5;
}
.icon-small {
font-size: 1.2rem * 1.5 !important;
}
.icon-smaller {
font-size: 1.2rem * 0.75 !important;
}
.size-triple {
font-size: 1.2rem * 3;
}
.mat-icon-36 {
font-size: 1.2rem;
}
}
&.regular-font {
.material-icons {
font-size: 2.8rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
font-size: 1.4rem !important;
}
.logo {
font-size: 1.4rem * 2;
}
.font-60-percent {
font-size: 1.4rem * 0.6;
}
.fa-icon-regular {
font-size: 1.4rem * 1.75;
}
.icon-large {
font-size: 1.4rem * 5;
}
.icon-small {
font-size: 1.4rem * 1.5 !important;
}
.icon-smaller {
font-size: 1.4rem * 0.75 !important;
}
.size-triple {
font-size: 1.4rem * 3;
}
.mat-icon-36 {
font-size: 1.4rem;
}
}
&.large-font {
.material-icons {
font-size: 3.8rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
font-size: 1.6rem !important;
}
.logo {
font-size: 1.6rem * 2;
}
.font-60-percent {
font-size: 1.6rem * 0.6;
}
.fa-icon-regular {
font-size: 1.6rem * 1.75;
}
.icon-large {
font-size: 1.6rem * 5;
}
.icon-small {
font-size: 1.6rem * 1.5 !important;
}
.icon-smaller {
font-size: 1.6rem * 0.75 !important;
}
.size-triple {
font-size: 1.6rem * 3;
}
.mat-icon-36 {
font-size: 1.6rem;
}
}
&.horizontal {
.horizontal-nav {
margin-top: 1px !important;
@ -93,7 +177,6 @@ body {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: $font-size * 1.75;
display: inline-block;
line-height: 1;
text-transform: none;
@ -124,7 +207,7 @@ body {
.inner-sidenav-content {
position: relative;
top:1rem;
top:0;
bottom:0;
left:0;
right:0;
@ -159,10 +242,6 @@ body {
}
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
font-size: $font-size !important;
}
.padding-gap {
padding: $gap !important;
}
@ -177,12 +256,6 @@ body {
max-height: 3.6rem;
}
.logo {
font-size: $font-size * 2;
font-weight: 700;
letter-spacing: 1px;
}
.mat-card {
padding: 1.2rem 2.4rem !important;
overflow: hidden;
@ -235,8 +308,12 @@ body {
margin-top: 1px !important;
}
.mt-2px {
margin-top: 2px !important;
}
.mt-1 {
margin-top: 0.9rem !important;
margin-top: 0.5rem !important;
}
.mb-1 {
@ -264,7 +341,7 @@ body {
}
.mt-2 {
margin-top: 1.6rem !important;
margin-top: 1rem !important;
}
.mt-minus-1 {
@ -323,6 +400,10 @@ body {
padding-right: 0.9rem !important;
}
.pr-4 {
padding-right: 4rem !important;
}
.pr-4px {
padding-right: 0.4rem !important;
}
@ -368,7 +449,7 @@ body {
}
.pr-2 {
padding-right: 1.6rem !important;
padding-right: 2rem !important;
}
.pr-5 {
@ -466,10 +547,6 @@ body {
cursor: not-allowed !important;
}
.font-60-percent {
font-size: $font-size * 0.6;
}
.inline-flex {
display: inline-flex !important;
}
@ -592,30 +669,6 @@ body {
max-width: $fa-icon-small-size;
}
.fa-icon-regular {
min-width: $fa-icon-regular-size;
width: $fa-icon-regular-size;
max-width: $fa-icon-regular-size;
font-size: $font-size * 1.75;
}
.icon-large {
font-size: $font-size * 5;
margin-left: -100%;
}
.icon-small {
height: 2rem !important;
width: 2rem !important;
font-size: $font-size * 1.5 !important;
}
.icon-smaller {
height: 1rem !important;
width: 1rem !important;
font-size: $font-size * 0.75 !important;
}
.copy-icon {
position: relative;
top: 0.5rem;
@ -646,8 +699,9 @@ body {
100% {-webkit-transform: rotate(360deg)}
}
.size-triple {
font-size: $font-size * 3;
.top-toolbar-icon .top-toolbar-img {
padding-right: 0.7rem;
cursor:pointer;
}
.mt-minus-5 {
@ -685,7 +739,6 @@ a {
}
.mat-tree-node, .mat-nested-tree-node-parent {
height: 4.8rem;
padding: 0 1.2rem 0 1.2rem;
cursor: pointer;
}
@ -701,12 +754,6 @@ a {
height: $sidenav-info-height;
}
.mat-icon-36 {
width: $icon-size !important;
height: $icon-size !important;
font-size: $icon-size;
}
.flex-wrap {
flex-wrap: wrap !important;
}
@ -736,3 +783,40 @@ tr.mat-row:hover {
.settings.mat-sidenav .mat-drawer-inner-container {
overflow: hidden;
}
.top-toolbar-icon.icon-pinned {
width: 3rem;
height: 3rem;
padding: 0.4rem 0 0 1.5rem;
cursor:pointer;
}
.logo {
font-weight: 700;
letter-spacing: 1px;
}
.fa-icon-regular {
min-width: $fa-icon-regular-size;
width: $fa-icon-regular-size;
max-width: $fa-icon-regular-size;
}
.icon-large {
margin-left: -100%;
}
.icon-small {
height: 2rem !important;
width: 2rem !important;
}
.icon-smaller {
height: 1rem !important;
width: 1rem !important;
}
.mat-icon-36 {
width: $icon-size !important;
height: $icon-size !important;
}

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

@ -1,48 +1,73 @@
@import '~@angular/material/theming';
@include mat-core();
@import 'change-theme';
@import 'typography';
.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-small-theme);
@include change-theme($purple-white-dark-small-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, $alternate-blue-light-theme);
&.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);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.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);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.light-blue{
@import "../skins/light-blue";
@include angular-material-theme($blue-light-theme);
@include change-theme($blue-light-theme, $alternate-blue-light-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.light-teal{
@import "../skins/light-teal";
@include angular-material-theme($teal-light-theme);
@include change-theme($teal-light-theme, $alternate-teal-light-theme);
@import "../skins/light-teal";
@include angular-material-theme($teal-light-theme);
@include change-theme($teal-light-theme, $alternate-teal-light-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.light-blue-gray{
@import "../skins/light-bluegray";
@include angular-material-theme($blue-gray-light-theme);
@include change-theme($blue-gray-light-theme, $alternate-blue-gray-light-theme);
@import "../skins/light-bluegray";
@include angular-material-theme($blue-gray-light-theme);
@include change-theme($blue-gray-light-theme, $alternate-blue-gray-light-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.dark-blue{
@import "../skins/dark-blue";
@include angular-material-theme($blue-dark-theme);
@include change-theme($blue-dark-theme, $alternate-blue-dark-theme);
@import "../skins/dark-blue";
@include angular-material-theme($blue-dark-theme);
@include change-theme($blue-dark-theme, $alternate-blue-dark-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.dark-green{
@import "../skins/dark-green";
@include angular-material-theme($green-dark-theme);
@include change-theme($green-dark-theme, $alternate-green-dark-theme);
@import "../skins/dark-green";
@include angular-material-theme($green-dark-theme);
@include change-theme($green-dark-theme, $alternate-green-dark-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
&.dark-pink{
@import "../skins/dark-pink";
@include angular-material-theme($pink-dark-theme);
@include change-theme($pink-dark-theme, $alternate-pink-dark-theme);
@import "../skins/dark-pink";
@include angular-material-theme($pink-dark-theme);
@include change-theme($pink-dark-theme, $alternate-pink-dark-theme);
&.small-font {@include mat-core($small-typography);}
&.regular-font {@include mat-core($regular-typography);}
&.large-font {@include mat-core($large-typography);}
}
}

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

@ -0,0 +1,47 @@
$small-typography: mat-typography-config(
$display-4: (font-size: 100px, line-height: 105px, font-weight: 300),
$display-3: (font-size: 50px, line-height: 54px, font-weight: 400),
$display-2: (font-size: 40px, line-height: 45px, font-weight: 400),
$display-1: (font-size: 30px, line-height: 35px, font-weight: 400),
$headline: (font-size: 20px, line-height: 28px, font-weight: 400),
$title: (font-size: 16px, line-height: 28px, font-weight: 500),
$subheading-2: (font-size: 14px, line-height: 25px, font-weight: 400),
$subheading-1: (font-size: 13px, line-height: 23px, font-weight: 400),
$body-2: (font-size: 12px, line-height: 20px, font-weight: 500),
$body-1: (font-size: 12px, line-height: 18px, font-weight: 400),
$caption: (font-size: 10px, line-height: 18px, font-weight: 400),
$button: (font-size: 12px, line-height: 12px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$regular-typography: mat-typography-config(
$display-4: (font-size: 112px, line-height: 112px, font-weight: 300),
$display-3: (font-size: 56px, line-height: 56px, font-weight: 400),
$display-2: (font-size: 45px, line-height: 48px, font-weight: 400),
$display-1: (font-size: 34px, line-height: 40px, font-weight: 400),
$headline: (font-size: 24px, line-height: 32px, font-weight: 400),
$title: (font-size: 20px, line-height: 32px, font-weight: 500),
$subheading-2: (font-size: 16px, line-height: 28px, font-weight: 400),
$subheading-1: (font-size: 15px, line-height: 24px, font-weight: 400),
$body-2: (font-size: 14px, line-height: 24px, font-weight: 500),
$body-1: (font-size: 14px, line-height: 20px, font-weight: 400),
$caption: (font-size: 12px, line-height: 20px, font-weight: 400),
$button: (font-size: 14px, line-height: 14px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
$large-typography: mat-typography-config(
$display-4: (font-size: 124px, line-height: 124px, font-weight: 300),
$display-3: (font-size: 62px, line-height: 62px, font-weight: 400),
$display-2: (font-size: 54px, line-height: 60px, font-weight: 400),
$display-1: (font-size: 40px, line-height: 46px, font-weight: 400),
$headline: (font-size: 30px, line-height: 36px, font-weight: 400),
$title: (font-size: 26px, line-height: 38px, font-weight: 500),
$subheading-2: (font-size: 20px, line-height: 32px, font-weight: 400),
$subheading-1: (font-size: 18px, line-height: 28px, font-weight: 400),
$body-2: (font-size: 16px, line-height: 26px, font-weight: 500),
$body-1: (font-size: 16px, line-height: 22px, font-weight: 400),
$caption: (font-size: 14px, line-height: 22px, font-weight: 400),
$button: (font-size: 16px, line-height: 16px, font-weight: 500),
$input: (font-size: inherit, line-height: 1.125, font-weight: 400)
);
Write Preview
Loading…
Cancel
Save