material 0.9.25 → 0.9.26

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

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

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

@@ -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/control/snackbar.sass

@@ -1,65 +0,0 @@
-$width: 500px
-
-.snackbars
-  position: absolute
-  z-index: 300
-  display: flex
-  width: $width
-  flex-direction: column
-  background-color: rgba(0,0,0,.1)
-  bottom: 160px
-  width: 100%
-  .snackbar
-    overflow: hidden
-    display: flex
-    opacity: 0
-    height: 2px
-    flex-direction: row
-    padding: 0
-    margin: 2px
-    background-color: #322F35
-    border-radius: 4px
-    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)
-    transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
-    &.show
-      opacity: 1
-      padding: 8px
-      height: initial
-      transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
-    .text
-      line-height: 2em
-      padding-left: 8px
-      flex: 1
-      color: rgba(255,255,255,.87)
-    button.action
-      flex:none
-      display: none
-      color: green
-      .show
-        display: inline-block
-    .close
-      flex: none
-      display: none
-      width: 24px
-      height: 24px
-      min-width: 24px
-      background-image: url('../../theme/common/icon/dark/close.svg')
-      background-color: transparent
-      &:hover, &:active
-        background-color: transparent
-      &.show
-        display: inline-block
-
-
-@media only screen and (min-width: $desktop_switch)
-  .snackbars
-    left: 50%
-    bottom: 200px
-    margin-left: calc(-$width / 2)
-    width: $width
-    transition: 195ms bottom cubic-bezier(0.4, 0, 0.2, 1)
-    &.up
-      bottom: 500px
-      transition: 225ms bottom cubic-bezier(0.4, 0, 0.2, 1)
-
-      

package/src/skin/material/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)