ellipsis-compass 1.0.6 → 1.0.7

data/stylesheets/ellipsis/ui/_collapse.scss

@@ -0,0 +1,174 @@
+
+
+@mixin _ui-collapse($component:null,$header-component:null,$section-component:null,
+$margin:null,
+$padding:null,
+$border-radius:null,
+$width:null,
+$font-size:null,
+$item-header-height:null,
+$item-header-expand-margin:null,
+$item-header-padding:null,
+$item-header-justification:null,
+$item-header-alignment:null,
+$item-header-border-radius:null,
+$item-section-padding:null,
+$item-section-margin:null,
+$item-section-min-height:null,
+$item-section-border-radius:null
+){
+  list-style: none;
+  margin: $margin;
+  padding:$padding;
+  height: 100%;
+  display:block;
+  @extend %#{$component}-background;
+  @extend %#{$component}-border;
+  border-radius:$border-radius;
+  font-size:$font-size;
+  width:$width;
+  $item-selector:'.collapse-item';
+  @if $component-custom-tags==true{
+    $item-selector:collapse-item;
+  }
+  #{$item-selector}{
+    &>header{
+      @include flexbox($justification:$item-header-justification,$alignment:$item-header-alignment);
+      @extend %#{$header-component}-background !optional;
+      @extend %#{$header-component}-border !optional;
+      @extend %#{$header-component}-box-shadow !optional;
+      @extend %#{$header-component}-font !optional;
+      height:$item-header-height;
+      border-radius:$item-header-border-radius;
+      padding:$item-header-padding;
+      button,.ui-button{
+        margin:0;
+      }
+
+      @include media-breakpoint(600px){
+        border-radius:0;
+      }
+    }
+    section {
+      margin:$item-section-margin;
+      padding:0;
+      position:relative;
+      @extend %#{$section-component}-background !optional;
+      @extend %#{$section-component}-border !optional;
+      @extend %#{$section-component}-font !optional;
+      border-radius:$item-section-border-radius;
+      >*{
+        margin:$item-section-padding;
+      }
+      @include media-breakpoint(600px){
+        border-radius:0;
+      }
+    }
+
+    header + section{
+      height: 0;
+      display:block;
+      overflow: hidden;
+    }
+    &.expand header + section{
+         height:auto;
+         overflow: hidden;
+    }
+    &.expand{
+      &>header{
+        margin:$item-header-expand-margin;
+      }
+    }
+    &:last-child{
+      &>section{
+        margin-bottom:0;
+      }
+    }
+  }
+
+  &.hide-expanded-headers{
+
+    #{$item-selector}{
+      &.expand{
+        &>header{
+          display:none;
+        }
+      }
+    }
+  }
+
+}
+
+@mixin ui-collapse($class:null,$tag:null,$component:null,$header-component:null,$section-component:null,
+$margin:0,
+$padding:0,
+$border-radius:$global-radius,
+$width:auto,
+$font-size:1em,
+$item-header-height:3em,
+$item-header-expand-margin:0 0 1px 0,
+$item-header-padding:0 3em 0 1em,
+$item-header-justification:space-between,
+$item-header-alignment:center,
+$item-header-border-radius:3px,
+$item-section-padding:1em,
+$item-section-margin:0 0 1px 0,
+$item-section-min-height:10em,
+$item-section-border-radius:3px
+){
+
+  $element-selector:'.ui-collapse';
+  @if $component-custom-tags==true{
+    $element-selector:ui-collapse;
+  }
+  @if $tag != null{
+    $element-selector:$tag;
+  }
+
+  #{$element-selector}{
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-collapse($component,$header-component,$section-component,
+        $margin,
+        $padding,
+        $border-radius,
+        $width,
+        $font-size,
+        $item-header-height,
+        $item-header-expand-margin,
+        $item-header-padding,
+        $item-header-justification,
+        $item-header-alignment,
+        $item-header-border-radius,
+        $item-section-padding,
+        $item-section-margin,
+        $item-section-min-height,
+        $item-section-border-radius
+        );
+
+        @content;
+      }
+    }@else{
+      @include _ui-collapse($component,$header-component,$section-component,
+              $margin,
+              $padding,
+              $border-radius,
+              $width,
+              $font-size,
+              $item-header-height,
+              $item-header-expand-margin,
+              $item-header-padding,
+              $item-header-justification,
+              $item-header-alignment,
+              $item-header-border-radius,
+              $item-section-padding,
+              $item-section-margin,
+              $item-section-min-height,
+              $item-section-border-radius
+      );
+
+      @content;
+    }
+  }
+
+}

