diff --git a/less/dashboard.less b/less/dashboard.less index a725dd5..7161ffa 100644 --- a/less/dashboard.less +++ b/less/dashboard.less @@ -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; diff --git a/library-css/material.scss b/library-css/material.scss index 65ec8fa..363cc6d 100644 --- a/library-css/material.scss +++ b/library-css/material.scss @@ -1,24 +1,60 @@ @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); .cdk-global-overlay-wrapper, .cdk-overlay-container { - z-index: 9999!important; + z-index: 9999 !important; }