ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/ui/_menu.scss

@@ -7,28 +7,37 @@ $margin:null,
 $padding:null,
 $width:null,
 $height:null,
-$li-margin:null,
-$li-padding:null,
-$li-divider-border:null,
-$li-divider-padding:null,
-$li-divider-margin:null,
-$li-divider-height:null,
-$li-label-font-size:null,
-$li-label-padding:null,
-$li-search-padding:null,
+$justification:null,
+$alignment:null,
+$item-margin:null,
+$item-padding:null,
+$item-divider-border:null,
+$item-divider-padding:null,
+$item-divider-margin:null,
+$item-divider-height:null,
+$item-label-font-size:null,
+$item-label-padding:null,
+$item-search-padding:null,
 $z-index:null,
 $top:null,
 $left:null,
-$li-stacked-padding:null
+$item-stacked-padding:null
 
 ){
+  $item-selector:li;
+  @if $component-custom-tags==true{
+    $item-selector:menu-item;
+  }
 
-  @include flexbox($alignment:center,$justification:flex-start);
+  @include flexbox($alignment:$alignment,$justification:$justification);
   list-style: none;
   margin: $margin;
   padding:$padding;
   width:$width;
-  height:$height;
+  @if($height !=null){
+    height:$height;
+  }
+
   @extend %#{$component}-background !optional;
 
 
@@ -36,12 +45,12 @@ $li-stacked-padding:null
     @include flexbox-column();
     &>li{
       height:auto;
-      padding:$li-stacked-padding;
+      padding:$item-stacked-padding;
     }
   }
