tao_ui 0.1.3 → 0.2.0

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

@@ -1,154 +1,26 @@
 @import 'tao/ui/globals';
-
-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;
-}
+@import 'tao/ui/shared/basic';
 
 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+.
-
-  @if not $mobile {
-    &:hover {
-      color: $link-hover-color;
-    }
+  &:hover {
+    color: $link-hover-color;
   }
 
   &.warn {
-    color: $red-color;
-    fill: $red-color;
-
-    @if not $mobile {
-      &:hover {
-        color: lighten($red-color, 10%);
-        fill: lighten($red-color, 10%);
-      }
-    }
-  }
-
-  &.disabled {
-    color: $lightest-grey-color;
-    fill: $lightest-grey-color;
-    cursor: not-allowed;;
-  }
-}
-
-a:not([href]):not([tabindex]) {
-  color: inherit;
-  fill: inherit;
-
-  @if not $mobile {
     &:hover {
-      color: inherit;
-      fill: inherit;
-    }
-
-    &:focus {
-      outline: 0;
+      color: lighten($red-color, 10%);
+      fill: lighten($red-color, 10%);
     }
   }
 }
 
-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: $black-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 {
-  line-height: 2.0;
-  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;
+a:not([href]):not([tabindex]) {
+  &:hover {
+    color: inherit;
+    fill: inherit;
   }
-}
-
-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;
+  &:focus {
+    outline: 0;
   }
 }

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

@@ -1,59 +1,8 @@
 @import 'tao/ui/globals';
+@import 'tao/ui/shared/buttons';
 
 .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, box-shadow 200ms;
-  @include button-colors($default-button-colors);
-
-  .icon {
-    vertical-align: text-top;
-  }
-
-  &:focus, &.focus {
-    outline: none;
-  }
-
-  @if not $mobile {
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  &.button-warning {
-    @include button-colors($warning-button-colors);
-  }
-
-  &.button-primary {
-    @include button-colors($primary-button-colors);
-  }
-
-  &.button-primary-warning {
-    @include button-colors($primary-warning-button-colors);
-  }
-
-  &.button-small {
-    padding: $small-button-padding;
-    font-size: $small-button-font-size;
-    line-height: $small-button-line-height;
-  }
-
-  &.button-block {
-    display: block;
-    width: 100%;
+  &:hover {
+    text-decoration: none;
   }
 }

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

@@ -1,56 +1,2 @@
 @import 'tao/ui/globals';
-
-// 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: $lighter-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: $lighter-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: $lighter-grey-bg-color;
-  overflow: auto;
-  border-radius: $border-radius;
-  white-space: pre-wrap;
-
-  code {
-    padding: 0;
-    font-size: inherit;
-    color: inherit;
-    background-color: transparent;
-    border-radius: 0;
-    word-wrap: normal;
-  }
-}
+@import 'tao/ui/shared/code';

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

@@ -0,0 +1,78 @@
+@import 'tao/ui/globals';
+
+body.tao-dialog-active {
+  overflow: hidden;
+}
+
+.tao-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-dialog;
+  display: none;
+  overflow: hidden;
+
+  &[modal] {
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color 200ms ease-in-out;
+  }
+
+  &[modal][active] {
+    background-color: rgba(0, 0, 0, 0.55);
+  }
+
+  &[active] .tao-dialog-wrapper {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+
+  .tao-dialog-wrapper {
+    position: relative;
+    width: 37.5rem;
+    min-height: 1em;
+    margin: 0 auto;
+    border-radius: 0 0 $border-radius-s $border-radius-s;
+    background-color: $white-color;
+    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    transform: translate(0, -30%);
+    transition: transform .3s ease-in-out, opacity .3s ease-in-out, width .2s ease-in-out;
+    opacity: 0;
+    padding: 1rem 2rem;
+
+    .tao-dialog-content {
+      overflow-y: auto;
+    }
+  }
+
+  &[size='l'] .tao-dialog-wrapper {
+    width: 53.75rem;
+  }
+
+  &[size='xl'] .tao-dialog-wrapper {
+    width: 71.25rem;
+  }
+
+  .tao-dialog-wrapper > .link-close {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    top: 0.625rem;
+    right: 0.625rem;
+    text-decoration: none;
+    fill: $lighter-grey-color;
+
+    &:hover {
+      fill: $grey-color;
+    }
+  }
+
+  &[with-close-button] .tao-dialog-wrapper > .link-close {
+    display: flex;
+  }
+
+}

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

@@ -1,18 +1,2 @@
 @import 'tao/ui/globals';
-
-@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;
-  }
-}
+@import 'tao/ui/shared/icons';

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

@@ -4,3 +4,6 @@
 //= require ./code
 //= require ./buttons
 //= require ./tables
+//= require ./slide_box
+//= require ./popover
+//= require ./dialog

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

@@ -1,2 +1,2 @@
-@import 'tao/ui/mobile/mixins/base';
-@import 'tao/ui/mobile/mixins/buttons';
+@import 'tao/ui/shared/mixins/base';
+@import 'tao/ui/shared/mixins/buttons';

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

@@ -1,3 +1,3 @@
 @import 'tao/ui/mobile/variables/base';
-@import 'tao/ui/mobile/variables/buttons';
-@import 'tao/ui/mobile/variables/tables';
+@import 'tao/ui/shared/variables/buttons';
+@import 'tao/ui/shared/variables/tables';

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

@@ -1,5 +1,5 @@
 @import 'tao/ui/mobile/globals';
-@import 'tao/ui/basic';
+@import 'tao/ui/shared/basic';
 
 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 //

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

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

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

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

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

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

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

@@ -4,3 +4,4 @@
 //= require ./code
 //= require ./buttons
 //= require ./tables
+//= require ./slide_box

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

@@ -0,0 +1,48 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/shared/slide_box';
+
+tao-slide-box {
+  & > .link-close {
+    left: 0.5rem;
+
+    &:active {
+      fill: $grey-color;
+    }
+  }
+
+  .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: 1 1 auto;
+      text-align: center;
+    }
+
+    .link-close {
+      fill: $lighter-grey-color;
+
+      &:active {
+        fill: $grey-color;
+      }
+    }
+  }
+}

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

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

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

@@ -1,3 +1,4 @@
+@import 'tao/ui/shared/variables/base';
 
 $mobile: true !default;
 
@@ -7,5 +8,3 @@ $font-size-h3: 1.125rem !default;
 $font-size-h4: 1rem !default;
 $font-size-h5: 0.875rem !default;
 $font-size-h6: 0.75rem !default;
-
-@import 'tao/ui/variables/base';

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

@@ -0,0 +1,178 @@
+@import 'tao/ui/globals';
+
+$arrowSize: 1rem;
+
+tao-popover,
+.tao-popover {
+  display: none;
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: $z-index-popover;
+
+  &[active] {
+    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);
+    white-space: nowrap;
+  }
+
+  .tao-popover-arrow {
+    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;
+    }
+  }
+
+  &[direction='right-top'],
+  &[direction='right-bottom'],
+  &[direction='right-middle'] {
+    .tao-popover-arrow {
+      left: -$arrowSize;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+  }
+}