@broxus/react-uikit 0.1.0

package/dist/cjs/styles/thumbnav.scss

@@ -0,0 +1,151 @@
+// Name:            Thumbnav
+// Description:     Component to create thumbnail navigations
+//
+// Component:       `uk-thumbnav`
+//
+// Modifier:        `uk-thumbnav-vertical`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Thumbnav
+ ========================================================================== */
+
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+
+.uk-thumbnav {
+    display: flex;
+
+    /* 1 */
+    flex-wrap: wrap;
+    list-style: none;
+
+    /* 2 */
+    margin: 0 0 0 /* 3 */ calc(var(--thumbnav-margin-horizontal) * -1);
+    padding: 0;
+    .hook-thumbnav;
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+
+.uk-thumbnav > * {
+    /* 1 */
+    padding-left: var(thumbnav-margin-horizontal);
+}
+
+
+/* Items
+ ========================================================================== */
+
+/*
+ * Items
+ */
+
+.uk-thumbnav > * > * {
+    display: inline-block;
+    .hook-thumbnav-item;
+}
+
+/* Hover + Focus */
+.uk-thumbnav > * > :hover,
+.uk-thumbnav > * > :focus {
+    outline: none;
+    .hook-thumbnav-item-hover;
+}
+
+/* Active */
+.uk-thumbnav > .uk-active > * {
+    .hook-thumbnav-item-active;
+}
+
+
+/* Modifier: 'uk-thumbnav-vertical'
+ ========================================================================== */
+
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+
+.uk-thumbnav-vertical {
+    /* 1 */
+    flex-direction: column;
+
+    /* 2 */
+    margin-left: 0;
+    margin-top: calc(var(thumbnav-margin-vertical) * -1);
+}
+
+/* 2 */
+.uk-thumbnav-vertical > * {
+    padding-left: 0;
+    padding-top: var(thumbnav-margin-vertical);
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-thumbnav-misc;
+
+.hook-thumbnav() {}
+
+.hook-thumbnav-item() {}
+
+.hook-thumbnav-item-hover() {}
+
+.hook-thumbnav-item-active() {}
+
+.hook-thumbnav-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-thumbnav > * > * {
+        .hook-inverse-thumbnav-item;
+    }
+
+    .uk-thumbnav > * > :hover,
+    .uk-thumbnav > * > :focus {
+        .hook-inverse-thumbnav-item-hover;
+    }
+
+    .uk-thumbnav > .uk-active > * {
+        .hook-inverse-thumbnav-item-active;
+    }
+
+}
+
+.hook-inverse-thumbnav-item() {}
+
+.hook-inverse-thumbnav-item-hover() {}
+
+.hook-inverse-thumbnav-item-active() {}
+
+
+// Vars
+// ========================================================================
+
+.hook-inverse() {
+    --thumbnav-margin-horizontal: @thumbnav-margin-horizontal;
+    --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
+}

package/dist/cjs/styles/tile.scss

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

package/dist/cjs/styles/tooltip.scss

@@ -0,0 +1,103 @@
+// Name:            Tooltip
+// Description:     Component to create tooltips
+//
+// Component:       `uk-tooltip`
+//
+// Modifiers        `uk-tooltip-top`
+//                  `uk-tooltip-top-left`
+//                  `uk-tooltip-top-right`
+//                  `uk-tooltip-bottom`
+//                  `uk-tooltip-bottom-left`
+//                  `uk-tooltip-bottom-right`
+//                  `uk-tooltip-left`
+//                  `uk-tooltip-right`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Tooltip
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Position
+ * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
+ * 4. Dimensions
+ * 5. Style
+ */
+
+.uk-tooltip {
+    /* 5 */
+    background: var(--tooltip-background);
+    border-radius: var(--tooltip-border-radius);
+
+    /* 4 */
+    box-sizing: border-box;
+    color: var(--tooltip-color);
+
+    /* 1 */
+    display: none;
+    font-size: var(--tooltip-font-size);
+    max-width: var(--tooltip-max-width);
+    padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+
+    /* 2 */
+    position: absolute;
+
+    /* 3 */
+    top: 0;
+    z-index: var(--tooltip-z-index);
+    @if mixin-exists(hook-tooltip) {
+        @include hook-tooltip;
+    }
+}
+
+/* Show */
+.uk-tooltip.uk-active { display: block; }
+
+
+/* Direction / Alignment modifiers
+ ========================================================================== */
+
+/* Direction */
+[class*='uk-tooltip-top'] { margin-top: calc(var(--tooltip-margin) * -1); }
+[class*='uk-tooltip-bottom'] { margin-top: var(--tooltip-margin); }
+[class*='uk-tooltip-left'] { margin-left: calc(var(--tooltip-margin) * -1); }
+[class*='uk-tooltip-right'] { margin-left: var(--tooltip-margin); }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-tooltip-misc) {
+    @include hook-tooltip-misc;
+}
+
+@mixin hook-tooltip() {}
+
+@mixin hook-tooltip-misc() {}
+
+
+// Hooks
+// ========================================================================
+
+:root {
+    --tooltip-z-index: #{$global-z-index + 30};
+    --tooltip-max-width: #{$tooltip-max-width};
+    --tooltip-padding-vertical: #{$tooltip-padding-vertical};
+    --tooltip-padding-horizontal: #{$tooltip-padding-horizontal};
+    --tooltip-background: #{$tooltip-background};
+    --tooltip-border-radius: #{$tooltip-border-radius};
+    --tooltip-color: var(--global-inverse-color);
+    --tooltip-font-size: #{$tooltip-font-size};
+    --tooltip-margin: #{$tooltip-margin};
+}

