@kizmann/nano-ui 0.8.37 → 0.9.0

package/docs/src/scss/index.scss

@@ -4,33 +4,445 @@
 @import "./mixins/media";
 @import "./mixins/grid";
 @import "./mixins/space";
+@import "./docsify/syntax";
+
+::selection {
+    background: rgba($color-primary, 0.15);
+}
 
 * {
-    outline: none;
+    outline: none !important;
+}
+
+div {
+    box-sizing: border-box;
 }
 
 html, body {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
     font-variant-numeric: normal;
     font-feature-settings: normal;
 }
 
-pre.pretty {
-    padding: 15px 20px;
-    background: $--color-black !important;
-    color: $--color-warning !important;
-    border-radius: $radius-medium !important;
+body {
+    background: #fff linear-gradient(110deg, rgba($color-info, 0.05) 0%, rgba($color-primary, 0.05) 100%);
+}
+
+body:before {
+    z-index: 9000;
+    content: '\00a0';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff linear-gradient(110deg, $color-info 0%, $color-primary 100%);
+    transition: opacity 0.2s 0.4s, transform 0.4s 0.2s;
+}
+
+body.ready:before {
+    opacity: 0;
+    transform: translateY(-100vh);
+}
+
+body.ready header {
+    opacity: 1;
+}
+
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 26px;
+}
+
+h3 {
+    font-weight: 500;
+    font-size: 16px;
+}
+
+p {
+    font-size: 15px;
+}
+
+code {
+    font-size: 13.5px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: $color-primary;
+}
+
+h1 a {
+    transition: color 0.2s;
+}
+
+h1 a, h1 a:active, h1 a:visited,
+h2 a, h2 a:active, h2 a:visited {
+    color: $color-gray-90;
+}
+
+h1 a:hover, h2 a:hover {
+    color: $color-primary;
+}
+
+h1 a, h2 a {
+    display: inline-flex;
+    align-items: center;
+}
+
+h1 a:before, h2 a:before {
+    content: '#';
+    color: $color-primary;
+    margin-right: 15px;
+    font-size: 18px;
+}
+
+h1 a:before {
+    font-size: 18px;
+}
+
+h2 a:before {
+    font-size: 16px;
+}
+
+p {
+    color: $color-gray-65;
+}
+
+code {
+    font-family: 'Roboto Mono', Monaco, courier, monospace;
+    color: mix($color-gray-75, $color-primary, 25%);
+    background: mix($color-background, $color-primary, 95%);
+}
+
+a, a:active, a:visited {
+    color: $color-primary;
+    text-decoration: none;
+}
+
+a:hover {
+    color: $color-primary-dark;
+}
+
+table {
+    width: 100%;
+    background: $color-white;
+    border-radius: $lg-radius;
+    border-collapse: collapse;
+    box-shadow: 0 1px 14px rgba($color-shadow, 0.075);
+}
+
+table th,
+table td {
+    min-width: 180px;
+    text-align: left;
+}
+
+table thead tr th {
+    padding: 19px 24px;
+    color: $color-gray-90;
+    font-size: 13px;
+}
+
+table thead tr th b,
+table thead tr th strong {
+    font-weight: 500;
+}
+
+table thead tr:first-child th:first-child {
+    border-radius: $lg-radius 0 0 0;
+}
+
+table thead tr:first-child th:last-child {
+    border-radius: 0 $lg-radius 0 0;
+}
+
+table thead tr:last-child th {
+    border-bottom: 1px solid $color-gray-10;
+}
+
+table thead tr th:not(:last-child) {
+    border-right: 1px solid $color-gray-10;
+}
+
+table tbody tr td {
+    padding: 14px 24px;
+    color: $color-gray-65;
+    font-size: 15px;
+}
+
+table tbody tr td code {
+    //color: mix($color-gray-75, $color-info, 25%);
+}
+
+table tbody tr td:nth-child(1) code {
+    font-weight: 700;
+    color: mix($color-gray-90, $color-success, 10%);
+    background: mix($color-background, $color-success, 95%);
+}
+
+table tbody tr:not(:last-child) td {
+    border-bottom: 1px solid $color-gray-05;
+}
+
+header {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    border-bottom: 1px solid rgba($color-black, 0.07);
+}
+
+header .wrapper {
+    z-index: 100;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 140px;
+    max-width: 1490px;
+    margin: 0 auto;
+    padding: 0 40px;
+}
+
+header .logo {
+    text-align: center;
+    margin-right: auto;
+}
+
+header .logo a {
+    display: inline-block;
+    max-width: 130px;
+}
+
+header .logo img {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+}
+
+header .social:not(:last-child) {
+    margin-right: 30px;
+}
+
+header .social a {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px 14px;
+    font-size: 13px;
+    border-radius: 500px;
+    color: $color-gray-70;
+    //background: rgba($color-gray-50, 0.1);
+}
+
+header .social.black a {
+    color: rgba($color-white, 0.9);
+    background: $color-black;
+}
+
+header .social.blue a {
+    color: rgba($color-white, 0.9);
+    background: $color-primary;
+}
+
+header .social a i {
+    opacity: 0.8;
+    margin-right: 12px;
+}
+
+main {
+    z-index: 200;
+    position: relative;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 35px 0;
+}
+
+.sidebar {
+    flex: 0 0 auto;
+    display: none;
+    flex-direction: column;
+    width: 320px;
+    padding: 10px 35px 10px 35px;
+    margin-right: 50px;
+    border-right: 1px solid rgba($color-black, 0.07);
+
+    @include media('lg') {
+        display: flex;
+    }
+}
+
+.content {
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: 1120px;
+    padding: 10px 30px;
+}
+
+.app-name {
+    display: none;
+    order: 100;
+    width: 100%;
+    padding: 5px 0 20px;
+    text-align: center;
+}
+
+.app-name > a {
+    display: inline-block;
+    max-width: 120px;
+}
+
+.app-name > a > img {
+    width: 100%;
+}
+
+.search {
+    position: relative;
+    order: 200;
+    border: none !important;
+    padding: 8px 4px 12px 12px !important;
+}
+
+.search .input-wrap {
+    border-radius: 500px;
+    background: rgba($color-black, 0.05);
+}
+
+.search .input-wrap input {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 0 0 24px;
+}
+
+.search .input-wrap input,
+.search .input-wrap input:focus {
+    appearance: none;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+.results-panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+
+.matching-post > p,
+.matching-post > a > p {
+    //display: none !important;
+}
+
+.sidebar-nav {
+    order: 300;
+}
+
+.sidebar-nav p {
+    padding: 4px 12px;
+    font-size: 11px;
+    font-weight: 600;
+    color: $color-gray-80;
+    text-transform: uppercase;
+}
+
+.sidebar-nav ul ul {
+    padding: 4px 0 4px 14px;
+}
+
+.sidebar-nav a {
+    transition: color 0.2s, background 0.2s;
+}
+
+.sidebar-nav a, .sidebar-nav a:active, .sidebar-nav a:visited {
+    display: inline-block;
+    font-size: 14px;
+    color: $color-gray-55;
+    padding: 4px 12px;
+    border-radius: $md-radius;
+}
+
+.sidebar-nav ul ul ul > li > a:before {
+    content: '-';
+    color: $color-gray-20;
+    margin-right: 8px;
+}
+
+.sidebar-nav a:hover {
+    color: $color-gray-75;
+}
+
+.sidebar-nav li > a:has(+ .app-sub-sidebar),
+.sidebar-nav li > a:active:has(+ .app-sub-sidebar),
+.sidebar-nav li > a:visited:has(+ .app-sub-sidebar) {
+    color: $color-primary;
+    background: rgba($color-primary, 0.1);
+}
+
+.sidebar-nav ul ul ul li.active > a,
+.sidebar-nav ul ul ul li.active > a:active,
+.sidebar-nav ul ul ul li.active > a:visited {
+    color: $color-gray-90;
+}
+
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section h5,
+.markdown-section h6,
+.markdown-section p {
+    margin-bottom: 30px;
+}
+
+.markdown-section code {
+    background-color: rgba($color-primary, 0.15);
+    border-radius: $md-radius;
+    font-size: 0.8rem;
+    margin: 0 2px;
+    padding: 3px 5px;
+    white-space: pre-wrap;
+}
+
+.markdown-section code[data-type] {
+    color: mix($color-gray-90, $color-gray-40, 10%);
+    background: mix($color-background, $color-gray-40, 95%);
+}
+
+.markdown-section table {
+    margin-bottom: 30px;
+}
+
+.demo-wrapper {
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 30px;
+    border-radius: $lg-radius;
+    background: $color-white;
+    box-shadow: 0 1px 14px rgba($color-shadow, 0.075);
+}
+
+.markdown-section .demo-options {
+    padding: 20px 40px 24px;
+    border-bottom: 1px solid $color-gray-10;
+}
+
+.markdown-section .demo-options .n-form-item {
+    margin-bottom: 4px;
+}
+
+.markdown-section .demo-options .n-select {
+    //width: 220px;
 }
 
-.app-name img {
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 20px auto;
+.markdown-section .demo-display {
+    padding: 40px;
 }
 
-.demo-box {
-    border: 1px solid $color-gray-10;
-    border-radius: $radius-medium;
-    box-shadow: 0 1px 3px rgba($color-black, 0.05);
+.markdown-section .demo-display > .grid:not(:last-child) {
+    margin-bottom: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/nano-ui",
-    "version": "0.8.37",
+    "version": "0.9.0",
     "license": "MIT",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",

package/src/button/src/button/button.js

@@ -62,14 +62,6 @@ export default {
             type: [String]
         },
 
-        buttonType: {
-            default()
-            {
-                return 'button';
-            },
-            type: [String]
-        },
-
         nativeType: {
             default()
             {
@@ -135,7 +127,7 @@ export default {
         }
 
         if ( this.$slots.default && ! this.square ) {
-            innerHtml.push(<span>{ this.$slots.default() }</span>);
+            innerHtml.push(<span>{ this.$slots.default && this.$slots.default() }</span>);
         }
 
         if ( this.iconPosition === 'after' ) {

package/src/mixins/src/ctor.js

@@ -6,12 +6,6 @@ export default {
     {
         let ctor = Obj.get(this.$options, key.split('.'), -1);
 
-
-
-        //console.log(this.$options, ctor);
-
-        // console.log(ctor);
-
         // if ( ctor === -1 ) {
         //     ctor = Obj.get(this.$vnode.componentOptions.Ctor,
         //         Arr.merge(['options'], key.split('.')), -1);

package/src/radio/src/radio-group/radio-group.js

@@ -101,7 +101,7 @@ export default {
 
         return (
             <div class={classList}>
-                { this.$slots.default() }
+                { this.$slots.default && this.$slots.default() }
             </div>
         );
     }

package/src/root/vars.scss

@@ -21,15 +21,15 @@ $color-gray-85:         mix($color-black, $color-white, 0.85 * 100%) !default;
 $color-gray-90:         mix($color-black, $color-white, 0.90 * 100%) !default;
 $color-gray-95:         mix($color-black, $color-white, 0.95 * 100%) !default;
 
-$color-primary:         #4e7bff !default;
-$color-secondary:       #683bff !default;
+$color-secondary:       #ca62f0 !default;
+$color-primary:         #6875ee !default;
 
-$color-success:         #3ed786 !default;
-$color-warning:         #ffac2f !default;
-$color-danger:          #fd2f51 !default;
-$color-info:            #37C4EF !default;
+$color-success:         #06C493 !default;
+$color-warning:         #FFBF3F !default;
+$color-danger:          #F9536E !default;
+$color-info:            #4BD6F9 !default;
 
-$color-background:      #f0f3f7 !default;
+$color-background:      #FAFAFB !default;
 
 $color-shadow:              mix($color-black, $color-primary, 80%) !default;
 
@@ -95,8 +95,8 @@ $color-background-darker:   darken(mix($color-black, $color-background, 20%), 5%
 
 $xs-radius:                 2px !default;
 $sm-radius:                 2px !default;
-$md-radius:                 3px !default;
-$lg-radius:                 5px !default;
+$md-radius:                 4px !default;
+$lg-radius:                 6px !default;
 $xl-radius:                 10px !default;
 
 $form: (
@@ -114,7 +114,7 @@ $form: (
     ),
     'md': (
         'size': 32px,
-        'font': 14px,
+        'font': 15px,
         'radius': $md-radius,
         'ratio': 0.40,
     ),

package/src/table/src/table/table.scss

@@ -7,7 +7,6 @@
     display: flex;
     flex-direction: column;
     border-radius: $md-radius + 2;
-    border: 1px solid transparent;
 }
 
 .n-table .n-table__wrap,

package/src/tags/src/tags-item/tags-item.js

@@ -30,6 +30,14 @@ export default {
             type: [String]
         },
 
+        type: {
+            default()
+            {
+                return -1;
+            },
+            type: [String, Number]
+        },
+
         color: {
             default()
             {
@@ -91,9 +99,17 @@ export default {
         let classList = [
             'n-tags-item',
             'n-tags-item--' + size,
-            'n-tags-item--color-' + this.color,
+            ,
         ];
 
+        if ( this.type === -1 ) {
+            classList.push('n-tags-item--color-' + this.color);
+        }
+
+        if ( this.type !== -1 ) {
+            classList.push('n-tags-item--color-' + this.type);
+        }
+
         return (
             <div class={classList}>
                 {[this.ctor('renderIcon')(), this.ctor('renderLabel')()]}

package/themes/light/root/vars.scss

@@ -21,15 +21,15 @@ $color-gray-85:         mix($color-black, $color-white, 0.85 * 100%) !default;
 $color-gray-90:         mix($color-black, $color-white, 0.90 * 100%) !default;
 $color-gray-95:         mix($color-black, $color-white, 0.95 * 100%) !default;
 
-$color-primary:         #4e7bff !default;
-$color-secondary:       #683bff !default;
+$color-secondary:       #ca62f0 !default;
+$color-primary:         #6875ee !default;
 
-$color-success:         #3ed786 !default;
-$color-warning:         #ffac2f !default;
-$color-danger:          #fd2f51 !default;
-$color-info:            #37C4EF !default;
+$color-success:         #06C493 !default;
+$color-warning:         #FFBF3F !default;
+$color-danger:          #F9536E !default;
+$color-info:            #4BD6F9 !default;
 
-$color-background:      #f0f3f7 !default;
+$color-background:      #FAFAFB !default;
 
 $color-shadow:              mix($color-black, $color-primary, 80%) !default;
 
@@ -95,8 +95,8 @@ $color-background-darker:   darken(mix($color-black, $color-background, 20%), 5%
 
 $xs-radius:                 2px !default;
 $sm-radius:                 2px !default;
-$md-radius:                 3px !default;
-$lg-radius:                 5px !default;
+$md-radius:                 4px !default;
+$lg-radius:                 6px !default;
 $xl-radius:                 10px !default;
 
 $form: (
@@ -114,7 +114,7 @@ $form: (
         ),
         'md': (
                 'size': 32px,
-                'font': 14px,
+                'font': 15px,
                 'radius': $md-radius,
                 'ratio': 0.40,
         ),

package/themes/light/switch/src/switch/switch.scss

@@ -18,7 +18,7 @@
 
     .n-switch--#{$color}:not(.n-disabled) .n-switch__switch {
         background: $-color-base;
-        border-color: $-color-dark;
+        border-color: mix($-color-dark, $-color-base, 25%);
     }
 
     .n-switch--#{$color}:not(.n-disabled) .n-switch__label {

package/themes/light/table/src/table/table.scss

@@ -1,7 +1,7 @@
 @import "../../../root/vars";
 
 .n-table {
-    border: 1px solid $color-gray-15;
+    box-shadow: inset 0 0 1px 1px $color-gray-15;
 }
 
 .n-table .n-draglist-item {

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

@@ -1,5 +1,21 @@
 @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: 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} {