@broxus/react-uikit 0.22.0 → 0.23.1

package/dist/assets/base.css

@@ -0,0 +1,571 @@
+/* ========================================================================
+   Component: Base
+ ========================================================================== */
+/*
+ * 1. Set `font-size` to support `rem` units
+ *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Style
+ */
+html {
+  background: var(--base-body-background); /* 3 */
+  color: var(--base-body-color); /* 3 */
+  font-family: var(--base-body-font-family), system-ui;
+  font-size: var(--base-body-font-size); /* 1 */
+  font-weight: var(--base-body-font-weight);
+  line-height: var(--base-body-line-height);
+  text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/* Links
+ ========================================================================== */
+/*
+ * Style
+ */
+a,
+.uk-link {
+  color: var(--base-link-color);
+  cursor: pointer;
+  text-decoration: var(--base-link-text-decoration);
+}
+
+a:hover,
+.uk-link:hover,
+.uk-link-toggle:hover .uk-link,
+.uk-link-toggle:focus .uk-link {
+  color: var(--base-link-hover-color);
+  text-decoration: var(--base-link-hover-text-decoration);
+}
+
+/*
+ * Fix text underline offset if `vertical-align`is set to `middle`
+ */
+a:has(.uk-text-middle),
+.uk-link:has(.uk-text-middle),
+.uk-link-toggle:hover .uk-link:has(.uk-text-middle) {
+  text-underline-offset: 0.1875em;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+/*
+ * 1. Add the correct text decoration in Edge.
+ * 2. The shorthand declaration `underline dotted` is not supported in Safari.
+ */
+abbr[title] {
+  text-decoration: underline dotted; /* 1 */
+  -webkit-text-decoration-style: dotted; /* 2 */
+}
+
+/*
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: var(--base-strong-font-weight);
+}
+
+/*
+ * 1. Consolas has a better baseline in running text compared to `Courier`
+ * 2. Correct the odd `em` font sizing in all browsers.
+ * 3. Style
+ */
+:not(pre) > code,
+:not(pre) > kbd,
+:not(pre) > samp {
+  color: var(--base-code-color); /* 3 */
+  font-family: var(--base-code-font-family), monospace; /* 1 */
+  font-size: var(--base-code-font-size); /* 2 */
+  padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
+  white-space: nowrap;
+}
+
+/*
+ * Emphasize
+ */
+em {
+  color: var(--base-em-color);
+}
+
+/*
+ * Insert
+ */
+ins {
+  background: var(--base-ins-background);
+  color: var(--base-ins-color);
+  text-decoration: none;
+}
+
+/*
+ * Mark
+ */
+mark {
+  background: var(--base-mark-background);
+  color: var(--base-mark-color);
+}
+
+/*
+ * Quote
+ */
+q {
+  font-style: var(--base-quote-font-style);
+}
+
+/*
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: var(--base-small-font-size);
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+/*
+ * Remove the gap between the element and the bottom of its parent container.
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/*
+ * 1. Constrain the element to its parent width.
+ * 2. Take border and padding into account.
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
+ * 5. Size image to fill the element's content box.
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
+ */
+canvas,
+img,
+svg,
+video {
+  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>)); /* 4 */
+  box-sizing: border-box; /* 3 */
+  height: auto; /* 2 */
+  max-width: 100%; /* 1 */
+  object-fit: cover; /* 5 */
+}
+
+/*
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
+ */
+img:not([src]) {
+  min-width: 1px; /* 2 */
+  visibility: hidden; /* 1 */
+}
+
+/*
+ * Iframe
+ * Remove border in all browsers
+ */
+iframe {
+  border: 0;
+}
+
+/* Block elements
+ ========================================================================== */
+/*
+ * Margins
+ */
+p,
+ul,
+ol,
+dl,
+pre,
+address,
+fieldset,
+figure {
+  margin: 0 0 var(--base-margin-vertical) 0;
+}
+
+/* Add margin if adjacent element */
+* + p,
+* + ul,
+* + ol,
+* + dl,
+* + pre,
+* + address,
+* + fieldset,
+* + figure {
+  margin-top: var(--base-margin-vertical);
+}
+
+/* Headings
+ ========================================================================== */
+h1, .uk-h1,
+h2, .uk-h2,
+h3, .uk-h3,
+h4, .uk-h4,
+h5, .uk-h5,
+h6, .uk-h6,
+.uk-heading-small,
+.uk-heading-medium,
+.uk-heading-large,
+.uk-heading-xlarge,
+.uk-heading-2xlarge,
+.uk-heading-3xlarge {
+  color: var(--base-heading-color);
+  font-family: var(--base-heading-font-family), system-ui;
+  font-weight: var(--base-heading-font-weight);
+  margin: 0 0 var(--base-margin-vertical) 0;
+  text-transform: var(--base-heading-text-transform);
+}
+
+/* Add margin if adjacent element */
+* + h1, * + .uk-h1,
+* + h2, * + .uk-h2,
+* + h3, * + .uk-h3,
+* + h4, * + .uk-h4,
+* + h5, * + .uk-h5,
+* + h6, * + .uk-h6,
+* + .uk-heading-small,
+* + .uk-heading-medium,
+* + .uk-heading-large,
+* + .uk-heading-xlarge,
+* + .uk-heading-2xlarge,
+* + .uk-heading-3xlarge {
+  margin-top: var(--base-heading-margin-top);
+}
+
+/*
+ * Sizes
+ */
+h1, .uk-h1 {
+  font-size: var(--base-h1-font-size);
+  line-height: var(--base-h1-line-height);
+}
+
+h2, .uk-h2 {
+  font-size: var(--base-h2-font-size);
+  line-height: var(--base-h2-line-height);
+}
+
+h3, .uk-h3 {
+  font-size: var(--base-h3-font-size);
+  line-height: var(--base-h3-line-height);
+}
+
+h4, .uk-h4 {
+  font-size: var(--base-h4-font-size);
+  line-height: var(--base-h4-line-height);
+}
+
+h5, .uk-h5 {
+  font-size: var(--base-h5-font-size);
+  line-height: var(--base-h5-line-height);
+}
+
+h6, .uk-h6 {
+  font-size: var(--base-h6-font-size);
+  line-height: var(--base-h6-line-height);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  h1, .uk-h1 {
+    font-size: var(--base-h1-font-size-m);
+  }
+  h2, .uk-h2 {
+    font-size: var(--base-h2-font-size-m);
+  }
+}
+/* Lists
+ ========================================================================== */
+ul, ol {
+  padding-left: var(--base-list-padding-left);
+}
+
+/*
+ * Reset margin for nested lists
+ */
+ul > li > ul,
+ul > li > ol,
+ol > li > ol,
+ol > li > ul {
+  margin: 0;
+}
+
+/* Description lists
+ ========================================================================== */
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+/* Horizontal rules
+ ========================================================================== */
+/*
+ * 1. Show the overflow in Chrome, Edge and IE.
+ * 2. Add the correct text-align in Edge and IE.
+ * 3. Style
+ */
+hr, .uk-hr {
+  border: 0; /* 3 */
+  border-top: var(--base-hr-border-width) solid var(--base-hr-border); /* 3 */
+  margin: 0 0 var(--base-hr-margin-vertical) 0; /* 3 */
+  overflow: visible; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/* Add margin if adjacent element */
+* + hr,
+* + .uk-hr {
+  margin-top: var(--base-hr-margin-vertical);
+}
+
+/* Address
+ ========================================================================== */
+address {
+  font-style: normal;
+}
+
+/* Blockquotes
+ ========================================================================== */
+blockquote {
+  color: var(--base-blockquote-color);
+  font-size: var(--base-blockquote-font-size);
+  font-style: var(--base-blockquote-font-style);
+  line-height: var(--base-blockquote-line-height);
+  margin: 0 0 var(--base-blockquote-margin-vertical) 0;
+}
+
+/* Add margin if adjacent element */
+* + blockquote {
+  margin-top: var(--base-blockquote-margin-vertical);
+}
+
+/*
+ * Content
+ */
+blockquote p:last-of-type {
+  margin-bottom: 0;
+}
+
+blockquote footer {
+  color: var(--base-blockquote-footer-color);
+  font-size: var(--base-blockquote-footer-font-size);
+  line-height: var(--base-blockquote-footer-line-height);
+  margin-top: var(--base-blockquote-footer-margin-top);
+}
+
+/* Preformatted text
+ ========================================================================== */
+/*
+ * 1. Contain overflow in all browsers.
+ */
+pre {
+  color: var(--base-pre-color);
+  font-family: var(--base-pre-font-family), monospace;
+  font-size: var(--base-pre-font-size);
+  line-height: var(--base-pre-line-height);
+  overflow: auto; /* 1 */
+  tab-size: 4;
+}
+
+pre code {
+  font-family: var(--base-pre-font-family), monospace;
+}
+
+/* Focus
+ ========================================================================== */
+/*
+ * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
+ * 1. Fallback: Remove `:focus` for a negative tab-indexes.
+ * 2. Fallback: Set `:focus` style but not for negative tab-indexes.
+ * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+ * 4. Set `:focus-visible` style for browsers which support it.
+ */
+/* 1 */
+:focus {
+  outline: none;
+}
+
+/* 2 */
+:focus:not([tabindex^="-"]) {
+  outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
+  outline-offset: var(--base-focus-outline-offset);
+}
+
+/* 3 */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 4 */
+:focus-visible {
+  outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
+  outline-offset: var(--base-focus-outline-offset);
+}
+
+/* Selection pseudo-element
+ ========================================================================== */
+::selection {
+  background: var(--base-selection-background);
+  color: var(--base-selection-color);
+  text-shadow: none;
+}
+
+/* HTML5 elements
+ ========================================================================== */
+/*
+ * 1. Add the correct display in Edge, IE 10+, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+details,
+main { /* 2 */
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/*
+ * Add the correct display in IE.
+ */
+template {
+  display: none;
+}
+
+/* Pass media breakpoints to JS
+ ========================================================================== */
+/*
+ * Breakpoints
+ */
+.uk-breakpoint-s::before {
+  content: var(--breakpoint-small);
+}
+
+.uk-breakpoint-m::before {
+  content: var(--breakpoint-medium);
+}
+
+.uk-breakpoint-l::before {
+  content: var(--breakpoint-large);
+}
+
+.uk-breakpoint-xl::before {
+  content: var(--breakpoint-xlarge);
+}
+
+:root {
+  --base-body-background: var(--global-background);
+  --base-body-font-family: var(--global-font-family);
+  --base-body-font-weight: normal;
+  --base-body-font-size: var(--global-font-size);
+  --base-body-line-height: var(--global-line-height);
+  --base-body-color: var(--global-color);
+  --base-link-color: var(--global-link-color);
+  --base-link-text-decoration: none;
+  --base-link-hover-color: var(--global-link-hover-color);
+  --base-link-hover-text-decoration: underline;
+  --base-strong-font-weight: bolder;
+  --base-code-font-size: var(--global-small-font-size);
+  --base-code-font-family: Consolas, monaco, monospace;
+  --base-code-color: var(--global-danger-background);
+  --base-code-padding-horizontal: 6px;
+  --base-code-padding-vertical: 2px;
+  --base-em-color: var(--global-danger-background);
+  --base-ins-background: #ffd;
+  --base-ins-color: var(--global-color);
+  --base-mark-background: #ffd;
+  --base-mark-color: var(--global-color);
+  --base-quote-font-style: italic;
+  --base-small-font-size: 80%;
+  --base-margin-vertical: var(--global-margin);
+  --base-heading-font-family: var(--global-font-family);
+  --base-heading-font-weight: normal;
+  --base-heading-color: var(--global-emphasis-color);
+  --base-heading-text-transform: none;
+  --base-heading-margin-top: var(--global-medium-margin);
+  --base-h1-font-size-m: var(--global-2xlarge-font-size);
+  --base-h1-font-size: calc(var(--base-h1-font-size-m) * 0.85);
+  --base-h1-line-height: 1.2;
+  --base-h2-font-size-m: var(--global-xlarge-font-size);
+  --base-h2-font-size: calc(var(--base-h2-font-size-m) * 0.85);
+  --base-h2-line-height: 1.3;
+  --base-h3-font-size: var(--global-large-font-size);
+  --base-h3-line-height: 1.4;
+  --base-h4-font-size: var(--global-medium-font-size);
+  --base-h4-line-height: 1.4;
+  --base-h5-font-size: var(--global-font-size);
+  --base-h5-line-height: 1.4;
+  --base-h6-font-size: var(--global-small-font-size);
+  --base-h6-line-height: 1.4;
+  --base-list-padding-left: 30px;
+  --base-hr-margin-vertical: var(--global-margin);
+  --base-hr-border-width: var(--global-border-width);
+  --base-hr-border: var(--global-border);
+  --base-blockquote-font-size: var(--global-medium-font-size);
+  --base-blockquote-line-height: 1.5;
+  --base-blockquote-font-style: italic;
+  --base-blockquote-margin-vertical: var(--global-margin);
+  --base-blockquote-color: var(--global-emphasis-color);
+  --base-blockquote-footer-color: var(--global-color);
+  --base-blockquote-footer-margin-top: var(--global-small-margin);
+  --base-blockquote-footer-font-size: var(--global-small-font-size);
+  --base-blockquote-footer-line-height: 1.5;
+  --base-pre-font-size: var(--global-small-font-size);
+  --base-pre-line-height: 1.5;
+  --base-pre-font-family: var(--base-code-font-family);
+  --base-pre-color: var(--global-color);
+  --base-focus-outline-width: 2px;
+  --base-focus-outline-style: dotted;
+  --base-focus-outline: var(--global-emphasis-color);
+  --base-focus-outline-offset: -2px;
+  --base-selection-background: #39f;
+  --base-selection-color: var(--global-inverse-color);
+  --uk-breakpoint-s: var(--breakpoint-small);
+  --uk-breakpoint-m: var(--breakpoint-medium);
+  --uk-breakpoint-l: var(--breakpoint-large);
+  --uk-breakpoint-xl: var(--breakpoint-xlarge);
+  --inverse-base-color: var(--inverse-global-color);
+  --inverse-base-link-color: var(--inverse-global-emphasis-color);
+  --inverse-base-link-hover-color: var(--inverse-global-emphasis-color);
+  --inverse-base-code-color: var(--inverse-global-color);
+  --inverse-base-em-color: var(--inverse-global-emphasis-color);
+  --inverse-base-heading-color: var(--inverse-global-emphasis-color);
+  --inverse-base-hr-border: var(--inverse-global-color);
+  --inverse-base-focus-outline: var(--inverse-global-emphasis-color);
+  --inverse-base-blockquote-color: var(--inverse-global-emphasis-color);
+  --inverse-base-blockquote-footer-color: var(--inverse-global-color);
+}

package/dist/assets/breadcrumb.css

@@ -0,0 +1,69 @@
+/* ========================================================================
+   Component: Breadcrumb
+ ========================================================================== */
+/*
+ * 1. Reset list
+ * 2. Remove space between elements
+ */
+.uk-breadcrumb {
+  list-style: none; /* 2 */
+  padding: 0; /* 1 */
+}
+
+/*
+ * 1. Doesn't generate any box and replaced by child boxes
+ */
+.uk-breadcrumb > * {
+  display: contents;
+}
+
+/* Items
+ ========================================================================== */
+.uk-breadcrumb > * > * {
+  color: var(--breadcrumb-item-color);
+  font-size: var(--breadcrumb-item-font-size);
+}
+
+/* Hover + Focus */
+.uk-breadcrumb > * > :hover,
+.uk-breadcrumb > * > :focus {
+  color: var(--breadcrumb-item-hover-color);
+  text-decoration: var(--breadcrumb-item-hover-text-decoration);
+}
+
+/* Disabled */
+/* Active */
+.uk-breadcrumb > :last-child > span,
+.uk-breadcrumb > :last-child > a:not([href]) {
+  color: var(--breadcrumb-item-active-color);
+}
+
+/*
+ * Divider
+ * `nth-child` makes it also work without JS if it's only one row
+ * 1. Remove space between inline block elements.
+ * 2. Style
+ */
+.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
+  color: var(--breadcrumb-divider-color); /* 2 */
+  content: var(--breadcrumb-divider);
+  display: inline-block;
+  font-size: var(--breadcrumb-divider-font-size); /* 2 */
+  margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px); /* 1 */
+}
+
+:root {
+  --breadcrumb-item-font-size: var(--global-small-font-size);
+  --breadcrumb-item-color: var(--global-muted-color);
+  --breadcrumb-item-hover-color: var(--global-color);
+  --breadcrumb-item-hover-text-decoration: none;
+  --breadcrumb-item-active-color: var(--global-color);
+  --breadcrumb-divider: "/";
+  --breadcrumb-divider-margin-horizontal: 20px;
+  --breadcrumb-divider-font-size: var(--breadcrumb-item-font-size);
+  --breadcrumb-divider-color: var(--global-muted-color);
+  --inverse-breadcrumb-item-color: var(--inverse-global-muted-color);
+  --inverse-breadcrumb-item-hover-color: var(--inverse-global-color);
+  --inverse-breadcrumb-item-active-color: var(--inverse-global-color);
+  --inverse-breadcrumb-divider-color: var(--inverse-global-muted-color);
+}