Applied responsive design to menu bar using smartmenus

4 files changed, 637 insertions, 0 deletions

diff --git a/jquery/sass/_round-corners-last-item.scss b/jquery/sass/_round-corners-last-item.scss
new file mode 100644
index 0000000..70a8391
--- /dev/null
+++ b/jquery/sass/_round-corners-last-item.scss
@@ -0,0 +1,23 @@
+// Generate rules to round the corners of the last collapsible item
+
+@mixin sm-dox__round-corners-last-item($amount, $chainable: 'ul > li:last-child > ', $level: 4, $chain_prefix: '> li:last-child > ', $chain: '', $selector: '') {
+	$chain: $chain_prefix;
+	$selector: $chain + 'a, ' + $chain + '*:not(ul) a, ' + $chain + 'ul';
+	@for $i from 1 through $level {
+		$chain: $chain + $chainable;
+		$selector: $selector + ', ' + $chain + ' a, ' + $chain + '*:not(ul) a, ' + $chain + ' ul';
+	}
+	#{$selector} {
+		@include border-radius(0 0 $amount $amount);
+	}
+	// highlighted items, don't need rounding since their sub is open
+	$chain: $chain_prefix;
+	$selector: $chain + 'a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
+	@for $i from 1 through $level {
+		$chain: $chain + $chainable;
+		$selector: $selector + ', ' + $chain + ' a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
+	}
+	#{$selector} {
+		@include border-radius(0);
+	}
+}
diff --git a/jquery/sass/_sm-dox.scss b/jquery/sass/_sm-dox.scss
new file mode 100644
index 0000000..81a4e74
--- /dev/null
+++ b/jquery/sass/_sm-dox.scss
@@ -0,0 +1,594 @@
+@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;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/jquery/sass/_sub-items-indentation.scss b/jquery/sass/_sub-items-indentation.scss
new file mode 100644
index 0000000..5e43999
--- /dev/null
+++ b/jquery/sass/_sub-items-indentation.scss
@@ -0,0 +1,15 @@
+// Generate rules to indent sub menus text
+//
+// We'll use left border to avoid messing with the padding.
+
+@mixin sm-dox__sub-items-indentation($amount, $chainable: 'ul ', $level: 4, $chain: '') {
+	@for $i from 1 through $level {
+		$chain: $chain + $chainable;
+		#{$chain} a,
+		#{$chain} a:hover,
+		#{$chain} a:focus,
+		#{$chain} a:active {
+			border-left: ($amount * ($i + 1)) solid transparent;
+		}
+	}
+}
diff --git a/jquery/sass/sm-dox.scss b/jquery/sass/sm-dox.scss
new file mode 100644
index 0000000..19fb444
--- /dev/null
+++ b/jquery/sass/sm-dox.scss
@@ -0,0 +1,5 @@
+@import '_sub-items-indentation.scss';
+@import '_round-corners-last-item.scss';
+
+// the variables + the CSS
+@import '_sm-dox.scss';