ellipsis-compass 1.0.1

data/stylesheets/helpers/_grid.scss

@@ -0,0 +1,39 @@
+/* Grid ---------------------------------------------------------------------------------------------------------------*/
+
+@mixin helpers-grid() {
+
+  //contain to grid
+  .ui-contain-to-grid {
+    max-width: $grid-width - $grid-column-gutter;
+    margin: 0 auto;
+  }
+
+  //grid gutter bleed
+
+  .ui-gutter-bleed {
+
+  }
+
+  %ui-gutter-bleed {
+    margin-right: - $grid-column-gutter/2 !important;
+    margin-left: - $grid-column-gutter/2 !important;
+  }
+  %ui-gutter-bleed-right {
+    margin-right: - $grid-column-gutter/2 !important;
+    margin-left: 0 !important;
+  }
+  %ui-gutter-bleed-left {
+    margin-left: - $grid-column-gutter/2 !important;
+    margin-right: 0 !important;
+  }
+  @media #{$breakpoint-touch}{
+    .ui-gutter-bleed {
+      margin-right: - $grid-column-gutter/2 !important;
+      margin-left: - $grid-column-gutter/2 !important;
+    }
+    .ui-gutter-bleed-image{
+      margin:0 -100px 0 -100px;
+    }
+
+  }
+}

data/stylesheets/helpers/_hardware-acceleration.scss

@@ -0,0 +1,22 @@
+/* Hardware Accleration -----------------------------------------------------------------------------------------------*/
+
+@mixin helpers-hardware-acceleration() {
+
+  %ui-hardware-accelerate {
+    -webkit-transform: translate3d(0, 0, 0);
+
+  }
+
+  .ui-hardware-accelerated {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+
+  .ui-backface-visibility {
+    -webkit-backface-visibility: hidden;
+  }
+
+  .ui-perspective {
+    -webkit-perspective: 1000;
+  }
+
+}

data/stylesheets/helpers/_mixins.scss

@@ -0,0 +1,207 @@
+@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;
+}
+
+@mixin gutter-bleed-padding(){
+  margin-right: - $grid-column-gutter/2 !important;
+  margin-left: - $grid-column-gutter/2 !important;
+  padding-right: $grid-column-gutter/2 !important;
+  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 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;
+  }
+}
+
+/* icon shortcut */
+@mixin span-icon(){
+  span[class*='icon-'] {
+    @content;
+  }
+}
+
+/* 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;
+}
+
+
+

data/stylesheets/helpers/_touch.scss

@@ -0,0 +1,107 @@
+/* Touch --------------------------------------------------------------------------------------------------------------*/
+
+@mixin helpers-touch() {
+
+  @media #{$breakpoint-touch}{
+    //bleeds content elements across the grid gutter; i.e., 100% screen width on touch devices
+
+    %touch-gutter-bleed {
+      margin-right: - $grid-column-gutter/2 !important;
+      margin-left: - $grid-column-gutter/2 !important;
+
+    }
+    //-mobile boilerplate-----------------------------------------------------------------
+
+    /* Prevent callout */
+
+    .nocallout {
+      -webkit-touch-callout: none;
+    }
+
+    .pressed {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+
+    /* A hack for HTML5 contenteditable attribute on mobile */
+
+    textarea[contenteditable] {
+      -webkit-appearance: none;
+    }
+
+    /* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
+       they have been set as display: none */
+
+    .gifhidden {
+      position: absolute;
+      bottom: -100%;
+    }
+
+    /*
+     * Image replacement
+     */
+
+    .ir {
+      background-color: transparent;
+      background-repeat: no-repeat;
+      border: 0;
+      direction: ltr;
+      display: block;
+      overflow: hidden;
+      text-align: left;
+      text-indent: -999em;
+    }
+
+    .ir br {
+      display: none;
+    }
+
+    /*
+     * Hide from both screenreaders and browsers: h5bp.com/u
+     */
+
+    .hide {
+      display: none !important;
+      visibility: hidden;
+    }
+
+    /*
+     * Hide only visually, but have it available for screenreaders: h5bp.com/v
+     */
+
+    .visuallyhidden {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+    }
+
+    /*
+     * Extends the .visuallyhidden class to allow the element to be focusable
+     * when navigated to via the keyboard: h5bp.com/p
+     */
+
+    .visuallyhidden.focusable:active,
+    .visuallyhidden.focusable:focus {
+      clip: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      position: static;
+      width: auto;
+    }
+
+    /*
+     * Hide visually and from screenreaders, but maintain layout
+     */
+
+    .invisible {
+      visibility: hidden;
+    }
+
+  }
+
+}

