material 0.4.2 → 0.5.0

package/src/skin/material/control/textfield.sass

@@ -31,7 +31,8 @@
     input
       border-bottom: 1px solid #F44336
 
-
+  &.hide
+    display: none
 
 // states
 .material-textfield

package/src/skin/material/icon/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/skin/material/material.sass

@@ -43,11 +43,14 @@
 @import button/file.sass
 
 // control
+@import control/button.sass
 @import control/textfield.sass
 @import control/switch.sass
 @import control/checkbox.sass
+@import control/selector.sass
 @import control/slider.sass
 @import control/tooltip.sass
+@import control/search.sass
 
 // view
 @import view/view.sass

package/src/skin/material/view/list.sass

@@ -1,195 +1,88 @@
-.material-list
-  padding: 0
-  overflow: scroll
-
-  .material-item
-    display: flex
-    flex-direction: horizontal
-    flex-wrap: nowrap
-    text-align: left
-    width: 100%
-    display: block
-    font-size: 1rem
-    line-height: 1.2rem
-    appearance: span
-    padding: 14px 16px
-
-    //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    transition: .1s
-
-    &.is-selected
-      background-color: rgba(0, 0, 0, 0.05)
-      transition: .1s
+.list
+  flex: 1
+  display: flex
+  flex-direction: column
+  
+  &.hide
+    display: none
 
-    .ui-icon
-      flex: none
-      padding: 24px
 
-    .ui-text
-      flex: 1
-      padding: 16px 12px 16px 0
-
-  .material-button
+  >.head
+    position: relative
     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
-
-    .button-label
+    flex-direction: row
+    flex: none
+    >.divider
       flex: 1
-      padding: 16px 12px 16px 0
-
-  .ui-separator
-    display: block
-    height: 1px
-    margin: 12px
-    background-color: #DDD
-
-
-
-
-
-
-
-  &.type-image
-    max-width: 1000px
-    display: flex
-    flex-wrap: wrap
-    margin: 0 auto
-    padding: 0
-    
-    .material-image
-      //float: left
-      //background-color: red
-      position: relative
-      display: list-item
-      //height: 125px
-      width: 125px
-      overflow: hidden
-      margin: 2px 2px
-      padding: 0
-      //background-color: red
-      -webkit-column-break-inside: avoid
-      break-inside: avoid-column
-      display: list-item
-      text-align: -webkit-match-parent
-      position: relative
-      box-sizing: border-box
-      //margin-bottom: 16px
-
-      .image-image
-        //height: 125px
-        width: 125px
-        display: block
-
-      .image-info
-        // padding: 16px
-        background-color: rgba(0,0,0,.6)
-        display: block
-        position: absolute
-        bottom: 0
-        left: 0
-        right: 0
-        display: flex
-        flex-direction: row
-        flex-wrap: nowrap
-        padding: 8px 16px
-  
-
-        .image-label
-          line-height: 24px
-          flex: 1 
-          color: rgba(255,255,255,.8)
-          overflow: hidden
-          text-overflow: ellipsis
-          height: 24px
-          // background-color: rgba(0,0,0,.6)
-          // display: block
-          // position: absolute
-          // bottom: 0
-          // left: 0
-          // right: 0
-        .image-icon
-          flex: none
-          svg
-            fill: white
-
-    &.hide-info
-      .image-info
-        display: none !important 
-
-    &.info-below
-      .image-info
-        //display: none !important 
-        color: initial !important 
-        padding: 16px
-        background-color: transparent  !important 
-        //display: block
-        position: initial !important 
-        padding:  8px 0 !important 
-        line-height: 16px
-        // bottom: 0
-        // left: 0
-        // right: 0
-        .image-label
-          line-height: 24px
-          flex: 1 
-          color: rgba(0,0,0,.8)
-        .image-icon
-          flex: none
-          svg
-            fill: rgba(0,0,0,.8)
-
-    &.layout-masonry
-      -webkit-column-count: 3
-      column-count: 3
-      -webkit-column-gap: 16px
-      column-gap: 16px
-      max-width: 1000px
+    >.button.search
+      flex: none
+      &.selected
+        // background-color: $primary-color
+        .button-icon svg 
+          fill: rgba(255, 255, 255, 1)
+
+  >.body.search
+    display: none
+    overflow: scroll
+    flex: 1
+    &.show
       display: block
-      flex-wrap: wrap
-      margin: 0 auto
-      padding: 0
-      .material-image
-        //float: left
-        //background-color: red
+   
+  >.body
+    overflow: scroll
+    flex: 1
+    // overscroll-behavior: none
+    // height: 100%
+    .item
+      user-select: none
+      width: 100%
+      display: flex
+      flex-direction: row
+      padding: 8px 16px 8px 24px
+      border: none
+      background-color: transparent
+      border-radius: 0
+      box-shadow: none
+      border-bottom: 1px solid rgba(0,0,0,.1)
+     
+      .image
+        flex: none
         position: relative
