@kizmann/nano-ui 1.0.15 → 1.1.2

package/themes/macos/root/vars.scss

@@ -1,233 +0,0 @@
-@use "sass:color";
-
-$color-white:           #ffffff !default;
-$color-black:           #111111 !default;
-
-$color-foreground:      $color-white !default;
-$color-background:      $color-black !default;
-
-$color-gray-05:         color.mix($color-foreground, $color-background, 0.05 * 100%) !default;
-$color-gray-10:         color.mix($color-foreground, $color-background, 0.10 * 100%) !default;
-$color-gray-15:         color.mix($color-foreground, $color-background, 0.15 * 100%) !default;
-$color-gray-20:         color.mix($color-foreground, $color-background, 0.20 * 100%) !default;
-$color-gray-25:         color.mix($color-foreground, $color-background, 0.25 * 100%) !default;
-$color-gray-30:         color.mix($color-foreground, $color-background, 0.30 * 100%) !default;
-$color-gray-35:         color.mix($color-foreground, $color-background, 0.35 * 100%) !default;
-$color-gray-40:         color.mix($color-foreground, $color-background, 0.40 * 100%) !default;
-$color-gray-45:         color.mix($color-foreground, $color-background, 0.45 * 100%) !default;
-$color-gray-50:         color.mix($color-foreground, $color-background, 0.50 * 100%) !default;
-$color-gray-55:         color.mix($color-foreground, $color-background, 0.55 * 100%) !default;
-$color-gray-60:         color.mix($color-foreground, $color-background, 0.60 * 100%) !default;
-$color-gray-65:         color.mix($color-foreground, $color-background, 0.65 * 100%) !default;
-$color-gray-70:         color.mix($color-foreground, $color-background, 0.70 * 100%) !default;
-$color-gray-75:         color.mix($color-foreground, $color-background, 0.75 * 100%) !default;
-$color-gray-80:         color.mix($color-foreground, $color-background, 0.80 * 100%) !default;
-$color-gray-85:         color.mix($color-foreground, $color-background, 0.85 * 100%) !default;
-$color-gray-90:         color.mix($color-foreground, $color-background, 0.90 * 100%) !default;
-$color-gray-95:         color.mix($color-foreground, $color-background, 0.95 * 100%) !default;
-
-$color-form:            $color-gray-05 !default;
-$color-input:           $color-background !default;
-$color-input-off:       $color-gray-05 !default;
-
-$color-secondary:       #d31f9d !default;
-$color-primary:         #2F89FE !default;
-
-$color-success:         #06C493 !default;
-$color-warning:         #FFBF3F !default;
-$color-danger:          #F9536E !default;
-$color-info:            #4BD6F9 !default;
-
-$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
-
-
-$color-white-light:         $color-white !default;
-$color-white-lighter:       $color-white !default;
-
-$color-white-dark:          color.mix($color-gray-50, $color-white, 5%) !default;
-$color-white-darker:        color.mix($color-gray-50, $color-white, 10%) !default;
-
-$color-black-light:         color.mix($color-gray-50, $color-black, 5%) !default;
-$color-black-lighter:       color.mix($color-gray-50, $color-black, 10%) !default;
-
-$color-black-dark:          $color-black !default;
-$color-black-darker:        $color-black !default;
-
-
-$color-primary-light:       color.adjust(color.mix($color-white, $color-primary, 10%), $lightness: 5%) !default;
-$color-primary-lighter:     color.adjust(color.mix($color-white, $color-primary, 20%), $lightness: 5%) !default;
-
-$color-primary-dark:        color.adjust(color.mix($color-black, $color-primary, 10%), $lightness: -5%) !default;
-$color-primary-darker:      color.adjust(color.mix($color-black, $color-primary, 20%), $lightness: -5%) !default;
-
-
-$color-secondary-light:     color.adjust(color.mix($color-white, $color-secondary, 10%), $lightness: 5%) !default;
-$color-secondary-lighter:   color.adjust(color.mix($color-white, $color-secondary, 20%), $lightness: 5%) !default;
-
-$color-secondary-dark:      color.adjust(color.mix($color-black, $color-secondary, 10%), $lightness: -5%) !default;
-$color-secondary-darker:    color.adjust(color.mix($color-black, $color-secondary, 20%), $lightness: -5%) !default;
-
-
-$color-success-light:       color.adjust(color.mix($color-white, $color-success, 10%), $lightness: 5%) !default;
-$color-success-lighter:     color.adjust(color.mix($color-white, $color-success, 20%), $lightness: 5%) !default;
-
-$color-success-dark:        color.adjust(color.mix($color-black, $color-success, 10%), $lightness: -5%) !default;
-$color-success-darker:      color.adjust(color.mix($color-black, $color-success, 20%), $lightness: -5%) !default;
-
-
-$color-warning-light:       color.adjust(color.mix($color-white, $color-warning, 10%), $lightness: 5%) !default;
-$color-warning-lighter:     color.adjust(color.mix($color-white, $color-warning, 20%), $lightness: 5%) !default;
-
-$color-warning-dark:        color.adjust(color.mix($color-black, $color-warning, 10%), $lightness: -5%) !default;
-$color-warning-darker:      color.adjust(color.mix($color-black, $color-warning, 20%), $lightness: -5%) !default;
-
-
-$color-danger-light:        color.adjust(color.mix($color-white, $color-danger, 10%), $lightness: 5%) !default;
-$color-danger-lighter:      color.adjust(color.mix($color-white, $color-danger, 20%), $lightness: 5%) !default;
-
-$color-danger-dark:         color.adjust(color.mix($color-black, $color-danger, 10%), $lightness: -5%) !default;
-$color-danger-darker:       color.adjust(color.mix($color-black, $color-danger, 20%), $lightness: -5%) !default;
-
-$color-info-light:          color.adjust(color.mix($color-white, $color-info, 10%), $lightness: 5%) !default;
-$color-info-lighter:        color.adjust(color.mix($color-white, $color-info, 20%), $lightness: 5%) !default;
-
-$color-info-dark:           color.adjust(color.mix($color-black, $color-info, 10%), $lightness: -5%) !default;
-$color-info-darker:         color.adjust(color.mix($color-black, $color-info, 20%), $lightness: -5%) !default;
-
-$color-background-light:    color.adjust(color.mix($color-white, $color-background, 10%), $lightness: 5%) !default;
-$color-background-lighter:  color.adjust(color.mix($color-white, $color-background, 20%), $lightness: 5%) !default;
-
-$color-background-dark:     color.adjust(color.mix($color-black, $color-background, 10%), $lightness: -5%) !default;
-$color-background-darker:   color.adjust(color.mix($color-black, $color-background, 20%), $lightness: -5%) !default;
-
-$xs-radius:                 2px !default;
-$sm-radius:                 4px !default;
-$md-radius:                 6px !default;
-$lg-radius:                 8px !default;
-$xl-radius:                 12px !default;
-
-$form: (
-        'xs': (
-                'size': 26px,
-                'font': 11px,
-                'radius': $xs-radius,
-                'ratio': 0.40,
-        ),
-        'sm': (
-                'size': 28px,
-                'font': 13px,
-                'radius': $sm-radius,
-                'ratio': 0.40,
-        ),
-        'md': (
-                'size': 32px,
-                'font': 15px,
-                'radius': $md-radius,
-                'ratio': 0.40,
-        ),
-        'lg': (
-                'size': 36px,
-                'font': 16px,
-                'radius': $lg-radius,
-                'ratio': 0.40,
-        ),
-) !default;
-
-$colors: (
-        'primary': (
-                'base': $color-primary,
-                'light': $color-primary-light,
-                'dark': $color-primary-dark
-        ),
-        'secondary': (
-                'base': $color-secondary,
-                'light': $color-secondary-light,
-                'dark': $color-secondary-dark
-        ),
-        'info': (
-                'base': $color-info,
-                'light': $color-info-light,
-                'dark': $color-info-dark
-        ),
-        'success': (
-                'base': $color-success,
-                'light': $color-success-light,
-                'dark': $color-success-dark
-        ),
-        'warning': (
-                'base': $color-warning,
-                'light': $color-warning-light,
-                'dark': $color-warning-dark
-        ),
-        'danger': (
-                'base': $color-danger,
-                'light': $color-danger-light,
-                'dark': $color-danger-dark
-        ),
-) !default;
-
-$popover: (
-        'default': (
-                'color': $color-foreground,
-                'border': $color-gray-15,
-                'header': $color-form,
-                'body': $color-form,
-                'footer': $color-form,
-        ),
-        'negative': (
-                'color': $color-background,
-                'border': $color-gray-95,
-                'header': $color-foreground,
-                'body': $color-foreground,
-                'footer': $color-foreground,
-        )
-) !default;
-
-$modal: (
-        'default': (
-                'color': $color-foreground,
-                'border': $color-gray-10,
-                'header': color.mix($color-background, $color-form, 50%),
-                'body': $color-background,
-                'footer': $color-background,
-        ),
-        'preview': (
-                'color': $color-white,
-                'border': $color-gray-95,
-                'header': $color-black,
-                'body': $color-black,
-                'footer': $color-black,
-        )
-) !default;
-
-$drawer: (
-        'default': (
-                'color': $color-foreground,
-                'border': $color-gray-10,
-                'header': color.mix($color-background, $color-form, 50%),
-                'body': $color-background,
-                'footer': $color-background,
-        )
-) !default;
-
-$colors-tags: (
-        '0': color.mix($color-secondary, $color-secondary, 65%),
-        '1': color.mix($color-primary, $color-secondary, 65%),
-        '2': color.mix($color-danger, $color-secondary, 65%),
-        '3': color.mix($color-success, $color-secondary, 65%),
-        '4': color.mix($color-warning, $color-secondary, 65%),
-        '5': color.mix($color-primary, $color-success, 65%),
-        '6': color.mix($color-secondary, $color-success, 65%),
-        '7': color.mix($color-danger, $color-success, 65%),
-        '8': color.mix($color-success, $color-success, 65%),
-        '9': color.mix($color-warning, $color-success, 65%),
-        '10': color.mix($color-primary, $color-danger, 65%),
-        '11': color.mix($color-secondary, $color-danger, 65%),
-        '12': color.mix($color-danger, $color-danger, 65%),
-        '13': color.mix($color-success, $color-danger, 65%),
-        '14': color.mix($color-warning, $color-danger, 65%),
-        '15': color.mix($color-primary, $color-warning, 65%),
-        '16': color.mix($color-secondary, $color-warning, 65%),
-        '17': color.mix($color-danger, $color-warning, 65%),
-        '18': color.mix($color-success, $color-warning, 65%),
-) !default;

