material 0.9.25 → 0.9.26

package/src/skin/material/base/body.sass

@@ -1,55 +0,0 @@
-
-// HTML Tags General Defintion
-html
-  font-size: 100%
-  line-height: 1.15
-  width: 100%
-  height: 100%
-
-body
-  color: rgba(0, 0, 0, 0.67)
-  font-family: Roboto, arial, serif
-  font-size: 100%
-  // position: relative
-  // display: block
-  // height: 100%
-  // width: 100%
-  // overflow: hidden
-  margin: 0
-  padding: 0
-  // user-select: none
-
-input,
-textarea,
-keygen,
-select,
-button
-  font-size: 1em
-  font-family: Roboto, arial, serif
-  color: rgb(51, 51, 51)
-
-p
-  line-height: 20px
-  padding-top: 6px
-  margin-bottom: 14px
-  letter-spacing: 0
-  font-weight: 400
-
-// get rid of outline
-select,
-input,
-textarea,
-button
-  outline: none
-  &:hover
-    outline: none
-
-button
-  user-select: none
-
-// set all container boder-box
-*
-  box-sizing: border-box
-
-a
-  color: rgba(0, 0, 0, 0.7)

package/src/skin/material/base/typo.sass

@@ -1,107 +0,0 @@
-.material-text
-  &.type-display4
-    font-size: 7rem
-    font-weight: 300
-    letter-spacing: -0.04em
-    line-height: 7rem
-
-  &.type-display3
-    font-size: 3.5rem
-    font-weight: 400
-    letter-spacing: -0.02em
-    line-height: 3.5rem
-
-  &.type-display2
-    font-size: 2.813rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 3rem
-
-  &.type-display1
-    font-size: 2.125rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2.5rem
-
-  &.type-headline
-    font-size: 1.5rem
-    font-weight: 400
-    letter-spacing: normal
-    line-height: 2rem
-
-  &.type-title
-    font-size: 1.25rem
-    font-weight: 500
-    letter-spacing: 0.02em
-    line-height: 2rem
-
-  &.type-subheading2
-    font-size: 1rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.75rem
-
-  &.type-subheading1
-    font-size: 0.938rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.type-body1
-    font-size: 0.875rem
-    font-weight: 400
-    letter-spacing: 0.04em
-    line-height: 1.25rem
-
-  &.type-body2
-    font-size: 0.875rem
-    font-weight: 500
-    letter-spacing: 0.04em
-    line-height: 1.5rem
-
-  &.type-caption
-    font-size: 0.75rem
-    font-weight: 400
-    letter-spacing: 0.08em
-    line-height: 1.25rem
-
-  &.type-button
-    font-size: 14px
-    font-weight: 500
-
-    // margin-bottom: 30px;
-    margin-left: 8px
-
-  &.style-adjust
-    &.type-display4
-      margin: -1rem 0 3.5rem -0.085em
-
-    &.type-display3
-      margin: -8px 0 64px -0.07em
-
-    &.type-display2
-      margin: -0.5rem 0 4rem -0.07em
-
-    &.type-display1
-      margin: -0.5rem 0 4rem -0.07em
-
-    &.type-headline
-      margin: -0.5rem 0 1rem -0.06em
-
-    &.type-title
-      margin: -0.5rem 0 1rem -0.05em
-
-    &.type-subheading2
-      margin: -0.5rem 0 1rem -0.06em
-
-    &.type-subheading1
-      margin: -0.313rem 0 0.813rem -0.06em
-
-    &.type-body1
-      margin: -0.25rem 0 0.75rem 0
-
-    &.type-body2
-      margin: -0.25rem 0 0.75rem 0
-
-    &.type-caption
-      line-height: 1.25rem

package/src/skin/material/button/action.sass

@@ -1,89 +0,0 @@
-
-// type action
-.button.type-action
-  min-width: 36px
-  transition: box-shadow .2s
-  box-shadow: none
-  border-radius: 50%
-  padding: 6px
-  .button-icon
-    padding: 0
-    height: 24px
-    width: 24px
-    margin-left: 0
-    svg
-      fill: $default-color-text
-
-// styles
-.button.type-action
-  &.style-dense,
-  &.style-compact
-    height: 32px
-    width: 32px
-    min-width: 32px
-    border-radius: 50%
-    .button-icon
-      width: 20px
-      height: 20px
-      svg
-        width: 20px
-        height: 20px
-        viewbox: 0 0 20 20
-
-
-// states
-.button.type-action
-  &:hover
-    //background-color: #E0E0E0;
-
-  &:focus
-    //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
-
-  .material-ripple
-    //background-color: rgba(255, 255, 255, 1)
-
-// color
-.button.type-action
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    &:focus
-      background-color: lighten($primary-color, 10%)
-      color: $primary-color-text
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    &:focus
-      background-color: lighten($secondary-color, 5%)
-      color: $secondary-color-text
-
-
-// theme
-.dark-mode .button.type-action,
-.button.type-action.dark-mode
-
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-
-
-
-

