@kizmann/nano-ui 1.1.0 → 1.1.2

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

@@ -0,0 +1,27 @@
+@use "../../../root/helpers" as *;
+
+.n-input-number {
+    background: color('form-input', 0.7);
+}
+
+.n-input-number.n-disabled  {
+    background: color('form-disabled', 0.7);
+}
+
+.n-input-number .n-button {
+    color: color('gray-60');
+}
+
+.n-input-number:not(.n-disabled) .n-button {
+    background: transparent;
+}
+
+.n-input-number:not(.n-disabled) .n-button:not(.n-disabled):hover {
+    color: color('base-color');
+}
+
+.n-input-number:not(.n-disabled):hover,
+.n-input-number:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}
+

package/themes/webservy/loader/index.scss

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

package/themes/webservy/loader/src/loader/loader.scss

@@ -0,0 +1,10 @@
+@use "../../../root/helpers" as *;
+
+.n-load:before {
+    border: 2px solid color('base-color');
+}
+
+.n-load:after {
+    background: color('background', 0.7);
+}
+

package/themes/webservy/map/index.scss

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

package/themes/webservy/map/src/map/map.scss

@@ -0,0 +1 @@
+@use "../../../root/helpers" as *;

package/themes/webservy/modal/index.scss

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

package/themes/webservy/modal/src/modal/modal.scss

@@ -0,0 +1,23 @@
+@use "../../../root/helpers" as *;
+
+.n-modal__backdrop {
+    background: color('shadow', 0.4);
+    backdrop-filter: blur(1.5px);
+}
+
+.n-modal__frame {
+    box-shadow: 0 2px 20px color('shadow', 0.1), 0 0 2px color('shadow', 0.15);
+}
+
+.n-modal__frame {
+    color: color('text');
+    background: color('modal');
+}
+
+.n-modal__header {
+    border-bottom: 1px solid color('gray-50', 0.15);
+}
+
+.n-modal__footer {
+    border-top: 1px solid color('gray-50', 0.15);
+}

package/themes/webservy/notification/index.scss

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

package/themes/webservy/notification/src/notification/notification.scss

@@ -0,0 +1,11 @@
+@use "../../../root/helpers" as *;
+
+.n-notification {
+    background: color('base-color');
+    box-shadow: 0 1px 6px color('shadow', 0.2), 0 0 2px color('shadow', 0.15);
+}
+
+.n-notification__icon,
+.n-notification__text {
+    color: color('base-text');
+}

package/themes/webservy/paginator/index.scss

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

package/themes/webservy/paginator/src/paginator/paginator.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-paginator {
+    color: color('gray-60');
+}

package/themes/webservy/popover/index.scss

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

package/themes/webservy/popover/src/popover/popover.scss

