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