mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2024-11-19 09:50:36 +01:00
UX Font Sizes
UX Font Sizes
This commit is contained in:
Shahana Farooqui
parent
17c3d1ade1
commit
9286d91031
@ -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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
angular/styles.af37888ae0a50662e82c.css
Normal file
1
angular/styles.af37888ae0a50662e82c.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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,7 +200,26 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.validation-error-icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0.4rem;
|
||||
}
|
||||
|
||||
.genseed-message {
|
||||
width:10%;
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
.insecure-message {
|
||||
width:100%;
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: mat-color($foreground);
|
||||
}
|
||||
|
||||
.material-icons.primary { color: mat-color($primary); }
|
||||
@ -113,25 +233,6 @@
|
||||
color: mat-color($accent);
|
||||
}
|
||||
|
||||
.validation-error-icon {
|
||||
font-size: $font-size * 1.2;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0.4rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.mat-vertical-content {
|
||||
padding: 0 0.4rem 0 1.2rem;
|
||||
}
|
||||
@ -167,9 +268,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: $font-size * 1.1;
|
||||
color: mat-color($foreground);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
Normal file
47
src/app/shared/theme/styles/typography.scss
Normal 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)
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user