@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-dox__white: #fff !default;
$sm-dox__gray: darken($sm-dox__white, 6.5%) !default;
$sm-dox__gray-dark: darken($sm-dox__white, 26.5%) !default;
$sm-dox__gray-darker: darken($sm-dox__white, 66.5%) !default;
$sm-dox__red: #D23600 !default;
$sm-dox__box-shadow: rgba(0, 0, 0, 0.2) !default;
// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------
$sm-dox__desktop-vp: 768px !default; // switch from collapsible to desktop
// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------
$sm-dox__font-family: "Lucida Grande", "Geneva", "Helvetica", Arial, sans-serif !default;
$sm-dox__font-size-base: 13px !default;
$sm-dox__font-size-small: 12px !default;
$sm-dox__line-height: 15px !default;
// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------
$sm-dox__border-width: 1px !default;
$sm-dox__border-radius: 5px !default;
// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------
// Menu box
//$sm-dox__collapsible-bg: $sm-dox__gray !default;
$sm-dox__collapsible-bg: url('tab_b.png') !default;
$sm-dox__collapsible-border-radius: $sm-dox__border-radius !default;
// Items
$sm-dox__collapsible-item-color: $sm-dox__gray-darker !default;
$sm-dox__collapsible-item-current-color: $sm-dox__red !default;
$sm-dox__collapsible-item-disabled-color: darken($sm-dox__gray, 20%) !default;
$sm-dox__collapsible-item-padding-vertical: 0px !default;
$sm-dox__collapsible-item-padding-horizontal: 12px !default;
// Items separators
$sm-dox__collapsible-separators-color: rgba(0, 0, 0, 0.05) !default;
// Toggle button (sub menu indicators)
$sm-dox__collapsible-toggle-bg: rgba(255, 255, 255, 0.5) !default;
// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------
// Menu box
$sm-dox__collapsible-sub-bg: rgba(darken($sm-dox__gray, 30%), 0.1) !default;
// Items text indentation for deeper levels
$sm-dox__collapsible-sub-item-indentation: 8px !default;
// ----------------------------------------------------------
// :: 1.7. Desktop main menu
// ----------------------------------------------------------
// Menu box
//$sm-dox__desktop-bg: $sm-dox__gray !default;
$sm-dox__desktop-bg: url('tab_b.png') !default;
//$sm-dox__desktop-border-radius: 100px !default;
$sm-dox__desktop-padding-horizontal: 10px !default;
// Items
$sm-dox__desktop-item-color: $sm-dox__gray_darker !default;
$sm-dox__desktop-item-hover-color: $sm-dox__red !default;
$sm-dox__desktop-item-current-color: $sm-dox__red !default;
$sm-dox__desktop-item-disabled-color: darken($sm-dox__gray, 20%) !default;
$sm-dox__desktop-item-padding-vertical: 0px !default;
$sm-dox__desktop-item-padding-horizontal: 12px !default;
// Sub menu indicators
$sm-dox__desktop-arrow-size: 4px !default; // border-width
$sm-dox__desktop-arrow-color: $sm-dox__gray-darker !default;
$sm-dox__desktop-arrow-spacing: 4px !default;
// Vertical menu box
$sm-dox__desktop-vertical-border-radius: $sm-dox__border-radius !default;
$sm-dox__desktop-vertical-padding-vertical: 10px !default;
// Vertical items
$sm-dox__desktop-vertical-item-hover-bg: $sm-dox__white !default;
$sm-dox__desktop-vertical-item-padding-vertical: 10px !default;
$sm-dox__desktop-vertical-item-padding-horizontal: 20px !default;
$sm-dox__main-text-color: #283A5D !default;
$sm-dox__main-highlight-color: white !default;
// ----------------------------------------------------------
// :: 1.8. Desktop sub menus
// ----------------------------------------------------------
// Menu box
$sm-dox__desktop-sub-bg: $sm-dox__white !default;
$sm-dox__desktop-sub-border-color: $sm-dox__gray-dark !default;
$sm-dox__desktop-sub-border-radius: $sm-dox__border-radius !default;
$sm-dox__desktop-sub-box-shadow: 0 5px 9px $sm-dox__box-shadow !default;
$sm-dox__desktop-sub-padding-vertical: 5px !default;
$sm-dox__desktop-sub-padding-horizontal: 0 !default;
// Items
$sm-dox__desktop-sub-item-color: $sm-dox__gray_darker !default;
$sm-dox__desktop-sub-item-hover-color: $sm-dox__red !default;
$sm-dox__desktop-sub-item-hover-bg: $sm-dox__gray !default;
$sm-dox__desktop-sub-item-current-color: $sm-dox__red !default;
$sm-dox__desktop-sub-item-disabled-color: darken($sm-dox__white, 20%) !default;
$sm-dox__desktop-sub-item-padding-vertical: 10px !default;
$sm-dox__desktop-sub-item-padding-horizontal: 20px !default;
// Sub menu indicators
$sm-dox__desktop-sub-arrow-size: 5px !default; // border-width
// Sub menu carets
$sm-dox__desktop-sub-caret-size: 8px !default; // border-width
$sm-dox__desktop-sub-caret-left: 30px !default;
$sm-dox__main-row-height: 36px !default;
// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------
// calc item height and sub menus toggle button size
$sm-dox__item-height: $sm-dox__line-height + $sm-dox__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-dox__toggle-size: floor($sm-dox__main-row-height * 0.8);
$sm-dox__toggle-spacing: floor($sm-dox__main-row-height * 0.1);
// Main menu box
.sm-dox {
background-image: $sm-dox__collapsible-bg;
//@include border-radius($sm-dox__collapsible-border-radius);
// Main menu items
a {
&,
&:focus,
&:hover,
&:active {
padding: $sm-dox__collapsible-item-padding-vertical $sm-dox__collapsible-item-padding-horizontal;
/* make room for the toggle button (sub indicator) */
padding-right: $sm-dox__collapsible-item-padding-horizontal + $sm-dox__toggle-size + $sm-dox__toggle-spacing;
/* color: $sm-dox__collapsible-item-color; */
font-family: $sm-dox__font-family;
font-size: $sm-dox__font-size-base;
font-weight: bold;
line-height: 36px; //$sm-dox__line-height;
text-decoration: none;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.9);
color: $sm-dox__main-text-color;
outline: none;
}
&:hover {
background-image: url('tab_a.png');
background-repeat:repeat-x;
color: $sm-dox__main-highlight-color;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
}
&.current {
color: $sm-dox__collapsible-item-current-color;
}
&.disabled {
color: $sm-dox__collapsible-item-disabled-color;
}
// Toggle buttons (sub menu indicators)
span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -(ceil($sm-dox__toggle-size / 2));
left: auto;
right: $sm-dox__toggle-spacing;
width: $sm-dox__toggle-size;
height: $sm-dox__toggle-size;
overflow: hidden;
font: bold #{$sm-dox__font-size-small}/#{$sm-dox__toggle-size} monospace !important;
text-align: center;
text-shadow: none;
background: $sm-dox__collapsible-toggle-bg;
@include border-radius($sm-dox__border-radius);
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
}
// round the corners of the first item
> li:first-child > a, > li:first-child > :not(ul) a {
@include border-radius($sm-dox__collapsible-border-radius $sm-dox__collapsible-border-radius 0 0);
}
// round the corners of the last item
@include sm-dox__round-corners-last-item($sm-dox__collapsible-border-radius);
// Main menu items separators
//li {
// /*border-top: 1px solid $sm-dox__collapsible-separators-color;*/
// border-top: 0;
//}
//> li:first-child {
// border-top: 0;
//}
// Sub menus box
ul {
background: $sm-dox__collapsible-sub-bg;
// Sub menus items
a {
&,
&:focus,
&:hover,
&:active {
font-size: $sm-dox__font-size-small;
// add indentation for sub menus text
border-left: $sm-dox__collapsible-sub-item-indentation solid transparent;
//line-height: $sm-dox__line-height;
line-height: $sm-dox__main-row-height;
text-shadow: none;
background-color: white;
background-image: none;
}
&:hover {
// color: $sm-dox__collapsible-item-current-color;
// background-color: $sm-dox__gray;
background-image: url('tab_a.png');
background-repeat:repeat-x;
color: $sm-dox__main-highlight-color;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
}
}
// Add indentation for sub menus text for deeper levels
@include sm-dox__sub-items-indentation($sm-dox__collapsible-sub-item-indentation);
}
}
// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------
@media (min-width: $sm-dox__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-dox ul{position:absolute;width:12em;}
.sm-dox li{float:left;}
.sm-dox.sm-rtl li{float:right;}
.sm-dox ul li,.sm-dox.sm-rtl ul li,.sm-dox.sm-vertical li{float:none;}
.sm-dox a{white-space:nowrap;}
.sm-dox ul a,.sm-dox.sm-vertical a{white-space:normal;}
.sm-dox .sm-nowrap > li > a,.sm-dox .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
/* ...end */
// Main menu box
.sm-dox {
padding: 0 $sm-dox__desktop-padding-horizontal;
background-image: $sm-dox__desktop-bg;
line-height: 36px;
//@include border-radius($sm-dox__desktop-border-radius);
// Main menu items
a {
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -(ceil($sm-dox__desktop-arrow-size / 2));
right: $sm-dox__desktop-item-padding-horizontal;
width: 0;
height: 0;
border-width: $sm-dox__desktop-arrow-size;
border-style: solid dashed dashed dashed;
border-color: $sm-dox__main-text-color transparent transparent transparent;
background: transparent;
@include border-radius(0);
}
&,
&:focus,
&:active,
&:hover,
&.highlighted {
padding: $sm-dox__desktop-item-padding-vertical $sm-dox__desktop-item-padding-horizontal;
/*color: $sm-dox__desktop-item-color;*/
background-image:url('tab_s.png');
background-repeat:no-repeat;
background-position:right;
@include border-radius(0 !important);
}
&:hover {
background-image: url('tab_a.png');
background-repeat:repeat-x;
color: $sm-dox__main-highlight-color;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
span.sub-arrow {
border-color: $sm-dox__main-highlight-color transparent transparent transparent;
}
}
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-dox__desktop-item-padding-horizontal + $sm-dox__desktop-arrow-size * 2 + $sm-dox__desktop-arrow-spacing;
}
}
// No main menu items separators
li {
border-top: 0;
}
// First sub level carets
> li > ul:before,
> li > ul:after {
content: '';
position: absolute;
top: -($sm-dox__desktop-sub-caret-size * 2 + $sm-dox__border-width * 2);
left: $sm-dox__desktop-sub-caret-left;
width: 0;
height: 0;
overflow: hidden;
border-width: ($sm-dox__desktop-sub-caret-size + $sm-dox__border-width);
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-dox__gray-dark transparent;
}
> li > ul:after {
top: -($sm-dox__desktop-sub-caret-size * 2);
left: ($sm-dox__desktop-sub-caret-left + $sm-dox__border-width);
border-width: $sm-dox__desktop-sub-caret-size;
border-color: transparent transparent $sm-dox__desktop-sub-bg transparent;
}
// Sub menus box
ul {
border: $sm-dox__border-width solid $sm-dox__gray-dark;
padding: $sm-dox__desktop-sub-padding-vertical $sm-dox__desktop-sub-padding-horizontal;
background: $sm-dox__desktop-sub-bg;
@include border-radius($sm-dox__desktop-sub-border-radius !important);
@include box-shadow($sm-dox__desktop-sub-box-shadow);
// Sub menus items
a {
span.sub-arrow {
right: 8px;
top: 50%;
margin-top: -$sm-dox__desktop-sub-arrow-size;
border-width: $sm-dox__desktop-sub-arrow-size;
border-color: transparent transparent transparent $sm-dox__desktop-sub-item-color;
border-style: dashed dashed dashed solid;
}
&,
&:hover,
&:focus,
&:active,
&.highlighted {
color: $sm-dox__desktop-sub-item-color;
background-image:none;
border: 0 !important;
color: $sm-dox__desktop-sub-item-color;
background-image:none;
}
&:hover {
background-image: url('tab_a.png');
background-repeat:repeat-x;
color: $sm-dox__main-highlight-color;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
span.sub-arrow {
border-color: transparent transparent transparent $sm-dox__main-highlight-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-dox__desktop-sub-bg;
height: 36px;
// width and position will be set automatically by the script
&:hover {
background: $sm-dox__desktop-sub-item-hover-bg;
}
}
span.scroll-up:hover span.scroll-up-arrow {
border-color: transparent transparent $sm-dox__desktop-sub-item-hover-color transparent;
}
span.scroll-down:hover span.scroll-down-arrow {
border-color: $sm-dox__desktop-sub-item-hover-color transparent transparent transparent;
}
span.scroll-up-arrow {
position: absolute;
top: 0;
left: 50%;
margin-left: -6px;
// 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: 6px; // tweak size of the arrow
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-dox__desktop-sub-item-color transparent;
}
span.scroll-down-arrow {
@extend span.scroll-up-arrow;
top: 8px;
border-style: solid dashed dashed dashed;
border-color: $sm-dox__desktop-sub-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-dox__desktop-item-padding-horizontal;
padding-left: $sm-dox__desktop-item-padding-horizontal + $sm-dox__desktop-arrow-size * 2 + $sm-dox__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: $sm-dox__desktop-item-padding-horizontal;
}
}
// Vertical main menu items
&.sm-vertical {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-dox__desktop-vertical-item-padding-vertical $sm-dox__desktop-vertical-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 8px;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-dox__desktop-arrow-color transparent transparent;
}
}
}
// First sub level carets
> li > ul:before {
left: auto;
right: $sm-dox__desktop-sub-caret-left;
}
> li > ul:after {
left: auto;
right: ($sm-dox__desktop-sub-caret-left + $sm-dox__border-width);
}
// Sub menus box
ul {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-dox__desktop-sub-item-padding-vertical $sm-dox__desktop-sub-item-padding-horizontal !important;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 8px;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-dox__desktop-arrow-color transparent transparent;
}
}
}
}
// Vertical main menu
// Main menu box
&.sm-vertical {
padding: $sm-dox__desktop-vertical-padding-vertical 0;
@include border-radius($sm-dox__desktop-vertical-border-radius);
// Main menu items
a {
padding: $sm-dox__desktop-vertical-item-padding-vertical $sm-dox__desktop-vertical-item-padding-horizontal;
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-dox__desktop-vertical-item-hover-bg;
}
&.disabled {
background-image: $sm-dox__desktop-bg;
}
// Sub menu indicators
span.sub-arrow {
right: 8px;
top: 50%;
margin-top: -$sm-dox__desktop-sub-arrow-size;
border-width: $sm-dox__desktop-sub-arrow-size;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $sm-dox__desktop-arrow-color;
}
}
// No sub level carets
> li > ul:before,
> li > ul:after {
display: none;
}
// Sub menus box
ul {
// Sub menus items
a {
padding: $sm-dox__desktop-sub-item-padding-vertical $sm-dox__desktop-sub-item-padding-horizontal;
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-dox__desktop-sub-item-hover-bg;
}
&.disabled {
background: $sm-dox__desktop-sub-bg;
}
}
}
}
}
}