engine/public/stylesheets/sass/admin/menu.scss

/* ___ AUTOMATICALLY GENERATED: see admin/menu.scss for the source file */

@import "helpers";

/* ___ submenu: bg ___*/

#submenu {
  clear: both;
  position: relative;
  top: -1px;
  z-index: 998;
  height: 60px;
  margin: 0px;
  padding: 0 8px;
  background: transparent url(/images/admin/menu/shadow.png) repeat-y 0 0;

  /* ___ submenu items ___ */

  & > ul {
    @include reset;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent url(/images/admin/menu/submenu/shadow.png) repeat-x 0 0;
    @include rounded(top-right, 3px);

    height: 60px;

    & > li {
      margin: 15px 7px 0 8px;
      float: left;

      &.hoverable > a span {
        em {
          display: inline-block;
          background: transparent url(/images/admin/menu/icons.png) no-repeat 0 -16px;
          width: 12px;
          height: 7px;
          position: relative;
          top: 0px;
          left: 6px;
        }
      }

      & > a {
        display: inline-block;
        @include full-rounded(16px);
        @include box-shadow-with-inset(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        padding: 0px 16px 0px 16px;
        height: 26px;
        line-height: 22px;
        outline: none;

        span {
          color: #fff;
          font-size: 0.8em;
          font-weight: normal;
          text-shadow: 1px 1px 1px #000;
        }

        &:hover {
          border: 1px solid rgba(0, 0, 0, 0.9);
          border-top: 1px solid rgba(0, 0, 0, 0.8);
        }

        &.on, &:active {
          border: 1px solid rgba(0, 0, 0, 0.2);
          border-top: 1px solid rgba(0, 0, 0, 0.4);
          border-bottom: 1px solid transparent !important;
          @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2), true);
        }

        &.hover {
          background: #fff !important;
          border-color: transparent !important;
          border-color-bottom: #fff;
          padding-bottom: 0px;
          @include border-rounded(bottom, left, 0px, true);
          @include border-rounded(bottom, right, 0px, true);
          position: relative;
          z-index: 998;

          span {
            color: #8b8d9a;
            text-shadow: none;
            @include no-box-shadow(true);
          }

          span em {
            background-position: -12px -16px;
          }

          & > em {
            @include absolute-position(bottom, 0px, right, -11px);
            width: 13px;
            height: 13px;
            background: transparent url(/images/admin/menu/popup/bottom-right-corner.png) no-repeat 0 0;
          }
        }
      }
    }
  }

  /* ___ submenu: actions ___ */

  & > .action {
    @include absolute-position(top, 0px, right, 22px);
    height: 60px;
    padding-left: 20px;
    z-index: 1;
    background: transparent url(/images/admin/menu/submenu/action-border.png) repeat-y left 0;

    a {
      margin-top: 18px;
      display: inline-block;
      background: rgba(0, 0, 0, 0.4);
      @include full-rounded(16px);
      padding: 0px 10px 0 15px;
      height: 22px;
      line-height: 20px;
      text-decoration: none;
      border: 1px solid transparent;
      outline: none;

      em {
        display: inline-block;
        position: relative;
        background: transparent url(../../images/admin/menu/icons.png) no-repeat 0 0px;
        height: 11px;
        width: 11px;
        top: 1px;
        left: -5px;
      }

      span {
        position: relative;
        top: -2px;
        color: #fff;
        font-size: 0.7em;
        text-shadow: 1px 1px 1px #000;
      }

      &:hover {
        border-color: rgba(0, 0, 0, 1);
      }
    }
  }

  /* ___ submenu: popup ___ */

  .popup {
    position: absolute;
    top: 42px;
    min-width: 250px;
    background: #fff;
    @include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.5));
    @include full-rounded(16px);
    @include border-rounded(top, left, 0px);
    z-index: 997;

    a {
      color: #1f82bc;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }

    .inner { padding: 8px 16px; }

    h2 {
      font-size: 0.7em;
      font-weight: bold;
      color: #1e1f26;
      border-top: 1px dotted #bbbbbd;
      padding-top: 6px;
      margin-bottom: 0px;
    }

    p {
      margin: 0px 15px;
      padding: 10px 0 0 0px;

      a {
        font-size: 0.8em;
        background: transparent url(/images/admin/menu/popup/add.png) no-repeat left 4px;
        padding-left: 12px;
      }

      &.edit {
        padding-top: 0px;

        a {
          background: transparent url(/images/admin/menu/popup/bullet.png) no-repeat left 5px;
        }
      }
    }

    ul {
      list-style-image: url(/images/admin/menu/popup/bullet.png);
      margin: 0px 0px 0 15px;

      li {
        position: relative;

        a { font-size: 0.7em; }

        span {
          @include absolute-position(top, 6px, right, 15px, inline);
          color: #8b8d9a;
          font-size: 0.7em;
        }
      }

      &.big-links {
        list-style: none;
        margin: 0px;

        li {
          margin: 10px 0;

          a {
            @include full-rounded(16px);
            padding: 3px 10px;
            background: #ebedf4;
            font-weight: bold;
            font-size: 0.8em;
          }
        }
      }
    }

    .footer {
      background: #ebedf4;
      padding: 8px 16px;
      @include rounded("bottom-left", 16px);
      @include rounded("bottom-right", 16px);

      a {
        color: #8b8d9a;
        font-weight: bold;
      }
    }
  }
}

