ellipsis-compass 1.0.1

data/stylesheets/ui/_datepicker.scss

@@ -0,0 +1,218 @@
+/* ui-datepicker */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-datepicker($component:null,$button-component:null,$today-component:null,
+$border-radius:null,
+$button-border-radius:null,
+$button-font-weight:null,
+$button-padding:null,
+$z-index:null
+){
+
+  z-index: $z-index;
+  display: block;
+  position: relative;
+  min-width:15em;
+  padding: .5em;
+  @extend %#{$component}-font !optional;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-box-shadow !optional;
+  @extend %#{$component}-border !optional;
+  border-radius:$border-radius;
+
+  button{
+    margin-top:0px !important;
+  }
+
+  &.contained{
+    width:100%;
+    position:absolute;
+    top:100%;
+    left:0;
+
+  }
+  &.is-hidden{
+    display:none;
+  }
+  &.is-bound{
+    position: absolute;
+
+  }
+
+  .title {
+    position: relative;
+    text-align: center;
+
+  }
+
+  abbr{
+    font-size:1.25em;
+    font-weight:$button-font-weight;
+    @extend %#{$component}-icon !optional;
+    border:0;
+  }
+
+  .label {
+    display: inline-block;
+    *display: inline;
+    position: relative;
+    z-index: $z-index;
+    overflow: hidden;
+    margin: 0;
+    padding: .3em .1875em;
+    font-weight: $button-font-weight;
+    font-size:1.25em;
+    @extend %#{$component}-font !optional;
+  }
+  .title select {
+    cursor: pointer;
+    position: absolute;
+    z-index: $z-index -1;
+    margin: 0;
+    left: 0;
+    top: .3em;
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
+
+  .prev,
+  .next {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    border: 0;
+    padding: 0;
+    width: 1.25em;
+    height: 1.875em;
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    white-space: nowrap;
+    text-indent: 100%;
+    overflow: hidden;
+    opacity: .5;
+    *position: absolute;
+    *top: 0;
+  }
+
+  .prev:hover,
+  .next:hover {
+    opacity: 1;
+  }
+
+  .prev,
+  .is-rtl .next {
+    float: left;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+    *left: 0;
+
+  }
+
+  .next,
+  .is-rtl .prev {
+    float: right;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+    *right: 0;
+
+  }
+
+  .prev.is-disabled,
+  .next.is-disabled {
+    cursor: default;
+    opacity: .2;
+  }
+
+  .select {
+    display: inline-block;
+    *display: inline;
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 0;
+  }
+
+  .table th,
+  .table td {
+    width: 14.285714285714286%;
+
+  }
+
+  .table th {
+    font-size: .75em;
+    line-height: 1.5;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .button {
+    cursor: pointer;
+    display: block;
+    outline: none;
+    border: 0;
+    margin: 0;
+    width: 100%;
+    padding: $button-padding;
+    @extend %#{$button-component}-font !optional;
+    font-size: .75em;
+    line-height: 1;
+    @extend %#{$button-component}-background !optional;
+    text-align: center;
+  }
+
+  .is-today .button {
+    @extend %#{$today-component}-font !optional;
+    @extend %#{$today-component}-background !optional;
+    font-weight: $button-font-weight;
+    border-radius: $button-border-radius;
+  }
+
+  .is-selected .button {
+    @extend %#{$button-component}-font-active !optional;
+    font-weight: $button-font-weight;
+    @extend %#{$button-component}-background-active !optional;
+    border-radius: $button-border-radius;
+  }
+
+  .is-disabled .button {
+    pointer-events: none;
+    cursor: default;
+    opacity:.2;
+
+  }
+
+  .button:hover {
+    @extend %#{$button-component}-font-hover !optional;
+    @extend %#{$button-component}-background-hover !optional;
+    border-radius: $button-border-radius;
+  }
+}
+
+/* Public -----------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-datepicker($class:null, $component:css-datepicker,$button-component:css-datepicker-button,$today-component:css-datepicker-today-button,
+$border-radius:$global-radius,
+$button-border-radius:3px,
+$button-font-weight:bold,
+$button-padding:.5em .75em,
+$z-index:$global-z-index
+){
+  .ui-datepicker{
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-datepicker($component,$button-component,$today-component,$border-radius,$button-border-radius,
+          $button-font-weight,$button-padding,$z-index);
+        @content;
+      }
+    } @else {
+      @include _ui-datepicker($component,$button-component,$today-component,$border-radius,$button-border-radius,
+        $button-font-weight,$button-padding,$z-index);
+      @content;
+    }
+  }
+}

data/stylesheets/ui/_drawer.scss

@@ -0,0 +1,96 @@
+/* ui-drawer */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+@mixin _ui-drawer(
+$width:null,
+$header-height:null,
+$header-position:null,
+$z-index:null,
+$background:null
+){
+
+  min-height:100%;
+  height:100%;
+  overflow-x:hidden;
+  position:relative;
+  display:none;
+  width:$width;
+  background:$background;
+
+  &>header{
+    position:$header-position;
+    @if $header-position != relative{
+      top:0;
+      left:0;
+    }
+    z-index:$z-index;
+    width:$width;
+    height:$header-height;
+  }
+
+  @media #{$breakpoint-touch}{
+    background:#fff;
+  }
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+@mixin touch-ui-drawer($class:null,$component:css-touch-drawer-black,$header-component:css-touch-drawer-header-black,
+$width:265px,
+$header-height:60px,
+$search-margin:12px 0 1px 7px,
+$search-width:80%
+){
+
+  @media #{$breakpoint-desktop}{
+    .touch-ui-drawer,touch-ui-drawer{
+      display:none;
+    }
+  }
+  @media #{$breakpoint-touch}{
+    .touch-ui-drawer,touch-ui-drawer{
+      @if $class != null{
+        &.#{$class} {
+          @include _touch-ui-drawer($component,$header-component,$width,$header-height,$search-margin,$search-width);
+
+        }
+      }@else{
+        @include _touch-ui-drawer($component,$header-component,$width,$header-height,$search-margin,$search-width);
+
+      }
+
+    }
+  }
+
+  .touch-ui-drawer,touch-ui-drawer{
+    @if $class != null{
+      &.#{$class} {
+        @content;
+      }
+    }@else{
+      @content;
+    }
+  }
+
+}
+
+@mixin ui-drawer($class:null,
+$width:800px,
+$header-height:auto,
+$header-position:fixed,
+$z-index:$global-z-index + 99,
+$background:#f8f9fa
+){
+
+  .ui-drawer,ui-drawer{
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-drawer($width,$header-height,$header-position,$z-index,$background);
+        @content;
+      }
+    }@else{
+      @include _ui-drawer($width,$header-height,$header-position,$z-index,$background);
+      @content;
+    }
+  }
+
+}

