material 0.5.1 → 0.5.3

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

@@ -1,181 +0,0 @@
-.material-slider
-  display: block
-  position: relative
-  padding-top: 0
-  padding-bottom: 16px
-  margin-right: 8px
-  vertical-align: top
-  display: flex
-  flex-direction: column
-  flex-wrap: nowrap
-
-  //overflow: hidden;
-  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
-  input
-    position: absolute
-    left: -10000px
-
-  .slider-label
-    flex: 1
-    order: 1
-    cursor: default
-    padding: 16px 0
-    margin: 0px 2px 0px 0
-    overflow: hidden
-
-  .slider-control
-    order: 3
-    position: relative
-    cursor: pointer
-    width: 100%
-    height: 48px
-    padding: 0 8px
-
-    .slider-track
-      position: absolute
-      z-index: 1
-      cursor: pointer
-      position: relative
-      display: block
-      height: 48px
-      padding: 0
-
-      //background-color: rgba(34, 31, 31, .26);
-      transition: .3s
-
-    .slider-canvas
-      position: absolute
-      top: 0
-      left: 0
-
-    .slider-track-value
-      position: absolute
-      width: 0
-      top: 50%
-      z-index: 2
-      cursor: pointer
-      display: block
-      height: 2px
-      padding: 0
-      background-color: #4054B2
-      border-radius: 7px
-
-    .slider-marker
-      opacity: 0
-      transform: scale(0.1) translateY(60px)
-      text-align: center
-      font-size: 9px
-      color: white
-      position: absolute
-      width: 32px
-      height: 32px
-      top: -17px
-      z-index: 2
-      cursor: pointer
-      margin: auto
-      border-radius: 50%
-      transition: .2s
-
-      .slider-pin
-        fill: $secondary-color
-
-    .slider-knob
-      z-index: 3
-      cursor: pointer
-      position: absolute
-      top: 50%
-      left: 0px
-      display: block
-      height: 12px
-      width: 12px
-      margin: 0
-      transform: translateY(-5px)
-      border-radius: 50%
-      background-color: white
-      border: 2px solid rgba(241, 241, 241, 100)
-
-      //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-      transition: .2s
-
-      &.notnull
-        background-color: #4054B2
-        border: 2px solid #4054B2
-
-      &:active
-        background-color: #4054B2
-        border: 2px solid #4054B2
-
-      &:hover
-        // background-color: #4054B2;
-        // border: 2px solid #4054B2;
-
-    &.dragging
-      .slider-knob
-        top: 50%
-        background-color: white
-        border: 2px solid rgba(241, 241, 241, 100)
-
-        //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-        transition: none
-        transform: scale(1.5) translateY(-4px)
-
-        &.notnull
-          background-color: #4054B2
-          border: 2px solid #4054B2
-
-  &.is-checked
-    .slider-track
-      background-color: rgba(0, 150, 136, 0.5)
-
-      .slider-knob
-        background-color: rgba(0, 150, 136, 1)
-        left: 15px
-
-  &.is-disabled
-    .slider-label
-      opacity: .5
-
-    .slider-control
-      .slider-track
-        .slider-knob
-          background-color: #BDBDBD
-          border: 2px solid white
-
-        .slider-track-value
-          background-color: #BDBDBD
-
-      order: 3
-      cursor: pointer
-
-      .slider-track
-
-      .slider-knob
-
-  &.is-focused
-    .slider-control
-      .slider-knob
-        height: 18px
-        width: 18px
-        border: 32px solid rgba(0, 0, 0, 0.05)
-
-  &.type-discrete
-    .slider-control
-      &.dragging
-        .slider-marker
-          opacity: 1
-          transform: scale(1) translateY(0)
-          display: block
-          transition: none
-
-        .slider-knob
-          opacity: 0
-          transform: scale(0.2)
-          display: block
-          transition: .2s
-
-.dark-mode
-  .material-slider
-    .slider-control
-      .slider-track
-        .slider-tarck-value
-          background-color: #5C5C5C

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

@@ -1,284 +0,0 @@
-.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 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 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)

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

@@ -1,35 +0,0 @@
-.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
-    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)

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

