material 0.4.3 → 0.5.1

package/src/skin/material.bak/base/elevation.sass

@@ -0,0 +1,50 @@
+.elevation-z0
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
+.elevation-z1
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+.elevation-z2
+  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)
+.elevation-z3
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
+.elevation-z4
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+.elevation-z5
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
+.elevation-z6
+  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)
+.elevation-z7
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
+.elevation-z8
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
+.elevation-z9
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
+.elevation-z10
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
+.elevation-z11
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
+.elevation-z12
+  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)
+.elevation-z13
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
+.elevation-z14
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
+.elevation-z15
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
+.elevation-z16
+  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)
+.elevation-z17
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
+.elevation-z18
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
+.elevation-z19
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
+.elevation-z20
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
+.elevation-z21
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
+.elevation-z22
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
+.elevation-z23
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
+.elevation-z24
+  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)

package/src/skin/material.bak/base/grid.sass

@@ -0,0 +1,63 @@
+/////////////////
+// Semantic.gs // for SCSS: http://sass-lang.com/
+/////////////////
+
+// Defaults which you can freely override
+$column-width: 60px
+$gutter-width: 20px
+$columns: 12
+
+// Utility function — you should never need to modify this
+@function gridsystem-width($columns:$columns)
+  @return ($column-width * $columns) + ($gutter-width * $columns)
+
+
+// Set $total-width to 100% for a fluid layout
+$total-width: gridsystem-width($columns)
+
+// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
+// $min-width: 999999
+// $correction: 0.5 / $min-width * 100
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix()
+  *zoom:1
+
+  &:before,
+  &:after
+      content:""
+      display:table
+  
+  &:after
+      clear:both
+
+//////////
+// GRID //
+//////////
+
+body
+  width: 100%
+  @include clearfix()
+
+
+@mixin row($columns:$columns)
+  display: block
+  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
+  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
+  // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
+  @include clearfix()
+
+@mixin column($x,$columns:$columns)
+  display: inline
+  float: left
+  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
+  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+  // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
+  // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
+
+@mixin push($offset:1)
+  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+
+@mixin pull($offset:1)
+  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))

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

@@ -0,0 +1,107 @@
+.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.bak/button/action.sass

@@ -0,0 +1,89 @@
+
+// type action
+.material-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
+.material-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
+.material-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
+.material-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 .material-button.type-action,
+.material-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.bak/button/button.sass

@@ -0,0 +1,183 @@
+.material-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
+.material-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
+.material-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
+.material-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 .material-button,
+.material-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.bak/button/file.sass

@@ -0,0 +1,24 @@
+
+// type file
+.material-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.bak/button/floating.sass

@@ -0,0 +1,113 @@
+
+// type floating
+.material-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
+.material-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
+.material-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 .material-button.type-floating,
+.material-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%)