ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/grid/_grid.scss

@@ -106,7 +106,11 @@ $total-columns: $grid-columns) {
 @mixin grid($row-width: null,
 $column-gutter: null,
 $total-columns: null,
-$touch-horizontal-constrain: true) {
+$touch-horizontal-constrain: true,
+$margin-top:null,
+$margin-bottom:null,
+$touch-margin-top:null,
+$touch-margin-bottom:null) {
 
   $grid-width: 1200px !default;
   $grid-column-gutter: 30px !default;
@@ -294,6 +298,16 @@ $touch-horizontal-constrain: true) {
 
   }
 
+  @if($margin-top !=null){
+    .row,grid-row{
+      margin-top:$margin-top;
+    }
+  }
+  @if($margin-bottom !=null){
+    .row,grid-row{
+      margin-bottom:$margin-bottom;
+    }
+  }
   /* enforce no screen horizontal scrolling */
   @if $touch-horizontal-constrain {
     @media #{$breakpoint-touch}{
@@ -303,6 +317,12 @@ $touch-horizontal-constrain: true) {
           /* re-enable on per row basis, if needed */
           overflow-x: visible;
         }
+        @if($touch-margin-top !=null){
+          margin-top:$touch-margin-top;
+        }
+        @if($touch-margin-bottom !=null){
+          margin-bottom:$touch-margin-bottom;
+        }
       }
     }
   }

data/stylesheets/ellipsis/helpers/_component.scss

@@ -23,6 +23,14 @@
     }
   }
 
