@kizmann/nano-ui 0.9.4 → 0.9.6

package/themes/macos/index-light.scss

@@ -0,0 +1,41 @@
+@import "./root/vars-light";
+
+@import "./empty/index";
+@import "./alert/index";
+@import "./notification/index";
+@import "./scrollbar/index";
+@import "./resizer/index";
+@import "./virtualscroller/index";
+@import "./draggable/index";
+@import "./loader/index";
+@import "./file/index";
+@import "./form/index";
+@import "./button/index";
+@import "./input/index";
+@import "./input-number/index";
+@import "./textarea/index";
+@import "./switch/index";
+@import "./checkbox/index";
+@import "./radio/index";
+@import "./select/index";
+@import "./cascader/index";
+@import "./datepicker/index";
+@import "./timepicker/index";
+@import "./datetimepicker/index";
+@import "./durationpicker/index";
+@import "./transfer/index";
+@import "./popover/index";
+@import "./modal/index";
+@import "./confirm/index";
+@import "./table/index";
+@import "./paginator/index";
+@import "./tabs/index";
+@import "./tags/index";
+@import "./collapse/index";
+@import "./info/index";
+@import "./map/index";
+@import "./rating/index";
+@import "./slider/index";
+
+@import "./demo/index";
+

package/themes/macos/index.scss

@@ -0,0 +1,41 @@
+@import "./root/vars-dark";
+
+@import "./empty/index";
+@import "./alert/index";
+@import "./notification/index";
+@import "./scrollbar/index";
+@import "./resizer/index";
+@import "./virtualscroller/index";
+@import "./draggable/index";
+@import "./loader/index";
+@import "./file/index";
+@import "./form/index";
+@import "./button/index";
+@import "./input/index";
+@import "./input-number/index";
+@import "./textarea/index";
+@import "./switch/index";
+@import "./checkbox/index";
+@import "./radio/index";
+@import "./select/index";
+@import "./cascader/index";
+@import "./datepicker/index";
+@import "./timepicker/index";
+@import "./datetimepicker/index";
+@import "./durationpicker/index";
+@import "./transfer/index";
+@import "./popover/index";
+@import "./modal/index";
+@import "./confirm/index";
+@import "./table/index";
+@import "./paginator/index";
+@import "./tabs/index";
+@import "./tags/index";
+@import "./collapse/index";
+@import "./info/index";
+@import "./map/index";
+@import "./rating/index";
+@import "./slider/index";
+
+@import "./demo/index";
+

package/themes/macos/info/index.scss

@@ -0,0 +1,3 @@
+@import "./src/info/info";
+@import "./src/info-column/info-column";
+@import "./src/info-field/info-field";

package/themes/macos/info/src/info/info.scss

@@ -0,0 +1,5 @@
+@import "../../../root/vars";
+
+.n-info {
+    border: 1px solid $color-gray-15;
+}

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

@@ -0,0 +1,5 @@
+@import "../../../root/vars";
+
+.n-info-column {
+    color: $color-gray-60;
+}

package/themes/macos/info/src/info-field/info-field.scss

@@ -0,0 +1,5 @@
+@import "../../../root/vars";
+
+.n-info-field.n-info-field--image > div {
+     background-color: rgba($color-gray-50, 0.2);
+}

package/themes/macos/input/index.scss

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

package/themes/macos/input/src/input/input.scss

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

package/themes/macos/input-number/index.scss

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

package/themes/macos/input-number/src/input-number/input-number.scss

@@ -0,0 +1,47 @@
+@import "../../../root/vars";
+
+.n-input-number {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-input-number.n-disabled input  {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-input-number .n-button {
+    color: $color-gray-60;
+    background: rgba($color-gray-15, 0.5);
+}
+
+.n-input-number__clear {
+    color: $color-gray-60;
+}
+
+.n-input-number__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+@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-input-number--#{$color}:not(.n-disabled):hover {
+        border-color: $-color-base;
+    }
+
+    .n-input-number--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-light;
+    }
+
+    .n-input-number--#{$color}:not(.n-disabled) .n-button:hover {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/loader/index.scss

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

