material 0.9.25 → 0.9.26

package/src/skin/material/container/dialog.sass

@@ -1,172 +0,0 @@
-.dialog
-  position: fixed
-  top: 0
-  left: 0
-  bottom: 0
-  right: 0
-  background-color: rgba(0, 0, 0, 0.5)
-  display: flex
-  align-items: center
-  justify-content: center
-  overflow: hidden
-
-  //display: none;
-  //visibility: hidden;
-  opacity: 0
-
-  //z-index: -1;
-  transition: .2s
-
-  &.show
-    // display: flex;
-    // width: 10;
-    // height: 0;
-    //transition: .2s;
-    transition: .1s
-    opacity: 1
-
-    .surface
-      transform: translateY(0) scale(1)
-      opacity: 1
-      margin-top: 0
-      transition: .1s
-
-  .surface
-    transition: .1s
-    max-height: 600px
-    display: flex
-    flex-direction: column
-    flex-wrap: nowrap
-    opacity: 0
-    border-radius: 2px
-    background-color: $background-color
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
-    transform: translateY(150px) scale(0.8)
-
-.material-dialog
-  position: fixed
-  top: 0
-  left: 0
-  bottom: 0
-  right: 0
-
-  //height: 0;
-  background-color: rgba(0, 0, 0, 0.5)
-  display: -webkit-box
-  display: -ms-flexbox
-  display: flex
-  align-items: center
-  justify-content: center
-  overflow: hidden
-
-  //display: none;
-  //visibility: hidden;
-  z-index: 20
-  opacity: 0
-
-  //z-index: -1;
-  transition: .2s
-
-  .dialog-surface
-    transition: .1s
-    max-height: 600px
-    display: flex
-    min-width: 320px
-    flex-direction: column
-    flex-wrap: nowrap
-    opacity: 0
-    overflow: hidden
-    border-radius: 2px
-    background-color: $background-color
-    overflow: scroll
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
-    transform: translateY(150px) scale(0.8)
-
-    // >*:first-child
-    //   margin-top: 24px
-
-
-    .dialog-title
-      font-weight: bold
-      flex: none
-      margin: 24px 24px 24px 24px
-      padding: 0
-
-    .dialog-content
-      flex: 1
-      padding: 0 24px 24px 24px
-      &.material-text
-        opacity: .7
-
-    .dialog-actions
-      flex: none
-      display: block
-      text-align: right
-      overflow: hidden
-      //padding: 8px
-
-    .material-toolbar
-      position: relative
-
-
-    .component-body
-      flex: 1
-      overflow: hidden
-      position: relative
-      padding: 16px
-
-    .list-list
-      overflow: scroll
-      position: relative
-      padding: 0
-      border-top: 1px solid rgba(0, 0, 0, 0.1)
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1)
-
-    .component-action
-      flex: none
-      display: 'flex'
-      text-align: right
-
-      // float: right;
-      // justify-content: flex-end;
-      padding: 8px
-
-      .material-button
-        margin: 0 0 0 8px
-
-  &.dialog-show
-    // display: flex;
-    // width: 10;
-    // height: 0;
-    //transition: .2s;
-    transition: .1s
-    opacity: 1
-
-    //
-    .dialog-surface
-      transform: translateY(0) scale(1)
-      opacity: 1
-      margin-top: 0
-      transition: .1s
-
-  &.dialog-closing
-    pointer-events: none
-    opacity: 0
-
-    // display: flex;
-    // width: 10;
-    // height: 0;
-    transition: .2s
-
-    // transition: .2s;
-    //opacity: 1;
-    //
-    .dialog-surface
-      opacity: 0
-      transform: translateY(150px) scale(0.8)
-      transition: .1s
-
-.dark-mode .material-dialog,
-.material-dialog.dark-mode
-  .dialog-surface
-    background-color: $background-color-dark

package/src/skin/material/container/drawer.sass

