diff --git a/less/dashboard.less b/less/dashboard.less index c9060b0..d82681a 100644 --- a/less/dashboard.less +++ b/less/dashboard.less @@ -10,8 +10,19 @@ @dashboard-sidebar-border-width: @global-border-width; @dashboard-sidebar-border: @global-border; @dashboard-sidebar-width: 280px; -@dashboard-sidebar-mini-width: 125px; -@dashboard-sidebar-mini-width-s: 100px; +@dashboard-sidebar-mini-width: 100px; + +@dashboard-sidebar-toggle-box-shadow: @global-default-shadow; +@dashboard-sidebar-toggle-border: @global-border; +@dashboard-sidebar-toggle-border-hover: @global-secondary-background; +@dashboard-sidebar-toggle-border-radius: 500px; +@dashboard-sidebar-toggle-border-width: @global-border-width; +@dashboard-sidebar-toggle-background: @global-inverse-color; +@dashboard-sidebar-toggle-background-hover: @global-secondary-background; +@dashboard-sidebar-toggle-color: @global-color; +@dashboard-sidebar-toggle-color-hover: @global-inverse-color; +@dashboard-sidebar-toggle-size: @icon-button-small-size; +@dashboard-sidebar-toggle-top: calc(@dashboard-header-height + 35px); @dashboard-menu-section-margin: 10px; @dashboard-menu-section-font-size: @global-small-font-size; @@ -39,16 +50,58 @@ @dashboard-page-content-sticky-border-width: @global-border-width; @dashboard-page-content-sticky-border: @global-border; +@dashboard-page-content-header-z-index: @dashboard-z-index; @dashboard-page-content-header-info-height: @global-header-height - 20px; @dashboard-page-content-header-info-img-max-height: @dashboard-page-content-header-info-height; @dashboard-page-content-header-info-img-max-width: 180px; +@dashboard-page-content-actions-z-index: @dashboard-z-index - 1; +@dashboard-page-content-inner-z-index: @dashboard-z-index - 2; + @dashboard-pages: #page_content, openaire-user > user > div, openaire-error > div; @dashboard-elements: #page_content .message, bottom > div; .sidebar_main_swipe { - #sidebar_main { + #sidebar_toggle { + position: fixed; + z-index: @dashboard-z-index + 1; + top: @dashboard-sidebar-toggle-top; + 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; + transform: translate(-50%, -50%); + box-shadow: @dashboard-sidebar-toggle-box-shadow; + border-radius: @dashboard-sidebar-toggle-border-radius; + border: @dashboard-sidebar-toggle-border-width solid @dashboard-sidebar-toggle-border; + background: @dashboard-sidebar-toggle-background; + color: @dashboard-sidebar-toggle-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &::before { + 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; + } + + &:hover { + background: @dashboard-sidebar-toggle-background-hover; + color: @dashboard-sidebar-toggle-color-hover; + border-color: @dashboard-sidebar-toggle-border-hover; + } + } + #sidebar_content { width: @dashboard-sidebar-width; position: fixed; @@ -59,96 +112,98 @@ z-index: @dashboard-z-index; background: @dashboard-sidebar-background; border-right: @dashboard-sidebar-border-width solid @dashboard-sidebar-border; - transition: 0.5s; - transition-property: width; + transition: width 0.5s linear; + -webkit-transition: width 0.5s linear; + -moz-transition: width 0.5s linear; + -o-transition: width 0.5s linear; overflow-y: auto; - } - .menu_section { - margin-left: @dashboard-menu-section-margin; - position: relative; - font-size: @dashboard-menu-section-font-size; + & .menu_section { + margin-left: @dashboard-menu-section-margin; + position: relative; + font-size: @dashboard-menu-section-font-size; - & > ul > li { + & > ul > li { - & > a { - position: relative; - padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal; - line-height: @dashboard-menu-section-item-line-height; - - &:not(.uk-flex) { - display: block; - } - - & .menu-icon { - display: block; - padding: @dashboard-menu-section-icon-padding; - border-radius: @dashboard-menu-section-icon-border-radius; - background-color: transparent; - color: @dashboard-menu-section-icon-color; - } - } - - &.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; - - &::after { - color: @dashboard-menu-section-item-parent-icon-color; - } - - &:not(.uk-flex)::after { - position: absolute; - right: (@dashboard-menu-section-item-padding-horizontal/2); - top: 50%; - transform: translate(-50%, -50%); - line-height: (@dashboard-menu-section-item-line-height - 10px); - } - } - - & .uk-nav-sub { - margin-right: @dashboard-menu-section-sublist-margin-right; - padding-left: @dashboard-menu-section-sublist-padding-left; position: relative; + padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal; + line-height: @dashboard-menu-section-item-line-height; - & a { - border-radius: @dashboard-menu-section-sublist-item-border-radius; - padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal; + &:not(.uk-flex) { + display: block; } - & > li:hover > a { - background-color: @dashboard-menu-section-sublist-item-background-hover; - color: @dashboard-menu-section-sublist-item-color-active; - } - - & > li.uk-active > a { - background-color: @dashboard-menu-section-sublist-item-background-active; - color: @dashboard-menu-section-sublist-item-color-hover; - } - - &:before { - left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding; - border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border; + & .menu-icon { + display: block; + padding: @dashboard-menu-section-icon-padding; + border-radius: @dashboard-menu-section-icon-border-radius; + background-color: transparent; + color: @dashboard-menu-section-icon-color; } } - } + &.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; - &:hover:not(.uk-active) > a { - color: @dashboard-menu-section-item-color-hover; + &::after { + color: @dashboard-menu-section-item-parent-icon-color; + } - & .menu-icon { + &:not(.uk-flex)::after { + position: absolute; + right: (@dashboard-menu-section-item-padding-horizontal/2); + top: 50%; + transform: translate(-50%, -50%); + line-height: (@dashboard-menu-section-item-line-height - 10px); + } + } + + & .uk-nav-sub { + margin-right: @dashboard-menu-section-sublist-margin-right; + padding-left: @dashboard-menu-section-sublist-padding-left; + position: relative; + + & a { + border-radius: @dashboard-menu-section-sublist-item-border-radius; + padding: @dashboard-menu-section-sublist-item-padding-vertical @dashboard-menu-section-sublist-item-padding-horizontal; + } + + & > li:hover > a { + background-color: @dashboard-menu-section-sublist-item-background-hover; + color: @dashboard-menu-section-sublist-item-color-active; + } + + & > li.uk-active > a { + background-color: @dashboard-menu-section-sublist-item-background-active; + color: @dashboard-menu-section-sublist-item-color-hover; + } + + &:before { + left: @dashboard-menu-section-item-padding-horizontal + 2*@dashboard-menu-section-icon-padding; + border-left: @dashboard-menu-section-sublist-border-width solid @dashboard-menu-section-sublist-border; + } + } + + } + + &:hover:not(.uk-active) > a { color: @dashboard-menu-section-item-color-hover; + + & .menu-icon { + color: @dashboard-menu-section-item-color-hover; + } } - } - &.uk-active > a { - color: @dashboard-menu-section-item-color-active; + &.uk-active > a { + color: @dashboard-menu-section-item-color-active; - & .menu-icon { - background-color: @dashboard-primary-background; - background-image: @dashboard-primary-gradient; - color: @dashboard-primary-inverse-color; + & .menu-icon { + background-color: @dashboard-primary-background; + background-image: @dashboard-primary-gradient; + color: @dashboard-primary-inverse-color; + } } } } @@ -157,7 +212,10 @@ @{dashboard-pages}, @{dashboard-elements} { padding-left: @dashboard-sidebar-width; - transition: 0.5s; + 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; } #page_content { @@ -173,31 +231,35 @@ text-align: center; } - #page_content_header.uk-sticky, - #page_content_actions.uk-sticky { - z-index: @dashboard-z-index; - - &.uk-active:not(:has(*:last-child.uk-tab)) { - border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border; + #page_content_header, + #page_content_actions { + &:not(.uk-sticky) { + position: relative; } - &:has(*:last-child.uk-tab) { - & .header , & .actions { + &.uk-sticky { + &.uk-active:not(:has(*:last-child.uk-tab)) { border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border; } - } - & .uk-tab { - margin-bottom: 0; - } + &:has(*:last-child.uk-tab) { + & .header , & .actions { + border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border; + } + } - & *:last-child.uk-tab:before { - content: none; + & .uk-tab { + margin-bottom: 0; + } + + & *:last-child.uk-tab:before { + content: none; + } } } #page_content_header { - overflow-x: hidden; + z-index: @dashboard-page-content-header-z-index; .info { height: @dashboard-page-content-header-info-height; @@ -209,13 +271,18 @@ } } } + + #page_content_actions { + z-index: @dashboard-page-content-actions-z-index; + } + } @{dashboard-pages} { min-height: calc(100vh - @dashboard-header-height); background-color: @dashboard-page-content-background; position: relative; - z-index: @dashboard-z-index - 1; + z-index: @dashboard-page-content-inner-z-index; } /* No sidebar */ @@ -232,8 +299,49 @@ /* Mini Sidebar*/ &.sidebar_mini { - #sidebar_main #sidebar_content { - width: @dashboard-sidebar-mini-width; + + &:not(.sidebar_hover) { + #sidebar_toggle { + left: @dashboard-sidebar-mini-width !important; + } + + #sidebar_main #sidebar_content { + width: @dashboard-sidebar-mini-width; + + & .hide-on-close { + display: none; + } + + .menu_section { + + & > ul > li { + &.uk-parent { + & > a { + padding-right: @dashboard-menu-section-item-padding-horizontal !important; + + &::after { + content: none; + } + } + + & .uk-nav-sub { + & a, & * { + width: 0 !important; + min-width: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + margin-right: 0 !important; + overflow: hidden; + } + } + } + } + } + } + } + + #sidebar_toggle::before { + transform: rotate(180deg); } @{dashboard-pages}, @{dashboard-elements} { @@ -243,11 +351,11 @@ @media (max-width: @breakpoint-small - 1px) { #sidebar_main #sidebar_content { - width: @dashboard-sidebar-mini-width-s !important; + width: @dashboard-sidebar-mini-width !important; } @{dashboard-pages}, @{dashboard-elements} { - padding-left: @dashboard-sidebar-mini-width-s !important; + padding-left: @dashboard-sidebar-mini-width !important; } #page_content .message { diff --git a/less/general.less b/less/general.less index cc07b01..793ced9 100644 --- a/less/general.less +++ b/less/general.less @@ -5,6 +5,7 @@ @general-number-small-font-size: 26px; @general-number-font-size: 41px; @general-number-large-font-size: 64px; +@general-number-size-font-size: 80%; @general-custom-external-color: @global-meta-color; @@ -64,6 +65,10 @@ main { &.uk-text-large { font-size: @general-number-large-font-size; } + + & .number-size { + font-size: @general-number-size-font-size; + } } /* OpenAIRE portals texts */