@kizmann/nano-ui 0.9.4 → 0.9.6

package/themes/macos/select/src/select/select.scss

@@ -0,0 +1,48 @@
+@import "../../../root/vars";
+
+.n-select {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-select.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-select__clear,
+.n-select__angle {
+    color: $color-gray-60;
+}
+
+.n-select__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-select__body,
+.n-select__empty {
+    border: 1px solid $color-gray-15;
+    background: $color-input;
+    box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-select__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-select--#{$color}:not(.n-disabled):hover,
+     .n-select--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+    .n-select--#{$color} .n-select__item {
+        color: $color-foreground;
+        background: $-color-base;
+    }
+
+}

package/themes/macos/select/src/select-option/select-option.scss

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

package/themes/macos/slider/index.scss

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

package/themes/macos/slider/src/slider/slider.scss

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-slider__bar {
+    background: $color-gray-10;
+}
+
+.n-slider__range {
+    background: $color-primary;
+}
+
+.n-slider__handle {
+    background: $color-white;
+    border: 6px solid $color-primary;
+    box-shadow: 0 0 4px rgba($color-shadow, 0.15);
+}
+
+.n-slider__handle span {
+    color: $color-white;
+    background: rgba($color-black, 0.8);
+}
+

package/themes/macos/switch/index.scss

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

package/themes/macos/switch/src/switch/switch.scss

@@ -0,0 +1,28 @@
+@import "../../../root/vars";
+
+.n-switch__switch {
+    background: $color-gray-10;
+    border: 1px solid $color-gray-15;
+}
+
+.n-switch__switch span {
+    background: $color-white;
+    box-shadow: 0 1px 2px rgba($color-shadow, 0.15);
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-switch--#{$color}:not(.n-disabled) .n-switch__switch {
+        background: $-color-base;
+        border-color: mix($-color-dark, $-color-base, 25%);
+    }
+
+    .n-switch--#{$color}:not(.n-disabled) .n-switch__label {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/table/index.scss

@@ -0,0 +1,4 @@
+@import "./src/table/table";
+@import "./src/table-column/table-column";
+@import "./src/table-cell/table-cell";
+@import "./src/table-filter/table-filter";

package/themes/macos/table/src/table/table.scss

@@ -0,0 +1,15 @@
+@import "../../../root/vars";
+
+.n-table {
+    box-shadow: inset 0 0 1px 1px $color-gray-15;
+}
+
+.n-table .n-draglist-item {
+    border-bottom: 1px solid $color-gray-10;
+}
+
+.n-table .n-table__header {
+    background: $color-form;
+    border: 1px solid $color-gray-15;
+    box-shadow: 0 0 3px rgba($color-shadow, 0.10);
+}

package/themes/macos/table/src/table-cell/table-cell.scss

@@ -0,0 +1,50 @@
+@import "../../../root/vars";
+
+.n-table-cell.n-changed:before {
+    content: '\00a0';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    display: block;
+    width: 0;
+    height: 0;
+    border: 3px solid transparent;
+    border-bottom-color: $color-danger;
+    transform: rotate(-45deg);
+}
+
+.n-table-cell--image > div {
+    background-color: $color-gray-05;
+}
+
+.n-table-cell--checkbox i {
+    background: $color-form;
+    border: 1px solid $color-gray-15;
+}
+
+.n-table-cell--checkbox.n-disabled i {
+    background:rgba($color-gray-15, 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-table-cell--checkbox.n-checked:not(.n-disabled) i,
+    .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-uncheck) i {
+        color: $color-white;
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-draglist--#{$color} .n-table-cell--checkbox:not(.n-disabled):hover i {
+        border-color: $-color-light;
+    }
+
+    .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-disabled):hover i {
+        background: $-color-light;
+    }
+
+}

package/themes/macos/table/src/table-column/table-column.scss

@@ -0,0 +1,32 @@
+@import "../../../root/vars";
+
+.n-table__header .n-table-column {
+    border-left: 1px solid $color-gray-10;
+    border-right: 1px solid $color-gray-10;
+}
+
+.n-table-column.n-filtered .n-table-column__label {
+    color: $color-primary;
+}
+
+.n-table-column .n-table-column__sort > i:before {
+    border-top-color: rgba($color-gray-50, 0.5);
+}
+
+.n-table-column.n-sorted.n-desc .n-table-column__sort > i:before {
+    border-top-color: $color-primary;
+}
+
+.n-table-column .n-table-column__sort > i:after {
+    border-bottom-color: rgba($color-gray-50, 0.5);
+}
+
+.n-table-column.n-sorted.n-asc .n-table-column__sort > i:after {
+    border-bottom-color: $color-primary;
+}
+
+.n-table .n-table-column .n-table-column__filter > i {
+    color: $color-gray-60;
+    background: $color-gray-10;
+}
+

