@kizmann/nano-ui 0.9.4 → 0.9.6

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

@@ -0,0 +1,21 @@
+@import "../../../root/vars";
+
+.n-collapse__header-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-collapse--#{$color} .n-collapse__header .n-collapse__header-icon {
+        color: $-color-base;
+    }
+
+    .n-collapse--#{$color} .n-collapse__header.n-active .n-collapse__header-angle {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/confirm/index.scss

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

package/themes/macos/confirm/src/confirm/confirm.scss

@@ -0,0 +1,13 @@
+@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-confirm--#{$color} .n-confirm__icon {
+        color: $-color-base;
+    }
+
+}

package/themes/macos/datepicker/index.scss

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

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

@@ -0,0 +1,50 @@
+@import "../../../root/vars";
+
+.n-datepicker {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-datepicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-datepicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-datepicker__clear,
+.n-datepicker__angle {
+    color: $color-gray-60;
+}
+
+.n-datepicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-datepicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-datepicker__body,
+.n-datepicker__empty {
+     background: $color-input;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-datepicker__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-datepicker--#{$color}:not(.n-disabled):hover,
+     .n-datepicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

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

@@ -0,0 +1,44 @@
+@import "../../../root/vars";
+
+.n-datepicker-panel {
+    background: $color-input;
+    border: 1px solid $color-gray-10;
+}
+
+.n-datepicker-panel__header {
+    border-bottom: 1px solid $color-gray-10;
+}
+
+.n-datepicker-panel__footer {
+    border-top: 1px solid $color-gray-10;
+}
+
+.n-datepicker-panel__display .n-datepicker-panel__month:hover,
+.n-datepicker-panel__display .n-datepicker-panel__year:hover {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.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: rgba($color-gray-15, 0.6);
+}
+
+.n-datepicker-panel__body .n-datepicker-panel__day:not(.n-current)  {
+    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-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,
+    .n-datepicker-panel--#{$color} .n-datepicker-panel__body .n-datepicker-panel__year.n-selected {
+        color: $color-white;
+        background: $-color-base;
+    }
+
+}

package/themes/macos/datetimepicker/index.scss

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

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

@@ -0,0 +1,67 @@
+@import "../../../root/vars";
+
+.n-datetimepicker {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-datetimepicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-datetimepicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-datetimepicker__clear,
+.n-datetimepicker__angle {
+    color: $color-gray-60;
+}
+
+.n-datetimepicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-datetimepicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-datetimepicker__body,
+.n-datetimepicker__empty {
+     background: $color-form;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-datetimepicker__empty {
+     color: $color-gray-60;
+}
+
+.n-datetimepicker__body {
+    border: 1px solid $color-gray-15;
+}
+
+.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;
+}
+
+.n-datetimepicker__time-panel.n-timepicker-panel .n-timepicker-panel__panel:not(:last-child) {
+    border-right: 1px solid $color-gray-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-datetimepicker--#{$color}:not(.n-disabled):hover,
+     .n-datetimepicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/macos/demo/index.scss

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

package/themes/macos/demo/src/demo/demo.scss

@@ -0,0 +1,22 @@
+@import "../../../root/vars";
+
+.n-demo {
+    color: $color-foreground;
+    background: $color-background;
+}
+
+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;
+}

package/themes/macos/draggable/index.scss

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

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

@@ -0,0 +1,13 @@
+@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-draggrid--#{$color}.n-empty.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+}

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

@@ -0,0 +1,65 @@
+@import "../../../root/vars";
+
+.n-draggrid-item.n-current {
+    background: rgba($color-gray-35, 0.1);
+}
+
+.n-draggrid-item.n-nodrop {
+    background: rgba($color-danger, 0.1);
+}
+
+.n-draggrid-item .n-draggrid-item__ellipsis {
+    color: $color-gray-30;
+}
+
+.n-draggrid-item__checkbox {
+    background: $color-white;
+    border: 1px solid $color-gray-15;
+}
+
+.n-draggrid-item.n-disabled .n-draggrid-item__checkbox {
+    background:rgba($color-gray-15, 0.3);
+}
+
+@each $color, $values in $colors {
+
+    $-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);
+    }
+
+    .n-draggrid--#{$color} .n-draggrid-item.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+    .n-draggrid--#{$color} .n-draggrid-item.n-highlight {
+        animation: NDraggridItem#{$color} 1s linear infinite;
+    }
+
+    .n-draggrid--#{$color} .n-draggrid-item.n-selected .n-draggrid-item__checkbox {
+        color: $color-white;
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-draggrid--#{$color} .n-draggrid-item.n-selected .n-draggrid-item__checkbox:hover {
+        background: $-color-light;
+        border-color: $-color-light;
+    }
+
+    @keyframes NDraggridItem#{$color} {
+        0% {
+            background: rgba($-color-base, 0);
+        }
+        50% {
+            background: rgba($-color-base, 0.150);
+        }
+        100% {
+            background: rgba($-color-base, 0);
+        }
+    }
+
+}

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

@@ -0,0 +1,15 @@
+@import "../../../root/vars";
+
+.n-draggable__indicator {
+    border-bottom: 1px solid $color-primary;
+}
+
+.n-draggable__counter {
+    color: $color-white;
+    background: $color-primary;
+}
+
+.n-draggable__counter[class*="n-modify--"] {
+    color: $color-white;
+    background: $color-warning;
+}

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