@@ -0,0 +1,131 @@
+@use "../../../root/helpers" as *;
+
+.n-popover:before {
+    background: color('popover');
+}
+
+.n-popover:after {
+    background: color('shadow', 0.2);
+}
+
+.n-popover[data-position^="top-"]:before {
+    mask: svg-load('angle-down.svg') no-repeat center 0 / contain;
+}
+
+.n-popover[data-position^="top-"]:after {
+    mask: svg-load('angle-down-shadow.svg') no-repeat center 0 / contain;
+}
+
+.n-popover[data-position^="bottom-"]:before {
+    mask: svg-load('angle-up.svg') no-repeat center 0 / contain;
+}
+
+.n-popover[data-position^="bottom-"]:after {
+    mask: svg-load('angle-up-shadow.svg') no-repeat center 0 / contain;
+}
+
+.n-popover[data-position^="left-"]:before {
+    mask: svg-load('angle-right.svg') no-repeat 0 center / contain;
+}
+
+.n-popover[data-position^="left-"]:after {
+    mask: svg-load('angle-right-shadow.svg') no-repeat 0 center / contain;
+}
+
+.n-popover[data-position^="right-"]:before {
+    mask: svg-load('angle-left.svg') no-repeat 0 center / contain;
+}
+
+.n-popover[data-position^="right-"]:after {
+    mask: svg-load('angle-left-shadow.svg') no-repeat 0 center / contain;
+}
+
+.n-popover__frame {
+    background: color('popover');
+}
+
+.n-popover__frame,
+.n-popover-shadow {
+    box-shadow: 0 2px 10px color('shadow', 0.3), 0 0 2px color('shadow', 0.15);
+}
+
+.n-popover-group {
+    color: color('gray-40');
+}
+
+.n-popover-option {
+    color: color('text');
+}
+
+.n-popover-option:not(.n-disabled,.n-active):hover {
+    color: color('text');
+}
+
+.n-popover-option:not(.n-disabled).n-hover,
+.n-popover-option:not(.n-disabled):hover {
+    background: color('gray-50', 0.075);
+}
+
+.n-popover-option:not(.n-disabled).n-focus,
+.n-popover-option:not(.n-disabled).n-focus:hover {
+    background: color('gray-50', 0.15);
+}
+
+.n-popover-option .n-image {
+    color: color('gray-60');
+}
+
+.n-popover-option .n-icon {
+    color: color('gray-60');
+}
+
+.n-popover__frame {
+    color: color('text');
+    background: color('popover');
+}
+
+.n-popover__header {
+    border-bottom: 1px solid color('gray-15');
+    background: color('popover');
+}
+
+.n-popover__footer {
+    border-top: 1px solid color('gray-15');
+    background: color('popover');
+}
+
+.n-popover-option {
+    color: color('text');
+}
+
+.n-popover-option.n-active,
+.n-popover-option .n-icon {
+    color: color('base-color-fg-20');
+}
+
+//$-tooltip-background: rgba($color-black, 0.9) !default;
+//
+//.n-popover--tooltip[data-position^="top-"]:before {
+//    background: svg-load('angle-down.svg', fill=$-tooltip-background) no-repeat center / contain;
+//}
+//
+//.n-popover--tooltip[data-position^="bottom-"]:before {
+//    background: svg-load('angle-up.svg', fill=$-tooltip-background) no-repeat center / contain;
+//}
+//
+//.n-popover--tooltip[data-position^="left-"]:before {
+//    background: svg-load('angle-right.svg', fill=$-tooltip-background) no-repeat center / contain;
+//}
+//
+//.n-popover--tooltip[data-position^="right-"]:before {
+//    background: svg-load('angle-left.svg', fill=$-tooltip-background) no-repeat center / contain;
+//}
+//
+//.n-popover--tooltip .n-popover__frame {
+//    color: $color-white;
+//    background: $-tooltip-background;
+//}
+//
+//.n-popover--tooltip .n-popover__body {
+//    padding: 3px 8px;
+//}

package/themes/webservy/preview/index.scss

@@ -0,0 +1,4 @@
+@forward "./src/preview-modal/preview-modal";
+@forward "./src/preview-plain/preview-plain";
+@forward "./src/preview-image/preview-image";
+@forward "./src/preview-video/preview-video";

package/themes/webservy/preview/src/preview-image/preview-image.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-preview-image {
+    background: color('gray-50', 0.2);
+}

package/themes/webservy/preview/src/preview-modal/preview-modal.scss

@@ -0,0 +1,39 @@
+@use "../../../root/helpers" as *;
+
+.n-preview-modal {
+    background: color('shadow', 0.95);
+    backdrop-filter: blur(6px);
+    transition: opacity 0.3s;
+}
+
+.n-preview-modal__close,
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    border-radius: 500px;
+    transition: background 0.2s;
+}
+
+.n-preview-modal__close {
+    color: color('base-text', 0.5);
+    background: color('base-text', 0.1);
+}
+
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    color: color('base-color-fg-20');
+    background: color('base-color', 0.3);
+}
+
+.n-preview-modal__close:hover {
+    background: color('base-text', 0.2);
+}
+
+.n-preview-modal__prev:hover,
+.n-preview-modal__next:hover {
+    background: color('base-color', 0.4);
+}
+
+.n-preview-modal .n-preview-frame {
+    background: transparent !important;
+}
+

package/themes/webservy/preview/src/preview-plain/preview-plain.scss

@@ -0,0 +1,9 @@
+@use "../../../root/helpers" as *;
+
+.n-preview-plain {
+    background: color('gray-50', 0.2);
+}
+
+.n-preview-plain ul li {
+    color: color('gray-50', 0.6);
+}

package/themes/webservy/preview/src/preview-video/preview-video.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-preview-video {
+    background: color('gray-50', 0.2);
+}

package/themes/webservy/radio/index.scss

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

package/themes/webservy/radio/src/radio/radio.scss

