@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/drawer.scss

@@ -1,584 +0,0 @@
-// 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:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Drawer
- ========================================================================== */
-
-.uk-drawer {
-    display: none;
-    inset: 0;
-    position: fixed;
-    z-index: var(--drawer-z-index);
-    @if meta.mixin-exists('hook-drawer') {
-        @include hook-drawer;
-    }
-}
-
-.uk-drawer-open {
-    touch-action: none;
-    width: 100vw;
-}
-
-
-// Page & Container
-// ========================================================================
-
-.uk-drawer-page,
-.uk-drawer-container {
-    overflow-x: clip;
-    touch-action: none;
-}
-
-.uk-drawer-page {
-    overflow-y: clip;
-}
-
-.uk-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
-// ========================================================================
-
-.uk-drawer-content-wrapper {
-    position: absolute;
-    transition: var(--drawer-transition-duration) var(--ease-in-out);
-    @if meta.mixin-exists('hook-drawer-content-wrapper') {
-        @include hook-drawer-content-wrapper;
-    }
-}
-
-.uk-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 meta.mixin-exists('hook-drawer-content') {
-        @include hook-drawer-content;
-    }
-}
-
-
-// Placement
-// ========================================================================
-
-.uk-drawer-left .uk-drawer-content-wrapper {
-    bottom: 0;
-    left: 0;
-    top: 0;
-}
-
-.uk-drawer-right .uk-drawer-content-wrapper {
-    bottom: 0;
-    right: 0;
-    top: 0;
-}
-
-.uk-drawer-left,
-.uk-drawer-right {
-    &:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
-        width: var(--drawer-width);
-    }
-
-    .uk-drawer-content-wrapper {
-        max-width: 100vw;
-    }
-}
-
-.uk-drawer-top .uk-drawer-content-wrapper {
-    left: 0;
-    right: 0;
-    top: 0;
-}
-
-.uk-drawer-bottom .uk-drawer-content-wrapper {
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.uk-drawer-top,
-.uk-drawer-bottom {
-    &:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
-        height: var(--drawer-height);
-    }
-
-    .uk-drawer-content-wrapper {
-        max-height: 100vh;
-    }
-}
-
-
-// Size
-// ========================================================================
-
-/* Large */
-.uk-drawer-large.uk-drawer-left .uk-drawer-content-wrapper,
-.uk-drawer-large.uk-drawer-right .uk-drawer-content-wrapper {
-    width: var(--drawer-large-width);
-}
-
-.uk-drawer-large.uk-drawer-top .uk-drawer-content-wrapper,
-.uk-drawer-large.uk-drawer-bottom .uk-drawer-content-wrapper {
-    height: var(--drawer-large-height);
-}
-
-
-// Animation & Transition
-// ========================================================================
-
-.uk-drawer-container-push-left,
-.uk-drawer-container-reveal-left {
-    left: 0;
-    transition-property: left;
-    will-change: left;
-
-    &.uk-drawer-container-animation {
-        left: var(--drawer-width);
-
-        &.uk-drawer-container-large {
-            left: var(--drawer-large-width);
-        }
-    }
-}
-
-.uk-drawer-container-push-right,
-.uk-drawer-container-reveal-right {
-    right: 0;
-    transition-property: right;
-    will-change: right;
-
-    &.uk-drawer-container-animation {
-        right: var(--drawer-width);
-
-        &.uk-drawer-container-large {
-            right: var(--drawer-large-width);
-        }
-    }
-}
-
-.uk-drawer-container-push-top,
-.uk-drawer-container-reveal-top {
-    top: 0;
-    transition-property: top;
-    will-change: top;
-
-    &.uk-drawer-container-animation {
-        top: var(--drawer-height);
-
-        &.uk-drawer-container-large {
-            top: var(--drawer-height);
-        }
-    }
-}
-
-.uk-drawer-container-push-bottom,
-.uk-drawer-container-reveal-bottom {
-    bottom: 0;
-    transition-property: bottom;
-    will-change: bottom;
-
-    &.uk-drawer-container-animation {
-        bottom: var(--drawer-height);
-
-        &.uk-drawer-container-large {
-            bottom: var(--drawer-height);
-        }
-    }
-}
-
-/* Reveal animation */
-.uk-drawer-reveal .uk-drawer-content-wrapper { overflow: hidden; }
-
-.uk-drawer-left.uk-drawer-reveal,
-.uk-drawer-right.uk-drawer-reveal {
-    &:not(.uk-drawer-large) {
-        .uk-drawer-content-wrapper {
-            width: 0;
-
-            .uk-drawer-content { width: var(--drawer-width); }
-        }
-
-        &.uk-drawer-open .uk-drawer-content-wrapper { width: var(--drawer-width); }
-    }
-
-    &.uk-drawer-large {
-        .uk-drawer-content-wrapper {
-            .uk-drawer-content { width: var(--drawer-large-width); }
-        }
-
-        &.uk-drawer-open .uk-drawer-content-wrapper { width: var(--drawer-large-width); }
-    }
-}
-
-.uk-drawer-top.uk-drawer-reveal,
-.uk-drawer-bottom.uk-drawer-reveal {
-    &:not(.uk-drawer-large) {
-        .uk-drawer-content-wrapper {
-            height: 0;
-
-            .uk-drawer-content { height: var(--drawer-height); }
-        }
-
-        &.uk-drawer-open .uk-drawer-content-wrapper { height: var(--drawer-height); }
-    }
-
-    &.uk-drawer-large {
-        .uk-drawer-content-wrapper {
-            .uk-drawer-content { height: var(--drawer-large-height); }
-        }
-
-        &.uk-drawer-open .uk-drawer-content-wrapper { height: var(--drawer-large-height); }
-    }
-}
-
-
-// Motion
-// ========================================================================
-
-/* Fade */
-.uk-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 */
-.uk-motion-drawer-push-left,
-.uk-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 */
-.uk-motion-drawer-push-right,
-.uk-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 */
-.uk-motion-drawer-push-top,
-.uk-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 */
-.uk-motion-drawer-push-bottom,
-.uk-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 */
-.uk-motion-drawer-reveal-left,
-.uk-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 */
-.uk-motion-drawer-reveal-top,
-.uk-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; }
-    }
-}
-
-.uk-drawer-large {
-    .uk-motion-drawer-reveal-left,
-    .uk-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; }
-        }
-    }
-
-    .uk-motion-drawer-reveal-top,
-    .uk-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
-// ========================================================================
-
-.uk-drawer-mask {
-    background-color: var(--drawer-mask-background);
-    inset: 0;
-    pointer-events: none;
-    position: absolute;
-    @if meta.mixin-exists('hook-drawer-mask') {
-        @include hook-drawer-mask;
-    }
-}
-
-.uk-drawer-animation .uk-drawer-mask {
-    pointer-events: auto;
-    @if meta.mixin-exists('hook-drawer-mask-open') {
-        @include hook-drawer-mask-open;
-    }
-}
-
-
-/* Close
- * Adopts `uk-close`
- ========================================================================== */
-
-.uk-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 meta.mixin-exists('hook-drawer-close') {
-        @include hook-drawer-close;
-    }
-}
-
-/*
- * Remove margin from adjacent element
- */
-
-.uk-drawer-close:first-child + * {
-    margin-top: 0;
-}
-
-/*
- * Hover
- */
-
-.uk-drawer-close:hover {
-    @if meta.mixin-exists('hook-drawer-close-hover') {
-        @include hook-drawer-close-hover;
-    }
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --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};
-}

