material 0.5.1 → 0.5.3

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "material",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/alkaloid/material.git"
+    "url": "git@gitlab.com:alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/alkaloid/material/issues"
+    "url": "https://gitlab.com/alkaloid/material/issues"
   },
-  "homepage": "https://github.com/alkaloid/material",
+  "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
     "lightweight material design component es6 es2015 vanilla javascript"
   ],

package/src/control/textfield.js

@@ -93,7 +93,7 @@ class Text {
   }
 
   onInput (ev) {
-    console.log('onInput', this.value, this.input.value)
+    // console.log('onInput', this.value, this.input.value)
 
     this.emit('change', ev)
   }

package/src/form/controller.js

@@ -39,7 +39,7 @@ export default {
   },
 
   changeMode (mode) {
-    console.log('changeMode', mode)
+    // console.log('changeMode', mode)
 
     if (mode === 'update' && this.enableControls) {
       this.enableControls()

package/src/list/filter.js

@@ -21,12 +21,12 @@ export default {
   },
 
   getFilter () {
-    // console.log('getFilter')
+    console.log('getFilter')
     var filter = null
     for (var name in this.filter) {
       if (this.filter.hasOwnProperty(name)) {
-        // console.log('--', typeof this.filter[name].get(), this.filter[name].get())
-        if (this.filter[name].get() !== '' && this.filter[name].get() !== []) {
+        console.log('--', typeof this.filter[name].get(), this.filter[name].get())
+        if (this.filter[name].get() !== ''/* && this.filter[name].get() !== [] */) {
           if (filter) {
             filter = filter + '&' + name + '=' + this.filter[name].get()
           } else {

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

@@ -43,18 +43,6 @@
     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
@@ -143,7 +131,7 @@
       // justify-content: flex-end;
       padding: 8px
 
-      .material-buttion
+      .material-button
         margin: 0 0 0 8px
 
   &.dialog-show

package/dist/tracks.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>album-24px</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="album-24px">
-            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-            <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z M12,16.5 C9.51,16.5 7.5,14.49 7.5,12 C7.5,9.51 9.51,7.5 12,7.5 C14.49,7.5 16.5,9.51 16.5,12 C16.5,14.49 14.49,16.5 12,16.5 Z M12,11 C11.45,11 11,11.45 11,12 C11,12.55 11.45,13 12,13 C12.55,13 13,12.55 13,12 C13,11.45 12.55,11 12,11 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
-        </g>
-    </g>
-</svg>

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

@@ -1,52 +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
-
-// set all container boder-box
-*
-  box-sizing: border-box
-
-a
-  color: rgba(0, 0, 0, 0.7)

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

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

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

@@ -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.bak/button/action.sass

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

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

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