data/stylesheets/ellipsis/ui/_container.scss

@@ -14,6 +14,7 @@ $padding:null
   list-style: none;
   &>li,&>ui-model{
     padding:$padding;
+    position:relative;
     @include flexbox($justification:$justification,$alignment:$alignment);
     a{
       &:first-child{
@@ -144,7 +145,176 @@ $cell-padding:null
   }
 }
 
+@mixin _ui-columns(
+$count:null,
+$gap:null,
+$width:null,
+$contain-count:null,
+$contain-gap:null,
+$contain-width:null,
+$touch-count:null,
+$touch-gap:null,
+$touch-width:null,
+$touch-item-margin:null,
+$touch-font-size:null,
+$font-size:null){
 
+  display:block;
+  list-style: none;
+  font-size:$font-size;
+  -webkit-column-count: $count;
+  -moz-column-count:$count;
+  column-count: $count;
+  -webkit-column-width:$width;
+  -moz-column-width:$width;
+  column-width:$width;
+  -webkit-column-gap:$gap;
+  -moz-column-gap:$gap;
+  column-gap:$gap;
+
+  &>li,&>column-item{
+    display:list-item;
+    a{
+      font-size:$font-size;
+    }
+  }
+
+  @include grid-contain-content() {
+    -webkit-column-count: $contain-count;
+    -moz-column-count:$contain-count;
+    column-count: $contain-count;
+    -webkit-column-width:$contain-width;
+    -moz-column-width:$contain-width;
+    column-width:$contain-width;
+    -webkit-column-gap:$contain-gap;
+    -moz-column-gap:$contain-gap;
+    column-gap:$contain-gap;
+  }
+
+  @include touch-content(){
+    -webkit-column-count: $touch-count;
+    -moz-column-count:$touch-count;
+    column-count: $touch-count;
+    -webkit-column-width:$touch-width;
+    -moz-column-width:$touch-width;
+    column-width:$touch-width;
+    -webkit-column-gap:$touch-gap;
+    -moz-column-gap:$touch-gap;
+    column-gap:$touch-gap;
+  }
+
+  @include phone-content(){
+    -webkit-column-count:1;
+    -moz-column-count:1;
+    column-count: 1;
+    -webkit-column-width:100%;
+    -moz-column-width:100%;
+    column-width:100%;
+    -webkit-column-gap:0;
+    -moz-column-gap:0;
+    column-gap:0;
+  }
+
+  @include touch-content(){
+
+    &>li,&>column-item{
+      margin:$touch-item-margin;
+      a{
+        font-size:$touch-font-size;
+      }
+    }
+  }
+
+}
+
+@mixin _ui-icons($component:null,
+$justification:null,
+$alignment:null,
+$type:null,
+$include-animation:null,
+$animation:null,
+$item-margin:null,
+$item-padding:null,
+$font-size:null,
+$mark-font-size:null,
+$mark-font-weight:null,
+$mark-font-family:null,
+$mark-margin:null){
+
+  @if $type == horizontal{
+    height:100%;
+    @include flexbox($justification:$justification,$alignment:$alignment);
+    &>li,&>screen-icon{
+      margin:$item-margin;
+      padding:$item-padding;
+      @include span-icon(){
+        cursor:pointer;
+        @if $include-animation == true{
+          @include transition($animation);
+        }
+        position:relative;
+        @include flexbox($justification:center,$alignment:center);
+        &>mark{
+          @extend %#{$component}-icon !optional;
+          font-family:$mark-font-family;
+          font-size:$mark-font-size !important;
+          font-weight:$mark-font-weight !important;
+          margin:$mark-margin;
+          position:absolute;
+          top:0;
+          left:0;
+          @include flexbox($justification:center,$alignment:center);
+          background:none;
+          height:100%;
+          width:100%;
+        }
+        @extend %#{$component}-font !optional;
+        @extend %#{$component}-text-shadow !optional;
+        font-size:$font-size;
+        &:hover{
+          @extend %#{$component}-font-hover !optional;
+        }
+      }
+    }
+  }@else{
+    width:100%;
+    @include flexbox-column($justification:$justification,$alignment:$alignment);
+    &>li,&>screen-icon{
+      margin:$item-margin;
+      padding:$item-padding;
+
+      @include span-icon(){
+        cursor:pointer;
+        @if $include-animation == true{
+          @include transition($animation);
+        }
+        position:relative;
+        @include flexbox($justification:center,$alignment:center);
+        &>mark{
+          @extend %#{$component}-icon !optional;
+          font-family:$mark-font-family;
+          font-size:$mark-font-size !important;
+          font-weight:$mark-font-weight !important;
+          margin:$mark-margin;
+          position:absolute;
+          top:0;
+          left:0;
+          @include flexbox($justification:center,$alignment:center);
+          background:none;
+          height:100%;
+          width:100%;
+        }
+        @extend %#{$component}-font !optional;
+        @extend %#{$component}-text-shadow !optional;
+        &:hover{
+          @extend %#{$component}-font-hover !optional;
+        }
+      }
+    }
+  }
+
+
+}
 
 /* Public -------------------------------------------------------------------------------------------------------------*/
 
@@ -200,9 +370,40 @@ $cell-padding:null
     }
   }
   &>.right, &>.end,&>.flex-end{
-    @include align-self(flex-end);
     margin-left:auto;
   }
