ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/ui/_drawer.scss

@@ -34,11 +34,16 @@ $background:null
 }
 
 /* public ------------------------------------------------------------------------------------------------------------*/
-@mixin touch-ui-drawer($class:null,$component:css-touch-drawer-black,$header-component:css-touch-drawer-header-black,
+@mixin touch-ui-drawer($class:null,$component:css-touch-drawer-black,$header-component:css-touch-drawer-header-black,$input-component:css-touch-search,
 $width:265px,
 $header-height:60px,
 $search-margin:12px 0 1px 7px,
-$search-width:80%
+$search-width:80%,
+$search-padding:.3em,
+$search-font-size:16px,
+$search-input-border-radius:2px,
+$search-input-icon-top:.4em,
+$search-input-icon-right:.4em
 ){
 
   @media #{$breakpoint-desktop}{
@@ -50,12 +55,31 @@ $search-width:80%
     .touch-ui-drawer,touch-ui-drawer{
       @if $class != null{
         &.#{$class} {
-          @include _touch-ui-drawer($component,$header-component,$width,$header-height,$search-margin,$search-width);
+          @include _touch-ui-drawer($component,$header-component,$input-component,
+                  $width,
+                  $header-height,
+                  $search-margin,
+                  $search-width,
+                  $search-padding,
+                  $search-font-size,
+                  $search-input-border-radius,
+                  $search-input-icon-top,
+                  $search-input-icon-right
+          );
 
         }
       }@else{
-        @include _touch-ui-drawer($component,$header-component,$width,$header-height,$search-margin,$search-width);
-
+        @include _touch-ui-drawer($component,$header-component,$input-component,
+                $width,
+                $header-height,
+                $search-margin,
+                $search-width,
+                $search-padding,
+                $search-font-size,
+                $search-input-border-radius,
+                $search-input-icon-top,
+                $search-input-icon-right
+        );
       }
 
     }

data/stylesheets/ellipsis/ui/_dropdown.scss

@@ -13,9 +13,9 @@ $float: null,
 $z-index: null,
 $font-size: null,
 $border: null,
-$li-padding: null,
-$li-divider-padding: null,
-$li-divider-border: null,
+$item-padding: null,
+$item-divider-padding: null,
+$item-divider-border: null,
 $column-count: null,
 $column-gap: null,
 $column-width: null,
@@ -25,6 +25,11 @@ $border-radius: null,
 $span-icon-margin:null
 ) {
 
+  $item-selector:li;
+  @if $component-custom-tags==true{
+    $item-selector:menu-item
+  }
+
   left: 0;
   @if $width != null {
     width:$width;
@@ -45,7 +50,7 @@ $span-icon-margin:null
   display: none;
   font-size:$font-size;
 
-  &>li,&>menu-item {
+  &>#{$item-selector} {
     text-align: left;
     display:list-item;
     &:first-child {
@@ -75,8 +80,8 @@ $span-icon-margin:null
       width: 100%;
       height: 0;
       border: 0;
-      border-bottom: $li-divider-border;
-      padding: $li-divider-padding;
+      border-bottom: $item-divider-border;
+      padding: $item-divider-padding;
       @extend %#{$divider}-border !optional;
     }
     &.disabled, &[disabled] {
@@ -95,7 +100,7 @@ $span-icon-margin:null
       @extend %#{$component}-font !optional;
       white-space: nowrap;
       display:block;
-      padding: $li-padding;
+      padding: $item-padding;
       &:hover, &:focus {
         @extend %#{$component}-font-hover !optional;
       }
@@ -108,13 +113,13 @@ $span-icon-margin:null
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: $li-divider-border;
-    padding: $li-divider-padding;
+    border-bottom: $item-divider-border;
+    padding: $item-divider-padding;
     @extend %#{$divider}-border !optional;
     display:list-item;
   }
-  &.show {
-    display: block;
+  &.show,&.active {
+    display: inherit !important;
   }
   &.visible{
     visibility: visible !important;
@@ -133,11 +138,15 @@ $span-icon-margin:null
       }
       &.divider {
         border: 0;
-        border-bottom: $li-divider-border;
+        border-bottom: $item-divider-border;
         @extend %#{$divider}-border !optional;
       }
     }
   }
+  &.horizontal{
+    width:100%;
+    @include flexbox($justification:space-between,$alignment:center)
+  }
 
 }
 
@@ -151,9 +160,9 @@ $float: null,
 $z-index: null,
 $font-size: null,
 $border: null,
-$li-padding: null,
-$li-divider-padding: null,
-$li-divider-border: null,
+$item-padding: null,
+$item-divider-padding: null,
+$item-divider-border: null,
 $column-count: null,
 $column-gap: null,
 $column-width: null,
@@ -194,7 +203,7 @@ $span-icon-margin:null
     }
     &.divider {
       border: 0;
-      border-bottom: $li-divider-border;
+      border-bottom: $item-divider-border;
       @extend %#{$divider}-border !optional;
     }
     &>a {
@@ -203,7 +212,7 @@ $span-icon-margin:null
       @extend %#{$component}-font !optional;
       white-space: nowrap;
       display:block;
-      padding: $li-padding;
+      padding: $item-padding;
       &:hover, &:focus {
         @extend %#{$component}-font-hover !optional;
       }
@@ -235,12 +244,12 @@ $span-icon-margin:null
     width: 100%;
     height: 0;
     border: 0;
-    border-bottom: $li-divider-border;
-    padding: $li-divider-padding;
+    border-bottom: $item-divider-border;
+    padding: $item-divider-padding;
     @extend %#{$divider}-border !optional;
   }
