@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/text.css

@@ -0,0 +1,385 @@
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+/* Style modifiers
+ ========================================================================== */
+.uk-text-lead {
+  color: var(--text-lead-color);
+  font-size: var(--text-lead-font-size);
+  line-height: var(--text-lead-line-height);
+}
+
+.uk-text-meta {
+  color: var(--text-meta-color);
+  font-size: var(--text-meta-font-size);
+  line-height: var(--text-meta-line-height);
+}
+
+.uk-text-base {
+  color: var(--text-base-color);
+  font-size: var(--text-base-font-size);
+  line-height: var(--text-base-line-height);
+}
+
+/* Size modifiers
+ ========================================================================== */
+.uk-text-xsmall {
+  font-size: var(--text-xsmall-font-size);
+  line-height: var(--text-xsmall-line-height);
+}
+
+.uk-text-small {
+  font-size: var(--text-small-font-size);
+  line-height: var(--text-small-line-height);
+}
+
+.uk-text-large {
+  font-size: var(--text-large-font-size);
+  line-height: var(--text-large-line-height);
+}
+
+.uk-text-default {
+  font-size: var(--global-font-size);
+  line-height: var(--global-line-height);
+}
+
+/* Weight modifier
+ ========================================================================== */
+.uk-text-thin {
+  font-weight: 100;
+}
+
+.uk-text-light {
+  font-weight: 300;
+}
+
+.uk-text-normal {
+  font-weight: 400;
+}
+
+.uk-text-medium {
+  font-weight: 500;
+}
+
+.uk-text-semibold {
+  font-weight: 600;
+}
+
+.uk-text-bold {
+  font-weight: 700;
+}
+
+.uk-text-lighter {
+  font-weight: lighter;
+}
+
+.uk-text-bolder {
+  font-weight: bolder;
+}
+
+/* Style modifier
+ ========================================================================== */
+.uk-text-italic {
+  font-style: italic;
+}
+
+/* Transform modifier
+ ========================================================================== */
+.uk-text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.uk-text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.uk-text-lowercase {
+  text-transform: lowercase !important;
+}
+
+/* Decoration modifier
+ ========================================================================== */
+.uk-text-decoration-none {
+  text-decoration: none !important;
+}
+
+/* Color modifiers
+ ========================================================================== */
+.uk-text-muted {
+  color: var(--text-muted-color) !important;
+}
+
+.uk-text-emphasis {
+  color: var(--text-emphasis-color) !important;
+}
+
+.uk-text-primary {
+  color: var(--text-primary-color) !important;
+}
+
+.uk-text-secondary {
+  color: var(--text-secondary-color) !important;
+}
+
+.uk-text-tertiary {
+  color: var(--text-tertiary-color) !important;
+}
+
+.uk-text-success {
+  color: var(--text-success-color) !important;
+}
+
+.uk-text-warning {
+  color: var(--text-warning-color) !important;
+}
+
+.uk-text-danger {
+  color: var(--text-danger-color) !important;
+}
+
+/* Background modifier
+ ========================================================================== */
+/*
+ * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
+ *    Default color is set to transparent
+ * 2. Container fits the text
+ * 3. Fallback color for IE11
+ */
+.uk-text-background {
+  /* 1 */
+  -webkit-background-clip: text;
+  /* 3 */
+  color: var(--text-background-color) !important;
+  /* 2 */
+  display: inline-block;
+}
+
+@supports (-webkit-background-clip: text) {
+  .uk-text-background {
+    background-color: var(--text-background-color);
+    color: transparent !important;
+  }
+}
+/* Loading modifier
+ ========================================================================== */
+.uk-text-loading {
+  animation: uk-text-loading 1.65s infinite both linear;
+  -webkit-background-clip: text;
+  background-size: 200% 100%;
+  display: inline-block;
+  position: relative;
+  -webkit-text-fill-color: transparent;
+}
+
+@supports (-webkit-background-clip: text) {
+  .uk-text-loading {
+    background-image: linear-gradient(90deg, var(--text-loading-color) 25%, var(--text-loading-emphasis-color) 50%, var(--text-loading-color) 75%);
+    color: transparent !important;
+  }
+  .uk-text-muted.uk-text-loading,
+  .uk-text-muted .uk-text-loading {
+    background-image: linear-gradient(90deg, var(--text-muted-color) 25%, var(--text-base-color) 50%, var(--text-muted-color) 75%);
+  }
+  .uk-text-primary.uk-text-loading,
+  .uk-text-primary .uk-text-loading {
+    --primary-muted-color: color-mix(in sRGB, var(--text-primary-color) 50%, transparent);
+    background-image: linear-gradient(90deg, var(--text-primary-color) 25%, var(--primary-muted-color) 50%, var(--text-primary-color) 75%);
+  }
+  .uk-text-secondary.uk-text-loading,
+  .uk-text-secondary .uk-text-loading {
+    --secondary-muted-color: color-mix(in sRGB, var(--text-secondary-color) 50%, transparent);
+    background-image: linear-gradient(90deg, var(--text-secondary-color) 25%, var(--secondary-muted-color) 50%, var(--text-secondary-color) 75%);
+  }
+  .uk-text-tertiary.uk-text-loading,
+  .uk-text-tertiary .uk-text-loading {
+    --tertiary-muted-color: color-mix(in sRGB, var(--text-tertiary-color) 50%, transparent);
+    background-image: linear-gradient(90deg, var(--text-tertiary-color) 25%, var(--tertiary-muted-color) 50%, var(--text-tertiary-color) 75%);
+  }
+  .uk-text-warning.uk-text-loading,
+  .uk-text-warning .uk-text-loading {
+    --warning-muted-color: color-mix(in sRGB, var(--text-warning-color) 50%, transparent);
+    background-image: linear-gradient(90deg, var(--text-warning-color) 25%, var(--warning-muted-color) 50%, var(--text-warning-color) 75%);
+  }
+  .uk-text-danger.uk-text-loading,
+  .uk-text-danger .uk-text-loading {
+    --danger-muted-color: color-mix(in sRGB, var(--text-danger-color) 50%, transparent);
+    background-image: linear-gradient(90deg, var(--text-danger-color) 25%, var(--danger-muted-color) 50%, var(--text-danger-color) 75%);
+  }
+}
+@keyframes uk-text-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+/* Alignment modifiers
+ ========================================================================== */
+.uk-text-left {
+  text-align: left !important;
+}
+
+.uk-text-right {
+  text-align: right !important;
+}
+
+.uk-text-center {
+  text-align: center !important;
+}
+
+.uk-text-justify {
+  text-align: justify !important;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-text-left\@s {
+    text-align: left !important;
+  }
+  .uk-text-right\@s {
+    text-align: right !important;
+  }
+  .uk-text-center\@s {
+    text-align: center !important;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-text-left\@m {
+    text-align: left !important;
+  }
+  .uk-text-right\@m {
+    text-align: right !important;
+  }
+  .uk-text-center\@m {
+    text-align: center !important;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-text-left\@l {
+    text-align: left !important;
+  }
+  .uk-text-right\@l {
+    text-align: right !important;
+  }
+  .uk-text-center\@l {
+    text-align: center !important;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-text-left\@xl {
+    text-align: left !important;
+  }
+  .uk-text-right\@xl {
+    text-align: right !important;
+  }
+  .uk-text-center\@xl {
+    text-align: center !important;
+  }
+}
+/*
+ * Vertical
+ */
+.uk-text-top {
+  vertical-align: top !important;
+}
+
+.uk-text-middle {
+  vertical-align: middle !important;
+}
+
+.uk-text-bottom {
+  vertical-align: bottom !important;
+}
+
+.uk-text-baseline {
+  vertical-align: baseline !important;
+}
+
+/* Wrap modifiers
+ ========================================================================== */
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+.uk-text-nowrap {
+  white-space: nowrap;
+}
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+.uk-text-truncate {
+  /* 1 */
+  max-width: 100%;
+  /* 2 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate {
+  max-width: 0;
+}
+
+/*
+ * 1. Wrap long words onto the next line and break them if they are too long to fit
+ * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
+ * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
+ *    Must use `break-all` to support IE11 and Edge
+ * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ */
+.uk-text-break {
+  /* 1 */
+  overflow-wrap: break-word;
+  /* 2 */
+  word-wrap: break-word;
+}
+
+/* 3 */
+th.uk-text-break,
+td.uk-text-break {
+  word-break: break-all;
+}
+
+:root {
+  --text-base-font-size: var(--global-font-size);
+  --text-base-line-height: var(--global-line-height);
+  --text-base-color: var(--global-color);
+  --text-lead-font-size: var(--global-large-font-size);
+  --text-lead-line-height: 1.5;
+  --text-lead-color: var(--global-emphasis-color);
+  --text-meta-font-size: var(--global-small-font-size);
+  --text-meta-line-height: 1.4;
+  --text-meta-color: var(--global-muted-color);
+  --text-xsmall-font-size: var(--global-xsmall-font-size);
+  --text-xsmall-line-height: 1.4;
+  --text-small-font-size: var(--global-small-font-size);
+  --text-small-line-height: 1.5;
+  --text-large-font-size: var(--global-large-font-size);
+  --text-large-line-height: 1.5;
+  --text-muted-color: var(--global-muted-color);
+  --text-emphasis-color: var(--global-emphasis-color);
+  --text-primary-color: var(--global-primary-color);
+  --text-secondary-color: var(--global-secondary-color);
+  --text-tertiary-color: var(--global-tertiary-color);
+  --text-success-color: var(--global-success-color);
+  --text-warning-color: var(--global-warning-color);
+  --text-danger-color: var(--global-danger-color);
+  --text-background-color: var(--global-primary-background);
+  --text-loading-color: var(--global-color);
+  --text-loading-emphasis-color: var(--global-muted-color);
+  --inverse-text-lead-color: var(--inverse-global-color);
+  --inverse-text-meta-color: var(--inverse-global-muted-color);
+  --inverse-text-muted-color: var(--inverse-global-muted-color);
+  --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
+  --inverse-text-primary-color: var(--inverse-global-primary-background);
+  --inverse-text-secondary-color: var(--inverse-global-primary-background);
+  --inverse-text-tertiary-color: var(--inverse-global-primary-background);
+}

package/dist/assets/textarea.css

@@ -0,0 +1,54 @@
+/* ========================================================================
+   Component: Textarea
+ ========================================================================== */
+.uk-control.uk-control-textarea {
+  height: auto;
+  max-width: 100%;
+  padding: 0;
+}
+
+.uk-control-textarea-show-count::after {
+  background-color: var(--textarea-counter-background);
+  border-radius: var(--textarea-counter-border-radius);
+  bottom: 5px;
+  color: var(--textarea-counter-color);
+  content: attr(data-count);
+  font-size: var(--textarea-counter-font-size);
+  padding: 0 2px 2px;
+  pointer-events: none;
+  position: absolute;
+  right: 5px;
+  white-space: nowrap;
+}
+
+/* Textarea element
+ ========================================================================== */
+.uk-control-textarea .uk-textarea {
+  background-color: transparent;
+  box-sizing: border-box;
+  color: var(--textarea-color);
+  height: auto;
+  line-height: normal;
+  max-width: 100%;
+  min-height: var(--control-height);
+  padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
+  resize: none;
+  vertical-align: bottom;
+}
+
+/* Hover + Focus states */
+.uk-control-textarea:hover .uk-textarea,
+.uk-control-textarea:focus-within .uk-textarea {
+  background-color: transparent;
+  color: var(--textarea-color);
+}
+
+:root {
+  --textarea-color: var(--control-color);
+  --textarea-padding-vertical: calc(var(--control-padding-horizontal) / 2);
+  --textarea-padding-horizontal: var(--control-padding-horizontal);
+  --textarea-counter-background: var(--global-default-background);
+  --textarea-counter-border-radius: var(--control-border-radius);
+  --textarea-counter-color: var(--global-muted-color);
+  --textarea-counter-font-size: 0.8em;
+}

package/dist/assets/thumbnav.css

@@ -0,0 +1,67 @@
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+.uk-thumbnav {
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+  list-style: none;
+  /* 2 */
+  margin: 0 0 0 calc(var(--thumbnav-margin-horizontal) * -1);
+  padding: 0;
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+.uk-thumbnav > * {
+  /* 1 */
+  padding-left: var(--thumbnav-margin-horizontal);
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * Items
+ */
+.uk-thumbnav > * > * {
+  display: inline-block;
+}
+
+/* Hover + Focus */
+.uk-thumbnav > * > :hover,
+.uk-thumbnav > * > :focus {
+  outline: none;
+}
+
+/* Active */
+/* Modifier: 'uk-thumbnav-vertical'
+ ========================================================================== */
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+.uk-thumbnav-vertical {
+  /* 1 */
+  flex-direction: column;
+  /* 2 */
+  margin-left: 0;
+  margin-top: calc(var(--thumbnav-margin-vertical) * -1);
+}
+
+/* 2 */
+.uk-thumbnav-vertical > * {
+  padding-left: 0;
+  padding-top: var(--thumbnav-margin-vertical);
+}
+
+:root {
+  --thumbnav-margin-horizontal: 15px;
+  --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
+}

package/dist/assets/tile.css

@@ -0,0 +1,138 @@
+/* ========================================================================
+   Component: Tile
+ ========================================================================== */
+.uk-tile {
+  box-sizing: border-box;
+  display: flow-root;
+  padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
+  position: relative;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-tile {
+    padding-left: var(--tile-padding-horizontal-s);
+    padding-right: var(--tile-padding-horizontal-s);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-tile {
+    padding: var(--tile-padding-vertical-m) var(--tile-padding-horizontal-m);
+  }
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-tile > :last-child {
+  margin-bottom: 0;
+}
+
+/* Size modifiers
+ ========================================================================== */
+/*
+ * XSmall
+ */
+.uk-tile-xsmall {
+  padding-bottom: var(--tile-xsmall-padding-vertical);
+  padding-top: var(--tile-xsmall-padding-vertical);
+}
+
+/*
+ * Small
+ */
+.uk-tile-small {
+  padding-bottom: var(--tile-small-padding-vertical);
+  padding-top: var(--tile-small-padding-vertical);
+}
+
+/*
+ * Large
+ */
+.uk-tile-large {
+  padding-bottom: var(--tile-large-padding-vertical);
+  padding-top: var(--tile-large-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-tile-large {
+    padding-bottom: var(--tile-large-padding-vertical-m);
+    padding-top: var(--tile-large-padding-vertical-m);
+  }
+}
+/*
+ * XLarge
+ */
+.uk-tile-xlarge {
+  padding-bottom: var(--tile-xlarge-padding-vertical);
+  padding-top: var(--tile-xlarge-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-tile-xlarge {
+    padding-bottom: var(--tile-xlarge-padding-vertical-m);
+    padding-top: var(--tile-xlarge-padding-vertical-m);
+  }
+}
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Default
+ */
+.uk-tile-default {
+  --uk-inverse: dark;
+  background: var(--tile-default-background);
+}
+
+/*
+ * Muted
+ */
+.uk-tile-muted {
+  --uk-inverse: dark;
+  background: var(--tile-muted-background);
+}
+
+/*
+ * Primary
+ */
+.uk-tile-primary {
+  --uk-inverse: light;
+  background: var(--tile-primary-background);
+}
+
+/*
+ * Secondary
+ */
+.uk-tile-secondary {
+  --uk-inverse: light;
+  background: var(--tile-secondary-background);
+}
+
+/*
+ * Tertiary
+ */
+.uk-tile-tertiary {
+  --uk-inverse: light;
+  background: var(--tile-tertiary-background);
+}
+
+:root {
+  --tile-padding-horizontal: 15px;
+  --tile-padding-horizontal-s: var(--global-gutter);
+  --tile-padding-horizontal-m: var(--global-medium-gutter);
+  --tile-padding-vertical: var(--global-medium-margin);
+  --tile-padding-vertical-m: var(--global-large-margin);
+  --tile-xsmall-padding-vertical: var(--global-margin);
+  --tile-small-padding-vertical: var(--global-medium-margin);
+  --tile-large-padding-vertical: var(--global-large-margin);
+  --tile-large-padding-vertical-m: var(--global-xlarge-margin);
+  --tile-xlarge-padding-vertical: var(--global-xlarge-margin);
+  --tile-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+  --tile-default-background: var(--global-background);
+  --tile-muted-background: var(--global-muted-background);
+  --tile-primary-background: var(--global-primary-background);
+  --tile-secondary-background: var(--global-secondary-background);
+  --tile-tertiary-background: var(--global-tertiary-background);
+}

package/dist/assets/tooltip.css

@@ -0,0 +1,47 @@
+/* ========================================================================
+   Component: Tooltip
+ ========================================================================== */
+/*
+ * 1. Hide by default
+ * 2. Position
+ * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
+ * 4. Dimensions
+ * 5. Style
+ */
+.uk-tooltip {
+  --uk-position-offset: var(--tooltip-margin);
+  --uk-position-viewport-offset: 10;
+  /* 5 */
+  background: var(--tooltip-background);
+  border-radius: var(--tooltip-border-radius);
+  /* 4 */
+  box-sizing: border-box;
+  color: var(--tooltip-color);
+  /* 1 */
+  display: none;
+  font-size: var(--tooltip-font-size);
+  max-width: var(--tooltip-max-width);
+  padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+  /* 2 */
+  position: absolute;
+  /* 3 */
+  top: 0;
+  z-index: var(--tooltip-z-index);
+}
+
+/* Show */
+.uk-tooltip.uk-active {
+  display: block;
+}
+
+:root {
+  --tooltip-z-index: 1030;
+  --tooltip-max-width: 200px;
+  --tooltip-padding-vertical: 3px;
+  --tooltip-padding-horizontal: 6px;
+  --tooltip-background: #666;
+  --tooltip-border-radius: 2px;
+  --tooltip-color: var(--global-inverse-color);
+  --tooltip-font-size: 12px;
+  --tooltip-margin: 10px;
+}