@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/drawer.css

@@ -0,0 +1,562 @@
+/* ========================================================================
+   Component: Drawer
+ ========================================================================== */
+.uk-drawer {
+  display: none;
+  inset: 0;
+  position: fixed;
+  z-index: var(--drawer-z-index);
+}
+
+.uk-drawer-open {
+  touch-action: none;
+  width: 100vw;
+}
+
+.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);
+}
+
+.uk-drawer-content-wrapper {
+  position: absolute;
+  transition: var(--drawer-transition-duration) var(--ease-in-out);
+}
+
+.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;
+}
+
+.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:not(.uk-drawer-reveal) .uk-drawer-content-wrapper,
+.uk-drawer-right:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
+  width: var(--drawer-width);
+}
+.uk-drawer-left .uk-drawer-content-wrapper,
+.uk-drawer-right .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:not(.uk-drawer-reveal) .uk-drawer-content-wrapper,
+.uk-drawer-bottom:not(.uk-drawer-reveal) .uk-drawer-content-wrapper {
+  height: var(--drawer-height);
+}
+.uk-drawer-top .uk-drawer-content-wrapper,
+.uk-drawer-bottom .uk-drawer-content-wrapper {
+  max-height: 100vh;
+}
+
+/* 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);
+}
+
+.uk-drawer-container-push-left,
+.uk-drawer-container-reveal-left {
+  left: 0;
+  transition-property: left;
+  will-change: left;
+}
+.uk-drawer-container-push-left.uk-drawer-container-animation,
+.uk-drawer-container-reveal-left.uk-drawer-container-animation {
+  left: var(--drawer-width);
+}
+.uk-drawer-container-push-left.uk-drawer-container-animation.uk-drawer-container-large,
+.uk-drawer-container-reveal-left.uk-drawer-container-animation.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-push-right.uk-drawer-container-animation,
+.uk-drawer-container-reveal-right.uk-drawer-container-animation {
+  right: var(--drawer-width);
+}
+.uk-drawer-container-push-right.uk-drawer-container-animation.uk-drawer-container-large,
+.uk-drawer-container-reveal-right.uk-drawer-container-animation.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-push-top.uk-drawer-container-animation,
+.uk-drawer-container-reveal-top.uk-drawer-container-animation {
+  top: var(--drawer-height);
+}
+.uk-drawer-container-push-top.uk-drawer-container-animation.uk-drawer-container-large,
+.uk-drawer-container-reveal-top.uk-drawer-container-animation.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-push-bottom.uk-drawer-container-animation,
+.uk-drawer-container-reveal-bottom.uk-drawer-container-animation {
+  bottom: var(--drawer-height);
+}
+.uk-drawer-container-push-bottom.uk-drawer-container-animation.uk-drawer-container-large,
+.uk-drawer-container-reveal-bottom.uk-drawer-container-animation.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:not(.uk-drawer-large) .uk-drawer-content-wrapper,
+.uk-drawer-right.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper {
+  width: 0;
+}
+.uk-drawer-left.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper .uk-drawer-content,
+.uk-drawer-right.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper .uk-drawer-content {
+  width: var(--drawer-width);
+}
+.uk-drawer-left.uk-drawer-reveal:not(.uk-drawer-large).uk-drawer-open .uk-drawer-content-wrapper,
+.uk-drawer-right.uk-drawer-reveal:not(.uk-drawer-large).uk-drawer-open .uk-drawer-content-wrapper {
+  width: var(--drawer-width);
+}
+.uk-drawer-left.uk-drawer-reveal.uk-drawer-large .uk-drawer-content-wrapper .uk-drawer-content,
+.uk-drawer-right.uk-drawer-reveal.uk-drawer-large .uk-drawer-content-wrapper .uk-drawer-content {
+  width: var(--drawer-large-width);
+}
+.uk-drawer-left.uk-drawer-reveal.uk-drawer-large.uk-drawer-open .uk-drawer-content-wrapper,
+.uk-drawer-right.uk-drawer-reveal.uk-drawer-large.uk-drawer-open .uk-drawer-content-wrapper {
+  width: var(--drawer-large-width);
+}
+
+.uk-drawer-top.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper,
+.uk-drawer-bottom.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper {
+  height: 0;
+}
+.uk-drawer-top.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper .uk-drawer-content,
+.uk-drawer-bottom.uk-drawer-reveal:not(.uk-drawer-large) .uk-drawer-content-wrapper .uk-drawer-content {
+  height: var(--drawer-height);
+}
+.uk-drawer-top.uk-drawer-reveal:not(.uk-drawer-large).uk-drawer-open .uk-drawer-content-wrapper,
+.uk-drawer-bottom.uk-drawer-reveal:not(.uk-drawer-large).uk-drawer-open .uk-drawer-content-wrapper {
+  height: var(--drawer-height);
+}
+.uk-drawer-top.uk-drawer-reveal.uk-drawer-large .uk-drawer-content-wrapper .uk-drawer-content,
+.uk-drawer-bottom.uk-drawer-reveal.uk-drawer-large .uk-drawer-content-wrapper .uk-drawer-content {
+  height: var(--drawer-large-height);
+}
+.uk-drawer-top.uk-drawer-reveal.uk-drawer-large.uk-drawer-open .uk-drawer-content-wrapper,
+.uk-drawer-bottom.uk-drawer-reveal.uk-drawer-large.uk-drawer-open .uk-drawer-content-wrapper {
+  height: var(--drawer-large-height);
+}
+
+/* Fade */
+.uk-motion-drawer-fade-appear-active, .uk-motion-drawer-fade-enter-active, .uk-motion-drawer-fade-leave-active {
+  transition: all var(--drawer-transition-duration) linear;
+}
+.uk-motion-drawer-fade-appear, .uk-motion-drawer-fade-enter {
+  opacity: 0;
+}
+.uk-motion-drawer-fade-appear-active, .uk-motion-drawer-fade-enter-active {
+  opacity: 1;
+}
+.uk-motion-drawer-fade-leave {
+  opacity: 1;
+}
+.uk-motion-drawer-fade-leave-active {
+  opacity: 0;
+}
+
+/* Slide Left */
+.uk-motion-drawer-push-left,
+.uk-motion-drawer-slide-left {
+  will-change: transform;
+}
+.uk-motion-drawer-push-left-appear-active, .uk-motion-drawer-push-left-enter-active, .uk-motion-drawer-push-left-leave-active,
+.uk-motion-drawer-slide-left-appear-active,
+.uk-motion-drawer-slide-left-enter-active,
+.uk-motion-drawer-slide-left-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-push-left-appear-prepare, .uk-motion-drawer-push-left-enter-prepare, .uk-motion-drawer-push-left-leave-prepare,
+.uk-motion-drawer-slide-left-appear-prepare,
+.uk-motion-drawer-slide-left-enter-prepare,
+.uk-motion-drawer-slide-left-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-push-left-appear, .uk-motion-drawer-push-left-enter,
+.uk-motion-drawer-slide-left-appear,
+.uk-motion-drawer-slide-left-enter {
+  transform: translateX(-100%);
+}
+.uk-motion-drawer-push-left-appear-active, .uk-motion-drawer-push-left-enter-active,
+.uk-motion-drawer-slide-left-appear-active,
+.uk-motion-drawer-slide-left-enter-active {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-left-leave,
+.uk-motion-drawer-slide-left-leave {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-left-leave-active,
+.uk-motion-drawer-slide-left-leave-active {
+  transform: translateX(-100%) !important;
+}
+
+/* Slide Right */
+.uk-motion-drawer-push-right,
+.uk-motion-drawer-slide-right {
+  will-change: transform;
+}
+.uk-motion-drawer-push-right-appear-active, .uk-motion-drawer-push-right-enter-active, .uk-motion-drawer-push-right-leave-active,
+.uk-motion-drawer-slide-right-appear-active,
+.uk-motion-drawer-slide-right-enter-active,
+.uk-motion-drawer-slide-right-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-push-right-appear-prepare, .uk-motion-drawer-push-right-enter-prepare, .uk-motion-drawer-push-right-leave-prepare,
+.uk-motion-drawer-slide-right-appear-prepare,
+.uk-motion-drawer-slide-right-enter-prepare,
+.uk-motion-drawer-slide-right-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-push-right-appear, .uk-motion-drawer-push-right-enter,
+.uk-motion-drawer-slide-right-appear,
+.uk-motion-drawer-slide-right-enter {
+  transform: translateX(100%);
+}
+.uk-motion-drawer-push-right-appear-active, .uk-motion-drawer-push-right-enter-active,
+.uk-motion-drawer-slide-right-appear-active,
+.uk-motion-drawer-slide-right-enter-active {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-right-leave,
+.uk-motion-drawer-slide-right-leave {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-right-leave-active,
+.uk-motion-drawer-slide-right-leave-active {
+  transform: translateX(100%) !important;
+}
+
+/* Slide Top */
+.uk-motion-drawer-push-top,
+.uk-motion-drawer-slide-top {
+  will-change: transform;
+}
+.uk-motion-drawer-push-top-appear-active, .uk-motion-drawer-push-top-enter-active, .uk-motion-drawer-push-top-leave-active,
+.uk-motion-drawer-slide-top-appear-active,
+.uk-motion-drawer-slide-top-enter-active,
+.uk-motion-drawer-slide-top-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-push-top-appear-prepare, .uk-motion-drawer-push-top-enter-prepare, .uk-motion-drawer-push-top-leave-prepare,
+.uk-motion-drawer-slide-top-appear-prepare,
+.uk-motion-drawer-slide-top-enter-prepare,
+.uk-motion-drawer-slide-top-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-push-top-appear, .uk-motion-drawer-push-top-enter,
+.uk-motion-drawer-slide-top-appear,
+.uk-motion-drawer-slide-top-enter {
+  transform: translateY(-100%);
+}
+.uk-motion-drawer-push-top-appear-active, .uk-motion-drawer-push-top-enter-active,
+.uk-motion-drawer-slide-top-appear-active,
+.uk-motion-drawer-slide-top-enter-active {
+  transform: translateY(0);
+}
+.uk-motion-drawer-push-top-leave,
+.uk-motion-drawer-slide-top-leave {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-top-leave-active,
+.uk-motion-drawer-slide-top-leave-active {
+  transform: translateY(-100%) !important;
+}
+
+/* Slide Bottom */
+.uk-motion-drawer-push-bottom,
+.uk-motion-drawer-slide-bottom {
+  will-change: transform;
+}
+.uk-motion-drawer-push-bottom-appear-active, .uk-motion-drawer-push-bottom-enter-active, .uk-motion-drawer-push-bottom-leave-active,
+.uk-motion-drawer-slide-bottom-appear-active,
+.uk-motion-drawer-slide-bottom-enter-active,
+.uk-motion-drawer-slide-bottom-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-push-bottom-appear-prepare, .uk-motion-drawer-push-bottom-enter-prepare, .uk-motion-drawer-push-bottom-leave-prepare,
+.uk-motion-drawer-slide-bottom-appear-prepare,
+.uk-motion-drawer-slide-bottom-enter-prepare,
+.uk-motion-drawer-slide-bottom-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-push-bottom-appear, .uk-motion-drawer-push-bottom-enter,
+.uk-motion-drawer-slide-bottom-appear,
+.uk-motion-drawer-slide-bottom-enter {
+  transform: translateY(100%);
+}
+.uk-motion-drawer-push-bottom-appear-active, .uk-motion-drawer-push-bottom-enter-active,
+.uk-motion-drawer-slide-bottom-appear-active,
+.uk-motion-drawer-slide-bottom-enter-active {
+  transform: translateY(0);
+}
+.uk-motion-drawer-push-bottom-leave,
+.uk-motion-drawer-slide-bottom-leave {
+  transform: translateX(0);
+}
+.uk-motion-drawer-push-bottom-leave-active,
+.uk-motion-drawer-slide-bottom-leave-active {
+  transform: translateY(100%) !important;
+}
+
+/* Reveal Horizontal */
+.uk-motion-drawer-reveal-left,
+.uk-motion-drawer-reveal-right {
+  will-change: width;
+}
+.uk-motion-drawer-reveal-left-appear-active, .uk-motion-drawer-reveal-left-enter-active, .uk-motion-drawer-reveal-left-leave-active,
+.uk-motion-drawer-reveal-right-appear-active,
+.uk-motion-drawer-reveal-right-enter-active,
+.uk-motion-drawer-reveal-right-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-reveal-left-appear-prepare, .uk-motion-drawer-reveal-left-enter-prepare, .uk-motion-drawer-reveal-left-leave-prepare,
+.uk-motion-drawer-reveal-right-appear-prepare,
+.uk-motion-drawer-reveal-right-enter-prepare,
+.uk-motion-drawer-reveal-right-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-reveal-left-appear, .uk-motion-drawer-reveal-left-enter,
+.uk-motion-drawer-reveal-right-appear,
+.uk-motion-drawer-reveal-right-enter {
+  width: 0 !important;
+}
+.uk-motion-drawer-reveal-left-appear-active, .uk-motion-drawer-reveal-left-enter-active,
+.uk-motion-drawer-reveal-right-appear-active,
+.uk-motion-drawer-reveal-right-enter-active {
+  width: var(--drawer-width) !important;
+}
+.uk-motion-drawer-reveal-left-leave,
+.uk-motion-drawer-reveal-right-leave {
+  width: var(--drawer-width) !important;
+}
+.uk-motion-drawer-reveal-left-leave-active,
+.uk-motion-drawer-reveal-right-leave-active {
+  width: 0 !important;
+}
+
+/* Reveal Vertical */
+.uk-motion-drawer-reveal-top,
+.uk-motion-drawer-reveal-bottom {
+  will-change: height;
+}
+.uk-motion-drawer-reveal-top-appear-active, .uk-motion-drawer-reveal-top-enter-active, .uk-motion-drawer-reveal-top-leave-active,
+.uk-motion-drawer-reveal-bottom-appear-active,
+.uk-motion-drawer-reveal-bottom-enter-active,
+.uk-motion-drawer-reveal-bottom-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-motion-drawer-reveal-top-appear-prepare, .uk-motion-drawer-reveal-top-enter-prepare, .uk-motion-drawer-reveal-top-leave-prepare,
+.uk-motion-drawer-reveal-bottom-appear-prepare,
+.uk-motion-drawer-reveal-bottom-enter-prepare,
+.uk-motion-drawer-reveal-bottom-leave-prepare {
+  transition: none !important;
+}
+.uk-motion-drawer-reveal-top-appear, .uk-motion-drawer-reveal-top-enter,
+.uk-motion-drawer-reveal-bottom-appear,
+.uk-motion-drawer-reveal-bottom-enter {
+  height: 0 !important;
+}
+.uk-motion-drawer-reveal-top-appear-active, .uk-motion-drawer-reveal-top-enter-active,
+.uk-motion-drawer-reveal-bottom-appear-active,
+.uk-motion-drawer-reveal-bottom-enter-active {
+  height: var(--drawer-height) !important;
+}
+.uk-motion-drawer-reveal-top-leave,
+.uk-motion-drawer-reveal-bottom-leave {
+  height: var(--drawer-height) !important;
+}
+.uk-motion-drawer-reveal-top-leave-active,
+.uk-motion-drawer-reveal-bottom-leave-active {
+  height: 0 !important;
+}
+
+.uk-drawer-large .uk-motion-drawer-reveal-left,
+.uk-drawer-large .uk-motion-drawer-reveal-right {
+  will-change: width;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-appear-active, .uk-drawer-large .uk-motion-drawer-reveal-left-enter-active, .uk-drawer-large .uk-motion-drawer-reveal-left-leave-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-appear-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-enter-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-appear-prepare, .uk-drawer-large .uk-motion-drawer-reveal-left-enter-prepare, .uk-drawer-large .uk-motion-drawer-reveal-left-leave-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-right-appear-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-right-enter-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-right-leave-prepare {
+  transition: none !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-appear, .uk-drawer-large .uk-motion-drawer-reveal-left-enter,
+.uk-drawer-large .uk-motion-drawer-reveal-right-appear,
+.uk-drawer-large .uk-motion-drawer-reveal-right-enter {
+  width: 0 !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-appear-active, .uk-drawer-large .uk-motion-drawer-reveal-left-enter-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-appear-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-enter-active {
+  width: var(--drawer-large-width) !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-leave,
+.uk-drawer-large .uk-motion-drawer-reveal-right-leave {
+  width: var(--drawer-large-width) !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-left-leave-active,
+.uk-drawer-large .uk-motion-drawer-reveal-right-leave-active {
+  width: 0 !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom {
+  will-change: height;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-appear-active, .uk-drawer-large .uk-motion-drawer-reveal-top-enter-active, .uk-drawer-large .uk-motion-drawer-reveal-top-leave-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-appear-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-enter-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-leave-active {
+  transition: all var(--drawer-transition-duration);
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-appear-prepare, .uk-drawer-large .uk-motion-drawer-reveal-top-enter-prepare, .uk-drawer-large .uk-motion-drawer-reveal-top-leave-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-appear-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-enter-prepare,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-leave-prepare {
+  transition: none !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-appear, .uk-drawer-large .uk-motion-drawer-reveal-top-enter,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-appear,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-enter {
+  height: 0 !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-appear-active, .uk-drawer-large .uk-motion-drawer-reveal-top-enter-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-appear-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-enter-active {
+  height: var(--drawer-large-height) !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-leave,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-leave {
+  height: var(--drawer-large-height) !important;
+}
+.uk-drawer-large .uk-motion-drawer-reveal-top-leave-active,
+.uk-drawer-large .uk-motion-drawer-reveal-bottom-leave-active {
+  height: 0 !important;
+}
+
+.uk-drawer-mask {
+  background-color: var(--drawer-mask-background);
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.uk-drawer-animation .uk-drawer-mask {
+  pointer-events: auto;
+}
+
+/* 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);
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+.uk-drawer-close:first-child + * {
+  margin-top: 0;
+}
+
+/*
+ * Hover
+ */
+: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: rgba(0, 0, 0, 0.3);
+  --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: 5px;
+}

package/dist/assets/drop.css

@@ -0,0 +1,47 @@
+/* ========================================================================
+   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;
+}
+
+.uk-drop-mask.uk-active {
+  opacity: 1;
+}
+
+/* Grid modifiers
+ ========================================================================== */
+.uk-drop-stack .uk-drop-grid > * {
+  width: 100% !important;
+}
+
+:root {
+  --drop-mask-background: none;
+  --drop-margin: var(--global-margin);
+  --drop-width: 300px;
+  --drop-z-index: calc(var(--global-z-index) + 20);
+}