@kizmann/nano-ui 0.6.15 → 0.7.3

package/webpack.config.js

@@ -57,8 +57,8 @@ let style = {
     ]
 };
 
-let basic = {
-    entry: ["./themes/basic/index.scss"],
+let light = {
+    entry: ["./themes/light/index.scss"],
     module: {
         rules: [
             {
@@ -75,13 +75,13 @@ let basic = {
     },
     plugins: [
         new MiniCssExtractPlugin({
-            filename: 'basic.css'
+            filename: 'light.css'
         })
     ]
 };
 
-let flat = {
-    entry: ["./themes/flat/index.scss"],
+let dark = {
+    entry: ["./themes/dark/index.scss"],
     module: {
         rules: [
             {
@@ -98,30 +98,7 @@ let flat = {
     },
     plugins: [
         new MiniCssExtractPlugin({
-            filename: 'flat.css'
-        })
-    ]
-};
-
-let flatDark = {
-    entry: ["./themes/flat-dark/index.scss"],
-    module: {
-        rules: [
-            {
-                test: /\.scss$/,
-                include: [
-                    path.resolve('themes')
-                ],
-                use: [
-                    MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'
-                ]
-            }
-        ],
-
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'flat.dark.css'
+            filename: 'dark.css'
         })
     ]
 };
@@ -162,36 +139,27 @@ module.exports = function (env, argv) {
 
     }, style);
 
-    let basicPackage = Object.assign({
-
-        output: {
-            filename: ".basic.ignore.js",
-            path: path.resolve(__dirname, "dist/themes"),
-        }
-
-    }, basic);
-
-    let flatPackage = Object.assign({
+    let lightPackage = Object.assign({
 
         output: {
-            filename: ".flat.ignore.js",
+            filename: ".light.ignore.js",
             path: path.resolve(__dirname, "dist/themes"),
         }
 
-    }, flat);
+    }, light);
 
-    let flatDarkPackage = Object.assign({
+    let darkPackage = Object.assign({
 
         output: {
-            filename: ".flat-dark.ignore.js",
+            filename: ".dark.ignore.js",
             path: path.resolve(__dirname, "dist/themes"),
         }
 
-    }, flatDark);
+    }, dark);
 
     if ( argv.mode === 'development' ) {
         return [
-            bundlerPackage, stylePackage, basicPackage, flatPackage, flatDarkPackage
+            bundlerPackage, stylePackage, lightPackage, //darkPackage
         ];
     }
 
@@ -201,9 +169,8 @@ module.exports = function (env, argv) {
 
     bundlerPackage.plugins.push(loaderOptions);
     stylePackage.plugins.push(loaderOptions);
-    basicPackage.plugins.push(loaderOptions);
-    flatPackage.plugins.push(loaderOptions);
-    flatDarkPackage.plugins.push(loaderOptions);
+    lightPackage.plugins.push(loaderOptions);
+    darkPackage.plugins.push(loaderOptions);
 
     let terserOptions = {
         mangle: true
@@ -221,11 +188,10 @@ module.exports = function (env, argv) {
 
     bundlerPackage.optimization = optimization;
     stylePackage.optimization = optimization;
-    basicPackage.optimization = optimization;
-    flatPackage.optimization = optimization;
-    flatDarkPackage.optimization = optimization;
+    lightPackage.optimization = optimization;
+    darkPackage.optimization = optimization;
 
     return [
-        bundlerPackage, stylePackage, basicPackage, flatPackage, flatDarkPackage
+        bundlerPackage, stylePackage, lightPackage, //darkPackage
     ];
 }

package/themes/flat/button/index.scss

@@ -1,2 +0,0 @@
-@import "./src/button/button";
-@import "./src/button-group/button-group";

package/themes/flat/button/src/button/button.scss

@@ -1,46 +0,0 @@
-@import "../../../root/vars";
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    /**
-     * Button primary
-     */
-
-    .n-button--#{$color}:not(.n-button--link) {
-        color: $color-white;
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-button--#{$color}:not(.n-button--link):hover {
-        background: $-color-light;
-        border-color: $-color-light;
-    }
-
-    .n-button--#{$color}:not(.n-button--link):focus {
-        background: $-color-dark;
-        border-color: $-color-dark;
-    }
-
-    .n-button--#{$color}:not(.n-button--link).n-disabled {
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-button--#{$color}:not(.n-disabled).n-button--link {
-        color: $-color-base;
-    }
-
-    .n-button--#{$color}:not(.n-disabled).n-button--link:hover {
-        color: $-color-light;
-    }
-
-    .n-button--#{$color}:not(.n-disabled).n-button--link:focus {
-        color: $-color-dark;
-    }
-
-}

package/themes/flat/button/src/button-group/button-group.scss

@@ -1,5 +0,0 @@
-@import "../../../root/vars";
-
-.n-button-group > *:not(:last-child) {
-    margin-right: 0;
-}

package/themes/flat/cascader/index.scss

@@ -1,2 +0,0 @@
-@import "./src/cascader-panel/cascader-panel";
-@import "./src/cascader/cascader";

package/themes/flat/cascader/src/cascader/cascader.scss

@@ -1,46 +0,0 @@
-@import "../../../root/vars";
-
-.n-cascader {
-    background: $color-gray-05;
-    //border: 1px solid $color-gray-15;
-}
-
-.n-cascader.n-disabled {
-    background: rgba($color-gray-15, 0.3);
-}
-
-.n-cascader__clear,
-.n-cascader__angle {
-    color: $color-gray-60;
-}
-
-.n-cascader__clear i {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-cascader__placeholder {
-    color: rgba($color-black, 0.5);
-}
-
-.n-cascader__body,
-.n-cascader__empty {
-     background: $color-white;
-     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
-}
-
-.n-cascader__empty {
-     color: $color-gray-60;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-     //.n-cascader--#{$color}:not(.n-disabled):hover,
-     .n-cascader--#{$color}:not(.n-disabled).n-focus {
-        border-color: $-color-base;
-    }
-
-}

package/themes/flat/cascader/src/cascader-panel/cascader-panel.scss

@@ -1,13 +0,0 @@
-@import "../../../root/vars";
-
-.n-cascader-panel {
-    border: 1px solid $color-gray-10;
-}
-
-.n-cascader-panel .n-popover-option:not(.n-active) i {
-    color: $color-gray-40;
-}
-
-.n-cascader-panel__items:not(:last-child) {
-    border-right: 1px solid $color-gray-10;
-}

package/themes/flat/checkbox/index.scss

@@ -1,2 +0,0 @@
-@import "./src/checkbox/checkbox";
-@import "./src/checkbox-group/checkbox-group";

package/themes/flat/checkbox/src/checkbox/checkbox.scss

@@ -1,44 +0,0 @@
-@import "../../../root/vars";
-
-.n-checkbox__checkbox {
-    color: $color-black;
-    background: rgba($color-gray-20, 0.5);
-    //border: 1px solid $color-gray-15;
-}
-
-.n-checkbox.n-disabled .n-checkbox__checkbox  {
-    background: rgba($color-gray-25, 0.3);
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    /**
-     * Button primary
-     */
-
-    .n-checkbox--#{$color}:not(.n-disabled):hover .n-checkbox__checkbox {
-        //border-color: $-color-base;
-    }
-
-    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__checkbox,
-    .n-checkbox--#{$color}.n-intermediate:not(.n-disabled) .n-checkbox__checkbox {
-        color: $color-white;
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__checkbox:not(.n-disabled):hover,
-    .n-checkbox--#{$color}.n-intermediate:not(.n-disabled) .n-checkbox__checkbox:not(.n-disabled):hover {
-        background: $-color-light;
-        border-color: $-color-light;
-    }
-
-    .n-checkbox--#{$color}.n-checked:not(.n-disabled) .n-checkbox__label {
-        color: $-color-base;
-    }
-
-}