package/dist/cjs/styles/totop.scss

@@ -0,0 +1,101 @@
+// Name:            Totop
+// Description:     Component to create an icon to scroll back to top
+//
+// Component:       `uk-totop`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Totop
+ ========================================================================== */
+
+/*
+ * Addopts `uk-icon`
+ */
+
+.uk-totop {
+    color: var(--totop-color);
+    padding: var(--totop-padding);
+    .hook-totop;
+}
+
+/* Hover + Focus */
+.uk-totop:hover,
+.uk-totop:focus {
+    color: var(--totop-hover-color);
+    outline: none;
+    .hook-totop-hover;
+}
+
+/* OnClick */
+.uk-totop:active {
+    color: var(--totop-active-color);
+    .hook-totop-active;
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-totop-misc;
+
+.hook-totop() {}
+
+.hook-totop-hover() {}
+
+.hook-totop-active() {}
+
+.hook-totop-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse() {
+
+    .uk-totop {
+        color: var(--inverse-totop-color);
+        .hook-inverse-totop;
+    }
+
+    .uk-totop:hover,
+    .uk-totop:focus {
+        color: var(--inverse-totop-hover-color);
+        .hook-inverse-totop-hover;
+    }
+
+    .uk-totop:active {
+        color: var(--inverse-totop-active-color);
+        .hook-inverse-totop-active;
+    }
+
+}
+
+.hook-inverse-totop() {}
+
+.hook-inverse-totop-hover() {}
+
+.hook-inverse-totop-active() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --totop-padding: @totop-padding;
+    --totop-color: var(--global-muted-color);
+    --totop-hover-color: var(--global-color);
+    --totop-active-color: var(--global-emphasis-color);
+
+    // Inverse
+    --inverse-totop-color: var(--inverse-global-muted-color);
+    --inverse-totop-hover-color: var(--inverse-global-color);
+    --inverse-totop-active-color: var(--inverse-global-emphasis-color);
+}

package/dist/cjs/styles/transition.scss