+  ui-container[name=base]{
+    position:relative;
+  }
+
+  [data-role=container]{
+    position:relative;
+  }
+
   //toggle-container
   .ui-fixed-toggle-container {
     z-index: $global-z-index + 9999;
@@ -30,7 +38,7 @@
     bottom: 0;
     width: 100%;
     background:$global-background;
-    position: fixed;
+    position: fixed !important;
     overflow: hidden;
     *{
       &:focus{

data/stylesheets/ellipsis/helpers/_mixins.scss

@@ -1,15 +1,3 @@
-@mixin clearfix() { *zoom:1;
-  &:before, &:after { content: " "; display: table; }
-  &:after { clear: both; }
-}
-
-@mixin mobile-clearfix() {
-  @include respondTo(smallScreen) { &:before, &:after { content: " "; display: table; }
-    &:after { clear: both; }
-    &:last-child { float: none; }
-  }
-}
-
 @mixin gutter-bleed(){
   margin-right: - $grid-column-gutter/2 !important;
   margin-left: - $grid-column-gutter/2 !important;
@@ -22,193 +10,24 @@
   padding-left: $grid-column-gutter/2 !important;
 }
 
-@mixin dotted-border-bottom(){
-  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left bottom repeat-x;
-
-}
-
-@mixin dotted-border-top(){
-  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left top repeat-x;
-
-}
-
-@mixin constrain-to-grid(){
-  margin:0 auto;
-  max-width:$grid-width - $grid-column-gutter;
-}
-
-@mixin nav-index($index:1){
-  -webkit-nav-index:$index;
-  -moz-nav-index:$index;
-  -o-nav-index:$index;
-  -ms-nav-index:$index;
-  nav-index:$index;
-}
-
-//modified background-image mixin that supports IE 10/11
-@mixin mod-background-image($image){
-  @include background-image($image); // Compass default version, for everything but IE.
-  background-image: -ms-#{$image}; // Vendor prefixes for IE
-}
-
-@mixin linear-gradient($list){
-  @include background-image(linear-gradient(top, $list));
-}
-
-@mixin touch-content(){
-  @media #{$breakpoint-touch}{
-    @content;
-  }
-}
-
-@mixin tablet-content(){
-  @media #{$breakpoint-tablet}{
-    @content;
-  }
-}
-
-@mixin tablet-portrait-content(){
-  @media #{$breakpoint-tablet-portrait}{
-    @content;
-  }
-}
-
-@mixin tablet-landscape-content(){
-  @media #{$breakpoint-tablet-landscape}{
-    @content;
-  }
-}
-
-@mixin phone-content(){
-  @media #{$breakpoint-phone}{
-    @content;
-  }
-}
-
-@mixin phone-portrait-content(){
-  @media #{$breakpoint-phone-portrait}{
-    @content;
-  }
-}
-
-@mixin phone-landscape-content(){
-  @media #{$breakpoint-phone-landscape}{
-    @content;
-  }
-}
-
-@mixin desktop-content(){
-  @media #{$breakpoint-desktop}{
-    @content;
-  }
-}
-
-@mixin tablet-up-content(){
-  @media #{$breakpoint-grid-tablet}{
-    @content;
-  }
-}
-
-@mixin tablet-small-content(){
-  @media #{$breakpoint-small-tablet}{
-    @content;
-  }
-}
-
-
-@mixin grid-contain-content(){
-  @media #{$breakpoint-grid-contain}{
-    @content;
-  }
-}
-
-@mixin portrait-content(){
-  @media #{$breakpoint-portrait}{
-    @content;
-  }
-}
-
-@mixin landscape-content(){
-  @media #{$breakpoint-landscape}{
-    @content;
-  }
-}
-
-@mixin media-breakpoint($width:null){
-  @media only screen and (max-width: #{$width}){
-    @content;
-  }
-}
-
-@mixin tab-focus(){
-  outline: $global-outline !important;
-  @include touch-content(){
-    outline: $global-touch-outline !important;
-  }
-}
-
-@mixin disable-focus(){
-  outline:0;
-  -moz-user-focus: ignore;
+@mixin gutter-collapse(){
+  padding-left:0;
+  padding-right:0;
 }
 
-@mixin expand-panel($label:null){
-  margin-top:30px;
-  @include gutter-bleed();
-  min-height:30px;
-  @include dotted-border-bottom();
-  position:relative;
-  height:auto;
-  &:before{
-    position:absolute;
-    content:'#{$label}';
-    font-size:20px;
-    font-family: inherit;
-    color:#333;
-    top:-10px;
-    left:5px + $grid-column-gutter/2;
-
-  }
-  &:after{
-    font-family:bounc3;
-    position:absolute;
-    right:20px;
-    top:-10px;
-    content:'\e0df';
-    font-size:16px;
-    color:#333;
+@mixin touch-gutter-bleed(){
+  .gutter-bleed{
+    @include touch-content(){
+      @include gutter-bleed();
+    }
   }
 }
 
-/* icon shortcut */
-@mixin span-icon(){
-  span[class*='icon-'] {
-    @content;
+@mixin touch-gutter-collapse(){
+  .gutter-collapse{
+    @include touch-content(){
+      @include gutter-collapse();
+    }
   }
 }
 
-/* flexbox shortcut mixins */
-@mixin flexbox($alignment:flex-start,$justification:flex-start){
-  @include display-flex();
-  @include justify-content($justification);
-  @include align-items($alignment);
-  @content;
-}
-
-@mixin flexbox-column($alignment:flex-start,$justification:flex-start){
-  @include display-flex();
-  @include flex-direction(column);
-  @include justify-content($justification);
-  @include align-items($alignment);
-  @content;
-}
-
-/* supports not for flex-wrap */
-@mixin flex-wrap-not-supported(){
-  @supports not (flex-wrap: wrap) {
-    @content;
-  }
-}
-
-
-

data/stylesheets/ellipsis/helpers/_visibility.scss

@@ -74,15 +74,15 @@
 
   @media #{$breakpoint-tablet}{
     .show-for-phone,
-    .show-for-small,
-    .show-for-tablet-down,
-    .show-for-medium-down{
+    .show-for-small{
       display:none !important;
     }
 
     .hide-for-phone,
     .hide-for-small,
     .show-for-tablet,
+    .show-for-tablet-down,
+    .show-for-medium-down,
     .show-for-medium,
     .show-for-tablet-up,
     .show-for-medium-up{

data/stylesheets/ellipsis/touch/ui/_topbar.scss

@@ -39,6 +39,17 @@ $brand-font-size:null
         @include flexbox($justification: center, $alignment:center);
       }
     }
+  .touch-right,touch-icons{
+    list-style: none;
+    position:absolute;
+    top:0;
+    right:5px;
+    @include flexbox($justification: center, $alignment:center);
+    height:100%;
+    &>touch-icon{
+      display:list-item;
+    }
+  }
   &>section{
     display:none !important;
   }

data/stylesheets/ellipsis/typography/_typography.scss

@@ -33,7 +33,7 @@ $cite-font-size: null,
 $cite-font-color: null,
 $cite-font-style: null) {
 
-  $typography-paragraph-line-height: 1.6 !default;
+  $typography-paragraph-line-height: 1.5 !default;
   $typography-paragraph-margin: 0 0 1em 0 !default;
   $typography-paragraph-lead-font-size: $global-font-size  * 1.5 !default;
   $typography-paragraph-header-sibling-margin: 2em 0 1em 0 !default;

data/stylesheets/ellipsis/ui/_carousel.scss

@@ -2,92 +2,120 @@
 
 /* private -----------------------------------------------------------------------------------------------------------*/
 
-@mixin _ui-carousel($component:null,
-$padding: null,
-$margin: null,
-$container-width: null,
-$container-margin: null,
-$li-width: null,
-$height: null,
-$button-width: null,
-$button-top-position: null,
-$button-left-position: null,
-$button-right-position: null,
-$button-prev-icon-left-position: null,
-$button-next-icon-left-position: null,
-$icon-size: null,
-$icon-top-position: null,
-$z-index: null,
-$slide-margin-right: null,
-$constrain-image-to-width: null,
-$image-border:null,
-$image-border-active:null,
-$nav-control-top-position:null,
-$nav-control-position:null,
-$nav-control-next-icon:null,
-$nav-control-prev-icon:null,
-$nav-control-font-size:null,
-$nav-control-color:null,
-$nav-control-focus-opacity:null,
-$nav-animation:null,
-$max-height:null,
-$image-top-position:null
-) {
-
+@mixin _ui-carousel($component:null,$tag:null,
+$outer-container-height:null,
+$outer-container-width:null,
+$outer-container-margin:null,
+$inner-container-width:null,
+$item-width: null,
+$item-max-height:null,
+$item-justification:null,
+$item-alignment:null,
+$item-margin-right:null,
+$item-border:null,
+$item-border-active:null,
+$item-padding:null,
+$button-padding:null,
+$button-width:null,
+$button-top-position:null,
+$button-left-position:null,
+$button-right-position:null,
+$button-prev-icon-left-position:null,
+$button-next-icon-left-position:null,
+$icon-size:null,
+$icon-top-position:null,
+$z-index:null,
+$constrain-image-to-width:null,
+$image-top-position:null,
+$navigation-top-position:null,
+$navigation-position:null,
+$navigation-next-icon:null,
+$navigation-prev-icon:null,
+$navigation-font-size:null,
+$navigation-color:null,
+$navigation-hover-opacity:null,
+$navigation-hover:null,
+$include-touch-media-queries:null
+)
+{
 
-    height: $height;
-    position: relative;
-    overflow: hidden;
-    &:hover,&:focus{
-      .navigation{
-        opacity:1;
-      }
+  $carousel-selector:'.ui-carousel';
+  $navigation-selector:'.navigation';
+  $inner-selector:'[data-role=carousel-inner-container]';
+  $item-selector:li;
+  $element-selector:'[data-role=carousel-outer-container]';
+  @if $component-custom-tags==true{
+    $navigation-selector:carousel-navigation;
+    $carousel-selector:ui-carousel;
+    $inner-selector:carousel-inner-container;
+    $item-selector:carousel-item;
+    $element-selector:carousel-outer-container;
+    @if $tag != null{
+      $carousel-selector:$tag;
     }
+  }
 
-    &.margin,&[data-margin]{
-      margin: $container-margin;
-    }
-    &.hidden{
-      visibility: hidden;
+
+
+  position: relative;
+  @include flexbox($justification:center,$alignment:center);
+  width:$outer-container-width;
+  @if $outer-container-height !=null{
+    height: $outer-container-height;
+  }
+  @if $outer-container-margin !=null{
+    margin: $outer-container-margin;
+  }
+  &:hover,&:focus{
+    #{$navigation-selector}{
+      opacity:1;
     }
-    .navigation{
+  }
+
+  &.hidden{
+    visibility: hidden;
+  }
+  &>#{$navigation-selector}{
       position: absolute;
-      top: $nav-control-top-position;
+      top: $navigation-top-position;
       z-index: $z-index;
-      height:$nav-control-font-size;
-      width:$nav-control-font-size;
-      opacity:0;
-      @if $nav-animation==true{
+      height:$navigation-font-size;
+      width:$navigation-font-size;
+
+      @if $navigation-hover==true{
+        opacity:0;
         @include transition(all 0.25s linear);
+      }@else{
+        opacity:1;
       }
 
       &.disabled,[disabled]{
         display:none !important;
       }
-      &.visible{
+      &.nav-visible{
         visibility: visible;
+
       }
       &:hover,&:focus{
         cursor:pointer;
-        opacity:$nav-control-focus-opacity;
+        opacity:$navigation-hover-opacity;
 
       }
-
       &.next{
-        right: $nav-control-position;
+        right: $navigation-position;
         &:after{
-          content:'#{$nav-control-next-icon}';
+          content:'#{$navigation-next-icon}';
           font-family:$global-icon-font-family;
-          font-size:$nav-control-font-size;
+          font-size:$navigation-font-size;
           @extend %#{$component}-font;
         }
       }
       &.prev{
-        left: $nav-control-position;
+        left: $navigation-position;
         &:after{
-          content:'#{$nav-control-prev-icon}';
+          content:'#{$navigation-prev-icon}';
           font-family:$global-icon-font-family;
-          font-size:$nav-control-font-size;
+          font-size:$navigation-font-size;
           @extend %#{$component}-font;
         }
       }
@@ -97,7 +125,7 @@ $image-top-position:null
         position: absolute;
         top: $button-top-position;
         z-index: $z-index;
-        padding: $padding;
+        padding: $button-padding;
         width: $button-width;
 
         &.next {
@@ -119,53 +147,62 @@ $image-top-position:null
       }
     }
 
-    [data-role=carousel-inner-container],carousel-inner-container {
-      position: absolute;
-      top:0;
-      left:0;
-
-      //width:100%;
+  #{$inner-selector} {
+    position: relative;
+    top:0;
+    left:0;
+    display:block;
+    overflow:hidden;
+    visibility: hidden;
 
-      &.width,&[data-width]{
-        width: $container-width;
-        margin: $margin;
-      }
-      &.hidden{
-        visibility: hidden;
-      }
-      .ui-carousel,ui-carousel {
+    @if $inner-container-width !=null{
+      width: $inner-container-width;
+    }
+    &.hidden{
+      visibility: hidden;
+    }
+    &.visible{
+      visibility: visible;
+    }
+    .multi-border{
+      border:1px solid transparent;
+    }
+    #{$carousel-selector},ui-template {
         list-style: none;
         @include flexbox($justification: flex-start, $alignment: flex-start);
-
         width:100%;
         padding: 0;
-        &>li,&>carousel-item {
+        &>#{$item-selector} {
           width: 100%;
           height: auto;
           margin: 0;
           overflow: hidden;
           position: relative;
+          display:list-item;
           img {
             max-width: 100%;
-            height:auto;
+            height:auto !important;
           }
-        }
 
-        &.multi-slide,&[data-multi-slide] {
+        }
+        &[data-animation=multi-slide],&[animation=multi-slide] {
           width: auto;
-          &>li,&>carousel-item {
-            width: $li-width !important;
+          &>#{$item-selector}{
+            @include flexbox-column($justification:$item-justification, $alignment:$item-alignment);
+            @if $item-width !=null{
+              min-width: $item-width !important;
+              max-width: $item-width !important;
+            }
             height: auto;
-            margin-right: $slide-margin-right;
+            margin-right: $item-margin-right;
             overflow: hidden;
             position: relative;
-            border:$image-border;
+            border:$item-border;
+            padding:$item-padding;
             cursor:pointer;
-
             &.active{
-              border:$image-border-active;
+              border:$item-border-active;
             }
-
             @if$constrain-image-to-width != true{
               img {
                 max-width: none;
@@ -174,9 +211,10 @@ $image-top-position:null
             }
           }
         }
-        &.fade-transition,&[data-fade-transition]{
+        &[data-animation=fade],&[animation=fade]{
           display:block;
-          &>li,&>carousel-item {
+
+          &>#{$item-selector} {
             display: none;
             position: absolute;
             opacity: 0;
@@ -193,11 +231,46 @@ $image-top-position:null
               max-width: 100%;
               height:auto;
             }
+            @if $include-touch-media-queries==true{
+              @include tablet-content(){
+                img{
+                  max-width:150% !important;
+                  margin-left:-25% !important;
+                }
+              }
+              @include phone-content(){
+                img{
+                  max-width:200% !important;
+                  margin-left:-50% !important;
+                }
+              }
+            }
+          }
+        }
+        &[data-animation=slide],&[animation=slide]{
+          &>#{$item-selector} {
+            max-width:100%;
+            min-width:100%;
+            @if $include-touch-media-queries==true{
+              @include tablet-content(){
+                img{
+                  max-width:150% !important;
+                  margin-left:-25% !important;
+                }
+              }
+              @include phone-content(){
+                img{
+                  max-width:200% !important;
+                  margin-left:-50% !important;
+                }
+              }
+            }
           }
+
         }
-        &[data-height]{
-          &>li,&>carousel-item{
-            max-height:$max-height;
+        @if $item-max-height != null{
+          &>#{$item-selector}{
+            max-height:$item-max-height;
             overflow:hidden;
             img{
               margin-top:$image-top-position;
@@ -206,16 +279,9 @@ $image-top-position:null
         }
       }
     }
-  }
 
-  @media #{$breakpoint-touch}{
-    [data-role=carousel-outer-container],carousel-outer-container {
-      .ui-button,.navigation {
-        display: none;
-      }
+}
 
-    }
-  }
 
 
 
@@ -223,15 +289,22 @@ $image-top-position:null
 /* Public -----------------------------------------------------------------------------------------------------------*/
 
 
-@mixin ui-carousel($class:null,$component:null,
-$padding: 30px 15px 30px 15px,
-$margin: 0 auto,
-$container-width: 90%,
-$container-margin: 0,
-$li-width: 200px,
-$height: auto,
+@mixin ui-carousel($class:null,$component:null,$tag:null,
+$outer-container-height: auto,
+$outer-container-width:100%,
+$outer-container-margin:null,
+$inner-container-width:null,
+$item-width: null,
+$item-max-height:null,
+$item-justification:flex-start,
+$item-alignment:center,
+$item-margin-right:12px,
+$item-border:0,
+$item-border-active:0,
+$item-padding:0,
+$button-padding: 30px 15px 30px 15px,
 $button-width:26px,
-$button-top-position:20%,
+$button-top-position:45%,
 $button-left-position:0,
 $button-right-position:0,
 $button-prev-icon-left-position:0,
@@ -239,46 +312,116 @@ $button-next-icon-left-position:0,
 $icon-size:20px,
 $icon-top-position:20px,
 $z-index:$global-z-index + 100,
-$slide-margin-right:8px,
 $constrain-image-to-width:true,
-$image-border:0,
-$image-border-active:0,
-$nav-control-top-position:40%,
-$nav-control-position:10px,
-$nav-control-next-icon:\e179,
-$nav-control-prev-icon:\e178,
-$nav-control-font-size:2.5em,
-$nav-control-color:$white,
-$nav-control-focus-opacity:.8,
-$nav-animation:true,
-$max-height:450px,
-$image-top-position:0
+$image-top-position:0,
+$navigation-top-position:40%,
+$navigation-position:2em,
+$navigation-next-icon:\e179,
+$navigation-prev-icon:\e178,
+$navigation-font-size:2em,
+$navigation-color:$white,
+$navigation-hover-opacity:.8,
+$navigation-hover:true,
+$include-touch-media-queries:true
+
 ) {
+  $navigation-selector:'.navigation';
+  $element-selector:'[data-role=carousel-outer-container]';
+  @if $component-custom-tags==true{
+    $element-selector:carousel-outer-container;
+    $navigation-selector:carousel-navigation;
+  }
 
-  [data-role=carousel-outer-container],carousel-outer-container {
+  #{$element-selector} {
     @if $class != null{
       &.#{$class} {
 
-        @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
-        $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
-        $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
-        $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
-        $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
+        @include _ui-carousel($component,$tag,
+          $outer-container-height,
+          $outer-container-width,
+          $outer-container-margin,
+          $inner-container-width,
+          $item-width,
+          $item-max-height,
+          $item-justification,
+          $item-alignment,
+          $item-margin-right,
+          $item-border,
+          $item-border-active,
+          $item-padding,
+          $button-padding,
+          $button-width,
+          $button-top-position,
+          $button-left-position,
+          $button-right-position,
+          $button-prev-icon-left-position,
+          $button-next-icon-left-position,
+          $icon-size,
+          $icon-top-position,
+          $z-index,
+          $constrain-image-to-width,
+          $image-top-position,
+          $navigation-top-position,
+          $navigation-position,
+          $navigation-next-icon,
+          $navigation-prev-icon,
+          $navigation-font-size,
+          $navigation-color,
+          $navigation-hover-opacity,
+          $navigation-hover,
+          $include-touch-media-queries
         );
 
         @content;
       }
     } @else {
 
-      @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
-        $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
-        $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
-        $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
-        $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
+      @include _ui-carousel($component,$tag,
+              $outer-container-height,
+              $outer-container-width,
+              $outer-container-margin,
+              $inner-container-width,
+              $item-width,
+              $item-max-height,
+              $item-justification,
+              $item-alignment,
+              $item-margin-right,
+              $item-border,
+              $item-border-active,
+              $item-padding,
+              $button-padding,
+              $button-width,
+              $button-top-position,
+              $button-left-position,
+              $button-right-position,
+              $button-prev-icon-left-position,
+              $button-next-icon-left-position,
+              $icon-size,
+              $icon-top-position,
+              $z-index,
+              $constrain-image-to-width,
+              $image-top-position,
+              $navigation-top-position,
+              $navigation-position,
+              $navigation-next-icon,
+              $navigation-prev-icon,
+              $navigation-font-size,
+              $navigation-color,
+              $navigation-hover-opacity,
+              $navigation-hover,
+              $include-touch-media-queries
       );
 
-
       @content;
     }
   }
+  //don't show navigation for touch
+  @include touch-content(){
+    #{$element-selector} {
+      .ui-button,#{$navigation-selector} {
+        display: none;
+      }
+
+    }
+  }
 }