@kizmann/nano-ui 0.9.10 → 1.0.0

package/docs/src/scss/index.scss

@@ -1,448 +1,15 @@
-@import "../../../src/root/vars";
-//@import "./docsify/vue";
 @import "./mixins/base";
 @import "./mixins/media";
 @import "./mixins/grid";
 @import "./mixins/space";
-@import "./docsify/syntax";
 
-::selection {
-    background: rgba($color-primary, 0.15);
-}
-
-* {
-    outline: none !important;
-}
-
-div {
-    box-sizing: border-box;
-}
-
-html, body {
-    font-family: 'Roboto', sans-serif;
-    font-size: 15px;
-    font-variant-numeric: normal;
-    font-feature-settings: normal;
-}
-
-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;
-}
-
-.markdown-section .demo-display {
-    padding: 40px;
-}
-
-.markdown-section .demo-display > .grid:not(:last-child) {
-    margin-bottom: 20px;
-}
+@import "./theme/default";
+@import "./theme/layout";
+@import "./theme/loader";
+@import "./theme/header";
+@import "./theme/search";
+@import "./theme/navigation";
+@import "./theme/markdown";
+@import "./theme/syntax";
+@import "./theme/table";
+@import "./theme/progress";

package/docs/src/scss/mixins/grid.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./base";
 @import "./media";
 
@@ -101,24 +102,24 @@ $--grid-gutters: (
 
     .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} {
         width: calc(100% + #{$gutter});
-        margin-left: -#{$gutter / 2};
-        margin-right: -#{$gutter / 2};
-        margin-top: -#{$gutter / 2};
-        margin-bottom: -#{$gutter / 2};
+        margin-left: -#{math.div($gutter, 2)};
+        margin-right: -#{math.div($gutter, 2)};
+        margin-top: -#{math.div($gutter, 2)};
+        margin-bottom: -#{math.div($gutter, 2)};
     }
 
     .grid--#{strip($gutter)}#{$suffix} > [class^="col"],
     .grid--#{strip($gutter)}#{$suffix} > [class*="col"] {
-        padding-left: $gutter / 2;
-        padding-right: $gutter / 2;
+        padding-left: math.div($gutter, 2);
+        padding-right: math.div($gutter, 2);
     }
 
     .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} > [class^="col"],
     .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} > [class*="col"] {
-        padding-left: $gutter / 2;
-        padding-right: $gutter / 2;
-        padding-top: $gutter / 2;
-        padding-bottom: $gutter / 2;
+        padding-left: math.div($gutter, 2);
+        padding-right: math.div($gutter, 2);
+        padding-top: math.div($gutter, 2);
+        padding-bottom: math.div($gutter, 2);
     }
 
 }
@@ -190,7 +191,7 @@ $--grid-gutters: (
 
     @for $i from 1 through $size {
         .col--#{$i}-#{$size}#{$suffix} {
-            width: #{((100% / $size) * $i) - 0.001};
+            width: #{(math.div(100%, $size) * $i) - 0.001};
         }
     }
 

package/docs/src/scss/mixins/media.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import "./base";
 
 $--media-steps: (
@@ -25,7 +26,7 @@ $--media-steps: (
     }
 
     @if $suffix != '' {
-        @media #{map-get($--media-steps, $suffix)} {
+        @media #{map.get($--media-steps, $suffix)} {
             $suffix: \@ + $suffix !global;
             @content;
         }

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

@@ -0,0 +1,15 @@
+@use "sass:color";
+
+$color-white:           #ffffff;
+$color-black:           #111111;
+
+$color-foreground-abs:       #ffffff;
+$color-background-abs:       #000000;
+
+$color-foreground:      $color-white;
+$color-background:      $color-black;
+
+$color-form:            color.mix($color-white, $color-black, 5%);
+$color-input:           color.mix($color-white, $color-black, 5%);
+
+@import "./vars";

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

@@ -0,0 +1,15 @@
+@use "sass:color";
+
+$color-white:           #ffffff;
+$color-black:           #111111;
+
+$color-foreground-abs:       #000000;
+$color-background-abs:       #ffffff;
+
+$color-foreground:      $color-black;
+$color-background:      $color-white;
+
+$color-form:            color.mix($color-black, $color-white, 5%);
+$color-input:           $color-white;
+
+@import "./vars";

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

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