@@ -1,126 +0,0 @@
-.material-textfield
-  display: block
-  position: relative
-  margin-right: 16px
-  padding-top: 8px
-  margin-bottom: 16px
-  vertical-align: top
-  .textfield-label
-    transition: .2s
-    color: rgba(0, 0, 0, 0.3)
-    position: absolute
-    font-size: .7em
-    top: -2px
-
-  .textfield-underline
-    position: absolute
-    opacity: 0
-    left: 50%
-    bottom: 0px
-    height: 2px
-    width: 2px
-    background-color: #4891F4
-    transition: .1s
-
-  &.textfield-error
-    .textfield-label
-      color: #F44336
-      color: #D6392C
-
-    textarea,
-    input
-      border-bottom: 1px solid #F44336
-
-  &.hide
-    display: none
-
-// states
-.material-textfield
-  &.is-focused
-    .textfield-label
-      transition: .2s
-
-    .textfield-underline
-      opacity: 1
-      display: block
-      width: 100%
-      left: 0
-      transition: .1s
-      background-color: $primary-color
-
-  &.is-empty
-    .textfield-label
-      transition: .2s
-      pointer-events: none
-      position: absolute
-      top: 20px
-      left: 0
-      display: block
-      font-size: 1em
-      padding: 0 2px 0 0
-
-    &.is-focused
-      .textfield-label
-        transition: .2s
-        font-size: .7em
-        top: -2px
-
-    .textfield-input
-      float: none
-      width: 100%
-      border: none
-      margin: 0
-
-      // margin-top: 13px;
-      background-color: transparent
-      border-radius: 0
-      border-bottom: 1px solid rgba(0, 0, 0, 0.12)
-
-      //outline:none;
-
-  .textfield-input
-    float: none
-    width: 100%
-    padding: 12px 8px 8px 0
-    border: none
-    margin: 0
-    background-color: transparent
-    border-radius: 0
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12)
-
-    //outline:none;
-    &:hover
-      cursor: default
-
-      //background-color: rgba(100, 100, 100, .06);
-
-    &:focus
-      cursor: text
-
-  input[readonly],
-  textarea[readonly]
-    //color: #9A9A9A;
-    //color: rgba(0, 0, 0, 1);
-    //background-color: rgba(255,255,255,1);
-    border-bottom: 1px solid transparent
-
-    &:hover
-      cursor: default
-
-      //background-color: rgba(255,255,255,1);
-
-    &:focus,
-    &:active
-      cursor: text
-      border-bottom: 1px solid transparent !important
-
-      //background-color: rgba(255,255,255,1);
-
-.dark-mode
-  .material-textfield
-    .textfield-label
-      transition: .2s
-      color: rgba(255, 255, 255, 0.3)
-
-    .textfield-input
-      border-bottom: 1px solid rgba(255, 255, 255, 0.12)

package/src/skin/material.bak/control/tooltip.sass

@@ -1,36 +0,0 @@
-.tooltip
-  z-index: 100
-  // pointer-events: none
-  display: none
-  position: absolute
-  background-color: rgba(0,0,0,.7)
-  max-width: 200px
-  text-align: center
-  padding: 4px 8px 8px
-  transform: translateY(24px)
-  border-radius: 3px
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
-  &.show
-    display: block
-    >.label
-      font-size: .8em
-      line-height: 1em
-      color: rgba(255,255,255,.87)
-    >.pointer
-      display: block
-      width: 100%
-      height: 8px
-      position: absolute
-      left: 0
-      right: 0
-      top: -8px
-      background-image: url('/theme/minimal/icon/tooltip.svg')
-      background-position: center
-      background-size: contain
-      background-repeat: no-repeat
-
-
-@media only screen and (max-width: 640px)
-  .tooltip
-    display: none
-   

package/src/skin/material.bak/icon/back.svg

@@ -1,5 +0,0 @@
-export default `
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-</svg>`;

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

@@ -1 +0,0 @@
-<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.bak/icon/checkbox.svg

@@ -1,4 +0,0 @@
-export default `
-<svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">
-  <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>
-</svg>`;

package/src/skin/material.bak/icon/forward.svg

@@ -1,5 +0,0 @@
-export default `
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
-</svg>`;

package/src/skin/material.bak/icon/menu.svg

@@ -1,4 +0,0 @@
-<svg fill="red" height="24" viewBox="0 0 24 24" width="24">
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-</svg>

package/src/skin/material.bak/icon/pin.svg

@@ -1,4 +0,0 @@
-export default `
-<svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">
-  <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z"></path>
-</svg>`;