ellipsis-compass 1.0.1

data/stylesheets/ui/_carousel.scss

@@ -0,0 +1,284 @@
+/* ui-carousel */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-carousel($component:null,
+$padding: null,
+$margin: null,
+$container-width: null,
+$container-margin: null,
+$li-width: null,
+$height: null,
+$button-width: null,
+$button-top-position: null,
+$button-left-position: null,
+$button-right-position: null,
+$button-prev-icon-left-position: null,
+$button-next-icon-left-position: null,
+$icon-size: null,
+$icon-top-position: null,
+$z-index: null,
+$slide-margin-right: null,
+$constrain-image-to-width: null,
+$image-border:null,
+$image-border-active:null,
+$nav-control-top-position:null,
+$nav-control-position:null,
+$nav-control-next-icon:null,
+$nav-control-prev-icon:null,
+$nav-control-font-size:null,
+$nav-control-color:null,
+$nav-control-focus-opacity:null,
+$nav-animation:null,
+$max-height:null,
+$image-top-position:null
+) {
+
+
+    height: $height;
+    position: relative;
+    overflow: hidden;
+    &:hover,&:focus{
+      .navigation{
+        opacity:1;
+      }
+    }
+
+    &.margin,&[data-margin]{
+      margin: $container-margin;
+    }
+    &.hidden{
+      visibility: hidden;
+    }
+    .navigation{
+      position: absolute;
+      top: $nav-control-top-position;
+      z-index: $z-index;
+      height:$nav-control-font-size;
+      width:$nav-control-font-size;
+      opacity:0;
+      @if $nav-animation==true{
+        @include transition(all 0.25s linear);
+      }
+
+      &.disabled,[disabled]{
+        display:none !important;
+      }
+      &.visible{
+        visibility: visible;
+      }
+      &:hover,&:focus{
+        cursor:pointer;
+        opacity:$nav-control-focus-opacity;
+
+      }
+
+      &.next{
+        right: $nav-control-position;
+        &:after{
+          content:'#{$nav-control-next-icon}';
+          font-family:$global-icon-font-family;
+          font-size:$nav-control-font-size;
+          @extend %#{$component}-font;
+        }
+      }
+      &.prev{
+        left: $nav-control-position;
+        &:after{
+          content:'#{$nav-control-prev-icon}';
+          font-family:$global-icon-font-family;
+          font-size:$nav-control-font-size;
+          @extend %#{$component}-font;
+        }
+      }
+    }
+    button {
+      &.ui-button {
+        position: absolute;
+        top: $button-top-position;
+        z-index: $z-index;
+        padding: $padding;
+        width: $button-width;
+
+        &.next {
+          right: $button-right-position;
+          &:after {
+            font-size: $icon-size;
+            left: $button-next-icon-left-position;
+            top: $icon-top-position;
+          }
+        }
+        &.prev {
+          left: $button-left-position;
+          &:after {
+            font-size: $icon-size;
+            left: $button-prev-icon-left-position;
+            top: $icon-top-position;
+          }
+        }
+      }
+    }
+
+    [data-role=carousel-inner-container],carousel-inner-container {
+      position: absolute;
+      top:0;
+      left:0;
+
+      //width:100%;
+
+      &.width,&[data-width]{
+        width: $container-width;
+        margin: $margin;
+      }
+      &.hidden{
+        visibility: hidden;
+      }
+      .ui-carousel,ui-carousel {
+        list-style: none;
+        @include flexbox($justification: flex-start, $alignment: flex-start);
+
+        width:100%;
+        padding: 0;
+        &>li,&>carousel-item {
+          width: 100%;
+          height: auto;
+          margin: 0;
+          overflow: hidden;
+          position: relative;
+          img {
+            max-width: 100%;
+            height:auto;
+          }
+        }
+
+        &.multi-slide,&[data-multi-slide] {
+          width: auto;
+          &>li,&>carousel-item {
+            width: $li-width !important;
+            height: auto;
+            margin-right: $slide-margin-right;
+            overflow: hidden;
+            position: relative;
+            border:$image-border;
+            cursor:pointer;
+
+            &.active{
+              border:$image-border-active;
+            }
+
+            @if$constrain-image-to-width != true{
+              img {
+                max-width: none;
+                position: absolute;
+              }
+            }
+          }
+        }
+        &.fade-transition,&[data-fade-transition]{
+          display:block;
+          &>li,&>carousel-item {
+            display: none;
+            position: absolute;
+            opacity: 0;
+            float: none;
+            z-index: 1;
+            &:first-child {
+              display: inherit;
+              position: relative;
+              float: left;
+              opacity: 1;
+              z-index: 2;
+            }
+            img {
+              max-width: 100%;
+              height:auto;
+            }
+          }
+        }
+        &[data-height]{
+          &>li,&>carousel-item{
+            max-height:$max-height;
+            overflow:hidden;
+            img{
+              margin-top:$image-top-position;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media #{$breakpoint-touch}{
+    [data-role=carousel-outer-container],carousel-outer-container {
+      .ui-button,.navigation {
+        display: none;
+      }
+
+    }
+  }
+
+
+
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+
+@mixin ui-carousel($class:null,$component:null,
+$padding: 30px 15px 30px 15px,
+$margin: 0 auto,
+$container-width: 90%,
+$container-margin: 0,
+$li-width: 200px,
+$height: auto,
+$button-width:26px,
+$button-top-position:20%,
+$button-left-position:0,
+$button-right-position:0,
+$button-prev-icon-left-position:0,
+$button-next-icon-left-position:0,
+$icon-size:20px,
+$icon-top-position:20px,
+$z-index:$global-z-index + 100,
+$slide-margin-right:8px,
+$constrain-image-to-width:true,
+$image-border:0,
+$image-border-active:0,
+$nav-control-top-position:40%,
+$nav-control-position:10px,
+$nav-control-next-icon:\e179,
+$nav-control-prev-icon:\e178,
+$nav-control-font-size:2.5em,
+$nav-control-color:$white,
+$nav-control-focus-opacity:.8,
+$nav-animation:true,
+$max-height:450px,
+$image-top-position:0
+) {
+
+  [data-role=carousel-outer-container],carousel-outer-container {
+    @if $class != null{
+      &.#{$class} {
+
+        @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
+        $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
+        $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
+        $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
+        $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
+        );
+
+        @content;
+      }
+    } @else {
+
+      @include _ui-carousel($component,$padding,$margin,$container-width,$container-margin,$li-width,$height,
+        $button-width,$button-top-position,$button-left-position,$button-right-position,$button-prev-icon-left-position,
+        $button-next-icon-left-position,$icon-size,$icon-top-position,$z-index,$slide-margin-right,$constrain-image-to-width,
+        $image-border,$image-border-active,$nav-control-top-position,$nav-control-position,$nav-control-next-icon,
+        $nav-control-prev-icon,$nav-control-font-size,$nav-control-color,$nav-control-focus-opacity,$nav-animation,$max-height,$image-top-position
+      );
+
+
+      @content;
+    }
+  }
+}

data/stylesheets/ui/_collapsible.scss

@@ -0,0 +1,61 @@
+/* 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;
+      }
+    }
+  }
+}
+

data/stylesheets/ui/_container.scss

@@ -0,0 +1,297 @@
+/*
+  flex containers: ui-flex-container, ui-flex-list,ui-flex-grid,ui-sticky-footer
+*/
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-flex-list(
+$first-child-max-width:null,
+$alt-background:null,
+$justification:null,
+$alignment:null,
+$padding:null
+){
+  list-style: none;
+  &>li,&>ui-model{
+    padding:$padding;
+    @include flexbox($justification:$justification,$alignment:$alignment);
+    a{
+      &:first-child{
+        max-width:$first-child-max-width;
+      }
+      &.ellipsis{
+        white-space:nowrap;
+        text-overflow:ellipsis;
+        overflow:hidden;
+        display:block;
+      }
+    }
+    &:nth-child(even){
+      background:$alt-background;
+    }
+    .right{
+      margin-left:auto;
+    }
+  }
+}
+
+@mixin _ui-flex-grid(
+$columns:null,
+$grid-contain-columns:null,
+$tablet-columns:null,
+$tablet-small-columns:null,
+$justification:null,
+$alignment:null,
+$cell-justification:null,
+$cell-alignment:null,
+$cell-padding:null
+)
+{
+  width:100%;
+  $_column-percentage: columns-to-percentage($columns);
+  $_grid-contain-column-percentage: columns-to-percentage($grid-contain-columns);
+  $_tablet-column-percentage: columns-to-percentage($tablet-columns);
+  $_tablet-small-column-percentage: columns-to-percentage($tablet-small-columns);
+  @include display-flex();
+  @include justify-content($justification);
+  @include align-items($alignment);
+  @include flex-wrap(wrap);
+  &>li,&>grid-item{
+    width:$_column-percentage;
+    @include display-flex();
+    @include justify-content($cell-justification);
+    @include align-items($cell-alignment);
+    @include flex-direction(column);
+    padding:$cell-padding;
+    @include grid-contain-content(){
+      width:$_grid-contain-column-percentage;
+    }
+    @include tablet-content(){
+      width:$_tablet-column-percentage;
+    }
+    @include tablet-small-content(){
+      width:$_tablet-small-column-percentage;
+    }
+    @include phone-content(){
+      width:100%;
+    }
+
+  }
+
+}
+
+@mixin _ui-flex-form($header-background:null,$header-label:null){
+  list-style: none;
+  @include flexbox($justification:space-between);
+  width:100%;
+  @include flex-wrap(wrap);
+  &>li{
+    width:45%;
+    &.disabled{
+      &>*{
+        @extend %ui-disabled-component;
+      }
+      span:not(.ui-notification),input,label{
+        background:$white !important;
+      }
+    }
+    &.stretch{
+      width:100%;
+    }
+    @include span-icon(){
+      color:$inverse-color;
+      &.large{
+        font-size:8em;
+      }
+      margin-bottom:16px;
+    }
+    &.header{
+      margin:2em 0 2em 0;
+      width:100%;
+      height:3em;
+      background:$header-background;
+      border:1px solid $color-ddd;
+      text-align: center;
+      label{
+        font-size:24px;
+        color:$header-label;
+        padding-top:.3em;
+      }
+      &.inverse{
+        background:$inverse-color;
+        border:1px solid darken($component-inverse-background,1%);
+        label{
+          color:$white;
+        }
+      }
+      &.primary{
+        background:$primary-color;
+        border:1px solid darken($primary-color,1%);
+        label{
+          color:$white;
+        }
+      }
+      &.secondary{
+        background:$secondary-color;
+        border:1px solid darken($secondary-color,1%);
+        label{
+          color:$white;
+        }
+      }
+
+    }
+
+  }
+}
+
+
+
+/* Public -------------------------------------------------------------------------------------------------------------*/
+
+.ui-flex-container,ui-flex-container{
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+  &.stretch{
+    width:100%;
+  }
+  &.wrap{
+    width: 100%;
+    @include flex-wrap(wrap);
+  }
+  &.left, &.start,&.flex-start{
+    @include justify-content(flex-start);
+  }
+  &.right, &.end,&.flex-end{
+    @include justify-content(flex-end);
+  }
+  &.space-between{
+    @include justify-content(space-between);
+  }
+  &.top{
+    @include align-items(flex-start);
+  }
+  &.space-around{
+    @include justify-content(space-around);
+  }
+  &.column{
+    @include flex-direction(column);
+    @include align-items(center);
+    &.top{
+      @include justify-content(flex-start);
+    }
+    &.bottom{
+      @include justify-content(flex-end);
+    }
+    &.left,&.start,&.flex-start{
+      @include align-items(flex-start);
+    }
+    &.right, &.end,&.flex-end{
+      @include align-items(flex-end);
+    }
+    &.space-around{
+      @include align-items(space-around);
+    }
+    &.space-between{
+      @include align-items(space-between);
+    }
+  }
+  &>.right, &>.end,&>.flex-end{
+    @include align-self(flex-end);
+    margin-left:auto;
+  }
+}
+
+
+@mixin ui-flex-form($class:null,
+$header-background:#f7f7f7,
+$header-label:#999
+
+){
+
+  .ui-flex-form,ui-flex-form {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-flex-form($header-background,$header-label);
+        @content;
+      }
+
+    } @else {
+      @include _ui-flex-form($header-background,$header-label);
+      @content;
+    }
+  }
+}
+
+
+@mixin ui-flex-list($class:null,
+$first-child-max-width:15em,
+$alt-background:#fafafa,
+$justification:space-between,
+$alignment:center,
+$padding:.5em 0 .5em 0
+){
+
+  .ui-flex-list,ui-flex-list {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-flex-list($first-child-max-width,$alt-background,$justification,$alignment,$padding);
+        @content;
+      }
+
+    } @else {
+      @include _ui-flex-list($first-child-max-width,$alt-background,$justification,$alignment,$padding);
+      @content;
+    }
+  }
+}
+
+@mixin ui-flex-grid($class:null,
+$columns:4,
+$grid-contain-columns:4,
+$tablet-columns:3,
+$tablet-small-columns:2,
+$justification:flex-start,
+$alignment:flex-start,
+$cell-justification:flex-start,
+$cell-alignment:flex-start,
+$cell-padding:0 1em 2em 0
+
+){
+
+  .ui-flex-grid,ui-flex-grid {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-flex-grid($columns,$grid-contain-columns,$tablet-columns,$tablet-small-columns,
+                $justification,$alignment,$cell-justification,$cell-alignment,$cell-padding);
+        @content;
+      }
+
+    } @else {
+      @include _ui-flex-grid($columns,$grid-contain-columns,$tablet-columns,$tablet-small-columns,
+              $justification,$alignment,$cell-justification,$cell-alignment,$cell-padding);
+      @content;
+    }
+  }
+}
+
+
+
+@mixin ui-sticky-footer(){
+  /* sticky bottom footer */
+  .ui-sticky-footer {
+    @include display-flex();
+    min-height: 100vh;
+    height:100%;
+    @include flex-direction(column);
+    & > *:not([data-role=footer]) {
+      //@include flex(1);
+      @include flex(1 0 auto);//ie workaround
+    }
+    &.ns{
+      height:900px;//not supported workaround
+    }
+  }
+}
+
+