@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/position.css

@@ -0,0 +1,216 @@
+/* ========================================================================
+   Component: Position
+ ========================================================================== */
+/* Directions
+ ========================================================================== */
+/*
+ * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
+ */
+[class*=uk-position-top],
+[class*=uk-position-bottom],
+[class*=uk-position-left],
+[class*=uk-position-right],
+[class*=uk-position-center] {
+  box-sizing: border-box;
+  /* 1 */
+  max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
+  position: absolute !important;
+}
+
+/*
+ * Edges
+ * Don't use `width: 100%` because it's wrong if the parent has padding.
+ */
+.uk-position-top {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.uk-position-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.uk-position-left {
+  bottom: 0;
+  left: 0;
+  top: 0;
+}
+
+.uk-position-right {
+  bottom: 0;
+  right: 0;
+  top: 0;
+}
+
+/*
+ * Corners
+ */
+.uk-position-top-left {
+  left: 0;
+  top: 0;
+}
+
+.uk-position-top-right {
+  right: 0;
+  top: 0;
+}
+
+.uk-position-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.uk-position-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+/*
+ * Center
+ * 1. Fix text wrapping if content is larger than 50% of the container.
+ *    Using `max-content` requires `max-width` of 100% which is set generally.
+ */
+.uk-position-center {
+  --uk-position-translate-x: -50%;
+  --uk-position-translate-y: -50%;
+  left: calc(50% - var(--uk-position-margin-offset));
+  top: calc(50% - var(--uk-position-margin-offset));
+  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+  /* 1 */
+  width: max-content;
+}
+
+/* Vertical */
+[class*=uk-position-center-left],
+[class*=uk-position-center-right],
+.uk-position-center-vertical {
+  --uk-position-translate-y: -50%;
+  top: calc(50% - var(--uk-position-margin-offset));
+  transform: translate(0, var(--uk-position-translate-y));
+}
+
+.uk-position-center-left {
+  left: 0;
+}
+
+.uk-position-center-right {
+  right: 0;
+}
+
+.uk-position-center-vertical {
+  left: 0;
+  right: 0;
+}
+
+.uk-position-center-left-out {
+  right: 100%;
+  width: max-content;
+}
+
+.uk-position-center-right-out {
+  left: 100%;
+  width: max-content;
+}
+
+/* Horizontal */
+.uk-position-top-center,
+.uk-position-bottom-center,
+.uk-position-center-horizontal {
+  --uk-position-translate-x: -50%;
+  left: calc(50% - var(--uk-position-margin-offset));
+  transform: translate(var(--uk-position-translate-x), 0);
+  /* 1 */
+  width: max-content;
+}
+
+.uk-position-top-center {
+  top: 0;
+}
+
+.uk-position-bottom-center {
+  bottom: 0;
+}
+
+.uk-position-center-horizontal {
+  bottom: 0;
+  top: 0;
+}
+
+/*
+ * Cover
+ */
+.uk-position-cover {
+  inset: 0;
+  position: absolute;
+}
+
+/* Margin
+ ========================================================================== */
+.uk-position-small {
+  --uk-position-margin-offset: var(--position-small-margin);
+  margin: var(--position-small-margin);
+}
+
+.uk-position-medium {
+  --uk-position-margin-offset: var(--position-medium-margin);
+  margin: var(--position-medium-margin);
+}
+
+.uk-position-large {
+  --uk-position-margin-offset: var(--position-large-margin);
+  margin: var(--position-large-margin);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-position-large {
+    --uk-position-margin-offset: var(--position-large-margin-l);
+    margin: var(--position-large-margin-l);
+  }
+}
+/* Schemes
+ ========================================================================== */
+.uk-position-relative {
+  position: relative !important;
+}
+
+.uk-position-absolute {
+  position: absolute !important;
+}
+
+.uk-position-fixed {
+  position: fixed !important;
+}
+
+.uk-position-sticky {
+  position: sticky !important;
+}
+
+/* Layer
+ ========================================================================== */
+.uk-position-z-index {
+  z-index: 1;
+}
+
+.uk-position-z-index-zero {
+  z-index: 0;
+}
+
+.uk-position-z-index-negative {
+  z-index: -1;
+}
+
+.uk-position-z-index-high {
+  z-index: 990;
+}
+
+:root {
+  --uk-position-margin-offset: 0;
+  --position-small-margin: var(--global-small-gutter);
+  --position-medium-margin: var(--global-gutter);
+  --position-large-margin: var(--global-gutter);
+  --position-large-margin-l: 50px;
+}

package/dist/assets/print.css

@@ -0,0 +1,43 @@
+/* ========================================================================
+   Component: Print
+ ========================================================================== */
+@media print {
+  *, *::before, *::after {
+    background: transparent !important;
+    box-shadow: none !important;
+    color: black !important;
+    text-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  @page {
+    margin: 0.5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

package/dist/assets/progress.css

@@ -0,0 +1,79 @@
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+/*
+ * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 2. Remove default style
+ * 3. Behave like a block element
+ * 4. Remove borders in Firefox and Edge
+ * 5. Set background color for progress container in Firefox, IE11 and Edge
+ * 6. Style
+ */
+.uk-progress {
+  /* 2 */
+  appearance: none;
+  /* 5 */
+  background-color: var(--progress-background);
+  /* 4 */
+  border: 0;
+  /* 3 */
+  display: block;
+  height: var(--progress-height);
+  /* 6 */
+  margin-bottom: var(--progress-margin-vertical);
+  /* 1 */
+  vertical-align: baseline;
+  width: 100%;
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress {
+  margin-top: var(--progress-margin-vertical);
+}
+
+/*
+ * Remove animated circles for indeterminate state in IE11 and Edge
+ */
+.uk-progress:indeterminate {
+  color: transparent;
+}
+
+/*
+ * Progress container
+ * 2. Remove progress bar for indeterminate state in Firefox
+ */
+.uk-progress::-webkit-progress-bar {
+  background-color: var(--progress-background);
+}
+
+/* 2 */
+.uk-progress:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+
+/*
+ * Progress bar
+ * 1. Remove right border in IE11 and Edge
+ */
+.uk-progress::-webkit-progress-value {
+  background-color: var(--progress-bar-background);
+  transition: width 0.6s ease;
+}
+
+.uk-progress::-moz-progress-bar {
+  background-color: var(--progress-bar-background);
+}
+
+.uk-progress::-ms-fill {
+  background-color: var(--progress-bar-background);
+  /* 1 */
+  border: 0;
+  transition: width 0.6s ease;
+}
+
+:root {
+  --progress-height: 15px;
+  --progress-margin-vertical: var(--global-margin);
+  --progress-background: var(--global-muted-background);
+  --progress-bar-background: var(--global-primary-background);
+}

package/dist/assets/radio.css

@@ -0,0 +1,196 @@
+/* ========================================================================
+   Component: Radio
+ ========================================================================== */
+.uk-radio-wrapper {
+  cursor: pointer;
+  display: flex;
+  line-height: unset;
+  user-select: none;
+}
+.uk-radio-wrapper.uk-control {
+  background-color: var(--radio-control-background);
+}
+
+.uk-radio-wrapper .uk-radio {
+  border: 0;
+  display: inline-block;
+  line-height: 1;
+  margin: 0;
+  min-width: var(--radio-size);
+  outline: none;
+  overflow: visible;
+  position: relative;
+  top: 0;
+  vertical-align: sub;
+  white-space: nowrap;
+}
+
+.uk-radio-wrapper .uk-radio-input {
+  cursor: pointer;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.uk-radio-wrapper .uk-radio-inner {
+  background-color: var(--radio-background);
+  border: var(--radio-border-width) solid var(--radio-border);
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+  height: var(--radio-size);
+  left: 0;
+  position: relative;
+  top: 0;
+  transition: all var(--transition-duration);
+  width: var(--radio-size);
+}
+
+.uk-radio-wrapper .uk-radio-inner::after {
+  background-color: var(--radio-checked-icon-color);
+  border-radius: 50%;
+  content: " ";
+  display: block;
+  height: calc(var(--radio-size) / 2);
+  left: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+  opacity: 0;
+  position: absolute;
+  top: calc((var(--radio-size) - var(--radio-size) / 2) / 2 - var(--radio-border-width));
+  transform: scale(0);
+  transition: all var(--transition-duration) var(--ease-in-out-circ);
+  width: calc(var(--radio-size) / 2);
+}
+
+.uk-radio-wrapper .uk-radio-label {
+  line-height: var(--radio-size);
+  max-width: 100%;
+  overflow: hidden;
+  padding-left: var(--control-affix-margin);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uk-radio-wrapper:not(.uk-checked):hover .uk-radio-inner,
+.uk-radio:not(.uk-radio-checked):hover .uk-radio-inner {
+  border-color: var(--radio-hover-border);
+}
+
+.uk-radio-wrapper:not(.uk-disabled):hover .uk-radio::after,
+.uk-radio:not(.uk-radio-disabled):hover::after {
+  visibility: visible;
+}
+
+.uk-radio-checked::after {
+  animation: uk-wave-effect 0.36s var(--ease-in-out);
+  animation-fill-mode: both;
+  border: var(--radio-border-width) solid var(--radio-checked-border);
+  border-radius: 50%;
+  box-sizing: border-box;
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+
+.uk-radio-checked .uk-radio-inner {
+  background-color: var(--radio-checked-background);
+  border-color: var(--radio-checked-border);
+}
+
+.uk-radio-checked .uk-radio-inner::after {
+  opacity: 1;
+  transform: scale(1);
+  transition: all var(--transition-medium-fast-duration) var(--ease-in-out-circ);
+}
+
+.uk-radio-disabled {
+  cursor: not-allowed;
+}
+
+.uk-radio-disabled .uk-radio-label {
+  color: var(--control-placeholder-color);
+}
+
+.uk-radio-disabled .uk-radio-input {
+  cursor: not-allowed;
+}
+
+.uk-radio-disabled .uk-radio-inner {
+  background-color: transparent;
+  border-color: var(--radio-disabled-border);
+}
+
+.uk-radio-disabled.uk-radio-checked .uk-radio-inner::after {
+  animation-name: none;
+  background-color: var(--radio-disabled-icon-color);
+}
+
+/* Group
+ ========================================================================== */
+.uk-radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: var(--control-affix-margin);
+}
+
+.uk-radio-group-stack {
+  flex-direction: column;
+}
+
+/* Control
+ ========================================================================== */
+.uk-control-radio {
+  cursor: pointer;
+  padding-bottom: var(--control-medium-padding-vertical);
+  padding-top: var(--control-medium-padding-vertical);
+}
+
+.uk-control-radio.uk-checked {
+  background-color: var(--radio-checked-control-background);
+  border-color: var(--radio-checked-border);
+  color: var(--radio-checked-control-color);
+}
+
+.uk-control-radio.uk-checked:hover {
+  border-color: var(--radio-checked-border);
+}
+
+.uk-control-radio.uk-disabled {
+  background-color: var(--radio-disabled-background);
+  border-color: var(--radio-disabled-border);
+  cursor: not-allowed;
+}
+
+/* Right to Left Direction
+ ========================================================================== */
+[dir=rtl] .uk-radio-wrapper .uk-radio-label,
+.uk-radio-wrapper.uk-radio-rtl .uk-radio-label {
+  padding-left: 0;
+  padding-right: var(--control-affix-margin);
+}
+
+:root, ::after, ::before {
+  --radio-size: 20px;
+  --radio-background: var(--control-background);
+  --radio-border: var(--control-border);
+  --radio-border-width: var(--control-border-width);
+  --radio-hover-border: var(--control-hover-border);
+  --radio-focus-background: var(--control-focus-background);
+  --radio-focus-border: var(--control-focus-border);
+  --radio-checked-background: transparent;
+  --radio-checked-border: var(--global-primary-border);
+  --radio-checked-icon-color: var(--global-primary-background);
+  --radio-control-background: rgba(245.52, 245.52, 245.52, 0.45);
+  --radio-checked-control-background: rgba(30, 135, 240, 0.15);
+  --radio-checked-control-color: #1e87f0;
+  --radio-disabled-background: var(--control-disabled-background);
+  --radio-disabled-border: var(--control-disabled-border);
+  --radio-disabled-icon-color: var(--global-emphasis-color);
+}