@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/animation.css

@@ -0,0 +1,387 @@
+/* ========================================================================
+   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, uk-scale-up;
+}
+
+.uk-animation-scale-down {
+  animation-name: uk-fade, uk-scale-down;
+}
+
+/*
+ * Slide
+ */
+.uk-animation-slide-top {
+  animation-name: uk-fade, uk-slide-top;
+}
+
+.uk-animation-slide-bottom {
+  animation-name: uk-fade, uk-slide-bottom;
+}
+
+.uk-animation-slide-left {
+  animation-name: uk-fade, uk-slide-left;
+}
+
+.uk-animation-slide-right {
+  animation-name: uk-fade, uk-slide-right;
+}
+
+/*
+ * Slide Small
+ */
+.uk-animation-slide-top-small {
+  animation-name: uk-fade, uk-slide-top-small;
+}
+
+.uk-animation-slide-bottom-small {
+  animation-name: uk-fade, uk-slide-bottom-small;
+}
+
+.uk-animation-slide-left-small {
+  animation-name: uk-fade, uk-slide-left-small;
+}
+
+.uk-animation-slide-right-small {
+  animation-name: uk-fade, uk-slide-right-small;
+}
+
+/*
+ * Slide Medium
+ */
+.uk-animation-slide-top-medium {
+  animation-name: uk-fade, uk-slide-top-medium;
+}
+
+.uk-animation-slide-bottom-medium {
+  animation-name: uk-fade, uk-slide-bottom-medium;
+}
+
+.uk-animation-slide-left-medium {
+  animation-name: uk-fade, uk-slide-left-medium;
+}
+
+.uk-animation-slide-right-medium {
+  animation-name: uk-fade, uk-slide-right-medium;
+}
+
+/*
+ * Kenburns
+ */
+.uk-animation-kenburns {
+  animation-duration: var(--animation-kenburns-duration);
+  animation-name: uk-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 animation based on the State of the Parent Element
+========================================================================== */
+/*
+ * The toggle is triggered on touch devices using `:focus` and tabindex
+ */
+.uk-animation-toggle:not(:hover, :focus) [class*=uk-animation-] {
+  animation-name: none;
+}
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+.uk-animation-toggle {
+  -webkit-tap-highlight-color: transparent; /* 1 */
+}
+
+/*
+ * 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;
+  }
+}
+/*
+ * Scale
+ */
+@keyframes uk-scale-up {
+  0% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes uk-scale-down {
+  0% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/*
+ * Slide
+ */
+@keyframes uk-slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes uk-slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/*
+ * Slide Small
+ */
+@keyframes uk-slide-top-small {
+  0% {
+    transform: translateY(calc(var(--animation-slide-small-translate) * -1));
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-bottom-small {
+  0% {
+    transform: translateY(calc(var(--animation-slide-small-translate) * -1));
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-left-small {
+  0% {
+    transform: translateX(calc(var(--animation-slide-small-translate) * -1));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes uk-slide-right-small {
+  0% {
+    transform: translateX(calc(var(--animation-slide-small-translate) * -1));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/*
+ * Slide Medium
+ */
+@keyframes uk-slide-top-medium {
+  0% {
+    transform: translateY(calc(var(--animation-slide-medium-translate) * -1));
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-bottom-medium {
+  0% {
+    transform: translateY(calc(var(--animation-slide-medium-translate) * -1));
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes uk-slide-left-medium {
+  0% {
+    transform: translateX(calc(var(--animation-slide-medium-translate) * -1));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes uk-slide-right-medium {
+  0% {
+    transform: translateX(calc(var(--animation-slide-medium-translate) * -1));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/*
+ * Kenburns
+ */
+@keyframes uk-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;
+  }
+}
+/*
+ * Wave
+ */
+@keyframes uk-wave-effect {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.6);
+  }
+}
+:root {
+  --animation-duration: 0.5s;
+  --animation-fade-duration: 0.8s;
+  --animation-stroke-duration: 2s;
+  --animation-kenburns-duration: 15s;
+  --animation-fast-duration: 0.1s;
+  --animation-medium-fast-duration: 0.2s;
+  --animation-slide-small-translate: 10px;
+  --animation-slide-medium-translate: 50px;
+  --ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+  --ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  --ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  --ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+  --ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  --ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+}

package/dist/assets/article.css

@@ -0,0 +1,51 @@
+/* ========================================================================
+   Component: Article
+ ========================================================================== */
+.uk-article {
+  display: flow-root;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-article > :last-child {
+  margin-bottom: 0;
+}
+
+/* Adjacent sibling
+ ========================================================================== */
+.uk-article + .uk-article {
+  margin-top: var(--article-margin-top);
+}
+
+/* Title
+ ========================================================================== */
+.uk-article-title {
+  font-size: var(--article-title-font-size);
+  line-height: var(--article-title-line-height);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-article-title {
+    font-size: var(--article-title-font-size-m);
+  }
+}
+/* Meta
+ ========================================================================== */
+.uk-article-meta {
+  color: var(--article-meta-color);
+  font-size: var(--article-meta-font-size);
+  line-height: var(--article-meta-line-height);
+}
+
+:root {
+  --article-margin-top: var(--global-large-margin);
+  --article-title-font-size-m: var(--global-2xlarge-font-size);
+  --article-title-font-size: calc(var(--article-title-font-size-m) * 0.85);
+  --article-title-line-height: 1.2;
+  --article-meta-font-size: var(--global-small-font-size);
+  --article-meta-line-height: 1.4;
+  --article-meta-color: var(--global-muted-color);
+  --inverse-article-meta-color: var(--inverse-global-muted-color);
+}

package/dist/assets/background.css

@@ -0,0 +1,209 @@
+/* ========================================================================
+   Component: Background
+ ========================================================================== */
+/* Color
+ ========================================================================== */
+.uk-background-default {
+  background-color: var(--default-background);
+}
+
+.uk-background-muted {
+  background-color: var(--muted-background);
+}
+
+.uk-background-primary {
+  background-color: var(--primary-background);
+}
+
+.uk-background-secondary {
+  background-color: var(--secondary-background);
+}
+
+.uk-background-tertiary {
+  background-color: var(--tertiary-background);
+}
+
+/* Size
+ ========================================================================== */
+.uk-background-cover,
+.uk-background-contain,
+.uk-background-width-1-1,
+.uk-background-height-1-1 {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.uk-background-cover {
+  background-size: cover;
+}
+
+.uk-background-contain {
+  background-size: contain;
+}
+
+.uk-background-width-1-1 {
+  background-size: 100%;
+}
+
+.uk-background-height-1-1 {
+  background-size: auto 100%;
+}
+
+/* Position
+ ========================================================================== */
+.uk-background-top-left {
+  background-position: 0 0;
+}
+
+.uk-background-top-center {
+  background-position: 50% 0;
+}
+
+.uk-background-top-right {
+  background-position: 100% 0;
+}
+
+.uk-background-center-left {
+  background-position: 0 50%;
+}
+
+.uk-background-center-center {
+  background-position: 50% 50%;
+}
+
+.uk-background-center-right {
+  background-position: 100% 50%;
+}
+
+.uk-background-bottom-left {
+  background-position: 0 100%;
+}
+
+.uk-background-bottom-center {
+  background-position: 50% 100%;
+}
+
+.uk-background-bottom-right {
+  background-position: 100% 100%;
+}
+
+/* Repeat
+ ========================================================================== */
+.uk-background-no-repeat {
+  background-repeat: no-repeat;
+}
+
+/* Attachment
+ ========================================================================== */
+/*
+ * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
+ */
+.uk-background-fixed {
+  /* 1 */
+  backface-visibility: hidden;
+  background-attachment: fixed;
+}
+
+/*
+ * Exclude touch devices because `fixed` doesn't work on iOS and Android
+ */
+@media (pointer: coarse) {
+  .uk-background-fixed {
+    background-attachment: scroll;
+  }
+}
+/* Image
+ ========================================================================== */
+/* Phone portrait and smaller */
+@media (max-width: 639px) {
+  .uk-background-image\@s {
+    background-image: none !important;
+  }
+}
+/* Phone landscape and smaller */
+@media (max-width: 959px) {
+  .uk-background-image\@m {
+    background-image: none !important;
+  }
+}
+/* Tablet landscape and smaller */
+@media (max-width: 1199px) {
+  .uk-background-image\@l {
+    background-image: none !important;
+  }
+}
+/* Desktop and smaller */
+@media (max-width: 1599px) {
+  .uk-background-image\@xl {
+    background-image: none !important;
+  }
+}
+/* Blend modes
+ ========================================================================== */
+.uk-background-blend-multiply {
+  background-blend-mode: multiply;
+}
+
+.uk-background-blend-screen {
+  background-blend-mode: screen;
+}
+
+.uk-background-blend-overlay {
+  background-blend-mode: overlay;
+}
+
+.uk-background-blend-darken {
+  background-blend-mode: darken;
+}
+
+.uk-background-blend-lighten {
+  background-blend-mode: lighten;
+}
+
+.uk-background-blend-color-dodge {
+  background-blend-mode: color-dodge;
+}
+
+.uk-background-blend-color-burn {
+  background-blend-mode: color-burn;
+}
+
+.uk-background-blend-hard-light {
+  background-blend-mode: hard-light;
+}
+
+.uk-background-blend-soft-light {
+  background-blend-mode: soft-light;
+}
+
+.uk-background-blend-difference {
+  background-blend-mode: difference;
+}
+
+.uk-background-blend-exclusion {
+  background-blend-mode: exclusion;
+}
+
+.uk-background-blend-hue {
+  background-blend-mode: hue;
+}
+
+.uk-background-blend-saturation {
+  background-blend-mode: saturation;
+}
+
+.uk-background-blend-color {
+  background-blend-mode: color;
+}
+
+.uk-background-blend-luminosity {
+  background-blend-mode: luminosity;
+}
+
+:root {
+  --default-background: var(--global-default-background);
+  --muted-background: var(--global-muted-background);
+  --primary-background: var(--global-primary-background);
+  --secondary-background: var(--global-secondary-background);
+  --tertiary-background: var(--global-tertiary-background);
+}

package/dist/assets/badge.css

@@ -0,0 +1,46 @@
+/* ========================================================================
+   Component: Badge
+ ========================================================================== */
+/*
+ * 1. Style
+ * 2. Center child vertically and horizontally
+ */
+.uk-badge {
+  align-items: center; /* 2 */
+  background: var(--badge-background); /* 1 */
+  border-radius: var(--badge-border-radius);
+  box-sizing: border-box;
+  color: var(--badge-color); /* 1 */
+  display: inline-flex; /* 2 */
+  font-size: var(--badge-font-size); /* 1 */
+  height: var(--badge-size);
+  justify-content: center; /* 2 */
+  line-height: 0;
+  min-width: var(--badge-size);
+  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
+  vertical-align: middle;
+}
+
+/*
+ * Required for `a`
+ */
+.uk-badge:hover,
+.uk-badge:focus {
+  color: var(--badge-hover-color);
+  outline: none;
+  text-decoration: none;
+}
+
+:root {
+  --badge-size: 22px;
+  --badge-padding-vertical: 0;
+  --badge-padding-horizontal: 5px;
+  --badge-border-radius: 500px;
+  --badge-background: var(--global-primary-background);
+  --badge-color: var(--global-inverse-color);
+  --badge-font-size: var(--global-small-font-size);
+  --badge-hover-color: var(--global-inverse-color);
+  --inverse-badge-background: var(--inverse-global-primary-background);
+  --inverse-badge-color: var(--inverse-global-inverse-color);
+  --inverse-badge-hover-color: var(--inverse-global-inverse-color);
+}