ellipsis-compass 1.0.1

data/stylesheets/ui/_toggle.scss

@@ -0,0 +1,49 @@
+/* ui-toggle */
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+@mixin ui-toggle($class:null,$component:css-toggle-black,
+$height: 59px,
+$width: 60px,
+$border-right:1px solid,
+$icon-size:16px,
+$icon-left:10px,
+$icon-top:16px
+
+){
+  .ui-toggle,ui-toggle{
+    display:none;
+  }
+  @media #{$breakpoint-touch}{
+
+    .ui-toggle,ui-toggle{
+      display:inherit;
+      @if $class != null{
+        &.#{$class} {
+          @include _touch-ui-toggle($component,
+            $height,
+            $width,
+            $border-right,
+            $icon-size,
+            $icon-left,
+            $icon-top
+          );
+          @content;
+        }
+      }@else{
+        @include _touch-ui-toggle($component,
+          $height,
+          $width,
+          $border-right,
+          $icon-size,
+          $icon-left,
+          $icon-top
+        );
+        @content;
+      }
+
+    }
+  }
+
+}
+
+

data/stylesheets/ui/_tooltip.scss

@@ -0,0 +1,57 @@
+/* ui-tooltip */
+
+/* Private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-tooltip($component: null,
+$border-radius: null,
+$padding:null,
+$font-size:null,
+$z-index:null,
+$tip-color:null
+) {
+  position:absolute;
+  font-size:$font-size;
+  padding:$padding;
+  border-radius:$border-radius;
+  z-index:$z-index;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-font !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  canvas{
+    position:absolute;
+    left:0px;
+    color:$tip-color;
+  }
+  display:none;
+
+}
+
+
+/* Public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-tooltip($class: null, $component:primary,
+$border-radius: $global-radius,
+$padding:.2em .5em .2em .5em,
+$font-size:.8em,
+$z-index:9999,
+$tip-color:$primary-color
+) {
+
+  .data-tooltip {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-tooltip($component, $border-radius, $padding,$font-size,$z-index,$tip-color);
+        @content;
+      }
+    } @else {
+      @include _ui-tooltip($component,$border-radius,$padding,$font-size,$z-index,$tip-color);
+      @content;
+    }
+
+  }
+
+  .ui-tooltip{
+    cursor:pointer;
+  }
+}

data/stylesheets/ui/_topbar.scss

@@ -0,0 +1,210 @@
+/* ui-topbar */
+
+/* private -----------------------------------------------------------------------------------------------------------*/
+
+@mixin _ui-topbar($component: null,
+$position: null,
+$padding: null,
+$height: null,
+$z-index: null,
+$brand-font-size: null,
+$line-height: null,
+$justification:null,
+$alignment:null,
+$brand-justification:null,
+$brand-alignment:null,
+$brand-min-width:null,
+$brand-padding:null,
+$section-justification:null,
+$menu-justification:null) {
+
+  $_ui-topbar-contained-to-grid: $grid-width - $grid-column-gutter;
+
+  position: $position;
+  width: 100%;
+  padding: $padding;
+  @include invoke-component-default-state($component);
+  border-right: 0;
+  border-left: 0;
+  height: $height;
+  @include flexbox($justification: $justification, $alignment: $alignment);
+
+  @if $position == absolute or $position == fixed {
+    top: 0;
+    left: 0;
+    z-index: $z-index;
+
+  }
+  @if $position==relative{
+    max-height:$height;
+  }
+  .brand,ui-brand {
+    cursor:pointer;
+    padding: $brand-padding;
+    height:100%;
+    min-width:$brand-min-width;
+    a{
+      font-size:1em;
+      @extend %#{$component}-font !optional;
+      //display:block;
+      @include flexbox($justification: $brand-justification, $alignment: $brand-alignment);
+      &:hover{
+        @extend %#{$component}-font-hover !optional;
+      }
+
+    }
+    @include flexbox($justification: $brand-justification, $alignment: $brand-alignment);
+    @extend %#{$component}-font !optional;
+    font-size:$brand-font-size;
+    &.left{
+      position:absolute;
+      left:0;
+      top:0;
+    }
+  }
+
+  * {
+    list-style: none;
+    &.right,&.flex-end {
+      margin-left:auto;
+      height:100%;
+      @include flexbox($justification: $menu-justification, $alignment: $alignment);
+    }
+    &.left,&.flex-start{
+      margin-right:auto;
+      height:100%;
+      @include flexbox($justification: $menu-justification, $alignment:$alignment);
+    }
+  }
+  & > section {
+    height: $height;
+    width: $_ui-topbar-contained-to-grid;
+    position:relative;
+    background:none;
+    @include flexbox($justification: $section-justification, $alignment: $alignment);
+    &.center {
+      margin-left:auto;
+      margin-right:auto;
+      align-self:center;
+      .ui-menu,ui-menu {
+        @include flexbox($justification: $menu-justification, $alignment: $alignment);
+        &.left,&.flex-start{
+          margin-right:auto;
+        }
+      }
+    }
+
+  }
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: $z-index;
+
+  }
+  //when the screen width matches grid width, we must further subtract gutter width from the max-width and use gutter width as the margin
+  @include grid-contain-content() {
+    & > section {
+      left: 0;
+      margin: 0;
+      max-width: $grid-width - $grid-column-gutter - $grid-column-gutter;
+    }
+  }
+
+}
+
+/* public ------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-topbar($class: null, $component: css-bar, $touch-component: css-touch-black,
+$position: fixed,
+$padding: 0,
+$height: 50px,
+$z-index: $global-z-index + 999,
+$brand-font-size: 1.5em,
+$line-height: .5,
+$justification:center,
+$alignment:center,
+$brand-justification:flex-start,
+$brand-alignment:center,
+$brand-min-width:6em,
+$brand-padding:0 0 0 1em,
+$section-justification:flex-start,
+$menu-justification:center,
+$touch-position: fixed,
+$touch-height: 60px,
+$touch-z-index: $global-z-index + 999,
+$touch-brand-font-size:1.75em
+) {
+
+
+
+  .ui-topbar,ui-topbar {
+    @if $class != null {
+      &.#{$class} {
+        @include desktop-content() {
+          @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
+                  $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$section-justification,$menu-justification);
+        }
+        @content
+      }
+    } @else {
+      @include desktop-content() {
+        @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
+                $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$section-justification,$menu-justification);
+      }
+      @content;
+    }
+  }
+
+  /* if fixed position, margin of next element =topbar height + 1em */
+  @if $position != relative {
+    @if $class != null {
+      .ui-topbar.#{$class} + *,ui-topbar.#{$class} + * {
+        margin-top: $height;
+      }
+    } @else {
+      .ui-topbar + *,ui-topbar + * {
+        margin-top: $height;
+      }
+    }
+  }
+
+  @media #{$breakpoint-touch}{
+    .ui-topbar,ui-topbar{
+      @if $class != null {
+        &.#{$class} {
+          @include _touch-ui-topbar($touch-component, $touch-position, $touch-height, $touch-z-index,$touch-brand-font-size);
+        }
+      } @else {
+        @include _touch-ui-topbar($touch-component, $touch-position, $touch-height, $touch-z-index,$touch-brand-font-size);
+      }
+      /* for touch, if fixed position, padding of next element =topbar height */
+      @if $touch-position != relative {
+        @if $class != null {
+          .ui-topbar.#{$class} + *, ui-topbar.#{$class} + *{
+            padding-top: $touch-height;
+          }
+        } @else {
+          .ui-topbar + *, ui-topbar + * {
+            padding-top: $touch-height;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ui-topbar-brand() {
+  .brand {
+    @content;
+  }
+}
+
+@mixin touch-ui-topbar-brand() {
+  @include touch-content() {
+    .brand {
+      @content;
+    }
+  }
+
+}

data/stylesheets/ui/_tree.scss

@@ -0,0 +1,3 @@
+/* ui-tree */
+
+// TODO

data/stylesheets/ui/_window.scss

@@ -0,0 +1,205 @@
+/* ui-window */
+
+/* Private ------------------------------------------------------------------------------------------------------------*/
+
+
+@mixin _ui-window($component:null,$header-component:null,$close-component:null,$footer-component:null,
+$border-radius:null,
+$z-index:null,
+$width:null,
+$height:null,
+$top:null
+
+) {
+
+
+  $_window-margin-left:$width/2;
+
+  width: $width;
+  height: $height;
+  border-radius: $border-radius;
+  @extend %#{$component}-background !optional;
+  @extend %#{$component}-border !optional;
+  @extend %#{$component}-box-shadow !optional;
+  border-bottom:0 !important;
+  border-left:0 !important;
+  border-right:0 !important;
+  background-clip: padding-box;
+  position: fixed;
+  top: $top;
+  left: 50%;
+  margin-left: -#{$_window-margin-left};
+  z-index: $z-index;
+  outline: none;
+  display: none;
+  overflow: hidden;
+  &.no-shadow {
+    box-shadow:none;
+  }
+  header {
+    width: 100%;
+    height: 35px;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    @extend %#{$header-component}-background !optional;
+    @extend %#{$header-component}-border !optional;
+    border-top:0 !important;
+    border-left:0 !important;
+    border-right:0 !important;
+    margin: 0;
+    position: relative;
+
+    h3 {
+      font-size: 14px;
+      text-align: center;
+      margin: 0px;
+      padding-top: 10px;
+      @extend %#{$header-component}-font !optional;
+
+    }
+    .close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      @extend %#{$close-component}-box-shadow !optional;
+      @extend %#{$close-component}-font !optional;
+      @extend %#{$close-component}-border !optional;
+      border-top:0 !important;
+      border-bottom:0 !important;
+      border-right:0 !important;
+      border-top-right-radius: $border-radius;
+      width: 35px;
+      height: 35px;
+      font-size: 1.1rem;
+      padding: 8px 11px;
+      &:hover {
+        @include single-transition(0.15s, background, linear);
+        @include single-transition(0.15s, color, linear);
+        @extend %#{$close-component}-background-hover !optional;
+        cursor: pointer;
+        @extend %#{$close-component}-font-hover !optional;
+      }
+    }
+  }
+  section {
+    position: relative;
+    overflow-y: auto;
+    padding: 15px;
+    width: 100%;
+    height: 90%;
+    padding-bottom: 80px;
+    @extend %#{$component}-background !optional;
+    @extend %#{$component}-font !optional;
+    h2,h3,h4,h5{
+      @extend %#{$component}-font !optional;
+    }
+    h5{
+      font-weight:bold;
+    }
+
+  }
+  footer {
+    padding: 14px 15px 15px;
+    margin-bottom: 0;
+    text-align: right;
+    @extend %#{$footer-component}-background !optional;
+    @extend %#{$footer-component}-border !optional;
+    @extend %#{$footer-component}-box-shadow !optional;
+    border-bottom:0 !important;
+    border-left: 0 !important;
+    border-right:0 !important;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 40px;
+    .ui-button + .ui-button {
+      margin-left: 5px;
+      margin-bottom: 0;
+
+    }
+  }
+
+
+
+
+}
+
+/* Public -------------------------------------------------------------------------------------------------------------*/
+
+@mixin ui-window($class: null,$component:css-window,$header-component:css-window-header,$close-component:css-window-close,$footer-component:css-window-footer,
+$border-radius:$global-radius,
+$z-index:$global-z-index + 99999999,
+$width:560px ,
+$height:520px,
+$top:100px
+
+) {
+
+  .ui-window,ui-window {
+    @if $class != null{
+      &.#{$class} {
+        @include _ui-window($component,$header-component,$close-component,$footer-component,
+        $border-radius,$z-index,$width,$height,$top);
+
+        @content;
+
+      }
+    } @else {
+      @include _ui-window($component,$header-component,$close-component,$footer-component,
+        $border-radius,$z-index,$width,$height,$top);
+
+      @content;
+    }
+
+  }
+  @media #{$breakpoint-phone}{
+    .ui-window,ui-window {
+      width: 300px;
+      height: 380px;
+      top: 5px;
+      left: 10px;
+      margin-left: 0;
+      header {
+        width: 100%;
+        height: 30px;
+        margin: 0;
+        position: relative;
+
+        h3 {
+          font-size: 12px;
+          text-align: center;
+          margin: 0px;
+          padding-top: 2px;
+        }
+        .close {
+          font-size: 1rem;
+          padding: 5px 8px;
+
+        }
+      }
+      section {
+        padding: 10px;
+        height: 70%;
+        padding-bottom: 30px;
+
+      }
+      footer {
+        padding: 6px 9px 9px;
+        margin-bottom: 0;
+        text-align: right;
+        min-height: 20px;
+        .ui-button {
+          padding: $ui-button-tiny-padding;
+        }
+        .ui-button + .ui-button {
+          margin-left: 5px;
+          margin-bottom: 0;
+          padding: $ui-button-tiny-padding;
+        }
+      }
+    }
+  }
+}