@kizmann/nano-ui 0.9.10 → 1.0.0

package/docs/src/scss/theme/default.scss

@@ -0,0 +1,123 @@
+@use "sass:color";
+@import "../root/vars";
+
+::selection {
+    background: rgba($color-secondary, 0.15);
+}
+
+* {
+    outline: none !important;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+html, body {
+    font-family: 'Inter', sans-serif;
+    color: $color-foreground;
+    font-size: 15px;
+    font-variant-numeric: normal;
+    font-feature-settings: normal;
+}
+
+body {
+    background: color.mix($color-background-abs, $color-form, 50%);
+}
+
+body.ready header {
+    opacity: 1;
+}
+
+h1 {
+    font-size: 38px;
+}
+
+h2 {
+    font-size: 32px;
+}
+
+h3 {
+    font-size: 26px;
+}
+
+p {
+    font-size: 16px;
+    line-height: 1.7em;
+}
+
+code {
+    font-size: 14px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: $color-white;
+}
+
+h1 a, h2 a, h3 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-foreground;
+}
+
+h1 a, h2 a, h3 a {
+    display: inline-flex;
+    align-items: center;
+}
+
+h1 a:hover:after,
+h2 a:hover:after,
+h3 a:hover:after {
+    content: '\f0c1';
+    margin-left: 15px;
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    color: rgba($color-foreground, 0.4);
+}
+
+h1 a:after {
+    font-size: 16px;
+}
+
+h2 a:after {
+    font-size: 14px;
+}
+
+h3 a:after {
+    font-size: 12px;
+}
+
+p {
+    color: $color-foreground;
+}
+
+hr {
+    border-bottom: 1px solid rgba($color-gray-50, 0.2);
+    margin: 60px 0;
+}
+
+code {
+    font-family: "JetBrains Mono", monospace;
+    color: color.mix($color-foreground, $color-secondary, 40%);
+    background: rgba($color-secondary, 0.2);
+}
+
+a, a:active, a:visited {
+    color: color.mix($color-foreground, $color-secondary, 40%);
+    text-decoration: none;
+}
+
+a:hover {
+    color: color.mix($color-foreground, $color-secondary, 60%);
+}
+
+.hidden {
+    display: none;
+}

package/docs/src/scss/theme/header.scss

@@ -0,0 +1,147 @@
+@import "../root/vars";
+@import "../mixins/media";
+
+header {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    @include media('sm') {
+        border-bottom: 1px solid $color-gray-10;
+    }
+}
+
+header .wrapper {
+    z-index: 100;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100px;
+    max-width: 1560px;
+    margin: 0 auto;
+    padding: 0 20px;
+
+    @include media('sm') {
+        padding: 0 40px;
+    }
+}
+
+header .logo:first-child {
+    margin-left: 60px;
+}
+
+header .logo {
+    text-align: center;
+    margin-right: 15px;
+    padding-top: 5px;
+}
+
+header .logo.logo-alt {
+    display: none;
+
+    @include media('md') {
+        display: inline-block;
+    }
+}
+
+header .logo a {
+    display: inline-block;
+    max-width: 130px;
+}
+
+header .logo.logo-alt a {
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+}
+
+header .logo.logo-alt a:hover {
+    opacity: 1;
+}
+
+header .logo img {
+    display: block;
+    width: 100%;
+    max-height: 100%;
+    height: 50px;
+}
+
+header .logo.logo-alt img {
+    height: 30px;
+}
+
+.spacer {
+    flex: 1 1 auto;
+    max-width: 0;
+    margin: 0 auto;
+}
+
+header .social:not(:last-child) {
+    margin-right: 15px;
+}
+
+header .social.black {
+    display: none;
+    @include media('sm') {
+        display: block;
+    }
+}
+
+header .social a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    height: 37px;
+    width: 37px;
+    font-size: 15px;
+    border-radius: 500px;
+    color: $color-gray-70;
+
+    @include media('lg') {
+        padding: 0 18px;
+        width: auto;
+    }
+    //background: rgba($color-gray-50, 0.1);
+}
+
+header .social.black a {
+    color: rgba($color-foreground, 0.9);
+    background: $color-gray-10;
+}
+
+header .social.blue a {
+    color: $color-foreground;
+    background: rgba($color-secondary, 0.5);
+}
+
+header .social a span {
+    display: none;
+
+    @include media('lg') {
+        display: inline;
+    }
+}
+
+header .social a i {
+    @include media('lg') {
+        margin-right: 12px;
+    }
+}
+
+header .theme:not(:last-child) {
+    margin-right: 15px;
+}
+
+header .theme.last {
+    margin-right: 30px;
+}
+
+header .theme a {
+    color: $color-gray-50;
+}
+
+header .theme a.active {
+    color: $color-foreground;
+}

