@broxus/react-uikit 0.5.0 → 0.5.2

package/dist/cjs/utils/modal.js

@@ -8,9 +8,24 @@ const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
 function addModalMode(...args) {
     (0, js_utils_1.addClass)(document?.documentElement, (0, classnames_1.default)(args ?? 'uk-modal-page'));
+    try {
+        const scrollWidth = (0, js_utils_1.getScrollWidth)();
+        if (document.documentElement.dir === 'rtl') {
+            document.documentElement.style.paddingLeft = `${scrollWidth}px`;
+        }
+        else {
+            document.documentElement.style.paddingRight = `${scrollWidth}px`;
+        }
+    }
+    catch { }
 }
 exports.addModalMode = addModalMode;
 function removeModalMode(...args) {
     (0, js_utils_1.removeClass)(document?.documentElement, (0, classnames_1.default)(args ?? 'uk-modal-page'));
+    try {
+        document.documentElement.style.paddingLeft = '';
+        document.documentElement.style.paddingRight = '';
+    }
+    catch { }
 }
 exports.removeModalMode = removeModalMode;

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

@@ -1,22 +1,13 @@
-// Name:            List
-// Description:     Styles for lists
+// Name:            Subnav
+// Description:     Component to create a sub navigation
 //
-// Component:       `uk-list`
+// Component:       `uk-subnav`
 //
-// Modifiers:       `uk-list-disc`
-//                  `uk-list-circle`
-//                  `uk-list-square`
-//                  `uk-list-decimal`
-//                  `uk-list-hyphen`
-//                  `uk-list-muted`
-//                  `uk-list-emphasis`
-//                  `uk-list-primary`
-//                  `uk-list-secondary`
-//                  `uk-list-bullet`
-//                  `uk-list-divider`
-//                  `uk-list-striped`
-//                  `uk-list-large`
-//                  `uk-list-collapse`
+// Modifiers:       `uk-subnav-divider`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
 //
 // ========================================================================
 
@@ -28,219 +19,200 @@
 
 
 /* ========================================================================
-   Component: List
+   Component: Subnav
  ========================================================================== */
 
