openaire-assets/less/dashboard.less

192 lines
5.4 KiB
Plaintext

@dashboard-background: @global-inverse-color;
@dashboard-page-content-background: @global-background;
@dashboard-z-index: @global-z-index - 20;
@dashboard-header-height: var(--header-height);
@dashboard-primary-background: @global-primary-background;
@dashboard-primary-gradient: @global-primary-gradient;
@dashboard-primary-inverse-color: @global-inverse-color;
@dashboard-sidebar-width: 280px;
@dashboard-sidebar-mini-width: 125px;
@dashboard-sidebar-mini-width-s: 100px;
@dashboard-menu-section-margin: 10px;
@dashboard-menu-section-item-line-height: @global-control-height;
@dashboard-menu-section-item-padding-vertical: 10px;
@dashboard-menu-section-item-padding-horizontal: 20px;
@dashboard-menu-section-icon-padding: 10px;
@dashboard-menu-section-icon-border-radius: @global-border-radius;
@dashboard-page-content-sticky-border-width: @global-border-width;
@dashboard-page-content-sticky-border: @global-border;
@dashboard-page-content-header-info-height: 80px;
@dashboard-page-content-header-info-scale-ratio: 0.7;
@dashboard-page-content-header-info-img-max-height: @dashboard-page-content-header-info-height;
@dashboard-page-content-header-info-img-max-width: 180px;
@dashboard-pages: #page_content, openaire-user > user > div, openaire-error > div;
@dashboard-elements: #page_content .message, bottom > div;
.sidebar_main_swipe {
background-color: @dashboard-background;
.set-blur-background(@dashboard-background);
#sidebar_main {
#sidebar_content {
width: @dashboard-sidebar-width;
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding-top: @dashboard-header-height;
z-index: @dashboard-z-index - 1;
background: @dashboard-background;
transition: 0.5s;
transition-property: width;
}
.menu_section {
margin-left: @dashboard-menu-section-margin;
position: relative;
& > ul > li {
background: none;
& > a {
padding: @dashboard-menu-section-item-padding-vertical @dashboard-menu-section-item-padding-horizontal;
line-height: @dashboard-menu-section-item-line-height;
background-color: transparent;
transition: background-color 0.3s ease-out 0s;
&: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;
}
}
&:hover:not(.uk-active) > a {
background-color: fade(@dashboard-page-content-background, 80%);
}
&.uk-active > a {
background-color: @dashboard-page-content-background;
& .menu-icon {
background-color: @dashboard-primary-background;
background-image: @dashboard-primary-gradient;
color: @dashboard-primary-inverse-color;
}
}
}
}
}
@{dashboard-pages}, @{dashboard-elements} {
padding-left: @dashboard-sidebar-width;
transition: 0.5s;
}
#page_content {
.set-blur-background(@dashboard-page-content-background);
.message {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
padding-left: calc(@dashboard-sidebar-width - 100px);
padding-right: @global-small-gutter;
text-align: center;
}
#page_content_header.uk-sticky.uk-active,
#page_content_actions.uk-sticky.uk-active {
border-bottom: @dashboard-page-content-sticky-border-width solid @dashboard-page-content-sticky-border;
.uk-tab {
margin-bottom: 0;
}
*:last-child.uk-tab:before {
content: none;
}
}
#page_content_header {
overflow-x: hidden;
.info {
transform: scale(1);
margin-bottom: 0;
transform-origin: 0 0;
transition: all .5s linear;
height: @dashboard-page-content-header-info-height;
img {
max-height: @dashboard-page-content-header-info-img-max-height;
max-width: @dashboard-page-content-header-info-img-max-width;
}
}
&.uk-active {
.info {
transform: scale(@dashboard-page-content-header-info-scale-ratio);
margin-bottom: calc((@dashboard-page-content-header-info-scale-ratio - 1.0) * @dashboard-page-content-header-info-height);
}
}
}
}
@{dashboard-pages} {
min-height: calc(100vh - @dashboard-header-height);
background-color: @dashboard-page-content-background;
position: relative;
z-index: @dashboard-z-index - 2;
}
/* No sidebar */
&:not(.sidebar_main_active):not(.sidebar_mini) {
@{dashboard-pages}, @{dashboard-elements} {
padding-left: 0;
}
#sidebar_main #sidebar_content {
display: none;
width: 0;
}
}
/* Mini Sidebar*/
&.sidebar_mini {
#sidebar_main #sidebar_content {
width: @dashboard-sidebar-mini-width;
}
@{dashboard-pages}, @{dashboard-elements} {
padding-left: @dashboard-sidebar-mini-width;
}
}
@media (max-width: @breakpoint-small - 1px) {
#sidebar_main #sidebar_content {
width: @dashboard-sidebar-mini-width-s !important;
}
@{dashboard-pages}, @{dashboard-elements} {
padding-left: @dashboard-sidebar-mini-width-s !important;
}
#page_content .message {
padding-right: 0;
}
}
}