@broxus/react-uikit 0.5.0 → 0.5.2

package/dist/cjs/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/Tile';
 export * from './components/Card';
 export * from './components/Nav';
 export * from './components/Navbar';
+export * from './components/Subnav';
 export * from './components/Breadcrumb';
 export * from './components/Tabs';
 export * from './components/Dotnav';

package/dist/cjs/index.js

@@ -38,6 +38,7 @@ __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Nav"), exports);
 __exportStar(require("./components/Navbar"), exports);
+__exportStar(require("./components/Subnav"), exports);
 __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/Dotnav"), exports);

package/dist/cjs/styles/_import.components.scss

@@ -43,7 +43,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/cjs/styles/_import.scss

@@ -59,7 +59,7 @@
 // Navs
 @import 'nav.scss';
 @import 'navbar.scss'; // After: Card, Grid, Nav, Icon, Search
-// @import 'subnav.scss';
+@import 'subnav.scss';
 @import 'breadcrumb.scss';
 
 // @import 'pagination.scss';

package/dist/cjs/styles/mixins.scss

@@ -2073,6 +2073,60 @@
 
 @mixin hook-switcher-misc() {}
 
+@mixin hook-tab() {}
+@mixin hook-tab-item() {}
+@mixin hook-tab-item-hover() {}
+@mixin hook-tab-item-active() {}
+@mixin hook-tab-item-disabled() {}
+@mixin hook-tab-bottom() {}
+@mixin hook-tab-bottom-item() {}
+@mixin hook-tab-left() {}
+@mixin hook-tab-left-item() {}
+@mixin hook-tab-right() {}
+@mixin hook-tab-right-item() {}
+@mixin hook-tab-misc() {}
+@mixin hook-inverse-tab() {}
+@mixin hook-inverse-tab-item() {}
+@mixin hook-inverse-tab-item-hover() {}
+@mixin hook-inverse-tab-item-active() {}
+@mixin hook-inverse-tab-item-disabled() {}
+@mixin hook-inverse-component-tab() {
+    .uk-tab {
+        @if mixin-exists(hook-inverse-tab) {
+            @include hook-inverse-tab;
+        }
+    }
+
+    .uk-tab > * > a {
+        color: var(--inverse-tab-item-color);
+        @if mixin-exists(hook-inverse-tab-item) {
+            @include hook-inverse-tab-item;
+        }
+    }
+
+    .uk-tab > * > a:hover {
+        color: var(--inverse-tab-item-hover-color);
+        @if mixin-exists(hook-inverse-tab-item-hover) {
+            @include hook-inverse-tab-item-hover;
+        }
+    }
+
+    .uk-tab > .uk-active > a {
+        color: var(--inverse-tab-item-active-color);
+        @if mixin-exists(hook-inverse-tab-item-active) {
+            @include hook-inverse-tab-item-active;
+        }
+    }
+
+    .uk-tab > .uk-disabled > a {
+        color: var(--inverse-tab-item-disabled-color);
+        @if mixin-exists(hook-inverse-tab-item-disabled) {
+            @include hook-inverse-tab-item-disabled;
+        }
+    }
+
+}
+
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
 @mixin hook-tabs-tab-hover() {}
@@ -2353,6 +2407,7 @@
     @include hook-inverse-component-breadcrumb;
 
     @include hook-inverse-component-pagination;
+    @include hook-inverse-component-tab;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;
 

package/dist/cjs/styles/subnav.scss