package/themes/macos/table/src/table-filter/table-filter.scss

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

package/themes/macos/tabs/index.scss

@@ -0,0 +1,2 @@
+@import "./src/tabs/tabs";
+@import "./src/tabs-item/tabs-item";

package/themes/macos/tabs/src/tabs/tabs.scss

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-tabs__header:after {
+    border-bottom: 1px solid $color-gray-15;
+}
+
+.n-tabs__indicator {
+    background: $color-black;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-tabs--#{$color} .n-tabs__indicator {
+        background: $-color-base;
+    }
+
+}

package/themes/macos/tabs/src/tabs-item/tabs-item.scss

@@ -0,0 +1,18 @@
+@import "../../../root/vars";
+
+.n-tabs__tab-icon {
+    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-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-icon,
+    .n-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-label {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/tags/index.scss

@@ -0,0 +1,2 @@
+@import "./src/tags/tags";
+@import "./src/tags-item/tags-item";

package/themes/macos/tags/src/tags/tags.scss

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

package/themes/macos/tags/src/tags-item/tags-item.scss

@@ -0,0 +1,28 @@
+@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-tags-item--color-#{$color} {
+        color: mix($-color-dark, $color-black, 70%);
+        background: rgba($-color-base, 0.25);
+    }
+    .n-tags-item--color-#{$color} i {
+        color: rgba($-color-base, 0.75);
+    }
+
+}
+
+@each $-tags-index, $-tags-color in $colors-tags {
+
+    .n-tags-item--color-#{$-tags-index} {
+        background: rgba($-tags-color, 0.15);
+    }
+    .n-tags-item--color-#{$-tags-index} i {
+        color: rgba($-tags-color, 0.75);
+    }
+
+}

package/themes/macos/textarea/index.scss

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

package/themes/macos/textarea/src/textarea/textarea.scss

@@ -0,0 +1,30 @@
+@import "../../../root/vars";
+
+.n-textarea textarea {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-textarea.n-disabled textarea  {
+    background: rgba($color-gray-15, 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-textarea--#{$color}:not(.n-disabled):hover textarea {
+        border-color: $-color-base;
+    }
+
+    .n-textarea--#{$color}:not(.n-disabled) textarea:focus{
+        border-color: $-color-light;
+    }
+
+}

package/themes/macos/timepicker/index.scss

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

package/themes/macos/timepicker/src/timepicker/timepicker.scss