-  &.show {
-    display: block;
+  &.show,&.active {
+    display: inherit !important;
   }
   &.visible{
     visibility: visible !important;
@@ -256,11 +265,16 @@ $height:null
 
 ){
 
+  $item-selector:li;
+  @if $component-custom-tags==true{
+    $item-selector:menu-item
+  }
+
   @include column-count($column-count);
   @include column-gap($column-gap);
   min-width: $column-width * $column-count;
   height: $height;
-  &>li,&>menu-item{
+  &>#{$item-selector}{
     padding: $column-padding;
   }
 
@@ -279,9 +293,9 @@ $float:left,
 $z-index: $global-z-index + 9999,
 $font-size: 1em,
 $border: 1px solid,
-$li-padding: .5em 1em,
-$li-divider-padding: 0,
-$li-divider-border: 1px solid,
+$item-padding: .5em 1em,
+$item-divider-padding: 0,
+$item-divider-border: 1px solid,
 $column-count: 2,
 $column-gap: 1.25em,
 $column-width: 12.5em,
@@ -291,27 +305,34 @@ $border-radius: $global-radius,
 $span-icon-margin:0 .5em 0 0
 ) {
 
-  .ui-dropdown,ui-dropdown {
+  $dropdown-selector:'.ui-dropdown';
+  $item-selector:li;
+  @if $component-custom-tags==true{
+    $dropdown-selector:ui-dropdown;
+    $item-selector:menu-item
+  }
+
+  #{$dropdown-selector} {
     @if $class != null{
       &.#{$class} {
-        @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $li-padding,
-          $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+        @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $item-padding,
+          $item-divider-padding, $item-divider-border, $column-count, $column-gap, $column-width, $column-padding,
           $height, $border-radius, $span-icon-margin
         );
         @content;
       }
     } @else {
-      @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $li-padding,
-        $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+      @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $item-padding,
+        $item-divider-padding, $item-divider-border, $column-count, $column-gap, $column-width, $column-padding,
         $height, $border-radius, $span-icon-margin
       );
       @content;
     }
   }
   @-moz-document url-prefix() {
-    .ui-dropdown,ui-dropdown{
-      &>li,&>menu-item{
-        padding: $li-padding;
+    #{$dropdown-selector}{
+      &>#{$item-selector}{
+        padding: $item-padding;
         &>a{
           min-width:$min-width;
           padding:0 !important;
@@ -322,15 +343,15 @@ $span-icon-margin:0 .5em 0 0
   ui-mega-dropdown {
     @if $class != null{
       &.#{$class} {
-        @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $li-padding,
-                $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+        @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $item-padding,
+                $item-divider-padding, $item-divider-border, $column-count, $column-gap, $column-width, $column-padding,
                 $height, $border-radius, $span-icon-margin
         );
         @content;
       }
     } @else {
-      @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $li-padding,
-              $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+      @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $item-padding,
+              $item-divider-padding, $item-divider-border, $column-count, $column-gap, $column-width, $column-padding,
               $height, $border-radius, $span-icon-margin
       );
       @content;
@@ -347,46 +368,76 @@ $height:200px
 
 ){
 
-  .ui-dropdown,ui-dropdown{
-    @if $class != null{
-      &.#{$class}{
-        @if $sub-class != null{
-          &.multi-column,&.mega{
+
+  @if $component-custom-tags==true{
+    ui-mega-dropdown{
+      @if $class != null{
+        &.#{$class}{
+          @if $sub-class != null{
             &.#{$sub-class}{
               @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
             }
           }
         }
-      }
-
-    }@else{
-      @if $sub-class != null{
-        &.multi-column,&.mega{
+      }@else{
+        @if $sub-class != null{
           &.#{$sub-class}{
             @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
           }
         }
       }
     }
+
+  }@else{
+    .ui-dropdown{
+      @if $class != null{
+        &.#{$class}{
+          @if $sub-class != null{
+            &.multi-column,&.mega{
+              &.#{$sub-class}{
+                @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
+              }
+            }
+          }
+        }
+
+      }@else{
+        @if $sub-class != null{
+          &.multi-column,&.mega{
+            &.#{$sub-class}{
+              @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
+            }
+          }
+        }
+      }
+    }
   }
 
+
+
 }
 
 @mixin touch-ui-dropdown($class:null,$component:css-touch-dropdown,
-$li-padding:20px 0 20px 20px,
+$item-padding:20px 0 20px 20px,
 $link-font-size:14px,
-$li-border-bottom:1px dashed
+$item-border-bottom:1px dashed,
+$item-link-transform:none
 
 ){
 
+  $dropdown-selector:'.touch-ui-dropdown';
+  @if $component-custom-tags==true{
+    $dropdown-selector:touch-ui-dropdown;
+  }
+
   @media #{$breakpoint-touch}{
-    .touch-ui-dropdown,touch-ui-dropdown{
+    #{$dropdown-selector}{
       @if $class != null{
         &.#{$class} {
-          @include _touch-ui-dropdown($component,$li-padding,$link-font-size,$li-border-bottom);
+          @include _touch-ui-dropdown($component,$item-padding,$link-font-size,$item-border-bottom,$item-link-transform);
         }
       }@else{
-        @include _touch-ui-dropdown($component,$li-padding,$link-font-size,$li-border-bottom);
+        @include _touch-ui-dropdown($component,$item-padding,$link-font-size,$item-border-bottom,$item-link-transform);
       }
     }
   }

