/home/mip/mip/public/template/AdminLTE/plugins/smartmenus-1.0.0/css/sm-simple/_sm-simple.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-simple__white: #fff !default;
$sm-simple__gray: darken($sm-simple__white, 6.5%) !default;
$sm-simple__gray-dark: darken($sm-simple__white, 26.5%) !default;
$sm-simple__gray-darker: darken($sm-simple__white, 66.5%) !default;
$sm-simple__box-shadow: rgba(0, 0, 0, 0.2) !default;
// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------
$sm-simple__desktop-vp: 768px !default; // switch from collapsible to desktop
// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------
$sm-simple__font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif !default;
$sm-simple__font-size-base: 16px !default;
$sm-simple__font-size-small: 14px !default;
$sm-simple__line-height: 17px !default;
// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------
$sm-simple__border-width: 1px !default;
// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------
// Menu box
$sm-simple__collapsible-bg: $sm-simple__white !default;
$sm-simple__collapsible-border-color: $sm-simple__gray-dark !default;
$sm-simple__collapsible-box-shadow: 0 1px 1px $sm-simple__box-shadow !default;
// Items
$sm-simple__collapsible-item-color: $sm-simple__gray-darker !default;
$sm-simple__collapsible-item-current-color: $sm-simple__white !default;
$sm-simple__collapsible-item-current-bg: $sm-simple__gray-darker !default;
$sm-simple__collapsible-item-disabled-color: darken($sm-simple__white, 20%) !default;
$sm-simple__collapsible-item-padding-vertical: 13px !default;
$sm-simple__collapsible-item-padding-horizontal: 20px !default;
// Items separators
$sm-simple__collapsible-separators-color: rgba(0, 0, 0, 0.05) !default;
// Toggle button (sub menu indicators)
$sm-simple__collapsible-toggle-bg: rgba(0, 0, 0, 0.08) !default;
// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------
// Menu box
$sm-simple__collapsible-sub-bg: rgba(darken($sm-simple__collapsible-bg, 30%), 0.1) !default;
// Items text indentation for deeper levels
$sm-simple__collapsible-sub-item-indentation: 8px !default;
// ----------------------------------------------------------
// :: 1.7. Desktop main menu and sub menus
// ----------------------------------------------------------
// Menu box
$sm-simple__desktop-bg: $sm-simple__white !default;
// Items
$sm-simple__desktop-item-color: $sm-simple__gray_darker !default;
$sm-simple__desktop-item-hover-bg: $sm-simple__gray !default;
$sm-simple__desktop-item-current-color: $sm-simple__white !default;
$sm-simple__desktop-item-current-bg: $sm-simple__gray-darker !default;
$sm-simple__desktop-item-disabled-color: darken($sm-simple__white, 20%) !default;
$sm-simple__desktop-item-padding-vertical: 11px !default;
$sm-simple__desktop-item-padding-horizontal: 20px !default;
// Items separators
$sm-simple__desktop-separators-size: 1px !default;
$sm-simple__desktop-separators-color: $sm-simple__gray !default;
// Sub menu indicators
$sm-simple__desktop-arrow-spacing: 4px !default;
// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------
// calc item height and sub menus toggle button size
$sm-simple__item-height: $sm-simple__line-height + $sm-simple__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-simple__toggle-size: floor($sm-simple__item-height * 0.8);
$sm-simple__toggle-spacing: floor($sm-simple__item-height * 0.1);
// Main menu box
.sm-simple {
border: $sm-simple__border-width solid $sm-simple__collapsible-border-color;
background: $sm-simple__collapsible-bg;
@include box-shadow($sm-simple__collapsible-box-shadow);
// Main menu items
a {
&,
&:hover,
&:focus,
&:active {
padding: $sm-simple__collapsible-item-padding-vertical $sm-simple__collapsible-item-padding-horizontal;
/* make room for the toggle button (sub indicator) */
padding-right: $sm-simple__collapsible-item-padding-horizontal + $sm-simple__toggle-size + $sm-simple__toggle-spacing;
color: $sm-simple__collapsible-item-color;
font-family: $sm-simple__font-family;
font-size: $sm-simple__font-size-base;
font-weight: normal;
line-height: $sm-simple__line-height;
text-decoration: none;
}
&.current {
background: $sm-simple__collapsible-item-current-bg;
color: $sm-simple__collapsible-item-current-color;
}
&.disabled {
color: $sm-simple__collapsible-item-disabled-color;
}
// Toggle buttons (sub menu indicators)
span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -(ceil($sm-simple__toggle-size / 2));
left: auto;
right: $sm-simple__toggle-spacing;
width: $sm-simple__toggle-size;
height: $sm-simple__toggle-size;
overflow: hidden;
font: bold #{$sm-simple__font-size-small}/#{$sm-simple__toggle-size} monospace !important;
text-align: center;
text-shadow: none;
background: $sm-simple__collapsible-toggle-bg;
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
}
// Main menu items separators
li {
border-top: 1px solid $sm-simple__collapsible-separators-color;
}
> li:first-child {
border-top: 0;
}
// Sub menus box
ul {
background: $sm-simple__collapsible-sub-bg;
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active {
font-size: $sm-simple__font-size-small;
// add indentation for sub menus text
border-left: $sm-simple__collapsible-sub-item-indentation solid transparent;
}
}
// Add indentation for sub menus text for deeper levels
@include sm-simple__sub-items-indentation($sm-simple__collapsible-sub-item-indentation);
}
}
// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------
@media (min-width: $sm-simple__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-simple ul{position:absolute;}
.sm-simple li{float:left;}
.sm-simple.sm-rtl li{float:right;}
.sm-simple ul li,.sm-simple.sm-rtl ul li,.sm-simple.sm-vertical li{float:none;}
.sm-simple a{white-space:nowrap;}
.sm-simple ul a,.sm-simple.sm-vertical a{white-space:normal;}
.sm-simple .sm-nowrap > li > a,.sm-simple .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
/* ...end */
// Main menu box
.sm-simple {
background: $sm-simple__desktop-bg;
// Main menu items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
color: $sm-simple__desktop-item-color;
}
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-simple__desktop-item-hover-bg;
}
&.current {
background: $sm-simple__desktop-item-current-bg;
color: $sm-simple__desktop-item-current-color;
}
&.disabled {
background: $sm-simple__desktop-bg;
color: $sm-simple__desktop-item-disabled-color;
}
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-simple__desktop-item-padding-horizontal + 8px + $sm-simple__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -8px;
right: $sm-simple__desktop-item-padding-horizontal;
width: 8px;
height: 16px;
font: #{$sm-simple__font-size-small}/16px monospace !important;
background: transparent;
}
// reset mobile first style
&.highlighted span.sub-arrow:before {
display: none;
}
}
// Main menu items separators
> li {
border-top: 0;
border-left: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
&:first-child {
border-left: 0;
}
}
// Sub menus box
ul {
border: $sm-simple__border-width solid $sm-simple__collapsible-border-color;
background: $sm-simple__desktop-bg;
@include box-shadow($sm-simple__collapsible-box-shadow);
// Sub menus items
a {
border: 0 !important;
// No need for additional room for the sub arrows
&.has-submenu {
padding-right: $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
margin-left: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
// Sub menus items separators
> li {
border-left: 0;
border-top: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
&:first-child {
border-top: 0;
}
}
}
// 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-simple__desktop-bg;
height: 20px;
// width and position will be set automatically by the script
}
span.scroll-up-arrow {
position: absolute;
top: -2px;
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: 8px; // tweak size of the arrow
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-simple__desktop-item-color transparent;
}
span.scroll-down-arrow {
@extend span.scroll-up-arrow;
top: 6px;
border-style: solid dashed dashed dashed;
border-color: $sm-simple__desktop-item-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-simple__desktop-item-padding-horizontal;
padding-left: $sm-simple__desktop-item-padding-horizontal + 8px + $sm-simple__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: $sm-simple__desktop-item-padding-horizontal;
}
}
// Vertical main menu items
&.sm-vertical {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: $sm-simple__desktop-item-padding-horizontal;
margin-right: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
}
// Main menu items separators
> li {
&:first-child {
border-left: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
}
&:last-child {
border-left: 0;
}
}
// Sub menus box
ul {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: $sm-simple__desktop-item-padding-horizontal;
margin-right: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
}
}
// Vertical main menu
// Main menu box
&.sm-vertical {
// Main menu items
a {
// Sub menu indicators
span.sub-arrow {
right: auto;
margin-left: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
// Main menu items separators
li {
border-left: 0;
border-top: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
}
> li:first-child {
border-top: 0;
}
}
}
}