package/themes/flat/checkbox/src/checkbox-group/checkbox-group.scss

@@ -1 +0,0 @@
-@import "../../../root/vars";

package/themes/flat/confirm/index.scss

@@ -1 +0,0 @@
-@import "./src/confirm/confirm";

package/themes/flat/confirm/src/confirm/confirm.scss

@@ -1,13 +0,0 @@
-@import "../../../root/vars";
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-confirm--#{$color} .n-confirm__icon {
-        color: $-color-base;
-    }
-
-}

package/themes/flat/datepicker/index.scss

@@ -1,2 +0,0 @@
-@import "./src/datepicker-panel/datepicker-panel";
-@import "./src/datepicker/datepicker";

package/themes/flat/datepicker/src/datepicker/datepicker.scss

@@ -1,50 +0,0 @@
-@import "../../../root/vars";
-
-.n-datepicker {
-    background: $color-gray-05;
-    //border: 1px solid $color-gray-15;
-}
-
-.n-datepicker.n-disabled {
-    background: rgba($color-gray-15, 0.3);
-}
-
-.n-datepicker__seperator {
-    color: $color-gray-60;
-}
-
-.n-datepicker__clear,
-.n-datepicker__angle {
-    color: $color-gray-60;
-}
-
-.n-datepicker__clear i {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-datepicker__placeholder {
-    color: rgba($color-black, 0.5);
-}
-
-.n-datepicker__body,
-.n-datepicker__empty {
-     background: $color-white;
-     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
-}
-
-.n-datepicker__empty {
-     color: $color-gray-60;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-     //.n-datepicker--#{$color}:not(.n-disabled):hover,
-     .n-datepicker--#{$color}:not(.n-disabled).n-focus {
-        border-color: $-color-base;
-    }
-
-}