package/themes/macos/scrollbar/index.scss

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

package/themes/macos/scrollbar/src/scrollbar/scrollbar.scss

@@ -1,6 +0,0 @@
-@import "../../../root/vars";
-
-.n-scrollbar-v:before,
-.n-scrollbar-h:before {
-    background: rgba($color-foreground, 0.4);
-}

package/themes/macos/select/index.scss

@@ -1,2 +0,0 @@
-@import "./src/select/select";
-@import "./src/select-option/select-option";

package/themes/macos/select/src/select/select.scss

@@ -1,49 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-select {
-    background: $color-input;
-    border: 1px solid $color-gray-15;
-}
-
-.n-select.n-disabled {
-    background: $color-input-off;
-}
-
-.n-select__clear,
-.n-select__angle {
-    color: $color-gray-60;
-}
-
-.n-select__clear i {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-select__body,
-.n-select__empty {
-    border: 1px solid $color-gray-15;
-    background: $color-input;
-    box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
-}
-
-.n-select__empty {
-    color: $color-gray-60;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-     .n-select--#{$color}:not(.n-disabled):hover,
-     .n-select--#{$color}:not(.n-disabled).n-focus {
-        border-color: $-color-base;
-    }
-
-    .n-select--#{$color} .n-select__item {
-        color: $color-white;
-        background: $-color-base;
-    }
-
-}