@@ -0,0 +1,31 @@
+@use "../../../root/helpers" as *;
+
+.n-radio__radio {
+    color: color('foreground');
+    background: color('form-input', 0.7);
+}
+
+.n-radio.n-disabled .n-radio__radio  {
+    background: color('form-disabled', 0.7);
+}
+
+.n-radio__radio span {
+    background: color('foreground');
+}
+
+.n-radio:not(.n-disabled):hover .n-radio__radio {
+    background: color('form-input', 0.8);
+}
+
+.n-radio.n-checked:not(.n-disabled) .n-radio__radio {
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-radio.n-checked:not(.n-disabled) .n-radio__radio span {
+    background: color('base-text');
+}
+
+.n-radio.n-checked:not(.n-disabled) .n-radio__label {
+    color: color('base-color');
+}

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

@@ -0,0 +1 @@
+@use "../../../root/helpers" as *;

package/themes/webservy/rating/index.scss

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

package/themes/webservy/rating/src/rating/rating.scss

@@ -0,0 +1,14 @@
+@use "../../../root/helpers" as *;
+
+.n-rating__stars span:before,
+.n-rating__stars span:after {
+    mask: svg-load('star.svg') no-repeat 0 0 / cover;
+}
+
+.n-rating__stars span:after {
+    background: color('gray-20');
+}
+
+.n-rating__stars span:before {
+    background: color('base-color');
+}

package/themes/webservy/resizer/index.scss

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

package/themes/webservy/resizer/src/resizer/resizer.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-resizer__handle:before {
+    background: color('base-color', 0.9);
+}

package/themes/webservy/root/helpers.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "sass:string";
+
+@mixin css-colors($colors, $prefix: '') {
+    @each $name, $color in $colors {
+        --n-color#{$prefix}-#{$name}: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
+    }
+}
+
+@mixin css-sizes($sizes, $prefix: '') {
+    @each $name, $value in $sizes {
+        --n-size#{$prefix}-#{$name}: #{$value};
+    }
+}
+
+@mixin css-remaps($values, $source: '-color-default', $target: '-color-base') {
+    @each $name, $value in $values {
+        --n#{$target}-#{$name}: var(--n#{$source}-#{$name});
+    }
+}
+
+@function string-replace($string, $search, $replace: "") {
+    $i: string.index($string, $search);
+
+    @if not $i {
+        @return $string;
+    }
+
+    $string: string.slice($string, 1, $i - 1) + $replace +
+        string.slice($string, $i + string.length($search));
+
+    @return string-replace($string, $search, $replace);
+}
+
+@function color($color, $opacity: 1) {
+    @return string.unquote("rgba(var(--n-color-#{$color}), #{$opacity})")
+};
+
+@function size($size, $context: '$') {
+    @return string.unquote(string-replace($context, "$", "var(--n-size-#{$size})"));
+};

package/themes/webservy/root/image/angle-down-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1 L8 8 L15 1 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 0 L8 7 L15 0 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-left-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 15 L0 8 L7 1 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-left.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 15 L1 8 L8 1 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-right-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 15 L8 8 L1 1 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-right.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 15 L7 8 L0 1 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-up-shadow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 7 L8 0 L15 7 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/angle-up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 8 L8 1 L15 8 Z" fill="#000" />
+</svg>

package/themes/webservy/root/image/empty-ufo.svg

@@ -0,0 +1,8 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="160.5" cy="270" rx="106.5" ry="32" fill-opacity="0.3" />
+<path 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" fill-opacity="0.7" />
+<path 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" fill-opacity="0.15" />
+<path 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" fill-opacity="0.6" />
+<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" fill-opacity="1" />
+<path 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" fill-opacity="0.3" />
+</svg>

package/themes/webservy/root/image/empty.svg

@@ -0,0 +1,10 @@
+<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
+    <path 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" fill-opacity="0.2" />
+    <path d="M198.5,109.8h48.6l-75.4-75.4v48.6C171.8,97.9,183.7,109.8,198.5,109.8z" fill-opacity="0.4"/>
+    <path 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" fill-opacity="0.6" />
+    <path 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" fill-opacity="0.6" />
+    <path 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" fill-opacity="0.6" />
+    <path 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" fill-opacity="0.5" />
+    <polygon points="76.5,142 37,191.8 76.5,191.8" fill-opacity="1" />
+    <polygon points="247.1,142 247.1,191.8 286.6,191.8" fill-opacity="1" />
+</svg>

package/themes/webservy/root/image/star.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+	<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" fill="#000" />
+</svg>