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

197 lines
4.5 KiB
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; }
}