@@ -1,159 +0,0 @@
-.material-drawer
-  opacity: 0
-  pointer-events: none
-  z-index: 15
-  position: absolute
-  right: 0
-  top: 0
-  bottom: 0
-  left: 0
-  background-color: rgba(0, 0, 0, 0)
-
-  &.is-fixed
-    position: fixed
-
-  .drawer-panel
-    background-color: rgba(255,255,255, 1)
-    z-index: 8
-    position: relative
-    will-change: transfo1rm
-    transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1)
-    transform: translateX(calc(100% - 20px))
-    background-color: rgba(255, 255, 255, 1)
-    width: 0
-
-  &.show
-    pointer-events: initial
-    background-color: rgba(0, 0, 0, 0)
-    opacity: 1
-    .drawer-panel
-      transition: 233ms cubic-bezier(0,0,.21,1)
-      opacity: 1
-      transform: translateX(0)
-      transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-      background-color: rgba(255, 255, 255, 1)
-
-.material-drawer.drawer-temporary
-  opacity: 0
-  pointer-events: none
-  z-index: 15
-  position: absolute
-  right: 0
-  top: 0
-  bottom: 0
-  left: 0
-  transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-
-  &.show
-    pointer-events: initial
-    background-color: rgba(0, 0, 0, 0.7)
-    opacity: 1
-    transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-    .drawer-panel
-      width: 340px
-      transform: none
-
-  &.is-fixed
-    position: fixed
-
-  .drawer-panel
-    position: absolute
-    height: 100%
-    width: 260px
-    transform: translateX(calc(-100% - 20px))
-    z-index: 16
-    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-    transition: 233ms cubic-bezier(0,0,.21,1)
-
-.material-drawer.drawer-persistent
-  opacity: 0
-  pointer-events: none
-  z-index: 15
-  flex: 1
-  position: relative
-  display: inline
-  // right: 0
-  // top: 0
-  // bottom: 0
-  // left: 0
-  transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-  height: 100%
-  width: initial
-
-  &.is-fixed
-    position: fixed
-
-  .drawer-panel
-    position: relative
-    height: 100%
-    width: 0px
-    //transform: translateX(calc(-100% - 20px))
-    transform: none
-    z-index: 16
-    //box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-    transition: 233ms cubic-bezier(0,0,.21,1)
-    border-right: 1px solid rgb(228, 228, 228)
-
-  .content-persistent
-    //flex: 1
-
-  &.show
-    pointer-events: initial
-    //background-color: rgba(0, 0, 0, 0.7)
-    opacity: 1
-    transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-    .drawer-panel
-      width: 240px
-      transform: none
-      background-color: rgba(0,0,0,.05)
-      
-
-
-
-.material-drawer.drawer-permanent
-  opacity: 1
-  pointer-events: none
-  z-index: 15
-  flex: 1
-  position: relative
-  display: inline
-  right: 0
-  top: 0
-  bottom: 0
-  left: 0
-  transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
-  height: 100%
-  width: initial
-  
-  &.is-fixed
-    position: fixed
-
-  .material-toolbar
-    position: relative
-
-  .drawer-panel
-    position: relative
-    height: 100%
-    width: 340px
-    //width: 0px
-    //transform: translateX(calc(-100% - 20px))
-    transform: none
-    z-index: 16
-    //box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-    transition: 190ms cubic-bezier(0,0,.21,1)
-    border-right: 1px solid rgb(228, 228, 228)
-
-  .content-permanent
-    //flex: 1
-
-  &.show
-    pointer-events: initial
-    background-color: rgba(0, 0, 0, 0.7)
-    opacity: 1
-    transition: 233s cubic-bezier(0, 0, .21, 1)
-    .drawer-panel
-      width: 340px
-      transform: none
-      
-
-

package/src/skin/material/container/menu.sass

@@ -1,58 +0,0 @@
-.material-menu
-  z-index: 50
-  position: absolute
-  display: inline-block
-  background-color: rgba(255, 255, 255, 1)
-  border-radius: 2px
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
-  top: -1000px
-  //transform: translate(-50%, -50%) scale(0)
-  //transform: translateY(-50%) scale(0)
-  //opacity: 0
-  //transition: height .1s
-  //height: 0
-  //width: 0
-  overflow: hidden
-  height: 0
-  &.menu-show
-    height: auto
-    transition: height 1s
-    //transform: translate(0, 0) scale(1) 
-    // transform: translateY(0) scale(1)
-    //transform: translateY(100)
-    //height: initial
-    //width: initial
-    //opacity: 1
-
-  .material-list
-    position: relative
-    bottom: 0
-    padding: 8px 0
-  
-  .material-list .material-item,
-  .material-item
-    display: block
-    padding: 8px 64px 8px 16px
-    &:active
-      transition: .2s
-      background-color: rgba(0, 0, 0, 0.05)
-
-  .material-divider
-    display: block
-    height: 1px
-    padding: 0
-    background-color: rgba(0, 0, 0, 0.05)
-    margin: 8px 0
-
-.menu-mask
-  top: 0
-  pointer-events: none
-  z-index: 49
-  position: fixed
-  height: 100%
-  width: 100%
-  transition: .3s
-  &.mask-show
-    transition: .3s
-    pointer-events: auto
-    background-color: rgba(0,0,0,.05)

package/src/skin/material/container/snackbar.sass

@@ -1,18 +0,0 @@
-.material-snackbar
-  position: absolute
-  display: inline-block
-  bottom: 0
-  left: 50%
-  box-sizing: border-box
-  border-radius: 2px
-  overflow: hidden
-  background-color: rgb(50, 50, 50)
-  padding: 8px 16px
-  bottom: -56px
-  transition: .3s
-  &.show
-    bottom: 0
-    transition: .3s
-  .material-text
-    line-height: 2.4rem
-    color: rgba(255,255,255,.95)

