tao_ui 0.3.4 → 1.0.0.beta.1

data/lib/assets/stylesheets/tao/ui/mobile/basic.scss

@@ -1,24 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/basic';
-
-// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
-//
-// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
-// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
-// However, they DO support removing the click delay via `touch-action: manipulation`.
-// See:
-// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
-// * http://caniuse.com/#feat=css-touch-action
-// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
-
-a,
-area,
-button,
-[role="button"],
-input,
-label,
-select,
-summary,
-textarea {
-  touch-action: manipulation;
-}

data/lib/assets/stylesheets/tao/ui/mobile/buttons.scss

@@ -1,8 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/buttons';
-
-.button {
-  &.text-with-icon {
-    padding-left: 1.125em;
-  }
-}

data/lib/assets/stylesheets/tao/ui/mobile/code.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/code';

data/lib/assets/stylesheets/tao/ui/mobile/icons.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/icons';

data/lib/assets/stylesheets/tao/ui/mobile/index.scss

@@ -1,7 +0,0 @@
-//= require normalize
-//= require ./icons
-//= require ./basic
-//= require ./code
-//= require ./buttons
-//= require ./tables
-//= require ./slide_box

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

@@ -1,56 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/slide_box';
-
-.tao-slide-box {
-  .slide-box-content {
-    & > header,
-    & > .header {
-      height: 3rem;
-      background: $white-color;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid $border-color;
-
-      .left {
-        width: 6rem;
-        flex: 1 1 auto;
-        text-align: left;
-        margin: 0 0 0 0.75rem;
-      }
-
-      .right {
-        width: 6rem;
-        flex: 1 1 auto;
-        text-align: right;
-        margin: 0 0.75rem 0 0;
-      }
-
-      .title {
-        flex: 0 0 auto;
-        text-align: center;
-      }
-
-      .link-close {
-        fill: $lighter-grey-color;
-
-        &:active {
-          fill: $grey-color;
-        }
-      }
-    }
-
-    & > .buttons {
-      border-top: 1px solid $border-color;
-
-      .button {
-        border-radius: 0;
-        border-width: 0 1px 0 0;
-
-        &:last-child {
-          border-right-width: 0;
-        }
-      }
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-@import 'tao/ui/mobile/globals';
-@import 'tao/ui/shared/tables';

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

@@ -1,10 +0,0 @@
-@import 'tao/ui/shared/variables/base';
-
-$mobile: true !default;
-
-$font-size-h1: 1.375rem !default;
-$font-size-h2: 1.25rem !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/mobile/variables/_buttons.scss

@@ -1,7 +0,0 @@
-$button-font-size: 1rem !default;
-$button-line-height: 1.5rem !default;
-$button-padding-v: 0.625rem !default;
-$button-padding-h: 1.25rem !default;
-$button-padding: $button-padding-v $button-padding-h !default;
-
-@import 'tao/ui/shared/variables/buttons';

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

@@ -1,206 +0,0 @@
-@import 'tao/ui/globals';
-
-$arrowSize: 1rem;
-
-.tao-popover {
-  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.75em 1em;
-    background: $white-color;
-    border: 1px solid $border-color;
-    border-radius: $border-radius-s;
-    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
-  }
-
-  &.tao-confirm-popover .tao-popover-content {
-    font-size: 0.875rem;
-    text-align: center;
-    white-space: nowrap;
-    padding: 1rem 1.5rem;
-  }
-
-  .tao-popover-buttons {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .button, a {
-      margin: 0 0.5rem;
-    }
-  }
-
-  .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;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-  }
-
-  &[with-arrow] .tao-popover-arrow {
-    display: block;
-  }
-
-  &[direction='right-top'],
-  &[direction='right-bottom'],
-  &[direction='right-middle'] {
-    .tao-popover-arrow {
-      left: -$arrowSize;
-      width: $arrowSize / 2;
-    }
-
-    .arrow-basic {
-      border-color: transparent #fff transparent transparent;
-      left: 1px;
-    }
-
-    .arrow-border {
-      border-color: transparent #ddd transparent transparent;
-      left: 0px;
-    }
-
-    .arrow-shadow {
-      border-color: transparent rgba(0,0,0,0.08) transparent transparent;
-      left: -1px;
-    }
-  }
-
-  &[direction='left-top'],
-  &[direction='left-bottom'],
-  &[direction='left-middle'] {
-    .tao-popover-arrow {
-      right: -$arrowSize / 2;
-      width: $arrowSize / 2;
-    }
-
-    .arrow-basic {
-      border-color: transparent transparent transparent #fff;
-      left: -1px;
-    }
-
-    .arrow-border {
-      border-color: transparent transparent transparent #ddd;
-      left: 0px;
-    }
-
-    .arrow-shadow {
-      border-color: transparent transparent transparent rgba(0,0,0,0.08);
-      left: 1px;
-    }
-  }
-
-  &[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 / 2;
-      height: $arrowSize / 2;
-    }
-
-    .arrow-basic {
-      border-color: #fff transparent transparent transparent;
-      top: -1px;
-    }
-
-    .arrow-border {
-      border-color: #ddd transparent transparent transparent;
-      top: 0px;
-    }
-
-    .arrow-shadow {
-      border-color: rgba(0,0,0,0.08) transparent transparent transparent;
-      top: 1px;
-    }
-  }
-
-  &[direction='bottom-left'],
-  &[direction='bottom-right'],
-  &[direction='bottom-center'] {
-    .tao-popover-arrow {
-      top: -$arrowSize;
-      height: $arrowSize / 2;
-    }
-
-    .arrow-basic {
-      border-color: transparent transparent #fff transparent;
-      top: 1px;
-    }
-
-    .arrow-border {
-      border-color: transparent transparent #ddd transparent;
-      top: 0px;
-    }
-
-    .arrow-shadow {
-      border-color: transparent transparent rgba(0,0,0,0.08) transparent;
-      top: -1px;
-    }
-  }
-
-  &[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/shared/_basic.scss

@@ -1,127 +0,0 @@
-html {
-  box-sizing: border-box;
-  height: 100%;
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-}
-
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  font-size: $font-size;
-  font-family: "Helvetica Neue", "PingFang SC", "Microsoft Yahei", 微软雅黑, STXihei, 华文细黑, sans-serif;
-  line-height: $default-line-height;
-  color: $text-color;
-  fill: $text-color;
-  background-color: $white-color;
-}
-
-small,
-.small {
-  font-size: $font-size-s;
-  font-weight: normal;
-}
-
-.x-small {
-  font-size: $font-size-xs;
-  font-weight: normal;
-}
-
-big,
-.big,
-.large {
-  font-size: $font-size-l;
-}
-
-mark,
-.mark {
-  padding: 0.2em;
-  background-color: yellow;
-}
-
-a {
-  color: $link-color;
-  fill: $link-color;
-  text-decoration: none;
-  background-color: transparent; // Remove the gray background on active links in IE 10.
-  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
-
-  &.warn {
-    color: $red-color;
-    fill: $red-color;
-  }
-
-  &.disabled {
-    color: $lightest-grey-color;
-    fill: $lightest-grey-color;
-    cursor: not-allowed;;
-  }
-}
-
-a:not([href]):not([tabindex]) {
-  color: inherit;
-  fill: inherit;
-}
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-top: 1.5em;
-  margin-bottom: 1em;
-  line-height: $default-line-height;
-  color: $text-color;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
-
-
-hr {
-  margin-top: 1em;
-  margin-bottom: 1em;
-  border: 0;
-  border-top: 1px solid $border-color;
-}
-
-p {
-  margin: 0 0 1em 0;
-}
-
-ul, ol {
-  margin: 0 0 1em 0;
-  padding: 0 0 0 2em;
-
-  li {
-    line-height: 2.0
-  }
-
-  ul, ol {
-    margin-bottom: 0;
-  }
-}
-
-blockquote {
-  margin: 0 0 1em 0;
-  padding: 0.5em 1em;
-  color: $light-grey-color;
-  border-left: 0.25em solid $border-color;
-
-  *:last-child {
-    margin-bottom: 0;
-  }
-}

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

@@ -1,65 +0,0 @@
-.button {
-  display: inline-block;
-  padding: $button-padding;
-  font-size: $button-font-size;
-  line-height: $button-line-height;
-  border-radius: $border-radius-s;
-  cursor: pointer;
-  text-decoration: none;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-  user-select: none;
-  transition: background 200ms, color 200ms, fill 200ms, border-color 200ms;
-  @include button-colors($default-button-colors);
-
-  .icon {
-    vertical-align: text-top;
-  }
-
-  &.text-with-icon {
-    padding-left: 1.5em;
-
-    .icon {
-      margin-right: 0.5em
-    }
-  }
-
-  &:focus, &.focus {
-    outline: none;
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  &.button-warning {
-    @include button-colors($warning-button-colors);
-  }
-
-  &.button-primary {
-    @include button-colors($primary-button-colors);
-  }
-
-  &.button-small {
-    padding: $small-button-padding;
-    font-size: $small-button-font-size;
-    line-height: $small-button-line-height;
-
-    &.text-with-icon {
-      padding-left: 0.75em;
-    }
-  }
-
-  &.button-icon {
-    min-width: 2.5em;
-    padding: $button-padding-v;
-    @include button-colors($icon-button-colors);
-  }
-
-  &.button-block {
-    display: block;
-    width: 100%;
-  }
-}

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

@@ -1,54 +0,0 @@
-// Inline and block code styles
-code,
-kbd,
-pre,
-samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-code {
-  padding: 0.2em 0.4em;
-  font-size: 85%;
-  background-color: $grey-bg-color;
-  border-radius: $border-radius;
-  word-wrap: break-word;
-
-  a > & {
-    padding: 0;
-    color: inherit;
-    background-color: inherit;
-  }
-}
-
-kbd {
-  padding: 0.2em 0.4em;
-  font-size: 85%;
-  background-color: $grey-bg-color;
-  border-radius: $border-radius;
-
-  kbd {
-    padding: 0;
-    font-size: 100%;
-  }
-}
-
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1em;
-  padding: 1.5em;
-  font-size: 85%;
-  background-color: $grey-bg-color;
-  overflow: auto;
-  border-radius: $border-radius;
-
-  code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    border-radius: 0;
-    word-wrap: normal;
-    white-space: inherit;
-  }
-}

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

