From 96d4ac8ed12bfc02d998e81f139f4b96f66e347b Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 25 Jan 2023 14:43:00 +0200 Subject: [PATCH 1/2] Dashboard: Create variables for transition-delay and sidebars width. Add transition on uk-sticky inside page-content --- less/dashboard.less | 49 ++++++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/less/dashboard.less b/less/dashboard.less index d82681a..21a10e2 100644 --- a/less/dashboard.less +++ b/less/dashboard.less @@ -1,6 +1,13 @@ +:root { + --dashboard-sidebar-width: 280px; + --dashboard-sidebar-mini-width: 100px; + --dashboard-transition-delay: 0.5s; +} + @dashboard-page-content-background: @global-background; @dashboard-z-index: @global-z-index - 21; @dashboard-header-height: var(--header-height); +@dashboard-transition-delay: var(--dashboard-transition-delay); @dashboard-primary-background: @global-primary-background; @dashboard-primary-gradient: @global-primary-gradient; @@ -9,8 +16,8 @@ @dashboard-sidebar-background: @global-inverse-color; @dashboard-sidebar-border-width: @global-border-width; @dashboard-sidebar-border: @global-border; -@dashboard-sidebar-width: 280px; -@dashboard-sidebar-mini-width: 100px; +@dashboard-sidebar-width: var(--dashboard-sidebar-width); +@dashboard-sidebar-mini-width: var(--dashboard-sidebar-mini-width); @dashboard-sidebar-toggle-box-shadow: @global-default-shadow; @dashboard-sidebar-toggle-border: @global-border; @@ -70,10 +77,10 @@ left: @dashboard-sidebar-width; width: @dashboard-sidebar-toggle-size; height: @dashboard-sidebar-toggle-size; - transition: left 0.5s linear; - -webkit-transition: left 0.5s linear; - -moz-transition: left 0.5s linear; - -o-transition: left 0.5s linear; + transition: left @dashboard-transition-delay linear; + -webkit-transition: left @dashboard-transition-delay linear; + -moz-transition: left @dashboard-transition-delay linear; + -o-transition: left @dashboard-transition-delay linear; transform: translate(-50%, -50%); box-shadow: @dashboard-sidebar-toggle-box-shadow; border-radius: @dashboard-sidebar-toggle-border-radius; @@ -89,10 +96,10 @@ content: '\e5cb'; font-family: "Material Icons"; font-size: @dashboard-sidebar-toggle-size - 15px; - transition: transform 0.5s linear; - -webkit-transition: transform 0.5s linear; - -moz-transition: transform 0.5s linear; - -o-transition: transform 0.5s linear; + transition: transform @dashboard-transition-delay linear; + -webkit-transition: transform @dashboard-transition-delay linear; + -moz-transition: transform @dashboard-transition-delay linear; + -o-transition: transform @dashboard-transition-delay linear; } &:hover { @@ -112,10 +119,10 @@ z-index: @dashboard-z-index; background: @dashboard-sidebar-background; border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border; - transition: width 0.5s linear; - -webkit-transition: width 0.5s linear; - -moz-transition: width 0.5s linear; - -o-transition: width 0.5s linear; + transition: width @dashboard-transition-delay linear; + -webkit-transition: width @dashboard-transition-delay linear; + -moz-transition: width @dashboard-transition-delay linear; + -o-transition: width @dashboard-transition-delay linear; overflow-y: auto; & .menu_section { @@ -212,10 +219,10 @@ @{dashboard-pages}, @{dashboard-elements} { padding-left: @dashboard-sidebar-width; - transition: padding-left 0.5s linear; - -webkit-transition: padding-left 0.5s linear; - -moz-transition: padding-left 0.5s linear; - -o-transition: padding-left 0.5s linear; + transition: padding-left @dashboard-transition-delay linear; + -webkit-transition: padding-left @dashboard-transition-delay linear; + -moz-transition: padding-left @dashboard-transition-delay linear; + -o-transition: padding-left @dashboard-transition-delay linear; } #page_content { @@ -276,6 +283,12 @@ z-index: @dashboard-page-content-actions-z-index; } + & .uk-sticky { + transition: width @dashboard-transition-delay linear; + -webkit-transition: width @dashboard-transition-delay linear; + -moz-transition: width @dashboard-transition-delay linear; + -o-transition: width @dashboard-transition-delay linear; + } } @{dashboard-pages} { From 4455b94804936a853baa3654e6e3398875a17a12 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 26 Jan 2023 16:47:03 +0200 Subject: [PATCH 2/2] Dashboard: Make some imbrovents in sidebar in order to avoid flickering --- less/dashboard.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/less/dashboard.less b/less/dashboard.less index 21a10e2..696f3c2 100644 --- a/less/dashboard.less +++ b/less/dashboard.less @@ -1,7 +1,7 @@ :root { --dashboard-sidebar-width: 280px; --dashboard-sidebar-mini-width: 100px; - --dashboard-transition-delay: 0.5s; + --dashboard-transition-delay: 0.25s; } @dashboard-page-content-background: @global-background; @@ -152,7 +152,11 @@ &.uk-parent { & > a { - padding: @dashboard-menu-section-item-padding-vertical (3*@dashboard-menu-section-item-padding-horizontal) @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 @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal; + + & > .uk-flex { + margin-right: @dashboard-menu-section-item-padding-horizontal; + } &::after { color: @dashboard-menu-section-item-parent-icon-color; @@ -329,12 +333,8 @@ & > ul > li { &.uk-parent { - & > a { - padding-right: @dashboard-menu-section-item-padding-horizontal !important; - - &::after { - content: none; - } + & > a::after { + content: ''; } & .uk-nav-sub {