tao_ui 0.1.3 → 0.2.0

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

@@ -0,0 +1,128 @@
+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: $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;
+  }
+}
+
+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

@@ -0,0 +1,65 @@
+.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.125em;
+
+    .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

@@ -0,0 +1,54 @@
+// 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;
+  white-space: pre-wrap;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+    word-wrap: normal;
+  }
+}

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

@@ -0,0 +1,16 @@
+@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

@@ -0,0 +1,80 @@
+
+body.slide-box-active {
+  overflow: hidden;
+}
+
+tao-slide-box {
+  display: none;
+  position: fixed;
+  background: $white-color;
+  opacity: 0;
+  z-index: $z-index-float;
+  border: 0px solid $light-border-color;
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  overflow: hidden;
+
+  & > .link-close {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    top: 0.5rem;
+    fill: $lighter-grey-color;
+
+    &:hover {
+      fill: $grey-color;
+    }
+  }
+
+  &[with-close-button] > .link-close {
+    display: flex;
+  }
+
+  .slide-box-content {
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  &[direction='rtl'] {
+    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'] {
+    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'] {
+    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'] {
+    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] {
+    opacity: 1;
+    transform: translateX(0) translateY(0);
+  }
+}

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

@@ -0,0 +1,38 @@
+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: 0.875rem 0.625rem;
+    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: 1.125rem 0.625rem;
+    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/{mixins → shared/mixins}/_buttons.scss

@@ -6,12 +6,11 @@
   color: map-get($normal-colors, 'text');
   fill: map-get($normal-colors, 'text');
 
-
   @if not $mobile {
     &:focus, &.focus {
-      box-shadow: 0px 0px 0 2px rgba(map-get($normal-colors, 'border'), 0.5);
+      box-shadow: 0px 0px 0 2px rgba($border-color, 0.5);
     }
-    
+
     &:hover {
       $hover-colors: map-get($colors, 'hover');
       background: map-get($hover-colors, 'bg');
@@ -27,7 +26,6 @@
     border: 1px solid map-get($active-colors, 'border');
     color: map-get($active-colors, 'text');
     fill: map-get($active-colors, 'text');
-    box-shadow: 0px 0px 0 2px rgba(map-get($active-colors, 'border'), 0.5);
   }
 
   &.disabled,

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

@@ -0,0 +1,48 @@
+
+$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;
+
+$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

@@ -0,0 +1,93 @@
+$button-font-size: $font-size !default;
+$button-line-height: 1.5 !default;
+$button-padding-v: 0.4375em !default;
+$button-padding-h: 1.25em !default;
+$button-padding: $button-padding-v $button-padding-h !default;
+
+$small-button-font-size: $font-size-xs !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: $ui-color,
+    border: $border-color
+  ),
+  hover: (
+    bg: $white-color,
+    text: #66cc33,
+    border: #66cc33
+  ),
+  active: (
+    bg: $white-color,
+    text: #22AA11,
+    border: #22AA11
+  ),
+  disable: (
+    bg: $white-color,
+    text: $lightest-grey-color,
+    border: $lighter-line-color
+  )
+) !default;
+
+$primary-button-colors: (
+  normal: (
+    bg: $ui-color,
+    text: $white-color,
+    border: $ui-color
+  ),
+  hover: (
+    bg: #66cc33,
+    text: $white-color,
+    border: #66cc33
+  ),
+  active: (
+    bg: #22AA11,
+    text: $white-color,
+    border: #22AA11
+  ),
+  disable: (
+    bg: $border-color,
+    text: $white-color,
+    border: $border-color
+  )
+) !default;
+
+$warning-button-colors: map-merge($default-button-colors, (
+  normal: (
+    bg: $white-color,
+    text: $red-color,
+    border: $red-color
+  ),
+  hover: (
+    bg: $red-color,
+    text: $white-color,
+    border: $red-color
+  ),
+  active: (
+    bg: #EE6633,
+    text: $white-color,
+    border: #EE6633
+  )
+)) !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

@@ -0,0 +1,2 @@
+$table-line-color: $light-line-color !default;
+$table-row-hover-color: $grey-bg-color !default;

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

@@ -0,0 +1,16 @@
+@import 'tao/ui/globals';
+@import 'tao/ui/shared/slide_box';
+
+tao-slide-box {
+  & > .link-close {
+    right: 0.5rem;
+
+    &:hover {
+      fill: $grey-color;
+    }
+  }
+
+  .slide-box-content {
+    padding: 1.875rem;
+  }
+}

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

@@ -1,46 +1,8 @@
 @import 'tao/ui/globals';
+@import 'tao/ui/shared/tables';
 
 table.table {
-  width: 100%;
-  max-width: 100%;
-  border-collapse: collapse;
-
-  th {
-    border-top: 1px solid $table-border-color;
-    border-bottom: 1px solid $table-border-color;
-    padding: 0.875rem 0.625rem;
-    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-border-color;
-    padding: 1.125rem 0.625rem;
-    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;
-  }
-
-  @if not $mobile {
-    tbody tr:hover {
-      background-color: $table-row-hover-color;
-    }
+  tbody tr:hover {
+    background-color: $table-row-hover-color;
   }
 }

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

@@ -1,49 +1,10 @@
+@import 'tao/ui/shared/variables/base';
 
 $mobile: false !default;
 
-$ui-color: #44BB33 !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: #2DB7F5 !default;
-
-$light-grey-color: #666666 !default;
-$lighter-grey-color: #999999 !default;
-$lightest-grey-color: #cccccc !default;
-
-$grey-bg-color: #efefef !default;
-$light-grey-bg-color: #f3f3f3 !default;
-$lighter-grey-bg-color: #f6f6f6 !default;
-
-$text-color: $grey-color !default;
-$link-color: #4499EE !default;
-$link-hover-color: #3377cc !default;
-$border-color: #dfdfdf !default;
-
-$border-width: 1px !default;
-$border-radius: 0.25rem !default;
-$border-radius-s: 0.125rem !default;
-$border-radius-l: 0.3rem !default;
-
-$default-line-height: 1.5;
-
-$font-size: 1rem !default;
-$font-size-s: 0.875rem !default;
-$font-size-l: 1.125rem !default;
-$font-size-xs: 0.75rem !default;
-
-$font-size-h1: 2rem !default;
+$font-size-h1: 2.25rem !default;
 $font-size-h2: 1.5rem !default;
-$font-size-h3: 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;
-
-$z-index-float: 100 !default;
-$z-index-dialog: 200 !default;
-$z-index-popover: 300 !default;
-$z-index-tooltip: 400 !default;

data/lib/generators/tao/icons/USAGE

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

data/lib/generators/tao/icons/templates/icons.coffee.erb

@@ -1,3 +1,3 @@
-Tao.ui.icons += '''
+Tao._icons += '''
 <%= icons_html %>
 '''