add material theme demo

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
 *.log
-data/themes/!(material)
+data/themes/*
+!data/themes/material
 .vscode/

data/themes/material/badge.variables.styl

@@ -0,0 +1 @@
+$badge-bg-color := $secondary-color

data/themes/material/breadcrumb.styl

@@ -0,0 +1,4 @@
+.k-breadcrumb
+    a.k-item-link:hover
+    .k-item-link a:hover
+        text-decoration underline

data/themes/material/breadcrumb.variables.styl

@@ -0,0 +1,3 @@
+$breadcrumb-color := rgba(0, 0, 0, 0.54)
+$breadcrumb-hover-color := $breadcrumb-color
+$breadcrumb-active-font-weight := normal

data/themes/material/button.styl

@@ -0,0 +1,85 @@
+types = primary warning danger success
+active-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)
+
+.k-btn
+    text-transform uppercase
+    letter-spacing 0.02857em
+    font-weight 500
+    font-family "Roboto", "Helvetica", "Arial", sans-serif
+    box-shadow $box-shadow
+    // define hover bg color
+    for type in types
+        &.k-{type}:not(.k-disabled)
+            &:hover
+                background-color palette(lookup('$btn-' + type + '-bg-color'), 2)
+            // ghost
+            &.k-ghost
+                &:hover
+                    color lookup('$btn-' + type + '-ghost-color')
+                    border-color palette(@color, 1)
+                    background-color alpha(@border-color, 0.08)
+    &.k-secondary
+        background $btn-secondary-border-color
+    &:hover
+        background #d5d5d5
+    &:active
+        box-shadow active-box-shadow
+    // text button
+    &.k-none:not(.k-disabled)
+    &.k-link:not(.k-disabled)
+        box-shadow none  
+        &:hover
+            background rgba(0, 0, 0, 0.08)   
+    &.k-none:not(.k-btn-icon)
+    &.k-link:not(.k-btn-icon)
+        padding 0 8px  
+    &.k-ghost
+        box-shadow none
+        &.k-default
+            &:hover
+                background-color rgba(0, 0, 0, 0.08)
+            &:active
+                border-color $btn-default-ghost-border-color
+                color $text-color
+    // :disabled
+    &.k-disabled
+        box-shadow none
+    // add rippe effect
+    &:not(.k-disabled)
+        position: relative;
+        overflow: hidden;
+        transform: translate3d(0, 0, 0);
+        &:after
+            content: "";
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
+            background-repeat: no-repeat;
+            background-position: 50%;
+            transform: scale(10, 10);
+            opacity: 0;
+            transition: transform .5s, opacity 1s;
+        &:active::after
+            transform: scale(0, 0);
+            opacity: .3;
+            transition: 0s;
+// group
+.k-btns
+    box-shadow $box-shadow
+    border-radius $border-radius
+    .k-btn
+        box-shadow none
+        &:not(.k-disabled):not(.k-none):active
+            box-shadow active-box-shadow
+        // add border for default type
+    &:not(.k-vertical)
+        .k-btn.k-default
+            &:not(:first-child)
+                border-left-color #bdbdbd
+            &:not(:last-child)
+                border-right-color #bdbdbd

data/themes/material/button.variables.styl

@@ -0,0 +1,18 @@
+$btn-color := $text-color
+$btn-bg-color := #e0e0e0
+$btn-border-color := $btn-bg-color
+$btn-hover-color := $text-color
+$btn-hover-border-color := #d5d5d5
+$btn-ghost-color := $text-color
+$btn-default-ghost-border-color := rgba(0, 0, 0, 0.23)
+$btn-ghost-hover-color := $text-color
+$btn-default-ghost-hover-border-color := $btn-default-ghost-border-color
+$btn-disabled-ghost-border-color := $disabled-border-color
+$btn-secondary-border-color := $secondary-color
+$btn-secondary-hover-bg-color := palette($btn-secondary-border-color, 2)
+$btn-secondary-active-bg-color := $btn-secondray-hover-bg-color
+$btns-primary-border-color := darken($primary-color, 20%)
+$btns-warning-border-color := darken($warning-color, 20%)
+$btns-danger-border-color := darken($danger-color, 20%)
+$btns-success-border-color := darken($success-color, 20%)
+$btn-secondary-color := #fff

data/themes/material/card.variables.styl

@@ -0,0 +1 @@
+$card-box-shadow := $box-shadow

data/themes/material/checkbox.styl

@@ -0,0 +1,3 @@
+.k-checkbox
+    .k-wrapper
+        border 2px solid $checkbox-border-color

data/themes/material/checkbox.variables.styl

@@ -0,0 +1,6 @@
+$checkbox-width := 18px
+$checkbox-border-radius := none
+$checkbox-inner-width := 6px
+$checkbox-inner-height := 12px
+$checkbox-inner-top := -1px
+$checkbox-inner-border := 2px solid #fff

data/themes/material/collapse.styl

@@ -0,0 +1,17 @@
+.k-collapse-item
+    box-shadow 0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)
+    background #fff
+    transition margin $transition
+    > .k-title
+        font-weight normal
+        font-size 15px
+        padding 0 24px
+        transition all $transition
+    // active
+    &.k-active
+        margin 16px 0
+        > .k-title
+            height 64px
+            padding-top 8px
+        &:first-child
+            margin-top 0

data/themes/material/collapse.variables.styl

@@ -0,0 +1,5 @@
+$collapse-font-size := 1rem
+$collapse-border-padding := 0
+$collapse-item-height := 48px
+$collapse-border := none
+$collapse-item-content-padding := 8px 24px 24px

data/themes/material/datepicker.styl

@@ -0,0 +1,7 @@
+.k-datepicker-content
+    font-size 14px
+    // shortcuts
+    .k-shortcuts
+        .k-item
+            height 32px
+            font-size 12px

data/themes/material/dialog.styl

@@ -0,0 +1,16 @@
+.k-dialog
+    box-shadow $box-shadow
+    // override footer button
+    .k-footer
+        .k-btn
+            box-shadow none
+            color $primary-color
+            background none
+            border none
+            padding 0 8px
+            &:hover
+                background rgba(25, 118, 210, 0.08)
+    // close button
+    .k-header
+        .k-close
+            border-radius 50%

data/themes/material/dialog.variables.styl

@@ -0,0 +1,6 @@
+$dialog-title-font-size := 20px
+$dialog-title-height := 64px
+$dialog-title-border := none
+$dialog-body-padding := 8px 24px
+$dialog-padding := 24px
+$dialog-footer-btn-margin := 8px

data/themes/material/dirname.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = function() {
+    return function(style) {
+        style.define('__dirname', function() {
+            return path.dirname(style.nodes.filename);
+        });
+    };
+};

data/themes/material/dropdown.styl

@@ -0,0 +1,6 @@
+.k-dropdown-menu
+    padding 8px 0 
+    .k-item
+        &:first-of-type
+        &:last-of-type
+            border-radius 0

data/themes/material/dropdown.variables.styl

@@ -0,0 +1,4 @@
+$dropdown-item-height := 48px
+$dropdown-item-hover-bg-color := rgba(0, 0, 0, 0.08)
+$dropdown-item-hover-color := $text-color
+$dropdown-font-size := 1rem

data/themes/material/form.styl

@@ -0,0 +1,9 @@
+.k-form-item
+    // invalid
+    &.k-invalid
+        .k-input
+        .k-select
+            > .k-wrapper
+                &:after
+                    transform scale(1)
+                    border-bottom-color $danger-color

data/themes/material/form.variables.styl

@@ -0,0 +1 @@
+$form-item-invalid-border := none

data/themes/material/global.variables.styl

@@ -0,0 +1,13 @@
+$primary-color := #1976d2
+$danger-color := #f44336
+$warning-color := #fb8c00
+$success-color := #4caf50
+$secondary-color := rgb(220, 0, 78)
+$box-shadow := 0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)
+$text-color := rgba(0, 0, 0, 0.87)
+$line-height := 1.5
+$border-radius := 4px
+$default-padding := 16
+$disabled-border-color := rgba(0, 0, 0, 0.26)
+$disabled-color := rgba(0, 0, 0, 0.26)
+$border-color := rgba(0, 0, 0, 0.12)

data/themes/material/index.styl

@@ -0,0 +1,38 @@
+use('./dirname.js')
+if lookup('$theme-dir') 
+    push($theme-dir, __dirname())
+else
+    $theme-dir = __dirname()
+
+@require('../../../node_modules/kpc/styles/mixin.styl')
+@require('./global.variables.styl')
+
+@require('./button.variables.styl')
+@require('./slider.variables.styl')
+@require('./checkbox.variables.styl')
+@require('./radio.variables.styl')
+@require('./input.variables.styl')
+@require('./form.variables.styl')
+@require('./badge.variables.styl')
+@require('./breadcrumb.variables.styl')
+@require('./card.variables.styl')
+@require('./select.variables.styl')
+@require('./dropdown.variables.styl')
+@require('./collapse.variables.styl')
+@require('./datepicker.variables.styl')
+@require('./dialog.variables.styl')
+@require('./menu.variables.styl')
+@require('./message.variables.styl')
+@require('./pagination.variables.styl')
+@require('./progress.variables.styl')
+@require('./rate.variables.styl')
+@require('./spinner.variables.styl')
+@require('./steps.variables.styl')
+@require('./switch.variables.styl')
+@require('./table.variables.styl')
+@require('./tabs.variables.styl')
+@require('./tag.variables.styl')
+@require('./tip.variables.styl')
+@require('./tooltip.variables.styl')
+@require('./upload.variables.styl')
+@require('./tree.variables.styl')

data/themes/material/input.styl

@@ -0,0 +1,33 @@
+.k-input
+    > .k-wrapper
+        &::before
+        &::after
+            z-index 2
+            content ''
+            display block
+            position absolute
+            left 0
+            right 0
+            bottom 0
+        &::before
+            border-bottom 1px solid rgba(0, 0, 0, 0.42)
+            transition border-bottom-color $transition
+        &::after
+            border-bottom 2px solid $primary-color
+            transform scaleX(0)
+            transition transform $transition
+    &:not(.k-disabled)
+        > .k-wrapper
+            &:hover
+                &:before
+                    border-bottom 2px solid rgba(0, 0, 0, 0.87)
+    &:focus-within
+        .k-wrapper::after
+            transform scaleX(1)
+    &.k-disabled
+        > .k-wrapper
+            &::before
+                border-bottom-style dotted
+    // suffix
+    .k-suffix
+        right 8px

data/themes/material/input.variables.styl

@@ -0,0 +1,8 @@
+$input-border := none
+$input-focus-border := none
+$input-hover-border := none
+$input-padding-left-right := 0px
+$input-default-padding-left-right := 0px
+$input-group-bg-color := transparent
+$input-disabled-bg-color := transparent
+$input-disabled-col := rgba(0, 0, 0, 0.38)

data/themes/material/menu.styl

@@ -0,0 +1,49 @@
+.k-menu
+    padding 8px
+    // collapsed
+    &.k-collapsed
+        .k-icon
+            margin-left 12px
+    // icon
+    .k-icon
+        font-size 24px
+        margin 0 32px 0 0
+        transition margin-left $transition
+    &.k-vertical
+        .k-header
+            padding-bottom 8px
+            box-sizing content-box
+            margin-bottom 8px
+        .k-menu-item:not(:last-child)
+            margin-bottom 4px
+.k-menu-item
+    > .k-title
+        border-radius $border-radius
+        position relative
+        &::before
+            content ''
+            display block
+            position absolute
+            top 0
+            left 0
+            right 0
+            bottom 0
+            pointer-events none
+            background currentColor
+            opacity 0
+            transition opacity $transition
+    &:not(.k-disabled)
+        > .k-title:hover
+            &::before
+                opacity 0.08
+    &.k-active
+        > .k-title::before
+            opacity 0.3
+
+
+// light
+.k-menu.k-light
+    box-shadow $box-shadow
+    .k-menu-item.k-active
+        > .k-title::before
+            opacity 0