@broxus/react-uikit 0.1.0

package/dist/cjs/styles/pagination.scss

@@ -0,0 +1,187 @@
+// Name:            Pagination
+// Description:     Component to create a page navigation
+//
+// Component:       `uk-pagination`
+//
+// Adopted:         `uk-pagination-next`
+//                  `uk-pagination-previous`
+//
+// States:          `uk-active`
+//                  `uk-disabled`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Pagination
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+
+.uk-pagination {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin-left: calc(var(--pagination-margin-horizontal) * -1);
+
+    /* 3 */
+    padding: 0;
+    @if mixin-exists(hook-pagination) {
+        @include hook-pagination;
+    }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-pagination > * {
+    /* 1 */
+    flex: none;
+
+    /* 2 */
+    padding-left: var(--pagination-margin-horizontal);
+
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+
+.uk-pagination > * > * {
+    color: var(--pagination-item-color);
+
+    /* 1 */
+    display: block;
+
+    /* 2 */
+    padding: var(--pagination-item-padding-vertical) var(--pagination-item-padding-horizontal);
+    @if mixin-exists(hook-pagination-item) {
+        @include hook-pagination-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-pagination > * > :hover,
+.uk-pagination > * > :focus {
+    color: var(--pagination-item-hover-color);
+    text-decoration: var(--pagination-item-hover-text-decoration);
+    @if mixin-exists(hook-pagination-item-hover) {
+        @include hook-pagination-item-hover;
+    }
+}
+
+/* Active */
+.uk-pagination > .uk-active > * {
+    color: var(--pagination-item-active-color);
+    @if mixin-exists(hook-pagination-item-active) {
+        @include hook-pagination-item-active;
+    }
+}
+
+/* Disabled */
+.uk-pagination > .uk-disabled > * {
+    color: var(--pagination-item-disabled-color);
+    @if mixin-exists(hook-pagination-item-disabled) {
+        @include hook-pagination-item-disabled;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-pagination-misc) {
+    @include hook-pagination-misc;
+}
+
+// @mixin hook-pagination() {}
+// @mixin hook-pagination-item() {}
+// @mixin hook-pagination-item-hover() {}
+// @mixin hook-pagination-item-active() {}
+// @mixin hook-pagination-item-disabled() {}
+// @mixin hook-pagination-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    .uk-pagination > * > * {
+        color: var(--inverse-pagination-item-color);
+        @if mixin-exists(hook-inverse-pagination-item) {
+            @include hook-inverse-pagination-item;
+        }
+    }
+
+    .uk-pagination > * > :hover,
+    .uk-pagination > * > :focus {
+        color: var(--inverse-pagination-item-hover-color);
+        @if mixin-exists(hook-inverse-pagination-item-hover) {
+            @include hook-inverse-pagination-item-hover;
+        }
+    }
+
+    .uk-pagination > .uk-active > * {
+        color: var(--inverse-pagination-item-active-color);
+        @if mixin-exists(hook-inverse-pagination-item-active) {
+            @include hook-inverse-pagination-item-active;
+        }
+    }
+
+    .uk-pagination > .uk-disabled > * {
+        color: var(--inverse-pagination-item-disabled-color);
+        @if mixin-exists(hook-inverse-pagination-item-disabled) {
+            @include hook-inverse-pagination-item-disabled;
+        }
+    }
+}
+
+// @mixin hook-inverse-pagination-item() {}
+// @mixin hook-inverse-pagination-item-hover() {}
+// @mixin hook-inverse-pagination-item-active() {}
+// @mixin hook-inverse-pagination-item-disabled() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --pagination-margin-horizontal: $pagination-margin-horizontal;
+    --pagination-item-padding-vertical: $pagination-item-padding-vertical;
+    --pagination-item-padding-horizontal: $pagination-item-padding-horizontal;
+    --pagination-item-color: var(--global-muted-color);
+    --pagination-item-hover-color: var(--global-color);
+    --pagination-item-hover-text-decoration: $pagination-item-hover-text-decoration;
+    --pagination-item-active-color: var(--global-color);
+    --pagination-item-disabled-color: var(--global-muted-color);
+
+    // Inverse
+    --inverse-pagination-item-color: var(--inverse-global-muted-color);
+    --inverse-pagination-item-hover-color: var(--inverse-global-color);
+    --inverse-pagination-item-active-color: var(--inverse-global-color);
+    --inverse-pagination-item-disabled-color: var(--inverse-global-muted-color);
+}

package/dist/cjs/styles/placeholder.scss

@@ -0,0 +1,57 @@
+// Name:            Placeholder
+// Description:     Component to create placeholder boxes
+//
+// Component:       `uk-placeholder`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Placeholder
+ ========================================================================== */
+
+.uk-placeholder {
+    background: var(--placeholder-background);
+    margin-bottom: var(--placeholder-margin-vertical);
+    padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
+    @if mixin-exists(hook-placeholder) {
+        @include hook-placeholder;
+    }
+}
+
+/* Add margin if adjacent element */
+* + .uk-placeholder { margin-top: var(--placeholder-margin-vertical); }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-placeholder > :last-child { margin-bottom: 0; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-placeholder-misc) {
+    @include hook-placeholder-misc;
+}
+
+// @mixin hook-placeholder() {}
+// @mixin hook-placeholder-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --placeholder-margin-vertical: var(--global-margin);
+    --placeholder-padding-vertical: var(--global-gutter);
+    --placeholder-padding-horizontal: var(--global-gutter);
+    --placeholder-background: var(--global-muted-background);
+}

package/dist/cjs/styles/position.scss

@@ -0,0 +1,305 @@
+// Name:            Position
+// Description:     Utilities to position content
+//
+// Component:       `uk-position-absolute`
+//                  `uk-position-relative`
+//                  `uk-position-z-index`
+//                  `uk-position-top`
+//                  `uk-position-bottom`
+//                  `uk-position-left`
+//                  `uk-position-right`
+//                  `uk-position-top-left`
+//                  `uk-position-top-center`
+//                  `uk-position-top-right`
+//                  `uk-position-bottom-left`
+//                  `uk-position-bottom-center`
+//                  `uk-position-bottom-right`
+//                  `uk-position-center`
+//                  `uk-position-center-left`
+//                  `uk-position-center-right`
+//                  `uk-position-cover`
+//
+// Modifiers:       `uk-position-small`
+//                  `uk-position-medium`
+//                  `uk-position-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Position
+ ========================================================================== */
+
+
+/* Directions
+ ========================================================================== */
+
+/*
+ * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
+ */
+
+[class*='uk-position-top'],
+[class*='uk-position-bottom'],
+[class*='uk-position-left'],
+[class*='uk-position-right'],
+[class*='uk-position-center'] {
+    /* 1 */
+    max-width: 100%;
+    position: absolute !important;
+}
+
+
+/* Edges
+ ========================================================================== */
+
+/* Don't use `width: 100%` because it is wrong if the parent has padding. */
+.uk-position-top {
+    left: 0;
+    right: 0;
+    top: 0;
+}
+
+.uk-position-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.uk-position-left {
+    bottom: 0;
+    left: 0;
+    top: 0;
+}
+
+.uk-position-right {
+    bottom: 0;
+    right: 0;
+    top: 0;
+}
+
+
+/* Corners
+ ========================================================================== */
+
+.uk-position-top-left {
+    left: 0;
+    top: 0;
+}
+
+.uk-position-top-right {
+    right: 0;
+    top: 0;
+}
+
+.uk-position-bottom-left {
+    bottom: 0;
+    left: 0;
+}
+
+.uk-position-bottom-right {
+    bottom: 0;
+    right: 0;
+}
+
+/*
+ * Center
+ * 1. Fix text wrapping if content is larger than 50% of the container.
+ */
+
+.uk-position-center {
+    box-sizing: border-box;
+    left: 50%;
+    max-width: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    /* 1 */
+    width: max-content;
+}
+
+/* Vertical */
+[class*='uk-position-center-left'],
+[class*='uk-position-center-right'] {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.uk-position-center-left { left: 0; }
+
+.uk-position-center-right { right: 0; }
+
+.uk-position-center-left-out {
+    right: 100%;
+    width: max-content;
+}
+
+.uk-position-center-right-out {
+    left: 100%;
+    width: max-content;
+}
+
+/* Horizontal */
+.uk-position-top-center,
+.uk-position-bottom-center {
+    box-sizing: border-box;
+    left: 50%;
+    max-width: 100%;
+    transform: translateX(-50%);
+
+    /* 1 */
+    width: max-content;
+}
+
+.uk-position-top-center { top: 0; }
+
+.uk-position-bottom-center { bottom: 0; }
+
+
+/* Cover
+ ========================================================================== */
+
+.uk-position-cover {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+
+/* Utility
+ ========================================================================== */
+
+.uk-position-relative { position: relative !important; }
+
+.uk-position-absolute { position: absolute !important; }
+
+.uk-position-fixed { position: fixed !important; }
+
+.uk-position-z-index { z-index: 1; }
+
+
+/* Margin modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-position-small {
+    margin: var(--position-small-margin);
+    max-width: calc(100% - var(--position-small-margin) * 2);
+}
+
+.uk-position-small.uk-position-center {
+    transform: translate(-50%, -50%)
+        translate(unquote('calc(var(--position-small-margin) * -1)')), unquote('calc(var(--position-small-margin) * -1)');
+}
+
+.uk-position-small[class*='uk-position-center-left'],
+.uk-position-small[class*='uk-position-center-right'] {
+    transform: translateY(-50%) translateY(unquote('calc(var(--position-small-margin) * -1)'));
+}
+
+.uk-position-small.uk-position-top-center,
+.uk-position-small.uk-position-bottom-center {
+    transform: translateX(-50%) translateX(unquote('calc(var(--position-small-margin) * -1)'));
+}
+
+/*
+ * Medium
+ */
+
+.uk-position-medium {
+    margin: var(--position-medium-margin);
+    max-width: calc(100% - var(--position-medium-margin) * 2);
+}
+
+.uk-position-medium.uk-position-center {
+    transform: translate(-50%, -50%)
+        translate(unquote('calc(var(--position-medium-margin) * -1)')), unquote('calc(var(--position-medium-margin) * -1)');
+}
+
+.uk-position-medium[class*='uk-position-center-left'],
+.uk-position-medium[class*='uk-position-center-right'] {
+    transform: translateY(-50%) translateY(unquote('calc(var(--position-medium-margin) * -1)'));
+}
+
+.uk-position-medium.uk-position-top-center,
+.uk-position-medium.uk-position-bottom-center {
+    transform: translateX(-50%) translateX(unquote('calc(var(--position-medium-margin) * -1)'));
+}
+
+/*
+ * Large
+ */
+
+.uk-position-large {
+    margin: var(--position-large-margin);
+    max-width: calc(100% - var(--position-large-margin) * 2);
+}
+
+.uk-position-large.uk-position-center {
+    transform: translate(-50%, -50%)
+        translate(unquote('calc(var(--position-large-margin) * -1)')), unquote('calc(var(--position-large-margin) * -1)');
+}
+
+.uk-position-large[class*='uk-position-center-left'],
+.uk-position-large[class*='uk-position-center-right'] {
+    transform: translateY(-50%) translateY(unquote('calc(var(--position-large-margin) * -1)'));
+}
+
+.uk-position-large.uk-position-top-center,
+.uk-position-large.uk-position-bottom-center {
+    transform: translateX(-50%) translateX(unquote('calc(var(--position-large-margin) * -1)'));
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-position-large {
+        margin: var(--position-large-margin-l);
+        max-width: calc(100% - var(--position-large-margin-l) * 2);
+    }
+
+    .uk-position-large.uk-position-center {
+        transform: translate(-50%, -50%)
+            translate(unquote('calc(var(--position-large-margin-l) * -1)')), unquote('calc(var(--position-large-margin-l) * -1)');
+    }
+
+    .uk-position-large[class*='uk-position-center-left'],
+    .uk-position-large[class*='uk-position-center-right'] {
+        transform: translateY(-50%) translateY(unquote('calc(var(--position-large-margin-l) * -1)'));
+    }
+
+    .uk-position-large.uk-position-top-center,
+    .uk-position-large.uk-position-bottom-center {
+        transform: translateX(-50%) translateX(unquote('calc(var(--position-large-margin-l) * -1)'));
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-position-misc) {
+    @include hook-position-misc;
+}
+
+// @mixin hook-position-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --position-small-margin: var(--global-small-gutter);
+    --position-medium-margin: var(--global-gutter);
+    --position-large-margin: var(--global-gutter);
+    --position-large-margin-l: #{$position-large-margin-l};
+}

package/dist/cjs/styles/print.scss

@@ -0,0 +1,59 @@
+// Name:            Print
+// Description:     Optimize page for printing
+//
+// Adapted from http://github.com/h5bp/html5-boilerplate
+//
+// Modifications:   Removed link `href` and `title` related rules
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Print
+ ========================================================================== */
+
+@media print {
+    *, *::before, *::after {
+        background: transparent !important;
+        box-shadow: none !important;
+        color: black !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited { text-decoration: underline; }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead { display: table-header-group; }
+
+    tr,
+    img { page-break-inside: avoid; }
+
+    img { max-width: 100% !important; }
+
+    @page { margin: 0.5cm; }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 { page-break-after: avoid; }
+
+    @if mixin-exists(hook-print) {
+        @include hook-print;
+    }
+}
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-print() {}