data/stylesheets/helpers/_visibility.scss

@@ -0,0 +1,138 @@
+@mixin helpers-visibility(){
+  .hide-for-desktop,
+  .hide-for-large,
+  .show-for-phone,
+  .show-for-small,
+  .hide-for-tablet-up,
+  .hide-for-medium-up
+  .show-for-tablet-down,
+  .show-for-medium-down,
+  .show-for-tablet,
+  .show-for-medium,
+  .show-for-touch {
+    display: none !important
+  }
+
+  .show-for-tablet,
+  .show-for-medium,
+  .show-for-tablet-up,
+  .show-for-medium-up
+  .show-for-desktop,
+  .show-for-large{
+    display: inherit !important;
+  }
+
+  .hide-for-touch
+  .hide-for-phone,
+  .hide-for-small,
+  .hide-for-tablet-down,
+  .hide-for-medium-down{
+    display: inherit !important;
+  }
+
+
+  @media #{$breakpoint-phone}{
+    .show-for-phone,
+    .show-for-small,
+    .show-for-tablet-down,
+    .show-for-medium-down{
+      display: inherit !important;
+    }
+
+    .hide-for-tablet-down,
+    .hide-for-medium-down,
+    .show-for-tablet,
+    .show-for-medium,
+    .show-for-tablet-up,
+    .show-for-medium-up,
+    .show-for-desktop,
+    .show-for-large{
+      display: none !important;
+    }
+
+    .hide-for-tablet,
+    .hide-for-medium,
+    .hide-for-tablet-up,
+    .hide-for-medium-up,
+    .hide-for-desktop,
+    .hide-for-large{
+      display: inherit !important;
+    }
+
+    .hide-for-phone,
+    .hide-for-small{
+      display: none !important;
+    }
+
+    .show-for-touch{
+      display: inherit !important;
+    }
+    .hide-for-touch{
+      display: none !important;
+    }
+  }
+
+  @media #{$breakpoint-tablet}{
+    .show-for-phone,
+    .show-for-small,
+    .show-for-tablet-down,
+    .show-for-medium-down{
+      display:none !important;
+    }
+
+    .hide-for-phone,
+    .hide-for-small,
+    .show-for-tablet,
+    .show-for-medium,
+    .show-for-tablet-up,
+    .show-for-medium-up{
+      display: inherit !important;
+    }
+
+    .show-for-desktop,
+    .show-for-large{
+      display: none !important;
+    }
+
+    .hide-for-tablet,
+    .hide-for-medium,
+    .hide-for-tablet-up,
+    .hide-for-medium-up,
+    .hide-for-tablet-down,
+    .hide-for-medium-down,{
+      display:none !important;
+    }
+    .hide-for-desktop,
+    .hide-for-large{
+      display: inherit !important;
+    }
+    .show-for-touch{
+      display: inherit !important;
+    }
+    .hide-for-touch{
+      display: none !important;
+    }
+  }
+
+  @media #{$breakpoint-portrait}{
+    .show-for-portrait,
+    .hide-for-landscape{
+      display:inherit;
+    }
+    .show-for-landscape,
+    .hide-for-portrait{
+      display:none;
+    }
+  }
+  @media #{$breakpoint-landscape}{
+    .show-for-portrait,
+    .hide-for-landscape{
+      display:none;
+    }
+    .show-for-landscape,
+    .hide-for-portrait{
+      display:inherit;
+    }
+  }
+
+}