@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/drawer/_drawer.scss

@@ -0,0 +1,588 @@
+// Name:            Drawer
+// Description:     Component to create an drawer sidebar
+//
+// Component:       `uk-drawer`
+//
+// Sub-objects:     `uk-drawer-bar`
+//                  `uk-drawer-container`
+//                  `uk-drawer-page`
+//
+// Adopted:         `uk-drawer-close`
+//
+// Modifiers:       `uk-drawer-flip`
+//                  `uk-drawer-bar-animation`
+//                  `uk-drawer-reveal`
+//                  `uk-drawer-overlay`
+//                  `uk-drawer-container-animation`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin drawer-styles {
+    /* ========================================================================
+       Component: Drawer
+     ========================================================================== */
+
+    .#{$prefix}-drawer {
+        display: none;
+        inset: 0;
+        position: fixed;
+        z-index: var(--drawer-z-index);
+        @if map.has-key($mixins, 'hook-drawer') {
+            @include meta.apply(map.get($mixins, 'hook-drawer'));
+        }
+    }
+
+    .#{$prefix}-drawer-open {
+        touch-action: none;
+        width: 100vw;
+    }
+
+
+    // Page & Container
+    // ========================================================================
+
+    .#{$prefix}-drawer-page,
+    .#{$prefix}-drawer-container {
+        overflow-x: clip;
+        touch-action: none;
+    }
+
+    .#{$prefix}-drawer-page {
+        overflow-y: clip;
+    }
+
+    .#{$prefix}-drawer-container {
+        position: relative;
+        touch-action: pan-y pinch-zoom;
+        transform: none !important;
+        transition-duration: var(--drawer-transition-duration);
+        transition-timing-function: var(--ease-in-out);
+    }
+
+
+    // Content
+    // ========================================================================
+
+    .#{$prefix}-drawer-content-wrapper {
+        position: absolute;
+        transition: var(--drawer-transition-duration) var(--ease-in-out);
+        @if map.has-key($mixins, 'hook-drawer-content-wrapper') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-content-wrapper'));
+        }
+    }
+
+    .#{$prefix}-drawer-content {
+        background-clip: padding-box;
+        background-color: var(--drawer-content-background);
+        border: 0 none;
+        box-sizing: border-box;
+        height: 100%;
+        outline: 0 none;
+        overflow: visible;
+        padding: var(--drawer-content-padding);
+        pointer-events: auto;
+        position: relative;
+        width: 100%;
+        z-index: 1;
+        @if map.has-key($mixins, 'hook-drawer-content') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-content'));
+        }
+    }
+
+
+    // Placement
+    // ========================================================================
+
+    .#{$prefix}-drawer-left .#{$prefix}-drawer-content-wrapper {
+        bottom: 0;
+        left: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-drawer-right .#{$prefix}-drawer-content-wrapper {
+        bottom: 0;
+        right: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-drawer-left,
+    .#{$prefix}-drawer-right {
+        &:not(.#{$prefix}-drawer-reveal) .#{$prefix}-drawer-content-wrapper {
+            width: var(--drawer-width);
+        }
+
+        .#{$prefix}-drawer-content-wrapper {
+            max-width: 100vw;
+        }
+    }
+
+    .#{$prefix}-drawer-top .#{$prefix}-drawer-content-wrapper {
+        left: 0;
+        right: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-drawer-bottom .#{$prefix}-drawer-content-wrapper {
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .#{$prefix}-drawer-top,
+    .#{$prefix}-drawer-bottom {
+        &:not(.#{$prefix}-drawer-reveal) .#{$prefix}-drawer-content-wrapper {
+            height: var(--drawer-height);
+        }
+
+        .#{$prefix}-drawer-content-wrapper {
+            max-height: 100vh;
+        }
+    }
+
+
+    // Size
+    // ========================================================================
+
+    /* Large */
+    .#{$prefix}-drawer-large.#{$prefix}-drawer-left .#{$prefix}-drawer-content-wrapper,
+    .#{$prefix}-drawer-large.#{$prefix}-drawer-right .#{$prefix}-drawer-content-wrapper {
+        width: var(--drawer-large-width);
+    }
+
+    .#{$prefix}-drawer-large.#{$prefix}-drawer-top .#{$prefix}-drawer-content-wrapper,
+    .#{$prefix}-drawer-large.#{$prefix}-drawer-bottom .#{$prefix}-drawer-content-wrapper {
+        height: var(--drawer-large-height);
+    }
+
+
+    // Animation & Transition
+    // ========================================================================
+
+    .#{$prefix}-drawer-container-push-left,
+    .#{$prefix}-drawer-container-reveal-left {
+        left: 0;
+        transition-property: left;
+        will-change: left;
+
+        &.#{$prefix}-drawer-container-animation {
+            left: var(--drawer-width);
+
+            &.#{$prefix}-drawer-container-large {
+                left: var(--drawer-large-width);
+            }
+        }
+    }
+
+    .#{$prefix}-drawer-container-push-right,
+    .#{$prefix}-drawer-container-reveal-right {
+        right: 0;
+        transition-property: right;
+        will-change: right;
+
+        &.#{$prefix}-drawer-container-animation {
+            right: var(--drawer-width);
+
+            &.#{$prefix}-drawer-container-large {
+                right: var(--drawer-large-width);
+            }
+        }
+    }
+
+    .#{$prefix}-drawer-container-push-top,
+    .#{$prefix}-drawer-container-reveal-top {
+        top: 0;
+        transition-property: top;
+        will-change: top;
+
+        &.#{$prefix}-drawer-container-animation {
+            top: var(--drawer-height);
+
+            &.#{$prefix}-drawer-container-large {
+                top: var(--drawer-height);
+            }
+        }
+    }
+
+    .#{$prefix}-drawer-container-push-bottom,
+    .#{$prefix}-drawer-container-reveal-bottom {
+        bottom: 0;
+        transition-property: bottom;
+        will-change: bottom;
+
+        &.#{$prefix}-drawer-container-animation {
+            bottom: var(--drawer-height);
+
+            &.#{$prefix}-drawer-container-large {
+                bottom: var(--drawer-height);
+            }
+        }
+    }
+
+    /* Reveal animation */
+    .#{$prefix}-drawer-reveal .#{$prefix}-drawer-content-wrapper { overflow: hidden; }
+
+    .#{$prefix}-drawer-left.#{$prefix}-drawer-reveal,
+    .#{$prefix}-drawer-right.#{$prefix}-drawer-reveal {
+        &:not(.#{$prefix}-drawer-large) {
+            .#{$prefix}-drawer-content-wrapper {
+                width: 0;
+
+                .#{$prefix}-drawer-content { width: var(--drawer-width); }
+            }
+
+            &.#{$prefix}-drawer-open .#{$prefix}-drawer-content-wrapper { width: var(--drawer-width); }
+        }
+
+        &.#{$prefix}-drawer-large {
+            .#{$prefix}-drawer-content-wrapper {
+                .#{$prefix}-drawer-content { width: var(--drawer-large-width); }
+            }
+
+            &.#{$prefix}-drawer-open .#{$prefix}-drawer-content-wrapper { width: var(--drawer-large-width); }
+        }
+    }
+
+    .#{$prefix}-drawer-top.#{$prefix}-drawer-reveal,
+    .#{$prefix}-drawer-bottom.#{$prefix}-drawer-reveal {
+        &:not(.#{$prefix}-drawer-large) {
+            .#{$prefix}-drawer-content-wrapper {
+                height: 0;
+
+                .#{$prefix}-drawer-content { height: var(--drawer-height); }
+            }
+
+            &.#{$prefix}-drawer-open .#{$prefix}-drawer-content-wrapper { height: var(--drawer-height); }
+        }
+
+        &.#{$prefix}-drawer-large {
+            .#{$prefix}-drawer-content-wrapper {
+                .#{$prefix}-drawer-content { height: var(--drawer-large-height); }
+            }
+
+            &.#{$prefix}-drawer-open .#{$prefix}-drawer-content-wrapper { height: var(--drawer-large-height); }
+        }
+    }
+
+
+    // Motion
+    // ========================================================================
+
+    /* Fade */
+    .#{$prefix}-motion-drawer-fade {
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration) linear; }
+        }
+
+        &-appear,
+        &-enter {
+            opacity: 0;
+
+            &-active { opacity: 1; }
+        }
+
+        &-leave {
+            opacity: 1;
+
+            &-active { opacity: 0; }
+        }
+    }
+
+    /* Slide Left */
+    .#{$prefix}-motion-drawer-push-left,
+    .#{$prefix}-motion-drawer-slide-left {
+        will-change: transform;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            transform: translateX(-100%);
+
+            &-active { transform: translateX(0); }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active { transform: translateX(-100%) !important; }
+        }
+    }
+
+    /* Slide Right */
+    .#{$prefix}-motion-drawer-push-right,
+    .#{$prefix}-motion-drawer-slide-right {
+        will-change: transform;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            transform: translateX(100%);
+
+            &-active { transform: translateX(0); }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active { transform: translateX(100%) !important; }
+        }
+    }
+
+    /* Slide Top */
+    .#{$prefix}-motion-drawer-push-top,
+    .#{$prefix}-motion-drawer-slide-top {
+        will-change: transform;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            transform: translateY(-100%);
+
+            &-active { transform: translateY(0); }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active { transform: translateY(-100%) !important; }
+        }
+    }
+
+    /* Slide Bottom */
+    .#{$prefix}-motion-drawer-push-bottom,
+    .#{$prefix}-motion-drawer-slide-bottom {
+        will-change: transform;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            transform: translateY(100%);
+
+            &-active { transform: translateY(0); }
+        }
+
+        &-leave {
+            transform: translateX(0);
+
+            &-active { transform: translateY(100%) !important; }
+        }
+    }
+
+    /* Reveal Horizontal */
+    .#{$prefix}-motion-drawer-reveal-left,
+    .#{$prefix}-motion-drawer-reveal-right {
+        will-change: width;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            width: 0 !important;
+
+            &-active { width: var(--drawer-width) !important; }
+        }
+
+        &-leave {
+            width: var(--drawer-width) !important;
+
+            &-active { width: 0 !important; }
+        }
+    }
+
+    /* Reveal Vertical */
+    .#{$prefix}-motion-drawer-reveal-top,
+    .#{$prefix}-motion-drawer-reveal-bottom {
+        will-change: height;
+
+        &-appear,
+        &-enter,
+        &-leave {
+            &-active { transition: all var(--drawer-transition-duration); }
+            &-prepare { transition: none !important; }
+        }
+
+        &-appear,
+        &-enter {
+            height: 0 !important;
+
+            &-active { height: var(--drawer-height) !important; }
+        }
+
+        &-leave {
+            height: var(--drawer-height) !important;
+
+            &-active { height: 0 !important; }
+        }
+    }
+
+    .#{$prefix}-drawer-large {
+        .#{$prefix}-motion-drawer-reveal-left,
+        .#{$prefix}-motion-drawer-reveal-right {
+            will-change: width;
+
+            &-appear,
+            &-enter,
+            &-leave {
+                &-active { transition: all var(--drawer-transition-duration); }
+                &-prepare { transition: none !important; }
+            }
+
+            &-appear,
+            &-enter {
+                width: 0 !important;
+
+                &-active { width: var(--drawer-large-width) !important; }
+            }
+
+            &-leave {
+                width: var(--drawer-large-width) !important;
+
+                &-active { width: 0 !important; }
+            }
+        }
+
+        .#{$prefix}-motion-drawer-reveal-top,
+        .#{$prefix}-motion-drawer-reveal-bottom {
+            will-change: height;
+
+            &-appear,
+            &-enter,
+            &-leave {
+                &-active { transition: all var(--drawer-transition-duration); }
+                &-prepare { transition: none !important; }
+            }
+
+            &-appear,
+            &-enter {
+                height: 0 !important;
+
+                &-active { height: var(--drawer-large-height) !important; }
+            }
+
+            &-leave {
+                height: var(--drawer-large-height) !important;
+
+                &-active { height: 0 !important; }
+            }
+        }
+    }
+
+
+    // Mask
+    // ========================================================================
+
+    .#{$prefix}-drawer-mask {
+        background-color: var(--drawer-mask-background);
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        @if map.has-key($mixins, 'hook-drawer-mask') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-mask'));
+        }
+    }
+
+    .#{$prefix}-drawer-animation .#{$prefix}-drawer-mask {
+        pointer-events: auto;
+        @if map.has-key($mixins, 'hook-drawer-mask-open') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-mask-open'));
+        }
+    }
+
+
+    /* Close
+     * Adopts `uk-close`
+     ========================================================================== */
+
+    .#{$prefix}-drawer-close {
+        --icon-size: 24px;
+
+        box-sizing: content-box;
+        padding: var(--drawer-close-padding);
+        position: absolute;
+        right: var(--drawer-close-position);
+        top: var(--drawer-close-position);
+        z-index: var(--drawer-z-index);
+        @if map.has-key($mixins, 'hook-drawer-close') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-close'));
+        }
+    }
+
+    /*
+     * Remove margin from adjacent element
+     */
+
+    .#{$prefix}-drawer-close:first-child + * {
+        margin-top: 0;
+    }
+
+    /*
+     * Hover
+     */
+
+    .#{$prefix}-drawer-close:hover {
+        @if map.has-key($mixins, 'hook-drawer-close-hover') {
+            @include meta.apply(map.get($mixins, 'hook-drawer-close-hover'));
+        }
+    }
+
+    @content;
+}
+
+@mixin drawer-tokens {
+    --drawer-content-background: var(--global-background);
+    --drawer-content-padding: var(--global-gutter);
+    --drawer-height: 360px;
+    --drawer-large-height: 768px;
+    --drawer-width: 360px;
+    --drawer-large-width: 768px;
+    --drawer-mask-background: #{$drawer-mask-background};
+    --drawer-z-index: calc(var(--global-z-index) + 30);
+    --drawer-transition-duration: var(--transition-medium-fast-duration);
+    --drawer-close-position: var(--global-small-margin);
+    --drawer-close-padding: #{$drawer-close-padding};
+
+    @content;
+}

