ellipsis-compass 1.0.1

data/stylesheets/ui/_autocomplete.scss

@@ -0,0 +1,117 @@
+
+
+//ui-autocomplete
+
+
+
+
+//private --------------------------------------------------------------------------------------------------------
+@mixin _ui-autocomplete($component:null,$divider:null,
+$border-radius:$global-radius,
+$z-index:null,
+$height:null
+){
+  width:100%;
+  height:$height;
+  position:absolute;
+  top:100%;
+  left:0;
+  display:none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-radius:$global-radius;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  font-size:1em;
+  z-index:$z-index;
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    padding: 0;
+    min-height: 1.1em;
+    line-height: 1.1em;
+    margin: 0;
+    white-space: nowrap;
+    list-style: none;
+    a {
+      display: block;
+      @extend %#{$component}-font !optional;
+      padding: .7em .9em;
+      text-align: left;
+    }
+    &:hover,&.hover, &:focus, &:active {
+      @extend %#{$component}-background-hover !optional;
+
+
+      &:first-child{
+        border-top-right-radius: $border-radius;
+        border-top-left-radius: $border-radius;
+      }
+      &:last-child{
+        border-bottom-right-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+      a{
+        @extend %#{$component}-font-hover !optional;
+      }
+    }
+
+    &.divider {
+      min-height: 0;
+      padding: 0;
+      height: 1px;
+      margin:0;
+      @extend %#{$divider}-background-hover !optional;
+      &:last-child{
+        display:none;
+      }
+    }
+    &.last:hover {
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+  }
+
+}
+
+
+//public --------------------------------------------------------------------------------------------------------
+
+@mixin ui-autocomplete($class:null,$component:css-autocomplete,$divider:css-divider-3,
+$border-radius:$global-radius,$z-index:999,$height:20em,$container-width:100%
+
+){
+
+  .ui-autocomplete {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-autocomplete($component,$divider,$border-radius,$z-index,$height);
+        @content;
+      }
+
+    } @else {
+      @include _ui-autocomplete($component,$divider,$border-radius,$z-index,$height);
+      @content;
+    }
+
+  }
+  .ui-autocomplete-container{
+    display:block;
+    position:relative;
+    width:$container-width;
+    @content;
+    &>.ui-search,&>ui-search{
+      width:100%;
+    }
+  }
+}
+
+
+
+
+

data/stylesheets/ui/_badge.scss

@@ -0,0 +1,73 @@
+/* ui-badge */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-badge($component:inverse,
+$padding:null,
+$margin:null,
+$line-height:null,
+$border-radius:null,
+$font:null,
+$font-size:null
+){
+
+
+  display: inline-block;
+  min-width: .75em;
+  padding: $padding;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-font !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  line-height: $line-height;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  border-radius: $border-radius;
+  margin:$margin;
+  font-size:$font-size;
+
+  &:empty {
+    display: none;
+  }
+
+}
+
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-badge($class:null,$component:inverse,
+$padding:.2em .5em,
+$margin:0,
+$line-height:1,
+$border-radius:$global-radius,
+$font-size:1em
+){
+
+  .ui-badge,ui-badge {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-badge($component,$padding,$margin,$line-height,$border-radius,$font-size);
+        @content;
+      }
+
+    } @else {
+      @include _ui-badge($component,$padding,$margin,$line-height,$border-radius,$font-size);
+      @content;
+    }
+
+  }
+  a.ui-badge{
+    @if $class != null{
+      &.#{$class} {
+        &:hover,&:focus{
+          @extend %#{$component}-font-hover !optional;
+        }
+      }
+    } @else {
+      @extend %#{$component}-font-hover !optional;
+    }
+  }
+
+}

data/stylesheets/ui/_box.scss

