@broxus/react-uikit 0.5.1 → 0.5.2

package/dist/esm/components/Tab/index.scss

@@ -0,0 +1,216 @@
+// Name:            Tab
+// Description:     Component to create a tabbed navigation
+//
+// Component:       `uk-tab`
+//
+// Modifiers:       `uk-tab-bottom`
+//                  `uk-tab-left`
+//                  `uk-tab-right`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Tab
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-tab {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin-left: calc(var(--tab-margin-horizontal) * -1);
+
+    /* 3 */
+    padding: 0;
+    @if mixin-exists(hook-tab) {
+        @include hook-tab;
+    }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-tab > * {
+    /* 1 */
+    flex: none;
+
+    /* 2 */
+    padding-left: var(--tab-margin-horizontal);
+
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Center content if a width is set
+ * 4. Style
+ */
+
+.uk-tab > * > a {
+    /* 1 */
+    align-items: center;
+
+    /* 4 */
+    color: var(--tab-item-color);
+
+    /* 2 */
+    column-gap: 0.25em;
+
+    /* 4 */
+    display: flex;
+
+    /* 3 */
+    justify-content: center;
+
+    /* 4 */
+    padding: var(--tab-item-padding-vertical) var(--tab-item-padding-horizontal);
+    @if mixin-exists(hook-tab-item) {
+        @include hook-tab-item;
+    }
+}
+
+/* Hover */
+.uk-tab > * > a:hover {
+    color: var(--tab-item-hover-color);
+    text-decoration: var(--tab-item-hover-text-decoration);
+    @if mixin-exists(hook-tab-item-hover) {
+        @include hook-tab-item-hover;
+    }
+}
+
+/* Active */
+.uk-tab > .uk-active > a {
+    color: var(--tab-item-active-color);
+    @if mixin-exists(hook-tab-item-active) {
+        @include hook-tab-item-active;
+    }
+}
+
+/* Disabled */
+.uk-tab > .uk-disabled > a {
+    color: var(--tab-item-disabled-color);
+    @if mixin-exists(hook-tab-item-disabled) {
+        @include hook-tab-item-disabled;
+    }
+}
+
+
+/* Position modifier
+ ========================================================================== */
+
+/*
+ * Bottom
+ */
+
+.uk-tab-bottom {
+    @if mixin-exists(hook-tab-bottom) {
+        @include hook-tab-bottom;
+    }
+}
+
+.uk-tab-bottom > * > a {
+    @if mixin-exists(hook-tab-bottom-item) {
+        @include hook-tab-bottom-item;
+    }
+}
+
+/*
+ * Left + Right
+ * 1. Reset Gutter
+ */
+
+.uk-tab-left,
+.uk-tab-right {
+    flex-direction: column;
+
+    /* 1 */
+    margin-left: 0;
+}
+
+/* 1 */
+.uk-tab-left > *,
+.uk-tab-right > * { padding-left: 0; }
+
+.uk-tab-left {
+    @if mixin-exists(hook-tab-left) {
+        @include hook-tab-left;
+    }
+}
+
+.uk-tab-right {
+    @if mixin-exists(hook-tab-right) {
+        @include hook-tab-right;
+    }
+}
+
+.uk-tab-left > * > a {
+    justify-content: left;
+    @if mixin-exists(hook-tab-left-item) {
+        @include hook-tab-left-item;
+    }
+}
+
+.uk-tab-right > * > a {
+    justify-content: left;
+    @if mixin-exists(hook-tab-right-item) {
+        @include hook-tab-right-item;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-tab-misc) {
+    @include hook-tab-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --tab-margin-horizontal: #{$tab-margin-horizontal};
+    --tab-item-padding-horizontal: #{$tab-item-padding-horizontal};
+    --tab-item-padding-vertical: #{$tab-item-padding-vertical};
+    --tab-item-color: var(--global-muted-color);
+    --tab-item-hover-color: var(--global-color);
+    --tab-item-hover-text-decoration: #{$tab-item-hover-text-decoration};
+    --tab-item-active-color: var(--global-primary-background);
+    --tab-item-disabled-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-tab-item-color: var(--inverse-global-muted-color);
+    --inverse-tab-item-hover-color: var(--inverse-global-color);
+    --inverse-tab-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-tab-item-disabled-color: var(--inverse-global-muted-color);
+}

package/dist/esm/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/esm/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;