package/themes/flat/datepicker/src/datepicker-panel/datepicker-panel.scss

@@ -1,44 +0,0 @@
-@import "../../../root/vars";
-
-.n-datepicker-panel {
-    border: 1px solid $color-gray-10;
-}
-
-.n-datepicker-panel__header {
-    background: $color-gray-05;
-    border-bottom: 1px solid $color-gray-10;
-}
-
-.n-datepicker-panel__footer {
-    border-top: 1px solid $color-gray-10;
-}
-
-.n-datepicker-panel__display .n-datepicker-panel__month:hover,
-.n-datepicker-panel__display .n-datepicker-panel__year:hover {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-datepicker-panel__dateview .n-datepicker-panel__day.n-arrive:not(.n-selected),
-.n-datepicker-panel__dateview .n-datepicker-panel__day.n-depart:not(.n-selected),
-.n-datepicker-panel__dateview .n-datepicker-panel__day.n-between:not(.n-selected) {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-datepicker-panel__body .n-datepicker-panel__day:not(.n-current)  {
-    color: $color-gray-40;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__day.n-selected,
-    .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__month.n-selected,
-    .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__year.n-selected {
-        color: $color-white;
-        background: $-color-base;
-    }
-
-}

package/themes/flat/demo/index.scss

@@ -1 +0,0 @@
-@import "./src/demo/demo";

package/themes/flat/demo/src/demo/demo.scss

@@ -1,11 +0,0 @@
-@import "../../../root/vars";
-
-.n-demo {
-    color: $color-black;
-    background: $color-white;
-}
-
-.n-demo input,
-.n-demo textarea {
-    color: $color-black;
-}

package/themes/flat/draggable/index.scss

@@ -1,7 +0,0 @@
-@import "./src/draghandler/draghandler";
-
-@import "./src/draglist/draglist";
-@import "./src/draglist-item/draglist-item";
-
-@import "./src/draggrid/draggrid";
-@import "./src/draggrid-item/draggrid-item";

package/themes/flat/draggable/src/draggrid/draggrid.scss

@@ -1,13 +0,0 @@
-@import "../../../root/vars";
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-draggrid--#{$color}.n-empty.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-}

package/themes/flat/draggable/src/draggrid-item/draggrid-item.scss

@@ -1,65 +0,0 @@
-@import "../../../root/vars";
-
-.n-draggrid-item.n-current {
-    background: rgba($color-gray-35, 0.1);
-}
-
-.n-draggrid-item.n-nodrop {
-    background: rgba($color-danger, 0.1);
-}
-
-.n-draggrid-item .n-draggrid-item__ellipsis {
-    color: $color-gray-30;
-}
-
-.n-draggrid-item__checkbox {
-    background: rgba($color-gray-20, 0.5);
-    //border: 1px solid $color-gray-15;
-}
-
-.n-draggrid-item.n-disabled .n-draggrid-item__checkbox {
-    background: rgba($color-gray-25, 0.3);
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-draggrid--#{$color}.n-empty.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-    .n-draggrid--#{$color} .n-draggrid-item.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-    .n-draggrid--#{$color} .n-draggrid-item.n-highlight {
-        animation: NDraggridItem#{$color} 1s linear infinite;
-    }
-
-    .n-draggrid--#{$color} .n-draggrid-item.n-selected .n-draggrid-item__checkbox {
-        color: $color-white;
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-draggrid--#{$color} .n-draggrid-item.n-selected .n-draggrid-item__checkbox:hover {
-        background: $-color-light;
-        border-color: $-color-light;
-    }
-
-    @keyframes NDraggridItem#{$color} {
-        0% {
-            background: rgba($-color-base, 0);
-        }
-        50% {
-            background: rgba($-color-base, 0.150);
-        }
-        100% {
-            background: rgba($-color-base, 0);
-        }
-    }
-
-}