package/docs/src/scss/theme/layout.scss

@@ -0,0 +1,186 @@
+@import "../root/vars";
+@import "../mixins/media";
+
+main {
+    z-index: 200;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-width: 1560px;
+    margin: 0 auto;
+    padding: 0;
+
+    @include media('sm') {
+        padding: 30px 40px 10px;
+    }
+}
+
+main .sidebar {
+    z-index: 200;
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    width: calc(100% - 20px);
+    background: $color-input;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    transition: max-width 0.15s ease;
+    border-radius: $lg-radius;
+    box-shadow: 0 4px 24px rgba($color-shadow, 0.1);
+
+    @include media('sm') {
+        position: relative;
+        width: 220px;
+        max-width: 220px;
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
+    }
+
+    @include media('md') {
+        position: relative;
+        width: 260px;
+        max-width: 260px;
+        padding: 0;
+        background: transparent;
+    }
+
+    @include media('lg') {
+        width: 320px;
+        max-width: 320px;
+    }
+}
+
+body.close main .sidebar {
+
+    @include media('sm') {
+        max-width: 0;
+    }
+}
+
+main .sidebar-nav {
+    width: 340px;
+    padding: 20px;
+    display: none;
+
+    @include media('sm') {
+        display: block;
+        padding: 0;
+    }
+}
+
+
+body.close main .sidebar-nav {
+    display: block;
+
+    @include media('sm') {
+        display: none;
+    }
+}
+
+main .sidebar-toggle {
+    z-index: 800000;
+    position: absolute;
+    top: -74px;
+    left: 20px;
+    width: 52px;
+    height: 52px;
+    border-radius: 500px;
+    background: transparent;
+
+    @include media('sm') {
+        top: -75px;
+        left: 40px;
+    }
+}
+
+main .sidebar-toggle .sidebar-toggle-button:before,
+main .sidebar-toggle .sidebar-toggle-button:after {
+    position: absolute;
+    left: calc(50% - 10px);
+    top: calc(50% - 10px);
+    display: flex;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    align-items: center;
+    justify-content: center;
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+}
+
+main .sidebar-toggle .sidebar-toggle-button:before {
+    content: '\f0c9';
+    font-size: 22px;
+    margin-left: -3px;
+    color: $color-foreground;
+}
+
+main .sidebar-toggle .sidebar-toggle-button:after {
+    content: '\f104';
+    font-size: 13px;
+    color: $color-gray-50;
+    margin-left: 14px;
+    transition: transform 0.15s ease;
+    transform: rotate(180deg);
+
+    @include media('sm') {
+        transform: rotate(0deg);
+    }
+}
+
+body.close main .sidebar-toggle .sidebar-toggle-button:after {
+    transform: rotate(0deg);
+
+    @include media('sm') {
+        transform: rotate(180deg);
+    }
+}
+
+.content {
+    overflow: hidden;
+    flex: 0 1 auto;
+    width: 100%;
+    padding: 0;
+    transition: max-width 0.15s ease;
+}
+
+.content > article {
+    position: relative;
+    padding: 30px;
+}
+
+.content > article:before {
+    z-index: -10;
+    content: '\00a0';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 400px;
+    background: linear-gradient(180deg, rgba($color-secondary, 0.3) 0%, rgba($color-secondary, 0) 100%);
+
+    @include media('sm') {
+        border-radius: $lg-radius;
+    }
+}
+
+.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%;
+}
+

package/docs/src/scss/theme/loader.scss

