REMOVE material-dashboard and bootstrap from angular json, add boostrap overwrite files to styles.scss, relevant fixes

This commit is contained in:
mchouliara 2024-10-01 14:30:29 +03:00
parent b165d867f5
commit 9cedd91309
11 changed files with 266 additions and 319 deletions

View File

@ -25,8 +25,6 @@
{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" } { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
], ],
"styles": [ "styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/scss/material-dashboard.scss",
"src/styles.scss", "src/styles.scss",
"node_modules/cookieconsent/build/cookieconsent.min.css" "node_modules/cookieconsent/build/cookieconsent.min.css"
], ],
@ -113,7 +111,6 @@
"tsConfig": "src/tsconfig.spec.json", "tsConfig": "src/tsconfig.spec.json",
"scripts": [], "scripts": [],
"styles": [ "styles": [
"src/assets/scss/material-dashboard.scss",
"src/styles.scss", "src/styles.scss",
"node_modules/tinymce/tinymce.min.js" "node_modules/tinymce/tinymce.min.js"
], ],

View File

@ -1,5 +1,4 @@
@use 'sass:math'; @use 'sass:math';
@import "assets/scss/core/_variables.scss";
.full-width{ .full-width{
width: 100%; width: 100%;

View File

@ -31,8 +31,6 @@
.card-content { .card-content {
text-align: left; text-align: left;
font-weight: 300;
font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: var(--dark-gray); color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;
@ -56,7 +54,6 @@
.personal-usage { .personal-usage {
text-align: left; text-align: left;
font-weight: 300;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0px; letter-spacing: 0px;
color: #000000; color: #000000;
@ -348,7 +345,6 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
.new-releases-content { .new-releases-content {
text-align: left; text-align: left;
font-weight: 300; font-weight: 300;
font-size: 1rem;
letter-spacing: 0px; letter-spacing: 0px;
color: var(--dark-gray); color: var(--dark-gray);
padding-left: 40px; padding-left: 40px;

View File

@ -6,7 +6,7 @@
letter-spacing: 0px; letter-spacing: 0px;
color: var(--dark-gray); color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 2rem 0rem 1.5rem 0rem;
} }
.heading { .heading {

View File

@ -1,6 +1,6 @@
<ng-container> <ng-container>
<nav class="navbar navbar-expand-lg fixed-navbar"> <nav class="fixed-navbar">
<div class="container-fluid h-100"> <div class="container-fluid d-flex align-items-center h-100">
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate"> <button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
<div class="icon-bar1"></div> <div class="icon-bar1"></div>
<div class="icon-bar2"></div> <div class="icon-bar2"></div>
@ -74,7 +74,7 @@
<ng-template #userSettingsTemplate> <ng-template #userSettingsTemplate>
@if(this.isAuthenticated()) { @if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;"> <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent; min-width: 48px; min-height: 48px">
<img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)"> <img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button> </button>
}@else { }@else {

View File

@ -17,6 +17,7 @@ $mat-card-header-size: 40px !default;
display: block; display: block;
} }
} }
.my-mat-card-avatar { .my-mat-card-avatar {
height: $mat-card-header-size; height: $mat-card-header-size;
width: $mat-card-header-size; width: $mat-card-header-size;

View File

@ -253,7 +253,7 @@ a:hover {
letter-spacing: 0px; letter-spacing: 0px;
color: var(--dark-gray); color: var(--dark-gray);
opacity: 1; opacity: 1;
margin: 3rem 0rem 3rem 0rem; margin: 2rem 0rem 1.5rem 0rem;
} }
.link-icon { .link-icon {

View File

@ -1,38 +1,41 @@
$mat-card-header-size: 30px !default; $mat-card-header-size: 30px !default;
.sidebar-wrapper {
.logo-img { height: 100%;
display: flex;
flex-direction: column;
.logo-img {
width: 60px; width: 60px;
display: block; display: block;
max-height: none; max-height: none;
margin-left: 50px; margin-left: 50px;
} }
.logo-img img { .logo-img img {
width: 155px; width: 155px;
top: 0px; top: 0px;
position: inherit; position: inherit;
} }
.sidebarSubtitle p { .sidebarSubtitle p {
margin-left: 20px; margin-left: 20px;
color: rgb(166, 166, 166); color: rgb(166, 166, 166);
} }
.nav hr { .nav hr {
border-top: 1px solid #fff; border-top: 1px solid #fff;
border-bottom: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1;
} }
.sidebar-footer { .sidebar-footer {
margin-top: auto; margin-top: auto;
} }
.sidebar-nav { .sidebar-nav {
background: white; background: white;
height: 70px; height: 70px;
} }
.nav-row { .nav-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -43,9 +46,9 @@ $mat-card-header-size: 30px !default;
color: #000000; color: #000000;
opacity: 1; opacity: 1;
font-size:0.93rem; font-size:0.93rem;
} }
.nav-subrow { .nav-subrow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -55,89 +58,90 @@ $mat-card-header-size: 30px !default;
color: #000000; color: #000000;
opacity: 1; opacity: 1;
font-size:0.93rem; font-size:0.93rem;
} }
.nav-row:hover, .nav-row:focus { .nav-row:hover, .nav-row:focus {
background-color: #ececec; background-color: #ececec;
border-radius: 6px; border-radius: 6px;
} }
.icon { .icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
vertical-align: middle; vertical-align: middle;
color: #6B6B6B; color: #6B6B6B;
} }
.nav-row span { .nav-row span {
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.mat-list { .mat-list {
padding-top: 0px !important; padding-top: 0px !important;
display: flex !important; display: flex !important;
} }
.mat-list div { .mat-list div {
width: 100%; width: 100%;
} }
.my-mat-card-avatar { .my-mat-card-avatar {
height: $mat-card-header-size; height: $mat-card-header-size;
width: $mat-card-header-size; width: $mat-card-header-size;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
margin-right: 7px; margin-right: 7px;
} }
.nav-list-item-hidden { .nav-list-item-hidden {
display: none !important; display: none !important;
} }
.login { .login {
margin-top: 15px !important; margin-top: 15px !important;
} }
.login-label { .login-label {
text-transform: uppercase; text-transform: uppercase;
} }
.firstSubtitle { .firstSubtitle {
margin-top: 20px; margin-top: 20px;
} }
.icon-mask { .icon-mask {
color: #6b6b6b; color: #6b6b6b;
transform: translate(-8px, 8px); transform: translate(-8px, 8px);
} }
.active a { .active a {
font-weight: 700; font-weight: 700;
} }
.active a i { .active a i {
color: var(--primary-color); color: var(--primary-color);
} }
.inner-line { .inner-line {
margin-left: 12px; margin-left: 12px;
margin-right: 10px; margin-right: 10px;
width: 20px; width: 20px;
height: 13px; height: 13px;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
.icon-external { .icon-external {
font-size: 1rem; font-size: 1rem;
padding-left: 0.4rem !important; padding-left: 0.4rem !important;
color: #6b6b6b; color: #6b6b6b;
} }
mat-list-item { mat-list-item {
display: flex !important; display: flex !important;
height: auto !important; height: auto !important;
}
} }
::ng-deep .mat-list-item-content { ::ng-deep .mat-list-item-content {

View File

@ -12,7 +12,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
h1, .h1 { h1, .h1 {
font-size: $font-size-h1; font-size: $font-size-h1;
line-height: 1.15em; line-height: 1.5em;
} }
h2, .h2{ h2, .h2{
font-size: $font-size-h2; font-size: $font-size-h2;
@ -34,59 +34,62 @@ h5, .h5 {
} }
h6, .h6{ h6, .h6{
font-size: $font-size-h6; font-size: $font-size-h6;
text-transform: uppercase;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
.title, small {
.card-title, font-size: $font-size-small;
.info-title,
.footer-brand,
.footer-big h5,
.footer-big h4,
.media .media-heading{
//font-weight: $font-weight-extra-bold;
// font-family: $font-family-serif;
&,
a{
color: $black-color;
text-decoration: none;
}
} }
.card-blog .card-title{ // .title,
font-weight: $font-weight-extra-bold; // .card-title,
} // .info-title,
// .footer-brand,
// .footer-big h5,
// .footer-big h4,
// .media .media-heading{
// //font-weight: $font-weight-extra-bold;
// // font-family: $font-family-serif;
h2.title{ // &,
margin-bottom: $margin-base * 2; // a{
} // color: $black-color;
// text-decoration: none;
// }
// }
.description, // .card-blog .card-title{
.card-description, // font-weight: $font-weight-extra-bold;
.footer-big p{ // }
color: $gray-light;
}
.text-warning { // h2.title{
color: $brand-warning !important; // margin-bottom: $margin-base * 2;
} // }
.text-primary {
color: $brand-primary !important; // .description,
} // .card-description,
.text-danger { // .footer-big p{
color: $brand-danger !important; // color: $gray-light;
} // }
.text-success {
color: $brand-success !important; // .text-warning {
} // color: $brand-warning !important;
.text-info { // }
color: $brand-info !important; // .text-primary {
} // color: $brand-primary !important;
.text-rose{ // }
color: $brand-rose !important; // .text-danger {
} // color: $brand-danger !important;
.text-gray{ // }
color: $gray-color !important; // .text-success {
} // color: $brand-success !important;
// }
// .text-info {
// color: $brand-info !important;
// }
// .text-rose{
// color: $brand-rose !important;
// }
// .text-gray{
// color: $gray-color !important;
// }

View File

@ -5,6 +5,7 @@
// https://www.google.com/design/spec/style/typography.html#typography-styles // https://www.google.com/design/spec/style/typography.html#typography-styles
// http://www.getmdl.io/styles/index.html // http://www.getmdl.io/styles/index.html
$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default; $font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default;
//$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; //$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
@ -19,89 +20,19 @@ $font-size-sm: .875rem !default;
$font-size-xs: .75rem !default; $font-size-xs: .75rem !default;
$font-size-h1: 3.3125rem; $font-size-h1: 2.5rem;
$font-size-h2: 2.25rem !default; $font-size-h2: 2.25rem !default;
$font-size-h3: 1.5625rem; $font-size-h3: 1.5625rem;
$font-size-h4: 1.125rem !default; $font-size-h4: 1.125rem !default;
$font-size-h5: 1.0625rem !default; $font-size-h5: 1.0625rem !default;
$font-size-h6: 0.75rem !default; $font-size-h6: 1rem !default;
$font-paragraph: 14px !default; $font-paragraph: 14px !default;
$font-size-navbar: 16px !default; $font-size-navbar: 16px !default;
$font-size-small: 12px !default; $font-size-small: 13px !default;
//
$display1-size: 7rem !default; // md display-4 112px was 6rem;
$display2-size: 3.5rem !default; // md display-3 56px was 5.5rem
$display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem
$display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
//
//$display1-weight: 300 !default;
//$display2-weight: 300 !default;
//$display3-weight: 300 !default;
//$display4-weight: 300 !default;
//
$line-height-base: 1.5 !default;
//
$headings-margin-bottom: math.div($spacer, 2) !default;
//$headings-font-family: inherit !default;
$headings-font-weight: 400 !default; // was 500
$font-weight-light: 300 !default; $font-weight-light: 200 !default;
$font-weight-default: 400 !default; $font-weight-default: 300 !default;
$font-weight-bold: 500 !default; $font-weight-bold: 400 !default;
$font-weight-extra-bold: 700 !default; $font-weight-extra-bold: 500 !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
//$headings-line-height: 1.1 !default;
//$headings-color: inherit !default;
//
//$lead-font-size: 1.25rem !default;
//$lead-font-weight: 300 !default;
//
//$text-muted: $gray-light !default;
//
//$abbr-border-color: $gray-light !default;
//
//$blockquote-small-color: $gray-light !default;
//$blockquote-font-size: ($font-size-base * 1.25) !default;
//$blockquote-border-color: $gray-lighter !default;
//
//$hr-border-color: rgba(0,0,0,.1) !default;
//$hr-border-width: $border-width !default;
//
//$list-inline-padding: 5px !default;
//
//$dt-font-weight: bold !default;
//
//$nested-kbd-font-weight: bold !default;
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !default;
$padding-base-vertical: .5rem !default;
$padding-base-horizontal: .7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;
$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;

View File

@ -1,13 +1,12 @@
@use '@angular/material'as mat; @use '@angular/material'as mat;
// @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; // @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
// @import "src/assets/scss/material-dashboard.scss"; // @import "src/assets/scss/material-dashboard.scss";
//Material-Bootstrap configuration //Material-Bootstrap configuration
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import "assets/scss/bootstrap-material"; @import "assets/scss/bootstrap-material";
// @import "/node_modules/bootstrap/scss/bootstrap";
// @import "@covalent/core/theming/all-theme"; // @import "@covalent/core/theming/all-theme";
// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming'; // @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
@ -19,9 +18,14 @@
// Guided Tour style // Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss'; @import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
// Be sure that you only ever include this mixin once! // Be sure that you only ever include this mixin once!
@include mat.core(); @include mat.core();
// styles moved from material-dashboard.scss -> overwrite bootstrap default styles
@import "assets/scss/core/variables/type";
@import "assets/scss/core/type";
:root { :root {
--primary-color: #18488F; --primary-color: #18488F;
@ -82,30 +86,35 @@ $mat-dark-theme-warn: mat.m2-define-palette($mat-dark-theme-warn-palette,
$darker: A700, $darker: A700,
$text: 100); $text: 100);
//including the typography rules from _type.scss here
$mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;', $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// $display-4: mat.m2-define-typography-level($font-size: 96px, $font-weight: 300, $font-family: 'Roboto, sans-serif;'), $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
// $display-3: mat.m2-define-typography-level($font-size: 60px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $headline-2: mat.m2-define-typography-level($font-size: 2.25rem),
// $display-2: mat.m2-define-typography-level($font-size: 48px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $headline-3: mat.m2-define-typography-level($font-size: 1.5625rem),
// $display-1: mat.m2-define-typography-level($font-size: 34px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $headline-4: mat.m2-define-typography-level($font-size: 1.125rem),
// $headline: mat.m2-define-typography-level($font-size: 24px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $headline-5: mat.m2-define-typography-level($font-size: 1.0625rem),
// $title: mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $headline-6: mat.m2-define-typography-level($font-size: 1rem ),
// $subheading-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $body-1: mat.m2-define-typography-level($font-size: 1.125rem),
// $subheading-1: mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), $body-2: mat.m2-define-typography-level($font-size: 0.9rem),
$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $button: mat.m2-define-typography-level($font-size: 0.87rem),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $caption: mat.m2-define-typography-level($font-size: 0.77rem),
// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// Line-height must be unit-less fraction of the font-size. // Line-height must be unit-less fraction of the font-size.
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'), // $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125),
); );
$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;', $mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $headline-2: mat.m2-define-typography-level($font-size: 2.38rem),
$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $headline-3: mat.m2-define-typography-level($font-size: 1.6925rem),
$caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'), $headline-4: mat.m2-define-typography-level($font-size: 1.255rem),
$headline-5: mat.m2-define-typography-level($font-size: 1.1925rem),
$headline-6: mat.m2-define-typography-level($font-size: 1.13rem ),
$body-1: mat.m2-define-typography-level($font-size: 1.255rem),
$body-2: mat.m2-define-typography-level($font-size: 1.15rem),
$button: mat.m2-define-typography-level($font-size: 1rem),
); );
$mat-density: 0; $mat-density: 0;
@ -140,24 +149,31 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
.accessibility-theme { .accessibility-theme {
@include mat.all-component-themes($mat-accessibility-theme); @include mat.all-component-themes($mat-accessibility-theme);
// change individual classes set in components' scss // change individual classes set in components' scss
.frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check, .frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
.nav-row, .nav-subrow, .sidebar-footer .option, label.mdc-label,.description-label { .nav-row, .nav-subrow, .sidebar-footer .option {
font-size: max(1rem, 16px) !important; font-size: 1rem !important;
} }
.action-list-label, .actions-list, small { .action-list-label, .actions-list, small {
font-size: max(1rem, 13px) !important; font-size: 0.8em !important;
} }
.status-chip { .status-chip {
font-size: 14px; font-size: 14px !important;
}
.plan-title, .plan-title-draft, .description-title, .description-title-draft {
font-size: 1.2rem !important;
}
.plan-subtitle, .description-subtitle {
font-size: 1rem !important;
}
.heading {
font-size: 1.255rem !important;
} }
} }
// styles moved from material-dashboard.scss
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: Roboto, sans-serif;
font-weight: 300;
}
a { a {
@ -169,12 +185,15 @@ a {
&.color-unset { &.color-unset {
color: #000000; color: #000000;
} }
& .material-icons { //_misc.scss
vertical-align: middle;
}
} }
.card {
.required-text { border: 0;
font-size: 13px;
} }
//TODO: angular update @import '../node_modules/dragula/dist/dragula.css'; //TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
/* in-flight clone */ /* in-flight clone */
.gu-mirror { .gu-mirror {
@ -326,10 +345,6 @@ a {
} }
} }
// .gray-container {
// background: linear-gradient(180deg, #f6f6f6, #fff);
// margin: 5px 0px;
// }
.main-content { .main-content {
background-color: #f5f5f5; background-color: #f5f5f5;
@ -675,6 +690,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
////////*//////// ////////*////////
/// ///
/// ///
///
ul.horizontal-list { ul.horizontal-list {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;