@broxus/react-uikit 0.1.0

package/dist/cjs/styles/modal.scss

@@ -0,0 +1 @@
+@import '../components/Modal/index.scss';

package/dist/cjs/styles/motion.scss

@@ -0,0 +1,367 @@
+// Name:            Motion
+// Description:     Utilities for keyframe motions
+//
+// Component:       `uk-motion-*`
+//
+// Modifiers:       `uk-motion-collapse`
+//                  `uk-motion-slide-up`
+//                  `uk-motion-slide-down`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Motion
+ ========================================================================== */
+
+[class*='uk-motion-']:not(.uk-motion-collapse, .uk-motion-zoom) {
+    animation-duration: var(--animation-medium-fast-duration);
+    animation-fill-mode: both;
+}
+
+/* Motions
+ ========================================================================== */
+
+/*
+ * Collapse
+ */
+
+.uk-motion-collapse {
+    overflow: hidden;
+    transition: height var(--transition-medium-fast-duration) var(--ease-in-out),
+        opacity var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+/*
+ * Zoom
+ */
+
+.uk-motion-zoom {
+    &-enter,
+    &-appear {
+        animation-duration: var(--animation-medium-fast-duration);
+        animation-fill-mode: both;
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-out-circ);
+        opacity: 0;
+        transform: none;
+        user-select: none;
+    }
+
+    &-leave {
+        animation-duration: var(--animation-medium-fast-duration);
+        animation-fill-mode: both;
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-out-circ);
+    }
+
+    &-enter.uk-motion-zoom-enter-active,
+    &-appear.uk-motion-zoom-appear-active {
+        animation-name: uk-scale-zoom-in;
+        animation-play-state: running;
+    }
+
+    &-leave.uk-motion-zoom-leave-active {
+        animation-name: uk-scale-zoom-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+
+/*
+ * Fade
+ */
+
+.uk-motion-fade {
+    animation-duration: var(--animation-fade-duration);
+
+    &-enter,
+    &-appear {
+        animation-timing-function: linear;
+        opacity: 0;
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-fade;
+        animation-play-state: running;
+    }
+
+    &-leave {
+        animation-play-state: paused;
+        animation-timing-function: linear;
+    }
+
+    &-leave-active {
+        animation-direction: reverse;
+        animation-name: uk-fade;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+/*
+ * Slide Up
+ */
+
+.uk-motion-slide-up {
+    &-enter,
+    &-appear {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-out-quint);
+        opacity: 0;
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-slide-up-in;
+        animation-play-state: running;
+    }
+
+    &-leave {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+    }
+
+    &-leave-active {
+        animation-name: uk-slide-up-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+/*
+ * Slide Down
+ */
+
+.uk-motion-slide-down {
+    &-enter,
+    &-appear {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-out-quint);
+        opacity: 0;
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-slide-down-in;
+        animation-play-state: running;
+    }
+
+    &-leave {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+    }
+
+    &-leave-active {
+        animation-name: uk-slide-down-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+/*
+ * Slide Left
+ */
+
+.uk-motion-slide-left {
+    &-enter,
+    &-appear {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-out-quint);
+        opacity: 0;
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-slide-left-in;
+        animation-play-state: running;
+    }
+
+    &-leave {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+    }
+
+    &-leave-active {
+        animation-name: uk-slide-left-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+/*
+ * Slide Right
+ */
+
+.uk-motion-slide-right {
+    &-enter,
+    &-appear {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-out-quint);
+        opacity: 0;
+    }
+
+    &-enter-active,
+    &-appear-active {
+        animation-name: uk-slide-right-in;
+        animation-play-state: running;
+    }
+
+    &-leave {
+        animation-play-state: paused;
+        animation-timing-function: var(--ease-in-quint);
+    }
+
+    &-leave-active {
+        animation-name: uk-slide-right-out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+
+/* Keyframes used by motion classes
+ ========================================================================== */
+
+@keyframes uk-slide-up-in {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transform-origin: 0 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+        transform-origin: 0 0;
+    }
+}
+
+@keyframes uk-slide-up-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+        transform-origin: 0 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transform-origin: 0 0;
+    }
+}
+
+@keyframes uk-slide-down-in {
+    0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transform-origin: 100% 100%;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+        transform-origin: 100% 100%;
+    }
+}
+
+@keyframes uk-slide-down-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+        transform-origin: 100% 100%;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transform-origin: 100% 100%;
+    }
+}
+
+@keyframes uk-slide-left-in {
+    0% {
+        opacity: 0;
+        transform: scaleX(0.8);
+        transform-origin: 0 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+    }
+}
+
+@keyframes uk-slide-left-out {
+    0% {
+        opacity: 1;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleX(0.8);
+        transform-origin: 0 0;
+    }
+}
+
+@keyframes uk-slide-right-in {
+    0% {
+        opacity: 0;
+        transform: scaleX(0.8);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleX(1);
+        transform-origin: 100% 0;
+    }
+}
+
+@keyframes uk-slide-right-out {
+    0% {
+        opacity: 1;
+        transform: scaleX(1);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleX(0.8);
+        transform-origin: 100% 0;
+    }
+}
+
+@keyframes uk-scale-zoom-in {
+    0% {
+        opacity: 0;
+        transform: scale(0, 0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1, 1);
+    }
+}
+
+@keyframes uk-scale-zoom-out {
+    0% {
+        transform: scale(1, 1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(0, 0);
+    }
+}

package/dist/cjs/styles/nav.scss

@@ -0,0 +1 @@
+@import '../components/Nav/index.scss';

package/dist/cjs/styles/navbar.scss

@@ -0,0 +1 @@
+@import '../components/Navbar/index.scss';

package/dist/cjs/styles/overlay.scss

@@ -0,0 +1,111 @@
+// Name:            Overlay
+// Description:     Component to create content areas overlaying an image
+//
+// Component:       `uk-overlay`
+//
+// Adopted:         `uk-overlay-icon`
+//
+// Modifier:        `uk-overlay-default`
+//                  `uk-overlay-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Overlay
+ ========================================================================== */
+
+.uk-overlay {
+    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
+    @if mixin-exists(hook-overlay) {
+        @include hook-overlay;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-overlay > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Icon
+ ========================================================================== */
+
+.uk-overlay-icon {
+    @if mixin-exists(hook-overlay-icon) {
+        @include hook-overlay-icon;
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-overlay-default {
+    background: var(--overlay-default-background);
+    @if mixin-exists(hook-overlay-default) {
+        @include hook-overlay-default;
+    }
+}
+
+/*
+ * Primary
+ */
+
+.uk-overlay-primary {
+    background: var(--overlay-primary-background);
+    @if mixin-exists(hook-overlay-primary) {
+        @include hook-overlay-primary;
+    }
+}
+
+// Color Mode
+@if $overlay-primary-color-mode == light {
+    .uk-overlay-primary {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $overlay-primary-color-mode == dark {
+    .uk-overlay-primary {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-overlay-misc) {
+    @include hook-overlay-misc;
+}
+
+// @mixin hook-overlay(){}
+// @mixin hook-overlay-icon(){}
+// @mixin hook-overlay-default(){}
+// @mixin hook-overlay-primary(){}
+// @mixin hook-overlay-misc(){}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --overlay-padding-horizontal: var(--global-gutter);
+    --overlay-padding-vertical: var(--global-gutter);
+    --overlay-default-background: fade($global-background, 80%);
+    --overlay-primary-background: fade($global-secondary-background, 80%);
+}

package/dist/cjs/styles/padding.scss

@@ -0,0 +1,89 @@
+// Name:            Padding
+// Description:     Utilities for padding
+//
+// Component:       `uk-padding`
+//                  `uk-padding-large`
+//                  `uk-padding-remove-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Padding
+ ========================================================================== */
+
+.uk-padding { padding: var(--padding); }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-padding { padding: var(--padding-l); }
+}
+
+
+/* Small
+ ========================================================================== */
+
+.uk-padding-small { padding: var(--small-padding); }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-padding-large { padding: var(--large-padding); }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-padding-large { padding: var(--large-padding-l); }
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-padding-remove { padding: 0 !important; }
+
+.uk-padding-remove-top { padding-top: 0 !important; }
+
+.uk-padding-remove-bottom { padding-bottom: 0 !important; }
+
+.uk-padding-remove-left { padding-left: 0 !important; }
+
+.uk-padding-remove-right { padding-right: 0 !important; }
+
+.uk-padding-remove-vertical {
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+}
+
+.uk-padding-remove-horizontal {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-padding-misc) {
+    @include hook-padding-misc;
+}
+
+// @mixin hook-padding-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --padding: var(--global-gutter);
+    --padding-l: var(--global-medium-gutter);
+    --small-padding: var(--global-small-gutter);
+    --large-padding: var(--global-gutter);
+    --large-padding-l: var(--global-large-gutter);
+}