package/src/skin/material/button/button.sass

@@ -1,183 +0,0 @@
-.button
-  display: flex
-  -webkit-font-smoothing: antialiased
-  white-space: nowrap
-  position: relative
-  vertical-align: middle
-  cursor: default
-  height: 36px
-  padding: 6px 8px 6px 8px
-  margin: 0 8px
-  border: none
-  border-radius: 2px
-  overflow: hidden
-  background-color: transparent
-  > *
-    pointer-events: none
-
-  .button-icon
-    flex: none
-    pointer-events: none
-    z-index: 2
-    display: inline-block
-    width: 24px
-    height: 24px
-    padding: 0 8px
-    vertical-align: bottom
-    padding: 0
-    background-repeat: no-repeat
-    background-position: center center
-    svg
-      fill: $default-color-text
-
-  .button-label
-    flex: 1
-    order: 2
-    pointer-events: none
-    font-size: 0.875rem
-    font-weight: 600
-    line-height: 1.1rem
-    display: inline-block
-    z-index: 2
-    text-transform: uppercase
-    padding: 3px 8px 3px 8px
-    margin: 0
-
-  .material-ripple
-    opacity: 1
-    pointer-events: none
-    z-index: 1
-    position: absolute
-    background-color: rgba(0, 0, 0, 0.1)
-    height: 5px
-    width: 5px
-    border-radius: 50%
-
-  &.iconend
-    .button-icon
-      order: 2
-    .button-label
-      order: 1
-
-// states
-.button
-  &.is-disabled
-    pointer-events: none
-    opacity: .3
-
-  &:focus
-    //transition-delay: .2s
-    transition-duration: .3s
-    background-color: rgba($default-color-text, 0.05)
-    &:hover
-      background-color: rgba($default-color-text, 0.05)
-
-  &:active
-    transition-duration: .2s
-    &:focus
-      //transition-delay: .2s
-
-  &:hover
-    transition-duration: .2s
-    background-color: rgba($default-color-text, 0.03)
-
-  &:disabled
-    pointer-events: none
-    opacity: .3
-
-// styles
-.button
-  &.style-compact
-    > .button-label
-      padding-left: 0
-      padding-right: 0
-
-  &.style-dense
-    height: 32px
-    > .button-label
-      font-size: 0.8125rem
-      padding-top: 2px
-      padding-bottom: 2px
-
-// color
-.button
-  &.primary-color
-    color: $primary-color
-    &:focus
-      background-color: rgba($primary-color, .1)
-      &:hover
-        background-color: rgba($primary-color, .1)
-    &:hover
-      background-color: rgba($primary-color, .05)
-
-    .button-icon
-      svg
-        fill: $primary-color
-
-    .material-ripple
-      background-color: rgba($primary-color, .1)
-    
-    
-
-  &.secondary-color
-    color: $secondary-color
-    .button-icon
-      svg
-        fill: $secondary-color
-    .material-ripple
-      background-color: rgba($secondary-color, .1)
-    &:focus
-      background-color: rgba($secondary-color, .10)
-      &:hover
-        background-color: rgba($secondary-color, .10)
-    &:hover
-      background-color: rgba($secondary-color, .05)
-
-// theme
-.dark-mode .button,
-.button.dark-mode
-  color: $default-color-text-dark
-  .button-icon
-    svg
-      fill: $default-color-text-dark
-  .material-ripple
-    background-color: rgba($default-color-text-dark, .1)
-  &:focus
-    //background-color: rgba($default-color-text-dark, .1)
-    &:hover
-      //background-color: rgba($default-color-text-dark, .1)
-  &:hover
-    background-color: rgba($default-color-text-dark, .05)
-
-  // primary color
-  &.primary-color
-    //background-color: $primary-color;
-    color: $primary-color-dark
-    .button-icon
-      svg
-        fill: $primary-color-dark
-    .material-ripple
-      background-color: rgba($primary-color-dark, .3)
-    &:focus
-      background-color: rgba($primary-color-dark, .2)
-      &:hover
-        background-color: rgba($primary-color-dark, .2)
-    &:hover
-      background-color: rgba($primary-color-dark, .1)
-
-  // secondary color
-  &.secondary-color
-    color: $secondary-color-dark
-    .button-icon
-      svg
-        fill: $secondary-color-dark
-    .material-ripple
-      background-color: rgba($secondary-color-dark, .3)
-
-    &:focus
-      background-color: rgba($secondary-color-dark, .2)
-      &:hover
-        background-color: rgba($secondary-color-dark, .2)
-
-    &:hover
-      background-color: rgba($secondary-color-dark, .1)