package/styles/drop.scss

@@ -1,93 +0,0 @@
-// 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:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Drop
- ========================================================================== */
-
-/*
- * 1. Set a default width
- * 2. Set position
- */
-
-.uk-drop {
-    /* 1 */
-    box-sizing: border-box;
-
-    /* 2 */
-    position: absolute;
-    width: var(--drop-width);
-    z-index: var(--drop-z-index);
-}
-
-/* Hide */
-.uk-drop-hidden { display: none; }
-
-
-/* Drop mask
- ========================================================================== */
-
-.uk-drop-mask {
-    background-color: var(--drop-mask-background);
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    position: fixed;
-    @if meta.mixin-exists('hook-drop-mask') {
-        @include hook-drop-mask;
-    }
-}
-
-.uk-drop-mask.uk-active {
-    opacity: 1;
-    @if meta.mixin-exists('hook-drop-mask-active') {
-        @include hook-drop-mask-active;
-    }
-}
-
-
-/* Grid modifiers
- ========================================================================== */
-
-.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-drop-misc') {
-    @include hook-drop-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --drop-mask-background: #{$drop-mask-background};
-    --drop-margin: var(--global-margin);
-    --drop-width: #{$drop-width};
-    --drop-z-index: calc(var(--global-z-index) + 20);
-}