diff options
Diffstat (limited to 'deps/jquery/sass/_sm-dox.scss')
| -rw-r--r-- | deps/jquery/sass/_sm-dox.scss | 598 |
1 files changed, 598 insertions, 0 deletions
diff --git a/deps/jquery/sass/_sm-dox.scss b/deps/jquery/sass/_sm-dox.scss new file mode 100644 index 0000000..467afec --- /dev/null +++ b/deps/jquery/sass/_sm-dox.scss @@ -0,0 +1,598 @@ +@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: var(--font-family-nav) !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: var(--nav-gradient-image) !default; +$sm-dox__collapsible-border-radius: $sm-dox__border-radius !default; + +// Items +$sm-dox__collapsible-item-color: var(--nav-menu-foreground-color) !default; //$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: var(--nav-menu-toggle-color) !default; //rgba(255, 255, 255, 0.5) !default; + + +// ---------------------------------------------------------- +// :: 1.6. Collapsible sub menus +// ---------------------------------------------------------- + +// Menu box +$sm-dox__collapsible-sub-bg: var(--nav-menu-background-color) !default; // 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: var(--nav-gradient-image) !default; +//$sm-dox__desktop-border-radius: 100px !default; +$sm-dox__desktop-padding-horizontal: 10px !default; + +// Items +$sm-dox__desktop-item-color: var(--nav-text-normal-color) !default; //$sm-dox__gray_darker !default; +$sm-dox__desktop-item-hover-color: var(--nav-text-hover-color) !default; //$sm-dox__red !default; +$sm-dox__desktop-item-current-color: var(--nav-text-disabled-color) !default; //$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: var(--nav-text-normal-color) !default; // #283A5D !default; +$sm-dox__main-highlight-color: var(--nav-text-hover-color) !default; // white !default; + +// ---------------------------------------------------------- +// :: 1.8. Desktop sub menus +// ---------------------------------------------------------- + +// Menu box +$sm-dox__desktop-sub-bg: var(--nav-menu-background-color) !default; //$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: var(--nav-menu-foreground-color) !default; //$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: var(--nav-text-normal-shadow); + color: $sm-dox__main-text-color; + outline: none; + } + + &:hover { + background-image: var(--nav-gradient-active-image); + background-repeat:repeat-x; + color: $sm-dox__main-highlight-color; + text-shadow: var(--nav-text-hover-shadow); + } + + &.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); + } + & span.sub-arrow:before { + display: block; + content: '+'; + } + // 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: var(--nav-menu-background-color); + background-image: none; + } + + &:hover { + // color: $sm-dox__collapsible-item-current-color; + // background-color: $sm-dox__gray; + background-image: var(--nav-gradient-active-image); + 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:var(--nav-separator-image); + background-repeat:no-repeat; + background-position:right; + @include border-radius(0 !important); + } + &:hover { + background-image: var(--nav-gradient-active-image); + background-repeat:repeat-x; + color: $sm-dox__main-highlight-color; + text-shadow: var(--nav-text-hover-shadow); + 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: var(--nav-gradient-active-image); + background-repeat:repeat-x; + color: $sm-dox__main-highlight-color; + text-shadow: var(--nav-text-hover-shadow); + 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; + } + } + } + } + } +} |