material 0.9.25 → 0.9.27

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

@@ -1,136 +0,0 @@
-// 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

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

@@ -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)
-
-