package/themes/macos/loader/src/loader/loader.scss

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-load:before {
+    border: 2px solid $color-primary;
+}
+
+.n-load:after {
+    background: rgba($color-background, 0.7);
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-loader--#{$color}.n-load:before {
+        border-color: $-color-base;
+    }
+
+}

package/themes/macos/map/index.scss

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

package/themes/macos/map/src/map/map.scss

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

package/themes/macos/modal/index.scss

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

package/themes/macos/modal/src/modal/modal.scss

@@ -0,0 +1,34 @@
+@import "../../../root/vars";
+
+.n-modal__backdrop {
+    background: rgba(#000, 0.6);
+}
+
+.n-modal__frame {
+    box-shadow: 0 1px 5px 1px rgba($color-shadow, 0.20);
+}
+
+@each $suffix, $values in $modal {
+
+    $-modal-color: map-get($values, 'color');
+    $-modal-border: map-get($values, 'border');
+    $-modal-header: map-get($values, 'header');
+    $-modal-body: map-get($values, 'body');
+    $-modal-footer: map-get($values, 'footer');
+
+    .n-modal--#{$suffix} .n-modal__frame {
+        color: $-modal-color;
+        background: $-modal-body;
+    }
+
+    .n-modal--#{$suffix} .n-modal__header {
+        border-bottom: 1px solid $-modal-border;
+        background: $-modal-header;
+    }
+
+    .n-modal--#{$suffix} .n-modal__footer {
+        border-top: 1px solid $-modal-border;
+        background: $-modal-footer;
+    }
+
+}

package/themes/macos/notification/index.scss

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

package/themes/macos/notification/src/notification/notification.scss

@@ -0,0 +1,24 @@
+@import "../../../root/vars";
+
+.n-notification {
+    background: $color-white;
+    box-shadow: 0 1px 5px 1px rgba($color-shadow, 0.20);
+}
+
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-notification--#{$color} {
+        background: $-color-base;
+    }
+
+    .n-notification--#{$color} .n-notification__icon,
+    .n-notification--#{$color} .n-notification__text {
+        color: $color-white;
+    }
+
+}

package/themes/macos/paginator/index.scss

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

package/themes/macos/paginator/src/paginator/paginator.scss

@@ -0,0 +1,5 @@
+@import "../../../root/vars";
+
+.n-paginator {
+    color: $color-gray-60;
+}

package/themes/macos/popover/index.scss

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

package/themes/macos/popover/src/popover/popover.scss

@@ -0,0 +1,83 @@
+@import "../../../root/vars";
+
+.n-popover__frame {
+    box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-popover-option {
+    color: $color-foreground;
+}
+
+.n-popover-group {
+    color: $color-gray-40;
+}
+
+.n-popover-option:not(.n-disabled).n-hover,
+.n-popover-option:not(.n-disabled):hover {
+    background: rgba($color-gray-50, 0.07);
+}
+
+.n-popover-option:not(.n-disabled).n-focus,
+.n-popover-option:not(.n-disabled).n-focus:hover {
+    background: rgba($color-gray-50, 0.14);
+}
+
+.n-popover-option .n-image {
+    color: $color-gray-60;
+}
+
+.n-popover-option .n-icon {
+    color: $color-gray-60;
+}
+
+@each $suffix, $values in $popover {
+
+    $-popover-color: map-get($values, 'color');
+    $-popover-border: map-get($values, 'border');
+    $-popover-header: map-get($values, 'header');
+    $-popover-body: map-get($values, 'body');
+    $-popover-footer: map-get($values, 'footer');
+
+    .n-popover--#{$suffix} .n-popover__frame {
+        color: $-popover-color;
+        background: $-popover-body;
+        border: 1px solid $-popover-border;
+    }
+
+    .n-popover--#{$suffix} .n-popover__header {
+        border-bottom: 1px solid $-popover-border;
+        background: $-popover-header;
+    }
+
+    .n-popover--#{$suffix} .n-popover__footer {
+        border-top: 1px solid $-popover-border;
+        background: $-popover-footer;
+    }
+
+    .n-popover--#{$suffix} .n-popover-option {
+        color: $-popover-color;
+    }
+
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-popover-option--#{$color}.n-active,
+    .n-popover-option--#{$color} .n-icon {
+        color: $-color-base;
+    }
+
+}
+
+.n-popover--tooltip .n-popover__frame {
+    color: $color-white;
+    background: rgba($color-black, 0.9);
+}
+
+.n-popover--tooltip .n-popover__body {
+    padding: 3px 8px;
+}

