tao_ui 0.3.4 → 1.0.0.beta.1

data/lib/assets/stylesheets/tao/ui/shared/_tables.scss

@@ -1,38 +0,0 @@
-table.table {
-  width: 100%;
-  max-width: 100%;
-  border-collapse: collapse;
-
-  th {
-    border-top: 1px solid $table-line-color;
-    border-bottom: 1px solid $table-line-color;
-    padding: $table-th-padding;
-    font-size: $font-size-xs;
-    font-weight: normal;
-    line-height: 1.125;
-    color: $lighter-grey-color;
-    text-align: left;
-  }
-
-  td {
-    border-bottom: 1px solid $table-line-color;
-    padding: $table-td-padding;
-    line-height: 1.125;
-    text-align: left;
-  }
-
-  th.align-left,
-  td.align-left {
-    text-align: left;
-  }
-
-  th.align-right,
-  td.align-right {
-    text-align: right;
-  }
-
-  th.align-center,
-  td.align-center {
-    text-align: center;
-  }
-}

data/lib/assets/stylesheets/tao/ui/shared/mixins/_base.scss

@@ -1,6 +0,0 @@
-
-@mixin truncate-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

data/lib/assets/stylesheets/tao/ui/shared/mixins/_buttons.scss

@@ -1,40 +0,0 @@
-
-@mixin button-colors($colors) {
-  $normal-colors: map-get($colors, 'normal');
-  background: map-get($normal-colors, 'bg');
-  border: 1px solid map-get($normal-colors, 'border');
-  color: map-get($normal-colors, 'text');
-  fill: map-get($normal-colors, 'text');
-
-  @if not $mobile {
-    &:focus, &.focus {
-      box-shadow: 0px 0px 0 2px rgba($border-color, 0.5);
-    }
-
-    &:hover {
-      $hover-colors: map-get($colors, 'hover');
-      background: map-get($hover-colors, 'bg');
-      border: 1px solid map-get($hover-colors, 'border');
-      color: map-get($hover-colors, 'text');
-      fill: map-get($hover-colors, 'text');
-    }
-  }
-
-  &:active {
-    $active-colors: map-get($colors, 'active');
-    background: map-get($active-colors, 'bg');
-    border: 1px solid map-get($active-colors, 'border');
-    color: map-get($active-colors, 'text');
-    fill: map-get($active-colors, 'text');
-  }
-
-  &.disabled,
-  &[disabled] {
-    $disable-colors: map-get($colors, 'disable');
-    background: map-get($disable-colors, 'bg');
-    border: 1px solid map-get($disable-colors, 'border');
-    color: map-get($disable-colors, 'text');
-    fill: map-get($disable-colors, 'text');
-    box-shadow: none;
-  }
-}

data/lib/assets/stylesheets/tao/ui/shared/variables/_base.scss

@@ -1,49 +0,0 @@
-
-$ui-color: #55BB33 !default;
-
-$white-color: #ffffff !default;
-$grey-color: #4a4a4a !default;
-$black-color: #000000 !default;
-$red-color: #ff7755 !default;
-$orange-color: #ffaa00 !default;
-$green-color: #55bb33 !default;
-$blue-color: #22bbff !default;
-$grey-blue-color: #7AA4D4 !default;
-
-$light-grey-color: #666666 !default;
-$lighter-grey-color: #9b9b9b !default;
-$lightest-grey-color: #cccccc !default;
-
-$grey-bg-color: #f6f6f6 !default;
-$green-bg-color: #f5fdf3 !default;
-$blue-bg-color: #f5f9ff !default;
-$orange-bg-color: #fffcf7 !default;
-$red-bg-color: #ffeee6 !default;
-
-$text-color: $grey-color !default;
-$link-color: #4499ee !default;
-$link-hover-color: #3377cc !default;
-
-$line-color: #dfdfdf !default;
-$light-line-color: #eeeeee !default;
-$lighter-line-color: #f3f3f3 !default;
-
-$border-color: $line-color !default;
-$light-border-color: $light-line-color !default;
-$lighter-border-color: $lighter-line-color !default;
-
-$border-radius: 0.25rem !default;
-$border-radius-s: 0.125rem !default;
-$border-radius-l: 0.3rem !default;
-
-$default-line-height: 1.5 !default;
-
-$font-size: 1rem !default;
-$font-size-s: 0.875rem !default;
-$font-size-l: 1.125rem !default;
-$font-size-xs: 0.75rem !default;
-
-$z-index-float: 100 !default;
-$z-index-dialog: 200 !default;
-$z-index-popover: 300 !default;
-$z-index-tooltip: 400 !default;

data/lib/assets/stylesheets/tao/ui/shared/variables/_buttons.scss

