@broxus/react-uikit 0.1.0

package/dist/cjs/styles/animation.scss

@@ -0,0 +1,479 @@
+// Name:            Animation
+// Description:     Utilities for keyframe animations
+//
+// Component:       `uk-animation-*`
+//
+// Modifiers:       `uk-animation-fade`
+//                  `uk-animation-scale-up`
+//                  `uk-animation-scale-down`
+//                  `uk-animation-slide-top-*`
+//                  `uk-animation-slide-bottom-*`
+//                  `uk-animation-slide-left-*`
+//                  `uk-animation-slide-right-*`
+//                  `uk-animation-kenburns`
+//                  `uk-animation-shake`
+//                  `uk-animation-stroke`
+//                  `uk-animation-reverse`
+//                  `uk-animation-fast`
+//
+// Sub-objects:     `uk-animation-toggle`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Animation
+ ========================================================================== */
+
+[class*='uk-animation-'] {
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+    animation-timing-function: var(--ease-out);
+}
+
+
+/* Animations
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+.uk-animation-fade {
+    animation-duration: var(--animation-fade-duration);
+    animation-name: uk-fade;
+    animation-timing-function: linear;
+}
+
+/*
+ * Scale
+ */
+
+.uk-animation-scale-up { animation-name: uk-fade-scale-02; }
+
+.uk-animation-scale-down { animation-name: uk-fade-scale-18; }
+
+/*
+ * Slide
+ */
+
+.uk-animation-slide-top { animation-name: uk-fade-top; }
+
+.uk-animation-slide-bottom { animation-name: uk-fade-bottom; }
+
+.uk-animation-slide-left { animation-name: uk-fade-left; }
+
+.uk-animation-slide-right { animation-name: uk-fade-right; }
+
+/*
+ * Slide Small
+ */
+
+.uk-animation-slide-top-small { animation-name: uk-fade-top-small; }
+
+.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; }
+
+.uk-animation-slide-left-small { animation-name: uk-fade-left-small; }
+
+.uk-animation-slide-right-small { animation-name: uk-fade-right-small; }
+
+/*
+ * Slide Medium
+ */
+
+.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; }
+
+.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; }
+
+.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; }
+
+.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; }
+
+/*
+ * Kenburns
+ */
+
+.uk-animation-kenburns {
+    animation-duration: var(--animation-kenburns-duration);
+    animation-name: uk-scale-kenburns;
+}
+
+/*
+ * Shake
+ */
+
+.uk-animation-shake { animation-name: uk-shake; }
+
+/*
+ * SVG Stroke
+ * The `--uk-animation-stroke` custom property contains the longest path length.
+ * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
+ * All strokes are animated by the same pace and doesn't end simultaneously.
+ * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
+ */
+
+.uk-animation-stroke {
+    animation-duration: var(--animation-stroke-duration);
+    animation-name: uk-stroke;
+    stroke-dasharray: var(--uk-animation-stroke);
+}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-animation-reverse {
+    animation-direction: reverse;
+    animation-timing-function: var(--ease-in);
+}
+
+
+/* Duration modifier
+ ========================================================================== */
+
+.uk-animation-fast { animation-duration: var(--animation-fast-duration); }
+
+.uk-animation-medium-fast { animation-duration: var(--animation-medium-fast-duration); }
+
+
+/* Toggle (Hover + Focus)
+========================================================================== */
+
+/*
+ * The toggle is triggered on touch devices using `:focus` and tabindex
+ */
+
+.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-animation-toggle {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+
+.uk-animation-toggle:focus { outline: none; }
+
+
+/* Keyframes used by animation classes
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+@keyframes uk-fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/*
+ * Slide Top
+ */
+
+@keyframes uk-fade-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom
+ */
+
+@keyframes uk-fade-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left
+ */
+
+@keyframes uk-fade-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right
+ */
+
+@keyframes uk-fade-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Top Small
+ */
+
+@keyframes uk-fade-top-small {
+    0% {
+        opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom Small
+ */
+
+@keyframes uk-fade-bottom-small {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--animation-slide-small-translate));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left Small
+ */
+
+@keyframes uk-fade-left-small {
+    0% {
+        opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right Small
+ */
+
+@keyframes uk-fade-right-small {
+    0% {
+        opacity: 0;
+        transform: translateX(var(--animation-slide-small-translate));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Top Medium
+ */
+
+@keyframes uk-fade-top-medium {
+    0% {
+        opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Bottom Medium
+ */
+
+@keyframes uk-fade-bottom-medium {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--animation-slide-medium-translate));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/*
+ * Slide Left Medium
+ */
+
+@keyframes uk-fade-left-medium {
+    0% {
+        opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Slide Right Medium
+ */
+
+@keyframes uk-fade-right-medium {
+    0% {
+        opacity: 0;
+        transform: translateX(var(--animation-slide-medium-translate));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/*
+ * Scale Up
+ */
+
+@keyframes uk-fade-scale-02 {
+    0% {
+        opacity: 0;
+        transform: scale(0.2);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*
+ * Scale Down
+ */
+
+@keyframes uk-fade-scale-18 {
+    0% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*
+ * Kenburns
+ */
+
+@keyframes uk-scale-kenburns {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.2); }
+}
+
+/*
+ * Shake
+ */
+
+@keyframes uk-shake {
+    0%,
+    100% { transform: translateX(0); }
+    10% { transform: translateX(-9px); }
+    20% { transform: translateX(8px); }
+    30% { transform: translateX(-7px); }
+    40% { transform: translateX(6px); }
+    50% { transform: translateX(-5px); }
+    60% { transform: translateX(4px); }
+    70% { transform: translateX(-3px); }
+    80% { transform: translateX(2px); }
+    90% { transform: translateX(-1px); }
+}
+
+/*
+ * Stroke
+ */
+
+@keyframes uk-stroke {
+    0% { stroke-dashoffset: var(--uk-animation-stroke); }
+    100% { stroke-dashoffset: 0; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-animation-misc) {
+    @include hook-animation-misc();
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --animation-duration: #{$animation-duration};
+    --animation-fade-duration: #{$animation-fade-duration};
+    --animation-stroke-duration: #{$animation-stroke-duration};
+    --animation-kenburns-duration: #{$animation-kenburns-duration};
+    --animation-fast-duration: #{$animation-fast-duration};
+    --animation-medium-fast-duration: #{$animation-medium-fast-duration};
+    --animation-slide-small-translate: #{$animation-slide-small-translate};
+    --animation-slide-medium-translate: #{$animation-slide-medium-translate};
+    --ease-base-out: #{$ease-base-out};
+    --ease-base-in: #{$ease-base-in};
+    --ease-out: #{$ease-out};
+    --ease-in: #{$ease-in};
+    --ease-in-out: #{$ease-in-out};
+    --ease-out-back: #{$ease-out-back};
+    --ease-in-back: #{$ease-in-back};
+    --ease-in-out-back: #{$ease-in-out-back};
+    --ease-out-circ: #{$ease-out-circ};
+    --ease-in-circ: #{$ease-in-circ};
+    --ease-in-out-circ: #{$ease-in-out-circ};
+    --ease-out-quint: #{$ease-out-quint};
+    --ease-in-quint: #{$ease-in-quint};
+    --ease-in-out-quint: #{$ease-in-out-quint};
+}

package/dist/cjs/styles/article.scss

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