package/styles/drawer/_index.scss

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

package/styles/drop/_drop.scss

@@ -0,0 +1,97 @@
+// Name:            Drop
+// Description:     Component to position any element next to any other element.
+//
+// Component:       `uk-drop`
+//
+// Modifiers:       `uk-drop-placement-top-*`
+//                  `uk-drop-placement-bottom-*`
+//                  `uk-drop-stack`
+//                  `uk-drop-grid`
+//
+// States:          `uk-drop-hidden`
+//
+// Uses:            Animation
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin drop-styles {
+    /* ========================================================================
+       Component: Drop
+     ========================================================================== */
+
+    /*
+     * 1. Set a default width
+     * 2. Set position
+     */
+
+    .#{$prefix}-drop {
+        /* 1 */
+        box-sizing: border-box;
+
+        /* 2 */
+        position: absolute;
+        width: var(--drop-width);
+        z-index: var(--drop-z-index);
+    }
+
+    /* Hide */
+    .#{$prefix}-drop-hidden { display: none; }
+
+
+    /* Drop mask
+     ========================================================================== */
+
+    .#{$prefix}-drop-mask {
+        background-color: var(--drop-mask-background);
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: fixed;
+        @if map.has-key($mixins, 'hook-drop-mask') {
+            @include meta.apply(map.get($mixins, 'hook-drop-mask'));
+        }
+    }
+
+    .#{$prefix}-drop-mask.#{$prefix}-active {
+        opacity: 1;
+        @if map.has-key($mixins, 'hook-drop-mask-active') {
+            @include meta.apply(map.get($mixins, 'hook-drop-mask-active'));
+        }
+    }
+
+
+    /* Grid modifiers
+     ========================================================================== */
+
+    .#{$prefix}-drop-stack .#{$prefix}-drop-grid > * { width: 100% !important; }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-drop-misc') {
+        @include meta.apply(map.get($mixins, 'hook-drop-misc'));
+    }
+
+    @content;
+}
+
+@mixin drop-tokens {
+    --drop-mask-background: #{$drop-mask-background};
+    --drop-margin: var(--global-margin);
+    --drop-width: #{$drop-width};
+    --drop-z-index: calc(var(--global-z-index) + 20);
+
+    @content;
+}

package/styles/drop/_index.scss

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