@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/slider.css

@@ -0,0 +1,392 @@
+/* ========================================================================
+   Component: Slider
+ ========================================================================== */
+.uk-slider {
+  border-radius: var(--slider-border-radius);
+  box-sizing: border-box;
+  cursor: pointer;
+  height: var(--slider-height);
+  padding: var(--slider-padding-vertical) 0;
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  touch-action: none;
+  width: 100%;
+}
+
+.uk-slider * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* Rail
+ ========================================================================== */
+.uk-slider-rail {
+  background-color: var(--slider-rail-background);
+  border-radius: var(--slider-border-radius);
+  height: var(--slider-rail-height);
+  position: absolute;
+  width: 100%;
+}
+
+/* Track
+ ========================================================================== */
+.uk-slider-track,
+.uk-slider-tracks {
+  background-color: var(--slider-track-background);
+  border-radius: var(--slider-border-radius);
+  height: var(--slider-track-height);
+  position: absolute;
+}
+
+.uk-slider-track-draggable {
+  --offset: calc(var(--slider-padding-vertical) * -1);
+  background-clip: content-box;
+  border-bottom: var(--slider-padding-vertical) solid rgba(0, 0, 0, 0);
+  border-top: var(--slider-padding-vertical) solid rgba(0, 0, 0, 0);
+  box-sizing: content-box;
+  transform: translateY(var(--offset));
+  z-index: 1;
+}
+
+/* Handle
+ ========================================================================== */
+.uk-slider-handle {
+  background-clip: content-box;
+  background-color: var(--slider-handle-background);
+  border: var(--slider-handle-border-width) solid var(--slider-handle-border);
+  border-radius: 50%;
+  height: var(--slider-handle-height);
+  margin-top: var(--slider-handle-offset);
+  position: absolute;
+  touch-action: pan-x;
+  user-select: none;
+  width: var(--slider-handle-width);
+  z-index: 1;
+}
+
+.uk-slider-handle:hover {
+  background-color: var(--slider-handle-hover-background);
+  border-color: var(--slider-handle-hover-border);
+}
+
+.uk-slider-handle:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.uk-slider-handle:focus-visible {
+  border-color: var(--slider-handle-focus-border);
+  box-shadow: 0 0 0 3px var(--slider-handle-focus-box-shadow);
+}
+
+.uk-slider-handle-click-focused:focus {
+  border-color: var(--slider-handle-focus-border);
+  box-shadow: unset;
+}
+
+.uk-slider-handle:active {
+  background-clip: unset;
+  border-color: var(--slider-handle-active-border);
+  box-shadow: 0 0 5px var(--slider-handle-active-box-shadow);
+  cursor: grabbing;
+}
+
+.uk-slider-handle-dragging.uk-slider-handle-dragging.uk-slider-handle-dragging {
+  background-clip: unset;
+  border-color: var(--slider-handle-dragging-border);
+  box-shadow: 0 0 0 5px var(--slider-handle-dragging-box-shadow);
+  cursor: grabbing;
+}
+
+.uk-slider-handle-dragging.uk-slider-handle-dragging.uk-slider-handle-dragging-delete {
+  opacity: 0;
+}
+
+/* Mark
+ ========================================================================== */
+.uk-slider-mark {
+  font-size: var(--slider-mark-font-size);
+  left: 0;
+  position: absolute;
+  top: var(--slider-mark-offset);
+  width: 100%;
+}
+
+.uk-slider-mark-text {
+  color: var(--slider-mark-text-color);
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.uk-slider-mark-text-active {
+  color: var(--slider-mark-text-active-color);
+}
+
+/* Step
+ ========================================================================== */
+.uk-slider-step {
+  background: transparent;
+  height: var(--slider-step-height);
+  position: absolute;
+  width: 100%;
+}
+
+/* Dots
+ ========================================================================== */
+.uk-slider-dot {
+  background-clip: content-box;
+  background-color: var(--slider-dot-background);
+  border: var(--slider-dot-border-width) solid var(--slider-dot-border);
+  border-radius: 50%;
+  bottom: calc(var(--slider-dot-border-width) * -1);
+  cursor: pointer;
+  height: var(--slider-dot-height);
+  position: absolute;
+  vertical-align: middle;
+  width: var(--slider-dot-width);
+}
+
+.uk-slider-dot-active {
+  background-color: var(--slider-dot-active-background);
+  border-color: var(--slider-dot-active-border);
+}
+
+.uk-slider-dot-reverse {
+  margin-right: calc(var(--slider-dot-width) / -2);
+}
+
+/* Disabled state
+ ========================================================================== */
+.uk-slider-disabled {
+  opacity: 0.7;
+}
+
+.uk-slider-disabled .uk-slider-track {
+  background-color: var(--slider-track-disabled-background);
+}
+
+.uk-slider-disabled .uk-slider-handle,
+.uk-slider-disabled .uk-slider-dot {
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.uk-slider-disabled .uk-slider-handle {
+  background-color: var(--slider-handle-disabled-background);
+  border-color: var(--slider-handle-disabled-border);
+}
+
+.uk-slider-disabled .uk-slider-dot {
+  background-color: var(--slider-dot-disabled-background);
+  border-color: var(--slider-dot-disabled-border);
+}
+
+.uk-slider-disabled .uk-slider-mark-text,
+.uk-slider-disabled .uk-slider-dot {
+  cursor: not-allowed !important;
+}
+
+/* Vertical
+ ========================================================================== */
+.uk-slider-vertical {
+  height: 100%;
+  padding: 0 var(--slider-padding-horizontal);
+  width: var(--slider-width);
+}
+
+.uk-slider-vertical .uk-slider-rail {
+  height: 100%;
+  width: var(--slider-rail-width);
+}
+
+.uk-slider-vertical .uk-slider-track {
+  bottom: 0;
+  left: var(--slider-padding-horizontal);
+  width: var(--slider-track-width);
+}
+
+.uk-slider-vertical .uk-slider-track-draggable {
+  --offset: calc(var(--slider-padding-horizontal) * -1);
+  border-bottom: 0;
+  border-left: var(--slider-padding-horizontal) solid rgba(0, 0, 0, 0);
+  border-right: var(--slider-padding-horizontal) solid rgba(0, 0, 0, 0);
+  border-top: 0;
+  transform: translateX(var(--offset));
+}
+
+.uk-slider-vertical .uk-slider-handle {
+  margin-left: var(--slider-handle-offset);
+  margin-top: 0;
+  position: absolute;
+  touch-action: pan-y;
+  z-index: 1;
+}
+
+.uk-slider-vertical .uk-slider-mark {
+  height: 100%;
+  left: var(--slider-mark-offset);
+  top: 0;
+}
+
+.uk-slider-vertical .uk-slider-step {
+  height: 100%;
+  width: var(--slider-step-width);
+}
+
+.uk-slider-vertical .uk-slider-dot {
+  margin-left: calc(var(--slider-dot-border-width) * -1);
+}
+
+@keyframes uk-slider-tooltip-zoom-down-in {
+  0% {
+    opacity: 0;
+    transform: scale(0, 0);
+    transform-origin: 50% 100%;
+  }
+  100% {
+    transform: scale(1, 1);
+    transform-origin: 50% 100%;
+  }
+}
+@keyframes uk-slider-tooltip-zoom-down-out {
+  0% {
+    transform: scale(1, 1);
+    transform-origin: 50% 100%;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0, 0);
+    transform-origin: 50% 100%;
+  }
+}
+/* Tooltip
+ ========================================================================== */
+.uk-slider-tooltip {
+  box-sizing: border-box;
+  left: -9999px;
+  position: absolute;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  top: -9999px;
+  visibility: visible;
+}
+
+.uk-slider-tooltip * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.uk-slider-tooltip-hidden {
+  display: none;
+}
+
+.uk-slider-tooltip-placement-top {
+  padding: 4px 0 8px;
+}
+
+.uk-slider-tooltip-inner {
+  background-color: #6c6c6c;
+  border-radius: 6px;
+  box-shadow: 0 0 4px #d9d9d9;
+  color: #fff;
+  font-size: 12px;
+  height: 24px;
+  line-height: 1;
+  min-width: 24px;
+  padding: 6px 2px;
+  text-align: center;
+  text-decoration: none;
+}
+
+.uk-slider-tooltip-arrow {
+  border-color: transparent;
+  border-style: solid;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.uk-slider-tooltip-placement-top .uk-slider-tooltip-arrow {
+  border-top-color: #6c6c6c;
+  border-width: 4px 4px 0;
+  bottom: 4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.uk-slider-tooltip-zoom-down-enter,
+.uk-slider-tooltip-zoom-down-appear {
+  animation-duration: var(--animation-medium-fast-duration);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+  display: block !important;
+  transform: scale(0, 0);
+}
+
+.uk-slider-tooltip-zoom-down-leave {
+  animation-duration: var(--animation-medium-fast-duration);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: var(--ease-in-quint);
+  display: block !important;
+}
+
+.uk-slider-tooltip-zoom-down-enter.uk-slider-tooltip-zoom-down-enter-active,
+.uk-slider-tooltip-zoom-down-appear.uk-slider-tooltip-zoom-down-appear-active {
+  animation-name: uk-slider-tooltip-zoom-down-in;
+  animation-play-state: running;
+}
+
+.uk-slider-tooltip-zoom-down-leave.uk-slider-tooltip-zoom-down-leave-active {
+  animation-name: uk-slider-tooltip-zoom-down-out;
+  animation-play-state: running;
+}
+
+:root {
+  --slider-height: 14px;
+  --slider-width: 14px;
+  --slider-padding-horizontal: 5px;
+  --slider-padding-vertical: 5px;
+  --slider-border-radius: var(--global-border-radius);
+  --slider-rail-background: var(--global-default-background);
+  --slider-rail-height: 4px;
+  --slider-rail-width: 4px;
+  --slider-track-background: var(--global-primary-background);
+  --slider-track-height: 4px;
+  --slider-track-width: 4px;
+  --slider-track-disabled-background: var(--global-default-background);
+  --slider-handle-background: var(--global-default-background);
+  --slider-handle-border: var(--global-primary-border);
+  --slider-handle-hover-background: var(--global-default-background);
+  --slider-handle-hover-border: var(--global-primary-border);
+  --slider-handle-focus-border: var(--global-primary-border);
+  --slider-handle-active-border: var(--global-primary-border);
+  --slider-handle-dragging-border: var(--global-primary-border);
+  --slider-handle-disabled-background: var(--global-default-background);
+  --slider-handle-disabled-border: var(--global-border);
+  --slider-handle-focus-box-shadow: rgba(30, 135, 240, 0.08);
+  --slider-handle-active-box-shadow: rgba(30, 135, 240, 0.16);
+  --slider-handle-dragging-box-shadow: rgba(30, 135, 240, 0.24);
+  --slider-handle-border-width: 2px;
+  --slider-handle-offset: -5px;
+  --slider-handle-height: 14px;
+  --slider-handle-width: 14px;
+  --slider-mark-font-size: var(--global-xsmall-font-size);
+  --slider-mark-offset: 18px;
+  --slider-mark-text-color: var(--global-muted-color);
+  --slider-mark-text-active-color: var(--global-emphasis-color);
+  --slider-step-height: 4px;
+  --slider-step-width: 4px;
+  --slider-dot-background: var(--global-default-background);
+  --slider-dot-border: var(--global-border);
+  --slider-dot-border-width: 2px;
+  --slider-dot-active-background: var(--global-default-background);
+  --slider-dot-active-border: var(--global-primary-border);
+  --slider-dot-disabled-background: var(--global-default-background);
+  --slider-dot-disabled-border: var(--global-muted-border);
+  --slider-dot-height: 8px;
+  --slider-dot-width: 8px;
+}

package/dist/assets/spinner.css

@@ -0,0 +1,51 @@
+/* ========================================================================
+   Component: Spinner
+ ========================================================================== */
+/*
+ * Adopts `uk-icon`
+ */
+/* SVG
+ ========================================================================== */
+.uk-spinner > * {
+  animation: uk-spinner-rotate var(--spinner-duration) linear infinite;
+}
+
+@keyframes uk-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+/*
+ * Circle
+ */
+.uk-spinner > * > * {
+  animation: uk-spinner-dash var(--spinner-duration) var(--ease-in-out) infinite;
+  stroke-dasharray: 88px;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: var(--spinner-stroke-width);
+  transform-origin: center;
+  will-change: auto;
+}
+
+@keyframes uk-spinner-dash {
+  0% {
+    stroke-dashoffset: 88px;
+  }
+  50% {
+    stroke-dashoffset: 22px;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 88px;
+    transform: rotate(450deg);
+  }
+}
+:root {
+  --spinner-size: 30px;
+  --spinner-stroke-width: 2;
+  --spinner-duration: 1.4s;
+}

package/dist/assets/sticky.css

@@ -0,0 +1,31 @@
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+/*
+ * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
+ */
+.uk-sticky-fixed {
+  /* 1 */
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  margin: 0 !important;
+  z-index: var(--sticky-z-index);
+}
+
+/*
+ * Faster animations
+ */
+.uk-sticky[class*=uk-animation-] {
+  animation-duration: var(--sticky-animation-duration);
+}
+
+.uk-sticky.uk-animation-reverse {
+  animation-duration: var(--sticky-reverse-animation-duration);
+}
+
+:root {
+  --sticky-z-index: 980;
+  --sticky-animation-duration: 0.2s;
+  --sticky-reverse-animation-duration: 0.2s;
+}

package/dist/assets/subnav.css

@@ -0,0 +1,171 @@
+/* ========================================================================
+   Component: Subnav
+ ========================================================================== */
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
+ */
+.uk-subnav {
+  /* 2 */
+  align-items: center;
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+  list-style: none;
+  /* 3 */
+  margin-left: calc(var(--subnav-margin-horizontal) * -1);
+  /* 4 */
+  padding: 0;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+.uk-subnav > * {
+  /* 1 */
+  flex: none;
+  /* 2 */
+  padding-left: var(--subnav-margin-horizontal);
+  /* 3 */
+  position: relative;
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * Using `:first-child` instead of `a` to support `span` elements for text
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
+ */
+.uk-subnav > * > :first-child {
+  align-items: center;
+  /* 3 */
+  color: var(--subnav-item-color);
+  /* 2 */
+  column-gap: 0.25em;
+  /* 1 */
+  display: flex;
+}
+
+/* Hover + Focus */
+.uk-subnav > * > a:hover,
+.uk-subnav > * > a:focus {
+  color: var(--subnav-item-hover-color);
+  outline: none;
+  text-decoration: var(--subnav-item-hover-text-decoration);
+}
+
+/* Active */
+.uk-subnav > .uk-active > a {
+  color: var(--subnav-item-active-color);
+}
+
+/* Divider modifier
+ ========================================================================== */
+/*
+ * Set gutter
+ */
+.uk-subnav-divider {
+  margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
+}
+
+/*
+ * Align items and divider vertically
+ */
+.uk-subnav-divider > * {
+  align-items: center;
+  display: flex;
+}
+
+/*
+ * Divider
+ * 1. `nth-child` makes it also work without JS if it's only one row
+ */
+.uk-subnav-divider > ::before {
+  border-left: var(--subnav-divider-border-width) solid transparent;
+  content: "";
+  height: var(--subnav-divider-border-height);
+  margin-left: calc(var(--subnav-divider-margin-horizontal) - var(--subnav-margin-horizontal));
+  margin-right: var(--subnav-divider-margin-horizontal);
+}
+
+/* 1 */
+.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+  border-left-color: var(--subnav-divider-border);
+}
+
+/* Pill modifier
+ ========================================================================== */
+.uk-subnav-pill > * > :first-child {
+  background: var(--subnav-pill-item-background);
+  color: var(--subnav-pill-item-color);
+  padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
+}
+
+/* Hover + Focus */
+.uk-subnav-pill > * > a:hover,
+.uk-subnav-pill > * > a:focus {
+  background-color: var(--subnav-pill-item-hover-background);
+  color: var(--subnav-pill-item-hover-color);
+}
+
+/* OnClick */
+.uk-subnav-pill > * > a:active {
+  background-color: var(--subnav-pill-item-onclick-background);
+  color: var(--subnav-pill-item-onclick-color);
+}
+
+/* Active */
+.uk-subnav-pill > .uk-active > a {
+  background-color: var(--subnav-pill-item-active-background);
+  color: var(--subnav-pill-item-active-color);
+}
+
+/* Disabled
+ * The same for all style modifiers
+ ========================================================================== */
+.uk-subnav > .uk-disabled > a {
+  color: var(--subnav-item-disabled-color);
+}
+
+:root {
+  --subnav-margin-horizontal: 20px;
+  --subnav-item-color: var(--global-muted-color);
+  --subnav-item-hover-color: var(--global-color);
+  --subnav-item-hover-text-decoration: none;
+  --subnav-item-active-color: var(--global-emphasis-color);
+  --subnav-divider-margin-horizontal: 20px;
+  --subnav-divider-border-height: 1.5em;
+  --subnav-divider-border-width: var(--global-border-width);
+  --subnav-divider-border: var(--global-border);
+  --subnav-pill-item-padding-horizontal: 10px;
+  --subnav-pill-item-padding-vertical: 5px;
+  --subnav-pill-item-background: transparent;
+  --subnav-pill-item-color: #999;
+  --subnav-pill-item-hover-background: var(--global-muted-background);
+  --subnav-pill-item-hover-color: var(--global-color);
+  --subnav-pill-item-onclick-background: #f8f8f8;
+  --subnav-pill-item-onclick-color: #666;
+  --subnav-pill-item-active-background: var(--global-primary-background);
+  --subnav-pill-item-active-color: var(--global-inverse-color);
+  --subnav-item-disabled-color: var(--global-muted-color);
+  --inverse-subnav-item-color: var(--inverse-global-muted-color);
+  --inverse-subnav-item-hover-color: var(--inverse-global-color);
+  --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-subnav-divider-border: var(--inverse-global-border);
+  --inverse-subnav-pill-item-background: transparent;
+  --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
+  --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
+  --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
+  --inverse-subnav-pill-item-onclick-background: rgba(255, 255, 255, 0.1);
+  --inverse-subnav-pill-item-onclick-color: rgba(255, 255, 255, 0.7);
+  --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
+  --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
+  --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
+}

package/dist/assets/svg.css

@@ -0,0 +1,23 @@
+/* ========================================================================
+   Component: SVG
+ ========================================================================== */
+/*
+ * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 2. Set the fill and stroke color of all SVG elements to the current text color
+ */
+/* 1 */
+.uk-svg,
+.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
+  fill: currentColor;
+}
+
+.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
+  stroke: currentColor;
+}
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+.uk-svg {
+  transform: translate(0, 0);
+}