material 0.9.25 → 0.9.27

package/src/skin/material/view/tabview-bak.scss

@@ -0,0 +1,48 @@
+.tabview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  white-space: no-wrap;
+  overflow: hidden;
+  >.indicator {
+    position: absolute;
+    height: 2px;
+    transition: 0.2s;
+    background-color: $secondary-color;
+  }
+  >.tabs {
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden ;
+    //height: 48px
+    >.material-divider {
+      margin: 0;
+      padding: 0;
+      flex: 1 ;
+      display: inline-block;
+    }
+    >button {
+      flex: 1;
+      display: inline-block;
+      padding: 0 10px;
+      height: 48px;
+      border-radius: 0;
+      margin: 0;
+      text-align: center;
+      background-repeat: no-repeat;
+      background-size: 30%;
+      background-position: center;
+      >label {
+        color: $default-color-text;
+      }
+    }
+  }
+  >.views {
+    >div {
+      display: none;
+    }
+  }
+}

package/src/skin/material/view/tabview.scss

@@ -0,0 +1,63 @@
+.tabview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  white-space: no-wrap;
+  overflow: hidden;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  >.indicator {
+    position: absolute;
+    height: 2px;
+    // transition: 0.2s
+  }
+  >.tabs {
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden ;
+    //height: 48px
+    >.divider {
+      margin: 0;
+      padding: 0;
+      flex: 1 ;
+      display: inline-block;
+    }
+    >button {
+      flex: 1;
+      display: inline-block;
+      padding: 0;
+      height: 48px;
+      border-radius: 0;
+      margin: 0;
+      text-align: center;
+      background-repeat: no-repeat;
+      background-size: 25%;
+      background-position: center;
+      // transition: 50ms transform
+      &:hover, &.selected {
+        background-color: transparent;
+        // transform: scale(1.1)
+        // transition: 50ms transform
+      }
+
+      &.type-action {
+        max-width: 60px;
+      }
+    }
+  }
+
+  >.views {
+    position: relative;
+    flex: 1;
+    >div {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}

package/src/skin/material/view/tree.scss

@@ -0,0 +1,84 @@
+.material-tree {
+  padding: 16px 0;
+  overflow: scroll;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    .item-tree {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+      padding: 8px 16px;
+    }
+
+    .material-item  {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+      padding: 8px 16px;
+
+      //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      transition: .3s;
+
+      &.is-selected {
+        background-color: rgba(0, 0, 0, 0.05);
+        transition: .3s;
+      }
+
+      .ui-icon {
+        flex: none;
+        padding: 24px;
+      }
+
+      .ui-text {
+        flex: 1;
+        padding: 16px 12px 16px 0;
+      }
+    }
+
+    .material-button {
+      display: flex;
+      flex-direction: horizontal;
+      flex-wrap: nowrap;
+      text-align: left;
+      width: 100%;
+      display: block;
+      -ms-appearance: span;
+      -moz-appearance: span;
+      -webkit-appearance: span;
+      appearance: span;
+
+      .ui-icon {
+        flex: none;
+        padding: 24px;
+      }
+
+      .ui-text {
+        flex: 1;
+        padding: 16px 12px 16px 0;
+      }
+    }
+
+    .ui-separator {
+      display: block;
+      height: 1px;
+      margin: 12px;
+      background-color: #DDD;
+    }
+  }
+}

package/src/skin/material/view/{view.sass → view.scss}

@@ -5,3 +5,4 @@
 //   bottom: 0
 //   left: 0
 //   overflow: scroll
+

package/src/skin/material/base/body.sass

@@ -1,55 +0,0 @@
-
-// HTML Tags General Defintion
-html
-  font-size: 100%
-  line-height: 1.15
-  width: 100%
-  height: 100%
-
-body
-  color: rgba(0, 0, 0, 0.67)
-  font-family: Roboto, arial, serif
-  font-size: 100%
-  // position: relative
-  // display: block
-  // height: 100%
-  // width: 100%
-  // overflow: hidden
-  margin: 0
-  padding: 0
-  // user-select: none
-
-input,
-textarea,
-keygen,
-select,
-button
-  font-size: 1em
-  font-family: Roboto, arial, serif
-  color: rgb(51, 51, 51)
-
-p
-  line-height: 20px
-  padding-top: 6px
-  margin-bottom: 14px
-  letter-spacing: 0
-  font-weight: 400
-
-// get rid of outline
-select,
-input,
-textarea,
-button
-  outline: none
-  &:hover
-    outline: none
-
-button
-  user-select: none
-
-// set all container boder-box
-*
-  box-sizing: border-box
-
-a
-  color: rgba(0, 0, 0, 0.7)