+  &.touch-column{
+    @include touch-content(){
+      @include flex-direction(column);
+      @include align-items(center);
+    }
+  }
+  &>.touch-right{
+    @include touch-content(){
+      margin-left:auto;
+    }
+  }
+  &>.tablet-right{
+    @include tablet-content(){
+      margin-left:auto;
+    }
+  }
+  &>.touch-left{
+    margin-right:auto;
+  }
+  &>.tablet-left{
+    margin-right:auto;
+  }
+  &.absolute{
+    position:absolute;
+    height:100%;
+    width:100%;
+    z-index:999;
+    top:0;
+  }
+  &.relative{
+    position:relative;
+  }
 }
 
 
@@ -278,7 +479,122 @@ $cell-padding:0 1em 2em 0
   }
 }
 
+@mixin ui-columns($class:null,
+$count:3,
+$gap:2em,
+$grid-contain-count:2,
+$grid-contain-gap:2em,
+$touch-count:2,
+$touch-gap:2em,
+$touch-item-margin:0 0 .5em 0,
+$touch-font-size:1em,
+$font-size:1em
+){
+  $column-percentage: columns-to-percentage($count);
+  $contain-column-percentage: columns-to-percentage($grid-contain-count);
+  $touch-column-percentage: columns-to-percentage($touch-count);
+
+
+  .ui-columns,ui-columns {
+
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-columns($count,
+        $gap,
+        $column-percentage,
+        $grid-contain-count,
+        $grid-contain-gap,
+        $contain-column-percentage,
+        $touch-count,
+        $touch-gap,
+        $touch-column-percentage,
+        $touch-item-margin,
+        $touch-font-size,
+        $font-size);
+        @content;
+      }
+
+    } @else {
+      @include _ui-columns($count,
+              $gap,
+              $column-percentage,
+              $grid-contain-count,
+              $grid-contain-gap,
+              $contain-column-percentage,
+              $touch-count,
+              $touch-gap,
+              $touch-column-percentage,
+              $touch-item-margin,
+              $touch-font-size,
+              $font-size);
+      @content;
+    }
+  }
+}
+
+@mixin ui-icons($class:null,$component:null,
+$justification:flex-start,
+$alignment:center,
+$type:horizontal,
+$include-animation:true,
+$animation:color 500ms,
+$item-margin:0 2em 0 0,
+$item-padding:0,
+$font-size:2em,
+$mark-font-size:11px,
+$mark-font-weight:700,
+$mark-font-family:'Helvetica Neue',
+$mark-margin:0
+){
 
+  .ui-icons,ui-icons{
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-icons($component,
+        $justification,
+        $alignment,
+        $type,
+        $include-animation,
+        $animation,
+        $item-margin,
+        $item-padding,
+        $font-size,
+        $mark-font-size,
+        $mark-font-weight,
+        $mark-font-family,
+        $mark-margin
+        );
+        @content;
+      }
+    }@else{
+      @include _ui-icons($component,
+              $justification,
+              $alignment,
+              $type,
+              $include-animation,
+              $animation,
+              $item-margin,
+              $item-padding,
+              $font-size,
+              $mark-font-size,
+              $mark-font-weight,
+              $mark-font-family,
+              $mark-margin
+      );
+        @content;
+    }
+  }
+}
+
+@mixin ui-flex-label(){
+  .ui-flex-label,ui-flex-label{
+    list-style: none;
+    display:block;
+    &>li{
+      @include flexbox($justification:space-between,$alignment:flex-start);
+    }
+  }
+}
 
 @mixin ui-sticky-footer(){
   /* sticky bottom footer */