package/themes/macos/radio/index.scss

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

package/themes/macos/radio/src/radio/radio.scss

@@ -0,0 +1,45 @@
+@import "../../../root/vars";
+
+.n-radio__radio {
+    color: $color-black;
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-radio.n-disabled .n-radio__radio  {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-radio__radio span {
+    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-radio--#{$color}:not(.n-disabled):hover .n-radio__radio {
+        border-color: $-color-base;
+    }
+
+    .n-radio--#{$color}.n-checked:not(.n-disabled) .n-radio__radio {
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-radio--#{$color}.n-checked:not(.n-disabled) .n-radio__radio span {
+        background: $color-white;
+    }
+
+    .n-radio--#{$color}.n-checked:not(.n-disabled) .n-radio__radio:not(.n-disabled):hover {
+        background: $-color-light;
+        border-color: $-color-light;
+    }
+
+    .n-radio--#{$color}.n-checked:not(.n-disabled) .n-radio__label {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/radio/src/radio-group/radio-group.scss

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

package/themes/macos/rating/index.scss

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

package/themes/macos/rating/src/rating/rating.scss

@@ -0,0 +1,18 @@
+@import "../../../root/vars";
+
+.n-rating__stars span:before,
+.n-rating__stars span:after {
+    background-image: svg-load('star-default.svg', fill=$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-rating--#{$color} .n-rating__stars span:before {
+        background-image: svg-load('star-default.svg', fill=$-color-base);
+    }
+
+}

package/themes/macos/resizer/index.scss

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

package/themes/macos/resizer/src/resizer/resizer.scss

@@ -0,0 +1,5 @@
+@import "../../../root/vars";
+
+.n-resizer__handle:before {
+    background: rgba($color-primary, 0.9);
+}

package/themes/macos/root/image/empty-default.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.2;}
+	.st1{opacity:0.4;}
+	.st2{opacity:0.6;}
+	.st3{opacity:0.5;}
+	.st4{opacity:0.8;}
+</style>
+<g id="Ebene_1_5_">
+	<path class="st0" d="M99,191.8c1.7,0,3.3,1,3.9,2.6l6.8,15.7c1.7,3.9,5.6,6.5,9.9,6.5H204c4.3,0,8.2-2.5,9.9-6.5l6.8-15.7
+		c0.7-1.6,2.2-2.6,3.9-2.6h22.5v-82h-48.6c-14.8,0-26.7-12-26.7-26.7V34.5H94.3c-9.8,0-17.8,8-17.8,17.8v139.5H99z"/>
+	<path class="st1" d="M198.5,109.8h48.6l-75.4-75.4v48.6C171.8,97.9,183.7,109.8,198.5,109.8z"/>
+	<path class="st2" d="M141.8,107.4h-24.1c-3.8,0-7-3.1-7-7l0,0c0-3.8,3.1-7,7-7h24.1c3.8,0,7,3.1,7,7l0,0
+		C148.7,104.3,145.6,107.4,141.8,107.4z"/>
+	<path class="st2" d="M210.9,152.2h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0
+		C218.6,148.8,215.2,152.2,210.9,152.2z"/>
+	<path class="st2" d="M210.9,188.6h-92.5c-4.2,0-7.6-3.4-7.6-7.6v0c0-4.2,3.4-7.6,7.6-7.6h92.5c4.2,0,7.6,3.4,7.6,7.6v0
+		C218.6,185.1,215.2,188.6,210.9,188.6z"/>
+</g>
+<path class="st3" d="M220.7,194.4l-6.8,15.7c-1.7,3.9-5.6,6.5-9.9,6.5h-84.3c-4.3,0-8.2-2.5-9.9-6.5l-6.8-15.7
+	c-0.7-1.6-2.2-2.6-3.9-2.6H37V278c0,5.9,4.8,10.8,10.8,10.8h228.1c5.9,0,10.8-4.8,10.8-10.8v-86.1h-62
+	C222.9,191.8,221.4,192.8,220.7,194.4z"/>
+<g class="st4">
+	<polygon points="76.5,142 37,191.8 76.5,191.8 	"/>
+	<polygon points="247.1,142 247.1,191.8 286.6,191.8 	"/>
+</g>
+</svg>

