material 0.9.24 → 0.9.26

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)

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

@@ -1,41 +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
-    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

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

@@ -1,69 +0,0 @@
-.material-layout
-  // overflow: hidden;
-  // padding: 0;
-  // margin: 0;
-  // height: 100%;
-  // position: absolute;
-  // top: 0;
-  // bottom: 0;
-  // left: 0;
-  // right: 0;
-
-.flex-row,
-.flex-raw
-  display: flex
-  flex-direction: row
-  flex-wrap: nowrap
-
-  > .ui-container
-    height: inherit
-
-.flex-column
-  display: flex
-  flex-direction: column
-  flex-wrap: nowrap
-
-  > .material-container
-    width: inherit
-
-.display-absolute
-  display: absolute
-
-.flex-none
-  flex: none
-
-.flex-1
-  flex: 1
-
-.flex-2
-  flex: 2
-
-.flex-3
-  flex: 3
-
-.flex-4
-  flex: 4
-
-.flex-5
-  flex: 5
-
-.flex-6
-  flex: 6
-
-.flex-7
-  flex: 7
-
-.flex-8
-  flex: 8
-
-.flex-9
-  flex: 9
-
-.flex-10
-  flex: 10
-
-.flex-11
-  flex: 11
-
-.flex-12
-  flex: 12

package/src/skin/material/layout/resizer.sass

@@ -1,69 +0,0 @@
-
-.resizer-layer
-  position: absolute
-  top: 0
-  left: 0
-
-.ui-resizer
-  opacity: .2
-  position: absolute
-  z-index: 200
-  right: -3px
-  bottom: -3px
-  width: 12px
-  height: 12px
-  cursor: nwse-resize
-
-  // &:hover, &.drag {
-  // 	background-color: rgba(66, 133, 244, .5);
-  // }
-
-.resizer-height
-  cursor: ns-resize
-  position: absolute
-  z-index: 100
-  left: 0
-  width: 100%
-  height: 5px
-
-.resizer-width
-  cursor: ew-resize
-  position: absolute
-  z-index: 100
-  top: 0
-  height: 100%
-  width: 5px
-
-.ui-resizer-height,
-.ui-resizer-width,
-.ui-resizer-top,
-.ui-resizer-right,
-.ui-resizer-bottom,
-.ui-resizer-left
-  background-color: rgba(255, 165, 0, 5)
-  opacity: .5
-  position: absolute
-  z-index: 100
-
-  &:hover
-    //background-color: rgba(255, 165, 0,5);
-
-.ui-resizer-height,
-.ui-resizer-top,
-.ui-resizer-bottom
-  cursor: ns-resize
-  position: absolute
-  z-index: 100
-  left: 0
-  width: 100%
-  height: 5px
-
-.ui-resizer-width,
-.ui-resizer-right,
-.ui-resizer-left
-  cursor: ew-resize
-  position: absolute
-  z-index: 100
-  top: 0
-  height: 100%
-  width: 5px

package/src/skin/material/material.sass

@@ -1,66 +0,0 @@
-
-// font
-// @import ../../../vendor/roboto/roboto.css
-
-// base
-@import base/body.sass
-@import base/typo.sass
-@import base/elevation.sass
-
-// theme
-@import theme/default.sass
-@import theme/theme.sass
-
-// module
-@import module/ripple.sass
-
-// component
-@import component/component.sass
-@import component/text.sass
-@import component/image.sass
-@import component/subheader.sass
-@import component/label.sass
-@import component/divider.sass
-@import component/progress.sass
-
-// container
-@import container/banner.sass
-@import container/card.sass
-@import container/menu.sass
-@import container/dialog.sass
-@import container/container.sass
-@import container/drawer.sass
-@import container/tabs.sass
-@import container/appbar.sass
-@import container/toolbar.sass
-@import container/snackbar.sass
-
-// button
-@import button/button.sass
-@import button/raised.sass
-@import button/floating.sass
-@import button/action.sass
-@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
-@import view/list.sass
-@import view/form.sass
-@import view/tree.sass
-@import view/calendar.sass
-@import view/page.sass
-@import view/tabview.sass
-
-// layout
-@import layout/layout.sass
-@import layout/resizer.sass

package/src/skin/material/module/ripple.sass

@@ -1,9 +0,0 @@
-.material-ripple, .ripple
-  opacity: 1
-  pointer-events: none
-  z-index: 1
-  position: absolute
-  background-color: rgba(255, 255, 255, 0.1)
-  height: 5px
-  width: 5px
-  border-radius: 50%