@broxus/react-uikit 0.1.0

package/dist/cjs/styles/slidenav.scss

@@ -0,0 +1,168 @@
+// Name:            Slidenav
+// Description:     Component to create previous/next icon navigations
+//
+// Component:       `uk-slidenav`
+//
+// Sub-objects:     `uk-slidenav-container`
+//
+// Modifiers:       `uk-slidenav-previous`
+//                  `uk-slidenav-next`
+//                  `uk-slidenav-large`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Slidenav
+ ========================================================================== */
+
+/*
+ * Adopts `uk-icon`
+ */
+
+.uk-slidenav {
+    color: var(--slidenav-color);
+    padding: var(--slidenav-padding-vertical) var(--slidenav-padding-horizontal);
+    @if mixin-exists(hook-slidenav) {
+        @include hook-slidenav;
+    }
+}
+
+/* Hover + Focus */
+.uk-slidenav:hover,
+.uk-slidenav:focus {
+    color: var(--slidenav-hover-color);
+    outline: none;
+    @if mixin-exists(hook-slidenav-hover) {
+        @include hook-slidenav-hover;
+    }
+}
+
+/* OnClick */
+.uk-slidenav:active {
+    color: var(--slidenav-active-color);
+    @if mixin-exists(hook-slidenav-active) {
+        @include hook-slidenav-active;
+    }
+}
+
+
+/* Icon modifier
+ ========================================================================== */
+
+/*
+ * Previous
+ */
+
+.uk-slidenav-previous {
+    @if mixin-exists(hook-slidenav-previous) {
+        @include hook-slidenav-previous;
+    }
+}
+
+/*
+ * Next
+ */
+
+.uk-slidenav-next {
+    @if mixin-exists(hook-slidenav-next) {
+        @include hook-slidenav-next;
+    }
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-slidenav-large {
+    padding: var(--slidenav-large-padding-vertical) var(--slidenav-large-padding-horizontal);
+    @if mixin-exists(hook-slidenav-large) {
+        @include hook-slidenav-large;
+    }
+}
+
+
+/* Container
+ ========================================================================== */
+
+.uk-slidenav-container {
+    display: flex;
+    @if mixin-exists(hook-slidenav-container) {
+        @include hook-slidenav-container;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-slidenav-misc) {
+    @include hook-slidenav-misc;
+}
+
+// @mixin hook-slidenav() {}
+// @mixin hook-slidenav-hover() {}
+// @mixin hook-slidenav-active() {}
+// @mixin hook-slidenav-previous() {}
+// @mixin hook-slidenav-next() {}
+// @mixin hook-slidenav-large() {}
+// @mixin hook-slidenav-container() {}
+// @mixin hook-slidenav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    .uk-slidenav {
+        color: var(--inverse-slidenav-color);
+        @if mixin-exists(hook-inverse-slidenav) {
+            @include hook-inverse-slidenav;
+        }
+    }
+
+    .uk-slidenav:hover,
+    .uk-slidenav:focus {
+        color: var(--inverse-slidenav-hover-color);
+        @if mixin-exists(hook-inverse-slidenav-hover) {
+            @include hook-inverse-slidenav-hover;
+        }
+    }
+
+    .uk-slidenav:active {
+        color: var(--inverse-slidenav-active-color);
+        @if mixin-exists(hook-inverse-slidenav-active) {
+            @include hook-inverse-slidenav-active;
+        }
+    }
+}
+
+// @mixin hook-inverse-slidenav() {}
+// @mixin hook-inverse-slidenav-hover() {}
+// @mixin hook-inverse-slidenav-active() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --slidenav-padding-vertical: #{$slidenav-padding-vertical};
+    --slidenav-padding-horizontal: #{$slidenav-padding-horizontal};
+    --slidenav-color: fade($global-color, 50%);
+    --slidenav-hover-color: fade($global-color, 90%);
+    --slidenav-active-color: fade($global-color, 50%);
+    --slidenav-large-padding-vertical: #{$slidenav-large-padding-vertical};
+    --slidenav-large-padding-horizontal: var(--slidenav-large-padding-vertical);
+
+    // Inverse
+    --inverse-slidenav-color: fade($inverse-global-color, 70%);
+    --inverse-slidenav-hover-color: fade($inverse-global-color, 95%);
+    --inverse-slidenav-active-color: fade($inverse-global-color, 70%);
+}
+

