material 0.4.3 → 0.5.1

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

@@ -0,0 +1,136 @@
+// Here is where the magic happens
+
+
+.progress
+  width: 100%
+  height: 4px
+  background-color: lighten($primary-color, 30%)
+  .bar
+    width: 0%
+    height: 100%
+    background-color: $primary-color
+    transition: width 3s
+
+.progress.type-indeterminate
+  position: relative
+  height: 4px
+  display: block
+  width: 100%
+  background-color: lighten($primary-color, 30%)
+  overflow: hidden
+  .determinate
+    position: absolute
+    background-color: inherit
+    top: 0
+    bottom: 0
+    background-color: $primary-color
+    transition: width .3s linear
+  .bar
+    background-color: $primary-color
+    &:before
+      content: ''
+      position: absolute
+      background-color: inherit
+      top: 0
+      left: 0
+      bottom: 0
+      will-change: left, right
+      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
+    &:after
+      content: ''
+      position: absolute
+      background-color: inherit
+      top: 0
+      left: 0
+      bottom: 0
+      will-change: left, right
+      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
+      -webkit-animation-delay: 1.15s
+      animation-delay: 1.15s
+
+@-webkit-keyframes indeterminate
+  0%
+    left: -35%
+    right: 100%
+
+  60%
+    left: 100%
+    right: -90%
+
+  100%
+    left: 100%
+    right: -90%
+
+
+@keyframes indeterminate
+  0%
+    left: -35%
+    right: 100%
+
+  60%
+    left: 100%
+    right: -90%
+
+  100%
+    left: 100%
+    right: -90%
+
+
+@-webkit-keyframes indeterminate-short
+  0%
+    left: -200%
+    right: 100%
+
+  60%
+    left: 107%
+    right: -8%
+
+  100%
+    left: 107%
+    right: -8%
+
+
+@keyframes indeterminate-short
+  0%
+    left: -200%
+    right: 100%
+
+  60%
+    left: 107%
+    right: -8%
+
+  100%
+    left: 107%
+    right: -8%
+
+.progress.type-circular
+  .progress
+    animation: rotator 1.4s linear infinite
+
+  @keyframes rotator
+    0%
+      transform: rotate(0deg)
+
+    100%
+      transform: rotate(270deg)
+
+  .path
+    stroke: #4285F4
+    stroke-dasharray: 187
+    stroke-dashoffset: 0
+    transform-origin: center
+    animation: dash 1.4s ease-in-out infinite
+
+  @keyframes dash
+    0%
+      stroke-dashoffset: 187
+
+    50%
+      stroke-dashoffset: 187 / 4
+      transform: rotate(135deg)
+
+    100%
+      stroke-dashoffset: 187
+      transform: rotate(450deg)

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

@@ -0,0 +1,40 @@
+.search-input
+  position: relative
+  height: 40px
+  width: 100%
+  display: none
+  flex-direction: row
+  border-bottom: 1px solid rgba(0,0,0,.1)
+  background-color: rgba(0,0,0,.02)
+  &.show
+    display: flex
+  >.icon
+    padding: 8px 0 8px 24px
+    svg
+      fill: $primary-color
+  >.input
+    flex: 1
+    font-size: 1.2em
+    padding: 8px 16px 8px 16px
+    border: none
+    margin: 0
+    background-color: transparent
+  
+  >.clear
+    cursor: pointer
+    opacity: .4
+    flex: none
+    width: 46px
+    height: 40px
+    margin: 0
+    background-color: transparent
+    &:focus
+      opacity: .4
+      background-color: transparent
+    &:hover, &:active
+      opacity: .7
+      background-color: transparent
+    .icon
+      svg
+        fill: $primary-color
+      

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

