engine/app/assets/stylesheets/locomotive/menu/_helpers.scss

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";

@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  };
}

@mixin reset {
  padding: 0px;
  margin: 0px;
  list-style: none;

  a {
    text-decoration: none;
  }
}

@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
  display: $display;
  position: absolute;
  #{$vside}: $vvalue;
  #{$hside}: $hvalue;
}

/* ___ shadows ___ */

@mixin box-shadow-with-inset($color_top, $color_bottom: $color_top) {
  $color_bottom: $color_top !default;
  @include box-shadow($color_top 0 1px 0 0 inset, $color_bottom 0 1px 0 0);
}

@mixin no-box-shadow($important: false) {
  @if $important == true {
    $important: " !important"; }
  @else {
    $important: ""; }

  box-shadow: none $important;
  -moz-box-shadow: none $important;
  -webkit-box-shadow: none $important;
}

@mixin popup-box {
  @include border-radius(4px);
  @include box-shadow(rgba(255, 255, 255, 0.17) 0 1px 0 0 inset, rgba(0, 0, 0, 0.41) 3px 3px 5px 0);
}

/* ___ icons ___ */

@mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
  position: relative;
  width: $width;
  height: $height;
  line-height: $height + 1;
  @if $enabled == true {
    background-position: -#{$width} $where; }
  @else {
    background-position: 0 $where; }
  top: $top;
  left: $left;
}

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

/* ___ colors ___ */

@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 black-submenu {
  & > ul {
    background: #23242b image-url("locomotive/menu/submenu/black-bg.png") repeat-x 0 0;
    border-color: rgba(255, 255, 255, 0.2);
  }

  & > ul > li > a, & > .action 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 background-image(linear-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 background-image(linear-gradient(#1e1e24, #212229));
      @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2));
    }
  }

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

    a:hover {
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
  }
}

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

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

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

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

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

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

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

      &.on, &:active {
        @include background-image(linear-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; }
}