ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/ui/_pagination.scss

@@ -8,7 +8,8 @@ $margin: null,
 $page-margin: null,
 $page-padding: null,
 $page-font-size:null,
-$box-shadow:null
+$box-shadow:null,
+$touch-font-size:null
 ) {
 
   list-style: none;
@@ -48,7 +49,7 @@ $box-shadow:null
         @if($box-shadow == false){
           box-shadow:none;
         }
-
+        font-size:1em;
         &:hover, &:focus {
           @extend %#{$component}-background-hover !optional;
           @extend %#{$component}-font-hover !optional;
@@ -89,7 +90,8 @@ $box-shadow:null
     }
   }
 
-  @media #{$breakpoint-phone}{
+  @include phone-content(){
+    font-size:$touch-font-size;
     .page-info{
       display:none;
     }
@@ -99,15 +101,13 @@ $box-shadow:null
           display:none;
         }
         a {
-
           box-shadow: none;
         }
-
       }
     }
-
   }
 
+
 }
 
 /* Public ------------------------------------------------------------------------------------------------------------*/
@@ -118,17 +118,20 @@ $margin:1em 0 2em 0,
 $page-margin:0 0 0 .5em,
 $page-padding:.5em .7em .5em .7em,
 $page-font-size:1em,
-$box-shadow:true
+$box-shadow:true,
+$touch-font-size:.8em
 ) {
 
   .ui-pagination,ui-pagination {
     @if $class != null{
       &.#{$class} {
-        @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin, $page-padding,$page-font-size,$box-shadow);
+        @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin,
+                $page-padding,$page-font-size,$box-shadow,$touch-font-size);
         @content;
       }
     } @else {
-      @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin, $page-padding,$page-font-size,$box-shadow);
+      @include _ui-pagination($component, $active-component, $border-radius, $margin, $page-margin,
+              $page-padding,$page-font-size,$box-shadow,$touch-font-size);
       @content;
     }
 

data/stylesheets/ellipsis/ui/_screentab.scss

@@ -0,0 +1,109 @@
+
+
+@mixin _ui-screentab($component:null,
+$height:null,
+$width:null,
+$top:null,
+$z-index:null,
+$border-radius:null,
+$padding:null,
+$font-family:null,
+$font-size:null,
+$font-weight:null,
+$letter-spacing:null
+){
+  position: fixed;
+  top:$top;
+  padding:$padding;
+  @extend %#{$component}-background;
+  @extend %#{$component}-border;
+  @extend %#{$component}-box-shadow;
+  left:0;
+  height:$height;
+  width:$width;
+  border-radius:$border-radius;
+  display:block;
+  -moz-background-clip: padding-box;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  z-index:$z-index;
+  letter-spacing: $letter-spacing;
+  &.right{
+    right:0 !important;
+    left:auto;
+  }
+  &>span{
+    //writing-mode: tb-rl;
+    display:block;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    font-family:$font-family;
+    font-size: $font-size;
+    font-weight:$font-weight;
+    @extend %#{$component}-font;
+  }
+  &:hover,&:focus{
+    cursor:pointer;
+    @extend %#{$component}-background-hover;
+  }
+
+  @include touch-content(){
+    display:none !important;
+  }
+}
+
+@mixin ui-screentab($class:null,$tag:null,$component:default,
+$height:150px,
+$width:30px,
+$top:150px,
+$z-index:$global-z-index + 999,
+$border-radius:$global-radius 0 0 $global-radius,
+$padding:1em,
+$font-family:inherit,
+$font-size:1em,
+$font-weight:normal,
+$letter-spacing:1px
+){
+  $selector:ui-screentab;
+  @if $tag != null{
+    $selector:$tag;
+  }
+  .ui-screentab,#{$selector}{
+
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-screentab($component,
+        $height,
+        $width,
+        $top,
+        $z-index,
+        $border-radius,
+        $padding,
+        $font-family,
+        $font-size,
+        $font-weight,
+        $letter-spacing
+        );
+        @content;
+      }
+    }@else{
+      @include _ui-screentab($component,
+              $height,
+              $width,
+              $top,
+              $z-index,
+              $border-radius,
+              $padding,
+              $font-family,
+              $font-size,
+              $font-weight,
+              $letter-spacing
+      );
+      @content;
+    }
+
+  }
+}