@@ -1,258 +1 @@
-// Name:            Subnav
-// Description:     Component to create a sub navigation
-//
-// Component:       `uk-subnav`
-//
-// Modifiers:       `uk-subnav-divider`
-//                  `uk-subnav-pill`
-//
-// States:          `uk-active`
-//                  `uk-first-column`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Subnav
- ========================================================================== */
-
-/*
- * 1. Allow items to wrap into the next line
- * 2. Center items vertically if they have a different height
- * 3. Gutter
- * 4. Reset list
- */
-
-.uk-subnav {
-    /* 2 */
-    align-items: center;
-    display: flex;
-
-    /* 1 */
-    flex-wrap: wrap;
-    list-style: none;
-
-    /* 3 */
-    margin-left: calc(var(--subnav-margin-horizontal) * -1);
-
-    /* 4 */
-    padding: 0;
-    @if mixin-exists(hook-subnav) {
-        @include hook-subnav;
-    }
-}
-
-/*
- * 1. Space is allocated solely based on content dimensions: 0 0 auto
- * 2. Gutter
- * 3. Create position context for dropdowns
- */
-
-.uk-subnav > * {
-    /* 1 */
-    flex: none;
-
-    /* 2 */
-    padding-left: var(--subnav-margin-horizontal);
-
-    /* 3 */
-    position: relative;
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * Items must target `a` elements to exclude other elements (e.g. dropdowns)
- * Using `:first-child` instead of `a` to support `span` elements for text
- * 1. Center content vertically, e.g. an icon
- * 2. Imitate white space gap when using flexbox
- * 3. Style
- */
-
-.uk-subnav > * > :first-child {
-    align-items: center;
-
-    /* 3 */
-    color: var(--subnav-item-color);
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-    @if mixin-exists(hook-subnav-item) {
-        @include hook-subnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
-    color: var(--subnav-item-hover-color);
-    outline: none;
-    text-decoration: var(--subnav-item-hover-text-decoration);
-    @if mixin-exists(hook-subnav-item-hover) {
-        @include hook-subnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-subnav > .uk-active > a {
-    color: var(--subnav-item-active-color);
-    @if mixin-exists(hook-subnav-item-active) {
-        @include hook-subnav-item-active;
-    }
-}
-
-
-/* Divider modifier
- ========================================================================== */
-
-/*
- * Set gutter
- */
-
-.uk-subnav-divider {
-    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
-}
-
-/*
- * Align items and divider vertically
- */
-
-.uk-subnav-divider > * {
-    align-items: center;
-    display: flex;
-}
-
-/*
- * Divider
- * 1. `nth-child` makes it also work without JS if it's only one row
- */
-
-.uk-subnav-divider > ::before {
-    border-left: var(--subnav-divider-border-width) solid transparent;
-    content: '';
-    height: var(--subnav-divider-border-height);
-    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
-    margin-right: var(--subnav-divider-margin-horizontal);
-}
-
-/* 1 */
-.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
-    border-left-color: var(--subnav-divider-border);
-    @if mixin-exists(hook-subnav-divider) {
-        @include hook-subnav-divider;
-    }
-}
-
-
-/* Pill modifier
- ========================================================================== */
-
-.uk-subnav-pill > * > :first-child {
-    background: var(--subnav-pill-item-background);
-    color: var(--subnav-pill-item-color);
-    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
-    @if mixin-exists(hook-subnav-pill-item) {
-        @include hook-subnav-pill-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
-    background-color: var(--subnav-pill-item-hover-background);
-    color: var(--subnav-pill-item-hover-color);
-    @if mixin-exists(hook-subnav-pill-item-hover) {
-        @include hook-subnav-pill-item-hover;
-    }
-}
-
-/* OnClick */
-.uk-subnav-pill > * > a:active {
-    background-color: var(--subnav-pill-item-onclick-background);
-    color: var(--subnav-pill-item-onclick-color);
-    @if mixin-exists(hook-subnav-pill-item-onclick) {
-        @include hook-subnav-pill-item-onclick;
-    }
-}
-
-/* Active */
-.uk-subnav-pill > .uk-active > a {
-    background-color: var(--subnav-pill-item-active-background);
-    color: var(--subnav-pill-item-active-color);
-    @if mixin-exists(hook-subnav-pill-item-active) {
-        @include hook-subnav-pill-item-active;
-    }
-}
-
-
-/* Disabled
- * The same for all style modifiers
- ========================================================================== */
-
-.uk-subnav > .uk-disabled > a {
-    color: var(--subnav-item-disabled-color);
-    @if mixin-exists(hook-subnav-item-disabled) {
-        @include hook-subnav-item-disabled;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-subnav-misc) {
-    @include hook-subnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-item-color: var(--global-muted-color);
-    --subnav-item-hover-color: var(--global-color);
-    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
-    --subnav-item-active-color: var(--global-emphasis-color);
-    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
-    --subnav-divider-border-height: #{$subnav-divider-border-height};
-    --subnav-divider-border-width: var(--global-border-width);
-    --subnav-divider-border: var(--global-border);
-    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
-    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
-    --subnav-pill-item-background: #{$subnav-pill-item-background};
-    --subnav-pill-item-color: #{$subnav-item-color};
-    --subnav-pill-item-hover-background: var(--global-muted-background);
-    --subnav-pill-item-hover-color: var(--global-color);
-    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
-    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
-    --subnav-pill-item-active-background: var(--global-primary-background);
-    --subnav-pill-item-active-color: var(--global-inverse-color);
-    --subnav-item-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-subnav-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
-    --inverse-subnav-divider-border: var(--inverse-global-border);
-    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
-    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
-    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
-    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
-    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
-    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
-    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
-    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
-    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
-}
+@import '../components/Subnav/index.scss';

package/dist/cjs/styles/variables.scss

@@ -1586,7 +1586,7 @@ $inverse-subnav-pill-item-active-color:                         $inverse-global-
 $inverse-subnav-item-disabled-color:                            $inverse-global-muted-color !default;
 
 
-// Tab
+// Switch
 // ========================================================================
 
 $switch-background:                                             darken($global-muted-background, 20%) !default;
@@ -1605,6 +1605,25 @@ $switch-handle-offset:                                          2px !default;
 // Tab
 // ========================================================================
 
+$tab-margin-horizontal:                                         20px !default;
+$tab-item-padding-horizontal:                                   10px !default;
+$tab-item-padding-vertical:                                     5px !default;
+$tab-item-color:                                                $global-muted-color !default;
+$tab-item-hover-color:                                          $global-color !default;
+$tab-item-hover-text-decoration:                                none !default;
+$tab-item-active-color:                                         $global-primary-background !default;
+$tab-item-disabled-color:                                       $global-muted-color !default;
+
+// Inverse
+$inverse-tab-item-color:                                        $inverse-global-muted-color !default;
+$inverse-tab-item-hover-color:                                  $inverse-global-color !default;
+$inverse-tab-item-active-color:                                 $inverse-global-emphasis-color !default;
+$inverse-tab-item-disabled-color:                               $inverse-global-muted-color !default;
+
+
+// Tabs
+// ========================================================================
+
 $tabs-margin-horizontal:                                        20px !default;
 $tabs-margin-vertical:                                          10px !default;
 $tabs-tab-padding-horizontal:                                   15px !default;