@@ -0,0 +1,78 @@
+/* ui-box */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-box($component:null,
+$border:null,
+$border-radius:null,
+$justification:null, /* vertical */
+$alignment:null, /* horizontal */
+$min-height:null,
+$width:null,
+$padding:null,
+$background:null
+){
+  @include display-flex();
+  @include flex-direction(column);
+  @include justify-content($justification);
+  @include align-items($alignment);
+
+  min-height:$min-height;
+  padding:$padding;
+  width:$width;
+
+  @if $component != null{
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-font !optional;
+    @extend %#{$component}-border !optional;
+    @extend %#{$component}-box-shadow !optional;
+  }@else{
+    @if $background !=null {
+      background:$background;
+    }
+    @if $border != null{
+      border:$border;
+    }
+  }
+
+  @if $border-radius != null{
+    border-radius:$border-radius;
+  }@else{
+    border-radius:$global-radius;
+  }
+
+  .bottom{
+    margin-top:auto;
+  }
+
+  @include phone-content(){
+    max-width:100%;
+  }
+}
+
+/* public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-box($class:null,$component:null,
+$border:null,
+$border-radius:null,
+$justification:flex-start,
+$alignment:center,
+$min-height:18.75em,
+$width:18.75em,
+$padding:.5em,
+$background:null
+){
+
+  .ui-box,ui-box{
+    @if $class != null{
+      &.#{$class}{
+        @include _ui-box($component,$border,$border-radius,$justification,$alignment,$min-height,$width,$padding,$background);
+        @content;
+      }
+    }@else{
+      @include _ui-box($component,$border,$border-radius,$justification,$alignment,$min-height,$width,$padding,$background);
+      @content;
+    }
+  }
+
+}

data/stylesheets/ui/_breadcrumb.scss

@@ -0,0 +1,64 @@
+/* ui-breadcrumb */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-breadcrumb($component: null,
+$font-size: null,
+$padding: null,
+$font-weight: null,
+$link-font-weight: null
+
+) {
+
+  display: inline-block;
+  list-style: none;
+  padding-bottom: 0 !important;
+  & > li, &>breadcrumb-item {
+    float: left;
+    padding: $padding;
+    font-size: $font-size;
+    font-weight: $font-weight;
+    a {
+      @if $component != null{
+        @extend %#{$component}-font !optional;
+      }
+      font-size: $font-size;
+      &:hover, &:focus {
+        @if $component != null{
+          @extend %#{$component}-font-hover !optional;
+        }
+      }
+    }
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-breadcrumb($class: null, $component: null,
+$font-size: 1em,
+$padding: 0 .3em 0 .3em,
+$font-weight: normal,
+$link-font-weight: normal
+
+) {
+
+  .ui-breadcrumb,ui-breadcrumb {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-breadcrumb($component, $font-size, $padding, $font-weight, $link-font-weight);
+        @content;
+      }
+    } @else {
+      @include _ui-breadcrumb($component, $font-size, $padding, $font-weight, $link-font-weight);
+      @content;
+    }
+
+  }
+
+}

data/stylesheets/ui/_button.scss

