@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/dropdown/_dropdown.scss

@@ -0,0 +1,218 @@
+// Name:            Dropdown
+// Description:     Component to create dropdown menus
+//
+// Component:       `uk-dropdown`
+//
+// Adopted:         `uk-dropdown-nav`
+//
+// Modifiers:       `uk-dropdown-placement-top-*`
+//                  `uk-dropdown-placement-bottom-*`
+//                  `uk-dropdown-stack`
+//                  `uk-dropdown-grid`
+//
+// States:          `uk-dropdown-hidden`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin dropdown-styles {
+    /* ========================================================================
+       Component: Dropdown
+     ========================================================================== */
+
+    /*
+     * 1. Set position
+     * 2. Set a default width
+     * 3. Style
+     */
+
+    .#{$prefix}-dropdown {
+        --uk-inverse: #{$dropdown-color-mode};
+        background: var(--dropdown-background); /* 3 */
+        box-sizing: border-box; /* 2 */
+        color: var(--dropdown-color); /* 3 */
+        min-width: var(--dropdown-min-width); /* 2 */
+        padding: var(--dropdown-padding); /* 3 */
+        position: absolute; /* 1 */
+        z-index: var(--dropdown-z-index); /* 1 */
+        @if map.has-key($mixins, 'hook-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown'));
+        }
+    }
+
+    /* Hide */
+    .#{$prefix}-dropdown-hidden { display: none; }
+
+
+    /* Position Animation
+     ========================================================================== */
+
+    [class*='#{$prefix}-dropdown-placement-bottom'] {
+        &.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+        &.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+            animation-name: uk-slide-up-in;
+        }
+
+        &.#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+            animation-name: uk-slide-up-out;
+        }
+    }
+
+    [class*='#{$prefix}-dropdown-placement-top'] {
+        &.#{$prefix}-slide-up-enter.#{$prefix}-slide-up-enter-active,
+        &.#{$prefix}-slide-up-appear.#{$prefix}-slide-up-appear-active {
+            animation-name: uk-slide-down-in;
+        }
+
+        &.#{$prefix}-slide-up-leave.#{$prefix}-slide-up-leave-active {
+            animation-name: uk-slide-down-out;
+        }
+    }
+
+
+    /* Nav
+     * Adopts `uk-nav`
+     ========================================================================== */
+
+    .#{$prefix}-dropdown-nav {
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-dropdown-nav') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown-nav'));
+        }
+    }
+
+    /*
+     * Items
+     */
+
+    .#{$prefix}-dropdown-nav > li > a {
+        color: var(--dropdown-nav-item-color);
+        @if map.has-key($mixins, 'hook-dropdown-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown-nav-item'));
+        }
+    }
+
+    /* Hover + Focus + Active */
+    .#{$prefix}-dropdown-nav > li > a:hover,
+    .#{$prefix}-dropdown-nav > li > a:focus,
+    .#{$prefix}-dropdown-nav > li.#{$prefix}-active > a {
+        color: var(--dropdown-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-dropdown-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown-nav-item-hover'));
+        }
+    }
+
+    /*
+     * Header
+     */
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-header {
+        color: var(--dropdown-nav-header-color);
+        @if map.has-key($mixins, 'hook-dropdown-nav-header') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown-nav-header'));
+        }
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-divider {
+        border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
+        @if map.has-key($mixins, 'hook-dropdown-nav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-dropdown-nav-divider'));
+        }
+    }
+
+    /*
+     * Sublists
+     */
+
+    // noinspection Stylelint
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a {
+        color: var(--dropdown-nav-sublist-item-color);
+    }
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a:focus,
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--dropdown-nav-sublist-item-hover-color);
+    }
+
+
+    /* Grid modifiers
+     ========================================================================== */
+
+    .#{$prefix}-dropdown-stack .#{$prefix}-dropdown-grid > * {
+        width: 100% !important;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-dropdown-misc') {
+        @include meta.apply(map.get($mixins, 'hook-dropdown-misc'));
+    }
+
+    @content;
+}
+
+@mixin dropdown-inverse-styles {
+    // Color mode
+    @if $dropdown-color-mode == dark {
+        .#{$prefix}-dropdown {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $dropdown-color-mode == light {
+        .#{$prefix}-dropdown {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @content;
+}
+
+@mixin dropdown-tokens {
+    --dropdown-z-index: #{$dropdown-z-index};
+    --dropdown-min-width: #{$dropdown-min-width};
+    --dropdown-padding: #{$dropdown-padding};
+    --dropdown-background: var(--global-muted-background);
+    --dropdown-border-radius: var(--global-border-radius);
+    --dropdown-color: var(--global-color);
+    --dropdown-margin: var(--global-small-margin);
+    --dropdown-nav-item-color: var(--global-muted-color);
+    --dropdown-nav-item-hover-color: var(--global-color);
+    --dropdown-nav-header-color: var(--global-emphasis-color);
+    --dropdown-nav-divider-border-width: var(--global-border-width);
+    --dropdown-nav-divider-border: var(--global-border);
+    --dropdown-nav-sublist-item-color: var(--global-muted-color);
+    --dropdown-nav-sublist-item-hover-color: var(--global-color);
+
+    @content;
+}
+
+@mixin dropdown-inverse-tokens {
+    --inverse-dropdown-background: var(--inverse-global-muted-background);
+    --inverse-dropdown-color: var(--inverse-global-color);
+    --inverse-dropdown-nav-item-color: var(--inverse-global-muted-color);
+    --inverse-dropdown-nav-item-hover-color: var(--inverse-global-color);
+    --inverse-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+    --inverse-dropdown-nav-divider-border: var(--inverse-global-border);
+    --inverse-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+    --inverse-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/dropdown/_index.scss

@@ -0,0 +1,11 @@
+@use 'dropdown' as *;
+
+$generate-tokens: true !default;
+
+@include dropdown-styles;
+
+@if $generate-tokens {
+    :root {
+        @include dropdown-tokens;
+    }
+}

package/styles/flex/_flex.scss

@@ -0,0 +1,338 @@
+// Name:            Flex
+// Description:     Utilities for layouts based on flexbox
+//
+// Component:       `uk-flex-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin flex-styles {
+    /* ========================================================================
+       Component: Flex
+     ========================================================================== */
+
+    .#{$prefix}-flex { display: flex; }
+
+    .#{$prefix}-flex-inline { display: inline-flex; }
+
+    /*
+     * Remove pseudo elements created by micro clearfix as precaution
+     */
+
+    .#{$prefix}-flex::before,
+    .#{$prefix}-flex::after,
+    .#{$prefix}-flex-inline::before,
+    .#{$prefix}-flex-inline::after { display: none; }
+
+
+    /* Alignment
+     ========================================================================== */
+
+    /*
+     * Align items along the main axis of the current line of the flex container
+     * Row: Horizontal
+     */
+
+    // Default
+    .#{$prefix}-flex-left { justify-content: flex-start; }
+
+    .#{$prefix}-flex-center { justify-content: center; }
+
+    .#{$prefix}-flex-right { justify-content: flex-end; }
+
+    .#{$prefix}-flex-between { justify-content: space-between; }
+
+    .#{$prefix}-flex-around { justify-content: space-around; }
+
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-flex-left\@s { justify-content: flex-start; }
+
+        .#{$prefix}-flex-center\@s { justify-content: center; }
+
+        .#{$prefix}-flex-right\@s { justify-content: flex-end; }
+
+        .#{$prefix}-flex-between\@s { justify-content: space-between; }
+
+        .#{$prefix}-flex-around\@s { justify-content: space-around; }
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-flex-left\@m { justify-content: flex-start; }
+
+        .#{$prefix}-flex-center\@m { justify-content: center; }
+
+        .#{$prefix}-flex-right\@m { justify-content: flex-end; }
+
+        .#{$prefix}-flex-between\@m { justify-content: space-between; }
+
+        .#{$prefix}-flex-around\@m { justify-content: space-around; }
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-flex-left\@l { justify-content: flex-start; }
+
+        .#{$prefix}-flex-center\@l { justify-content: center; }
+
+        .#{$prefix}-flex-right\@l { justify-content: flex-end; }
+
+        .#{$prefix}-flex-between\@l { justify-content: space-between; }
+
+        .#{$prefix}-flex-around\@l { justify-content: space-around; }
+    }
+
+    /* Large screen and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-xlarge) {
+        .#{$prefix}-flex-left\@xl { justify-content: flex-start; }
+
+        .#{$prefix}-flex-center\@xl { justify-content: center; }
+
+        .#{$prefix}-flex-right\@xl { justify-content: flex-end; }
+
+        .#{$prefix}-flex-between\@xl { justify-content: space-between; }
+
+        .#{$prefix}-flex-around\@xl { justify-content: space-around; }
+    }
+
+    /*
+     * Align items in the cross axis of the current line of the flex container
+     * Row: Vertical
+     */
+
+    // Default
+    .#{$prefix}-flex-stretch { align-items: stretch; }
+
+    .#{$prefix}-flex-top { align-items: flex-start; }
+
+    .#{$prefix}-flex-middle { align-items: center; }
+
+    .#{$prefix}-flex-bottom { align-items: flex-end; }
+
+
+    /* Direction
+     ========================================================================== */
+
+    // Default
+    .#{$prefix}-flex-row { flex-direction: row; }
+
+    .#{$prefix}-flex-row-reverse { flex-direction: row-reverse; }
+
+    .#{$prefix}-flex-column { flex-direction: column; }
+
+    .#{$prefix}-flex-column-reverse { flex-direction: column-reverse; }
+
+
+    /* Wrap
+     ========================================================================== */
+
+    // Default
+    .#{$prefix}-flex-nowrap { flex-wrap: nowrap; }
+
+    .#{$prefix}-flex-wrap { flex-wrap: wrap; }
+
+    .#{$prefix}-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+    /*
+     * Aligns items within the flex container when there is extra space in the cross-axis
+     * Only works if there is more than one line of flex items
+     */
+
+    // Default
+    .#{$prefix}-flex-wrap-stretch { align-content: stretch; }
+
+    .#{$prefix}-flex-wrap-top { align-content: flex-start; }
+
+    .#{$prefix}-flex-wrap-middle { align-content: center; }
+
+    .#{$prefix}-flex-wrap-bottom { align-content: flex-end; }
+
+    .#{$prefix}-flex-wrap-between { align-content: space-between; }
+
+    .#{$prefix}-flex-wrap-around { align-content: space-around; }
+
+
+    /* Item ordering
+     ========================================================================== */
+
+    /*
+     * Default is 0
+     */
+
+    .#{$prefix}-flex-first { order: -1; }
+
+    .#{$prefix}-flex-last { order: 99; }
+
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-flex-first\@s { order: -1; }
+
+        .#{$prefix}-flex-last\@s { order: 99; }
+
+        .#{$prefix}-flex-nowrap\@s { flex-wrap: nowrap; }
+
+        .#{$prefix}-flex-wrap\@s { flex-wrap: wrap; }
+
+        .#{$prefix}-flex-wrap-reverse\@s { flex-wrap: wrap-reverse; }
+
+        .#{$prefix}-flex-wrap-stretch\@s { align-content: stretch; }
+
+        .#{$prefix}-flex-wrap-top\@s { align-content: flex-start; }
+
+        .#{$prefix}-flex-wrap-middle\@s { align-content: center; }
+
+        .#{$prefix}-flex-wrap-bottom\@s { align-content: flex-end; }
+
+        .#{$prefix}-flex-wrap-between\@s { align-content: space-between; }
+
+        .#{$prefix}-flex-wrap-around\@s { align-content: space-around; }
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-flex-first\@m { order: -1; }
+
+        .#{$prefix}-flex-last\@m { order: 99; }
+
+        .#{$prefix}-flex-nowrap\@m { flex-wrap: nowrap; }
+
+        .#{$prefix}-flex-wrap\@m { flex-wrap: wrap; }
+
+        .#{$prefix}-flex-wrap-reverse\@m { flex-wrap: wrap-reverse; }
+
+        .#{$prefix}-flex-wrap-stretch\@m { align-content: stretch; }
+
+        .#{$prefix}-flex-wrap-top\@m { align-content: flex-start; }
+
+        .#{$prefix}-flex-wrap-middle\@m { align-content: center; }
+
+        .#{$prefix}-flex-wrap-bottom\@m { align-content: flex-end; }
+
+        .#{$prefix}-flex-wrap-between\@m { align-content: space-between; }
+
+        .#{$prefix}-flex-wrap-around\@m { align-content: space-around; }
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-flex-first\@l { order: -1; }
+
+        .#{$prefix}-flex-last\@l { order: 99; }
+
+        .#{$prefix}-flex-nowrap\@l { flex-wrap: nowrap; }
+
+        .#{$prefix}-flex-wrap\@l { flex-wrap: wrap; }
+
+        .#{$prefix}-flex-wrap-reverse\@l { flex-wrap: wrap-reverse; }
+
+        .#{$prefix}-flex-wrap-stretch\@l { align-content: stretch; }
+
+        .#{$prefix}-flex-wrap-top\@l { align-content: flex-start; }
+
+        .#{$prefix}-flex-wrap-middle\@l { align-content: center; }
+
+        .#{$prefix}-flex-wrap-bottom\@l { align-content: flex-end; }
+
+        .#{$prefix}-flex-wrap-between\@l { align-content: space-between; }
+
+        .#{$prefix}-flex-wrap-around\@l { align-content: space-around; }
+    }
+
+    /* Large screen and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-xlarge) {
+        .#{$prefix}-flex-first\@xl { order: -1; }
+
+        .#{$prefix}-flex-last\@xl { order: 99; }
+
+        .#{$prefix}-flex-nowrap\@xl { flex-wrap: nowrap; }
+
+        .#{$prefix}-flex-wrap\@xl { flex-wrap: wrap; }
+
+        .#{$prefix}-flex-wrap-reverse\@xl { flex-wrap: wrap-reverse; }
+
+        .#{$prefix}-flex-wrap-stretch\@xl { align-content: stretch; }
+
+        .#{$prefix}-flex-wrap-top\@xl { align-content: flex-start; }
+
+        .#{$prefix}-flex-wrap-middle\@xl { align-content: center; }
+
+        .#{$prefix}-flex-wrap-bottom\@xl { align-content: flex-end; }
+
+        .#{$prefix}-flex-wrap-between\@xl { align-content: space-between; }
+
+        .#{$prefix}-flex-wrap-around\@xl { align-content: space-around; }
+    }
+
+
+    /* Item dimensions
+     ========================================================================== */
+
+    /*
+     * Initial: 0 1 auto
+     * Content dimensions, but shrinks
+     */
+
+    /*
+     * No Flex: 0 0 auto
+     * Content dimensions
+     */
+
+    .#{$prefix}-flex-none { flex: none; }
+
+    /*
+     * Relative Flex: 1 1 auto
+     * Space is allocated considering content
+     */
+
+    .#{$prefix}-flex-auto { flex: auto; }
+
+    /*
+     * Absolute Flex: 1 1 0%
+     * Space is allocated solely based on flex
+     */
+
+    .#{$prefix}-flex-1 { flex: 1; }
+
+    /*
+     * Fill Flex: 1 0 auto
+     */
+
+    .#{$prefix}-flex-fill { flex: 1 0 auto; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-flex-misc') {
+        @include meta.apply(map.get($mixins, 'hook-flex-misc'));
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin flex-tokens {
+    @content;
+}

package/styles/flex/_index.scss

@@ -0,0 +1,8 @@
+@use 'flex' as *;
+
+$generate-tokens: true !default;
+
+@include flex-styles;
+
+// No tokens for this component
+// :root { @include flex-tokens; }