@mixin black-submenu {
  & > ul {
    background: #23242b url(/images/admin/menu/submenu/black-bg.png) repeat-x 0 0;
    border-color: rgba(255, 255, 255, 0.2);
    & > li > a {
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.6);
      @include box-shadow-with-inset(rgba(255, 255, 255, 0.1));
      @include linear-background-gradient(#303138, #1e1e24);

      &.on, &:active {
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-top: 1px solid rgba(0, 0, 0, 0.6);
        @include linear-background-gradient(#1e1e24, #212229);
      }
    }
  }

  & > .action {
    background-image: url(/images/admin/menu/submenu/black-action-border.png) !important;
  }
}

@mixin green-submenu {
  & > ul {
    background-color: #2e9a7d;
    & > li > a {
      @include linear-background-gradient(#258c70, #13604b);

      &.on, &:active {
        @include linear-background-gradient(#195e4b, #166d55);
      }
    }
  }
}

@mixin blue-submenu {
  & > ul {
    background-color: #2579ae;
    & > li > a {
      @include linear-background-gradient(#1f6ea1, #135179);

      &.on, &:active {
        @include linear-background-gradient(#13496c, #175b88);
      }
    }
  }
}

@mixin orange-submenu {
  & > ul {
    background-color: #ed8102;
    & > li > a {
      @include linear-background-gradient(#e07a02, #a25804);

      &.on, &:active {
        @include linear-background-gradient(#965201, #9d5603);
      }
    }
  }
}

@mixin red-submenu {
  & > ul {
    background-color: #d23c45;
    & > li > a {
      @include linear-background-gradient(#b63e45, #89272d);

      &.on, &:active {
        @include linear-background-gradient(#7b292e, #972e35);
      }
    }
  }
}

@mixin submenu-color($color) {
  @if $color == black { @include black-submenu; }
  @if $color == green { @include green-submenu; }
  @if $color == blue { @include blue-submenu; }
  @if $color == orange { @include orange-submenu; }
  @if $color == red { @include red-submenu; }
}

/* ___ menu ___ */

#menu {
  @include reset;
  margin: 20px 0 0 0px;

  li.item {
    float: left;
    position: relative;
    z-index: 994;

    & > span, a {
      float: left;
      display: block;
    }

    & > span {
      background: transparent url(/images/admin/menu/left.png) no-repeat 0 0;
      width: 40px;
      height: 39px;
      background-position: 0 -39px;
    }

    &.first > span {
      width: 18px;
      background-position: 0 0;
    }

    a {
      background: transparent url(/images/admin/menu/right.png) no-repeat right 0px;
      padding: 0px 52px 0 2px;
      height: 39px;
      line-height: 26px;
      outline: none;

      em, span { display: inline-block; position: relative; }

      em {
        background: transparent url(/images/admin/menu/icons.png) no-repeat 0px 0px;
      }

      span {
        top: 9px;
        left: 6px;
        color: #787A89;
        text-shadow: #C5CFD1 1px 1px 1px;
        font-size: 0.8em;
      }
    }

    @for $i from 2 through 5 {
      &.item-#{$i} { left: -35px * ($i - 1); z-index: 993 - $i; }
    }
  }
}

@mixin menu-color($color) {
  $color-index: 1;
  @if $color == green { $color-index: 1; }
  @if $color == black {  $color-index: 2; }
  @if $color == blue {  $color-index: 3; }
  @if $color == orange {  $color-index: 4; }
  @if $color == red {  $color-index: 5; }

  z-index: 999;

  a {
    background-position: right -39px * $color-index;

    span {
      color: #fff;
      text-shadow: none;
    }
  }

  & > span { background-position: -40px * $color-index -39px; }

  &.first > span { background-position: -18px * $color-index 0px; }
}

@mixin menu-contents-icon($enabled: false) {
  @include icon(-64px, 16px, 12px, $enabled, 10px);
}

@mixin menu-assets-icon($enabled: false) {
  @include icon(-48px, 20px, 16px, $enabled, 11px);
}

@mixin menu-settings-icon($enabled: false) {
  @include icon(-32px, 14px, 13px, $enabled, 11px);
}

/* ___ section/color/icon associations ___ */

#menu li.contents a em { @include menu-contents-icon; }
body.contents {
  $color: black;
  #menu li.contents {
    @include menu-color($color);
    em { @include menu-contents-icon(true); }
  }
  #submenu { @include submenu-color($color); }
}

#menu li.assets a em { @include menu-assets-icon; }
body.assets {
  $color: green;
  #menu li.assets {
    @include menu-color($color);
    em { @include menu-assets-icon(true); }
  }
  #submenu { @include submenu-color($color); }
}

#menu li.settings a em { @include menu-settings-icon; }
body.settings {
  $color: blue;
  #menu li.settings {
    @include menu-color($color);
    em { @include menu-settings-icon(true); }
  }
  #submenu { @include submenu-color($color); }
}