@@ -1,99 +0,0 @@
-$button-color: $green-color !default;
-$button-hover-color: #66cc33 !default;
-$button-active-color: #22AA11 !default;
-$button-warn-color: $red-color !default;
-$button-warn-active-color: #EE6633 !default;
-
-$button-font-size: 1rem !default;
-$button-line-height: 1.5 !default;
-$button-padding-v: 0.4375em !default;
-$button-padding-h: 1.875em !default;
-$button-padding: $button-padding-v $button-padding-h !default;
-
-$small-button-font-size: 0.75rem !default;
-$small-button-line-height: 1.5 !default;
-$small-button-padding-v: 0.25em !default;
-$small-button-padding-h: 0.875em !default;
-$small-button-padding: $small-button-padding-v $small-button-padding-h !default;
-
-$default-button-colors: (
-  normal: (
-    bg: $white-color,
-    text: $button-color,
-    border: $border-color
-  ),
-  hover: (
-    bg: $white-color,
-    text: $button-hover-color,
-    border: $button-hover-color
-  ),
-  active: (
-    bg: $white-color,
-    text: $button-active-color,
-    border: $button-active-color
-  ),
-  disable: (
-    bg: $white-color,
-    text: $lightest-grey-color,
-    border: $lighter-line-color
-  )
-) !default;
-
-$primary-button-colors: (
-  normal: (
-    bg: $button-color,
-    text: $white-color,
-    border: $button-color
-  ),
-  hover: (
-    bg: $button-hover-color,
-    text: $white-color,
-    border: $button-hover-color
-  ),
-  active: (
-    bg: $button-active-color,
-    text: $white-color,
-    border: $button-active-color
-  ),
-  disable: (
-    bg: $border-color,
-    text: $white-color,
-    border: $border-color
-  )
-) !default;
-
-$warning-button-colors: map-merge($default-button-colors, (
-  normal: (
-    bg: $white-color,
-    text: $button-warn-color,
-    border: $button-warn-color
-  ),
-  hover: (
-    bg: $button-warn-color,
-    text: $white-color,
-    border: $button-warn-color
-  ),
-  active: (
-    bg: $button-warn-active-color,
-    text: $white-color,
-    border: $button-warn-active-color
-  )
-)) !default;
-
-$icon-button-colors: map-merge($default-button-colors, (
-  normal: (
-    bg: $white-color,
-    text: $lighter-grey-color,
-    border: $border-color
-  ),
-  hover: (
-    bg: $white-color,
-    text: $lighter-grey-color,
-    border: $link-color
-  ),
-  active: (
-    bg: $white-color,
-    text: $lighter-grey-color,
-    border: $link-color
-  )
-)) !default;

data/lib/assets/stylesheets/tao/ui/shared/variables/_tables.scss

@@ -1,4 +0,0 @@
-$table-line-color: $light-line-color !default;
-$table-row-hover-color: $grey-bg-color !default;
-$table-th-padding: 0.875rem 0.625rem !default;
-$table-td-padding: 1.125rem 0.625rem !default;

data/lib/assets/stylesheets/tao/ui/slide_box.scss

@@ -1,39 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/slide_box';
-
-.tao-slide-box {
-  .slide-box-content > header,
-  .slide-box-content > .header {
-    text-align: center;
-    font-size: 1rem;
-    color: $text-color;
-    line-height: 3rem;
-    border-bottom: 1px solid $border-color;
-    font-weight: bold;
-  }
-
-  & > .slide-box-wrapper > .link-close {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    fill: $lighter-grey-color;
-
-    &:hover {
-      fill: $grey-color;
-    }
-
-    &:hover {
-      fill: $grey-color;
-    }
-  }
-
-  &[with-close-button] > .slide-box-wrapper > .link-close {
-    display: flex;
-  }
-
-}

data/lib/assets/stylesheets/tao/ui/sortable.scss

@@ -1,16 +0,0 @@
-@import 'tao/ui/globals';
-
-.tao-sortable {
-
-  [draggable='true'] {
-    cursor: move;
-    user-select: none;
-    /* Required to make elements draggable in old WebKit */
-    -khtml-user-drag: element;
-    -webkit-user-drag: element;
-  }
-
-  .tao-sortable-sorting {
-    visibility: hidden !important;
-  }
-}

data/lib/assets/stylesheets/tao/ui/tables.scss

