@kizmann/nano-ui 0.9.10 → 1.0.0

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-datepicker-panel {
@@ -30,9 +31,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__day.n-selected,
     .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__month.n-selected,

package/themes/macos/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:color";
 @import "../../../root/vars";
 
 .n-datetimepicker {
@@ -6,7 +8,7 @@
 }
 
 .n-datetimepicker.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-datetimepicker__seperator {
@@ -37,27 +39,27 @@
 }
 
 .n-datetimepicker__body {
-    border: 1px solid $color-gray-15;
+    border: 1px solid $color-gray-10;
 }
 
 .n-datetimepicker__time-panel.n-timepicker-panel {
-    background: $color-gray-10;
-}
-
-.n-datetimepicker__time-panel.n-timepicker-panel .n-timepicker-panel__header {
-    border-bottom: 1px solid $color-gray-15;
+    background: color.mix($color-form, $color-background, 50%);
 }
 
-.n-datetimepicker__time-panel.n-timepicker-panel .n-timepicker-panel__panel:not(:last-child) {
-    border-right: 1px solid $color-gray-15;
+//.n-datetimepicker__time-panel.n-timepicker-panel .n-timepicker-panel__header {
+//    border-bottom: 1px solid $color-gray-15;
+//}
+//
+.n-datetimepicker__body .n-datetimepicker__date-panel {
+    border-right: 1px solid $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');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-datetimepicker--#{$color}:not(.n-disabled):hover,
      .n-datetimepicker--#{$color}:not(.n-disabled).n-focus {

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

@@ -1,10 +1,11 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-draggrid--#{$color}.n-empty.n-dragover {
         background: rgba($-color-base, 0.075);

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-draggrid-item.n-current {
@@ -23,9 +24,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-draggrid--#{$color}.n-empty.n-dragover {
         background: rgba($-color-base, 0.075);

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

@@ -1,10 +1,11 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-draglist--#{$color}.n-empty.n-dragover {
         background: rgba($-color-base, 0.075);

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-draglist-item.n-current {
@@ -22,14 +23,14 @@
 }
 
 .n-draglist-item.n-disabled .n-draglist-item__checkbox {
-    background:rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-draglist--#{$color}.n-empty.n-dragover {
         background: rgba($-color-base, 0.075);
@@ -49,7 +50,7 @@
         border-color: $-color-base;
     }
 
-    .n-draglist--#{$color} .n-draglist-item .n-draglist-item__checkbox:hover {
+    .n-draglist--#{$color} .n-draglist-item:not(.n-disabled) .n-draglist-item__checkbox:hover {
         border-color: $-color-light;
     }
 

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

@@ -1,10 +1,11 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-dropzone--#{$color}.n-dragover {
         background: rgba($-color-base, 0.075);

package/themes/macos/drawer/index.scss

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

package/themes/macos/drawer/src/drawer/drawer.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@import "../../../root/vars";
+
+.n-drawer__backdrop {
+    background: rgba(#000, 0.6);
+}
+
+.n-drawer__frame {
+    box-shadow: 0 1px 5px 1px rgba($color-shadow, 0.20);
+}
+
+@each $suffix, $values in $drawer {
+
+    $-drawer-color: map.get($values, 'color');
+    $-drawer-border: map.get($values, 'border');
+    $-drawer-header: map.get($values, 'header');
+    $-drawer-body: map.get($values, 'body');
+    $-drawer-footer: map.get($values, 'footer');
+
+    .n-drawer--#{$suffix} .n-drawer__frame {
+        color: $-drawer-color;
+        background: $-drawer-body;
+    }
+
+    .n-drawer--#{$suffix} .n-drawer__header {
+        border-bottom: 1px solid $-drawer-border;
+        background: $-drawer-header;
+    }
+
+    .n-drawer--#{$suffix} .n-drawer__footer {
+        border-top: 1px solid $-drawer-border;
+        background: $-drawer-footer;
+    }
+
+}

package/themes/macos/durationpicker/src/durationpicker/durationpicker.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-durationpicker {
@@ -6,7 +7,7 @@
 }
 
 .n-durationpicker.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-durationpicker__seperator {
@@ -40,9 +41,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-durationpicker--#{$color}:not(.n-disabled):hover,
      .n-durationpicker--#{$color}:not(.n-disabled).n-focus {

package/themes/macos/file/src/file/file.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * File primary

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-form-group__collapse {
@@ -6,9 +7,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-form-group--#{$color} .n-form-group__label i {
         color: $-color-base;

package/themes/macos/index-dark.scss

@@ -1,41 +1,3 @@
 @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";
-
+@import "./index";

package/themes/macos/index-light.scss

@@ -1,41 +1,3 @@
 @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";
-
+@import "./index";

package/themes/macos/index.scss

@@ -1,5 +1,3 @@
-@import "./root/vars-dark";
-
 @import "./empty/index";
 @import "./alert/index";
 @import "./notification/index";
@@ -36,6 +34,7 @@
 @import "./map/index";
 @import "./rating/index";
 @import "./slider/index";
+@import "./drawer/index";
 
 @import "./demo/index";
 

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-input {
@@ -5,8 +6,8 @@
     border: 1px solid $color-gray-15;
 }
 
-.n-input.n-disabled input  {
-    background: rgba($color-gray-15, 0.3);
+.n-input.n-disabled  {
+    background: $color-input-off;
 }
 
 .n-input .n-button--input {
@@ -15,9 +16,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * Button primary

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-input-number {
@@ -5,8 +6,8 @@
     border: 1px solid $color-gray-15;
 }
 
-.n-input-number.n-disabled input  {
-    background: rgba($color-gray-15, 0.3);
+.n-input-number.n-disabled  {
+    background: $color-input-off;
 }
 
 .n-input-number .n-button {
@@ -24,9 +25,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * Button primary

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-load:before {
@@ -10,9 +11,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-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/modal/src/modal/modal.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-modal__backdrop {
@@ -10,11 +11,11 @@
 
 @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');
+    $-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;

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-notification {
@@ -8,9 +9,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-notification--#{$color} {
         background: $-color-base;

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "../../../root/vars";
 
 .n-popover__frame {
@@ -32,11 +33,11 @@
 
 @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');
+    $-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;
@@ -62,9 +63,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-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 {

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-radio__radio {
@@ -7,7 +8,7 @@
 }
 
 .n-radio.n-disabled .n-radio__radio  {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-radio__radio span {
@@ -16,9 +17,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-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;

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

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-rating__stars span:before,
@@ -7,9 +8,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-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);