package/themes/macos/select/src/select-option/select-option.scss

@@ -1 +0,0 @@
-@import "../../../root/vars";

package/themes/macos/slider/index.scss

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

package/themes/macos/slider/src/slider/slider.scss

@@ -1,41 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-slider__bar {
-    background: $color-gray-10;
-}
-
-.n-slider.n-disabled .n-slider__range {
-    background: $color-gray-50;
-}
-
-.n-slider__handle {
-    background: $color-white;
-    box-shadow: 0 0 4px rgba($color-shadow, 0.15);
-}
-
-.n-slider.n-disabled .n-slider__handle {
-    border: 6px solid $color-gray-50;
-}
-
-.n-slider__handle span {
-    color: $color-white;
-    background: rgba($color-black, 0.8);
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-    .n-slider--#{$color}:not(.n-disabled) .n-slider__range {
-        background: $-color-base;
-    }
-
-    .n-slider--#{$color}:not(.n-disabled) .n-slider__handle {
-        border: 6px solid $-color-base;
-    }
-
-}
-

package/themes/macos/switch/index.scss

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

package/themes/macos/switch/src/switch/switch.scss

@@ -1,30 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@import "../../../root/vars";
-
-.n-switch__switch {
-    background: $color-gray-10;
-    border: 1px solid $color-gray-15;
-}
-
-.n-switch__switch span {
-    background: $color-white;
-    box-shadow: 0 1px 2px rgba($color-shadow, 0.15);
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-    .n-switch--#{$color}:not(.n-disabled) .n-switch__switch {
-        background: $-color-base;
-        border-color: color.mix($-color-dark, $-color-base, 25%);
-    }
-
-    .n-switch--#{$color}:not(.n-disabled) .n-switch__label {
-        color: $-color-base;
-    }
-
-}