-        display: list-item
-        // height: 118px
-        // width: 177px
-        overflow: hidden
-        margin: 0 2px
-        padding: 0
-        background-color: red
-        -webkit-column-break-inside: avoid
-        break-inside: avoid-column
-        display: list-item
-        text-align: -webkit-match-parent
-        position: relative
-        box-sizing: border-box
-        margin-bottom: 16px
-
-        // .image-image
-        //   // height: 118px
-        //   // width: 177px
-        //   display: block
+        width: 64px
+        height: 64px
+        background-color: rgba(0,0,0,.05)
+        //border: 1px solid rgba(0,0,0,.2)
+        background-size: contain
+        background-repeat: no-repeat
+        background-position: center
+        margin-right: 16px
+
+    &.hide
+      display: none
+    .item
+      .info
+        display: flex
+        flex-direction: row
+      &.selected
+        background-color: rgba(0,0,0,.05)
 
-        // .image-label
-        //   color: rgba(255,255,255,.8)
-        //   padding: 16px
-        //   background-color: rgba(0,0,0,.6)
-        //   display: block
-        //   position: absolute
-        //   bottom: 0
-        //   left: 0
-        //   right: 0
+  >.foot
+    display: flex
+    flex-direction: row
+    flex: none
+    border-top: 1px solid rgba(0, 0, 0, 0.1)
+    padding: 8px 16px 8px 24px
+
+.virtual
+  overflow: auto
+  position: relative
+  padding: 0
+  margin: 0
+  width: 100%
+  height: 100%
+  .scroller
+    opacity: 1
+    position: absolute
+    top: 0
+    left: 0
+    width: 1px

package/src/skin/material/view/listview.sass

@@ -1,104 +1,195 @@
-.list
-  flex: 1
-  display: flex
-  flex-direction: column
-  min-width: 260px
-  
-  &.hide
-    display: none
-
+.material-list
+  padding: 0
+  overflow: scroll
 
-  >.head
-    position: relative
+  .material-item
     display: flex
-    flex-direction:row
-    flex: none
-    >.divider
-      flex: 1
-    >.button-search
+    flex-direction: horizontal
+    flex-wrap: nowrap
+    text-align: left
+    width: 100%
+    display: block
+    font-size: 1rem
+    line-height: 1.2rem
+    appearance: span
+    padding: 14px 16px
+
+    //border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    transition: .1s
+
+    &.is-selected
+      background-color: rgba(0, 0, 0, 0.05)
+      transition: .1s
+
+    .ui-icon
       flex: none
-      &.selected
-        background-color: $primary-color
-        .button-icon svg 
-          fill: rgba(255, 255, 255, 1)
+      padding: 24px
+
+    .ui-text
+      flex: 1
+      padding: 16px 12px 16px 0
 
-  >.search-input
-    display: none
+  .material-button
+    display: flex
+    flex-direction: horizontal
+    flex-wrap: nowrap
+    text-align: left
     width: 100%
-    font-size: 1.2em
-    padding: 8px 16px 8px 24px
-    border: none
-    border-bottom: 1px solid rgba(0,0,0,.1)
-    background-color: rgba(0,0,0,.02)
-    margin: 0
-    &.show
-      display: inline-block
-
-  >.body.search
-    display: none
-    overflow: scroll
-    flex: 1
-    &.show
-      display: block
-   
-  >.body
-    overflow: scroll
-    flex: 1
-    // height: 100%
-    .material-button
-      margin: 0
-    .item
-      width: 100%
-      display: flex
-      flex-direction: row
-      padding: 8px 16px 8px 24px
-      border: none
-      background-color: transparent
-      border-radius: 0
-      box-shadow: none
-      border-bottom: 1px solid rgba(0,0,0,.1)
-      &.is-selected 
-        background-color: rgba(1,1,1,.05)
-
-     
-      .image
-        flex: none
-        position: relative
-        width: 64px
-        height: 64px
-        background-color: rgba(0,0,0,.05)
-        //border: 1px solid rgba(0,0,0,.2)
-        background-size: contain
-        background-repeat: no-repeat
-        background-position: center
-        margin-right: 16px
-
-    &.hide
-      display: none
-    .item
-      .info
+    display: block
+    -ms-appearance: span
+    -moz-appearance: span
+    -webkit-appearance: span
+    appearance: span
+
+    .ui-icon
+      flex: none
+      padding: 24px
+
+    .button-label
+      flex: 1
+      padding: 16px 12px 16px 0
+
+  .ui-separator
+    display: block
+    height: 1px
+    margin: 12px
+    background-color: #DDD
+
+
+
+
+
+
+
+  &.type-image
+    max-width: 1000px
+    display: flex
+    flex-wrap: wrap
+    margin: 0 auto
+    padding: 0
+    
+    .material-image
+      //float: left
+      //background-color: red
+      position: relative
+      display: list-item
+      //height: 125px
+      width: 125px
+      overflow: hidden
+      margin: 2px 2px
+      padding: 0
+      //background-color: red
+      -webkit-column-break-inside: avoid
+      break-inside: avoid-column
+      display: list-item
+      text-align: -webkit-match-parent
+      position: relative
+      box-sizing: border-box
+      //margin-bottom: 16px
+
+      .image-image
+        //height: 125px
+        width: 125px
+        display: block
+
+      .image-info
+        // padding: 16px
+        background-color: rgba(0,0,0,.6)
+        display: block
+        position: absolute
+        bottom: 0
+        left: 0
+        right: 0
         display: flex
         flex-direction: row