@@ -1,89 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/tables';
-
-table.table {
-  tbody tr:hover {
-    background-color: $table-row-hover-color;
-  }
-}
-
-.tao-table {
-  .table {
-    table-layout: fixed;
-  }
-
-  .th-checkbox,
-  .td-checkbox {
-    display: none;
-    width: 2.5rem;
-    padding: 0;
-    text-align: center;
-  }
-
-  &[selectable] {
-    .th-checkbox,
-    .td-checkbox {
-      display: table-cell;
-    }
-  }
-
-  .th-expand-icon,
-  .td-expand-icon {
-    display: none;
-    width: 2.5rem;
-    padding: 0;
-    text-align: center;
-  }
-
-  &[expandable] {
-
-    .th-expand-icon,
-    .td-expand-icon {
-      display: table-cell;
-
-      .icon {
-        width: 1rem;
-        height: 1rem;
-        transition: transform 200ms;
-      }
-    }
-
-    tr.expandable {
-      .td-expand-icon .icon {
-        fill: $lighter-grey-color;
-      }
-
-      &:hover .td-expand-icon .icon {
-        fill: $grey-color;
-      }
-    }
-
-    tr.expanded {
-      border-bottom-color: transparent;
-
-      .th-expand-icon,
-      .td-expand-icon {
-        .icon {
-          transform: rotate(90deg);
-        }
-      }
-    }
-
-    tr.expandable-panel {
-      display: none;
-      background: $grey-bg-color;
-
-      & > td  {
-        padding: 0;
-        box-shadow: inset 0 8px 10px -8px rgba(184, 184, 184, 0.8);
-
-        & > div:first-child {
-          padding: 1.5rem 2rem;
-          height: 0;
-          transition: height 200ms linear;
-          overflow-y: hidden;
-        }
-      }
-    }
-  }
-}

data/lib/assets/stylesheets/tao/ui/tabs.scss

@@ -1,23 +0,0 @@
-@import 'tao/ui/globals';
-
-.tabs {
-  display: flex;
-  align-items: flex-end;
-
-  .tab {
-    padding: 0.5rem 0.5rem 1rem 0.5rem;
-    font-size: 1rem;
-    color: $lightest-grey-color;
-    border-bottom: 3px solid $white-color;
-    margin: 0 1.5rem 0 0;
-
-    &:hover {
-      color: $grey-color;
-    }
-
-    &.active {
-      border-color: $ui-color;
-      color: $grey-color;
-    }
-  }
-}

data/lib/assets/stylesheets/tao/ui/tooltip.scss

