ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/ui/_toggle.scss

@@ -5,8 +5,9 @@
 $height: 59px,
 $width: 60px,
 $border-right:1px solid,
-$icon-size:16px,
-$icon-left:10px,
+$icon:$global-icon-toggle,
+$icon-size:24px,
+$icon-left:16px,
 $icon-top:16px
 
 ){
@@ -23,6 +24,7 @@ $icon-top:16px
             $height,
             $width,
             $border-right,
+            $icon,
             $icon-size,
             $icon-left,
             $icon-top
@@ -34,6 +36,7 @@ $icon-top:16px
           $height,
           $width,
           $border-right,
+          $icon,
           $icon-size,
           $icon-left,
           $icon-top

data/stylesheets/ellipsis/ui/_tooltip.scss

@@ -3,13 +3,14 @@
 /* Private -----------------------------------------------------------------------------------------------------------*/
 
 @mixin _ui-tooltip($component: null,
+$position:null,
 $border-radius: null,
 $padding:null,
 $font-size:null,
 $z-index:null,
 $tip-color:null
 ) {
-  position:absolute;
+  position:$position;
   font-size:$font-size;
   padding:$padding;
   border-radius:$border-radius;
@@ -31,6 +32,7 @@ $tip-color:null
 /* Public ------------------------------------------------------------------------------------------------------------*/
 
 @mixin ui-tooltip($class: null, $component:primary,
+$position:absolute,
 $border-radius: $global-radius,
 $padding:.2em .5em .2em .5em,
 $font-size:.8em,
@@ -41,11 +43,11 @@ $tip-color:$primary-color
   .data-tooltip {
     @if $class != null{
       &.#{$class} {
-        @include _ui-tooltip($component, $border-radius, $padding,$font-size,$z-index,$tip-color);
+        @include _ui-tooltip($component, $position,$border-radius, $padding,$font-size,$z-index,$tip-color);
         @content;
       }
     } @else {
-      @include _ui-tooltip($component,$border-radius,$padding,$font-size,$z-index,$tip-color);
+      @include _ui-tooltip($component,$position,$border-radius,$padding,$font-size,$z-index,$tip-color);
       @content;
     }
 

data/stylesheets/ellipsis/ui/_topbar.scss

@@ -20,6 +20,11 @@ $menu-justification:null) {
 
   $_ui-topbar-contained-to-grid: $grid-width - $grid-column-gutter;
 
+  $brand-selector:'.brand';
+  @if $component-custom-tags==true{
+    $brand-selector:ui-brand;
+  }
+
   position: $position;
   width: 100%;
   padding: $padding;
@@ -38,7 +43,7 @@ $menu-justification:null) {
   @if $position==relative{
     max-height:$height;
   }
-  .brand,ui-brand {
+  #{$brand-selector} {
     position:absolute;
     left:0;
     top:0;
@@ -49,7 +54,6 @@ $menu-justification:null) {
     a{
       font-size:1em;
       @extend %#{$component}-font !optional;
-      //display:block;
       @include flexbox($justification: $brand-justification, $alignment: $brand-alignment);
       &:hover{
         @extend %#{$component}-font-hover !optional;
@@ -140,24 +144,55 @@ $menu-justification:center,
 $touch-position: fixed,
 $touch-height: 60px,
 $touch-z-index: $global-z-index + 999,
-$touch-brand-font-size:1.75em
+$touch-brand-font-size:1.75em,
+$touch-icon-font-size:22px,
+$touch-icon-margin:.8em
 ) {
 
+  $topbar-selector:'.ui-topbar';
+  @if $component-custom-tags==true{
+    $topbar-selector:ui-topbar;
+  }
 
-
-  .ui-topbar,ui-topbar {
+  #{$topbar-selector} {
     @if $class != null {
       &.#{$class} {
         @include desktop-content() {
-          @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
-                  $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$right-padding,$menu-justification);
+          @include _ui-topbar($component,
+                  $position,
+                  $padding,
+                  $height,
+                  $z-index,
+                  $brand-font-size,
+                  $line-height,
+                  $justification,
+                  $alignment,
+                  $brand-justification,
+                  $brand-alignment,
+                  $brand-min-width,
+                  $brand-padding,
+                  $right-padding,
+                  $menu-justification);
         }
         @content
       }
     } @else {
       @include desktop-content() {
-        @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
-                $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$right-padding,$menu-justification);
+        @include _ui-topbar($component,
+                $position,
+                $padding,
+                $height,
+                $z-index,
+                $brand-font-size,
+                $line-height,
+                $justification,
+                $alignment,
+                $brand-justification,
+                $brand-alignment,
+                $brand-min-width,
+                $brand-padding,
+                $right-padding,
+                $menu-justification);
       }
       @content;
     }
@@ -165,6 +200,9 @@ $touch-brand-font-size:1.75em
 
   /* if fixed position, margin of next element =topbar height + 1em */
   @if $position != relative {
+    [data-role=navigation] + *{
+      padding-top:$touch-height;
+    }
     @if $class != null {
       .ui-topbar.#{$class} + *,ui-topbar.#{$class} + * {
         margin-top: $height;
@@ -176,25 +214,61 @@ $touch-brand-font-size:1.75em
     }
   }
 
+  @include desktop-content(){
+    #{$topbar-selector}{
+      .touch-ui-brand,touch-ui-brand,.touch-right,touch-icons{
+        display:none;
+      }
+    }
+  }
+
   @media #{$breakpoint-touch}{
-    .ui-topbar,ui-topbar{
+    #{$topbar-selector}{
       @if $class != null {
         &.#{$class} {
-          @include _touch-ui-topbar($touch-component, $touch-position, $touch-height, $touch-z-index,$touch-brand-font-size);
+          @include _touch-ui-topbar($touch-component,
+                  $touch-position,
+                  $touch-height,
+                  $touch-z-index,
+                  $touch-brand-font-size,
+                  $touch-icon-font-size,
+                  $touch-icon-margin
+          );
         }
       } @else {
-        @include _touch-ui-topbar($touch-component, $touch-position, $touch-height, $touch-z-index,$touch-brand-font-size);
+        @include _touch-ui-topbar($touch-component,
+                $touch-position,
+                $touch-height,
+                $touch-z-index,
+                $touch-brand-font-size,
+                $touch-icon-font-size,
+                $touch-icon-margin
+        );
       }
       /* for touch, if fixed position, padding of next element =topbar height */
       @if $touch-position != relative {
         @if $class != null {
-          .ui-topbar.#{$class} + *, ui-topbar.#{$class} + *{
-            padding-top: $touch-height;
+          @if $component-custom-tags==true{
+            ui-topbar.#{$class} + *{
+              padding-top: $touch-height;
+            }
+          }@else{
+            .ui-topbar.#{$class} + *{
+              padding-top: $touch-height;
+            }
           }
+
         } @else {
-          .ui-topbar + *, ui-topbar + * {
-            padding-top: $touch-height;
+          @if $component-custom-tags==true{
+            ui-topbar + * {
+              padding-top: $touch-height;
+            }
+          }@else{
+            .ui-topbar + *{
+              padding-top: $touch-height;
+            }
           }
+
         }
       }
     }

data/stylesheets/ellipsis/ui/_window.scss

@@ -8,7 +8,10 @@ $border-radius:null,
 $z-index:null,
 $width:null,
 $height:null,
-$top:null
+$top:null,
+$header-height:null,
+$section-padding:null,
+$footer-padding:null
 
 ) {
 
@@ -38,7 +41,7 @@ $top:null
   }
   header {
     width: 100%;
-    height: 35px;
+    height: $header-height;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
     @extend %#{$header-component}-background !optional;
@@ -84,10 +87,9 @@ $top:null
   section {
     position: relative;
     overflow-y: auto;
-    padding: 15px;
+    padding: $section-padding;
     width: 100%;
     height: 90%;
-    padding-bottom: 80px;
     @extend %#{$component}-background !optional;
     @extend %#{$component}-font !optional;
     h2,h3,h4,h5{
@@ -99,7 +101,7 @@ $top:null
 
   }
   footer {
-    padding: 14px 15px 15px;
+    padding:$footer-padding;
     margin-bottom: 0;
     text-align: right;
     @extend %#{$footer-component}-background !optional;
@@ -134,7 +136,10 @@ $border-radius:$global-radius,
 $z-index:$global-z-index + 99999999,
 $width:560px ,
 $height:520px,
-$top:100px
+$top:100px,
+$header-height:35px,
+$section-padding:15px 15px 80px 15px,
+$footer-padding:14px 15px 15px
 
 ) {
 
@@ -142,14 +147,14 @@ $top:100px
     @if $class != null{
       &.#{$class} {
         @include _ui-window($component,$header-component,$close-component,$footer-component,
-        $border-radius,$z-index,$width,$height,$top);
+        $border-radius,$z-index,$width,$height,$top,$header-height,$section-padding,$footer-padding);
 
         @content;
 
       }
     } @else {
       @include _ui-window($component,$header-component,$close-component,$footer-component,
-        $border-radius,$z-index,$width,$height,$top);
+        $border-radius,$z-index,$width,$height,$top,$header-height,$section-padding,$footer-padding);
 
       @content;
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ellipsis-compass
 version: !ruby/object:Gem::Version
-  version: 1.0.6
+  version: 1.0.7
 platform: ruby
 authors:
 - S. Francis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-08-24 00:00:00.000000000 Z
+date: 2014-09-28 00:00:00.000000000 Z
 dependencies: []
 description: Ellipsis is responsive HTML5 web component framework for modern browsers
 email: sfrancis@misinteractive.com
@@ -27,6 +27,7 @@ files:
 - stylesheets/ellipsis/base/_global.scss
 - stylesheets/ellipsis/base/_normalize.scss
 - stylesheets/ellipsis/component/_component.scss
+- stylesheets/ellipsis/component/_element.scss
 - stylesheets/ellipsis/component/_ui.scss
 - stylesheets/ellipsis/flexbox/_flexbox.scss
 - stylesheets/ellipsis/font/_icons.scss
@@ -57,7 +58,7 @@ files:
 - stylesheets/ellipsis/ui/_breadcrumb.scss
 - stylesheets/ellipsis/ui/_button.scss
 - stylesheets/ellipsis/ui/_carousel.scss
-- stylesheets/ellipsis/ui/_collapsible.scss
+- stylesheets/ellipsis/ui/_collapse.scss
 - stylesheets/ellipsis/ui/_container.scss
 - stylesheets/ellipsis/ui/_datepicker.scss
 - stylesheets/ellipsis/ui/_drawer.scss
@@ -76,9 +77,11 @@ files:
 - stylesheets/ellipsis/ui/_parallax.scss
 - stylesheets/ellipsis/ui/_popover.scss
 - stylesheets/ellipsis/ui/_rating.scss
+- stylesheets/ellipsis/ui/_screentab.scss
 - stylesheets/ellipsis/ui/_sidebar.scss
 - stylesheets/ellipsis/ui/_slidingpanel.scss
 - stylesheets/ellipsis/ui/_social.scss
+- stylesheets/ellipsis/ui/_stepprogress.scss
 - stylesheets/ellipsis/ui/_sticky.scss
 - stylesheets/ellipsis/ui/_table.scss
 - stylesheets/ellipsis/ui/_tabs.scss

data/stylesheets/ellipsis/ui/_collapsible.scss

@@ -1,61 +0,0 @@
-/* ui-collapsible */
-
-/* private -----------------------------------------------------------------------------------------------------------*/
-
-@mixin _ui-collapsible($header-component:null,$component:null,
-$border-radius:null
-){
-  &>.collapse,&>ui-collapse {
-    list-style: none;
-    margin: 0;
-    padding: 0 0 1em 0;
-    height: 100%;
-
-    & >.header {
-      cursor: pointer;
-      padding: 1em;
-      margin: 0;
-      @extend %#{$header-component}-background;
-      @extend %#{$header-component}-border;
-      @extend %#{$header-component}-box-shadow;
-      @extend %#{$header-component}-font;
-      border-radius:$border-radius;
-      h1, h2, h3, h4, h5 {
-        @extend %#{$header-component}-font;
-      }
-    }
-
-    .body {
-      margin-top: -.625em;
-      padding: 0 1em 0 1em;
-      @extend %#{$component}-background;
-      @extend %#{$component}-border;
-      @extend %#{$component}-box-shadow;
-      @extend %#{$component}-font;
-      border-top:0;
-      border-bottom-right-radius: $border-radius;
-      border-bottom-left-radius: $border-radius;
-    }
-
-    &> .header + .body{
-      height: 0;
-      display:block;
-      overflow: hidden;
-    }
-    &.out > .header + .body{
-      height:auto;
-      overflow: hidden;
-    }
-    &.out{
-      .header {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-      .body {
-        padding: 1em 1em 0 1em;
-        border-bottom-width:1px;
-      }
-    }
-  }
-}
-