-.uk-list {
-    list-style: none;
-    padding: 0;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-list > * > :last-child {
-    margin-bottom: 0;
-}
-
 /*
- * Style
+ * 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-list > :nth-child(n+2),
-.uk-list > * > ul {
-    margin-top: var(--list-margin-top);
-}
+.uk-subnav {
+    /* 2 */
+    align-items: center;
+    display: flex;
 
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
 
-/* Marker modifiers
- * Moving `::marker` inside `::before` to style it differently
- * To style the `::marker` is currently only supported in Firefox and Safari
- ========================================================================== */
+    /* 3 */
+    margin-left: calc(var(--subnav-margin-horizontal) * -1);
 
-.uk-list-disc > *,
-.uk-list-circle > *,
-.uk-list-square > *,
-.uk-list-decimal > *,
-.uk-list-hyphen > * {
-    padding-left: var(--list-padding-left);
+    /* 4 */
+    padding: 0;
+    @if mixin-exists(hook-subnav) {
+        @include hook-subnav;
+    }
 }
 
 /*
- * Type modifiers
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
  */
 
-.uk-list-decimal {
-    counter-reset: decimal;
-}
+.uk-subnav > * {
+    /* 1 */
+    flex: none;
 
-.uk-list-decimal > * {
-    counter-increment: decimal;
-}
+    /* 2 */
+    padding-left: var(--subnav-margin-horizontal);
 
-[class*='uk-list'] > ::before {
-    content: '';
-    display: list-item;
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    list-style-position: inside;
-    margin-bottom: calc(var(--list-marker-height) * -1);
+    /* 3 */
     position: relative;
-    text-align: right;
-    width: var(--list-padding-left);
-}
-
-.uk-list-disc > ::before {
-    list-style-type: disc;
 }
 
-.uk-list-circle > ::before {
-    list-style-type: circle;
-}
-
-.uk-list-square > ::before {
-    list-style-type: square;
-}
 
-.uk-list-decimal > ::before {
-    content: counter(decimal, decimal) '\200A.\00A0';
-}
-
-.uk-list-hyphen > ::before {
-    content: '–\00A0\00A0';
-}
+/* Items
+ ========================================================================== */
 
 /*
- * Color modifiers
+ * 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-list-muted > ::before {
-    color: var(--list-muted-color) !important;
-}
+.uk-subnav > * > :first-child {
+    align-items: center;
 
-.uk-list-emphasis > ::before {
-    color: var(--list-emphasis-color) !important;
-}
+    /* 3 */
+    color: var(--subnav-item-color);
 
-.uk-list-primary > ::before {
-    color: var(--list-primary-color) !important;
-}
+    /* 2 */
+    column-gap: 0.25em;
 
-.uk-list-secondary > ::before {
-    color: var(--list-secondary-color) !important;
+    /* 1 */
+    display: flex;
+    @if mixin-exists(hook-subnav-item) {
+        @include hook-subnav-item;
+    }
 }
 
-
-/* Image bullet modifier
- ========================================================================== */
-
-.uk-list-bullet > * {
-    padding-left: var(--list-padding-left);
+/* 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;
+    }
 }
 
-.uk-list-bullet > ::before {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    content: '';
-    height: var(--list-marker-height);
-    left: calc(var(--list-padding-left) * -1);
-    margin-bottom: calc(var(--list-marker-height) * -1);
-    position: relative;
-    width: var(--list-padding-left);
-    @if mixin-exists(svg-fill) {
-        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+/* Active */
+.uk-subnav > .uk-active > a {
+    color: var(--subnav-item-active-color);
+    @if mixin-exists(hook-subnav-item-active) {
+        @include hook-subnav-item-active;
     }
 }
 
 
-/* Style modifiers
+/* Divider modifier
  ========================================================================== */
 
 /*
- * Divider
+ * Set gutter
  */
 
-.uk-list-divider > :nth-child(n+2) {
-    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
-    margin-top: var(--list-divider-margin-top);
-    padding-top: var(--list-divider-margin-top);
-    @if mixin-exists(hook-list-divider) {
-        @include hook-list-divider;
-    }
+.uk-subnav-divider {
+    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
 }
 
 /*
- * Striped
+ * Align items and divider vertically
  */
 
-.uk-list-striped > * {
-    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
-    @if mixin-exists(hook-list-striped) {
-        @include hook-list-striped;
-    }
+.uk-subnav-divider > * {
+    align-items: center;
+    display: flex;
 }
 
-.uk-list-striped > :nth-of-type(odd) {
-    background: var(--list-striped-background);
+/*
+ * 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);
 }
 
-.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
+/* 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;
+    }
 }
 
 
-/* Size modifier
+/* Pill modifier
  ========================================================================== */
 
-.uk-list-large > :nth-child(n+2),
-.uk-list-large > * > ul {
-    margin-top: var(--list-large-margin-top);
+.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;
+    }
 }
 
-.uk-list-collapse > :nth-child(n+2),
-.uk-list-collapse > * > ul {
-    margin-top: 0;
+/* 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;
+    }
 }
 
-/*
- * Divider
- */
-
-.uk-list-large.uk-list-divider > :nth-child(n+2) {
-    margin-top: var(--list-large-divider-margin-top);
-    padding-top: var(--list-large-divider-margin-top);
+/* 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;
+    }
 }
 
-.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
-    margin-top: 0;
-    padding-top: 0;
+/* 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;
+    }
 }
 
-/*
- * Striped
- */
-
-.uk-list-large.uk-list-striped > * {
-    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
-}
 
-.uk-list-collapse.uk-list-striped > * {
-    padding-bottom: 0;
-    padding-top: 0;
-}
+/* Disabled
+ * The same for all style modifiers
+ ========================================================================== */
 
-.uk-list-large.uk-list-striped > :nth-child(n+2),
-.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
-    margin-top: 0;
+.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-list-misc) {
-    @include hook-list-misc;
+@if mixin-exists(hook-subnav-misc) {
+    @include hook-subnav-misc;
 }
 
 
@@ -248,31 +220,39 @@
 // ========================================================================
 
 :root {
-    --list-margin-top: var(--global-small-margin);
-    --list-padding-left: #{$list-padding-left};
-    --list-marker-height: calc(var(--global-line-height) * 1em);
-    --list-muted-color: var(--global-muted-color);
-    --list-emphasis-color: var(--global-emphasis-color);
-    --list-primary-color: var(--global-primary-background);
-    --list-secondary-color: var(--global-secondary-background);
-    --list-bullet-icon-color: var(--global-color);
-    --list-divider-margin-top: var(--global-small-margin);
-    --list-divider-border-width: var(--global-border-width);
-    --list-divider-border: var(--global-border);
-    --list-striped-padding-vertical: var(--global-small-margin);
-    --list-striped-padding-horizontal: var(--global-small-margin);
-    --list-striped-background: var(--global-muted-background);
-    --list-large-margin-top: var(--global-margin);
-    --list-large-divider-margin-top: var(--global-margin);
-    --list-large-striped-padding-vertical: var(--global-margin);
-    --list-large-striped-padding-horizontal: var(--global-small-margin);
+    --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-list-muted-color: var(--inverse-global-muted-color);
-    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
-    --inverse-list-primary-color: var(--inverse-global-primary-background);
-    --inverse-list-secondary-color: var(--inverse-global-primary-background);
-    --inverse-list-divider-border: var(--inverse-global-border);
-    --inverse-list-striped-background: var(--inverse-global-muted-background);
-    --inverse-list-bullet-icon-color: var(--inverse-global-color);
+    --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);
 }

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

@@ -0,0 +1 @@
+"use strict";