package/src/skin/material/base/typo.sass

@@ -1,107 +0,0 @@
-.material-text
-  &.type-display4
-    font-size: 7rem
-    font-weight: 300
-    letter-spacing: -0.04em
-    line-height: 7rem
-
-  &.type-display3
-    font-size: 3.5rem
-    font-weight: 400
-    letter-spacing: -0.02em
-    line-height: 3.5rem
-
-  &.type-display2
-    font-size: 2.813rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 3rem
-
-  &.type-display1
-    font-size: 2.125rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2.5rem
-
-  &.type-headline
-    font-size: 1.5rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2rem
-
-  &.type-title
-    font-size: 1.25rem
-    font-weight: 500
-    letter-spacing: 0.02em
-    line-height: 2rem
-
-  &.type-subheading2
-    font-size: 1rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.75rem
-
-  &.type-subheading1
-    font-size: 0.938rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.type-body1
-    font-size: 0.875rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.25rem
-
-  &.type-body2
-    font-size: 0.875rem
-    font-weight: 500
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.type-caption
-    font-size: 0.75rem
-    font-weight: 400
-    letter-spacing: 0.08em
-    line-height: 1.25rem
-
-  &.type-button
-    font-size: 14px
-    font-weight: 500
-
-    // margin-bottom: 30px;
-    margin-left: 8px
-
-  &.style-adjust
-    &.type-display4
-      margin: -1rem 0 3.5rem -0.085em
-
-    &.type-display3
-      margin: -8px 0 64px -0.07em
-
-    &.type-display2
-      margin: -0.5rem 0 4rem -0.07em
-
-    &.type-display1
-      margin: -0.5rem 0 4rem -0.07em
-
-    &.type-headline
-      margin: -0.5rem 0 1rem -0.06em
-
-    &.type-title
-      margin: -0.5rem 0 1rem -0.05em
-
-    &.type-subheading2
-      margin: -0.5rem 0 1rem -0.06em
-
-    &.type-subheading1
-      margin: -0.313rem 0 0.813rem -0.06em
-
-    &.type-body1
-      margin: -0.25rem 0 0.75rem 0
-
-    &.type-body2
-      margin: -0.25rem 0 0.75rem 0
-
-    &.type-caption
-      line-height: 1.25rem

package/src/skin/material/button/action.sass

@@ -1,89 +0,0 @@
-
-// type action
-.button.type-action
-  min-width: 36px
-  transition: box-shadow .2s
-  box-shadow: none
-  border-radius: 50%
-  padding: 6px
-  .button-icon
-    padding: 0
-    height: 24px
-    width: 24px
-    margin-left: 0
-    svg
-      fill: $default-color-text
-
-// styles
-.button.type-action
-  &.style-dense,
-  &.style-compact
-    height: 32px
-    width: 32px
-    min-width: 32px
-    border-radius: 50%
-    .button-icon
-      width: 20px
-      height: 20px
-      svg
-        width: 20px
-        height: 20px
-        viewbox: 0 0 20 20
-
-
-// states
-.button.type-action
-  &:hover
-    //background-color: #E0E0E0;
-
-  &:focus
-    //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
-
-  .material-ripple
-    //background-color: rgba(255, 255, 255, 1)
-
-// color
-.button.type-action
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    &:focus
-      background-color: lighten($primary-color, 10%)
-      color: $primary-color-text
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    &:focus
-      background-color: lighten($secondary-color, 5%)
-      color: $secondary-color-text
-
-
-// theme
-.dark-mode .button.type-action,
-.button.type-action.dark-mode
-
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-
-
-
-

package/src/skin/material/button/button.sass