@@ -1,147 +0,0 @@
-@import 'tao/ui/globals';
-
-$arrowSize: 0.75rem;
-
-.tao-tooltip {
-  display: none;
-  position: absolute;
-  left: -9999px;
-  top: -9999px;
-  z-index: $z-index-popover;
-  opacity: 0;
-  transition: opacity 200ms;
-
-  &[active] {
-    opacity: 1;
-    display: block;
-  }
-
-  .tao-popover-content {
-    padding: 0.5rem 0.75rem;
-    background: $grey-color;
-    color: $white-color;
-    border-radius: $border-radius;
-    white-space: nowrap;
-    font-size: 0.875rem;
-  }
-
-  .tao-popover-arrow {
-    display: none;
-    position: absolute;
-    width: $arrowSize;
-    height: $arrowSize;
-
-    .arrow {
-      font-size: 0;
-      height: 0;
-      width: 0;
-      border-style: solid;
-      border-width: $arrowSize / 2;
-      border-color: $grey-color;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
-    .arrow-border,
-    .arrow-shadow {
-      display: none;
-    }
-  }
-
-  &[with-arrow] .tao-popover-arrow {
-    display: block;
-  }
-
-  &[direction='right-top'],
-  &[direction='right-bottom'],
-  &[direction='right-middle'] {
-    .tao-popover-arrow {
-      left: -$arrowSize;
-    }
-
-    .arrow-basic {
-      border-color: transparent $grey-color transparent transparent;
-    }
-  }
-
-  &[direction='left-top'],
-  &[direction='left-bottom'],
-  &[direction='left-middle'] {
-    .tao-popover-arrow {
-      right: -$arrowSize;
-    }
-
-    .arrow-basic {
-      border-color: transparent transparent transparent $grey-color;
-    }
-  }
-
-  &[direction='left-top'],
-  &[direction='right-top'] {
-    .tao-popover-arrow {
-      bottom: $arrowSize;
-    }
-  }
-
-  &[direction='left-bottom'],
-  &[direction='right-bottom'] {
-    .tao-popover-arrow {
-      top: $arrowSize;
-    }
-  }
-
-  &[direction='left-middle'],
-  &[direction='right-middle'] {
-    .tao-popover-arrow {
-      top: 50%;
-      margin-top: -$arrowSize / 2;
-    }
-  }
-
-  &[direction='top-left'],
-  &[direction='top-right'],
-  &[direction='top-center'] {
-    .tao-popover-arrow {
-      bottom: -$arrowSize;
-    }
-
-    .arrow-basic {
-      border-color: $grey-color transparent transparent transparent;
-    }
-  }
-
-  &[direction='bottom-left'],
-  &[direction='bottom-right'],
-  &[direction='bottom-center'] {
-    .tao-popover-arrow {
-      top: -$arrowSize;
-    }
-
-    .arrow-basic {
-      border-color: transparent transparent $grey-color transparent;
-    }
-  }
-
-  &[direction='top-left'],
-  &[direction='bottom-left'] {
-    .tao-popover-arrow {
-      right: $arrowSize;
-    }
-  }
-
-  &[direction='top-right'],
-  &[direction='bottom-right'] {
-    .tao-popover-arrow {
-      left: $arrowSize;
-    }
-  }
-
-  &[direction='top-center'],
-  &[direction='bottom-center'] {
-    .tao-popover-arrow {
-      left: 50%;
-      margin-left: -$arrowSize / 2;
-    }
-  }
-}

data/lib/assets/stylesheets/tao/ui/tree.scss

@@ -1,128 +0,0 @@
-@import 'tao/ui/globals';
-
-.tao-tree {
-  display: block;
-
-  .tao-tree-item {
-    display: block;
-
-    .tao-tree-item-padding {
-      height: 100%;
-      display: flex;
-
-      .padding-item {
-        position: relative;
-        height: 100%;
-        width: 2rem;
-
-        &:before {
-          content: '';
-          display: block;
-          border-left: 1px solid $light-border-color;
-          position: absolute;
-          left: 0.625rem;
-          top: 0;
-          right: 0;
-          bottom: 0;
-        }
-
-        &:last-child:after {
-          content: '';
-          display: block;
-          border-bottom: 1px solid $light-border-color;
-          position: absolute;
-          left: 0.625rem;
-          top: 0;
-          right: 0.6rem;
-          bottom: 50%;
-        }
-      }
-    }
-
-    &:first-child[depth='0'] > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
-      top: 50%;
-    }
-
-    &:last-child > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
-      bottom: 50%;
-    }
-
-    & > .tao-tree-item-content {
-      display: flex;
-      align-items: center;
-      height: $tree-item-height;
-      font-size: $tree-item-font-size;
-
-      .link-toggle-item {
-        display: block;
-        background: $white-color;
-        width: 1.375rem;
-        height: 1.375rem;
-        padding: 0.25rem;
-        transition: transform 200ms;
-        border: 1px solid $border-color;
-        border-radius: 50%;
-        margin: 0 0.75rem 0 -2rem;
-        cursor: pointer;
-        visibility: hidden;
-        position: relative;
-
-        .icon {
-          display: block;
-          width: 0.75rem;
-          height: 0.75rem;
-          fill: $lighter-grey-color;
-        }
-
-        &:hover {
-          background: $grey-bg-color;
-
-          .icon {
-            fill: $grey-color;
-          }
-        }
-      }
-
-      tao-check-box {
-        margin: 0 0.75rem 0 0;
-      }
-    }
-
-    & > .tao-tree-list {
-      display: none;
-      transition: height 200ms;
-      overflow: hidden;
-
-      & > .tao-tree-loading {
-        display: flex;
-        align-items: center;
-        height: $tree-item-height;
-        line-height: $tree-item-height;
-        font-size: $tree-item-font-size;
-        color: $lighter-grey-color;
-
-        .icon {
-          margin: 0 0.75rem 0 0;
-        }
-      }
-    }
-
-    &[expandable] {
-      & > .tao-tree-item-content .link-toggle-item {
-        visibility: visible;
-      }
-    }
-
-    &[expandable][expanded] {
-      & > .tao-tree-item-content .link-toggle-item {
-        transform: rotate(90deg);
-      }
-
-      & > .tao-tree-list {
-        display: block;
-        height: auto;
-      }
-    }
-  }
-
-}

data/lib/assets/stylesheets/tao/ui/variables/_base.scss

@@ -1,10 +0,0 @@
-@import 'tao/ui/shared/variables/base';
-
-$mobile: false !default;
-
-$font-size-h1: 2.25rem !default;
-$font-size-h2: 1.5rem !default;
-$font-size-h3: 1.125rem !default;
-$font-size-h4: 1rem !default;
-$font-size-h5: 0.875rem !default;
-$font-size-h6: 0.75rem !default;

data/lib/assets/stylesheets/tao/ui/variables/_tree.scss

@@ -1,2 +0,0 @@
-$tree-item-height: 2rem !default;
-$tree-item-font-size: 0.875rem !default;

data/lib/generators/tao/icons/USAGE

@@ -1,8 +0,0 @@
-Description:
-    Generate coffee file containing all svg icons.
-
-Example:
-    `rails generate tao:icons base`
-
-    Create coffee file:
-        lib/assets/javascripts/tao/ui/icons/base.coffee