package/themes/flat/draggable/src/draghandler/draghandler.scss

@@ -1,10 +0,0 @@
-@import "../../../root/vars";
-
-.n-draggable__indicator {
-    border-bottom: 1px solid $color-primary;
-}
-
-.n-draggable__counter {
-    color: $color-white;
-    background: $color-primary;
-}

package/themes/flat/draggable/src/draglist/draglist.scss

@@ -1,13 +0,0 @@
-@import "../../../root/vars";
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-draglist--#{$color}.n-empty.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-}

package/themes/flat/draggable/src/draglist-item/draglist-item.scss

@@ -1,72 +0,0 @@
-@import "../../../root/vars";
-
-.n-draglist-item.n-current {
-    background: rgba($color-gray-35, 0.1);
-}
-
-.n-draglist-item.n-nodrop {
-    background: rgba($color-danger, 0.1);
-}
-
-.n-draglist-item .n-draglist-item__ellipsis {
-    color: $color-gray-30;
-}
-
-.n-draglist-item .n-draglist-item__expand {
-    color: $color-gray-60;
-}
-
-.n-draglist-item__checkbox {
-    background: rgba($color-gray-20, 0.5);
-    //border: 1px solid $color-gray-15;
-}
-
-.n-draglist-item.n-disabled .n-draglist-item__checkbox {
-    background: rgba($color-gray-25, 0.3);
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
-
-    .n-draglist--#{$color}.n-empty.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-    .n-draglist--#{$color} .n-draglist-item.n-dragover {
-        background: rgba($-color-base, 0.075);
-    }
-
-    .n-draglist--#{$color} .n-draglist-item.n-highlight {
-        animation: NDraglistItem#{$color} 1s linear infinite;
-    }
-
-    .n-draglist--#{$color} .n-draglist-item.n-selected .n-draglist-item__checkbox {
-        color: $color-white;
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-draglist--#{$color} .n-draglist-item .n-draglist-item__checkbox:hover {
-        //border-color: $-color-light;
-    }
-
-    .n-draglist--#{$color} .n-draglist-item.n-selected .n-draglist-item__checkbox:hover {
-        //background: $-color-light;
-    }
-
-    @keyframes NDraglistItem#{$color} {
-        0% {
-            background: rgba($-color-base, 0);
-        }
-        50% {
-            background: rgba($-color-base, 0.150);
-        }
-        100% {
-            background: rgba($-color-base, 0);
-        }
-    }
-
-}

package/themes/flat/empty/index.scss

@@ -1 +0,0 @@
-@import "./src/empty-icon/empty-icon";