@@ -1,16 +0,0 @@
-@keyframes spin {
-  from { transform:rotate(0deg); }
-  to { transform:rotate(360deg); }
-}
-
-.icon {
-  display: inline-block;
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: middle;
-  fill: inherit;
-
-  &.spin {
-    animation: spin 1s infinite linear;
-  }
-}

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

@@ -1,83 +0,0 @@
-
-.slide-box-active {
-  overflow: hidden;
-}
-
-tao-slide-box {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-float;
-  display: none;
-  overflow: hidden;
-
-  &[modal] {
-    background-color: rgba(0, 0, 0, 0);
-    transition: background-color 300ms ease-in-out;
-  }
-
-  &[modal][active] {
-    background-color: rgba(0, 0, 0, 0.55);
-  }
-
-  & > .slide-box-wrapper {
-    background: $white-color;
-    opacity: 0;
-    padding: 1.5rem;
-    border: 0px solid $light-border-color;
-    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
-    position: absolute;
-
-    .slide-box-content {
-      max-height: 100%;
-      overflow: auto;
-    }
-  }
-
-  &[without-padding] > .slide-box-wrapper {
-    padding: 0;
-  }
-
-  &[direction='rtl'] > .slide-box-wrapper {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    transform: translateX(50%);
-    border-left-width: 1px;
-    box-shadow: -2px 0 5px 0 rgba(0,0,0,0.05);
-  }
-
-  &[direction='ltr'] > .slide-box-wrapper {
-    top: 0;
-    left: 0;
-    bottom: 0;
-    transform: translateX(-50%);
-    border-right-width: 1px;
-    box-shadow: 2px 0 5px 0 rgba(0,0,0,0.05);
-  }
-
-  &[direction='ttb'] > .slide-box-wrapper {
-    left: 0;
-    top: 0;
-    right: 0;
-    transform: translateY(-50%);
-    border-bottom-width: 1px;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.05);
-  }
-
-  &[direction='btt'] > .slide-box-wrapper {
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform: translateY(50%);
-    border-top-width: 1px;
-    box-shadow: 0 -2px 5px 0 rgba(0,0,0,0.05);
-  }
-
-  &[active] > .slide-box-wrapper {
-    opacity: 1;
-    transform: translateX(0) translateY(0);
-  }
-}