package/themes/macos/table/index.scss

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

package/themes/macos/table/src/table/table.scss

@@ -1,15 +0,0 @@
-@import "../../../root/vars";
-
-.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: 1px solid $color-gray-15;
-    background: $color-form;
-    box-shadow: 0 0 3px rgba($color-shadow, 0.10);
-}

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

@@ -1,51 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.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;
-    transform: rotate(-45deg);
-}
-
-.n-table-cell--image > div {
-    background-color: $color-gray-05;
-}
-
-.n-table-cell--checkbox i {
-    background: $color-input;
-    border: 1px solid $color-gray-15;
-}
-
-.n-table-cell--checkbox.n-disabled i {
-    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');
-
-    .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-disabled) i,
-    .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-uncheck) i {
-        color: $color-white;
-        background: $-color-base;
-        border-color: $-color-base;
-    }
-
-    .n-draglist--#{$color} .n-table-cell--checkbox:not(.n-disabled):hover i {
-        border-color: $-color-light;
-    }
-
-    .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-disabled):hover i {
-        background: $-color-light;
-    }
-
-}

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

@@ -1 +0,0 @@
-@import "../../../root/vars";

package/themes/macos/tabs/index.scss

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

package/themes/macos/tabs/src/tabs/tabs.scss

@@ -1,39 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-tabs:not(.n-float) > .n-tabs__header:after {
-    border-bottom: 1px solid $color-gray-15;
-}
-
-.n-tabs__indicator {
-    background: $color-black;
-}
-
-.n-float .n-tabs__tab {
-    background: $color-form;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-    .n-tabs--#{$color} .n-tabs__indicator {
-        background: $-color-base;
-    }
-
-    .n-tabs--#{$color}.n-float .n-tabs__tab.n-active {
-        color: $color-white;
-        background: $-color-base;
-    }
-
-    .n-tabs--#{$color}.n-float .n-tabs__tab.n-active .n-tabs__tab-icon {
-        color: $color-white;
-    }
-
-    .n-tabs--#{$color}.n-float .n-tabs__tab.n-active .n-tabs__tab-label {
-        color: $color-white;
-    }
-
-}

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