-      &.selected
-        background-color: rgba(0,0,0,.05)
+        flex-wrap: nowrap
+        padding: 8px 16px
+  
 
-  >.foot
-    display: flex
-    flex-direction: row
-    flex: none
-    border-top: 1px solid rgba(0, 0, 0, 0.1)
-    padding: 8px 16px 8px 24px
-
-.virtual
-  overflow: auto
-  position: relative
-  padding: 0
-  margin: 0
-  width: 100%
-  height: 100%
-  .scroller
-    opacity: 1
-    position: absolute
-    top: 0
-    left: 0
-    width: 1px
+        .image-label
+          line-height: 24px
+          flex: 1 
+          color: rgba(255,255,255,.8)
+          overflow: hidden
+          text-overflow: ellipsis
+          height: 24px
+          // background-color: rgba(0,0,0,.6)
+          // display: block
+          // position: absolute
+          // bottom: 0
+          // left: 0
+          // right: 0
+        .image-icon
+          flex: none
+          svg
+            fill: white
+
+    &.hide-info
+      .image-info
+        display: none !important 
+
+    &.info-below
+      .image-info
+        //display: none !important 
+        color: initial !important 
+        padding: 16px
+        background-color: transparent  !important 
+        //display: block
+        position: initial !important 
+        padding:  8px 0 !important 
+        line-height: 16px
+        // bottom: 0
+        // left: 0
+        // right: 0
+        .image-label
+          line-height: 24px
+          flex: 1 
+          color: rgba(0,0,0,.8)
+        .image-icon
+          flex: none
+          svg
+            fill: rgba(0,0,0,.8)
+
+    &.layout-masonry
+      -webkit-column-count: 3
+      column-count: 3
+      -webkit-column-gap: 16px
+      column-gap: 16px
+      max-width: 1000px
+      display: block
+      flex-wrap: wrap
+      margin: 0 auto
+      padding: 0
+      .material-image
+        //float: left
+        //background-color: red
+        position: relative
+        display: list-item
+        // height: 118px
+        // width: 177px
+        overflow: hidden
+        margin: 0 2px
+        padding: 0
+        background-color: red
+        -webkit-column-break-inside: avoid
+        break-inside: avoid-column
+        display: list-item
+        text-align: -webkit-match-parent
+        position: relative
+        box-sizing: border-box
+        margin-bottom: 16px
+
+        // .image-image
+        //   // height: 118px
+        //   // width: 177px
+        //   display: block
+
+        // .image-label
+        //   color: rgba(255,255,255,.8)
+        //   padding: 16px
+        //   background-color: rgba(0,0,0,.6)
+        //   display: block
+        //   position: absolute
+        //   bottom: 0
+        //   left: 0
+        //   right: 0

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

@@ -6,10 +6,12 @@
   width: 100%
   white-space: no-wrap
   overflow: hidden
+  -webkit-touch-callout: none
+  -webkit-user-select: none
   >.indicator
     position: absolute
     height: 2px
-    transition: 0.2s
+    // transition: 0.2s
   >.tabs
     flex: none
     display: flex
@@ -30,13 +32,13 @@
       margin: 0
       text-align: center
       background-repeat: no-repeat
-      background-size: 30%
+      background-size: 25%
       background-position: center
-      transition: 50ms transform
+      // transition: 50ms transform
       &:hover, &.selected
         background-color: transparent
-        transform: scale(1.1)
-        transition: 50ms transform
+        // transform: scale(1.1)
+        // transition: 50ms transform
       
       &.type-action
         max-width: 60px

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

@@ -0,0 +1,52 @@
+
+// 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
+
+// set all container boder-box
+*
+  box-sizing: border-box
+
+a
+  color: rgba(0, 0, 0, 0.7)