ellipsis-compass 1.0.1

data/stylesheets/grid/_grid.scss

@@ -0,0 +1,312 @@
+/* grid
+
+ this is more or less a port of the Foundation grid
+
+ media-queries are not hard-coded,instead obeying the breakpoint-settings
+ default,tablet,desktop replace small, medium,large, although the latter are left in for compatibility reasons
+ custom tags grid-row,grid-column can be used instead of .row, .columns as class attributes of the div tag
+ no flag setting for semantic inclusion...must be called via a mixin
+ flag setting to prevent any touch horizontal screen scroll for content width greater than device width
+ */
+
+/* public -----------------------------------------------------------------------------------------------------------*/
+
+/* grid row */
+@mixin grid-row($type: null,
+$row-width: $grid-width,
+$column-gutter: $grid-column-gutter) {
+
+  @if $type == nest {
+    margin-left: -($column-gutter/2);
+    margin-right: -($column-gutter/2);
+    max-width: none;
+    width: auto;
+  } @else if $type == collapse {
+    margin-left: 0;
+    margin-right: 0;
+    max-width: $row-width;
+    width: 100%;
+  } @else if $type == nest-collapse {
+    margin-left: 0;
+    margin-right: 0;
+    max-width: none;
+    width: auto;
+  } @else {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
+    width: 100%;
+  }
+
+  @include clearfix();
+}
+
+/* grid column */
+@mixin grid-column($columns: false,
+$last-column: false,
+$center: false,
+$offset: false,
+$push: false,
+$pull: false,
+$collapse: false,
+$float: true,
+$column-gutter: $grid-column-gutter,
+$total-columns: $grid-columns) {
+
+  position: relative;
+
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  } @else if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
+  }
+
+  @if $columns {
+    width: grid-calc($columns, $total-columns);
+    @if $last-column {
+      float: right;
+    }
+  }
+
+  @if $offset {
+    margin-left: grid-calc($offset, $total-columns);
+  }
+
+  @if $push {
+    left: grid-calc($push, $total-columns);
+    right: auto;
+  }
+  @if $pull {
+    right: grid-calc($pull, $total-columns);
+    left: auto;
+  }
+
+  @if $center {
+    margin-left: auto;
+    margin-right: auto;
+    float: none !important;
+  }
+  @if $float {
+    @if $float == left or $float == true {
+      float: left;
+    } @else if $float == right {
+      float: right;
+    } @else {
+      float: none;
+    }
+  }
+
+}
+
+
+@mixin grid($row-width: null,
+$column-gutter: null,
+$total-columns: null,
+$touch-horizontal-constrain: true) {
+
+  $grid-width: 1200px !default;
+  $grid-column-gutter: 30px !default;
+  $grid-width: em-calc($grid-width);
+  $grid-column-gutter: em-calc($grid-column-gutter);
+  $grid-columns: 12 !default;
+
+  @if $row-width !=null{
+    $grid-row-width: em-calc($row-width);
+  }
+  @if $column-gutter !=null{
+    $grid-column-gutter: em-calc($column-gutter);
+  }
+  @if $total-columns !=null{
+    $grid-columns: $total-columns;
+  }
+  grid-row,grid-columns{
+    display:block;
+  }
+  .row,grid-row {
+    @include grid-row($row-width: $grid-width, $column-gutter: $grid-column-gutter);
+
+    &.collapse {
+      .column,
+      .columns,
+      grid-columns{
+        @include grid-column($collapse: true, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    .row,grid-row {
+      @include grid-row($type: nest, $row-width: $grid-width, $column-gutter: $grid-column-gutter);
+      &.collapse {
+        @include grid-row($type: nest-collapse, $row-width: $grid-width, $column-gutter: $grid-column-gutter);
+      }
+    }
+  }
+
+  .column,
+  .columns,grid-columns {
+    @include grid-column($columns: $total-columns, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+  }
+
+  /* default screen */
+  @media only screen {
+
+    @for $i from 1 through $grid-columns {
+      .default-#{$i},
+      .small-#{$i} {
+        @include grid-column($columns: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    @for $i from 0 through $grid-columns - 2 {
+      .default-offset-#{$i},
+      .small-offset-#{$i} {
+        @include grid-column($offset: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    [class*="column"] + [class*="column"]:last-child {
+      float: right;
+    }
+    [class*="column"] + [class*="column"].end {
+      float: left;
+    }
+    grid-columns{
+      &:last-child{
+        float: right;
+      }
+    }
+    grid-columns{
+      &.end{
+        float:left;
+      }
+    }
+
+    .column.default-centered,
+    .columns.default-centered,
+    .column.small-centered,
+    .columns.small-centered,
+    grid-columns.default-centered,
+    grid-columns.small-centered{
+      @include grid-column($center: true, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+    }
+  }
+
+  /* tablet(or medium) */
+  @media #{$breakpoint-grid-tablet} {
+
+    @for $i from 1 through $grid-columns {
+      .tablet-#{$i},
+      .medium-#{$i} {
+        @include grid-column($columns: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    @for $i from 0 through $grid-columns - 1 {
+      .tablet-offset-#{$i},
+      .medium-offset-#{$i} {
+        @include grid-column($offset: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    @for $i from 1 through $grid-columns - 1 {
+      .tablet-push-#{$i},
+      .medium-push-#{$i} {
+        @include grid-column($push: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+      .tablet-pull-#{$i},
+      .medium-pull-#{$i} {
+        @include grid-column($pull: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    .column.tablet-centered,
+    .columns.tablet-centered,
+    .column.medium-centered,
+    .columns.medium-centered,
+    grid-columns.tablet-centered,
+    grid-columns.medium-centered{
+      @include grid-column($center: true, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+    }
+
+    .column.tablet-uncentered,
+    .columns.tablet-uncentered,
+    .column.medium-uncentered,
+    .columns.medium-uncentered,
+    grid-columns.tablet-uncentered,
+    grid-columns.medium-uncentered{
+      margin-left: 0;
+      margin-right: 0;
+      float: left !important;
+    }
+
+  }
+
+  /* desktop(or large) */
+  @media #{$breakpoint-grid-desktop} {
+
+    @for $i from 1 through $grid-columns {
+      .desktop-#{$i},
+      .large-#{$i} {
+        @include grid-column($columns: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    @for $i from 0 through $grid-columns - 1 {
+      .desktop-offset-#{$i},
+      .large-offset-#{$i} {
+        @include grid-column($offset: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    @for $i from 1 through $grid-columns - 1 {
+      .desktop-push-#{$i},
+      .large-push-#{$i} {
+        @include grid-column($push: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+      .desktop-pull-#{$i},
+      .large-pull-#{$i} {
+        @include grid-column($pull: $i, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+      }
+    }
+
+    .column.desktop-centered,
+    .columns.desktop-centered,
+    .column.large-centered,
+    .columns.large-centered,
+    grid-columns.desktop-centered,
+    grid-columns.large-centered{
+      @include grid-column($center: true, $collapse: null, $float: false, $column-gutter: $grid-column-gutter, $total-columns: $grid-columns);
+    }
+
+    .column.desktop-uncentered,
+    .columns.desktop-uncentered,
+    .column.large-uncentered,
+    .columns.large-uncentered,
+    grid-columns.desktop-uncentered,
+    grid-columns.large-uncentered{
+      margin-left: 0;
+      margin-right: 0;
+      float: left !important;
+    }
+
+  }
+
+  /* enforce no screen horizontal scrolling */
+  @if $touch-horizontal-constrain {
+    @media #{$breakpoint-touch}{
+      .row,grid-row {
+        overflow: hidden;
+        &.overflow {
+          /* re-enable on per row basis, if needed */
+          overflow: visible;
+        }
+      }
+    }
+  }
+
+  @content;
+}
+

data/stylesheets/helpers/_all.scss

@@ -0,0 +1,8 @@
+@import "component";
+@import "convenience";
+@import "grid";
+@import "hardware-acceleration";
+@import "touch";
+@import "functions";
+@import "mixins";
+@import "visibility";

data/stylesheets/helpers/_component.scss

@@ -0,0 +1,177 @@
+@mixin helpers-component() {
+  $helpers-component-box-shadow:rgba(0, 0, 0, .2) -1px -2px 20px 1px !default;
+  // box shadow
+  .ui-left-box-shadow {
+    box-shadow: $helpers-component-box-shadow;
+  }
+
+  ui-container,ui-drawer,touch-ui-drawer{
+    display:block;
+  }
+
+  //overlay
+  [data-role=overlay],ui-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: $global-z-index + 999999;
+    display:none;
+    &.show{
+      display:block;
+    }
+  }
+
+  //toggle-container
+  .ui-fixed-toggle-container {
+    z-index: $global-z-index + 9999;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    background:$global-background;
+    position: fixed;
+    overflow: hidden;
+    *{
+      &:focus{
+        @include disable-focus();
+      }
+    }
+  }
+
+  .ui-overflow-container {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  /* ul lists */
+  %ui-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: block;
+  }
+
+  // disabled component state
+  %ui-disabled-component {
+    text-shadow: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border: 0 !important;
+    cursor: default !important;
+    color:$component-font-color-disabled !important;
+    &>*{
+      color:$component-font-color-disabled !important;
+      &:after{
+        background:none !important;
+        color:$component-font-color-disabled !important;
+      }
+      &:before{
+        background:none !important;
+        color:$component-font-color-disabled !important;
+      }
+      &:hover{
+        background:transparent;
+        color:$component-font-color-disabled !important;
+      }
+    }
+    &:after{
+      background:none !important;
+      color:$component-font-color-disabled !important;
+    }
+    &:before{
+      background:none !important;
+      color:$component-font-color-disabled !important;
+    }
+    &:hover{
+      background:transparent;
+      color:$component-font-color-disabled !important;
+    }
+
+  }
+
+
+  // disabled touch component state
+  %touch-ui-disabled-component {
+    @media #{$breakpoint-touch}{
+      background: $component-background-disabled !important;
+      text-shadow: none !important;
+      outline: none !important;
+      box-shadow: none !important;
+      border: 0 !important;
+      cursor: default !important;
+      color:$component-font-color-disabled !important;
+      &:after{
+        background:none !important;
+        color:$component-font-color-disabled !important;
+      }
+      &:before{
+        background:none !important;
+        color:$component-font-color-disabled !important;
+      }
+    }
+  }
+
+ .ui-focus{
+   @include tab-focus();
+   &:focus{
+     @include tab-focus();
+   }
+ }
+
+  //caret,dropdown arrow
+  span{
+    &.caret{
+      font-size:14px;
+      padding:0 .1rem 0 1rem;
+      @extend .icon-ui-arrow-down;
+    }
+  }
+
+  .ui-static{
+    position:static;
+  }
+
+  .ui-hide{
+    visibility: hidden;
+  }
+
+  .ui-absolute{
+    position:absolute;
+  }
+
+  .ui-flex-start{
+    margin-right:auto;
+
+  }
+  .box-shadow-none{
+    &:not(:active) {
+      box-shadow: none;
+    }
+
+  }
+
+  span{
+    &.disabled{
+      color:#eee;
+    }
+    &.large-icon{
+      font-size:2em;
+    }
+    &.medium-icon{
+      font-size:1.5em;
+    }
+  }
+
+  .ui-inset-shadow{
+    opacity: 1;
+    text-shadow: rgba(0, 0, 0, 0.8) 0 -1px 0;
+  }
+  .ui-inset-shadow-important{
+    opacity: 1 !important;
+    text-shadow: rgba(0, 0, 0, 0.8) 0 -1px 0 !important;
+  }
+
+
+}
+