@kizmann/nano-ui 1.0.0 → 1.0.1

package/docs/src/scss/root/vars.scss

@@ -1,110 +0,0 @@
-@use "sass:color";
-
-$color-white:           #ffffff !default;
-$color-black:           #111111 !default;
-
-$color-foreground-abs:       #ffffff !default;
-$color-background-abs:       #000000 !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:              #000000 !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;

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

@@ -1,123 +0,0 @@
-@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

@@ -1,147 +0,0 @@
-@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

@@ -1,186 +0,0 @@
-@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

@@ -1,63 +0,0 @@
-@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

@@ -1,79 +0,0 @@
-@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;
-}