@kizmann/nano-ui 1.1.0 → 1.1.2

package/themes/webservy/datepicker/src/datepicker/datepicker.scss

@@ -0,0 +1,40 @@
+@use "../../../root/helpers" as *;
+
+.n-datepicker {
+    background: color('form-input', 0.7);
+}
+
+.n-datepicker:not(.n-disabled):hover,
+.n-datepicker:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}
+
+.n-datepicker.n-disabled {
+    background: color('form-disabled', 0.7);
+}
+
+.n-datepicker__seperator {
+    color: color('gray-60');
+}
+
+.n-datepicker__clear,
+.n-datepicker__angle {
+    color: color('gray-60');
+}
+
+.n-datepicker__clear i {
+    background: color('gray-15', 0.6);
+}
+
+.n-datepicker__placeholder {
+    color: color('foreground', 0.5);
+}
+
+.n-datepicker__body,
+.n-datepicker__empty {
+     background: color('popover');
+}
+
+.n-datepicker__empty {
+     color: color('gray-60');
+}

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

@@ -0,0 +1,44 @@
+@use "../../../root/helpers" as *;
+
+
+.n-datepicker-panel {
+    background: color('background', 0.35);
+}
+
+.n-popover > .n-datepicker-panel {
+    background: color('popover');
+}
+
+div:not(.n-popover,.n-datetimepicker-panel) > .n-datepicker-panel {
+    border: 1px solid color('gray-50', 0.15);
+}
+
+.n-datepicker-panel__header {
+    border-bottom: 1px solid color('gray-50', 0.15);
+}
+
+.n-datepicker-panel__footer {
+    border-top: 1px solid color('gray-50', 0.15);
+}
+
+.n-datepicker-panel__display .n-datepicker-panel__month:hover,
+.n-datepicker-panel__display .n-datepicker-panel__year:hover {
+    background: color('gray-50', 0.15);
+}
+
+.n-datepicker-panel .n-datepicker-panel__body .n-datepicker-panel__day.n-selected,
+.n-datepicker-panel .n-datepicker-panel__body .n-datepicker-panel__month.n-selected,
+.n-datepicker-panel .n-datepicker-panel__body .n-datepicker-panel__year.n-selected {
+    color: color('base-text');
+    background: color('base-color');
+}
+
+.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: color('gray-50', 0.15);
+}
+
+.n-datepicker-panel__body .n-datepicker-panel__day:not(.n-current)  {
+    color: color('gray-40');
+}

package/themes/webservy/datetimepicker/index.scss

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

package/themes/webservy/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -0,0 +1,47 @@
+@use "../../../root/helpers" as *;
+
+.n-datetimepicker {
+    background: color('form-input', 0.7);
+}
+
+.n-datetimepicker:not(.n-disabled):hover,
+.n-datetimepicker:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}
+
+.n-datetimepicker.n-disabled {
+    background: color('form-disabled', 0.7);
+}
+
+.n-datetimepicker__seperator {
+    color: color('gray-60');
+}
+
+.n-datetimepicker__clear,
+.n-datetimepicker__angle {
+    color: color('gray-60');
+}
+
+.n-datetimepicker__clear i {
+    background: color('gray-15', 0.6);
+}
+
+.n-datetimepicker__placeholder {
+    color: color('gray-15', 0.5);
+}
+
+.n-datetimepicker-panel {
+    background: color('popover');
+}
+
+.n-datetimepicker__date-panel.n-datepicker-panel {
+     background: transparent;
+}
+
+.n-datetimepicker__time-panel.n-timepicker-panel {
+    background: color('foreground', 0.025);
+}
+
+.n-datetimepicker-panel .n-datetimepicker__date-panel {
+    border-right: 1px solid color('gray-50', 0.15);
+}

package/themes/webservy/demo/index.scss

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

package/themes/webservy/demo/src/demo/demo.scss

@@ -0,0 +1,34 @@
+@use "../../../root/helpers" as *;
+
+input, textarea {
+    outline: none !important;
+}
+
+[class*="n-"] input,
+[class*="n-"] textarea {
+    outline: none;
+    color: color('foreground');
+}
+
+[class*="n-"] input::placeholder,
+[class*="n-"] textarea::placeholder {
+    color: color('foreground');
+    opacity: 0.3;
+}
+
+:root {
+    --grid-gap-h: 0;
+    --grid-gap-v: 0;
+}
+
+.n-demo.n-theme--dark #app {
+    background: #181818;
+}
+
+.n-demo.n-theme--light #app {
+    background: #eeeeee;
+}
+
+.n-demo #app .app-container {
+    background: color('background');
+}

package/themes/webservy/draggable/index.scss

