@kizmann/nano-ui 1.1.0 → 1.1.2

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

@@ -0,0 +1,56 @@
+@use "../../../root/helpers" as *;
+
+.n-draglist-item.n-current {
+    background: color('gray-35', 0.1);
+}
+
+.n-draglist-item.n-nodrop {
+    background: 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: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-draglist-item.n-disabled .n-draglist-item__checkbox {
+    background: color('form-disabled');
+}
+
+.n-draglist-item.n-dragover {
+    background: color('base-color', 0.075);
+}
+
+.n-draglist-item.n-highlight {
+    animation: NDraglistItem 1s linear infinite;
+}
+
+.n-draglist-item.n-selected .n-draglist-item__checkbox {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-draglist-item:not(.n-disabled,.n-selected) .n-draglist-item__checkbox:hover {
+    border-color: color('base-color-bg-10');
+}
+
+@keyframes NDraglistItem {
+    0% {
+        background: color('base-color', 0);
+    }
+    50% {
+        background: color('base-color', 0.15);
+    }
+    100% {
+        background: color('base-color', 0);
+    }
+}

package/themes/default/draggable/src/dropzone/dropzone.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-dropzone.n-dragover {
+    box-shadow: inset 0 0 12px color('base-color', 0.5);
+}

package/themes/default/drawer/index.scss

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

package/themes/default/drawer/src/drawer/drawer.scss

@@ -0,0 +1,25 @@
+@use "../../../root/helpers" as *;
+
+.n-drawer__backdrop {
+    background: color('shadow', 0.7);
+    backdrop-filter: blur(1.5px);
+}
+
+.n-drawer__frame {
+    box-shadow: 0 2px 20px color('shadow', 0.1), 0 0 2px color('shadow', 0.15);
+}
+
+.n-drawer__frame {
+    color: color('text');
+    background: color('background');
+}
+
+.n-drawer__header {
+    border-bottom: 1px solid color('gray-10');
+    background: color('form');
+}
+
+.n-drawer__footer {
+    border-top: 1px solid color('gray-10');
+    background: color('form');
+}

package/themes/default/durationpicker/index.scss

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

package/themes/default/durationpicker/src/durationpicker/durationpicker.scss

@@ -0,0 +1,39 @@
+@use "../../../root/helpers" as *;
+
+.n-durationpicker {
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-durationpicker:not(.n-disabled):hover {
+    border-color: color('base-color-bg-30');
+}
+
+.n-durationpicker:not(.n-disabled).n-focus {
+    border-color: color('base-color');
+}
+
+.n-durationpicker.n-disabled {
+    background: color('form-disabled');
+}
+
+.n-durationpicker__seperator {
+    color: color('gray-60');
+}
+
+.n-durationpicker__clear,
+.n-durationpicker__angle {
+    color: color('gray-60');
+}
+
+.n-durationpicker__clear i {
+    background: color('gray-15', 0.6);
+}
+
+.n-durationpicker__placeholder {
+    color: color('gray-15', 0.5);
+}
+
+.n-durationpicker-panel {
+     background: color('popover');
+}

package/themes/default/empty/index.scss

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

package/themes/default/empty/src/empty-icon/empty-icon.scss

@@ -0,0 +1,17 @@
+@use "../../../root/helpers" as *;
+
+.n-empty-icon__text {
+    color: color('text', 0.4);
+}
+
+.n-empty-icon__frame {
+    background: color('text', 0.8);
+}
+
+.n-empty-icon--default .n-empty-icon__frame {
+    mask: svg-load('empty.svg') no-repeat center / contain;
+}
+
+.n-empty-icon--ufo .n-empty-icon__frame {
+    mask: svg-load('empty-ufo.svg') no-repeat center / contain;
+}

package/themes/default/example.scss

@@ -0,0 +1,29 @@
+@forward "./index";
+@forward "./root/vars/sizes-default";
+
+$color-primary: #2B70E3;
+
+@use "./root/vars/colors-light" as theme-light with (
+    $color-primary: $color-primary,
+);
+
+@use "./root/vars/colors-dark" as theme-dark with (
+    $color-primary: $color-primary,
+);
+
+[class*="n-theme--"] {
+    color: rgb(var(--n-color-text));
+}
+
+:root {
+    @include theme-light.default();
+}
+
+.n-theme--light {
+    @include theme-light.exports();
+}
+
+.n-theme--dark {
+    @include theme-dark.exports();
+}
+

package/themes/default/file/index.scss

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

package/themes/default/file/src/file/file.scss

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

package/themes/default/form/index.scss

@@ -0,0 +1,4 @@
+@forward "./src/form/form";
+@forward "./src/form-group/form-group";
+@forward "./src/form-frame/form-frame";
+@forward "./src/form-item/form-item";

package/themes/default/form/src/form/form.scss

@@ -0,0 +1,17 @@
+@use "../../../root/helpers" as *;
+
+.n-form-clear {
+    color: color('gray-60');
+}
+
+.n-form-clear i {
+    background: color('foreground', 0.1);
+}
+
+.n-form-clear:hover i {
+    background: color('foreground', 0.15);
+}
+
+.n-form-angle {
+    color: color('gray-60');
+}

package/themes/default/form/src/form-frame/form-frame.scss

@@ -0,0 +1,25 @@
+@use "../../../root/helpers" as *;
+
+.n-form-frame__menu:hover {
+    background: color('foreground', 0.075);
+}
+
+.n-form-frame__menu.is-star {
+    background: color('base-color', 0.15);
+}
+
+.n-form-frame__menu.on-search:before {
+    background: color('base-color');
+}
+
+.n-form-frame__menu i {
+    color: color('base-color');
+}
+
+.n-form-frame__menu span {
+    color: color('gray-80');
+}
+
+.n-form-frame__menu.is-star span {
+    color:color('base-color');
+}

package/themes/default/form/src/form-group/form-group.scss

@@ -0,0 +1,42 @@
+@use "../../../root/helpers" as *;
+
+.n-form-group.n-form-group--fieldset.n-hidden:after {
+    background: color('gray-10');
+}
+
+.n-form-group--fieldset .n-form-group__body {
+    border: 1px solid color('gray-10');
+}
+
+.n-form-group--fieldset.n-form-group--collapse.n-hidden {
+    border-color: transparent;
+}
+
+.n-form-group--fieldset .n-form-group__legend {
+    background: color('base-color');
+}
+
+.n-form-group--fieldset .n-form-group__label span,
+.n-form-group--fieldset .n-form-group__label i {
+    color: color('base-text');
+}
+
+.n-form-group--fieldset .n-form-group__collapse {
+    color: color('base-text', 0.6);
+}
+
+.n-form-group--classic .n-form-group__label span {
+    color: color('text');
+}
+
+.n-form-group--classic .n-form-group__label i {
+    color: color('base-color');
+}
+
+.n-form-group--classic .n-form-group__collapse {
+    color: color('text', 0.6);
+}
+
+.n-form-group--fieldset .n-form-group__action {
+    background: color('background');
+}

package/themes/default/form/src/form-item/form-item.scss

@@ -0,0 +1,25 @@
+@use "../../../root/helpers" as *;
+
+.n-form-item__condition span {
+    color: color('gray-50');
+}
+
+.n-form-item.is-disabled .n-form-item__condition {
+    background: color('base-color', 0.15);
+}
+
+.n-form-item.is-disabled .n-form-item__condition span {
+    color: color('base-color-fg-10');
+}
+
+.n-form-item.is-disabled .n-form-item__condition:hover {
+    background: color('base-color', 0.20);
+}
+
+.n-form-item__label label {
+    color: color('gray-60');
+}
+
+.n-form-item__error {
+    color: color('danger-color-bg-20');
+}

package/themes/default/index.scss

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

package/themes/default/info/index.scss

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

package/themes/default/info/src/info/info.scss

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-info {
+    border: 1px solid color('gray-15');
+}

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

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

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

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

package/themes/default/input/index.scss

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

package/themes/default/input/src/input/input.scss

@@ -0,0 +1,27 @@
+@use "../../../root/helpers" as *;
+
+.n-input {
+    color: color('foreground');
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-input.n-disabled  {
+    background: color('form-disabled');
+}
+
+.n-input .n-button {
+    color: color('gray-60');
+}
+
+.n-input:not(.n-disabled) .n-button:not(.n-disabled):hover {
+    color: color('base-color');
+}
+
+.n-input:not(.n-disabled):hover {
+    border-color: color('base-color-bg-30');
+}
+
+.n-input:not(.n-disabled).n-focus {
+    border-color: color('base-color');
+}

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

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

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

@@ -0,0 +1,30 @@
+@use "../../../root/helpers" as *;
+
+.n-input-number {
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-input-number.n-disabled  {
+    background: color('form-disabled');
+}
+
+.n-input-number .n-button {
+    color: color('gray-60');
+}
+
+.n-input-number:not(.n-disabled) .n-button {
+    background: color('gray-15', 0.5);
+}
+
+.n-input-number:not(.n-disabled) .n-button:not(.n-disabled):hover {
+    color: color('base-color');
+}
+
+.n-input-number:not(.n-disabled):hover {
+    border-color: color('base-color-bg-30');
+}
+
+.n-input-number:not(.n-disabled).n-focus {
+    border-color: color('base-color');
+}

package/themes/default/loader/index.scss

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

package/themes/default/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/default/map/index.scss

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

package/themes/default/map/src/map/map.scss

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

package/themes/default/modal/index.scss

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

package/themes/default/modal/src/modal/modal.scss

@@ -0,0 +1,25 @@
+@use "../../../root/helpers" as *;
+
+.n-modal__backdrop {
+    background: color('shadow', 0.7);
+    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('background');
+}
+
+.n-modal__header {
+    border-bottom: 1px solid color('gray-10');
+    background: color('form');
+}
+
+.n-modal__footer {
+    border-top: 1px solid color('gray-10');
+    background: color('form');
+}

package/themes/default/notification/index.scss

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

package/themes/default/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/default/paginator/index.scss

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

package/themes/default/paginator/src/paginator/paginator.scss

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

package/themes/default/popover/index.scss

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

package/themes/default/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/default/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/default/preview/src/preview-image/preview-image.scss

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