@broxus/react-uikit 0.1.0

package/dist/cjs/styles/column.scss

@@ -0,0 +1,151 @@
+// Name:            Column
+// Description:     Utilities for text columns
+//
+// Component:       `uk-column-*`
+//
+// Sub-objects:     `uk-column-span`
+//
+// Modifiers:       `uk-column-divider`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+
+[class*='uk-column-'] { column-gap: var(--column-gutter); }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    [class*='uk-column-'] { column-gap: var(--column-gutter-l); }
+}
+
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+
+[class*='uk-column-'] img { transform: translate3d(0, 0, 0); }
+
+
+/* Divider
+ ========================================================================== */
+
+/*
+ * 1. Double the column gap
+ */
+
+.uk-column-divider {
+    /* 1 */
+    column-gap: calc(var(--column-gutter) * 2);
+    column-rule: var(--column-divider-rule-width) solid var(--column-divider-rule-color);
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-column-divider { column-gap: calc(var(--column-gutter-l) * 2); }
+}
+
+
+/* Width modifiers
+ ========================================================================== */
+
+.uk-column-1-2 { column-count: 2; }
+
+.uk-column-1-3 { column-count: 3; }
+
+.uk-column-1-4 { column-count: 4; }
+
+.uk-column-1-5 { column-count: 5; }
+
+.uk-column-1-6 { column-count: 6; }
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    .uk-column-1-2\@s { column-count: 2; }
+
+    .uk-column-1-3\@s { column-count: 3; }
+
+    .uk-column-1-4\@s { column-count: 4; }
+
+    .uk-column-1-5\@s { column-count: 5; }
+
+    .uk-column-1-6\@s { column-count: 6; }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    .uk-column-1-2\@m { column-count: 2; }
+
+    .uk-column-1-3\@m { column-count: 3; }
+
+    .uk-column-1-4\@m { column-count: 4; }
+
+    .uk-column-1-5\@m { column-count: 5; }
+
+    .uk-column-1-6\@m { column-count: 6; }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    .uk-column-1-2\@l { column-count: 2; }
+
+    .uk-column-1-3\@l { column-count: 3; }
+
+    .uk-column-1-4\@l { column-count: 4; }
+
+    .uk-column-1-5\@l { column-count: 5; }
+
+    .uk-column-1-6\@l { column-count: 6; }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    .uk-column-1-2\@xl { column-count: 2; }
+
+    .uk-column-1-3\@xl { column-count: 3; }
+
+    .uk-column-1-4\@xl { column-count: 4; }
+
+    .uk-column-1-5\@xl { column-count: 5; }
+
+    .uk-column-1-6\@xl { column-count: 6; }
+}
+
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+
+.uk-column-span { column-span: all; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-column-misc) {
+    @include hook-column-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --column-gutter: var(--global-gutter);
+    --column-gutter-l: var(--global-medium-gutter);
+    --column-divider-rule-color: var(--global-border);
+    --column-divider-rule-width: $column-divider-rule-width;
+
+    // Inverse
+    --inverse-column-divider-rule-color: var(--inverse-global-border);
+}

package/dist/cjs/styles/comment.scss

