Angular & UIkit Upgrade #5

Merged
k.triantafyllou merged 9 commits from develop into master 2023-11-06 10:06:30 +01:00
2 changed files with 64 additions and 15 deletions

View File

@ -33,8 +33,9 @@
@dashboard-sidebar-toggle-size: @icon-button-small-size; @dashboard-sidebar-toggle-size: @icon-button-small-size;
@dashboard-sidebar-toggle-top: 50%; @dashboard-sidebar-toggle-top: 50%;
@dashboard-menu-section-font-size: @global-small-font-size;
@dashboard-menu-section-line-height: 1.5 * @global-small-font-size;
@dashboard-menu-section-margin: 10px; @dashboard-menu-section-margin: 10px;
@dashboard-menu-section-item-line-height: @global-control-small-height;
@dashboard-menu-section-item-padding-vertical: 5px; @dashboard-menu-section-item-padding-vertical: 5px;
@dashboard-menu-section-item-padding-horizontal: 20px; @dashboard-menu-section-item-padding-horizontal: 20px;
@dashboard-menu-section-item-padding-horizontal-s: 30px; @dashboard-menu-section-item-padding-horizontal-s: 30px;
@ -85,7 +86,7 @@
} }
.sidebar_mobile_toggle { .sidebar_mobile_toggle {
line-height: @dashboard-menu-section-item-line-height; line-height: @dashboard-menu-section-line-height;
& .menu-icon { & .menu-icon {
background-color: @dashboard-primary-background; background-color: @dashboard-primary-background;
@ -102,7 +103,7 @@
& > a { & > a {
position: relative; position: relative;
padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal; padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
line-height: @dashboard-menu-section-item-line-height; line-height: @dashboard-menu-section-line-height;
&:not(.uk-flex) { &:not(.uk-flex) {
display: block; display: block;
@ -119,7 +120,7 @@
& > a { & > a {
padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal; padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
&::after { .uk-nav-parent-icon::after {
color: @dashboard-menu-section-item-parent-icon-color; color: @dashboard-menu-section-item-parent-icon-color;
} }
@ -128,7 +129,7 @@
right: (@dashboard-menu-section-item-padding-horizontal/2); right: (@dashboard-menu-section-item-padding-horizontal/2);
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
line-height: (@dashboard-menu-section-item-line-height - 10px); line-height: (@dashboard-menu-section-line-height - 10px);
} }
} }
@ -203,8 +204,15 @@
} }
} }
&:not(.mobile) .uk-nav-default:extend(.uk-text-small) { &:not(.mobile) .uk-nav-default {
font-size: @dashboard-menu-section-font-size;
line-height: @dashboard-menu-section-line-height;
margin-left: @dashboard-menu-section-margin; margin-left: @dashboard-menu-section-margin;
& .uk-nav-sub > li {
font-size: @dashboard-menu-section-font-size;
line-height: @dashboard-menu-section-line-height;
}
} }
} }
@ -223,8 +231,11 @@
.sidebar_main_swipe { .sidebar_main_swipe {
#sidebar_main { #sidebar_main {
height: calc(100vh - @dashboard-header-height);
position: relative;
#sidebar_toggle { #sidebar_toggle {
position: fixed; position: absolute;
z-index: @dashboard-z-index + 1; z-index: @dashboard-z-index + 1;
top: @dashboard-sidebar-toggle-top; top: @dashboard-sidebar-toggle-top;
left: @dashboard-sidebar-width; left: @dashboard-sidebar-width;
@ -264,14 +275,14 @@
#sidebar_content { #sidebar_content {
width: @dashboard-sidebar-width; width: @dashboard-sidebar-width;
position: fixed; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-top: @dashboard-header-height;
z-index: @dashboard-z-index; z-index: @dashboard-z-index;
background: @dashboard-sidebar-background; background: @dashboard-sidebar-background;
border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border; border: @dashboard-sidebar-border-width solid @dashboard-sidebar-border;
border-left: none;
transition: width @dashboard-transition-delay linear; transition: width @dashboard-transition-delay linear;
-webkit-transition: width @dashboard-transition-delay linear; -webkit-transition: width @dashboard-transition-delay linear;
-moz-transition: width @dashboard-transition-delay linear; -moz-transition: width @dashboard-transition-delay linear;
@ -281,6 +292,8 @@
} }
@{dashboard-pages}, @{dashboard-elements} { @{dashboard-pages}, @{dashboard-elements} {
width: 100%;
box-sizing: border-box;
padding-left: @dashboard-sidebar-width; padding-left: @dashboard-sidebar-width;
transition: padding-left @dashboard-transition-delay linear; transition: padding-left @dashboard-transition-delay linear;
-webkit-transition: padding-left @dashboard-transition-delay linear; -webkit-transition: padding-left @dashboard-transition-delay linear;

View File

@ -1,24 +1,60 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '@angular/material/theming';
@include mat.core(); @include mat.core();
$primary-color: ( $primary-color: (
0: #211F7E, 0: #211F7E,
100: #211F7E, 100: #211F7E,
200: #211F7E,
300: #211F7E,
400: #211F7E,
500: #211F7E,
600: #211F7E,
700: #211F7E, 700: #211F7E,
800: #211F7E,
900: #211F7E,
contrast: (50: #ffffff) contrast: (50: #ffffff)
); );
$secondary-color: ( $secondary-color: (
0: #3086ED, 0: #3086ED,
100: #3086ED, 100: #3086ED,
200: #3086ED,
300: #3086ED,
400: #3086ED,
500: #3086ED,
600: #3086ED,
700: #3086ED, 700: #3086ED,
800: #3086ED,
900: #3086ED,
contrast: (50: #ffffff) contrast: (50: #ffffff)
); );
$my-app-primary: mat.define-palette($primary-color, 0); $warn-color: (
$my-app-accent: mat.define-palette($secondary-color, 0); 0: #BD640D,
$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent); 100: #BD640D,
200: #BD640D,
300: #BD640D,
400: #BD640D,
500: #BD640D,
600: #BD640D,
700: #BD640D,
800: #BD640D,
900: #BD640D,
contrast: (50: #ffffff)
);
$my-app-primary: mat.define-palette($primary-color);
$my-app-accent: mat.define-palette($secondary-color);
$my-app-warn: mat.define-palette($warn-color);
$my-app-theme: mat.define-light-theme((
color: (
primary: $my-app-primary,
accent: $my-app-accent,
warn: $my-app-warn
),
typography: mat.define-typography-config(),
density: 0,
));
@include mat.all-component-themes($my-app-theme); @include mat.all-component-themes($my-app-theme);
.cdk-global-overlay-wrapper, .cdk-overlay-container { .cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 9999!important; z-index: 9999 !important;
} }