-  &>li,&>menu-item{
-    @include flexbox($alignment:center,$justification:flex-start);
-    margin:$li-margin;
+  &>#{$item-selector}{
+    @include flexbox($alignment:$alignment,$justification:$justification);
+    margin:$item-margin;
     height:100%;
     position:relative;
     &:hover,&:focus{
@@ -53,16 +62,16 @@ $li-stacked-padding:null
     }
     &.label{
       @extend %#{$component}-font-active !optional;
-      font-size:$li-label-font-size;
-      padding:$li-label-padding;
+      font-size:$item-label-font-size;
+      padding:$item-label-padding;
     }
     &.divider{
       width:0;
-      height:$li-divider-height;
+      height:$item-divider-height;
       border:0;
-      border-right: $li-divider-border;
-      padding: $li-divider-padding;
-      margin:$li-divider-margin;
+      border-right: $item-divider-border;
+      padding: $item-divider-padding;
+      margin:$item-divider-margin;
       @if $divider != null{
         @extend %#{$divider}-border !optional;
       }
@@ -70,7 +79,7 @@ $li-stacked-padding:null
     &>a{
       @extend %#{$component}-font !optional;
       font-size:1em;
-      padding:$li-padding;
+      padding:$item-padding;
     }
     &.active{
       @extend %#{$component}-background-active !optional;
@@ -86,39 +95,59 @@ $li-stacked-padding:null
     }
     &.has-dropdown{
       position:relative;
-      &>.ui-dropdown,ui-dropdown{
+      &.static{
+        position:static;
+        &.inactive{
+          &:hover,&:focus{
+            &>.ui-dropdown{
+              display:none !important;
+            }
+          }
+        }
+      }
+      &>.ui-dropdown{
         display:none;
       }
       &:hover,&:focus{
-        &>.ui-dropdown,ui-dropdown{
-          display:block !important;
+        &>.ui-dropdown{
+          display:inherit !important;
         }
       }
     }
     &.has-search {
-      padding:$li-search-padding;
+      padding:$item-search-padding;
       margin-left:auto;
     }
   }
   &>menu-divider{
     width:0;
-    height:$li-divider-height;
+    height:$item-divider-height;
     border:0;
-    border-right: $li-divider-border;
-    padding: $li-divider-padding;
-    margin:$li-divider-margin;
+    border-right: $item-divider-border;
+    padding: $item-divider-padding;
+    margin:$item-divider-margin;
     @if $divider != null{
       @extend %#{$divider}-border !optional;
     }
   }
   &>menu-item-dropdown{
-    @include flexbox($alignment:center,$justification:flex-start);
+    @include flexbox($alignment:$alignment,$justification:$justification);
     position:relative;
-    margin:$li-margin;
-    padding:$li-padding;
+    margin:$item-margin;
+    padding:$item-padding;
     height:100%;
-    &>.ui-dropdown,&>ui-dropdown,&>ui-mega-dropdown{
-      display:none;
+    &.static{
+      position:static;
+      &.inactive{
+        &:hover,&:focus{
+          &>ui-dropdown,&>ui-mega-dropdown{
+            display:none !important;
+          }
+        }
+      }
+    }
+    &>ui-dropdown,&>ui-mega-dropdown{
+      display:none !important;
     }
     &>a{
       @extend %#{$component}-font !optional;
@@ -126,8 +155,8 @@ $li-stacked-padding:null
     }
     &:hover,&:focus{
       cursor:pointer;
-      &>.ui-dropdown,&>ui-dropdown,&>ui-mega-dropdown{
-        display:block !important;
+      &>ui-dropdown,&>ui-mega-dropdown{
+        display:inherit !important;
       }
       @extend %#{$component}-background-hover !optional;
       &>a{
@@ -136,7 +165,7 @@ $li-stacked-padding:null
     }
   }
   &>menu-item-search{
-    padding:$li-search-padding;
+    padding:$item-search-padding;
     margin-left:auto;
   }
   &.flex-start,&.left{
@@ -156,23 +185,30 @@ $margin:0,
 $padding:0,
 $width:auto,
 $height:inherit,
-$li-margin:0,
-$li-padding:1em,
-$li-divider-border:1px solid,
-$li-divider-padding:0,
-$li-divider-margin:0,
-$li-divider-height:100%,
-$li-label-font-size:1em,
-$li-label-padding:$li-padding,
-$li-search-padding:$li-padding,
+$justification:flex-start,
+$alignment:center,
+$item-margin:0,
+$item-padding:1em,
+$item-divider-border:1px solid,
+$item-divider-padding:0,
+$item-divider-margin:0,
+$item-divider-height:100%,
+$item-label-font-size:1em,
+$item-label-padding:$item-padding,
+$item-search-padding:$item-padding,
 $z-index:$global-z-index + 4,
 $top:0,
 $left:0,
-$li-stacked-padding:.5em 0 .5em 0
+$item-stacked-padding:.5em 0 .5em 0
 
 ){
 
-  .ui-menu,ui-menu {
+  $menu-selector:'.ui-menu';
+  @if $component-custom-tags==true{
+    $menu-selector:ui-menu;
+  }
+
+  #{$menu-selector} {
     @if $class != null{
       &.#{$class} {
         @include _ui-menu($component,$divider,
@@ -180,19 +216,21 @@ $li-stacked-padding:.5em 0 .5em 0
           $padding,
           $width,
           $height,
-          $li-margin,
-          $li-padding,
-          $li-divider-border,
-          $li-divider-padding,
-          $li-divider-margin,
-          $li-divider-height,
-          $li-label-font-size,
-          $li-label-padding,
-          $li-search-padding,
+          $justification,
+          $alignment,
+          $item-margin,
+          $item-padding,
+          $item-divider-border,
+          $item-divider-padding,
+          $item-divider-margin,
+          $item-divider-height,
+          $item-label-font-size,
+          $item-label-padding,
+          $item-search-padding,
           $z-index,
           $top,
           $left,
-          $li-stacked-padding
+          $item-stacked-padding
         );
         @content;
       }
@@ -202,19 +240,21 @@ $li-stacked-padding:.5em 0 .5em 0
         $padding,
         $width,
         $height,
-        $li-margin,
-        $li-padding,
-        $li-divider-border,
-        $li-divider-padding,
-        $li-divider-margin,
-        $li-divider-height,
-        $li-label-font-size,
-        $li-label-padding,
-        $li-search-padding,
+        $justification,
+        $alignment,
+        $item-margin,
+        $item-padding,
+        $item-divider-border,
+        $item-divider-padding,
+        $item-divider-margin,
+        $item-divider-height,
+        $item-label-font-size,
+        $item-label-padding,
+        $item-search-padding,
         $z-index,
         $top,
         $left,
-        $li-stacked-padding
+        $item-stacked-padding
       );
       @content;
     }
@@ -222,7 +262,7 @@ $li-stacked-padding:.5em 0 .5em 0
   }
 
   @media #{$breakpoint-touch}{
-    .ui-menu,ui-menu{
+    #{$menu-selector}{
       display:none;
     }
   }
@@ -233,9 +273,10 @@ $li-stacked-padding:.5em 0 .5em 0
 @mixin touch-ui-menu($class:null,$component:css-touch-menu,
 $z-index:$global-z-index + 98,
 $padding:58px 0 0 0,
-$li-border-bottom:1px solid,
-$li-padding:20px 0 20px 20px,
-$li-link-padding:0,
+$item-border-bottom:1px solid,
+$item-padding:20px 0 20px 20px,
+$item-link-padding:0,
+$item-link-transform:none,
 $icon-font-size:1.5em,
 $icon-padding:0 10px 0 0,
 $icon-expand-top:20px,
@@ -244,16 +285,22 @@ $icon-expand-font-size:1em
 
 ){
 
+  $touch-menu-selector:'.touch-ui-menu';
+  @if $component-custom-tags==true{
+    $touch-menu-selector:touch-ui-menu;
+  }
+
   @media #{$breakpoint-touch}{
-    .touch-ui-menu,touch-ui-menu{
+    #{$touch-menu-selector}{
       @if $class != null{
         &.#{$class} {
           @include _touch-ui-menu($component,
             $z-index,
             $padding,
-            $li-border-bottom,
-            $li-padding,
-            $li-link-padding,
+            $item-border-bottom,
+            $item-padding,
+            $item-link-padding,
+            $item-link-transform,
             $icon-font-size,
             $icon-padding,
             $icon-expand-top,
@@ -266,9 +313,10 @@ $icon-expand-font-size:1em
         @include _touch-ui-menu($component,
           $z-index,
           $padding,
-          $li-border-bottom,
-          $li-padding,
-          $li-link-padding,
+          $item-border-bottom,
+          $item-padding,
+          $item-link-padding,
+          $item-link-transform,
           $icon-font-size,
           $icon-padding,
           $icon-expand-top,
@@ -281,7 +329,7 @@ $icon-expand-font-size:1em
   }
 
   @media #{$breakpoint-desktop}{
-    .touch-ui-menu,touch-ui-menu{
+    #{$touch-menu-selector}{
       display:none;
     }
   }

data/stylesheets/ellipsis/ui/_navbar.scss

@@ -8,7 +8,11 @@
 @mixin _ui-navbar($component:null,
 $height:null,
 $margin:null,
+$nav-height:null,
 $section-padding:null,
+$section-height:null,
+$section-justification:null,
+$section-alignment:null,
 $brand-font:null,
 $brand-float:null,
 $brand-margin:null,
@@ -25,19 +29,24 @@ $stacked-section-height:null
 
 ){
 
+  $brand-selector:'.brand';
+  @if $component-custom-tags==true{
+    $brand-selector:ui-brand
+  }
 
   $_ui-navbar-contained-to-grid: $grid-width - $grid-column-gutter;
 
   width: 100%;
   position: relative;
-
+  max-height:$height;
+  display:block;
   nav{
     @extend %#{$component}-background !optional;
     @extend %#{$component}-border !optional;
     @extend %#{$component}-box-shadow !optional;
     width:100%;
     margin: $margin;
-    height: $height;
+    height: $nav-height;
     min-height: 45px;
     position: relative;
 
@@ -50,8 +59,13 @@ $stacked-section-height:null
       margin:0 auto;
       width:100%;
       max-width: $_ui-navbar-contained-to-grid;
+      @include flexbox($justification:$section-justification,$alignment:$section-alignment);
+      @if $section-height != null{
+        height:$section-height;
+      }
+
     }
-    &>.brand {
+    &> #{$brand-selector}{
       @extend %#{$component}-font !optional;
       float: $brand-float;
       display: block;
@@ -77,8 +91,8 @@ $stacked-section-height:null
       &>.touch-brand{
         display:none;
       }
-      &>.brand {
-        @extend %#{$component}-font;
+      &> #{$brand-selector}{
+        @extend %#{$component}-font !optional;
         font: $stacked-brand-font;
         float: $stacked-brand-float;
         text-align: $stacked-brand-text-align;
@@ -87,9 +101,7 @@ $stacked-section-height:null
         height: $stacked-brand-height;
         background:$stacked-brand-background;
         &.center{
-          @include display-flex();
-          @include justify-content(center);
-          @include align-items(center);
+          @include flexbox($justification:center,$alignment:center);
         }
         &>section{
           ul{
@@ -102,9 +114,7 @@ $stacked-section-height:null
         height:$stacked-section-height;
         padding:0;
         &.center{
-          @include display-flex();
-          @include justify-content(center);
-          @include align-items(center);
+          @include flexbox($justification:center,$alignment:center);
         }
       }
     }
@@ -129,10 +139,14 @@ $stacked-section-height:null
 
 /* public ------------------------------------------------------------------------------------------------------------*/
 
-@mixin ui-navbar($class:null,$component:null,$touch-component:css-touch,
-$height:65px,
+@mixin ui-navbar($class:null,$component:null,$touch-component:css-touch-black,
+$height:none,
 $margin:0 auto,
+$nav-height:65px,
 $section-padding:0,
+$section-height:null,
+$section-justification:space-between,
+$section-alignment:center,
 $brand-font:1.5em,
 $brand-float:left,
 $brand-margin:0,
@@ -150,19 +164,32 @@ $touch-position:fixed,
 $touch-height:60px,
 $touch-z-index:$global-z-index + 9999,
 $touch-brand-font:inherit,
-$touch-brand-margin:10px
+$touch-brand-margin:10px,
+$touch-icon-font-size:22px,
+$touch-icon-margin:.8em
 
 ){
 
+  $navbar-selector:'.ui-navbar';
+  $topbar-selector:'.ui-topbar';
+  $brand-selector:'.brand';
+  @if $component-custom-tags==true{
+    $navbar-selector:ui-navbar;
+    $topbar-selector:ui-topbar;
+    $brand-selector:ui-brand
+  }
 
-
-  .ui-navbar,ui-navbar{
+  #{$navbar-selector}{
     @if $class != null{
       &.#{$class} {
         @include _ui-navbar($component,
         $height,
         $margin,
+        $nav-height,
         $section-padding,
+        $section-height,
+        $section-justification,
+        $section-alignment,
         $brand-font,
         $brand-float,
         $brand-margin,
@@ -183,7 +210,11 @@ $touch-brand-margin:10px
       @include _ui-navbar($component,
         $height,
         $margin,
+        $nav-height,
         $section-padding,
+        $section-height,
+        $section-justification,
+        $section-alignment,
         $brand-font,
         $brand-float,
         $brand-margin,
@@ -202,21 +233,30 @@ $touch-brand-margin:10px
     }
 
   }
-
+  @include desktop-content(){
+    #{$navbar-selector}{
+      .touch-ui-brand,touch-ui-brand,.touch-right,touch-icons{
+        display:none;
+      }
+    }
+  }
   @media #{$breakpoint-touch}{
-    .ui-navbar,ui-navbar{
-      &>.ui-topbar,&>ui-topbar{
+    #{$navbar-selector}  #{$topbar-selector} + *{
+      margin-top:0 !important;
+    }
+    #{$navbar-selector}{
+      &>#{$topbar-selector}{
         display:none !important;
       }
       &>nav{
-        &>.brand{
+        &>#{$brand-selector}{
           display:none;
         }
         &>section{
           display:none;
         }
         &.stacked{
-          &>.brand{
+          &>#{$brand-selector}{
             display:none !important;
           }
           &>section{
@@ -232,7 +272,9 @@ $touch-brand-margin:10px
             $touch-height,
             $touch-z-index,
             $touch-brand-font,
-            $touch-brand-margin
+            $touch-brand-margin,
+            $touch-icon-font-size,
+            $touch-icon-margin
           );
         }
 
@@ -242,23 +284,25 @@ $touch-brand-margin:10px
           $touch-height,
           $touch-z-index,
           $touch-brand-font,
-          $touch-brand-margin
+          $touch-brand-margin,
+          $touch-icon-font-size,
+          $touch-icon-margin
         );
       }
 
     }
 
     @if $touch-position != relative{
+      [data-role=navigation] + *{
+        padding-top:$touch-height;
+      }
       @if $class != null {
         .ui-navbar.#{$class} + *,ui-navbar.#{$class} + *{
           padding-top:$touch-height;
-
-
         }
       }@else{
         .ui-navbar + *,ui-navbar + *{
           padding-top:$touch-height;
-
         }
       }
     }
@@ -266,9 +310,13 @@ $touch-brand-margin:10px
 }
 
 @mixin navbar-brand(){
+  $brand-selector:'.brand';
+  @if $component-custom-tags==true{
+    $brand-selector:ui-brand
+  }
   &>nav{
     &.stacked{
-      &>.brand{
+      &>#{$brand-selector}{
         @content;
       }
     }
@@ -276,9 +324,13 @@ $touch-brand-margin:10px
 }
 
 @mixin navbar-stacked-brand(){
+  $brand-selector:'.brand';
+  @if $component-custom-tags==true{
+    $brand-selector:ui-brand
+  }
     &>nav{
       &.stacked{
-        &>.brand{
+        &>#{$brand-selector}{
           @content;
         }
       }
@@ -287,14 +339,14 @@ $touch-brand-margin:10px
 
 @mixin phone-navbar-brand(){
   @media #{$breakpoint-phone}{
-    .touch-brand{
+    .touch-ui-brand,touch-ui-brand{
       @content;
     }
   }
 }
 @mixin touch-navbar-brand(){
   @media #{$breakpoint-touch}{
-    .touch-brand{
+    .touch-ui-brand,touch-ui-brand{
       @content;
     }
   }