package/src/skin/material/container/tabs.sass

@@ -1,75 +0,0 @@
-.material-tabs
-  position: relative
-  text-align: center
-  overflow: hidden
-  white-space: nowrap
-  >.material-list
-    display: inline-block
-    white-space: nowrap
-    padding: 0
-    margin: 0
-    text-align: center
-    white-space: nowrap
-    .material-button
-      font-size: 0.875rem
-      font-weight: 500
-      letter-spacing: 0.04em
-      line-height: 1.5rem
-      text-decoration: inherit
-      text-transform: uppercase
-      display: table-cell
-      position: relative
-      display: inline-block
-      width: initial
-      min-width: 160px
-      min-height: 48px
-      padding: 0 24px
-      text-align: center
-      text-decoration: none
-      white-space: nowrap
-      cursor: pointer
-      overflow: hidden
-      vertical-align: middle
-      transition: .4s
-      margin: 0
-      background-color: transparent
-  .material-indicator
-    position: absolute
-    height: 2px
-    bottom: 0
-    background-color: $primary-color
-    transition: .2s
-
-  &.primary-color
-    background-color: $primary-color
-    .material-list
-      .material-button
-        color: $primary-color-text
-      .material-ripple
-        background-color: $primary-color-text
-    .material-indicator
-      background-color: $primary-color-text
-  &.secondary-color
-    background-color: $secondary-color
-    .material-list
-      .material-button
-        color: $secondary-color-text
-      .material-ripple
-        background-color: $secondary-color-text
-    .material-indicator
-      background-color: $secondary-color-text
-
-.material-tabs.small
-  .material-list
-    .material-button
-      font-size: 0.475rem
-      font-weight: 500
-      letter-spacing: 0.04em
-      line-height: 1rem
-      min-width: 80px
-      min-height: 18px
-      padding: 0 14px
-      margin: 0
-      background-color: transparent
-      label
-        padding: 8px

package/src/skin/material/container/toolbar.sass

@@ -1,161 +0,0 @@
-.material-toolbar
-  display: flex
-  flex-direction: row
-  //height: 64px
-
-  // position: absolute
-  // top: 0
-  // left: 0
-  // right: 0
-
-  z-index: 3
-  flex: none
-  display: flex
-  flex-direction: row
-  flex-wrap: nowrap
-  //padding: 14px 16px
-
-  &.type-app
-    z-index: 5
-    padding: 14px 16px
-    position: fixed
-    &.is-flexible
-      position: fixed
-    &.is-scrolled
-      transition: box-shadow .3s
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
-
-
-  &.is-flexible
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    //display: block
-
-  &.is-fixed
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    //display: block
-    &.is-scrolled
-      transition: box-shadow .3s
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28)
-
-
-
- 
-
-  
-
-  
-  > *
-    &:first-child
-      margin-left: 0
-
-    &:last-child
-      margin-right: 0
-
-
-  .material-text
-    flex: 1
-    display: inline-block
-    font-size: 1.3rem
-    font-weight: 300
-    line-height: 2.3rem
-    //color: $primary-color-text
-    padding: 0
-    margin-left: 16px
-    overflow: hidden
-    white-space: nowrap
-    text-overflow: ellipsis
-
-  .material-checkbox
-    padding: 0
-    .checkbox-control
-      height: 36px
-      width: 36px
-      margin: 0
-      .checkbox-icon
-        border: 2px solid rgba(255, 255, 255, 0.95)
-    .checkbox-label
-      color: $primary-color-text
-      padding: 10px 0 6px
-
-
-
-  .material-button
-    .button-icon
-      svg
-        fill: $default-color-icon
-
-
-  &.transparent-color
-    background-color: transparent
-    .material-text
-      color: $default-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $default-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $default-color-text
-        padding: 10px 0 6px
-
-  &.primary-color
-    background-color: $primary-color
-    .material-text
-      color: $primary-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $primary-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $primary-color-text
-        padding: 10px 0 6px
-
-  &.secondary-color
-    background-color: $secondary-color
-    .material-text
-      color: $secondary-color-text
-    .material-button
-      .button-icon
-        svg
-          fill: $secondary-color-text
-    .material-checkbox
-      padding: 0
-      .checkbox-control
-        height: 36px
-        width: 36px
-        margin: 0
-        .checkbox-icon
-          border: 2px solid rgba(255, 255, 255, 0.95)
-      .checkbox-label
-        color: $secondary-color-text
-        padding: 10px 0 6px
-
-
-
-
-// @media only screen and (max-width: 768px)
-//   .material-toolbar
-//     &.type-app
-//       padding: 10px 16px
-