Merge 6e8bc11 into 1fe2c68

inkline · Jul 20, 2020 · 79316c3 · 79316c3
2 parents 1fe2c68 + 6e8bc11
commit 79316c3
Show file tree

Hide file tree

Showing 192 changed files with 3,179 additions and 1,149 deletions.
diff --git a/packages/docs/components/Navbar.vue b/packages/docs/components/Navbar.vue
@@ -99,7 +99,7 @@ export default {
             }
         }
 
-        > .items > .nav {
+        > .navbar-items > .nav {
             margin-right: -9px;
 
             @include breakpoint-down('sm') {
@@ -179,7 +179,7 @@ export default {
         }
 
         > .container > .row > .column {
-            > .items > .nav > .item {
+            > .navbar-items > .nav > .item {
                 color: rgba(255, 255, 255, 0.85);
 
                 &:hover {

diff --git a/packages/docs/components/Sidebar.vue b/packages/docs/components/Sidebar.vue
@@ -111,6 +111,10 @@ $site-navigation-border-left-color-active: $color-primary !default;
             margin: 0;
             position: relative;
 
+            ::v-deep .collapsible > .item > .body {
+                background-color: transparent;
+            }
+
             ::v-deep .collapsible > .item > a,
             > a {
                 display: block;
@@ -119,7 +123,7 @@ $site-navigation-border-left-color-active: $color-primary !default;
                 padding-left: $spacer;
                 color: $body-color;
                 background-color: transparent !important;
-                border-left: 1px solid $site-navigation-border-left-color;
+                border-left: 1px solid $site-navigation-border-left-color !important;
                 transition: color $transition-duration $transition-easing, border-color $transition-duration $transition-easing;
 
                 &::before {
@@ -190,10 +194,12 @@ $site-navigation-border-left-color-active: $color-primary !default;
                     }
                 }
 
-                .body > .content {
-                    ul li a {
-                        border-left-color: $site-navigation-border-left-color-active;
-                        transition: color $transition-duration $transition-easing;
+                .body {
+                    > .content {
+                        ul li a {
+                            border-left-color: $site-navigation-border-left-color-active;
+                            transition: color $transition-duration $transition-easing;
+                        }
                     }
                 }
             }
@@ -234,7 +240,7 @@ $site-navigation-border-left-color-active: $color-primary !default;
                 ::v-deep .collapsible > .item > a,
                 > a {
                     color: colors('gray-40');
-                    border-left: 1px solid colors('gray-70');
+                    border-left: 1px solid colors('gray-70') !important;
 
                     &::before {
                         background: $link-color;

diff --git a/packages/docs/components/SiteSearch.vue b/packages/docs/components/SiteSearch.vue
@@ -249,7 +249,7 @@ export default {
             display: block;
             text-align: right;
             padding: ($spacer / 2) $spacer;
-            border-top: 1px solid colors('gray-30');
+            border-top: 1px solid $border-color-light;
             font-size: font-size('sm');
             color: colors('gray-60');
         }
@@ -307,4 +307,12 @@ export default {
         }
     }
 }
+
+.inkline.-dark .site-search {
+    .menu {
+        > .footer {
+            border-top: 1px solid $border-color-dark;
+        }
+    }
+}
 </style>
diff --git a/packages/docs/components/docs/ApiTableRow.vue b/packages/docs/components/docs/ApiTableRow.vue
@@ -5,6 +5,14 @@
                 <span class="label">Property</span>
                 <slot name="property" />
             </div>
+            <div v-if="$slots.function" class="td -property">
+                <span class="label">Function</span>
+                <slot name="function" />
+            </div>
+            <div v-if="$slots.mixin" class="td -property">
+                <span class="label">Mixin</span>
+                <slot name="mixin" />
+            </div>
             <div v-if="$slots.event" class="td -event">
                 <span class="label">Event</span>
                 <slot name="event" />

diff --git a/packages/docs/components/layout/View.vue b/packages/docs/components/layout/View.vue
@@ -32,7 +32,7 @@ export default {
             .fetch();
 
         return {
-            page
+            page: Array.isArray(page) ? page.find((p) => p.slug === 'index') : page
         };
     },
     mounted() {

diff --git a/packages/docs/pages/docs/components/alert.md b/packages/docs/pages/docs/components/alert.md
@@ -359,40 +359,61 @@ Here you can find a list of the Sass variables you can use for the alert compone
                 <template slot="default"><code>1rem</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$alert-background-mix-percentage</template>
-                <template slot="default"><code>60%</code></template>
+                <template slot="property">$alert-color-for-light-variant</template>
+                <template slot="default"><code>$color-for-light-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$alert-border-darken-lighten-percentage</template>
-                <template slot="default"><code>10%</code></template>
+                <template slot="property">$alert-color-for-dark-variant</template>
+                <template slot="default"><code>$color-for-dark-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$alert-code-color-darken-lighten-percentage</template>
-                <template slot="default"><code>10%</code></template>
-            </api-table-row>
-            <api-table-row>
-                <template slot="property">$alert-code-background-color-darken-lighten-percentage</template>
-                <template slot="default"><code>7%</code></template>
-            </api-table-row>
-            <api-table-row>
-                <template slot="property">$alert-color-darken-lighten-percentage</template>
-                <template slot="default"><code>30%</code></template>
-            </api-table-row>
-            <api-table-row>
-                <template slot="property">$alert-link-color-darken-lighten-percentage</template>
-                <template slot="default"><code>35%</code></template>
+                <template slot="property">$alert-variant-{variant}</template>
+                <template slot="default"><code>alert-variant($color-{variant})</code></template>
             </api-table-row>
             <api-table-row>
                 <template slot="property">$alert-variants</template>
-                <template slot="default"><code>('brand', 'state')</code></template>
-            </api-table-row>
-            <api-table-row>
-                <template slot="property">$alert-variant-color-light</template>
-                <template slot="default"><code>$variant-color-light</code></template>
+<template slot="default-row">
+                
+~~~scss
+(
+    primary: $alert-variant-primary,
+    secondary: $alert-variant-secondary,
+    info: $alert-variant-info,
+    success: $alert-variant-success,
+    warning: $alert-variant-warning,
+    danger: $alert-variant-danger
+)
+~~~
+                
+</template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$alert-variant-color-dark</template>
-                <template slot="default"><code>$variant-color-dark</code></template>
+                <template slot="function">alert-variant</template>
+<template slot="default-row">
+                
+~~~scss
+@function alert-variant($variant) {
+    $alert-variant-background: $variant;
+    $alert-variant-border-color: darken($alert-variant-background, 10%);
+    $alert-variant-color: variant-color-by-luminance($variant, $alert-color-for-light-variant, $alert-color-for-dark-variant);
+    $alert-variant-link-color: $alert-variant-color;
+    $alert-variant-code-background: darken($variant, 10%);
+    $alert-variant-code-color: $alert-variant-color;
+
+    $variant-map: (
+        background: $alert-variant-background,
+        border-color: $alert-variant-border-color,
+        color: $alert-variant-color,
+        link-color: $alert-variant-link-color,
+        code-color: $alert-variant-code-color,
+        code-background: $alert-variant-code-background
+    );
+
+    @return $variant-map;
+}
+~~~
+                
+</template>
             </api-table-row>
         </api-table>
     </i-tab>

diff --git a/packages/docs/pages/docs/components/badge.md b/packages/docs/pages/docs/components/badge.md
@@ -169,6 +169,16 @@ Here you can find a list of the customization options you can use for the badge
 ### Sass Variables
 Here you can find a list of the Sass variables you can use for the badge component. If you're looking to find common variables that these rely on, you should take a look at the <nuxt-link :to="{ name: 'docs-core-sass-variables' }">Sass Variables</nuxt-link> page.
 
+The `{variant}` placeholder below can be one of the following: 
+- `primary`
+- `secondary`
+- `light`
+- `dark`
+- `info`
+- `success`
+- `warning`
+- `danger`
+
 <i-code title="Badge" expanded>
     <i-tab type="scss">
         <api-table>
@@ -205,16 +215,59 @@ Here you can find a list of the Sass variables you can use for the badge compone
                 <template slot="default"><code>10rem</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$badge-variants</template>
-                <template slot="default"><code>('brand', 'monochrome', 'state')</code></template>
+                <template slot="property">$badge-background-color-hover-darken</template>
+                <template slot="default"><code>10%</code></template>
+            </api-table-row>
+            <api-table-row>
+                <template slot="property">$badge-color-for-light-variant</template>
+                <template slot="default"><code>$color-for-light-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$badge-variant-color-light</template>
-                <template slot="default"><code>$variant-color-light</code></template>
+                <template slot="property">$badge-color-for-dark-variant</template>
+                <template slot="default"><code>$color-for-dark-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$badge-variant-color-dark</template>
-                <template slot="default"><code>$variant-color-dark</code></template>
+                <template slot="property">$badge-variant-{variant}</template>
+                <template slot="default"><code>badge-variant($color-{variant})</code></template>
+            </api-table-row>
+            <api-table-row>
+                <template slot="property">$badge-variants</template>
+<template slot="default-row">
+                
+~~~scss
+(
+    primary: $badge-variant-primary,
+    secondary: $badge-variant-secondary,
+    light: $badge-variant-light,
+    dark: $badge-variant-dark,
+    info: $badge-variant-info,
+    success: $badge-variant-success,
+    warning: $badge-variant-warning,
+    danger: $badge-variant-danger
+)
+~~~
+                
+</template>
+            </api-table-row>
+            <api-table-row>
+                <template slot="function">badge-variant</template>
+<template slot="default-row">
+                
+~~~scss
+@function badge-variant($variant) {
+    $badge-variant-background: $variant;
+    $badge-variant-color: variant-color-by-luminance($variant, $badge-color-for-light-variant, $badge-color-for-dark-variant);
+
+    $variant-map: (
+        background: $badge-variant-background,
+        color: $badge-variant-color
+    );
+
+    @return $variant-map;
+}
+~~~
+                
+</template>
             </api-table-row>
         </api-table>
     </i-tab>

diff --git a/packages/docs/pages/docs/components/breadcrumb.md b/packages/docs/pages/docs/components/breadcrumb.md
@@ -179,6 +179,13 @@ Here you can find a list of the various customization options you can use for th
                 <template slot="values"></template>
                 <template slot="default"></template>
             </api-table-row>
+            <api-table-row>
+                <template slot="property">variant</template>
+                <template slot="description">Sets the color variant of the breadcrumb component.</template>
+                <template slot="type"><code>String</code></template>
+                <template slot="values"><code>light</code>, <code>dark</code></template>
+                <template slot="default"><code>primary</code></template>
+            </api-table-row>
         </api-table>
     </i-tab>
     <i-tab type="slots">
@@ -216,55 +223,65 @@ Here you can find a list of the Sass variables you can use for the breadcrumb co
                 <template slot="default"><code>size-map($breadcrumb-padding-base, $sizes, $size-multipliers)</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-margin-bottom</template>
+                <template slot="property">$breadcrumb-item-padding-base</template>
                 <template slot="default"><code>$spacer</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-divider</template>
-                <template slot="default"><code>'/'</code></template>
+                <template slot="property">$breadcrumb-item-padding</template>
+                <template slot="default"><code>size-map($breadcrumb-item-padding-base, $sizes, $size-multipliers)</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-plain-color-light</template>
-                <template slot="default"><code>$color-gray-60</code></template>
+                <template slot="property">$breadcrumb-margin-bottom</template>
+                <template slot="default"><code>$spacer</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-active-color-light</template>
-                <template slot="default"><code>$color-gray-80</code></template>
+                <template slot="property">$breadcrumb-divider</template>
+                <template slot="default"><code>'/'</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-plain-color-dark</template>
-                <template slot="default"><code>$color-gray-60</code></template>
+                <template slot="property">$breadcrumb-color-for-light-variant</template>
+                <template slot="default"><code>$color-for-light-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-active-color-dark</template>
-                <template slot="default"><code>$color-gray-40</code></template>
+                <template slot="property">$breadcrumb-color-for-dark-variant</template>
+                <template slot="default"><code>$color-for-dark-variant</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-variants</template>
-                <template slot="default"><code>('brand', 'monochrome')</code></template>
+                <template slot="property">$breadcrumb-variant-{variant}</template>
+                <template slot="default"><code>breadcrumb-variant($color-{variant})</code></template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-variant-color-light</template>
-                <template slot="default"><code>$variant-color-light</code></template>
+                <template slot="property">$breadcrumb-variants</template>
+<template slot="default-row">
+                
+~~~scss
+(
+    light: $breadcrumb-variant-light,
+    dark: $breadcrumb-variant-dark
+)
+~~~
+                
+</template>
             </api-table-row>
             <api-table-row>
-                <template slot="property">$breadcrumb-variant-color-dark</template>
-                <template slot="default"><code>$variant-color-dark</code></template>
-            </api-table-row>
-        </api-table>
-    </i-tab>
-</i-code> 
+                <template slot="function">breadcrumb-variant</template>
+<template slot="default-row">
+                
+~~~scss
+@function breadcrumb-variant($variant) {
+    $breadcrumb-variant-color: variant-color-by-luminance($variant, $breadcrumb-color-for-light-variant, $breadcrumb-color-for-dark-variant);
+    $breadcrumb-variant-color-active: variant-color-by-luminance($variant, darken($breadcrumb-variant-color, 15%), lighten($breadcrumb-variant-color, 15%));
 
-<i-code title="Breadcrumb Item" expanded>
-    <i-tab type="scss">
-        <api-table>
-            <api-table-row>
-                <template slot="property">$breadcrumb-item-padding-base</template>
-                <template slot="default"><code>$spacer</code></template>
-            </api-table-row>
-            <api-table-row>
-                <template slot="property">$breadcrumb-item-padding</template>
-                <template slot="default"><code>size-map($breadcrumb-item-padding-base, $sizes, $size-multipliers)</code></template>
+    $variant-map: (
+        color: $breadcrumb-variant-color,
+        color-active: $breadcrumb-variant-color-active,
+    ) !default;
+
+    @return $variant-map;
+}
+~~~
+                
+</template>
             </api-table-row>
         </api-table>
     </i-tab>