ellipsis-compass 1.0.1

data/stylesheets/ui/_sticky.scss

@@ -0,0 +1,9 @@
+
+
+@mixin ui-sticky($z-index:$global-z-index){
+  .ui-sticky{
+    position:fixed;
+    z-index:$z-index;
+  }
+
+}

data/stylesheets/ui/_table.scss

@@ -0,0 +1,423 @@
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-flex-table(
+$padding:null,
+$min-cell-width:null,
+$max-cell-width:null,
+$header-padding:null,
+$header-background:null,
+$header-border:null,
+$header-color:null,
+$header-font-size:null,
+$header-margin:null,
+$section-padding:null,
+$section-alt-background:null,
+$section-alignment:null,
+$footer-padding:null,
+$footer-margin:null
+
+){
+  @include flexbox();
+  @include flex-wrap(wrap);
+  width:100%;
+  header,section,[role=section],footer{
+    width:100%;
+    padding:$padding;
+    div{
+      min-width:$min-cell-width;
+      @if $max-cell-width != null{
+        max-width:$max-cell-width;
+      }
+    }
+  }
+  header{
+    @include flexbox($justification:space-between,$alignment:center);
+    padding:$header-padding;
+    background:$header-background;
+    border:$header-border;
+    color:$header-color;
+    margin:$header-margin;
+    font-size:$header-font-size;
+  }
+  section,[role=section]{
+    @include flexbox($justification:space-between,$alignment:$section-alignment);
+    @include flex-wrap(wrap);
+    margin:0;
+    padding:$section-padding;
+    &:nth-child(odd){
+      background:$section-alt-background;
+    }
+  }
+  footer{
+    @include flexbox($justification:space-between,$alignment:center);
+    margin:$footer-margin;
+    padding:$footer-padding;
+  }
+}
+
+
+@mixin ui-flex-table-cell-width($width:null){
+  header,section,footer{
+    div{
+      min-width:$width;
+      @content;
+    }
+  }
+}
+
+@mixin ui-flex-table-cell-flex($justification:center,$alignment:flex-start,$width:null){
+  header,section,footer{
+    div{
+      width:$width;
+      overflow:hidden;
+      white-space: nowrap;
+      text-overflow:ellipsis;
+      @include flexbox($justification:$justification,$alignment:$alignment);
+      @content;
+    }
+  }
+}
+
+/* Public -------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-flex-table($class:null,
+$padding:0 0 0 1em,
+$min-cell-width:15%,
+$max-cell-width:null,
+$header-padding:.5em 0 .5em .75em,
+$header-background:#f5f5f5,
+$header-border:1px solid #ddd,
+$header-color:$primary-color,
+$header-font-size:1.1em,
+$header-margin:0 0 1em 0,
+$section-padding:.75em 0 .75em .75em,
+$section-alt-background:#fafafa,
+$section-alignment:center,
+$footer-padding:.5em 0 .5em .75em,
+$footer-margin:1em 0 0 0
+
+){
+
+  .ui-flex-table,ui-flex-table {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-flex-table($padding,$min-cell-width,$max-cell-width,$header-padding,$header-background,$header-border,$header-color,
+        $header-font-size,$header-margin,$section-padding,$section-alt-background,$section-alignment,$footer-padding,$footer-margin);
+        @content;
+      }
+
+    } @else {
+      @include _ui-flex-table($padding,$min-cell-width,$max-cell-width,$header-padding,$header-background,$header-border,$header-color,
+        $header-font-size,$header-margin,$section-padding,$section-alt-background,$section-alignment,$footer-padding,$footer-margin);
+       @content;
+    }
+  }
+
+  /* correction for firefox, ie10 that don't support flex-wrap */
+  @supports not (flex-wrap: wrap) {
+    .ui-flex-table { display: block }
+  }
+}
+
+
+
+
+
+@mixin ui-table(
+$background: none,
+$border: #ccc,
+$border-radius:$global-radius,
+$color:#333,
+$nchild-background:#f9f9f9,
+$alternate-background:#f9f9f9,
+$foot-color:#222,
+$th-background:none,
+$td-line-height:1.4em,
+$striped-alternate-background:#f9f9f9,
+$striped-nchild-background:#f5f5f5,
+$striped-td-border-bottom:1px solid #f2f2f2,
+$striped-th-border-bottom:1px solid #ccc,
+$striped-th-background-color:#eee,
+$striped-th-color:#555,
+$striped-th-text-shadow:0 1px 0 #fff,
+$striped-foot-td-border-top:1px solid #fff,
+$striped-foot-td-background-color:#f1f1f1,
+$striped-border-radius:$global-radius,
+$striped-box-shadow:rgba(0, 0, 0, .15) 0px 1px 0px
+
+
+) {
+
+
+  table {
+    max-width: 100%;
+    background-color: $background;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+
+
+  .ui-table {
+    width: 100%;
+    margin-bottom: $td-line-height;
+    th,
+    td {
+      padding: 8px;
+      line-height:$td-line-height;
+      text-align: left;
+      vertical-align: top;
+      border-top: 1px solid $border;
+    }
+    th {
+      font-weight: bold;
+    }
+
+    thead th {
+      vertical-align: bottom;
+    }
+
+    caption + thead tr:first-child th,
+    caption + thead tr:first-child td,
+    colgroup + thead tr:first-child th,
+    colgroup + thead tr:first-child td,
+    thead:first-child tr:first-child th,
+    thead:first-child tr:first-child td {
+      border-top: 0;
+    }
+
+    tbody + tbody {
+      border-top: 2px solid $border;
+    }
+
+    .table {
+      background-color: $background;
+    }
+  }
+
+
+
+  .ui-table {
+    &.condensed {
+      th,
+      td {
+        padding: 4px 5px;
+      }
+    }
+  }
+
+
+  .ui-table {
+    &.bordered {
+      border: 1px solid $border;
+      border-collapse: separate;
+      *border-collapse: collapse;
+      border-left: 0;
+      border-radius: $border-radius;
+      th,
+      td {
+        border-left: 1px solid $border;
+      }
+
+      caption + thead tr:first-child th,
+      caption + tbody tr:first-child th,
+      caption + tbody tr:first-child td,
+      colgroup + thead tr:first-child th,
+      colgroup + tbody tr:first-child th,
+      colgroup + tbody tr:first-child td,
+      thead:first-child tr:first-child th,
+      tbody:first-child tr:first-child th,
+      tbody:first-child tr:first-child td {
+        border-top: 0;
+      }
+      thead:first-child tr:first-child > th:first-child,
+      tbody:first-child tr:first-child > td:first-child,
+      tbody:first-child tr:first-child > th:first-child {
+        border-top-left-radius: $border-radius;
+      }
+
+      thead:first-child tr:first-child > th:last-child,
+      tbody:first-child tr:first-child > td:last-child,
+      tbody:first-child tr:first-child > th:last-child {
+        border-top-right-radius: $border-radius;
+      }
+
+      thead:last-child tr:last-child > th:first-child,
+      tbody:last-child tr:last-child > td:first-child,
+      tbody:last-child tr:last-child > th:first-child,
+      tfoot:last-child tr:last-child > td:first-child,
+      tfoot:last-child tr:last-child > th:first-child {
+        border-bottom-left-radius: $border-radius;
+      }
+
+      thead:last-child tr:last-child > th:last-child,
+      tbody:last-child tr:last-child > td:last-child,
+      tbody:last-child tr:last-child > th:last-child,
+      tfoot:last-child tr:last-child > td:last-child,
+      tfoot:last-child tr:last-child > th:last-child {
+        border-bottom-right-radius: $border-radius;
+      }
+
+      tfoot + tbody:last-child tr:last-child td:first-child {
+        border-bottom-left-radius: 0;
+      }
+      tfoot + tbody:last-child tr:last-child td:last-child {
+        border-bottom-right-radius: 0;
+      }
+
+      caption + thead tr:first-child th:first-child,
+      caption + tbody tr:first-child td:first-child,
+      colgroup + thead tr:first-child th:first-child,
+      colgroup + tbody tr:first-child td:first-child {
+        border-top-left-radius: $border-radius;
+      }
+      caption + thead tr:first-child th:last-child,
+      caption + tbody tr:first-child td:last-child,
+      colgroup + thead tr:first-child th:last-child,
+      colgroup + tbody tr:first-child td:last-child {
+        border-top-right-radius: $border-radius;
+      }
+    }
+  }
+
+  .ui-table {
+    &.alternating {
+      tbody {
+        > tr:nth-child(odd) > td,
+        > tr:nth-child(odd) > th {
+          background-color: $alternate-background;
+        }
+      }
+    }
+  }
+
+  .ui-table {
+    &.striped {
+      @if $include-component-box-shadow == true{
+        box-shadow: #{$striped-box-shadow};
+      }
+
+      border: 0;
+      background: none;
+      td {
+        padding: 10px;
+        border-bottom: #{$striped-td-border-bottom};
+      }
+      th {
+        padding: 10px;
+        text-align: left;
+        @if $include-component-text-shadow == true{
+          text-shadow: #{$striped-th-text-shadow};
+        }
+
+        border-bottom: #{$striped-th-border-bottom};
+        background-color: $striped-th-background-color;
+        color: $striped-th-color;
+
+        &:first-child {
+          @include border-radius($striped-border-radius 0 0 0);
+        }
+        &:last-child {
+          @include border-radius(0 $striped-border-radius 0 0);
+        }
+        &:only-child {
+          @include border-radius($striped-border-radius $striped-border-radius 0 0);
+        }
+      }
+      tbody {
+        tr {
+          &:nth-child(even) {
+            background: $striped-nchild-background;
+
+          }
+        }
+      }
+      tfoot {
+        td {
+          border-bottom: 0;
+          border-top: #{$striped-foot-td-border-top};
+          background-color: $striped-foot-td-background-color;
+          &:first-child {
+            @include border-radius(0 0 0 $striped-border-radius);
+          }
+          &:last-child {
+            @include border-radius(0 0 $striped-border-radius 0);
+          }
+          &:only-child {
+            @include border-radius(0 0 $striped-border-radius $striped-border-radius);
+          }
+
+        }
+      }
+    }
+  }
+
+  @media #{$breakpoint-phone}{
+    .ui-table{
+      &.touch{
+        display:block;
+        thead,
+        tbody,
+        th,
+        td,
+        tfoot,
+        tr {
+          display: block;
+        }
+        border: 2px solid #e8e8e8 !important;
+
+        thead tr {
+          position: absolute;
+          top: -9999px;
+          left: -9999px;
+        }
+        tr {
+
+          border:0;
+          border-bottom:2px solid #e8e8e8;
+          &:last-child{
+            border-bottom:0;
+          }
+        }
+
+        td {
+          border: none !important;
+          border-bottom: 0;
+          form{
+            @include clearfix();
+          }
+        }
+        tbody{
+          td{
+            position: relative;
+            padding-left: 30% !important;
+            text-align:left;
+            &:before{
+              position: absolute;
+              top: 6px;
+              left: 6px;
+              width: 25%;
+              padding-right: 5px;
+              white-space: nowrap;
+              text-align:left;
+              content: attr(data-label);
+              font-weight:normal;
+            }
+          }
+        }
+        tfoot{
+          border-top:2px solid #e8e8e8;
+          @include clearfix();
+          padding-top:5px;
+          padding-bottom:5px;
+        }
+      }
+    }
+  }
+
+  .ui-table{
+    @content;
+  }
+
+}
+