@@ -1,19 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-tabs__tab-icon {
-    color: $color-gray-40;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-    .n-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-icon,
-    .n-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-label {
-        color: $-color-base;
-    }
-
-}

package/themes/macos/tags/index.scss

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

package/themes/macos/tags/src/tags/tags.scss

@@ -1 +0,0 @@
-@import "../../../root/vars";

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

@@ -1,32 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-@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');
-
-    .n-tags-item--color-#{$color} {
-        color: color.mix($-color-base, $color-foreground, 35%);
-        //color: color.mix($-color-dark, $color-black, 70%);
-        background: rgba($-color-base, 0.25);
-    }
-    .n-tags-item--color-#{$color} i {
-        color: rgba($-color-base, 0.75);
-    }
-
-}
-
-@each $-tags-index, $-tags-color in $colors-tags {
-
-    .n-tags-item--color-#{$-tags-index} {
-        color: color.mix($-tags-color, $color-foreground, 35%);
-        background: rgba($-tags-color, 0.25);
-    }
-    .n-tags-item--color-#{$-tags-index} i {
-        color: rgba($-tags-color, 0.75);
-    }
-
-}

package/themes/macos/textarea/index.scss

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

package/themes/macos/textarea/src/textarea/textarea.scss

@@ -1,31 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-textarea textarea {
-    background: $color-input;
-    border: 1px solid $color-gray-15;
-}
-
-.n-textarea.n-disabled textarea  {
-    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');
-
-    /**
-     * Button primary
-     */
-
-    .n-textarea--#{$color}:not(.n-disabled):hover textarea {
-        border-color: $-color-base;
-    }
-
-    .n-textarea--#{$color}:not(.n-disabled) textarea:focus{
-        border-color: $-color-light;
-    }
-
-}

package/themes/macos/timepicker/index.scss

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

package/themes/macos/timepicker/src/timepicker/timepicker.scss

@@ -1,51 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-timepicker {
-    background: $color-input;
-    border: 1px solid $color-gray-15;
-}
-
-.n-timepicker.n-disabled {
-    background: $color-input-off;
-}
-
-.n-timepicker__seperator {
-    color: $color-gray-60;
-}
-
-.n-timepicker__clear,
-.n-timepicker__angle {
-    color: $color-gray-60;
-}
-
-.n-timepicker__clear i {
-    background: rgba($color-gray-15, 0.6);
-}
-
-.n-timepicker__placeholder {
-    color: rgba($color-black, 0.5);
-}
-
-.n-timepicker__body,
-.n-timepicker__empty {
-     background: $color-input;
-     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
-}
-
-.n-timepicker__empty {
-     color: $color-gray-60;
-}
-
-@each $color, $values in $colors {
-
-    $-color-base: map.get($values, 'base');
-    $-color-light: map.get($values, 'light');
-    $-color-dark: map.get($values, 'dark');
-
-     .n-timepicker--#{$color}:not(.n-disabled):hover,
-     .n-timepicker--#{$color}:not(.n-disabled).n-focus {
-        border-color: $-color-base;
-    }
-
-}

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

@@ -1,28 +0,0 @@
-@use "sass:map";
-@import "../../../root/vars";
-
-.n-timepicker-panel {
-    background: $color-input;
-    border: 1px solid $color-gray-10;
-}
-
-.n-timepicker-panel__header {
-    border-bottom: 1px solid $color-gray-10;
-}
-
-.n-timepicker-panel__panel:not(:last-child) {
-    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');
-
-    .n-timepicker-panel--#{$color} .n-timepicker-panel__item.n-selected {
-        color: $color-white;
-        background: $-color-base;
-    }
-
-}