package/dist/cjs/styles/spinner.scss

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

package/dist/cjs/styles/sticky.scss

@@ -0,0 +1,60 @@
+// Name:            Sticky
+// Description:     Component to make elements sticky in the viewport
+//
+// Component:       `uk-sticky`
+//
+// Modifier:        `uk-sticky-fixed`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Sticky
+ ========================================================================== */
+
+/*
+ * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
+ */
+
+.uk-sticky-fixed {
+    /* 1 */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    margin: 0 !important;
+    z-index: var(--sticky-z-index);
+}
+
+/*
+ * Faster animations
+ */
+
+.uk-sticky[class*='uk-animation-'] { animation-duration: var(--sticky-animation-duration); }
+
+.uk-sticky.uk-animation-reverse { animation-duration: var(--sticky-reverse-animation-duration); }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-sticky-misc) { @include hook-sticky-misc };
+
+// @mixin hook-sticky-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --sticky-z-index: #{$global-z-index - 20};
+    --sticky-animation-duration: #{$sticky-animation-duration};
+    --sticky-reverse-animation-duration: #{$sticky-reverse-animation-duration};
+}

package/dist/cjs/styles/subnav.scss

@@ -0,0 +1,365 @@
+// Name:            Subnav
+// Description:     Component to create a sub navigation
+//
+// Component:       `uk-subnav`
+//
+// Modifiers:       `uk-subnav-divider`
+//                  `uk-subnav-pill`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Subnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
+ */
+
+.uk-subnav {
+    /* 2 */
+    align-items: center;
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 3 */
+    margin-left: calc(var(--subnav-margin-horizontal) * -1);
+
+    /* 4 */
+    padding: 0;
+    @if mixin-exists(hook-subnav) {
+        @include hook-subnav;
+    }
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+
+.uk-subnav > * {
+    /* 1 */
+    flex: none;
+
+    /* 2 */
+    padding-left: var(--subnav-margin-horizontal);
+
+    /* 3 */
+    position: relative;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * Using `:first-child` instead of `a` to support `span` elements for text
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
+ */
+
+.uk-subnav > * > :first-child {
+    align-items: center;
+
+    /* 3 */
+    color: var(--subnav-item-color);
+
+    /* 2 */
+    column-gap: 0.25em;
+
+    /* 1 */
+    display: flex;
+    @if mixin-exists(hook-subnav-item) {
+        @include hook-subnav-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-subnav > * > a:hover,
+.uk-subnav > * > a:focus {
+    color: var(--subnav-item-hover-color);
+    outline: none;
+    text-decoration: var(--subnav-item-hover-text-decoration);
+    @if mixin-exists(hook-subnav-item-hover) {
+        @include hook-subnav-item-hover;
+    }
+}
+
+/* Active */
+.uk-subnav > .uk-active > a {
+    color: var(--subnav-item-active-color);
+    @if mixin-exists(hook-subnav-item-active) {
+        @include hook-subnav-item-active;
+    }
+}
+
+
+/* Divider modifier
+ ========================================================================== */
+
+/*
+ * Set gutter
+ */
+
+.uk-subnav-divider {
+    margin-left: calc((var(--subnav-divider-margin-horizontal) * 2 + var(--subnav-divider-border-width)) * -1);
+}
+
+/*
+ * Align items and divider vertically
+ */
+
+.uk-subnav-divider > * {
+    align-items: center;
+    display: flex;
+}
+
+/*
+ * Divider
+ * 1. `nth-child` makes it also work without JS if it's only one row
+ */
+
+.uk-subnav-divider > ::before {
+    border-left: var(--subnav-divider-border-width) solid transparent;
+    content: '';
+    height: var(--subnav-divider-border-height);
+    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(subnav-margin-horizontal));
+    margin-right: var(--subnav-divider-margin-horizontal);
+}
+
+/* 1 */
+.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+    border-left-color: var(--subnav-divider-border);
+    @if mixin-exists(hook-subnav-divider) {
+        @include hook-subnav-divider;
+    }
+}
+
+
+/* Pill modifier
+ ========================================================================== */
+
+.uk-subnav-pill > * > :first-child {
+    background: var(--subnav-pill-item-background);
+    color: var(--subnav-pill-item-color);
+    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
+    @if mixin-exists(hook-subnav-pill-item) {
+        @include hook-subnav-pill-item;
+    }
+}
+
+/* Hover + Focus */
+.uk-subnav-pill > * > a:hover,
+.uk-subnav-pill > * > a:focus {
+    background-color: var(--subnav-pill-item-hover-background);
+    color: var(--subnav-pill-item-hover-color);
+    @if mixin-exists(hook-subnav-pill-item-hover) {
+        @include hook-subnav-pill-item-hover;
+    }
+}
+
+/* OnClick */
+.uk-subnav-pill > * > a:active {
+    background-color: var(--subnav-pill-item-onclick-background);
+    color: var(--subnav-pill-item-onclick-color);
+    @if mixin-exists(hook-subnav-pill-item-onclick) {
+        @include hook-subnav-pill-item-onclick;
+    }
+}
+
+/* Active */
+.uk-subnav-pill > .uk-active > a {
+    background-color: var(--subnav-pill-item-active-background);
+    color: var(--subnav-pill-item-active-color);
+    @if mixin-exists(hook-subnav-pill-item-active) {
+        @include hook-subnav-pill-item-active;
+    }
+}
+
+
+/* Disabled
+ * The same for all style modifiers
+ ========================================================================== */
+
+.uk-subnav > .uk-disabled > a {
+    color: var(--subnav-item-disabled-color);
+    @if mixin-exists(hook-subnav-item-disabled) {
+        @include hook-subnav-item-disabled;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-subnav-misc) {
+    @include hook-subnav-misc;
+}
+
+// @mixin hook-subnav() {}
+// @mixin hook-subnav-item() {}
+// @mixin hook-subnav-item-hover() {}
+// @mixin hook-subnav-item-active() {}
+// @mixin hook-subnav-divider() {}
+// @mixin hook-subnav-pill-item() {}
+// @mixin hook-subnav-pill-item-hover() {}
+// @mixin hook-subnav-pill-item-onclick() {}
+// @mixin hook-subnav-pill-item-active() {}
+// @mixin hook-subnav-item-disabled() {}
+// @mixin hook-subnav-misc() {}
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    .uk-subnav > * > :first-child {
+        color: var(--inverse-subnav-item-color);
+        @if mixin-exists(hook-inverse-subnav-item) {
+            @include hook-inverse-subnav-item;
+        }
+    }
+
+    .uk-subnav > * > a:hover,
+    .uk-subnav > * > a:focus {
+        color: var(--inverse-subnav-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-item-hover) {
+            @include hook-inverse-subnav-item-hover;
+        }
+    }
+
+    .uk-subnav > .uk-active > a {
+        color: var(--inverse-subnav-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-item-active) {
+            @include hook-inverse-subnav-item-active;
+        }
+    }
+
+    //
+    // Divider
+    //
+
+    .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+        border-left-color: var(--inverse-subnav-divider-border);
+        @if mixin-exists(hook-inverse-subnav-divider) {
+            @include hook-inverse-subnav-divider;
+        }
+    }
+
+    //
+    // Pill
+    //
+
+    .uk-subnav-pill > * > :first-child {
+        background-color: var(--inverse-subnav-pill-item-background);
+        color: var(--inverse-subnav-pill-item-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item) {
+            @include hook-inverse-subnav-pill-item;
+        }
+    }
+
+    .uk-subnav-pill > * > a:hover,
+    .uk-subnav-pill > * > a:focus {
+        background-color: var(--inverse-subnav-pill-item-hover-background);
+        color: var(--inverse-subnav-pill-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-hover) {
+            @include hook-inverse-subnav-pill-item-hover;
+        }
+    }
+
+    .uk-subnav-pill > * > a:active {
+        background-color: var(--inverse-subnav-pill-item-onclick-background);
+        color: var(--inverse-subnav-pill-item-onclick-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-onclick) {
+            @include hook-inverse-subnav-pill-item-onclick;
+        }
+    }
+
+    .uk-subnav-pill > .uk-active > a {
+        background-color: var(--inverse-subnav-pill-item-active-background);
+        color: var(--inverse-subnav-pill-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-active) {
+            @include hook-inverse-subnav-pill-item-active;
+        }
+    }
+
+    //
+    // Disabled
+    //
+
+    .uk-subnav > .uk-disabled > a {
+        color: var(--inverse-subnav-item-disabled-color);
+        @if mixin-exists(hook-inverse-subnav-item-disabled) {
+            @include hook-inverse-subnav-item-disabled;
+        }
+    }
+}
+
+// @mixin hook-inverse-subnav-item() {}
+// @mixin hook-inverse-subnav-item-hover() {}
+// @mixin hook-inverse-subnav-item-active() {}
+// @mixin hook-inverse-subnav-divider() {}
+// @mixin hook-inverse-subnav-pill-item() {}
+// @mixin hook-inverse-subnav-pill-item-hover() {}
+// @mixin hook-inverse-subnav-pill-item-onclick() {}
+// @mixin hook-inverse-subnav-pill-item-active() {}
+// @mixin hook-inverse-subnav-item-disabled() {}
+
+// Inverse
+// ========================================================================
+
+:root {
+    --subnav-margin-horizontal: $subnav-margin-horizontal;
+    --subnav-item-color: $global-muted-color;
+    --subnav-item-hover-color: $global-color;
+    --subnav-item-hover-text-decoration: $subnav-item-hover-text-decoration;
+    --subnav-item-active-color: $global-emphasis-color;
+    --subnav-divider-margin-horizontal: $subnav-margin-horizontal;
+    --subnav-divider-border-height: $subnav-divider-border-height;
+    --subnav-divider-border-width: $global-border-width;
+    --subnav-divider-border: $global-border;
+    --subnav-pill-item-padding-vertical: $subnav-pill-item-padding-vertical;
+    --subnav-pill-item-padding-horizontal: $subnav-pill-item-padding-horizontal;
+    --subnav-pill-item-background: $subnav-pill-item-background;
+    --subnav-pill-item-color: $subnav-item-color;
+    --subnav-pill-item-hover-background: $global-muted-background;
+    --subnav-pill-item-hover-color: $global-color;
+    --subnav-pill-item-onclick-background: $subnav-pill-item-hover-background;
+    --subnav-pill-item-onclick-color: $subnav-pill-item-hover-color;
+    --subnav-pill-item-active-background: $global-primary-background;
+    --subnav-pill-item-active-color: $global-inverse-color;
+    --subnav-item-disabled-color: $global-muted-color;
+
+    // Inverse
+    --inverse-subnav-item-color: $inverse-global-muted-color;
+    --inverse-subnav-item-hover-color: $inverse-global-color;
+    --inverse-subnav-item-active-color: $inverse-global-emphasis-color;
+    --inverse-subnav-divider-border: $inverse-global-border;
+    --inverse-subnav-pill-item-background: $inverse-subnav-pill-item-background;
+    --inverse-subnav-pill-item-color: $inverse-global-muted-color;
+    --inverse-subnav-pill-item-hover-background: $inverse-global-muted-background;
+    --inverse-subnav-pill-item-hover-color: $inverse-global-color;
+    --inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background;
+    --inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color;
+    --inverse-subnav-pill-item-active-background: $inverse-global-primary-background;
+    --inverse-subnav-pill-item-active-color: $inverse-global-inverse-color;
+    --inverse-subnav-item-disabled-color: $inverse-global-muted-color;
+}

package/dist/cjs/styles/svg.scss

@@ -0,0 +1,46 @@
+// Name:            SVG
+// Description:     Component to style SVGs
+//
+// Component:       `uk-svg`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: SVG
+ ========================================================================== */
+
+/*
+ * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 2. Set the fill and stroke color of all SVG elements to the current text color
+ */
+
+/* 1 */
+.uk-svg,
+
+    /* 2 */
+.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
+    fill: currentColor;
+}
+
+.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
+    stroke: currentColor;
+}
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+
+.uk-svg {
+    transform: translate(0, 0);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-svg-misc) {
+    @include hook-svg-misc;
+}
+
+// @mixin hook-svg-misc() {}

package/dist/cjs/styles/switcher.scss

@@ -0,0 +1,53 @@
+// Name:            Switcher
+// Description:     Component to navigate through different content panes
+//
+// Component:       `uk-switcher`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+/* ========================================================================
+   Component: Switcher
+ ========================================================================== */
+
+/*
+ * Reset list
+ */
+
+.uk-switcher {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Hide not active items
+ */
+
+.uk-switcher > :not(.uk-active) {
+    display: none;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-switcher > * > :last-child {
+    margin-bottom: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-switcher-misc) {
+    @include hook-switcher-misc;
+}
+
+// @mixin hook-switcher-misc() {}

package/dist/cjs/styles/tab.scss

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