@kizmann/nano-ui 1.0.15 → 1.1.2

package/themes/default/switch/src/switch/switch.scss

@@ -0,0 +1,19 @@
+@use "../../../root/helpers" as *;
+
+.n-switch__switch {
+    background: color('gray-15');
+    box-shadow: inset 0 0 1px color('shadow', 0.35);
+}
+
+.n-switch__switch span {
+    background: color('white');
+    box-shadow: 0 1px 2px color('shadow', 0.15);
+}
+
+.n-switch:not(.n-switch--default,.n-disabled) .n-switch__switch {
+    background: color('base-color');
+}
+
+.n-switch:not(.n-switch--default,.n-disabled) .n-switch__label {
+    color: color('base-color');
+}

package/themes/default/table/index.scss

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

package/themes/default/table/src/table/table.scss

@@ -0,0 +1,14 @@
+@use "../../../root/helpers" as *;
+
+.n-table:before {
+    border: 1px solid color('gray-15');
+}
+
+.n-table .n-draglist-item {
+    border-bottom: 1px solid color('gray-10');
+}
+
+.n-table .n-table__header {
+    border-bottom: 1px solid color('gray-15');
+    background: color('form');
+}

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

@@ -0,0 +1,34 @@
+@use "../../../root/helpers" as *;
+
+.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-color');
+    transform: rotate(-45deg);
+}
+
+.n-table-cell--checkbox i {
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-table-cell--checkbox.n-disabled i {
+    background: color('form-disabled');
+}
+
+.n-table-cell--checkbox.n-checked:not(.n-disabled) i,
+.n-table-cell--checkbox.n-checked:not(.n-uncheck) i {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-table-cell--checkbox:not(.n-disabled):hover i {
+    border-color: color('base-color-bg-30');
+}

package/themes/{macos → default}/table/src/table-column/table-column.scss

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

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

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

package/themes/default/tabs/index.scss

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

package/themes/default/tabs/src/tabs/tabs.scss

@@ -0,0 +1,9 @@
+@use "../../../root/helpers" as *;
+
+.n-tabs:not(.n-float) > .n-tabs__header:after {
+    border-bottom: 1px solid color('gray-15');
+}
+
+.n-tabs__indicator {
+    background: color('base-color');
+}

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

@@ -0,0 +1,23 @@
+@use "../../../root/helpers" as *;
+
+.n-tabs__tab:not(.is-active) .n-tabs__tab-icon {
+    opacity: 0.6;
+}
+
+.n-tabs:not(.n-float) .n-tabs__tab.n-active .n-tabs__tab-icon,
+.n-tabs:not(.n-float) .n-tabs__tab.n-active .n-tabs__tab-label {
+    color: color('base-color');
+}
+
+.n-tabs.n-float .n-tabs__tab {
+    background: color('gray-15', 0.5);
+}
+
+.n-tabs.n-float .n-tabs__tab.n-active {
+    background: color('base-color');
+}
+
+.n-tabs.n-float .n-tabs__tab.n-active .n-tabs__tab-icon,
+.n-tabs.n-float .n-tabs__tab.n-active .n-tabs__tab-label {
+    color: color('base-text');
+}

package/themes/default/tags/index.scss

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

package/themes/default/tags/src/tags/tags.scss

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

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

@@ -0,0 +1,17 @@
+@use "../../../root/helpers" as *;
+
+.n-tags-item {
+    color: color('base-color');
+    background: color('base-color', 0.25);
+}
+
+.n-tags-item i {
+    opacity: 0.8;
+}
+
+@for $i from 0 through 20 {
+    .n-tags-item--color-#{$i} {
+        color: color('tag-#{$i}');
+        background: color('tag-#{$i}', 0.25);
+    }
+}

package/themes/default/textarea/index.scss

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

package/themes/default/textarea/src/textarea/textarea.scss

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

package/themes/default/timepicker/index.scss

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

package/themes/default/timepicker/src/timepicker/timepicker.scss

@@ -0,0 +1,44 @@
+@use "../../../root/helpers" as *;
+
+.n-timepicker {
+    background: color('form-input');
+    border: 1px solid color('gray-15');
+}
+
+.n-timepicker:not(.n-disabled):hover {
+    border-color: color('base-color-bg-30');
+}
+
+.n-timepicker:not(.n-disabled).n-focus {
+    border-color: color('base-color');
+}
+
+.n-timepicker.n-disabled {
+    background: color('form-disabled');
+}
+
+.n-timepicker__seperator {
+    color: color('gray-60');
+}
+
+.n-timepicker__clear,
+.n-timepicker__angle {
+    color: color('gray-60');
+}
+
+.n-timepicker__clear i {
+    background: color('gray-15', 0.6);
+}
+
+.n-timepicker__placeholder {
+    color: color('foreground', 0.5);
+}
+
+.n-timepicker__body,
+.n-timepicker__empty {
+     background: color('form-input');
+}
+
+.n-timepicker__empty {
+     color: color('gray-60');
+}

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

@@ -0,0 +1,26 @@
+@use "../../../root/helpers" as *;
+
+.n-timepicker-panel {
+    background: color('form-input');
+}
+
+.n-popover > .n-timepicker-panel {
+    background: color('popover');
+}
+
+div:not(.n-popover,.n-datetimepicker-panel) > .n-timepicker-panel {
+    border: 1px solid color('gray-15');
+}
+
+.n-timepicker-panel__header {
+    border-bottom: 1px solid color('gray-15');
+}
+
+.n-timepicker-panel__panel:not(:last-child) {
+    border-right: 1px solid color('gray-15');
+}
+
+.n-timepicker-panel__item.n-selected {
+    color: color('base-text');
+    background: color('base-color');
+}

package/themes/default/transfer/index.scss

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

package/themes/default/transfer/src/transfer/transfer.scss

@@ -0,0 +1,20 @@
+@use "../../../root/helpers" as *;
+
+.n-transfer__panel {
+    background: color('background');
+    border: 1px solid color('gray-15');
+}
+
+.n-transfer__header {
+    border-bottom: 1px solid color('gray-15');
+    background: color('form');
+}
+
+.n-transfer__search .n-input {
+    border-color: transparent;
+    background: color('background');
+}
+
+.n-transfer__item-count {
+    color: color('gray-60');
+}

package/themes/default/virtualscroller/index.scss

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

package/themes/default/virtualscroller/src/virtualscroller/virtualscroller.scss

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

package/themes/webservy/alert/index.scss

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

package/themes/webservy/alert/src/alert/alert.scss

@@ -0,0 +1,29 @@
+@use "../../../root/helpers" as *;
+
+.n-alert {
+    background: color('shadow', 0.6);
+    backdrop-filter: blur(1.5px);
+    transition: opacity 0.3s;
+}
+
+.n-alert:not(.n-ready) {
+    opacity: 0;
+}
+
+.n-alert-frame {
+    background: color('confirm');
+    transition: transform 0.3s;
+    box-shadow: 0 2px 20px color('shadow', 0.1), 0 0 2px color('shadow', 0.15);
+}
+
+.n-alert:not(.n-ready) .n-alert-frame {
+    transform: translateY(50px) scale(0.6);
+}
+
+.n-alert__text {
+    color: color('gray-40');
+}
+
+.n-alert__icon {
+    color: color('base-color');
+}

package/themes/webservy/button/index.scss

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

package/themes/webservy/button/src/button/button.scss

@@ -0,0 +1,87 @@
+@use "../../../root/helpers" as *;
+
+.n-button {
+    transition: opacity 0.2s, color 0.2s, background 0.2s;
+}
+
+.n-button.n-disabled {
+    color: color('text', 0.7);
+    opacity: 0.7;
+}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass) {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass):hover {
+    background: color('base-color-bg-10');
+    border-color: color('base-color-bg-10');
+}
+
+//.n-button:not(.n-button--reset,.n-button--link,.n-button--glass):focus {
+//    background: color('base-color-fg-10');
+//    border-color: color('base-color-fg-10');
+//}
+
+.n-button:not(.n-button--reset,.n-button--link,.n-button--glass).n-disabled {
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-button.n-disabled:not(.n-button--reset,.n-button--glass).n-button--link {
+    color: color('text');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link {
+    color: color('base-color-fg-10');
+}
+
+.n-button.n-button--neutral:not(.n-disabled,.n-button--glass).n-button--link {
+    color: color('base-color-fg-30');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link:hover {
+    color: color('base-color');
+}
+
+//.n-button:not(.n-button--reset,.n-disabled,.n-button--glass).n-button--link:focus {
+//    color: color('base-color-bg-10');
+//}
+
+.n-button:not(.n-button--reset,.n-button--link).n-button--glass {
+    color: color('base-color-fg-30');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass {
+    background: color('base-color', 0.25);
+}
+
+.n-button.n-button--neutral:not(.n-disabled,.n-button--link).n-button--glass {
+    color: color('base-color-fg-50');
+}
+
+.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass:hover {
+    background: color('base-color', 0.30);
+}
+
+//.n-button:not(.n-button--reset,.n-disabled,.n-button--link).n-button--glass:focus {
+//    background: color('base-color', 0.35);
+//}
+
+.n-button:not(.n-button--reset).n-button--link.n-button--glass {
+    color: color('base-color-fg-10');
+}
+
+.n-button.n-button--neutral:not(.n-disabled).n-button--link.n-button--glass {
+    color: color('base-color-fg-20');
+}
+
+.n-button:not(.n-button--reset,.n-disabled).n-button--link.n-button--glass:hover {
+    background: color('base-color', 0.30);
+}
+
+//.n-button:not(.n-button--reset,.n-disabled).n-button--link.n-button--glass:focus {
+//    background: color('base-color', 0.35);
+//}

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

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

package/themes/webservy/cascader/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/cascader-panel/cascader-panel";
+@forward "./src/cascader/cascader";

package/themes/webservy/cascader/src/cascader/cascader.scss

@@ -0,0 +1,27 @@
+@use "../../../root/helpers" as *;
+
+.n-cascader {
+    background: color('form-input', 0.7);
+}
+
+.n-cascader:not(.n-disabled):hover,
+.n-cascader:not(.n-disabled).n-focus {
+    background: color('form-input', 0.8);
+}
+
+.n-cascader.n-disabled {
+    background: color('form-disabled', 0.7);
+}
+
+.n-cascader__placeholder {
+    color: color('foreground', 0.6);
+}
+
+.n-cascader__body,
+.n-cascader__empty {
+     background: color('popover');
+}
+
+.n-cascader__empty {
+     color: color('gray-60');
+}

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

@@ -0,0 +1,21 @@
+@use "../../../root/helpers" as *;
+
+.n-cascader-panel {
+    background: color('background', 0.35);
+}
+
+.n-popover > .n-cascader-panel {
+    background: color('popover');
+}
+
+div:not(.n-popover) > .n-cascader-panel {
+    border: 1px solid color('gray-50', 0.15);
+}
+
+.n-cascader-panel .n-popover-option:not(.n-active) i {
+    color: color('gray-40');
+}
+
+.n-cascader-panel__items:not(:first-child) {
+    border-left: 1px solid color('gray-50', 0.15);
+}

package/themes/webservy/chart/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/chart-item/chart-item";
+@forward "./src/chart-donut/chart-donut";

package/themes/webservy/chart/src/chart-donut/chart-donut.scss

@@ -0,0 +1,22 @@
+@use "../../../root/helpers" as *;
+
+.n-chart-donut circle.n-chart-item {
+    stroke: color('base-color');
+    transition: opacity 0.2s;
+}
+
+.n-chart-donut circle.n-chart-item--other {
+    stroke: color('foreground', 0.2);
+}
+
+circle.n-chart-hover:hover + circle.n-chart-item {
+    opacity: 0.5;
+}
+
+.n-chart-donut__text span:first-child {
+    color: color('text');
+}
+
+.n-chart-donut__text span:last-child {
+    color: color('text', 0.5);
+}

package/themes/webservy/chart/src/chart-item/chart-item.scss

@@ -0,0 +1,11 @@
+@use "../../../root/helpers" as *;
+
+.n-chart-item--other, .n-chart-legend--other {
+    --n-color-base-color: var(--n-color-gray-50);
+}
+
+@for $i from 0 through 20 {
+    .n-chart-item--color-#{$i}, .n-chart-legend--color-#{$i} {
+        --n-color-base-color: var(--n-color-tag-#{$i});
+    }
+}

package/themes/webservy/checkbox/index.scss

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

package/themes/webservy/checkbox/src/checkbox/checkbox.scss

@@ -0,0 +1,25 @@
+@use "../../../root/helpers" as *;
+
+.n-checkbox__checkbox {
+    color: color('foreground');
+    background: color('form-input', 0.7);
+}
+
+.n-checkbox.n-disabled .n-checkbox__checkbox  {
+    background: color('form-disabled', 0.7);
+}
+
+.n-checkbox:not(.n-disabled):hover .n-checkbox__checkbox {
+    background: color('form-input', 0.8);
+}
+
+.n-checkbox.n-checked:not(.n-disabled) .n-checkbox__checkbox,
+.n-checkbox.n-intermediate:not(.n-disabled) .n-checkbox__checkbox {
+    color: color('base-text');
+    background: color('base-color');
+    border-color: color('base-color');
+}
+
+.n-checkbox.n-checked:not(.n-disabled) .n-checkbox__label {
+    color: color('base-color');
+}

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

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

package/themes/webservy/collapse/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/collapse/collapse";
+@forward "./src/collapse-item/collapse-item";

package/themes/webservy/collapse/src/collapse/collapse.scss

@@ -0,0 +1,14 @@
+@use "../../../root/helpers" as *;
+
+.n-collapse {
+    border: 1px solid color('gray-15');
+}
+
+.n-collapse__header {
+    background: color('form');
+    border-bottom: 1px solid color('gray-15');
+}
+
+.n-collapse__body:not(.is-last) {
+    border-bottom: 1px solid color('gray-15');
+}

package/themes/webservy/collapse/src/collapse-item/collapse-item.scss

@@ -0,0 +1,14 @@
+@use "../../../root/helpers" as *;
+
+.n-collapse__header-icon,
+.n-collapse__header-angle {
+    color: color('gray-40');
+}
+
+.n-collapse__header .n-collapse__header-icon {
+    color: color('base-color');
+}
+
+.n-collapse__header.n-active .n-collapse__header-angle {
+    color: color('base-color');
+}

package/themes/webservy/confirm/index.scss

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

package/themes/webservy/confirm/src/confirm/confirm.scss

@@ -0,0 +1,35 @@
+@use "../../../root/helpers" as *;
+
+.n-confirm {
+    background: color('shadow', 0.6);
+    backdrop-filter: blur(1.5px);
+    transition: opacity 0.3s;
+}
+
+.n-confirm:not(.n-ready) {
+    opacity: 0;
+}
+
+.n-confirm-frame {
+    background: color('confirm');
+    transition: transform 0.3s;
+    box-shadow: 0 2px 20px color('shadow', 0.1), 0 0 2px color('shadow', 0.15);
+}
+
+.n-confirm:not(.n-ready) .n-confirm-frame {
+    transform: translateY(50px) scale(0.6);
+}
+
+.n-confirm__text {
+    color: color('text');
+}
+
+.n-confirm .n-button--reset {
+    color: color('foreground', 0.6);
+    background: color('gray-50', 0.2);
+}
+
+.n-confirm__icon i {
+    color: color('base-color');
+}
+

package/themes/webservy/datepicker/index.scss

@@ -0,0 +1,2 @@
+@forward "./src/datepicker-panel/datepicker-panel";
+@forward "./src/datepicker/datepicker";