data/stylesheets/ui/_tabs.scss

@@ -0,0 +1,242 @@
+/* ui-tabs */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-tabs($component: null, $active-tab: null,
+$tab-padding: null,
+$tab-margin: null,
+$tab-border-radius: null,
+$tab-min-width: null,
+$content-border: null,
+$content-padding: null,
+$content-min-height: null,
+$flex-amount: null,
+$stacked-tab-padding: null,
+$stacked-tab-margin: null,
+$stacked-tab-border-radius: null,
+$stacked-content-min-height: null,
+$stacked-content-padding: null,
+$font-size:null) {
+
+  list-style: none;
+  @include display-flex();
+  @include flex-direction(column);
+  margin: 0;
+  .tabs,tabbed-items {
+    list-style: none;
+    @include display-flex();
+    @include flex-direction(row);
+    @include flex-wrap(wrap);
+    margin: 0;
+    & > li,&>tab-item {
+      text-align: center;
+      min-width: $tab-min-width;
+      position: relative;
+      padding: $tab-padding;
+      @include phone-content() {
+        min-width: 30px;
+      }
+      @extend %#{$component}-background !optional;
+      @extend %#{$component}-border !optional;
+      @extend %#{$component}-box-shadow !optional;
+      border-top-left-radius: $tab-border-radius;
+      border-top-right-radius: $tab-border-radius;
+      margin: $tab-margin;
+      border-bottom-width: 0 !important;
+      &>a{
+        font-size:$font-size;
+      }
+      &:last-child {
+        margin: 0;
+        margin-top: margin-top($tab-margin);
+      }
+      cursor: pointer;
+      & > span, & > a {
+        @extend %#{$component}-font !optional;
+        &:hover{
+          @extend %#{$component}-font-hover !optional;
+        }
+      }
+      &.active {
+        @if $active-tab == null{
+          @extend %#{$component}-background-active !optional;
+          @extend %#{$component}-border-active !optional;
+          @extend %#{$component}-box-shadow-active !optional;
+        } @else {
+          @extend %#{$active-tab}-background !optional;
+          @extend %#{$active-tab}-border !optional;
+          @extend %#{$active-tab}-box-shadow !optional;
+        }
+        top: 1px;
+        position: relative;
+        border-bottom-width: 0 !important;
+
+
+        & > span, & > a, & > div {
+          display: block;
+          top: -1px;
+          position: relative;
+
+          @if $active-tab == null{
+            @extend %#{$component}-font-active !optional;
+          } @else {
+            @extend %#{$active-tab}-font-active !optional;
+          }
+          &:focus {
+            @include tab-focus();
+          }
+        }
+      }
+      &.disabled, &[disabled] {
+        @extend %#{$component}-disabled !optional;
+        & > span, & > a, & > div {
+          @extend %#{$component}-disabled !optional;
+        }
+        &:focus {
+          @include tab-focus();
+        }
+      }
+    }
+
+    &.flex {
+      & > li,&>tab-item {
+        @include flex($flex-amount);
+        padding-top: margin-top($tab-padding);
+        padding-bottom: margin-bottom($tab-padding);
+        padding-left: 1px;
+        padding-right: 1px;
+      }
+    }
+    &.disabled, &[disabled] {
+      & > li,&>tab-item {
+        @extend %#{$component}-disabled !optional;
+        & > span, & > a {
+          @extend %#{$component}-disabled !optional;
+        }
+      }
+    }
+  }
+  .content,tabbed-content {
+    margin: 0;
+    list-style: none;
+    @include display-flex();
+    @include flex-direction(column);
+    min-height: $content-min-height;
+
+    &.border {
+      border: $content-border;
+      @include phone-content() {
+        border: 0 !important;
+      }
+    }
+    &.border-top {
+      border-top: $content-border;
+    }
+    & > li,&>tab-content {
+      padding: $content-padding;
+      display: none;
+      &.active {
+        display: inherit;
+      }
+    }
+
+    .loading {
+      margin: auto;
+    }
+  }
+  &.stacked {
+
+    @include flex-direction(row);
+    min-height: $stacked-content-min-height;
+    & > li,&>tab-item {
+      &:nth-child(2) {
+        @include flex(1 1 auto);
+        @include display-flex();
+        @include align-items(stretch);
+      }
+    }
+    .tabs,tabbed-items {
+      @include flex-direction(column);
+      @include flex-wrap(nowrap);
+
+      & > li,&>tab-item {
+        border-radius: 0;
+        border-top-left-radius: $stacked-tab-border-radius;
+        border-bottom-left-radius: $stacked-tab-border-radius;
+        margin: $stacked-tab-margin;
+        padding: $stacked-tab-padding;
+        border-bottom-width: 1px !important;
+        border-right: 0 !important;
+
+        &:last-child {
+          margin: 0;
+        }
+        &.active {
+          border-bottom-width: 1px !important;
+          @if $active-tab == null{
+            @extend %#{$component}-border-active !optional;
+          } @else {
+            @extend %#{$active-tab}-border !optional;
+          }
+          border-right: 0 !important;
+          a{
+            display:inline;
+          }
+          top: 0;
+          right: -1px;
+          & > span, & > a, & > div {
+            top: 0;
+            right: 1px;
+
+          }
+        }
+
+      }
+    }
+    .content,tabbed-content {
+      @include flex(1 1 auto);
+      padding: $stacked-content-padding;
+      &.border-left {
+        border-left: $content-border;
+
+      }
+    }
+  }
+
+}
+
+/* public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-tabs($class: null, $component: css-tabs, $active-tab: null,
+$tab-padding:.5em 1em .5em 1em,
+$tab-margin:1px 1px 0 0,
+$tab-border-radius:$global-radius,
+$tab-min-width:4.68em,
+$content-border:1px solid #ddd,
+$content-padding:1.5em,
+$content-min-height:6.25em ,
+$flex-amount:1 1 0,
+$stacked-tab-padding:.75em .5em .75em .5em,
+$stacked-tab-margin:0px 0px 1px 0,
+$stacked-tab-border-radius:$global-radius,
+$stacked-content-min-height:6.25em,
+$stacked-content-padding:2em,
+$font-size:1em) {
+
+  .ui-tabs,ui-tabs {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-tabs($component, $active-tab, $tab-padding, $tab-margin, $tab-border-radius, $tab-min-width, $content-border, $content-padding,
+          $content-min-height, $flex-amount, $stacked-tab-padding, $stacked-tab-margin, $stacked-tab-border-radius,
+          $stacked-content-min-height, $stacked-content-padding,$font-size);
+        @content;
+      }
+    } @else {
+      @include _ui-tabs($component, $active-tab, $tab-padding, $tab-margin, $tab-border-radius, $tab-min-width, $content-border, $content-padding,
+        $content-min-height, $flex-amount, $stacked-tab-padding, $stacked-tab-margin, $stacked-tab-border-radius,
+        $stacked-content-min-height, $stacked-content-padding,$font-size);
+      @content;
+    }
+  }
+
+}