@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,596 @@
+// Name:            Nav
+// Description:     Defines styles for list navigations
+//
+// Component:       `uk-nav`
+//
+// Sub-objects:     `uk-nav-header`
+//                  `uk-nav-divider`
+//                  `uk-nav-sub`
+//
+// Modifiers:       `uk-nav-parent-icon`
+//                  `uk-nav-default`
+//                  `uk-nav-primary`
+//                  `uk-nav-center`,
+//                  `uk-nav-divider`
+//
+// States:          `uk-active`
+//                  `uk-parent`
+//                  `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Nav
+ ========================================================================== */
+
+/*
+ * Reset
+ */
+
+.uk-nav,
+.uk-nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Reset link
+ * 4. Space is allocated solely based on content dimensions: 0 0 auto
+ */
+
+.uk-nav li > a,
+.uk-nav-item > a {
+    align-items: center;
+
+    /* 2 */
+    column-gap: 0.25em;
+
+    /* 1 */
+    display: flex;
+
+    /* 3 */
+    text-decoration: none;
+}
+
+/* 4 */
+.uk-nav li > a > *,
+.uk-nav-item > a > * {
+    flex: none;
+}
+
+/*
+ * Remove default focus style
+ */
+
+.uk-nav li > a:focus,
+.uk-nav-item > a:focus {
+    outline: none;
+}
+
+/*
+ * Items
+ * Must target `a` elements to exclude other elements (e.g. lists)
+ */
+
+.uk-nav > li > a,
+.uk-nav-item > a {
+    padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
+}
+
+.uk-nav-item {
+    position: relative;
+    white-space: nowrap;
+
+    /* Disabled */
+    &-disabled {
+        cursor: not-allowed;
+        opacity: 0.85;
+        pointer-events: none;
+    }
+}
+
+
+/* Modes, elements etc.
+ ========================================================================== */
+
+.uk-nav {
+    // Overflow ellipsis
+    &-overflow {
+        display: flex;
+
+        &-item {
+            flex: none;
+        }
+    }
+
+    &-hidden,
+    &-submenu-hidden {
+        display: none;
+    }
+
+    &-vertical.uk-nav-sub,
+    &-vertical-left.uk-nav-sub,
+    &-vertical-right.uk-nav-sub {
+        border-right: 0;
+        max-height: calc(100vh - 100px);
+        min-width: 160px;
+        overflow: hidden;
+        padding: 0;
+
+        &:not([class*='-active']) {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        .uk-nav-item {
+            border-right: 0;
+            left: 0;
+            margin-left: 0;
+
+            &::after {
+                border-right: 0;
+            }
+        }
+
+        > .uk-nav-item,
+        > .uk-nav-submenu {
+            transform-origin: 0 0;
+        }
+    }
+}
+
+
+/* Submenu
+ ========================================================================== */
+
+.uk-nav-submenu {
+    &-title {
+        align-items: center;
+        column-gap: 0.25em; /* 2 */
+        cursor: pointer;
+        display: flex; /* 1 */
+        padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
+        position: relative;
+        text-decoration: none; /* 3 */
+        white-space: nowrap;
+
+        /* 4 */
+        > * {
+            flex: none;
+        }
+
+        /* 4 */
+
+        /* Remove default focus style */
+        .uk-nav-submenu-title:focus {
+            outline: none;
+        }
+    }
+
+    &-arrow {
+        color: var(--nav-default-item-color);
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: transform var(--transition-duration) var(--ease-in-out);
+        width: 10px;
+
+        &::before,
+        &::after {
+            background-color: currentColor;
+            border-radius: 2px;
+            content: '';
+            height: 1.5px;
+            position: absolute;
+            transition: background var(--transition-duration) var(--ease-in-out),
+                transform var(--transition-duration) var(--ease-in-out),
+                top var(--transition-duration) var(--ease-in-out),
+                color var(--transition-duration) var(--ease-in-out);
+            width: 6px;
+        }
+    }
+
+    &-vertical &-arrow {
+        // →
+        &::before {
+            transform: rotate(45deg) translateY(-2.5px);
+        }
+
+        &::after {
+            transform: rotate(-45deg) translateY(2.5px);
+        }
+    }
+
+    &-inline &-arrow {
+        // ↓
+        &::before {
+            transform: rotate(-45deg) translateX(2.5px);
+        }
+
+        &::after {
+            transform: rotate(45deg) translateX(-2.5px);
+        }
+    }
+
+    &-open.uk-nav-inline > &-title > &-arrow {
+        // ↑
+        transform: translateY(-2px);
+
+        &::after {
+            transform: rotate(-45deg) translateX(-2.5px);
+        }
+
+        &::before {
+            transform: rotate(45deg) translateX(2.5px);
+        }
+    }
+
+    &-horizontal &-arrow {
+        display: none;
+    }
+
+    &-popup {
+        position: absolute;
+        transform-origin: 0 0;
+
+        &::before {
+            bottom: 0;
+            content: ' ';
+            height: 100%;
+            left: 0;
+            opacity: 0.0001;
+            position: absolute;
+            right: 0;
+            top: -7px;
+            width: 100%;
+            z-index: -1;
+        }
+    }
+
+    &-placement-rightTop::before {
+        left: -7px;
+        top: 0;
+    }
+}
+
+
+/* Sublists
+ ========================================================================== */
+
+/*
+ * Level 2
+ * `ul` needed for higher specificity to override padding
+ */
+
+ul.uk-nav-sub {
+    padding: 0 0 0 var(--nav-sublist-padding-left);
+    @if mixin-exists(hook-nav-sub) {
+        @include hook-nav-sub;
+    }
+}
+
+/*
+ * Level 3 and deeper
+ */
+
+.uk-nav-sub ul {
+    padding-left: var(--nav-sublist-deeper-padding-left);
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-sub a {
+    padding: var(--nav-sublist-item-padding-vertical) 0;
+}
+
+
+/* Header + Item group title
+ ========================================================================== */
+
+.uk-nav-header,
+.uk-nav-group-header {
+    font-size: var(--nav-header-font-size);
+    padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
+    text-transform: var(--nav-header-text-transform);
+    @if mixin-exists(hook-nav-header) {
+        @include hook-nav-header;
+    }
+}
+
+.uk-nav-header:not(:first-child),
+.uk-nav-group-header:not(:first-child) {
+    margin-top: var(--nav-header-margin-top);
+}
+
+
+/* Divider
+ ========================================================================== */
+
+.uk-nav-divider {
+    margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
+    @if mixin-exists(hook-nav-divider) {
+        @include hook-nav-divider;
+    }
+}
+
+
+/* Default modifier
+ ========================================================================== */
+
+.uk-nav-default {
+    @if mixin-exists(hook-nav-default) {
+        @include hook-nav-default;
+    }
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-default > li > a {
+    color: var(--nav-default-item-color);
+    @if mixin-exists(hook-nav-default-item) {
+        @include hook-nav-default-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-nav-default > li > a:hover,
+.uk-nav-default > li > a:focus {
+    color: var(--nav-default-item-hover-color);
+    @if mixin-exists(hook-nav-default-item-hover) {
+        @include hook-nav-default-item-hover;
+    }
+}
+
+/* Active */
+.uk-nav-default > li.uk-active > a {
+    color: var(--nav-default-item-active-color);
+    @if mixin-exists(hook-nav-default-item-active) {
+        @include hook-nav-default-item-active;
+    }
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-default .uk-nav-header {
+    color: var(--nav-default-header-color);
+    @if mixin-exists(hook-nav-default-header) {
+        @include hook-nav-default-header;
+    }
+}
+
+/*
+ * Divider
+ */
+
+.uk-nav-default .uk-nav-divider {
+    border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
+    @if mixin-exists(hook-nav-default-divider) {
+        @include hook-nav-default-divider;
+    }
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-default .uk-nav-sub a {
+    color: var(--nav-default-sublist-item-color);
+}
+
+.uk-nav-default .uk-nav-sub a:hover,
+.uk-nav-default .uk-nav-sub a:focus {
+    color: var(--nav-default-sublist-item-hover-color);
+}
+
+.uk-nav-default .uk-nav-sub li.uk-active > a {
+    color: var(--nav-default-sublist-item-active-color);
+}
+
+
+/* Primary modifier
+ ========================================================================== */
+
+.uk-nav-primary {
+    @if mixin-exists(hook-nav-primary) {
+        @include hook-nav-primary;
+    }
+}
+
+/*
+ * Items
+ */
+
+.uk-nav-primary > li > a {
+    color: var(--nav-primary-item-color);
+    font-size: var(--nav-primary-item-font-size);
+    line-height: var(--nav-primary-item-line-height);
+    @if mixin-exists(hook-nav-primary-item) {
+        @include hook-nav-primary-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-nav-primary > li > a:hover,
+.uk-nav-primary > li > a:focus {
+    color: var(--nav-primary-item-hover-color);
+    @if mixin-exists(hook-nav-primary-item-hover) {
+        @include hook-nav-primary-item-hover;
+    }
+}
+
+/* Active */
+.uk-nav-primary > li.uk-active > a {
+    color: var(--nav-primary-item-active-color);
+    @if mixin-exists(hook-nav-primary-item-active) {
+        @include hook-nav-primary-item-active;
+    }
+}
+
+/*
+ * Header
+ */
+
+.uk-nav-primary .uk-nav-header {
+    color: var(--nav-primary-header-color);
+    @if mixin-exists(hook-nav-primary-header) {
+        @include hook-nav-primary-header;
+    }
+}
+
+/*
+ * Divider
+ */
+
+.uk-nav-primary .uk-nav-divider {
+    border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
+    @if mixin-exists(hook-nav-primary-divider) {
+        @include hook-nav-primary-divider;
+    }
+}
+
+/*
+ * Sublists
+ */
+
+.uk-nav-primary .uk-nav-sub a {
+    color: var(--nav-primary-sublist-item-color);
+}
+
+.uk-nav-primary .uk-nav-sub a:hover,
+.uk-nav-primary .uk-nav-sub a:focus {
+    color: var(--nav-primary-sublist-item-hover-color);
+}
+
+.uk-nav-primary .uk-nav-sub li.uk-active > a {
+    color: var(--nav-primary-sublist-item-active-color);
+}
+
+
+/* Alignment modifier
+ ========================================================================== */
+
+/*
+ * 1. Center header
+ * 2. Center items
+ */
+
+/* 1 */
+.uk-nav-center {
+    text-align: center;
+}
+
+/* 2 */
+.uk-nav-center li > a {
+    justify-content: center;
+}
+
+/* Sublists */
+.uk-nav-center .uk-nav-sub,
+.uk-nav-center .uk-nav-sub ul {
+    padding-left: 0;
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
+    border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
+    margin-top: var(--nav-dividers-margin-top);
+    padding-top: var(--nav-dividers-margin-top);
+    @if mixin-exists(hook-nav-dividers) {
+        @include hook-nav-dividers;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-nav-misc) {
+    @include hook-nav-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --nav-item-padding-vertical: #{$nav-item-padding-vertical};
+    --nav-item-padding-horizontal: #{$nav-item-padding-horizontal};
+    --nav-sublist-padding-vertical: #{$nav-sublist-padding-vertical};
+    --nav-sublist-padding-left: #{$nav-sublist-padding-left};
+    --nav-sublist-deeper-padding-left: #{$nav-sublist-deeper-padding-left};
+    --nav-sublist-item-padding-vertical: #{$nav-sublist-item-padding-vertical};
+    --nav-parent-icon-width: calc(var(--global-line-height) * 1em);
+    --nav-parent-icon-height: var(--nav-parent-icon-width);
+    --nav-parent-icon-color: var(--global-color);
+    --nav-header-padding-vertical: var(--nav-item-padding-vertical);
+    --nav-header-padding-horizontal: var(--nav-item-padding-horizontal);
+    --nav-header-font-size: var(--global-small-font-size);
+    --nav-header-text-transform: #{$nav-header-text-transform};
+    --nav-header-margin-top: var(--global-margin);
+    --nav-divider-margin-vertical: #{$nav-divider-margin-vertical};
+    --nav-divider-margin-horizontal: #{$nav-divider-margin-horizontal};
+    --nav-default-item-color: var(--global-muted-color);
+    --nav-default-item-hover-color: var(--global-color);
+    --nav-default-item-active-color: var(--global-emphasis-color);
+    --nav-default-item-disable-color: var(--global-muted-color);
+    --nav-default-header-color: var(--global-emphasis-color);
+    --nav-default-divider-border-width: var(--global-border-width);
+    --nav-default-divider-border: var(--global-border);
+    --nav-default-sublist-item-color: var(--global-muted-color);
+    --nav-default-sublist-item-hover-color: var(--global-color);
+    --nav-default-sublist-item-active-color: var(--global-emphasis-color);
+    --nav-default-sublist-item-disable-color: var(--global-muted-color);
+    --nav-primary-item-font-size: var(--global-large-font-size);
+    --nav-primary-item-line-height: var(--global-line-height);
+    --nav-primary-item-color: var(--global-muted-color);
+    --nav-primary-item-hover-color: var(--global-color);
+    --nav-primary-item-active-color: var(--global-emphasis-color);
+    --nav-primary-header-color: var(--global-emphasis-color);
+    --nav-primary-divider-border-width: var(--global-border-width);
+    --nav-primary-divider-border: var(--global-border);
+    --nav-primary-sublist-item-color: var(--global-muted-color);
+    --nav-primary-sublist-item-hover-color: var(--global-color);
+    --nav-primary-sublist-item-active-color: var(--global-emphasis-color);
+    --nav-dividers-margin-top: #{$nav-dividers-margin-top};
+    --nav-dividers-border-width: var(--global-border-width);
+    --nav-dividers-border: var(--global-border);
+
+    // Inverse
+    --inverse-nav-parent-icon-color: var(--inverse-global-color);
+    --inverse-nav-default-item-color: var(--inverse-global-muted-color);
+    --inverse-nav-default-item-hover-color: var(--inverse-global-color);
+    --inverse-nav-default-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-nav-default-header-color: var(--inverse-global-emphasis-color);
+    --inverse-nav-default-divider-border: var(--inverse-global-border);
+    --inverse-nav-default-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-nav-default-sublist-item-hover-color: var(--inverse-global-color);
+    --inverse-nav-default-sublist-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-nav-primary-item-color: var(--inverse-global-muted-color);
+    --inverse-nav-primary-item-hover-color: var(--inverse-global-color);
+    --inverse-nav-primary-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-nav-primary-header-color: var(--inverse-global-emphasis-color);
+    --inverse-nav-primary-divider-border: var(--inverse-global-border);
+    --inverse-nav-primary-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-nav-primary-sublist-item-hover-color: var(--inverse-global-color);
+    --inverse-nav-primary-sublist-item-active-color: var(--inverse-global-emphasis-color);
+}

package/dist/esm/components/Nav/placements.d.ts

@@ -0,0 +1,69 @@
+export declare const placements: {
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'left-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'right-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+};
+export declare const placementsRtl: {
+    'bottom-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'left-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'right-top': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+    'top-left': {
+        offset: number[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+        points: string[];
+    };
+};
+export default placements;

package/dist/esm/components/Nav/placements.js

@@ -0,0 +1,49 @@
+const autoAdjustOverflow = {
+    adjustX: 1,
+    adjustY: 1,
+};
+export const placements = {
+    'bottom-left': {
+        offset: [0, 7],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+    },
+    'left-top': {
+        offset: [-4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'tl'],
+    },
+    'right-top': {
+        offset: [4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'tr'],
+    },
+    'top-left': {
+        offset: [0, -7],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+    },
+};
+export const placementsRtl = {
+    'bottom-left': {
+        offset: [0, 7],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'bl'],
+    },
+    'left-top': {
+        offset: [4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tl', 'tr'],
+    },
+    'right-top': {
+        offset: [-4, 0],
+        overflow: autoAdjustOverflow,
+        points: ['tr', 'tl'],
+    },
+    'top-left': {
+        offset: [0, -7],
+        overflow: autoAdjustOverflow,
+        points: ['bl', 'tl'],
+    },
+};
+export default placements;