@@ -0,0 +1,395 @@
+/* ui-button */
+
+/* Variables ---------------------------------------------------------------------------------------------------*/
+$ui-button-radius: $global-radius !default;
+$ui-button-tiny-radius: tiny-radius() !default;
+$ui-button-font-family: inherit !default;
+$ui-button-font-size: 1em !default;
+$ui-button-font-weight: normal !default;
+$ui-button-line-height: $global-button-line-height !default;
+$ui-button-margin: .5em 0 0 0 !default;
+$ui-button-padding: .7em 1em .7em 1em !default;
+$ui-button-font-size: 1em !default;
+$ui-button-icon-padding: 1.5em !default;
+$ui-button-large-padding: .8em 1.15em .8em 1.15em !default;
+$ui-button-large-font-size: 1.15em !default;
+$ui-button-small-padding: .6em .8em .6em .8em !default;
+$ui-button-small-font-size: .9em !default;
+$ui-button-tiny-padding: .5em .7em .5em .7em !default;
+$ui-button-tiny-font-size: .8em !default;
+$ui-button-jumbo-padding: 1.15em 1.5em 1.15em 1.5em !default;
+$ui-button-jumbo-font-size: 1.5em !default;
+$ui-button-transparent-opacity: .8 !default;
+
+/* Private --------------------------------------------------------------------------------------------------------*/
+
+@mixin _button-size($font-size, $padding, $icon-padding) {
+  padding: $padding;
+  font-size: $font-size;
+  &.icon {
+    &.left {
+      float: none !important;
+      padding-right: convert-to-decimal($icon-padding + margin-right($padding));
+      span {
+        font-size: $font-size;
+        margin-right: .5em;
+        margin-left: 0;
+      }
+    }
+    span {
+      font-size: $font-size;
+      margin-left: $icon-padding;
+    }
+  }
+  &.next {
+    padding-right: convert-to-decimal($icon-padding + margin-right($padding));
+    &:after {
+      font-size: $font-size;
+      content: '#{$global-icon-next}';
+      right: icon-position-right($font-size);
+      top: icon-position($padding, $font-size);
+      line-height: component-line-height($font-size, $ui-button-line-height);
+    }
+  }
+  &.down, &[data-ui=dropdown] {
+    padding-right: convert-to-decimal($icon-padding + margin-right($padding));
+    &:after {
+      font-size: $font-size;
+      content: '#{$global-icon-down}';
+      right: icon-position-right($font-size);
+      top: icon-position($padding, $font-size);
+      line-height: component-line-height($font-size, $ui-button-line-height);
+    }
+  }
+  &.up {
+    padding-right: convert-to-decimal($icon-padding + margin-right($padding));
+    &:after {
+      font-size: $font-size;
+      content: '#{$global-icon-up}';
+      right: icon-position-right($font-size);
+      top: icon-position($padding, $font-size);
+      line-height: component-line-height($font-size, $ui-button-line-height);
+    }
+  }
+  &.prev {
+    padding-left: convert-to-decimal($icon-padding + margin-left($padding));
+    &:after {
+      font-size: $font-size;
+      content: '#{$global-icon-prev}';
+      left: icon-position-left($font-size);
+      top: icon-position($padding, $font-size);
+      line-height: component-line-height($font-size, $ui-button-line-height);
+    }
+  }
+}
+
+@mixin _button-dropdown($font-size, $padding, $icon-padding){
+  padding-right: convert-to-decimal($icon-padding + margin-right($padding));
+  &:after {
+    font-family: $global-icon-font-family;
+    font-size: $font-size;
+    content: '#{$global-icon-down}';
+    right: icon-position-right($font-size);
+    top: icon-position($padding, $font-size);
+    line-height: component-line-height($font-size, $ui-button-line-height);
+    position:absolute;
+  }
+}
+
+@mixin _button-base() {
+  @include _button-size($ui-button-font-size, $ui-button-padding, $ui-button-icon-padding);
+  margin: $ui-button-margin;
+  border-radius: $ui-button-radius;
+  font-family: $ui-button-font-family;
+  font-weight: $ui-button-font-weight;
+  text-align: center;
+  line-height: $ui-button-line-height !important;
+  position: relative;
+  cursor: pointer !important;
+  display: inline-block;
+  outline: 0;
+  &.next, &.prev, &.down, &[data-ui=dropdown], &.up {
+    &:after {
+      font-family: $global-icon-font-family;
+      position: absolute;
+    }
+  }
+  ui-dropdown-button{
+    &:after {
+      font-family: $global-icon-font-family;
+      position: absolute;
+    }
+  }
+}
+
+@mixin _button-states($component) {
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-font !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  &:hover {
+    @extend %#{$component}-background-hover !optional;
+    @extend %#{$component}-font-hover !optional;
+    @extend %#{$component}-border-hover !optional;
+    @extend %#{$component}-box-shadow-hover !optional;
+    cursor: pointer;
+  }
+  &:focus {
+    @include tab-focus();
+  }
+  &:active {
+    @extend %#{$component}-background-active !optional;
+    @extend %#{$component}-font-active !optional;
+    @extend %#{$component}-border-active !optional;
+    @extend %#{$component}-box-shadow-active !optional;
+    outline: 0;
+
+  }
+  &.active {
+    @extend %#{$component}-background-active !optional;
+    @extend %#{$component}-font-active !optional;
+    @extend %#{$component}-border-active !optional;
+    @extend %#{$component}-box-shadow-active !optional;
+    cursor: default !important;
+    outline: 0;
+
+  }
+}
+
+@mixin _button-sizes() {
+  &.jumbo {
+    @include _button-size($ui-button-jumbo-font-size, $ui-button-jumbo-padding, $ui-button-icon-padding);
+  }
+  &.large {
+    @include _button-size($ui-button-large-font-size, $ui-button-large-padding, $ui-button-icon-padding);
+  }
+  &.small {
+    @include _button-size($ui-button-small-font-size, $ui-button-small-padding, $ui-button-icon-padding);
+  }
+  &.tiny {
+    @include _button-size($ui-button-tiny-font-size, $ui-button-tiny-padding, $ui-button-icon-padding);
+  }
+  &.expand {
+    width: 100%;
+    text-align: center;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  &.radius {
+    @include border-radius($ui-button-radius);
+  }
+  &.round {
+    @include border-radius(1000px);
+  }
+  &.transparent {
+    opacity: $ui-button-transparent-opacity;
+
+  }
+  &.left-align {
+    text-align: left;
+    text-indent: .75em;
+  }
+}
+
+@mixin _button-disabled-state($component) {
+  &.disabled, &[disabled] {
+    cursor: default !important;
+    @extend %#{$component}-disabled !optional;
+    &:hover {
+      @extend %#{$component}-disabled !optional;
+    }
+  }
+}
+
+@mixin _ui-button-group($component: default, $active-component: null) {
+  $left:left;
+  $right:right;
+  $_active-component: null;
+
+  list-style: none;
+  padding: 0;
+  margin: 0 0 .75em;
+  @include display-flex();
+  & > li, &>button-item {
+    padding: 0;
+    margin: 0 0 0 -1px;
+    .ui-button,ui-button {
+      @include border-radius(0px);
+      @include phone-content() {
+        font-size: .8em;
+      }
+    }
+    &:first-child {
+      margin-left: 0;
+      .ui-button, .ui-button.radius,ui-button,ui-button.radius {
+        @include border-corner-radius(top, $left, $ui-button-radius);
+        @include border-corner-radius(bottom, $left, $ui-button-radius);
+      }
+
+      .ui-button.round,ui-button.round {
+        @include border-corner-radius(top, $left, 1000px);
+        @include border-corner-radius(bottom, $left, 1000px);
+      }
+    }
+    &:last-child {
+      .ui-button, .ui-button.radius,ui-button,ui-button.radius {
+        @include border-corner-radius(top, $right, $ui-button-radius);
+        @include border-corner-radius(bottom, $right, $ui-button-radius);
+      }
+      .ui-button.round,ui-button.round {
+        @include border-corner-radius(top, $right, 1000px);
+        @include border-corner-radius(bottom, $right, 1000px);
+      }
+    }
+  }
+
+  @if $active-component != null {
+    $_active-component: $active-component;
+  } @else {
+    $_active-component: $component;
+  }
+
+  .ui-button {
+    &.active {
+      @extend %#{$_active-component}-background-active !optional;
+      @extend %#{$_active-component}-font-active !optional;
+      @extend %#{$_active-component}-border-active !optional;
+      @extend %#{$_active-component}-box-shadow-active !optional;
+      cursor: default;
+    }
+  }
+
+  &.large {
+    span, [class*='icon-'] {
+      font-size: 2em;
+    }
+  }
+  &.flex {
+    & > li, &>button-item {
+      @include flex(1 1 0);
+      .ui-button,ui-button {
+        width: 100%;
+        padding-left: 1px;
+        padding-right: 1px;
+      }
+    }
+
+  }
+}
+
+/* Public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-button($component) {
+  .ui-button,ui-button {
+    @if($component == default){
+      @include _button-base();
+      @if $include-component-animation == true{
+        @include transition($component-animation);
+      }
+      @include _button-states($component);
+      @include _button-sizes();
+      @include _button-disabled-state($component);
+
+      @content
+
+    } @else {
+      &.#{$component} {
+        @include _button-states($component);
+        @include _button-disabled-state($component);
+
+        @content
+      }
+    }
+
+  }
+
+
+
+}
+
+@mixin ui-button-group($class: null, $component: default, $active-component: null) {
+
+  .ui-button-group,ui-button-group {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-button-group($component, $active-component);
+        @content;
+      }
+    } @else {
+      @include _ui-button-group($component, $active-component);
+      @content;
+    }
+  }
+
+}
+
+@mixin ui-button-bar($touch-font-size:.8em) {
+  .ui-button-bar,ui-button-bar {
+    @include display-flex();
+    @include justify-content(space-between);
+
+    @include grid-contain-content() {
+      & > .ui-button-group,&> ui-button-group {
+        margin-right:1em;
+        &:last-child{
+          margin-right:0;
+        }
+        @include flex(1 1 0);
+        & > li, &>button-item {
+          @include flex(1 1 0);
+          .ui-button,ui-button {
+            width: 100%;
+            padding-left: 1px;
+            padding-right: 1px;
+            font-size:$touch-font-size;
+          }
+        }
+      }
+    }
+
+    @include small-tablet-down-content(){
+      @include flex-direction(column);
+      @include justify-content(flex-start);
+      &> .ui-button-group,&>ui-button-group{
+        margin-right:0;
+      }
+    }
+  }
+
+}
+/* set a smaller font-size for ui-dropdown if a button dropdown */
+@mixin ui-dropdown-button{
+  [data-ui=dropdown],ui-dropdown-button{
+    position:relative;
+    .ui-dropdown,ui-dropdown{
+      font-size:14px;
+    }
+  }
+  ui-dropdown-button.ui-button{
+    @include _button-dropdown($ui-button-font-size, $ui-button-padding, $ui-button-icon-padding);
+    &.jumbo {
+      @include _button-dropdown($ui-button-jumbo-font-size, $ui-button-jumbo-padding, $ui-button-icon-padding);
+    }
+    &.large {
+      @include _button-dropdown($ui-button-large-font-size, $ui-button-large-padding, $ui-button-icon-padding);
+    }
+    &.small {
+      @include _button-dropdown($ui-button-small-font-size, $ui-button-small-padding, $ui-button-icon-padding);
+    }
+    &.tiny {
+      @include _button-dropdown($ui-button-tiny-font-size, $ui-button-tiny-padding, $ui-button-icon-padding);
+    }
+  }
+}
+
+/* Shortcut: Create Framework Base Buttons --------------------------------------------------------------------------- */
+@mixin ui-buttons() {
+  @include ui-button(default);
+  @include ui-button(primary);
+  @include ui-button(inverse);
+  @include ui-button(secondary);
+  @include ui-dropdown-button();
+}
+
+
+