ellipsis-compass 1.0.1

data/stylesheets/ui/_file.scss

@@ -0,0 +1,147 @@
+/* ui-file */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-file($component:null,
+$min-height:null,
+$border:null,
+$z-index:null,
+$drop-zone-padding:null,
+$font-size:null,
+$header-font-size:null,
+$position:null,
+$button-margin:null,
+$p-margin:null,
+$preview-columns:null
+
+) {
+
+  $_ui-file-column-percentage:columns-to-percentage($preview-columns);
+
+  input[type=file] {
+    display: none;
+  }
+
+  position: relative;
+  &.active{
+    min-height:$min-height;
+    @extend %#{$component}-border !optional;
+    @if $border != null {
+      border:$border;
+    }
+    &:hover, &:focus {
+      @extend %#{$component}-border-hover !optional;
+    }
+  }
+
+
+  .ui-upload-overlay {
+    position: absolute;
+    top: $position;
+    left: $position;
+    z-index: $z-index;
+    @extend %#{$component}-background !optional;
+    right: $position;
+    bottom: $position;
+    & > .ui-drop-zone {
+      padding: $drop-zone-padding;
+      h2 {
+        font-size: $header-font-size;
+        @extend %#{$component}-font !optional;
+      }
+      p {
+        font-size: $font-size;
+        @extend %#{$component}-font !optional;
+        margin: $p-margin;
+      }
+      .ui-button {
+        margin: $button-margin;
+      }
+    }
+    & > progress {
+      position: absolute;
+      left: 0px;
+      bottom: 0px;
+      width: 100%;
+    }
+    .ui-preview{
+      padding:40px 20px 40px 20px;
+      &>ul{
+        list-style: none;
+        &>li{
+          display:inline-block;
+          width:$_ui-file-column-percentage - 2;
+          padding:10px;
+          &>img{
+            width:100%;
+            height:auto;
+          }
+          &>div{
+            margin:5px 0 0 0;
+            font-size:12px;
+            @extend %#{$component}-font-active !optional;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+/* public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-file($class:null,$component:css-input-file,
+$min-height:550px,
+$border:null,
+$z-index:$global-z-index + 999,
+$drop-zone-padding:100px 0 0 100px,
+$font-size:1em,
+$header-font-size:2.25em,
+$position:0,
+$button-margin:0 0 0 5.625em,
+$p-margin:.3125em 0 .625em 8em,
+$preview-columns:3,
+$hide-for-touch:true
+
+
+) {
+
+  .ui-file {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-file($component, $min-height,$border,$z-index,$drop-zone-padding,
+          $font-size,
+          $header-font-size,
+          $position,
+          $button-margin,
+          $p-margin,
+          $preview-columns
+        );
+       @content;
+      }
+    } @else {
+      @include _ui-file($component, $min-height, $border,$z-index,$drop-zone-padding,
+        $font-size,
+        $header-font-size,
+        $position,
+        $button-margin,
+        $p-margin,
+        $preview-columns
+      );
+      @content;
+    }
+  }
+
+  @if $hide-for-touch == true{
+    @media #{$breakpoint-touch}{
+      .ui-file,[data-ui=file] {
+        border:none;
+        .ui-upload-overlay {
+          display:none;
+        }
+      }
+    }
+  }
+
+
+}

data/stylesheets/ui/_gallery.scss

@@ -0,0 +1,219 @@
+/* ui-flex-gallery --------------------------------------------------------------------------------------------- */
+
+@mixin ui-flex-gallery(
+$columns:3,
+$justification:space-between,
+$grid-contain-columns:3,
+$tablet-columns:2,
+$container-width:80%,
+$cell-height:250px,
+$max-img-height:175px,
+$line-height:1.5,
+$img-justify:center,
+$img-align:center,
+$descriptions-margin:auto 0 1em 0,
+$descriptions-justify:flex-start,
+$descriptions-align:center,
+$descriptions-child-justify:center,
+$descriptions-child-align:center,
+$tablet-cell-height:250px,
+$tablet-max-img-height:175px,
+$tablet-container-width:$container-width,
+$tablet-portrait-cell-height:250px,
+$tablet-portrait-max-img-height:175px,
+$tablet-portrait-container-width:$container-width,
+$small-tablet-breakpoint:false,
+$phone-cell-height:200px,
+$phone-max-img-height:150px,
+$phone-img-container-margin:0 1em 0 0,
+$phone-border-bottom:1px solid #ddd,
+$phone-cell-margin:1em 0 0 0,
+$phone-line-height:1.3,
+$phone-descriptions-margin:.5em 0 1em 0,
+$include-gutter-bleed:false
+
+
+) {
+  $_flex-gallery-column-percentage: columns-to-percentage($columns);
+
+  .ui-flex-gallery {
+    @include display-flex();
+    @include justify-content($justification);
+    @include align-items(center);
+    width: 100%;
+    @include flex-wrap(wrap);
+    & > .item {
+      @include display-flex();
+      @include justify-content(center);
+      @include align-items(center);
+      @include flex-direction(column);
+      width: $_flex-gallery-column-percentage;
+      overflow: hidden;
+      max-height:$cell-height;
+      & > .img-container {
+        width: $container-width;
+        height: $max-img-height;
+        overflow: hidden;
+        @include display-flex();
+        @include justify-content($img-justify);
+        @include align-items($img-align);
+        & > img {
+          max-width: 100% !important;
+          height: auto !important;
+        }
+      }
+      & > .descriptions {
+        width: $container-width;
+        line-height: $line-height;
+        @include display-flex();
+        @include justify-content($descriptions-justify);
+        @include align-items($descriptions-align);
+        @include flex-direction(column);
+        margin:$descriptions-margin;
+        &>*{
+          width:100%;
+          @include display-flex();
+          @include justify-content($descriptions-child-justify);
+          @include align-items($descriptions-child-align);
+        }
+      }
+    }
+    @content;
+  }
+
+  @include grid-contain-content() {
+    $_grid-contain_flex-gallery-column-percentage: columns-to-percentage($grid-contain-columns);
+    .ui-flex-gallery {
+      & > .item {
+        width: $_grid-contain_flex-gallery-column-percentage;
+      }
+    }
+  }
+
+  @include tablet-content(){
+    $_tablet_flex-gallery-column-percentage: columns-to-percentage($tablet-columns);
+    .ui-flex-gallery {
+      & > .item {
+        width: $_tablet_flex-gallery-column-percentage;
+        max-height:$tablet-cell-height;
+        & > .img-container {
+          width: $tablet-container-width;
+          height: $tablet-max-img-height;
+        }
+        & > .descriptions{
+          width: $tablet-container-width;
+        }
+      }
+    }
+  }
+
+  @include tablet-portrait-content(){
+    $_tablet_flex-gallery-column-percentage: columns-to-percentage($tablet-columns);
+    .ui-flex-gallery {
+      & > .item {
+        width: $_tablet_flex-gallery-column-percentage;
+        max-height:$tablet-portrait-cell-height;
+        & > .img-container {
+          width: $tablet-portrait-container-width;
+          height: $tablet-portrait-max-img-height;
+        }
+        & > .descriptions{
+          width: $tablet-portrait-container-width;
+        }
+      }
+    }
+  }
+
+  @if $small-tablet-breakpoint ==true {
+    @include tablet-small-content() {
+      .ui-flex-gallery {
+        @if $include-gutter-bleed==true{
+          @include gutter-bleed();
+        }
+        & > .item {
+          width: 100%;
+          height:$phone-cell-height;
+          flex-direction:row;
+          justify-content: flex-start;
+          border-bottom:$phone-border-bottom;
+          margin:$phone-cell-margin;
+          &:first-child{
+            margin-top:0;
+          }
+          &:last-child{
+            border-bottom:0;
+          }
+          & > .img-container {
+            max-width: 50%;
+            height: $phone-max-img-height;
+            flex-grow:1;
+            margin:$phone-img-container-margin;
+            justify-content: flex-start;
+            align-self:flex-start;
+            & > img {
+              align-self: flex-start;
+            }
+          }
+          & > .descriptions {
+            height:100%;
+            width:50%;
+            flex-grow:1;
+            line-height: $phone-line-height;
+            margin:$phone-descriptions-margin;
+            justify-content: flex-start !important;
+            &>*{
+
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  @include phone-content() {
+    .ui-flex-gallery {
+      @if $include-gutter-bleed==true{
+        @include gutter-bleed();
+      }
+      & > .item {
+        width: 100%;
+        height:$phone-cell-height;
+        flex-direction:row;
+        justify-content: flex-start;
+        border-bottom:$phone-border-bottom;
+        margin:$phone-cell-margin;
+        &:first-child{
+          margin-top:0;
+        }
+        &:last-child{
+          border-bottom:0;
+        }
+        & > .img-container {
+          max-width: 50%;
+          height: $phone-max-img-height;
+          flex-grow:1;
+          margin:$phone-img-container-margin;
+          justify-content: flex-start;
+          align-self:flex-start;
+          & > img {
+            align-self: flex-start;
+          }
+        }
+        & > .descriptions {
+          height:100%;
+          width:50%;
+          flex-grow:1;
+          line-height: $phone-line-height;
+          margin:$phone-descriptions-margin;
+          justify-content: flex-start !important;
+          &>*{
+
+          }
+        }
+      }
+    }
+  }
+
+}
+

data/stylesheets/ui/_label.scss

@@ -0,0 +1,167 @@
+/* Variables ----------------------------------------------------------------------------------------------------------*/
+
+$ui-label-padding:2px 4px 2px !default;
+$ui-label-background:$inverse-color !default;
+$ui-label-font-color: $white !default;
+$ui-label-font-size:.8em !default;
+$ui-label-font-weight:bold !default;
+$ui-label-text-transform:none !default;
+$ui-label-text-decoration:none !default;
+$ui-label-text-align:center !default;
+$ui-label-line-height:1 !default;
+$ui-label-radius:$global-radius !default;
+$ui-label-round-padding:1px 7px 2px !default;
+
+$ui-semantic-label-margin: 1em 0 !default;
+$ui-semantic-label-padding:.6em 0 .6em 2em !default;
+$ui-semantic-label-font-size:1em !default;
+$ui-semantic-label-border-radius:$global-radius !default;
+
+/* Mixins -------------------------------------------------------------------------------------------------------------*/
+
+%ui-semantic-label{
+  margin:$ui-semantic-label-margin;
+  padding:$ui-semantic-label-padding;
+  width:100%;
+  opacity:0;
+  font-size:$ui-semantic-label-font-size;
+  cursor:default;
+  position:relative;
+  border-radius:$ui-semantic-label-border-radius;
+  @include flexbox($alignment:center,$justification:center);
+  font-weight:normal;
+  &.hidden{
+    visibility: hidden;
+  }
+  &.visible{
+    visibility: visible !important;
+    opacity:1;
+  }
+  border:1px solid;
+  &>button,ui-close{
+    margin-left:auto;
+    padding-right:.6em;
+    background:none;
+    border:none;
+    font-size:1.5em;
+    opacity:.2 !important;
+    font-weight:bold;
+    cursor:pointer;
+  }
+}
+@mixin _semantic-label($component) {
+
+  .ui-semantic-label,ui-semantic-label{
+   @extend %ui-semantic-label;
+    &.#{$component}{
+      @include invoke-component-default-state($component);
+      box-shadow:none !important;
+      &>button{
+        @extend %#{$component}-font !optional;
+        &:hover,&:focus{
+          opacity: .8 !important;
+        }
+      }
+    }
+
+  }
+
+  span{
+    &.warning{
+      color:$component-warning-font-color;
+    }
+    &.success{
+      color:$component-success-font-color;
+    }
+    &.info{
+      color:$component-info-font-color;
+    }
+    &.error{
+      color:$component-error-font-color;
+    }
+  }
+
+}
+
+@mixin ui-label($component:default){
+  .ui-label {
+    @include invoke-component-default-state($component);
+    padding: $ui-label-padding;
+    font-size: $ui-label-font-size;
+    font-weight: $ui-label-font-weight;
+    text-transform: $ui-label-text-transform;
+    text-align: $ui-label-text-align;
+    text-decoration: $ui-label-text-decoration;
+    line-height: $ui-label-line-height;
+    white-space: nowrap;
+    display: inline;
+    position: relative;
+    cursor:default;
+    &.radius {
+      @include border-radius($ui-label-radius);
+    }
+    &.round {
+      padding: $ui-label-round-padding;
+      @include border-radius(1000px);
+
+    }
+  }
+
+}
+
+@mixin ui-semantic-checkboxes($padding:1em,$border-radius:$global-radius){
+  .ui-semantic-checkbox,ui-semantic-checkbox{
+    box-shadow:none !important;
+    border-radius:$border-radius;
+    padding:$padding;
+    position:relative;
+    &.success{
+      @include invoke-component-default-state(success);
+      input[type="checkbox"] + label.ui-checkbox {
+        color:$component-success-font-color;
+        &:before{
+          border-color:lighten($component-success-font-color,20%) !important;
+          color:$component-success-font-color;
+        }
+      }
+    }
+    &.error{
+      @include invoke-component-default-state(error);
+      input[type="checkbox"] + label.ui-checkbox {
+        color:$component-error-font-color;
+        &:before{
+          border-color:lighten($component-error-font-color,20%) !important;
+          color:$component-error-font-color;
+        }
+      }
+    }
+    &.warning{
+      @include invoke-component-default-state(warning);
+      input[type="checkbox"] + label.ui-checkbox {
+        color:$component-warning-font-color;
+        &:before{
+          border-color:lighten($component-warning-font-color,20%) !important;
+          color:$component-warning-font-color;
+        }
+      }
+    }
+    &.info{
+      @include invoke-component-default-state(info);
+      input[type="checkbox"] + label.ui-checkbox {
+        color:$component-info-font-color;
+        &:before{
+          border-color:lighten($component-info-font-color,20%) !important;
+          color:$component-info-font-color;
+        }
+      }
+    }
+  }
+
+}
+
+@mixin ui-semantic-label(){
+  @include _semantic-label(error);
+  @include _semantic-label(info);
+  @include _semantic-label(warning);
+  @include _semantic-label(success);
+}