openaire-assets/less/dashboard.less

@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;
    }
  }
}