@@ -0,0 +1,192 @@
+// Name:            Transition
+// Description:     Utilities for transitions
+//
+// Component:       `uk-transition-*`
+//
+// Modifiers:       `uk-transition-fade`
+//                  `uk-transition-scale-up`
+//                  `uk-transition-scale-down`
+//                  `uk-transition-slide-top-*`
+//                  `uk-transition-slide-bottom-*`
+//                  `uk-transition-slide-left-*`
+//                  `uk-transition-slide-right-*`
+//                  `uk-transition-opaque`
+//                  `uk-transition-slow`
+//
+// Sub-objects:     `uk-transition-toggle`,
+//                  `uk-transition-active`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Transition
+ ========================================================================== */
+
+
+/* Toggle (Hover + Focus)
+ ========================================================================== */
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-transition-toggle {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+
+.uk-transition-toggle:focus { outline: none; }
+
+
+/* Transitions
+ ========================================================================== */
+
+/*
+ * The toggle is triggered on touch devices by two methods:
+ * 1. Using `:focus` and tabindex
+ * 2. Using `:hover` and a `touchstart` event listener registered on the document
+ *    (Doesn't work on Surface touch devices)
+ *
+ * Note: Transitions don't work with `uk-position-center-*` classes because they also use `transform`,
+ *       therefore it's recommended to use an extra `div` for the transition.
+ */
+
+.uk-transition-fade,
+[class*='uk-transition-scale'],
+[class*='uk-transition-slide'] {
+    opacity: 0;
+    transition: var(--transition-duration) var(--ease-out);
+    transition-property: opacity, transform, filter;
+}
+
+/*
+ * Fade
+ */
+
+.uk-transition-toggle:hover .uk-transition-fade,
+.uk-transition-toggle:focus .uk-transition-fade,
+.uk-transition-active.uk-active .uk-transition-fade { opacity: 1; }
+
+/*
+ * Scale
+ */
+
+.uk-transition-scale-up { transform: scale(1, 1); }
+
+.uk-transition-scale-down { transform: scale(var(--transition-scale), var(--transition-scale)); }
+
+/* Show */
+.uk-transition-toggle:hover .uk-transition-scale-up,
+.uk-transition-toggle:focus .uk-transition-scale-up,
+.uk-transition-active.uk-active .uk-transition-scale-up {
+    opacity: 1;
+    transform: scale(var(--transition-scale), var(--transition-scale));
+}
+
+.uk-transition-toggle:hover .uk-transition-scale-down,
+.uk-transition-toggle:focus .uk-transition-scale-down,
+.uk-transition-active.uk-active .uk-transition-scale-down {
+    opacity: 1;
+    transform: scale(1, 1);
+}
+
+/*
+ * Slide
+ */
+
+.uk-transition-slide-top { transform: translateY(-100%); }
+
+.uk-transition-slide-bottom { transform: translateY(100%); }
+
+.uk-transition-slide-left { transform: translateX(-100%); }
+
+.uk-transition-slide-right { transform: translateX(100%); }
+
+.uk-transition-slide-top-small {
+    transform: translateY(unquote('calc(var(--transition-slide-small-translate) * -1)'));
+}
+
+.uk-transition-slide-bottom-small {
+    transform: translateY(var(--transition-slide-small-translate));
+}
+
+.uk-transition-slide-left-small {
+    transform: translateX(unquote('calc(var(--transition-slide-small-translate) * -1)'));
+}
+
+.uk-transition-slide-right-small {
+    transform: translateX(var(--transition-slide-small-translate));
+}
+
+.uk-transition-slide-top-medium {
+    transform: translateY(unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+}
+
+.uk-transition-slide-bottom-medium {
+    transform: translateY(var(--transition-slide-medium-translate));
+}
+
+.uk-transition-slide-left-medium {
+    transform: translateX(unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+}
+
+.uk-transition-slide-right-medium {
+    transform: translateX(var(--transition-slide-medium-translate));
+}
+
+/* Show */
+.uk-transition-toggle:hover [class*='uk-transition-slide'],
+.uk-transition-toggle:focus [class*='uk-transition-slide'],
+.uk-transition-active.uk-active [class*='uk-transition-slide'] {
+    opacity: 1;
+    transform: translate(0, 0);
+}
+
+
+/* Opacity modifier
+ ========================================================================== */
+
+.uk-transition-opaque { opacity: 1; }
+
+
+/* Duration modifiers
+ ========================================================================== */
+
+.uk-transition-slow { transition-duration: var(--transition-slow-duration); }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-transition-misc) {
+    @include hook-transition-misc;
+}
+
+// @mixin hook-transition-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --transition-duration: #{$transition-duration};
+    --transition-fast-duration: #{$transition-fast-duration};
+    --transition-medium-fast-duration: #{$transition-medium-fast-duration};
+    --transition-slow-duration: #{$transition-slow-duration};
+    --transition-scale: #{$transition-scale};
+    --transition-slide-small-translate: #{$transition-slide-small-translate};
+    --transition-slide-medium-translate: #{$transition-slide-medium-translate};
+}