@@ -0,0 +1,131 @@
+.selecter
+  display: flex
+  position: initial
+  margin-right: 20px
+  // margin-bottom: 8px
+  vertical-align: top
+  flex: none
+  display: flex
+  flex-direction: row
+  flex-wrap: nowrap
+
+  label
+    flex: 1
+    order: 0
+    cursor: default
+    font-size: 1rem
+    line-height: 1.2rem
+    padding: 14px 0
+    margin: 0px 2px 0px 0
+    overflow: hidden
+  .value
+    flex: 1
+    order: 1
+    text-align: right
+    cursor: pointer
+    font-size: 1rem
+    line-height: 1.2rem
+    padding: 14px 0
+    margin: 0px 2px 0px 0
+    overflow: hidden
+  input
+    flex: 1
+    display: none
+    user-select: auto
+    color: rgba(0,0,0,.87)
+    float: none
+    width: 100%
+    border: none
+    margin: 0
+    padding: 16px 12px 15px
+    // background-color: rgba(255,255,255,.47)
+    border-radius: 3px
+    background-color: rgba(255,255,255,.67)
+    // border: 1px solid rgba(0,0,0,.1)
+    // transition: .195s background-color
+    &:focus
+      background-color: rgba(255,255,255,1)
+      transition: .225s background-color
+      // border: 1px solid rgba(0,0,0,.5)
+    &:disabled
+      color: rgba(0,0,0,.57)
+      background-color: rgba(255,255,255,.27)
+
+  .list
+    display: none
+    flex-direction: column
+    font-size: .9em
+    color: rgba(0,0,0,.87)
+    color: rgba(255,255,255,.87)
+    z-index: 151
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    width: 100%
+    background-color: #7b7c7f
+    overflow: hidden
+    // transform: translateX(-100%)
+    // transition: .195s transform cubic-bezier(.4,0,.2,1)
+    &.show
+      display: flex
+    .head
+      flex: none
+      display: flex
+      .title
+        font-size: 1.1em
+        flex: 1
+        padding: 16px 20px
+      .close
+        top: 8px
+        right: 8px
+        height: 40px
+        width: 40px
+        background-image: url(/theme/common/icon/close.svg)
+
+    .body
+      flex: 1
+      overflow: auto
+      .item
+        padding: 16px 20px
+        &:hover
+          background-color: rgba(0,0,0,.05)
+
+        &.selected
+          label
+            font-weight: 700px
+
+  input
+    display: none
+    cursor: pointer
+    -webkit-appearance: none
+    appearance: none
+    color: rgba(0,0,0,.87)
+    float: none
+    width: 100%
+    border: none
+    margin: 0
+    padding: 17px 12px 14px
+    // background-color: rgba(255,255,255,.47)
+    border-radius: 3px
+    // border: 1px solid rgba(0,0,0,.1)
+    background-color: rgba(255,255,255,.67)
+    // transition: .195s background-color       
+    &:focus
+      background-color: rgba(255,255,255,1)
+      // border: 1px solid rgba(0,0,0,.5)
+      // transition: .225s background-color
+    &:disabled
+      color: rgba(0,0,0,.57)
+      background-color: rgba(255,255,255,.27)
+
+  .error
+    color: rgba(0,0,0,.87)
+    float: none
+    width: 100%
+    border: none
+    margin: 0
+    background-color: rgba(255,255,255,.87)
+    border-radius: 0
+

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

@@ -0,0 +1,38 @@
+.selector
+  display: block
+  pointer-events: none
+  position: fixed
+  z-index: 1000
+  &.hide
+    display: none
+  &.rounded
+    border-radius: 50%
+    .border
+      border-radius: 50%
+  // transition: .2s top linear, .2s left linear, 
+  >.label
+    color: white
+    position: absolute
+    top: -12px
+    left: 0
+    width: 30px
+    height: 12px
+    background: #247BB6
+  >.border
+    position: absolute
+    top : 0
+    left: 0
+    right: 0
+    bottom: 0
+    border: 1px solid #326FB6
+    border-radius: 3px
+  >.resizer
+    pointer-events: auto
+    display: block
+    width: 3px
+    height: 3px
+    position: absolute
+    bottom: -5
+    right: -5
+    // background-color: #326FB6
+

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

@@ -147,9 +147,9 @@
       order: 3
       cursor: pointer
 
-      .slider-track
+      // .slider-track
 
-      .slider-knob
+      // .slider-knob
 
   &.is-focused
     .slider-control

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

@@ -1,4 +1,4 @@
-.material-switch
+.switch
   display: block
   position: relative
   padding-top: 0
@@ -21,16 +21,159 @@
 
   .switch-label
     flex: 1
+    order: 2
+    cursor: default
+    font-size: 1rem
+    line-height: 1.2rem
+    padding: 14px 0
+    margin: 0px 2px 0px 16px
+    overflow: hidden
+
+  .switch-control
     order: 1