@@ -0,0 +1,9 @@
+@forward "./src/draghandler/draghandler";
+
+@forward "./src/draglist/draglist";
+@forward "./src/draglist-item/draglist-item";
+
+@forward "./src/draggrid/draggrid";
+@forward "./src/draggrid-item/draggrid-item";
+
+@forward "./src/dropzone/dropzone";

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

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

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

@@ -0,0 +1,51 @@
+@use "../../../root/helpers" as *;
+
+.n-draggrid-item.n-current {
+    background: color('gray-35', 0.1);
+}
+
+.n-draggrid-item.n-nodrop {
+    background: color('danger', 0.1);
+}
+
+.n-draggrid-item .n-draggrid-item__ellipsis {
+    color: color('gray-30');
+}
+
+.n-draggrid-item__checkbox {
+    background: color('form-input', 0.7);
+}
+
+.n-draggrid-item.n-disabled .n-draggrid-item__checkbox {
+    background: color('form-disabled', 0.7);
+}
+
+.n-draggrid-item.n-dragover {
+    background: color('base-color', 0.075);
+}
+
+.n-draggrid-item.n-highlight {
+    animation: NDraggridItem 1s linear infinite;
+}
+
+.n-draggrid-item.n-selected .n-draggrid-item__checkbox {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-draggrid-item:not(.n-disabled,.n-selected) .n-draggrid-item__checkbox:hover {
+    background: color('form-input', 0.8);
+}
+
+@keyframes NDraggridItem {
+    0% {
+        background: color('base-color', 0);
+    }
+    50% {
+        background: color('base-color', 0.15);
+    }
+    100% {
+        background: color('base-color', 0);
+    }
+}

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

@@ -0,0 +1,15 @@
+@use "../../../root/helpers" as *;
+
+.n-draggable__indicator {
+    border-bottom: 1px solid color('primary-color');
+}
+
+.n-draggable__counter {
+    color: color('primary-text');
+    background: color('primary-color');
+}
+
+.n-draggable__counter[class*="n-modify--"] {
+    color: color('warning-text');
+    background: color('warning-color');
+}

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

@@ -0,0 +1,5 @@
+@use "../../../root/helpers" as *;
+
+.n-draglist.n-dragover {
+    box-shadow: inset 0 0 16px color('base-color-fg-20', 0.1);
+}

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

@@ -0,0 +1,55 @@
+@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', 0.7);
+}
+
+.n-draglist-item.n-disabled .n-draglist-item__checkbox {
+    background: color('form-disabled', 0.7);
+}
+
+.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 {
+    background: color('form-input', 0.8);
+}
+
+@keyframes NDraglistItem {
+    0% {
+        background: color('base-color', 0);
+    }
+    50% {
+        background: color('base-color', 0.15);
+    }
+    100% {
+        background: color('base-color', 0);
+    }
+}

package/themes/webservy/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/webservy/drawer/index.scss

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

package/themes/webservy/drawer/src/drawer/drawer.scss

@@ -0,0 +1,23 @@
+@use "../../../root/helpers" as *;
+
+.n-drawer__backdrop {
+    background: color('shadow', 0.4);
+    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('modal');
+}
+
+.n-drawer__header {
+    border-bottom: 1px solid color('gray-50', 0.15);
+}
+
+.n-drawer__footer {
+    border-top: 1px solid color('gray-50', 0.15);
+}

package/themes/webservy/durationpicker/index.scss

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

package/themes/webservy/durationpicker/src/durationpicker/durationpicker.scss

@@ -0,0 +1,35 @@
+@use "../../../root/helpers" as *;
+
+.n-durationpicker {
+    background: color('form-input', 0.7);
+}
+
+.n-durationpicker:not(.n-disabled):hover,
+.n-durationpicker:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}
+
+.n-durationpicker.n-disabled {
+    background: color('form-disabled', 0.7);
+}
+
+.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/webservy/empty/index.scss

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

package/themes/webservy/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/webservy/example.scss

@@ -0,0 +1,29 @@
+@forward "./index";
+@forward "./root/vars/sizes-default";
+
+$color-primary: #2B70E3;
+
+@use "./root/vars/colors-light-bluish" as theme-light with (
+    $color-primary: $color-primary,
+);
+
+@use "./root/vars/colors-dark-bluish" 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/webservy/file/index.scss

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

package/themes/webservy/file/src/file/file.scss

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

package/themes/webservy/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/webservy/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/webservy/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/webservy/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/webservy/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/webservy/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/webservy/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/webservy/info/src/info/info.scss

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

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

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

package/themes/webservy/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/webservy/input/index.scss

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

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

@@ -0,0 +1,23 @@
+@use "../../../root/helpers" as *;
+
+.n-input {
+    color: color('foreground');
+    background: color('form-input', 0.7);
+}
+
+.n-input.n-disabled  {
+    background: color('form-disabled', 0.7);
+}
+
+.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,
+.n-input:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}

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

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