package/src/skin/material/button/file.sass

@@ -1,24 +0,0 @@
-
-// type file
-.button.type-file
-  overflow: hidden
-  position: relative
-  vertical-align: middle
-
-  input[type=file]
-    z-index: 20
-    position: absolute
-    height: 48px
-    width: 48px
-    top: 0
-    right: 0
-    margin: 0
-    padding: 0
-    font-size: 10px
-    cursor: pointer
-    opacity: 0
-    filter: alpha(opacity = 0)
-
-  .button-icon
-    z-index: 1
-    padding-right: 6px

package/src/skin/material/button/floating.sass

@@ -1,113 +0,0 @@
-
-// type floating
-.button.type-floating
-  min-width: 56px
-  min-height: 56px
-  transition: box-shadow .2s
-  border-radius: 28px
-  padding: 6px
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
-  .button-label
-    display: none
-  .button-icon
-    padding: 0
-    height: 24px
-    width: 24px
-    margin-left: 0
-    svg
-      fill: $default-color-text
-  .material-ripple
-    opacity: .1
-    background-color: rgba(0, 0, 0, 1)
-
-// states
-.button.type-floating
-  background-color: rgba(0, 0, 0, 0.05)
-  &:focus
-    background-color: rgba(0, 0, 0, 0.15)
-    &:hover
-      background-color: rgba(0, 0, 0, 0.15)
-  &:hover
-    background-color: rgba(0, 0, 0, 0.1)
-  &:active
-    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
-
-// color
-.button.type-floating
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)
-
-// theme
-.dark-mode .button.type-floating,
-.button.type-floating.dark-mode
-  .material-ripple
-    opacity: .1
-    background-color: rgba(255, 255, 255, 1)
-  background-color: rgba(255, 255, 255, 0.1)
-  &:focus
-    background-color: rgba(255, 255, 255, 0.2)
-    &:hover
-      background-color: rgba(255, 255, 255, 0.2)
-  &:hover
-    background-color: rgba(255, 255, 255, 0.15)
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-  .button-icon
-    svg
-      fill: $primary-color-text-dark
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)

package/src/skin/material/button/raised.sass

@@ -1,101 +0,0 @@
-
-// type raised
-.button.type-raised
-  min-width: 36px
-  transition: box-shadow .2s
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
-  .material-ripple
-    opacity: .1
-    background-color: rgba(0, 0, 0, 1)
-
-// states
-.button.type-raised
-  background-color: rgba(0, 0, 0, 0.05)
-  &:focus
-    background-color: rgba(0, 0, 0, 0.15)
-    &:hover
-      background-color: rgba(0, 0, 0, 0.15)
-  &:hover
-    background-color: rgba(0, 0, 0, 0.1)
-  &:active
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-
-// color
-.button.type-raised
-  &.primary-color
-    background-color: $primary-color
-    color: $primary-color-text
-    .button-icon
-      svg
-        fill: $primary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-  &.secondary-color
-    background-color: $secondary-color
-    color: $secondary-color-text
-    .button-icon
-      svg
-        fill: $secondary-color-text
-    .material-ripple
-      opacity: .3
-      background-color: $default-color-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)
-
-// theme
-.dark-mode .button.type-raised,
-.button.type-raised.dark-mode
-  .material-ripple
-    opacity: .1
-    background-color: rgba(255, 255, 255, 1)
-  background-color: rgba(255, 255, 255, 0.1)
-  &:focus
-    background-color: rgba(255, 255, 255, 0.2)
-    &:hover
-      background-color: rgba(255, 255, 255, 0.2)
-  &:hover
-    background-color: rgba(255, 255, 255, 0.15)
-  //background-color: rgba(255, 255, 255, 0.95)
-  color: $primary-color-text-dark
-  .button-icon
-    svg
-      fill: $primary-color-text-dark
-  &.primary-color
-    background-color: $primary-color-dark
-    color: $primary-color-text-dark
-    .button-icon
-      svg
-        fill: $primary-color-text-dark
-    &:focus
-      background-color: lighten($primary-color, 15%)
-      &:hover
-        background-color: lighten($primary-color, 15%)
-    &:hover
-      background-color: lighten($primary-color, 7%)
-
-
-  &.secondary-color
-    background-color: $secondary-color-dark
-    color: $secondary-color-text-dark
-    .button-icon
-      svg
-        fill: $secondary-color-text-dark
-    &:focus
-      background-color: lighten($secondary-color, 10%)
-      &:hover
-        background-color: lighten($secondary-color, 10%)
-    &:hover
-      background-color: lighten($secondary-color, 5%)