@@ -1,183 +0,0 @@
-.button
-  display: flex
-  -webkit-font-smoothing: antialiased
-  white-space: nowrap
-  position: relative
-  vertical-align: middle
-  cursor: default
-  height: 36px
-  padding: 6px 8px 6px 8px
-  margin: 0 8px
-  border: none
-  border-radius: 2px
-  overflow: hidden
-  background-color: transparent
-  > *
-    pointer-events: none
-
-  .button-icon
-    flex: none
-    pointer-events: none
-    z-index: 2
-    display: inline-block
-    width: 24px
-    height: 24px
-    padding: 0 8px
-    vertical-align: bottom
-    padding: 0
-    background-repeat: no-repeat
-    background-position: center center
-    svg
-      fill: $default-color-text
-
-  .button-label
-    flex: 1
-    order: 2
-    pointer-events: none
-    font-size: 0.875rem
-    font-weight: 600
-    line-height: 1.1rem
-    display: inline-block
-    z-index: 2
-    text-transform: uppercase
-    padding: 3px 8px 3px 8px
-    margin: 0
-
-  .material-ripple
-    opacity: 1
-    pointer-events: none
-    z-index: 1
-    position: absolute
-    background-color: rgba(0, 0, 0, 0.1)
-    height: 5px
-    width: 5px
-    border-radius: 50%
-
-  &.iconend
-    .button-icon
-      order: 2
-    .button-label
-      order: 1
-
-// states
-.button
-  &.is-disabled
-    pointer-events: none
-    opacity: .3
-
-  &:focus
-    //transition-delay: .2s
-    transition-duration: .3s
-    background-color: rgba($default-color-text, 0.05)
-    &:hover
-      background-color: rgba($default-color-text, 0.05)
-
-  &:active
-    transition-duration: .2s
-    &:focus
-      //transition-delay: .2s
-
-  &:hover
-    transition-duration: .2s
-    background-color: rgba($default-color-text, 0.03)
-
-  &:disabled
-    pointer-events: none
-    opacity: .3
-
-// styles
-.button
-  &.style-compact
-    > .button-label
-      padding-left: 0
-      padding-right: 0
-
-  &.style-dense
-    height: 32px
-    > .button-label
-      font-size: 0.8125rem
-      padding-top: 2px
-      padding-bottom: 2px
-
-// color
-.button
-  &.primary-color
-    color: $primary-color
-    &:focus
-      background-color: rgba($primary-color, .1)
-      &:hover
-        background-color: rgba($primary-color, .1)
-    &:hover
-      background-color: rgba($primary-color, .05)
-
-    .button-icon
-      svg
-        fill: $primary-color
-
-    .material-ripple
-      background-color: rgba($primary-color, .1)
-    
-    
-
-  &.secondary-color
-    color: $secondary-color
-    .button-icon
-      svg
-        fill: $secondary-color
-    .material-ripple
-      background-color: rgba($secondary-color, .1)
-    &:focus
-      background-color: rgba($secondary-color, .10)
-      &:hover
-        background-color: rgba($secondary-color, .10)
-    &:hover
-      background-color: rgba($secondary-color, .05)
-
-// theme
-.dark-mode .button,
-.button.dark-mode
-  color: $default-color-text-dark
-  .button-icon
-    svg
-      fill: $default-color-text-dark
-  .material-ripple
-    background-color: rgba($default-color-text-dark, .1)
-  &:focus
-    //background-color: rgba($default-color-text-dark, .1)
-    &:hover
-      //background-color: rgba($default-color-text-dark, .1)
-  &:hover
-    background-color: rgba($default-color-text-dark, .05)
-
-  // primary color
-  &.primary-color
-    //background-color: $primary-color;
-    color: $primary-color-dark
-    .button-icon
-      svg
-        fill: $primary-color-dark
-    .material-ripple
-      background-color: rgba($primary-color-dark, .3)
-    &:focus
-      background-color: rgba($primary-color-dark, .2)
-      &:hover
-        background-color: rgba($primary-color-dark, .2)
-    &:hover
-      background-color: rgba($primary-color-dark, .1)
-
-  // secondary color
-  &.secondary-color
-    color: $secondary-color-dark
-    .button-icon
-      svg
-        fill: $secondary-color-dark
-    .material-ripple
-      background-color: rgba($secondary-color-dark, .3)
-
-    &:focus
-      background-color: rgba($secondary-color-dark, .2)
-      &:hover
-        background-color: rgba($secondary-color-dark, .2)
-
-    &:hover
-      background-color: rgba($secondary-color-dark, .1)

package/src/skin/material/button/file.sass

@@ -1,24 +0,0 @@
-
-// type file
-.button.type-file
-  overflow: hidden
-  position: relative
-  vertical-align: middle
-
-  input[type=file]
-    z-index: 20
-    position: absolute
-    height: 48px
-    width: 48px
-    top: 0
-    right: 0
-    margin: 0
-    padding: 0
-    font-size: 10px
-    cursor: pointer
-    opacity: 0
-    filter: alpha(opacity = 0)
-
-  .button-icon
-    z-index: 1
-    padding-right: 6px