@@ -0,0 +1,189 @@
+// Name:            Comment
+// Description:     Component to create nested comments
+//
+// Component:       `uk-comment`
+//
+// Sub-objects:     `uk-comment-body`
+//                  `uk-comment-header`
+//                  `uk-comment-title`
+//                  `uk-comment-meta`
+//                  `uk-comment-avatar`
+//                  `uk-comment-list`
+//
+// Modifier:        `uk-comment-primary`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+
+.uk-comment {
+    @if mixin-exists(hook-comment) {
+        @include hook-comment;
+    }
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-comment-body {
+    display: flow-root;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    @if mixin-exists(hook-comment-body) {
+        @include hook-comment-body;
+    }
+}
+
+.uk-comment-header {
+    display: flow-root;
+    margin-bottom: var(--comment-header-margin-bottom);
+    @if mixin-exists(hook-comment-header) {
+        @include hook-comment-header;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-comment-body > :last-child,
+.uk-comment-header > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-comment-title {
+    font-size: var(--comment-title-font-size);
+    line-height: var(--comment-title-line-height);
+    @if mixin-exists(hook-comment-title) {
+        @include hook-comment-title;
+    }
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-comment-meta {
+    color: var(--comment-meta-color);
+    font-size: var(--comment-meta-font-size);
+    line-height: var(--comment-meta-line-height);
+    @if mixin-exists(hook-comment-meta) {
+        @include hook-comment-meta;
+    }
+}
+
+
+/* Avatar
+ ========================================================================== */
+
+.uk-comment-avatar {
+    @if mixin-exists(hook-comment-avatar) {
+        @include hook-comment-avatar;
+    }
+}
+
+
+/* List
+ ========================================================================== */
+
+.uk-comment-list {
+    list-style: none;
+    padding: 0;
+}
+
+/* Adjacent siblings */
+.uk-comment-list > :nth-child(n+2) {
+    margin-top: var(--comment-list-margin-top);
+    @if mixin-exists(hook-comment-list-adjacent) {
+        @include hook-comment-list-adjacent;
+    }
+}
+
+/*
+ * Sublists
+ * Note: General sibling selector allows reply block between comment and sublist
+ */
+
+.uk-comment-list .uk-comment ~ ul {
+    list-style: none;
+    margin: var(--comment-list-margin-top) 0 0 0;
+    padding-left: var(--comment-list-padding-left);
+    @if mixin-exists(hook-comment-list-sub) {
+        @include hook-comment-list-sub;
+    }
+}
+
+/* Tablet and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-comment-list .uk-comment ~ ul {
+        padding-left: var(--comment-list-padding-left-m);
+    }
+}
+
+/* Adjacent siblings */
+.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
+    margin-top: var(--comment-list-margin-top);
+    @if mixin-exists(hook-comment-list-sub-adjacent) {
+        @include hook-comment-list-sub-adjacent;
+    }
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-comment-primary {
+    @if mixin-exists(hook-comment-primary) {
+        @include hook-comment-primary;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-comment-misc) {
+    @include hook-comment-misc;
+}
+
+// @mixin hook-comment() {}
+// @mixin hook-comment-body() {}
+// @mixin hook-comment-header() {}
+// @mixin hook-comment-title() {}
+// @mixin hook-comment-meta() {}
+// @mixin hook-comment-avatar() {}
+// @mixin hook-comment-list-adjacent() {}
+// @mixin hook-comment-list-sub() {}
+// @mixin hook-comment-list-sub-adjacent() {}
+// @mixin hook-comment-primary() {}
+// @mixin hook-comment-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --comment-header-margin-bottom: var(--global-margin);
+    --comment-title-font-size: var(--global-medium-font-size);
+    --comment-title-line-height: #{$comment-title-line-height};
+    --comment-meta-font-size: var(--global-small-font-size);
+    --comment-meta-line-height: #{$comment-meta-line-height};
+    --comment-meta-color: var(--global-muted-color);
+    --comment-list-margin-top: var(--global-large-margin);
+    --comment-list-padding-left: #{$comment-list-padding-left};
+    --comment-list-padding-left-m: #{$comment-list-padding-left-m};
+}

package/dist/cjs/styles/container.scss

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

package/dist/cjs/styles/control.scss

@@ -0,0 +1,5 @@
+@import '../components/Control/index.scss';
+@import '../components/Control/Input/Number/index.scss';
+@import '../components/Control/Checkbox/index.scss';
+@import '../components/Control/Radio/index.scss';
+@import '../components/Control/Select/index.scss';

package/dist/cjs/styles/cover.scss

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

package/dist/cjs/styles/description-list.scss

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

package/dist/cjs/styles/divider.scss

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

package/dist/cjs/styles/dotnav.scss

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

package/dist/cjs/styles/drawer.scss

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

package/dist/cjs/styles/drop.scss

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

package/dist/cjs/styles/dropdown.scss

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

package/dist/cjs/styles/flex.scss

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

package/dist/cjs/styles/form.scss

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

package/dist/cjs/styles/grid.scss

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

package/dist/cjs/styles/heading.scss

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

package/dist/cjs/styles/height.scss

@@ -0,0 +1,71 @@
+// Name:            Height
+// Description:     Utilities for heights
+//
+// Component:       `uk-height-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Height
+ ========================================================================== */
+
+[class*='uk-height'] { box-sizing: border-box; }
+
+/*
+ * Only works if parent element has a height set
+ */
+
+.uk-height-1-1 { height: 100%; }
+
+/*
+ * Useful to create image teasers
+ */
+
+.uk-height-viewport { min-height: 100vh; }
+
+/*
+ * Pixel
+ * Useful for `overflow: auto`
+ */
+
+.uk-height-small { height: var(--height-small-height); }
+
+.uk-height-medium { height: var(--height-medium-height); }
+
+.uk-height-large { height: var(--height-large-height); }
+
+.uk-height-xlarge { height: var(--height-large-height); }
+
+.uk-height-max-small { max-height: var(--height-small-height); }
+
+.uk-height-max-medium { max-height: var(--height-medium-height); }
+
+.uk-height-max-large { max-height: var(--height-large-height); }
+
+.uk-height-max-xlarge { max-height: var(--height-xlarge-height); }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-height-misc) {
+    @include hook-height-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --height-small-height: #{$height-small-height};
+    --height-medium-height: #{$height-medium-height};
+    --height-large-height: #{$height-large-height};
+    --height-xlarge-height: #{$height-xlarge-height};
+}

package/dist/cjs/styles/icon.scss

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

package/dist/cjs/styles/iconnav.scss

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

package/dist/cjs/styles/inverse.scss

@@ -0,0 +1,54 @@
+// Name:            Inverse
+// Description:     Inverse component style for light or dark backgrounds
+//
+// Component:       `uk-light`
+//                  `uk-dark`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Inverse
+ ========================================================================== */
+
+/*
+ * Implemented class depends on the general theme color
+ * `uk-light` is for light colors on dark backgrounds
+ * `uk-dark` is for dark colors on light backgrounds
+ */
+
+@if $inverse-global-color-mode == light {
+    .uk-light {
+        @if mixin-exists(hook-inverse) {
+            @include hook-inverse;
+        }
+    }
+}
+
+@if $inverse-global-color-mode == dark {
+    .uk-dark {
+        @if mixin-exists(hook-inverse) {
+            @include hook-inverse;
+        }
+    }
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --inverse-global-color: #{$inverse-global-color};
+    --inverse-global-emphasis-color: #{$inverse-global-emphasis-color};
+    --inverse-global-muted-color: #{$inverse-global-muted-color};
+    --inverse-global-inverse-color: #{$inverse-global-inverse-color};
+    --inverse-global-primary-background: #{$inverse-global-primary-background};
+    --inverse-global-muted-background: #{$inverse-global-muted-background};
+    --inverse-global-border: #{$inverse-global-border};
+}

package/dist/cjs/styles/label.scss

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

package/dist/cjs/styles/leader.scss

@@ -0,0 +1,91 @@
+// Name:            Leader
+// Description:     Component to create dot leaders
+//
+// Component:       `uk-leader`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   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;
+    @if  mixin-exists(hook-leader) {
+        @include hook-leader;
+    }
+}
+
+/*
+ * 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); }
+
+
+// Hooks
+// ========================================================================
+
+@if  mixin-exists(hook-leader-misc) {
+    @include hook-leader-misc;
+}
+
+// @mixin hook-leader() {}
+// @mixin hook-leader-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    .uk-leader-fill::after {
+        @if  mixin-exists(hook-inverse-leader) {
+            @include hook-inverse-leader;
+        }
+    }
+}
+
+// @mixin hook-inverse-leader() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --leader-fill-content: #{$leader-fill-content};
+    --leader-fill-margin-left: var(--global-small-gutter);
+    --uk-leader-fill-content: var(--leader-fill-content);
+}

package/dist/cjs/styles/link.scss

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

package/dist/cjs/styles/list.scss

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