@@ -0,0 +1,13 @@
+@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-draglist--#{$color}.n-empty.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+}

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

@@ -0,0 +1,72 @@
+@import "../../../root/vars";
+
+.n-draglist-item.n-current {
+    background: rgba($color-gray-35, 0.1);
+}
+
+.n-draglist-item.n-nodrop {
+    background: rgba($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-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-draglist-item.n-disabled .n-draglist-item__checkbox {
+    background:rgba($color-gray-15, 0.3);
+}
+
+@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-empty.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+    .n-draglist--#{$color} .n-draglist-item.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+    .n-draglist--#{$color} .n-draglist-item.n-highlight {
+        animation: NDraglistItem#{$color} 1s linear infinite;
+    }
+
+    .n-draglist--#{$color} .n-draglist-item.n-selected .n-draglist-item__checkbox {
+        color: $color-white;
+        background: $-color-base;
+        border-color: $-color-base;
+    }
+
+    .n-draglist--#{$color} .n-draglist-item .n-draglist-item__checkbox:hover {
+        border-color: $-color-light;
+    }
+
+    .n-draglist--#{$color} .n-draglist-item.n-selected .n-draglist-item__checkbox:hover {
+        background: $-color-light;
+    }
+
+    @keyframes NDraglistItem#{$color} {
+        0% {
+            background: rgba($-color-base, 0);
+        }
+        50% {
+            background: rgba($-color-base, 0.150);
+        }
+        100% {
+            background: rgba($-color-base, 0);
+        }
+    }
+
+}

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

@@ -0,0 +1,13 @@
+@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-dropzone--#{$color}.n-dragover {
+        background: rgba($-color-base, 0.075);
+    }
+
+}

package/themes/macos/durationpicker/index.scss

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

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

@@ -0,0 +1,52 @@
+@import "../../../root/vars";
+
+.n-durationpicker {
+    background: $color-input;
+    border: 1px solid $color-gray-15;
+}
+
+.n-durationpicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-durationpicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-durationpicker__clear,
+.n-durationpicker__angle {
+    color: $color-gray-60;
+}
+
+.n-durationpicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-durationpicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-durationpicker__body,
+.n-durationpicker__empty {
+     background: $color-input;
+     border: 1px solid $color-gray-15;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-durationpicker__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-durationpicker--#{$color}:not(.n-disabled):hover,
+     .n-durationpicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/macos/empty/index.scss

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

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

@@ -0,0 +1,13 @@
+@import "../../../root/vars";
+
+.n-empty-icon--default .n-empty-icon__frame {
+    background-image: svg-load('empty-default.svg', fill=$color-foreground);
+}
+
+.n-empty-icon--ufo .n-empty-icon__frame {
+    background-image: svg-load('empty-space.svg', fill=$color-foreground);
+}
+
+.n-empty-icon__text {
+    color: rgba($color-foreground, 0.4);
+}

package/themes/macos/file/index.scss

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

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

@@ -0,0 +1,38 @@
+@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');
+
+    /**
+     * File primary
+     */
+
+    .n-file .n-button--#{$color}:not(.n-button--link) {
+        background: rgba($-color-base, 0.20);
+        border-color: rgba($-color-base, 0.05);
+        color: $-color-base;
+    }
+
+    .n-file .n-button--#{$color}:not(.n-button--link):hover {
+        background: rgba($-color-light, 0.20);
+        border-color: rgba($-color-light, 0.05);
+        color: $-color-base;
+    }
+
+    .n-file .n-button--#{$color}:not(.n-button--link):focus {
+        background: rgba($-color-dark, 0.20);
+        border-color: rgba($-color-dark, 0.05);
+        color: $-color-base;
+    }
+
+    .n-file .n-button--#{$color}:not(.n-button--link).n-disabled {
+        background: rgba($-color-base, 0.20);
+        border-color: rgba($-color-base, 0.05);
+        color: $-color-base;
+    }
+
+
+}

package/themes/macos/form/index.scss

@@ -0,0 +1,3 @@
+@import "./src/form/form";
+@import "./src/form-group/form-group";
+@import "./src/form-item/form-item";

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

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

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

@@ -0,0 +1,17 @@
+@import "../../../root/vars";
+
+.n-form-group__collapse {
+    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-form-group--#{$color} .n-form-group__label i {
+        color: $-color-base;
+    }
+
+}

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

@@ -0,0 +1,29 @@
+@import "../../../root/vars";
+
+.n-form-item__condition span {
+    color: $color-gray-50;
+}
+
+.n-form-item.is-disabled .n-form-item__condition {
+    background: rgba($color-primary, 0.1);
+}
+
+.n-form-item.is-disabled .n-form-item__condition span {
+    color: rgba($color-primary, 0.75);
+}
+
+.n-form-item.is-disabled .n-form-item__condition:hover {
+    background: rgba($color-primary, 0.15);
+}
+
+.n-form-item.is-disabled .n-form-item__condition:hover span {
+    color: rgba($color-primary, 0.85);
+}
+
+.n-form-item__label label {
+    color: $color-gray-60;
+}
+
+.n-form-item__error {
+    color: $color-danger;
+}

package/themes/macos/index-dark.scss

@@ -0,0 +1,41 @@
+@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";
+