data/stylesheets/ui/_dropdown.scss

@@ -0,0 +1,394 @@
+/* ui-dropdown */
+
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-dropdown($component:null, $divider: null,
+$width:null,
+$min-width:null,
+$top:null,
+$margin: null,
+$padding:null,
+$float: null,
+$z-index: null,
+$font-size: null,
+$border: null,
+$li-padding: null,
+$li-divider-padding: null,
+$li-divider-border: null,
+$column-count: null,
+$column-gap: null,
+$column-width: null,
+$column-padding: null,
+$height: null,
+$border-radius: null,
+$span-icon-margin:null
+) {
+
+  left: 0;
+  @if $width != null {
+    width:$width;
+  }
+
+  min-width:$min-width;
+  list-style: none;
+  margin: $margin;
+  padding:$padding;
+  position: absolute;
+  top: $top;
+  float: $float;
+  z-index: $z-index;
+  border-radius: $border-radius;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-box-shadow !optional;
+  @extend %#{$component}-border !optional;
+  display: none;
+  font-size:$font-size;
+
+  &>li,&>menu-item {
+    text-align: left;
+    display:list-item;
+    &: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;
+    }
+    &:hover, &:focus {
+      @extend %#{$component}-background-hover !optional;
+      @extend %#{$component}-font-hover !optional;
+      &>a{
+        @extend %#{$component}-font-hover !optional;
+      }
+    }
+    &.active{
+      @extend %#{$component}-background-hover !optional;
+      @extend %#{$component}-font-hover !optional;
+    }
+    &:focus{
+      display:inherit;
+      @include tab-focus();
+    }
+    &.divider {
+      width: 100%;
+      height: 0;
+      border: 0;
+      border-bottom: $li-divider-border;
+      padding: $li-divider-padding;
+      @extend %#{$divider}-border !optional;
+    }
+    &.disabled, &[disabled] {
+      cursor: default !important;
+      @extend %#{$component}-disabled !optional;
+      &:hover {
+        @extend %#{$component}-disabled !optional;
+      }
+      &>a{
+        @extend %#{$component}-disabled !optional;
+      }
+    }
+    &>a {
+      text-align: left;
+      font-size: 1em;
+      @extend %#{$component}-font !optional;
+      white-space: nowrap;
+      display:block;
+      padding: $li-padding;
+      &:hover, &:focus {
+        @extend %#{$component}-font-hover !optional;
+      }
+      &>span[class*='icon-']{
+        margin:$span-icon-margin;
+      }
+    }
+  }
+  &>menu-divider {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: $li-divider-border;
+    padding: $li-divider-padding;
+    @extend %#{$divider}-border !optional;
+    display:list-item;
+  }
+  &.show {
+    display: block;
+  }
+  &.visible{
+    visibility: visible !important;
+  }
+  &.multi-column,&.mega {
+    @include column-count($column-count);
+    @include column-gap($column-gap);
+    min-width: $column-width * $column-count;
+    height: $height;
+    width: auto;
+    &>li {
+      background: none;
+      padding: $column-padding;
+      &:hover, &:focus {
+        background: none;
+      }
+      &.divider {
+        border: 0;
+        border-bottom: $li-divider-border;
+        @extend %#{$divider}-border !optional;
+      }
+    }
+  }
+
+}
+
+@mixin _ui-mega-dropdown($component:null, $divider: null,
+$width:null,
+$min-width:null,
+$top:null,
+$margin: null,
+$padding:null,
+$float: null,
+$z-index: null,
+$font-size: null,
+$border: null,
+$li-padding: null,
+$li-divider-padding: null,
+$li-divider-border: null,
+$column-count: null,
+$column-gap: null,
+$column-width: null,
+$column-padding: null,
+$height: null,
+$border-radius: null,
+$span-icon-margin:null
+) {
+
+  left: 0;
+  @if $width != null {
+    width:$width;
+  }
+  list-style: none;
+  margin: $margin;
+  padding:$padding;
+  position: absolute;
+  top: $top;
+  float: $float;
+  z-index: $z-index;
+  border-radius: $border-radius;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-box-shadow !optional;
+  @extend %#{$component}-border !optional;
+  display: none;
+  font-size:$font-size;
+  @include column-count($column-count);
+  @include column-gap($column-gap);
+  min-width: $column-width * $column-count;
+  height: $height;
+  width: auto;
+  &>menu-item {
+    background: none;
+    padding: $column-padding;
+    display:block;
+    &:hover, &:focus {
+      background: none;
+    }
+    &.divider {
+      border: 0;
+      border-bottom: $li-divider-border;
+      @extend %#{$divider}-border !optional;
+    }
+    &>a {
+      text-align: left;
+      font-size: 1em;
+      @extend %#{$component}-font !optional;
+      white-space: nowrap;
+      display:block;
+      padding: $li-padding;
+      &:hover, &:focus {
+        @extend %#{$component}-font-hover !optional;
+      }
+      &>span[class*='icon-']{
+        margin:$span-icon-margin;
+      }
+    }
+    &.active{
+      @extend %#{$component}-background-hover !optional;
+      @extend %#{$component}-font-hover !optional;
+    }
+    &:focus{
+      display:inherit;
+      @include tab-focus();
+    }
+    &.disabled, &[disabled] {
+      cursor: default !important;
+      @extend %#{$component}-disabled !optional;
+      &:hover {
+        @extend %#{$component}-disabled !optional;
+      }
+      &>a{
+        @extend %#{$component}-disabled !optional;
+      }
+    }
+  }
+
+  &>menu-divider {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: $li-divider-border;
+    padding: $li-divider-padding;
+    @extend %#{$divider}-border !optional;
+  }
+  &.show {
+    display: block;
+  }
+  &.visible{
+    visibility: visible !important;
+  }
+}
+
+@mixin _ui-dropdown-extend(
+$column-count: null,
+$column-gap: null,
+$column-width: null,
+$column-padding: null,
+$height:null
+
+){
+
+  @include column-count($column-count);
+  @include column-gap($column-gap);
+  min-width: $column-width * $column-count;
+  height: $height;
+  &>li,&>menu-item{
+    padding: $column-padding;
+  }
+
+}
+
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-dropdown($class: null, $component: css-dropdown, $divider: css-divider,
+$width:null,
+$min-width:12em,
+$top:100%,
+$margin:0,
+$padding:0 0 .5em 0,
+$float:left,
+$z-index: $global-z-index + 9999,
+$font-size: 1em,
+$border: 1px solid,
+$li-padding: .5em 1em,
+$li-divider-padding: 0,
+$li-divider-border: 1px solid,
+$column-count: 2,
+$column-gap: 1.25em,
+$column-width: 12.5em,
+$column-padding: .3125em .3125em .3125em 1.875em,
+$height: 12.5em,
+$border-radius: $global-radius,
+$span-icon-margin:0 .5em 0 0
+) {
+
+  .ui-dropdown,ui-dropdown {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $li-padding,
+          $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+          $height, $border-radius, $span-icon-margin
+        );
+        @content;
+      }
+    } @else {
+      @include _ui-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $li-padding,
+        $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+        $height, $border-radius, $span-icon-margin
+      );
+      @content;
+    }
+  }
+  @-moz-document url-prefix() {
+    .ui-dropdown,ui-dropdown{
+      &>li,&>menu-item{
+        padding: $li-padding;
+        &>a{
+          min-width:$min-width;
+          padding:0 !important;
+        }
+      }
+    }
+  }
+  ui-mega-dropdown {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding, $float, $z-index, $font-size, $border, $li-padding,
+                $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+                $height, $border-radius, $span-icon-margin
+        );
+        @content;
+      }
+    } @else {
+      @include _ui-mega-dropdown($component, $divider, $width,$min-width, $top, $margin,$padding,$float, $z-index, $font-size, $border, $li-padding,
+              $li-divider-padding, $li-divider-border, $column-count, $column-gap, $column-width, $column-padding,
+              $height, $border-radius, $span-icon-margin
+      );
+      @content;
+    }
+  }
+}
+
+@mixin ui-dropdown-extend($class:null,$sub-class:null,
+$column-count:2,
+$column-gap:20px,
+$column-width:200px,
+$column-padding:5px 5px 5px 10px,
+$height:200px
+
+){
+
+  .ui-dropdown,ui-dropdown{
+    @if $class != null{
+      &.#{$class}{
+        @if $sub-class != null{
+          &.multi-column,&.mega{
+            &.#{$sub-class}{
+              @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
+            }
+          }
+        }
+      }
+
+    }@else{
+      @if $sub-class != null{
+        &.multi-column,&.mega{
+          &.#{$sub-class}{
+            @include _ui-dropdown-extend($column-count,$column-gap,$column-width,$column-padding,$height);
+          }
+        }
+      }
+    }
+  }
+
+}
+
+@mixin touch-ui-dropdown($class:null,$component:css-touch-dropdown,
+$li-padding:20px 0 20px 20px,
+$link-font-size:14px,
+$li-border-bottom:1px dashed
+
+){
+
+  @media #{$breakpoint-touch}{
+    .touch-ui-dropdown,touch-ui-dropdown{
+      @if $class != null{
+        &.#{$class} {
+          @include _touch-ui-dropdown($component,$li-padding,$link-font-size,$li-border-bottom);
+        }
+      }@else{
+        @include _touch-ui-dropdown($component,$li-padding,$link-font-size,$li-border-bottom);
+      }
+    }
+  }
+
+}