@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/label.css

@@ -0,0 +1,70 @@
+/* ========================================================================
+   Component: Label
+ ========================================================================== */
+.uk-label {
+  background: var(--label-background);
+  border-radius: var(--label-border-radius);
+  color: var(--label-color);
+  display: inline-flex;
+  font-size: var(--label-font-size);
+  line-height: var(--label-line-height);
+  padding: var(--label-padding-vertical) var(--label-padding-horizontal);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+/* Size modifiers
+ ========================================================================== */
+.uk-label-large {
+  font-size: var(--label-large-font-size);
+  line-height: var(--label-large-line-height);
+  padding: var(--label-large-padding-vertical) var(--label-large-padding-horizontal);
+}
+
+/* Color modifiers
+ ========================================================================== */
+/*
+ * Success
+ */
+.uk-label-success {
+  background-color: var(--label-success-background);
+  color: var(--label-success-color);
+}
+
+/*
+ * Warning
+ */
+.uk-label-warning {
+  background-color: var(--label-warning-background);
+  color: var(--label-warning-color);
+}
+
+/*
+ * Danger
+ */
+.uk-label-danger {
+  background-color: var(--label-danger-background);
+  color: var(--label-danger-color);
+}
+
+:root {
+  --label-padding-horizontal: var(--global-small-margin);
+  --label-padding-vertical: 0;
+  --label-background: var(--global-primary-background);
+  --label-border-radius: 0;
+  --label-font-size: var(--global-small-font-size);
+  --label-line-height: var(--global-line-height);
+  --label-large-padding-horizontal: var(--global-margin);
+  --label-large-padding-vertical: var(--global-xsmall-margin);
+  --label-large-font-size: var(--global-small-font-size);
+  --label-large-line-height: var(--global-line-height);
+  --label-color: var(--global-inverse-color);
+  --label-success-background: var(--global-success-background);
+  --label-success-color: var(--global-inverse-color);
+  --label-warning-background: var(--global-warning-background);
+  --label-warning-color: var(--global-inverse-color);
+  --label-danger-background: var(--global-danger-background);
+  --label-danger-color: var(--global-inverse-color);
+  --inverse-label-background: var(--inverse-global-primary-background);
+  --inverse-label-color: var(--inverse-global-inverse-color);
+}

package/dist/assets/leader.css

@@ -0,0 +1,44 @@
+/* ========================================================================
+   Component: Leader
+ ========================================================================== */
+.uk-leader {
+  overflow: hidden;
+}
+
+/*
+ * 1. Place element in text flow
+ * 2. Never break into a new line
+ * 3. Get a string back with as many repeating characters to fill the container
+ * 4. Prevent wrapping. Overflowing characters will be clipped by the container
+ */
+.uk-leader-fill::after {
+  /* 3 */
+  content: attr(data-fill);
+  /* 1 */
+  display: inline-block;
+  margin-left: var(--leader-fill-margin-left);
+  /* 4 */
+  white-space: nowrap;
+  /* 2 */
+  width: 0;
+}
+
+/*
+ * Hide if media does not match
+ */
+.uk-leader-fill.uk-leader-hide::after {
+  display: none;
+}
+
+/*
+ * Pass fill character to JS
+ */
+.uk-leader-fill-content::before {
+  content: var(--leader-fill-content);
+}
+
+:root {
+  --leader-fill-content: ".";
+  --leader-fill-margin-left: var(--global-small-gutter);
+  --uk-leader-fill-content: var(--leader-fill-content);
+}

package/dist/assets/link.css

@@ -0,0 +1,79 @@
+/* ========================================================================
+   Component: Link
+ ========================================================================== */
+/* Muted
+ ========================================================================== */
+a.uk-link-muted,
+.uk-link-muted a {
+  color: var(--link-muted-color);
+}
+
+a.uk-link-muted:hover,
+.uk-link-muted a:hover,
+.uk-link-toggle:hover .uk-link-muted,
+.uk-link-toggle:focus .uk-link-muted {
+  color: var(--link-muted-hover-color);
+}
+
+/* Text
+ ========================================================================== */
+a.uk-link-text,
+.uk-link-text a {
+  color: inherit;
+}
+
+a.uk-link-text:hover,
+.uk-link-text a:hover,
+.uk-link-toggle:hover .uk-link-text,
+.uk-link-toggle:focus .uk-link-text {
+  color: var(--link-text-hover-color);
+}
+
+/* Heading
+ ========================================================================== */
+a.uk-link-heading,
+.uk-link-heading a {
+  color: inherit;
+}
+
+a.uk-link-heading:hover,
+.uk-link-heading a:hover,
+.uk-link-toggle:hover .uk-link-heading,
+.uk-link-toggle:focus .uk-link-heading {
+  color: var(--link-heading-hover-color);
+  text-decoration: var(--link-heading-hover-text-decoration);
+}
+
+/* Reset
+ ========================================================================== */
+/*
+ * `!important` needed to override inverse component
+ */
+a.uk-link-reset,
+.uk-link-reset a {
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
+/* Toggle
+ ========================================================================== */
+.uk-link-toggle {
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
+.uk-link-toggle:focus {
+  outline: none;
+}
+
+:root {
+  --link-muted-color: var(--global-muted-color);
+  --link-muted-hover-color: var(--global-color);
+  --link-text-hover-color: var(--global-muted-color);
+  --link-heading-hover-color: var(--global-primary-background);
+  --link-heading-hover-text-decoration: none;
+  --inverse-link-muted-color: var(--inverse-global-muted-color);
+  --inverse-link-muted-hover-color: var(--inverse-global-color);
+  --inverse-link-text-hover-color: var(--inverse-global-muted-color);
+  --inverse-link-heading-hover-color: var(--inverse-global-primary-background);
+}

package/dist/assets/list.css

@@ -0,0 +1,211 @@
+@charset "UTF-8";
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+.uk-list {
+  list-style: none;
+  padding: 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-list > * > :last-child {
+  margin-bottom: 0;
+}
+
+/*
+ * Style
+ */
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul {
+  margin-top: var(--list-margin-top);
+}
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * {
+  padding-left: var(--list-padding-left);
+}
+
+/*
+ * Type modifiers
+ */
+.uk-list-decimal {
+  counter-reset: decimal;
+}
+
+.uk-list-decimal > * {
+  counter-increment: decimal;
+}
+
+[class*=uk-list] > ::before {
+  content: "";
+  display: list-item;
+  height: var(--list-marker-height);
+  left: calc(var(--list-padding-left) * -1);
+  list-style-position: inside;
+  margin-bottom: calc(var(--list-marker-height) * -1);
+  position: relative;
+  text-align: right;
+  width: var(--list-padding-left);
+}
+
+.uk-list-disc > ::before {
+  list-style-type: disc;
+}
+
+.uk-list-circle > ::before {
+  list-style-type: circle;
+}
+
+.uk-list-square > ::before {
+  list-style-type: square;
+}
+
+.uk-list-decimal > ::before {
+  content: counter(decimal, decimal) " . ";
+}
+
+.uk-list-hyphen > ::before {
+  content: "–  ";
+}
+
+/*
+ * Color modifiers
+ */
+.uk-list-muted > ::before {
+  color: var(--list-muted-color) !important;
+}
+
+.uk-list-emphasis > ::before {
+  color: var(--list-emphasis-color) !important;
+}
+
+.uk-list-primary > ::before {
+  color: var(--list-primary-color) !important;
+}
+
+.uk-list-secondary > ::before {
+  color: var(--list-secondary-color) !important;
+}
+
+/* Image bullet modifier
+ ========================================================================== */
+.uk-list-bullet > * {
+  padding-left: var(--list-padding-left);
+}
+
+.uk-list-bullet > ::before {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  content: "";
+  height: var(--list-marker-height);
+  left: calc(var(--list-padding-left) * -1);
+  margin-bottom: calc(var(--list-marker-height) * -1);
+  position: relative;
+  width: var(--list-padding-left);
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Divider
+ */
+.uk-list-divider > :nth-child(n+2) {
+  border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+  margin-top: var(--list-divider-margin-top);
+  padding-top: var(--list-divider-margin-top);
+}
+
+/*
+ * Striped
+ */
+.uk-list-striped > * {
+  padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+}
+
+.uk-list-striped > :nth-of-type(odd) {
+  background: var(--list-striped-background);
+}
+
+.uk-list-striped > :nth-child(n+2) {
+  margin-top: 0;
+}
+
+/* Size modifier
+ ========================================================================== */
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul {
+  margin-top: var(--list-large-margin-top);
+}
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul {
+  margin-top: 0;
+}
+
+/*
+ * Divider
+ */
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+  margin-top: var(--list-large-divider-margin-top);
+  padding-top: var(--list-large-divider-margin-top);
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+.uk-list-large.uk-list-striped > * {
+  padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+}
+
+.uk-list-collapse.uk-list-striped > * {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
+  margin-top: 0;
+}
+
+:root {
+  --list-margin-top: var(--global-small-margin);
+  --list-padding-left: 30px;
+  --list-marker-height: calc(var(--global-line-height) * 1em);
+  --list-muted-color: var(--global-muted-color);
+  --list-emphasis-color: var(--global-emphasis-color);
+  --list-primary-color: var(--global-primary-background);
+  --list-secondary-color: var(--global-secondary-background);
+  --list-bullet-icon-color: var(--global-color);
+  --list-divider-margin-top: var(--global-small-margin);
+  --list-divider-border-width: var(--global-border-width);
+  --list-divider-border: var(--global-border);
+  --list-striped-padding-vertical: var(--global-small-margin);
+  --list-striped-padding-horizontal: var(--global-small-margin);
+  --list-striped-background: var(--global-muted-background);
+  --list-large-margin-top: var(--global-margin);
+  --list-large-divider-margin-top: var(--global-margin);
+  --list-large-striped-padding-vertical: var(--global-margin);
+  --list-large-striped-padding-horizontal: var(--global-small-margin);
+  --inverse-list-muted-color: var(--inverse-global-muted-color);
+  --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+  --inverse-list-primary-color: var(--inverse-global-primary-background);
+  --inverse-list-secondary-color: var(--inverse-global-primary-background);
+  --inverse-list-divider-border: var(--inverse-global-border);
+  --inverse-list-striped-background: var(--inverse-global-muted-background);
+  --inverse-list-bullet-icon-color: var(--inverse-global-color);
+}