@@ -0,0 +1,50 @@
+@import "../../../root/vars";
+
+.n-timepicker {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-timepicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-timepicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-timepicker__clear,
+.n-timepicker__angle {
+    color: $color-gray-60;
+}
+
+.n-timepicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-timepicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-timepicker__body,
+.n-timepicker__empty {
+     background: $color-input;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-timepicker__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-timepicker--#{$color}:not(.n-disabled):hover,
+     .n-timepicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/macos/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -0,0 +1,27 @@
+@import "../../../root/vars";
+
+.n-timepicker-panel {
+    background: $color-input;
+    border: 1px solid $color-gray-10;
+}
+
+.n-timepicker-panel__header {
+    border-bottom: 1px solid $color-gray-10;
+}
+
+.n-timepicker-panel__panel:not(:last-child) {
+    border-right: 1px solid $color-gray-10;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-timepicker-panel--#{$color} .n-timepicker-panel__item.n-selected {
+        color: $color-white;
+        background: $-color-base;
+    }
+
+}

package/themes/macos/transfer/index.scss

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

package/themes/macos/transfer/src/transfer/transfer.scss

@@ -0,0 +1,18 @@
+@import "../../../root/vars";
+
+.n-transfer__panel {
+    border: 1px solid $color-gray-15;
+}
+
+.n-transfer__header {
+    border-bottom: 1px solid $color-gray-15;
+}
+
+.n-transfer__search {
+    background: $color-input;
+    border-bottom: 1px solid $color-gray-15;
+}
+
+.n-transfer__item-count {
+    color: $color-gray-60;
+}

package/themes/macos/virtualscroller/index.scss

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

package/themes/macos/virtualscroller/src/virtualscroller/virtualscroller.scss

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

package/webpack.config.js

@@ -3,6 +3,13 @@ const webpack = require("webpack");
 const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
+let themes = {
+    './src/index.scss': './nano-ui.css',
+    './docs/src/scss/index.scss': '../docs/dist/docs.css',
+    './themes/macos/index-dark.scss': './themes/dark.css',
+    './themes/macos/index-light.scss': './themes/light.css',
+}
+
 let config = {
     entry: ["./src/index.js"],
     module: {
@@ -34,14 +41,14 @@ let config = {
     plugins: []
 };
 
-let style = {
-    entry: ["./src/index.scss"],
+let themeFn = (entry, target) => ({
+    entry: [entry],
     module: {
         rules: [
             {
                 test: /\.scss$/,
                 include: [
-                    path.resolve('src')
+                    path.resolve(entry.replace(/\/[^\/]+\.scss$/, ''))
                 ],
                 use: [
                     MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'
@@ -52,56 +59,14 @@ let style = {
     },
     plugins: [
         new MiniCssExtractPlugin({
-            filename: 'nano-ui.css'
+            filename: target
         })
-    ]
-};
-
-let light = {
-    entry: ["./themes/light/index.scss"],
-    module: {
-        rules: [
-            {
-                test: /\.scss$/,
-                include: [
-                    path.resolve('themes')
-                ],
-                use: [
-                    MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'
-                ]
-            }
-        ],
-
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'light.css'
-        })
-    ]
-};
-
-let docs = {
-    entry: ["./docs/src/scss/index.scss"],
-    module: {
-        rules: [
-            {
-                test: /\.scss$/,
-                include: [
-                    path.resolve('./docs/src')
-                ],
-                use: [
-                    MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'
-                ]
-            }
-        ],
-
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: './dist/docs.css'
-        })
-    ]
-};
+    ],
+    output: {
+        filename: ".ignore.js",
+        path: path.resolve(__dirname, "dist"),
+    }
+});
 
 module.exports = function (env, argv) {
 
@@ -130,36 +95,15 @@ module.exports = function (env, argv) {
 
     }, config);
 
-    let stylePackage = Object.assign({
-
-        output: {
-            filename: ".ignore.js",
-            path: path.resolve(__dirname, "dist"),
-        }
-
-    }, style);
+    let themeList = [];
 
-    let lightPackage = Object.assign({
-
-        output: {
-            filename: ".ignore.js",
-            path: path.resolve(__dirname, "dist/themes"),
-        }
-
-    }, light);
-
-    let docsPackage = Object.assign({
-
-        output: {
-            filename: "./dist/.ignore.js",
-            path: path.resolve(__dirname, "docs"),
-        }
-
-    }, docs);
+    Object.keys(themes).forEach((key, index) => {
+        themeList[index] = themeFn(key, themes[key]);
+    });
 
     if ( argv.mode === 'development' ) {
         return [
-            bundlerPackage, stylePackage, lightPackage, docsPackage
+            bundlerPackage, ...themeList
         ];
     }
 
@@ -168,13 +112,14 @@ module.exports = function (env, argv) {
     });
 
     bundlerPackage.plugins.push(loaderOptions);
-    stylePackage.plugins.push(loaderOptions);
-    lightPackage.plugins.push(loaderOptions);
-    docsPackage.plugins.push(loaderOptions);
+
+    themeList.forEach((cfg) => {
+        cfg.plugins.push(loaderOptions);
+    });
 
     let terserOptions = {
         mangle: true
-    }
+    };
 
     let terser = new TerserPlugin({
         terserOptions, extractComments: false,
@@ -187,11 +132,12 @@ module.exports = function (env, argv) {
     optimization.minimizer.push(terser);
 
     bundlerPackage.optimization = optimization;
-    stylePackage.optimization = optimization;
-    lightPackage.optimization = optimization;
-    docsPackage.optimization = optimization;
+
+    themeList.forEach((cfg) => {
+        cfg.optimization = optimization;
+    });
 
     return [
-        bundlerPackage, stylePackage, lightPackage, docsPackage
+        bundlerPackage, ...themeList
     ];
 }