+    cursor: pointer
+    width: 48px
+    height: 48px
+    padding: 17px 7px
+    border-radius: 50%
+    transition: .3s
+
+    .switch-track
+      cursor: pointer
+      position: relative
+      display: block
+      height: 14px
+      padding: 2px
+      background-color: rgba(34, 31, 31, 0.26)
+      border-radius: 7px
+      transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1)
+
+      .switch-knob
+        cursor: pointer
+        position: absolute
+        top: -3px
+        left: -2px
+        display: block
+        height: 20px
+        width: 20px
+        margin: 0
+        border-radius: 50%
+        background-color: rgba(241, 241, 241, 1)
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12)
+        transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1)
+
+        &::after
+          position: absolute
+          top: -14px
+          left: -14px
+          width: 48px
+          height: 48px
+
+          // -webkit-transform: scale(0);
+          // transform: scale(0);
+          // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
+          border-radius: 24px
+          content: ""
+
+          //opacity: .2;
+          transition: .2s
+
+  &.is-checked
+    .switch-track
+      background-color: rgba($secondary-color, .3)
+
+      .switch-knob
+        background-color: $secondary-color
+        left: 15px
+
+  &.is-focused
+    .switch-track
+      .switch-knob
+        &::after
+          transition: .2s
+          position: absolute
+          top: -14px
+          left: -14px
+          width: 48px
+          height: 48px
+          border-radius: 24px
+          background-color: rgba(0, 0, 0, 0.05)
+          content: ""
+
+  &.is-disabled
+    .switch-label
+      opacity: .5
+
+    .switch-control
+      order: 3
+      cursor: pointer
+      width: 48px
+      height: 48px
+      padding: 17px 7px
+
+      //border-radius: 50%;
+      //transition: .1s;
+      .switch-track
+        background-color: rgba(34, 31, 31, 0.1)
+
+        .switch-knob
+          background-color: rgb(189, 189, 189)
+          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06)
+
+.dark-mode
+  .material-switch
+    .switch-control
+      .switch-track
+        background-color: rgba(255, 255, 255, 0.5)
+
+    &.is-checked
+      .switch-track
+        background-color: rgba($secondary-color, .3)
+
+    &.is-focused
+      .switch-control
+        .switch-track
+          .switch-knob
+            &::after
+              background-color: rgba(255, 255, 255, 0.05)
+
+
+.material-switch
+  display: block
+  position: relative
+  padding-top: 0
+  padding-bottom: 0
+  margin-right: 16px
+  vertical-align: top
+  display: flex
+  flew-direction: horizontal
+  flex-wrap: nowrap
+
+  //overflow: hidden;
+  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
+  input
+    position: absolute
+    left: -10000px
+
+    &:active
+      //background-color: #D6E5E4;
+      //transition: .1s;
+
+  .switch-label
+    flex: 1
+    order: 2
     cursor: default
     font-size: 1rem
     line-height: 1.2rem
     padding: 14px 0
-    margin: 0px 2px 0px 0
+    margin: 0px 2px 0px 16px
     overflow: hidden
 
   .switch-control
-    order: 3
+    order: 1
     cursor: pointer
     width: 48px
     height: 48px

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

@@ -0,0 +1,41 @@
+.switcher
+
+  position: relative
+  margin-right: 16px
+  padding-top: 8px
+  margin-bottom: 8px
+  vertical-align: top
+  label
+    display: block
+    color: rgba(0,0,0,.4)
+    font-size: 0.7em
+    font-weight: 600
+    text-transform: uppercase
+    margin-bottom: 3px
+  ul
+    user-select: none
+    display: inline-block
+    list-style: none
+    padding: 0
+    height: 40px
+    margin: 0
+    padding: 5px
+    border-radius: 20px
+    background-color: rgba(0, 0, 0, 0.03)
+    li
+      cursor: pointer
+      font-size: .8em
+      font-weight: 600
+      padding: 8px 16px 7px
+      display: inline-block
+      border-radius: 16px
+      &.selected
+        //color: rgba(255,255,255, 1)
+        // background-color: #4891F4
+        background-color: white
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12)
+      &.preselected
+        //color: rgba(255,255,255, 1)
+        // background-color: #4891F4
+        background-color: white
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12)

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