data/stylesheets/ellipsis/ui/_gallery.scss

@@ -2,79 +2,82 @@
 
 @mixin ui-flex-gallery(
 $columns:3,
-$justification:space-between,
 $grid-contain-columns:3,
 $tablet-columns:2,
-$container-width:80%,
-$cell-height:250px,
-$max-img-height:175px,
+$justification:flex-start,
+$alignment:flex-start,
+$item-justification:center,
+$item-alignment:center,
+$item-height:auto,
+$item-margin:0 0 1em 0,
+$img-container-width:auto,
+$img-max-height:auto,
+$img-justification:center,
+$img-alignment:center,
 $line-height:1.5,
-$img-justify:center,
-$img-align:center,
 $descriptions-margin:auto 0 1em 0,
-$descriptions-justify:flex-start,
-$descriptions-align:center,
-$descriptions-child-justify:center,
-$descriptions-child-align:center,
-$tablet-cell-height:250px,
-$tablet-max-img-height:175px,
-$tablet-container-width:$container-width,
-$tablet-portrait-cell-height:250px,
-$tablet-portrait-max-img-height:175px,
-$tablet-portrait-container-width:$container-width,
+$descriptions-justification:flex-start,
+$descriptions-alignment:center,
+$descriptions-child-justification:center,
+$descriptions-child-alignment:center,
+$tablet-item-height:auto,
+$tablet-img-max-height:auto,
+$tablet-img-container-width:$img-container-width,
+$tablet-portrait-item-height:auto,
+$tablet-portrait-img-max-height:auto,
+$tablet-portrait-img-container-width:$img-container-width,
 $small-tablet-breakpoint:false,
-$phone-cell-height:200px,
-$phone-max-img-height:150px,
+$phone-item-height:200px,
+$phone-item-border-bottom:1px solid #ddd,
+$phone-item-margin:1em 0 0 0,
+$phone-img-max-height:150px,
 $phone-img-container-margin:0 1em 0 0,
-$phone-border-bottom:1px solid #ddd,
-$phone-cell-margin:1em 0 0 0,
 $phone-line-height:1.3,
 $phone-descriptions-margin:.5em 0 1em 0,
-$include-gutter-bleed:false
+$include-gutter-bleed:false,
+$tag:null
 
 
 ) {
   $_flex-gallery-column-percentage: columns-to-percentage($columns);
+  $element-selector:'ui-flex-gallery';
+  @if $tag !=null{
+    $element-selector:$tag;
+  }
 
-  .ui-flex-gallery {
-    @include display-flex();
-    @include justify-content($justification);
-    @include align-items(center);
+  .ui-flex-gallery,#{$element-selector} {
+    @include flexbox($justification:$justification,$alignment:$alignment);
     width: 100%;
     @include flex-wrap(wrap);
-    & > .item {
-      @include display-flex();
-      @include justify-content(center);
-      @include align-items(center);
-      @include flex-direction(column);
+    ui-template{
+      @include flexbox($justification:$justification,$alignment:$alignment);
+      width: 100%;
+      @include flex-wrap(wrap);
+    }
+    .item {
+      @include flexbox-column($justification:$item-justification,$alignment:$item-alignment);
       width: $_flex-gallery-column-percentage;
       overflow: hidden;
-      max-height:$cell-height;
-      & > .img-container {
-        width: $container-width;
-        height: $max-img-height;
+      max-height:$item-height;
+      margin:$item-margin;
+      .img-container {
+        width: $img-container-width;
+        height: $img-max-height;
         overflow: hidden;
-        @include display-flex();
-        @include justify-content($img-justify);
-        @include align-items($img-align);
+        @include flexbox($justification:$img-justification,$alignment:$img-alignment);
         & > img {
           max-width: 100% !important;
           height: auto !important;
         }
       }
-      & > .descriptions {
-        width: $container-width;
+      .descriptions {
+        width: $img-container-width;
         line-height: $line-height;
-        @include display-flex();
-        @include justify-content($descriptions-justify);
-        @include align-items($descriptions-align);
-        @include flex-direction(column);
+        @include flexbox-column($justification:$descriptions-justification,$alignment:$descriptions-alignment);
         margin:$descriptions-margin;
         &>*{
           width:100%;
-          @include display-flex();
-          @include justify-content($descriptions-child-justify);
-          @include align-items($descriptions-child-align);
+          @include flexbox($justification:$descriptions-child-justification,$alignment:$descriptions-child-alignment);
         }
       }
     }
@@ -83,8 +86,8 @@ $include-gutter-bleed:false
 
   @include grid-contain-content() {
     $_grid-contain_flex-gallery-column-percentage: columns-to-percentage($grid-contain-columns);
-    .ui-flex-gallery {
-      & > .item {
+    .ui-flex-gallery,#{$element-selector} {
+      .item {
         width: $_grid-contain_flex-gallery-column-percentage;
       }
     }
@@ -92,16 +95,16 @@ $include-gutter-bleed:false
 
   @include tablet-content(){
     $_tablet_flex-gallery-column-percentage: columns-to-percentage($tablet-columns);
-    .ui-flex-gallery {
-      & > .item {
+    .ui-flex-gallery,#{$element-selector} {
+      .item {
         width: $_tablet_flex-gallery-column-percentage;
-        max-height:$tablet-cell-height;
-        & > .img-container {
-          width: $tablet-container-width;
-          height: $tablet-max-img-height;
+        max-height:$tablet-item-height;
+        .img-container {
+          width: $tablet-img-container-width;
+          height: $tablet-img-max-height;
         }
-        & > .descriptions{
-          width: $tablet-container-width;
+        .descriptions{
+          width: $tablet-img-container-width;
         }
       }
     }
@@ -109,16 +112,16 @@ $include-gutter-bleed:false
 
   @include tablet-portrait-content(){
     $_tablet_flex-gallery-column-percentage: columns-to-percentage($tablet-columns);
-    .ui-flex-gallery {
-      & > .item {
+    .ui-flex-gallery,#{$element-selector} {
+      .item {
         width: $_tablet_flex-gallery-column-percentage;
-        max-height:$tablet-portrait-cell-height;
-        & > .img-container {
-          width: $tablet-portrait-container-width;
-          height: $tablet-portrait-max-img-height;
+        max-height:$tablet-portrait-item-height;
+        .img-container {
+          width: $tablet-portrait-img-container-width;
+          height: $tablet-portrait-img-max-height;
         }
-        & > .descriptions{
-          width: $tablet-portrait-container-width;
+        .descriptions{
+          width: $tablet-portrait-img-container-width;
         }
       }
     }
@@ -126,35 +129,35 @@ $include-gutter-bleed:false
 
   @if $small-tablet-breakpoint ==true {
     @include tablet-small-content() {
-      .ui-flex-gallery {
+      .ui-flex-gallery,#{$element-selector} {
         @if $include-gutter-bleed==true{
           @include gutter-bleed();
         }
-        & > .item {
+        .item {
           width: 100%;
-          height:$phone-cell-height;
+          height:$phone-item-height;
           flex-direction:row;
           justify-content: flex-start;
-          border-bottom:$phone-border-bottom;
-          margin:$phone-cell-margin;
+          border-bottom:$phone-item-border-bottom;
+          margin:$phone-item-margin;
           &:first-child{
             margin-top:0;
           }
           &:last-child{
             border-bottom:0;
           }
-          & > .img-container {
+          .img-container {
             max-width: 50%;
-            height: $phone-max-img-height;
+            height: $phone-img-max-height;
             flex-grow:1;
             margin:$phone-img-container-margin;
             justify-content: flex-start;
             align-self:flex-start;
-            & > img {
+            img {
               align-self: flex-start;
             }
           }
-          & > .descriptions {
+          .descriptions {
             height:100%;
             width:50%;
             flex-grow:1;
@@ -172,26 +175,27 @@ $include-gutter-bleed:false
   }
 
   @include phone-content() {
-    .ui-flex-gallery {
+    .ui-flex-gallery,#{$element-selector} {
       @if $include-gutter-bleed==true{
         @include gutter-bleed();
       }
-      & > .item {
+      .item {
         width: 100%;
-        height:$phone-cell-height;
+        height:$phone-item-height;
         flex-direction:row;
         justify-content: flex-start;
-        border-bottom:$phone-border-bottom;
-        margin:$phone-cell-margin;
+        border-bottom:$phone-item-border-bottom;
+        margin:$phone-item-margin;
         &:first-child{
           margin-top:0;
         }
         &:last-child{
           border-bottom:0;
         }
-        & > .img-container {
+        .img-container {
           max-width: 50%;
-          height: $phone-max-img-height;
+          min-width:50%;
+          height: $phone-img-max-height;
           flex-grow:1;
           margin:$phone-img-container-margin;
           justify-content: flex-start;
@@ -200,7 +204,7 @@ $include-gutter-bleed:false
             align-self: flex-start;
           }
         }
-        & > .descriptions {
+        .descriptions {
           height:100%;
           width:50%;
           flex-grow:1;