@broxus/react-uikit 0.1.0

package/dist/esm/styles/base.scss

@@ -0,0 +1,679 @@
+// Name:            Base
+// Description:     Default values for HTML elements
+//
+// Component:       `uk-link`
+//                  `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
+//                  `uk-hr`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   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);
+    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 */
+    @if mixin-exists(hook-base-body) {
+        @include hook-base-body;
+    }
+}
+
+/*
+ * 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);
+    @if mixin-exists(hook-base-link) {
+        @include hook-base-link;
+    }
+}
+
+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);
+    @if mixin-exists(hook-base-link-hover) {
+        @include hook-base-link-hover;
+    }
+}
+
+/*
+ * Remove the outline on focused links when they are also active or hovered
+ */
+
+a:active,
+a:hover {
+    outline: none;
+}
+
+
+/* Text-level semantics
+ ========================================================================== */
+
+/*
+ * 1. Add the correct text decoration in Edge.
+ * 2. The shorthand declaration `underline dotted` is not supported in Safari.
+ */
+
+abbr[title] {
+    /* 1 */
+    text-decoration: underline dotted;
+
+    /* 2 */
+    -webkit-text-decoration-style: dotted;
+}
+
+/*
+ * 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 {
+    /* 3 */
+    color: var(--base-code-color);
+
+    /* 1 */
+    font-family: var(--base-code-font-family);
+
+    /* 2 */
+    font-size: var(--base-code-font-size);
+    padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
+    white-space: nowrap;
+    @if mixin-exists(hook-base-code) {
+        @include hook-base-code;
+    }
+}
+
+/*
+ * 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 embedded content and the bottom of their containers.
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video { vertical-align: middle; }
+
+/*
+ * 1. Add responsiveness.
+ * 2. Auto-scale the height. Only needed if `height` attribute is present.
+ * 3. Corrects responsive `max-width` behavior if padding and border are used.
+ * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ */
+
+canvas,
+img,
+video {
+    /* 3 */
+    box-sizing: border-box;
+
+    /* 2 */
+    height: auto;
+
+    /* 1 */
+    max-width: 100%;
+}
+
+/* 4 */
+@supports (display: block) {
+    svg {
+        box-sizing: border-box;
+        height: auto;
+        max-width: 100%;
+    }
+}
+
+/*
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+/*
+ * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
+ * 2. Hide `alt` text for lazy loading images.
+ * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ */
+
+img:not([src]) {
+    /* 1 */
+    min-width: 1px;
+
+    /* 2 */
+    visibility: hidden;
+}
+
+/*
+ * 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 {
+    color: var(--base-heading-color);
+    font-family: var(--base-heading-font-family);
+    font-weight: var(--base-heading-font-weight);
+    margin: 0 0 var(--base-margin-vertical) 0;
+    text-transform: var(--base-heading-text-transform);
+    @if mixin-exists(hook-base-heading) {
+        @include hook-base-heading;
+    }
+}
+
+/* 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 { 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);
+    @if mixin-exists(hook-base-h1) {
+        @include hook-base-h1;
+    }
+}
+
+h2, .uk-h2 {
+    font-size: var(--base-h2-font-size);
+    line-height: var(--base-h2-line-height);
+    @if mixin-exists(hook-base-h2) {
+        @include hook-base-h2;
+    }
+}
+
+h3, .uk-h3 {
+    font-size: var(--base-h3-font-size);
+    line-height: var(--base-h3-line-height);
+    @if mixin-exists(hook-base-h3) {
+        @include hook-base-h3;
+    }
+}
+
+h4, .uk-h4 {
+    font-size: var(--base-h4-font-size);
+    line-height: var(--base-h4-line-height);
+    @if mixin-exists(hook-base-h4) {
+        @include hook-base-h4;
+    }
+}
+
+h5, .uk-h5 {
+    font-size: var(--base-h5-font-size);
+    line-height: var(--base-h5-line-height);
+    @if mixin-exists(hook-base-h5) {
+        @include hook-base-h5;
+    }
+}
+
+h6, .uk-h6 {
+    font-size: var(--base-h6-font-size);
+    line-height: var(--base-h6-line-height);
+    @if mixin-exists(hook-base-h6) {
+        @include hook-base-h6;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    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 */
+
+    /* 1 */
+    overflow: visible;
+
+    /* 2 */
+    text-align: inherit;
+    @if mixin-exists(hook-base-hr) {
+        @include hook-base-hr;
+    }
+}
+
+/* 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;
+    @if mixin-exists(hook-base-blockquote) {
+        @include hook-base-blockquote;
+    }
+}
+
+/* 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);
+    @if mixin-exists(hook-base-blockquote-footer) {
+        @include hook-base-blockquote-footer;
+    }
+}
+
+
+/* Preformatted text
+ ========================================================================== */
+
+/*
+ * 1. Contain overflow in all browsers.
+ */
+
+pre {
+    color: var(--base-pre-color);
+    font: var(--base-pre-font-size) unquote('/') var(--base-pre-line-height) var(--base-pre-font-family);
+
+    /* 1 */
+    overflow: auto;
+    tab-size: 4;
+    @if mixin-exists(hook-base-pre) {
+        @include hook-base-pre;
+    }
+}
+
+pre code { font-family: var(--base-pre-font-family); }
+
+
+/* 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);
+}
+
+
+/* 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, /* 1 */
+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); }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-base-misc) {
+    @include hook-base-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --base-body-background: var(--global-background);
+    --base-body-font-family: var(--global-font-family);
+    --base-body-font-weight: #{$base-body-font-weight};
+    --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: #{$base-link-text-decoration};
+    --base-link-hover-color: var(--global-link-hover-color);
+    --base-link-hover-text-decoration: #{$base-link-hover-text-decoration};
+    --base-strong-font-weight: #{$base-strong-font-weight};
+    --base-code-font-size: var(--global-small-font-size);
+    --base-code-font-family: #{$base-code-font-family};
+    --base-code-color: var(--global-danger-background);
+    --base-code-padding-horizontal: #{$base-code-padding-horizontal};
+    --base-code-padding-vertical: #{$base-code-padding-vertical};
+    --base-em-color: var(--global-danger-background);
+    --base-ins-background: #{$base-ins-background};
+    --base-ins-color: var(--global-color);
+    --base-mark-background: #{$base-mark-background};
+    --base-mark-color: var(--global-color);
+    --base-quote-font-style: #{$base-quote-font-style};
+    --base-small-font-size: #{$base-small-font-size};
+    --base-margin-vertical: var(--global-margin);
+    --base-heading-font-family: var(--global-font-family);
+    --base-heading-font-weight: #{$base-heading-font-weight};
+    --base-heading-color: var(--global-emphasis-color);
+    --base-heading-text-transform: #{$base-heading-text-transform};
+    --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: #{$base-h1-line-height};
+    --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: #{$base-h2-line-height};
+    --base-h3-font-size: var(--global-large-font-size);
+    --base-h3-line-height: #{$base-h3-line-height};
+    --base-h4-font-size: var(--global-medium-font-size);
+    --base-h4-line-height: #{$base-h4-line-height};
+    --base-h5-font-size: var(--global-font-size);
+    --base-h5-line-height: #{$base-h5-line-height};
+    --base-h6-font-size: var(--global-small-font-size);
+    --base-h6-line-height: #{$base-h6-line-height};
+    --base-list-padding-left: #{$base-list-padding-left};
+    --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: #{$base-blockquote-line-height};
+    --base-blockquote-font-style: #{$base-blockquote-font-style};
+    --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: #{$base-blockquote-footer-line-height};
+    --base-pre-font-size: var(--global-small-font-size);
+    --base-pre-line-height: #{$base-pre-line-height};
+    --base-pre-font-family: var(--base-code-font-family);
+    --base-pre-color: var(--global-color);
+    --base-focus-outline-width: #{$base-focus-outline-width};
+    --base-focus-outline-style: #{$base-focus-outline-style};
+    --base-focus-outline: var(--global-emphasis-color);
+    --base-focus-outline-offset: #{$base-focus-outline-offset};
+    --base-selection-background: #{$base-selection-background};
+    --base-selection-color: var(--global-inverse-color);
+
+    // Breakpoint
+    --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
+    --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/esm/styles/breadcrumb.scss

@@ -0,0 +1 @@
+@import '../components/Breadcrumb/index.scss';

package/dist/esm/styles/button.scss

@@ -0,0 +1 @@
+@import '../components/Button/index.scss';

package/dist/esm/styles/card.scss

@@ -0,0 +1 @@
+@import '../components/Card/index.scss';

package/dist/esm/styles/close.scss

@@ -0,0 +1 @@
+@import '../components/Close/index.scss';