2011-11-08 14:34:25 +00:00
|
|
|
@mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
|
|
|
|
|
display: $display;
|
|
|
|
|
position: absolute;
|
|
|
|
|
#{$vside}: $vvalue;
|
|
|
|
|
#{$hside}: $hvalue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ___ icons ___ */
|
|
|
|
|
|
|
|
|
|
|
2011-11-23 13:01:15 +00:00
|
|
|
// @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; }
|
|
|
|
|
// }
|
