apostrophe/lib/modules/apostrophe-ui/public/css/components/admin-bar.less

The Apostrophe Content Management System.

.apos-admin-bar
{
  position: fixed;
  height: 60px;
  top: @apos-padding-2;
  left: @apos-padding-2;
  z-index: @apos-z-index-7;
  background-color: @apos-base;
  color: @apos-white;
  .apos-button-border(@apos-white);
  .apos-rounded();
  .apos-drop-shadow();
  overflow: hidden;
  // .apos-transition;
  .apos-no-select;

  @media @apos-breakpoint-desktop-xl
  {
    height: 80px;
    top: @apos-padding-4;
    left: @apos-padding-4;
  }

  * { .apos-transition; }
}

.apos-admin-bar-logo
{
  position: relative;
  padding: 13px 15px 8px 15px;
  @media @apos-breakpoint-desktop-xl
  {
    padding: @apos-padding-2;
  }
  .apos-inline-block();
  
  cursor: pointer;

  svg
  {
    max-height: 30px;
    max-width: 30px;
    @media @apos-breakpoint-desktop-xl
    {
      max-height: 36px;
      max-width: 36px;
    }
  }
  
}

.apos-admin-bar-items
{
  display: inline-block;
  white-space: nowrap;
  .apos-transition;
  transform: translateX(-130%);

  .apos-admin-bar-item{ opacity: 0; }

}

.apos-admin-bar-item
{
  cursor: pointer;
  height: 56px;
  @media @apos-breakpoint-desktop-xl
  {
    height: 75px;  
  }

  &:hover
  {
    background-color: darken(@apos-primary, 3%)
  }
  
  // height: 100%;
  .apos-inline-block(middle);
}


.apos-admin-bar-item:before
{
  content: '';
  .apos-inline-block(middle);
  height: 100%;
}

.apos-admin-bar-item .apos-active
{
  background-color: darken(@apos-base, 10%);
}

.apos-admin-bar-items > div:last-child
{
  padding-right: @apos-padding-3;
}

.apos-admin-bar-inner
{
  max-width: 60px;
  font-size: 13px;
  @media @apos-breakpoint-desktop-xl
  {
    font-size: 16px;
    max-width: 80px;
  }
}

.apos-admin-bar-item-inner
{
  .apos-inline-block(middle);
  padding: 0 @apos-padding-1;
  @media @apos-breakpoint-desktop-xl
  {
    padding: 0 @apos-padding-2;
  }
  
  // .apos-transition();
  height: 100%;
  line-height: 4.5em;
  @media @apos-breakpoint-desktop-xl
  {
    line-height: 4.9em;
  }
}

.apos-admin-bar.apos-active

{
  .apos-admin-bar-items { transform: translateX(0%); .apos-admin-bar-item{ opacity: 1; } }
  .apos-admin-bar-inner { max-width: 1400px; }
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown
{
  .apos-drop-shadow(0, 0, 0, 0);
}

.apos-admin-bar .apos-admin-bar-item .apos-dropdown-items
{
  top: 102%;
}

.apos-admin-bar a
{
  // Direct links should look the same as other dropdown menu items. -Tom
  color: inherit;
  text-decoration: inherit;
  transition: none;
}