/home/mip/public_html/template/AdminLTE/plugins/smartmenus-1.0.0.1/css/sm-mint/_sm-mint.scss
@import 'compass';
// This file is best viewed with Tab size 4 code indentation
// -----------------------------------------------------------------------------------------------------------------
// 1. Theme Quick Settings (Variables)
// (for further control, you will need to dig into the actual CSS in 2.)
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 1.1. Colors
// ----------------------------------------------------------
$sm-mint__white: #fff !default;
$sm-mint__black: #333 !default;
$sm-mint__green: #F6FFED !default;
$sm-mint__green-dark: #8db863 !default;
$sm-mint__box-shadow: rgba(0, 0, 0, 0.25) !default;
// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------
$sm-mint__desktop-vp: 768px !default; // switch from collapsible to desktop
// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------
$sm-mint__font-family: Arial, sans-serif !default;
$sm-mint__font-size-base: 16px !default;
$sm-mint__font-size-small: 14px !default;
$sm-mint__line-height: 17px !default;
// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------
$sm-mint__border-width: 2px !default;
$sm-mint__border-radius-base: 4px !default;
// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------
// Menu box
$sm-mint__collapsible-bg: $sm-mint__white !default;
$sm-mint__collapsible-border-color: $sm-mint__green-dark !default;
// Items
$sm-mint__collapsible-item-color: $sm-mint__black !default;
$sm-mint__collapsible-item-disabled-color: darken($sm-mint__white, 20%) !default;
$sm-mint__collapsible-item-padding-vertical: 13px !default;
$sm-mint__collapsible-item-padding-horizontal: 20px !default;
// Items separators
$sm-mint__collapsible-separators-color: rgba($sm-mint__green-dark, 0.2) !default;
// Toggle button (sub menu indicators)
$sm-mint__collapsible-toggle-bg: rgba($sm-mint__green-dark, 0.2) !default;
// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------
// Menu box
$sm-mint__collapsible-sub-bg: rgba($sm-mint__green-dark, 0.2) !default;
// Items text indentation for deeper levels
$sm-mint__collapsible-sub-item-indentation: 8px !default;
// ----------------------------------------------------------
// :: 1.7. Desktop main menu
// ----------------------------------------------------------
// Menu box
$sm-mint__desktop-bg: transparent !default;
// Items
$sm-mint__desktop-item-color: $sm-mint__black !default;
$sm-mint__desktop-item-hover-color: $sm-mint__white !default;
$sm-mint__desktop-item-hover-bg: $sm-mint__green-dark !default;
$sm-mint__desktop-item-highlighted-color: $sm-mint__black !default;
$sm-mint__desktop-item-highlighted-bg: $sm-mint__green !default;
$sm-mint__desktop-item-highlighted-box-shadow: 0 4px 3px $sm-mint__box-shadow !default;
$sm-mint__desktop-item-disabled-color: darken($sm-mint__white, 20%) !default;
$sm-mint__desktop-item-padding-vertical: 11px !default;
$sm-mint__desktop-item-padding-horizontal: 20px !default;
// Sub menu indicators
$sm-mint__desktop-arrow-size: 6px !default; // border-width
$sm-mint__desktop-arrow-color: $sm-mint__green-dark !default;
$sm-mint__desktop-arrow-hover-color: $sm-mint__white !default;
$sm-mint__desktop-arrow-highlighted-color: $sm-mint__green-dark !default;
$sm-mint__desktop-arrow-spacing: 6px !default;
// Vertical items
$sm-mint__desktop-vertical-item-highlighted-color: $sm-mint__desktop-item-hover-color !default;
$sm-mint__desktop-vertical-item-highlighted-bg: $sm-mint__desktop-item-hover-bg !default;
$sm-mint__desktop-vertical-item-padding-vertical: 10px !default;
$sm-mint__desktop-vertical-item-padding-horizontal: 20px !default;
// ----------------------------------------------------------
// :: 1.8. Desktop sub menus
// ----------------------------------------------------------
// Menu box
$sm-mint__desktop-sub-bg: $sm-mint__green !default;
$sm-mint__desktop-sub-box-shadow: 0 4px 3px $sm-mint__box-shadow !default;
$sm-mint__desktop-sub-padding-vertical: 8px !default;
$sm-mint__desktop-sub-padding-horizontal: 0 !default;
// Items
$sm-mint__desktop-sub-item-color: $sm-mint__black !default;
$sm-mint__desktop-sub-item-hover-color: $sm-mint__white !default;
$sm-mint__desktop-sub-item-hover-bg: $sm-mint__green_dark !default;
$sm-mint__desktop-sub-item-disabled-color: lighten($sm-mint__black, 50%) !default;
$sm-mint__desktop-sub-item-padding-vertical: 10px !default;
$sm-mint__desktop-sub-item-padding-horizontal: 20px !default;
// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------
// calc item height and sub menus toggle button size
$sm-mint__item-height: $sm-mint__line-height + $sm-mint__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-mint__toggle-size: floor($sm-mint__item-height * 0.8);
$sm-mint__toggle-spacing: floor($sm-mint__item-height * 0.1);
// Main menu box
.sm-mint {
border-top: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
border-bottom: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
background: $sm-mint__collapsible-bg;
// Main menu items
a {
&,
&:hover,
&:focus,
&:active {
padding: $sm-mint__collapsible-item-padding-vertical $sm-mint__collapsible-item-padding-horizontal;
/* make room for the toggle button (sub indicator) */
padding-right: $sm-mint__collapsible-item-padding-horizontal + $sm-mint__toggle-size + $sm-mint__toggle-spacing;
color: $sm-mint__collapsible-item-color;
font-family: $sm-mint__font-family;
font-size: $sm-mint__font-size-base;
font-weight: normal;
line-height: $sm-mint__line-height;
text-decoration: none;
}
&.current {
font-weight: bold;
}
&.disabled {
color: $sm-mint__collapsible-item-disabled-color;
}
// Toggle buttons (sub menu indicators)
span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -(ceil($sm-mint__toggle-size / 2));
left: auto;
right: $sm-mint__toggle-spacing;
width: $sm-mint__toggle-size;
height: $sm-mint__toggle-size;
overflow: hidden;
font: bold #{$sm-mint__font-size-small}/#{$sm-mint__toggle-size} monospace !important;
text-align: center;
text-shadow: none;
background: $sm-mint__collapsible-toggle-bg;
@include border-radius($sm-mint__border-radius-base);
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
}
// Main menu items separators
li {
border-top: 1px solid $sm-mint__collapsible-separators-color;
}
> li:first-child {
border-top: 0;
}
// Sub menus box
ul {
background: $sm-mint__collapsible-sub-bg;
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active {
font-size: $sm-mint__font-size-small;
// add indentation for sub menus text
border-left: $sm-mint__collapsible-sub-item-indentation solid transparent;
}
}
// Add indentation for sub menus text for deeper levels
@include sm-mint__sub-items-indentation($sm-mint__collapsible-sub-item-indentation);
}
}
// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------
@media (min-width: $sm-mint__desktop-vp) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-mint ul{position:absolute;width:12em;}
.sm-mint li{float:left;}
.sm-mint.sm-rtl li{float:right;}
.sm-mint ul li,.sm-mint.sm-rtl ul li,.sm-mint.sm-vertical li{float:none;}
.sm-mint a{white-space:nowrap;}
.sm-mint ul a,.sm-mint.sm-vertical a{white-space:normal;}
.sm-mint .sm-nowrap > li > a,.sm-mint .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
/* ...end */
// Main menu box
.sm-mint {
border-top: 0;
background: $sm-mint__desktop-bg;
// Main menu items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
padding: $sm-mint__desktop-item-padding-vertical $sm-mint__desktop-item-padding-horizontal;
color: $sm-mint__desktop-item-color;
@include border-radius($sm-mint__border-radius-base $sm-mint__border-radius-base 0 0);
}
&:hover,
&:focus,
&:active {
background: $sm-mint__desktop-item-hover-bg;
color: $sm-mint__desktop-item-hover-color;
}
&.highlighted {
background: $sm-mint__desktop-item-highlighted-bg;
color: $sm-mint__desktop-item-highlighted-color;
@include box-shadow($sm-mint__desktop-item-highlighted-box-shadow);
}
&.disabled {
background: transparent;
color: $sm-mint__desktop-item-disabled-color;
@include box-shadow(none);
}
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-mint__desktop-item-padding-horizontal + 8px + $sm-mint__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -(ceil($sm-mint__desktop-arrow-size / 2));
right: $sm-mint__desktop-item-padding-horizontal;
width: 0;
height: 0;
border-width: $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67);
border-style: solid dashed dashed dashed;
border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
background: transparent;
@include border-radius(0);
}
&:hover span.sub-arrow,
&:focus span.sub-arrow,
&:active span.sub-arrow {
border-color: $sm-mint__desktop-arrow-hover-color transparent transparent transparent;
}
&.highlighted span.sub-arrow {
border-color: $sm-mint__desktop-arrow-highlighted-color transparent transparent transparent;
}
&.disabled span.sub-arrow {
border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
}
// reset mobile first style
&.highlighted span.sub-arrow:before {
display: none;
}
}
// No main menu items separators
li {
border-top: 0;
}
// Sub menus box
ul {
border: 0;
padding: $sm-mint__desktop-sub-padding-vertical $sm-mint__desktop-sub-padding-horizontal;
background: $sm-mint__desktop-sub-bg;
@include border-radius(0 $sm-mint__border-radius-base $sm-mint__border-radius-base $sm-mint__border-radius-base);
@include box-shadow($sm-mint__desktop-sub-box-shadow);
// 2+ sub levels need rounding of all corners
ul {
@include border-radius($sm-mint__border-radius-base);
}
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
border: 0 !important;
padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal;
color: $sm-mint__desktop-sub-item-color;
@include border-radius(0);
}
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-mint__desktop-item-hover-bg;
color: $sm-mint__desktop-item-hover-color;
@include box-shadow(none);
}
&.disabled {
background: transparent;
color: $sm-mint__desktop-sub-item-disabled-color;
}
// No need for additional room for the sub arrows
&.has-submenu {
padding-right: $sm-mint__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: 10px;
margin-top: -($sm-mint__desktop-arrow-size * 0.67);
border-width: ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
}
&:hover span.sub-arrow,
&:focus span.sub-arrow,
&:active span.sub-arrow,
&.highlighted span.sub-arrow {
border-color: transparent transparent transparent $sm-mint__desktop-arrow-hover-color;
}
&.disabled span.sub-arrow {
border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
}
}
}
// Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
span.scroll-up,
span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background: $sm-mint__desktop-sub-bg;
height: 20px;
// width and position will be set automatically by the script
}
span.scroll-up-arrow {
position: absolute;
top: 6px;
left: 50%;
margin-left: -8px;
// we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
width: 0;
height: 0;
overflow: hidden;
border-width: 0 6px 8px 6px; // tweak size of the arrow
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-mint__desktop-arrow-color transparent;
}
span.scroll-down-arrow {
@extend span.scroll-up-arrow;
border-width: 8px 6px 0 6px;
border-style: solid dashed dashed dashed;
border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
}
// Rigth-to-left
// Main menu box
&.sm-rtl {
// Main menu items
a {
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-mint__desktop-item-padding-horizontal;
padding-left: $sm-mint__desktop-item-padding-horizontal + 8px + $sm-mint__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: $sm-mint__desktop-item-padding-horizontal;
}
}
// Vertical main menu
&.sm-vertical {
border-right: 0;
border-left: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
// Vertical main menu items
a {
@include border-radius(0 $sm-mint__border-radius-base $sm-mint__border-radius-base 0);
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-mint__desktop-vertical-item-padding-vertical $sm-mint__desktop-vertical-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 10px;
border-width: ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
}
&:hover span.sub-arrow,
&:focus span.sub-arrow,
&:active span.sub-arrow,
&.highlighted span.sub-arrow {
border-color: transparent $sm-mint__desktop-arrow-hover-color transparent transparent;
}
&.disabled span.sub-arrow {
border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
}
}
}
// Sub menus box
ul {
@include border-radius($sm-mint__border-radius-base 0 $sm-mint__border-radius-base $sm-mint__border-radius-base);
a {
@include border-radius(0 !important);
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal !important;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 10px;
border-width: ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
}
&:hover span.sub-arrow,
&:focus span.sub-arrow,
&:active span.sub-arrow,
&.highlighted span.sub-arrow {
border-color: transparent $sm-mint__desktop-arrow-hover-color transparent transparent;
}
&.disabled span.sub-arrow {
border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
}
}
}
}
// Vertical main menu
// Main menu box
&.sm-vertical {
border-bottom: 0;
border-right: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
// Main menu items
a {
padding: $sm-mint__desktop-vertical-item-padding-vertical $sm-mint__desktop-vertical-item-padding-horizontal;
@include border-radius($sm-mint__border-radius-base 0 0 $sm-mint__border-radius-base);
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-mint__desktop-item-hover-bg;
color: $sm-mint__desktop-item-hover-color;
@include box-shadow(none);
}
&.disabled {
background: transparent;
color: $sm-mint__desktop-item-disabled-color;
}
// Sub menu indicators
span.sub-arrow {
right: 10px;
margin-top: -($sm-mint__desktop-arrow-size * 0.67);
border-width: ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
}
&:hover span.sub-arrow,
&:focus span.sub-arrow,
&:active span.sub-arrow,
&.highlighted span.sub-arrow {
border-color: transparent transparent transparent $sm-mint__desktop-arrow-hover-color;
}
&.disabled span.sub-arrow {
border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
}
}
// Sub menus box
ul {
@include border-radius($sm-mint__border-radius-base !important);
// Sub menus items
a {
padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal;
}
}
}
}
}