data/stylesheets/ellipsis/ui/_slidingpanel.scss

@@ -40,7 +40,7 @@ $top:50px,
 $right:0,
 $border-radius:$global-radius,
 $padding:0,
-$z-index:1001
+$z-index:100001
 ) {
 
   .ui-sliding-panel,ui-sliding-panel {

data/stylesheets/ellipsis/ui/_social.scss

@@ -8,25 +8,26 @@
 $margin:null,
 $padding:null,
 $font-size:null,
-$li-padding: null,
-$li-margin:null,
+$item-padding: null,
+$item-margin:null,
 $facebook-color:null,
 $pinterest-color:null,
 $twitter-color:null,
 $flickr-color:null,
 $google-color:null,
 $github-color:null,
-$color-text-shadow:null
-
+$color-text-shadow:null,
+$color-item-margin:null,
+$color-font-size:null
 ) {
 
       @include flexbox($justification: flex-start, $alignment: center);
       list-style: none;
       padding: $padding;
       margin:$margin;
-      &>li,&>social-icon {
-        padding: $li-padding;
-        margin:$li-margin;
+      li,social-icon {
+        padding: $item-padding;
+        margin:$item-margin;
         min-width:$font-size;
         min-height:$font-size;
         position:relative;
@@ -38,6 +39,7 @@ $color-text-shadow:null
             position:absolute;
             top:0;
             left:0;
+            font-size:$font-size;
           }
 
           &.facebook{
@@ -73,7 +75,12 @@ $color-text-shadow:null
         }
       }
       &.color{
-        &>li,&>social-icon{
+        li,social-icon{
+          padding:0;
+          margin:$color-item-margin;
+          min-width:$color-font-size;
+          min-height:$color-font-size;
+          font-size:$color-font-size;
           a{
             &:before{
               font-family:$global-icon-font-family;
@@ -81,6 +88,7 @@ $color-text-shadow:null
               position:absolute;
               top:0;
               left:0;
+              font-size:$color-font-size;
             }
             &.facebook{
               &:before{
@@ -132,60 +140,54 @@ $color-text-shadow:null
 
 /* public ------------------------------------------------------------------------------------------------------------*/
 
-@mixin ui-social($class:null,$component:css-social,
+@mixin ui-social($primary-tag:null,$tags:null,$template-tag:null,$component-class:null,$class:null,
+$component:css-social,
 $margin:0,
 $padding:0,
-$font-size:1.5em,
-$li-padding:0 .7em 0 .7em,
-$li-margin:0 .5em 0 .5em,
+$font-size:32px,
+$item-padding:0 .7em 0 .7em,
+$item-margin:0 .5em 0 .5em,
 $facebook-color:#3b5998,
 $pinterest-color:#ca3924,
 $twitter-color:#5ec5fb,
 $flickr-color:#f1369d,
 $google-color:#d23e2b,
 $github-color:#020202,
-$color-text-shadow:false
+$color-text-shadow:false,
+$color-item-margin:0 .15em 0 0,
+$color-font-size:33px
 
 ) {
 
-  .ui-social,ui-social {
-    @if $class != null{
-      &.#{$class} {
-        @include _ui-social($component,
-        $margin,
-        $padding,
-        $font-size,
-        $li-padding,
-        $li-margin,
-        $facebook-color,
-        $pinterest-color,
-        $twitter-color,
-        $flickr-color,
-        $google-color,
-        $github-color,
-        $color-text-shadow);
-       @content;
-      }
-    } @else {
-      @include _ui-social($component,
-      $margin,
-      $padding,
-      $font-size,
-      $li-padding,
-      $li-margin,
-      $facebook-color,
-      $pinterest-color,
-      $twitter-color,
-      $flickr-color,
-      $google-color,
-      $github-color,
-      $color-text-shadow);
-      @content;
-    }
-
+  $_component-class:'.ui-social';
+  $_primary-tag:ui-social;
+  @if $component-custom-tags==true and $component-class ==null{
+    $_component-class:null;
   }
+  @if $primary-tag !=null{
+    $_primary-tag:$primary-tag;
+  }
+  @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
+    @include _ui-social($component,
+            $margin,
+            $padding,
+            $font-size,
+            $item-padding,
+            $item-margin,
+            $facebook-color,
+            $pinterest-color,
+            $twitter-color,
+            $flickr-color,
+            $google-color,
+            $github-color,
+            $color-text-shadow,
+            $color-item-margin,
+            $color-font-size
+    );
+
+    @content;
 
-
+  }
 
 }
 

data/stylesheets/ellipsis/ui/_stepprogress.scss

@@ -0,0 +1,219 @@
+
+
+@mixin _ui-step-progress($component:null,$icon-component:null,$complete-component:null,$complete-icon-component:null,
+$icon-size:null,
+$item-width:null,
+$icon-margin-top:null,
+$label-top:null,
+$label-left:null,
+$label-font-family:null,
+$label-font-weight:null,
+$complete-icon:null,
+$complete-icon-top:null,
+$complete-icon-left:null,
+$current-font-weight:null,
+$vertical-item-height:null,
+$vertical-label-margin:null
+){
+
+  $item-selector:'.step-item';
+  $icon-selector:'.progress-icon';
+  $label-selector:'.progress-label';
+  @if $component-custom-tags==true{
+    $item-selector:step-item;
+    $icon-selector:progress-icon;
+    $label-selector:progress-label;
+  }
+
+  $label-margin-left:$item-width + 1;
+  $icon-margin-left:$item-width - 1;
+  $_icon-margin-top:($icon-size/2) + 1;
+  @if $icon-margin-top != null{
+    $_icon-margin-top:$icon-margin-top;
+  }
+
+  @include flexbox($justification:flex-start,$alignment:center);
+
+  #{$item-selector}{
+    @include flexbox-column($justification:flex-start,$alignment:center);
+    width:$item-width;
+    @extend %#{$component}-border !optional;
+    border-bottom:0 !important;
+    border-left:0 !important;
+    border-right:0 !important;
+    &:last-child{
+      border:0 !important;
+      &.complete{
+        border:0 !important;
+      }
+    }
+    #{$icon-selector}{
+      display:block;
+      position:relative;
+      height:$icon-size;
+      width:$icon-size;
+      border-radius:50%;
+      @extend %#{$icon-component}-background !optional;
+      @extend %#{$icon-component}-border !optional;
+      margin-top:-#{$_icon-margin-top};
+      margin-left:-#{$icon-margin-left};
+      &:after{
+        position:absolute;
+        top:$label-top;
+        left:$label-left;
+        content:'1';
+        font-size:14px;
+        @extend %#{$icon-component}-icon !optional;
+        font-family: $label-font-family;
+        font-weight:$label-font-weight;
+      }
+    }
+
+    @for $i from 2 through 10{
+      &:nth-child(#{$i}){
+        #{$icon-selector}{
+          &:after{
+            content:'#{$i}';
+          }
+        }
+      }
+    }
+    #{$label-selector}{
+      @include flexbox-column($justification:center,$alignment:center);
+      margin:.5em 0 0 -#{$label-margin-left};
+      font-size:14px;
+      line-height:1;
+      color:$global-font-color;
+      @extend %#{$icon-component}-font !optional;
+    }
+    &.complete{
+      @extend %#{$complete-component}-border !optional;
+      border-bottom:0 !important;
+      border-left:0 !important;
+      border-right:0 !important;
+      #{$icon-selector}{
+        @extend %#{$complete-icon-component}-background !optional;
+        @extend %#{$complete-icon-component}-border !optional;
+        &:after{
+          font-family:$global-icon-font-family;
+          content:$complete-icon;
+          @extend %#{$complete-icon-component}-icon !optional;
+          font-size:16px;
+          left:$complete-icon-left;
+          top:$complete-icon-top;
+        }
+      }
+    }
+    &.current{
+      @extend %#{$component}-border !optional;
+      border-bottom:0 !important;
+      border-left:0 !important;
+      border-right:0 !important;
+      #{$label-selector}{
+        font-weight:$current-font-weight;
+      }
+    }
+  }
+
+ //vertical step progress
+  &.vertical{
+    @include flexbox-column($justification:flex-start,$alignment:flex-start);
+    $_vertical-icon-margin-left:($icon-size/2) + 1;
+    $_vertical-icon-margin-left-last-child:$_vertical-icon-margin-left - 2;
+
+    #{$item-selector}{
+      @include flexbox($justification:flex-start,$alignment:flex-start);
+      @include flex-direction(row);
+      width:auto;
+      height:$vertical-item-height;
+      @extend %#{$component}-border !optional;
+      border-bottom:0 !important;
+      border-top:0 !important;
+      border-right:0 !important;
+      &:last-child{
+        border:0 !important;
+        &.complete{
+          border:0 !important;
+        }
+      }
+      #{$icon-selector}{
+        display:block;
+        position:relative;
+        height:$icon-size;
+        width:$icon-size;
+        border-radius:50%;
+        @extend %#{$icon-component}-background !optional;
+        @extend %#{$icon-component}-border !optional;
+        margin:-2px 0 0 -#{$_vertical-icon-margin-left} !important;
+
+      }
+      #{$label-selector}{
+        @include flexbox-column($justification:flex-start,$alignment:flex-start);
+        margin:$vertical-label-margin;
+      }
+
+      &.complete{
+        @extend %#{$complete-component}-border !optional;
+        border-bottom:0 !important;
+        border-top:0 !important;
+        border-right:0 !important;
+        #{$icon-selector}{
+          @extend %#{$complete-icon-component}-background !optional;
+          @extend %#{$complete-icon-component}-border !optional;
+        }
+      }
+      &.current{
+        @extend %#{$component}-border !optional;
+        border-bottom:0 !important;
+        border-top:0 !important;
+        border-right:0 !important;
+        #{$label-selector}{
+          font-weight:$current-font-weight;
+        }
+      }
+      &:last-child{
+        #{$icon-selector}{
+          margin:-2px 0 0 -#{$_vertical-icon-margin-left-last-child} !important;
+        }
+      }
+    }
+  }
+
+}
+
+@mixin ui-step-progress($primary-tag:null,$tags:null,$template-tag:null,$component-class:null,$class:null,
+$component:null,$icon-component:null,$complete-component:null,$complete-icon-component:null,
+  $icon-size:24px,
+  $item-width:9em,
+  $icon-margin-top:null,
+  $label-top:-3px,
+  $label-left:7px,
+  $label-font-family:"Helvetica Neue",
+  $label-font-weight:500,
+  $complete-icon:'\e035',
+  $complete-icon-top:-4px,
+  $complete-icon-left:4px,
+  $current-font-weight:bold,
+  $vertical-item-height:5em,
+  $vertical-label-margin:.3em 0 0 1em
+
+){
+
+  $_component-class:'.ui-step-progress';
+  $_primary-tag:ui-step-progress;
+  @if $component-custom-tags==true and $component-class ==null{
+    $_component-class:null;
+  }
+  @if $primary-tag !=null{
+    $_primary-tag:$primary-tag;
+  }
+
+  @include element-tag($primary-tag:$_primary-tag,$tags:$tags,$template-tag:$template-tag,$component-class:$_component-class,$class:$class){
+    @include _ui-step-progress($component,$icon-component,$complete-component,$complete-icon-component,
+            $icon-size,$item-width,$icon-margin-top,$label-top,$label-left,$label-font-family,$label-font-weight,
+            $complete-icon,$complete-icon-top,$complete-icon-left,$current-font-weight,$vertical-item-height,$vertical-label-margin);
+
+    @content;
+  }
+
+}