package/themes/macos/root/image/empty-space.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 320 320" style="enable-background:new 0 0 320 320;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.3;enable-background:new    ;}
+	.st1{display:none;fill:#898E93;}
+	.st2{opacity:0.7;}
+	.st3{opacity:0.15;enable-background:new    ;}
+	.st4{opacity:0.5;fill:url(#SVGID_1_);enable-background:new    ;}
+	.st5{opacity:0.6;}
+	.st6{opacity:0.3;}
+</style>
+<ellipse class="st0" cx="160.5" cy="270" rx="106.5" ry="32"/>
+<rect x="141.6" y="125.7" transform="matrix(0.4341 -0.9009 0.9009 0.4341 -36.7959 214.9154)" class="st1" width="22.1" height="22.1"/>
+<circle class="st1" cx="192.8" cy="187.3" r="15.1"/>
+<path class="st1" d="M124.8,262.5l-15.3-52l52.9,11.7L124.8,262.5z"/>
+<path class="st2" d="M216.8,94.2c0-8.7-25.2-15.8-56.3-15.8s-56.3,7.1-56.3,15.8l3.6,10c0-8.2,23.6-14.8,52.8-14.8
+	s52.8,6.6,52.8,14.8L216.8,94.2z"/>
+<path class="st3" d="M160.5,238c51.7,0,94.9,11.1,104.5,25.8l-51.7-159.6c0-8.2-23.6-14.8-52.8-14.8s-52.8,6.6-52.8,14.8L56,263.8
+	C65.6,249.1,108.8,238,160.5,238z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="160.5" y1="123.1656" x2="160.5" y2="220.5235" gradientTransform="matrix(1 0 0 -1 0 322)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
+	<stop  offset="1" style="stop-color:#FFFFFF"/>
+</linearGradient>
+<path class="st4" d="M160.5,89.3c-9.7,0-18.8,0.7-26.6,2L108,203.2h105L187.1,91.4C179.3,90.1,170.2,89.3,160.5,89.3z"/>
+<path class="st5" d="M160.5,40c17.2,0,33.2,1.8,47.4,4.8c-5.2-14.9-24.4-26-47.4-26s-42.2,11.1-47.4,26
+	C127.3,41.9,143.3,40,160.5,40z"/>
+<path d="M160.5,50.7C100,50.7,51,64,51,80.4c0,11.2,22.6,20.9,56,26l0.7-2.3l-3.6-10c0-8.7,25.2-15.8,56.3-15.8s56.3,7.1,56.3,15.8
+	l-3.6,10l0.7,2.3c33.4-5.1,56-14.8,56-26C270,64,221,50.7,160.5,50.7z"/>
+<path class="st6" d="M160.5,50.7C221,50.7,270,64,270,80.4C270,64,223.2,40,160.5,40S51,64,51,80.4C51,64,100,50.7,160.5,50.7z"/>
+<image style="overflow:visible;" width="352" height="368" xlink:href="../../../../../Desktop/Screen Shot 2021-01-22 at 4.55.46 PM.png"  transform="matrix(0.5 0 0 0.5 -202.8271 18.7864)">
+</image>
+</svg>

package/themes/macos/root/image/star-default.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M15.891,0.561l4.097,8.408l9.16,1.348c0.815,0.12,1.14,1.135,0.551,1.717l-6.629,6.545l1.565,9.242
+		c0.139,0.822-0.713,1.449-1.442,1.061L15,24.519l-8.193,4.363c-0.729,0.388-1.581-0.239-1.442-1.061l1.565-9.242l-6.629-6.545
+		c-0.59-0.582-0.264-1.597,0.551-1.717l9.16-1.348l4.097-8.408C14.473-0.187,15.527-0.187,15.891,0.561z"/>
+</g>
+</svg>