@@ -0,0 +1,63 @@
+@keyframes docs-loader {
+    0%, 100% {
+        transform: translateX(-60px);
+    }
+    50% {
+        transform: translateX(60px);
+    }
+}
+
+body .loader {
+    z-index: 9999999;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    background: #000;
+    border-radius: 6px;
+    transform: translate(-50%, -50%);
+}
+
+body .loader span {
+    display: inline-flex;
+    padding: 40px;
+}
+
+body .loader span svg {
+    display: block;
+    width: 100px;
+    height: auto;
+}
+
+body .loader span:before {
+    z-index: 10;
+    content: '\00a0';
+    position: absolute;
+    top: calc(50% + 70px);
+    left: calc(50% - 85px);
+    width: 170px;
+    height: 5px;
+    border-radius: 500px;
+    background: rgba(125, 125, 125, 0.2);
+}
+
+body .loader span:after {
+    z-index: 20;
+    content: '\00a0';
+    position: absolute;
+    top: calc(50% + 70px);
+    left: calc(50% - 25px);
+    width: 50px;
+    height: 5px;
+    border-radius: 500px;
+    background: rgba(125, 125, 125, 0.5);
+    animation: docs-loader 1.6s infinite ease;
+}
+
+body.ready .loader {
+    display: none;
+}
+
+body:not(.ready) header,
+body:not(.ready) main {
+    visibility: hidden !important;
+}

package/docs/src/scss/theme/markdown.scss

@@ -0,0 +1,79 @@
+@use "sass:color";
+@import "../root/vars";
+
+.markdown-section h1,
+.markdown-section h2,
+.markdown-section h3,
+.markdown-section h4,
+.markdown-section h5,
+.markdown-section h6,
+.markdown-section p {
+    margin-bottom: 34px;
+}
+
+.markdown-section code {
+    border-radius: $md-radius;
+    margin: 0 2px;
+    padding: 2px 5px;
+    white-space: pre-wrap;
+}
+
+.markdown-section table code[data-type] {
+    color: color.mix($color-gray-90, $color-gray-40, 10%);
+}
+
+.markdown-section table {
+    margin-bottom: 30px;
+}
+
+.demo-wrapper {
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 30px;
+    border-radius: $lg-radius;
+    background: $color-input;
+    box-shadow: 0 1px 24px rgba($color-shadow, 0.1);
+}
+
+.markdown-section .demo-options {
+    position: relative;
+    padding: 30px 40px 34px;
+    border-bottom: 1px solid $color-gray-10;
+}
+
+.markdown-section .demo-options2:after {
+    content: '\00a0';
+    position: absolute;
+    left: 40px;
+    bottom: 0;
+    width: calc(100% - 80px);
+    height: 1px;
+    background: $color-gray-10;
+}
+
+.markdown-section .demo-options .n-form-item {
+    margin-bottom: 4px;
+}
+
+.markdown-section .demo-options .n-select {
+    //width: 220px;
+}
+
+.markdown-section .demo-display {
+    padding: 40px;
+}
+
+.markdown-section .demo-display h3 {
+    position: relative;
+    font-size: 12px;
+    padding: 10px 14px;
+    color: $color-gray-50;
+    margin-bottom: -5px;
+    text-transform: uppercase;
+    border-radius: $md-radius;
+    background: rgba($color-gray-50, 0.1);
+}
+
+.markdown-section .demo-display > .grid:not(:last-child) {
+    margin-bottom: 20px;
+}

package/docs/src/scss/theme/navigation.scss

@@ -0,0 +1,58 @@
+@use "sass:color";
+@import "../root/vars";
+
+.sidebar-nav {
+    order: 300;
+}
+
+.sidebar-nav p {
+    padding: 4px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: $color-gray-30;
+    text-transform: uppercase;
+}
+
+.sidebar-nav ul ul {
+    padding: 4px 0;
+}
+
+.sidebar-nav > ul > li:not(:last-child) {
+    margin-bottom: 15px;
+}
+
+.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: 15px;
+    color: $color-gray-80;
+    padding: 4px 8px;
+    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.active > a,
+.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.mix($color-foreground, $color-secondary, 30%);
+    background: rgba($color-secondary, 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;
+}

package/docs/src/scss/theme/progress.scss

@@ -0,0 +1,9 @@
+@import "../root/vars";
+
+.progress {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: $color-secondary;
+    height: 4px;
+}