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-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-item-line-height: @global-control-small-height;
@dashboard-menu-section-item-padding-vertical: 5px;
@dashboard-menu-section-item-padding-horizontal: 20px;
@dashboard-menu-section-item-padding-horizontal-s: 30px;
@ -85,7 +86,7 @@
}
.sidebar_mobile_toggle {
line-height: @dashboard-menu-section-item-line-height;
line-height: @dashboard-menu-section-line-height;
& .menu-icon {
background-color: @dashboard-primary-background;
@ -102,7 +103,7 @@
& > a {
position: relative;
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) {
display: block;
@ -119,7 +120,7 @@
& > a {
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;
}
@ -128,7 +129,7 @@
right: (@dashboard-menu-section-item-padding-horizontal/2);
top: 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;
& .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 {
height: calc(100vh - @dashboard-header-height);
position: relative;
#sidebar_toggle {
position: fixed;
position: absolute;
z-index: @dashboard-z-index + 1;
top: @dashboard-sidebar-toggle-top;
left: @dashboard-sidebar-width;
@ -264,14 +275,14 @@
#sidebar_content {
width: @dashboard-sidebar-width;
position: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding-top: @dashboard-header-height;
z-index: @dashboard-z-index;
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;
-webkit-transition: width @dashboard-transition-delay linear;
-moz-transition: width @dashboard-transition-delay linear;
@ -281,6 +292,8 @@
}
@{dashboard-pages}, @{dashboard-elements} {
width: 100%;
box-sizing: border-box;
padding-left: @dashboard-sidebar-width;
transition: padding-left @dashboard-transition-delay linear;
-webkit-transition: padding-left @dashboard-transition-delay linear;

View File

@ -1,21 +1,57 @@
@use '@angular/material' as mat;
@use '@angular/material/theming';
@include mat.core();
$primary-color: (
0: #211F7E,
100: #211F7E,
200: #211F7E,
300: #211F7E,
400: #211F7E,
500: #211F7E,
600: #211F7E,
700: #211F7E,
800: #211F7E,
900: #211F7E,
contrast: (50: #ffffff)
);
$secondary-color: (
0: #3086ED,
100: #3086ED,
200: #3086ED,
300: #3086ED,
400: #3086ED,
500: #3086ED,
600: #3086ED,
700: #3086ED,
800: #3086ED,
900: #3086ED,
contrast: (50: #ffffff)
);
$my-app-primary: mat.define-palette($primary-color, 0);
$my-app-accent: mat.define-palette($secondary-color, 0);
$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent);
$warn-color: (
0: #BD640D,
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);