@broxus/react-uikit 0.18.0 → 0.19.1

package/dist/esm/styles/thumbnav.scss

@@ -1,124 +0,0 @@
-// 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;
-    @if mixin-exists(hook-thumbnav) {
-        @include 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;
-    @if mixin-exists(hook-thumbnav-item) {
-        @include hook-thumbnav-item;
-    }
-}
-
-/* Hover + Focus */
-.uk-thumbnav > * > :hover,
-.uk-thumbnav > * > :focus {
-    outline: none;
-    @if mixin-exists(hook-thumbnav-item-hover) {
-        @include hook-thumbnav-item-hover;
-    }
-}
-
-/* Active */
-.uk-thumbnav > .uk-active > * {
-    @if mixin-exists(hook-thumbnav-item-active) {
-        @include 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
-// ========================================================================
-
-@if mixin-exists(hook-thumbnav-misc) {
-    @include hook-thumbnav-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-.hook-inverse() {
-    --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
-    --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
-}

package/dist/esm/styles/tile.scss

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

package/dist/esm/styles/totop.scss

@@ -1,113 +0,0 @@
-// 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);
-    @if mixin-exists(hook-totop) {
-        @include hook-totop;
-    }
-}
-
-/* Hover + Focus */
-.uk-totop:hover,
-.uk-totop:focus {
-    color: var(--totop-hover-color);
-    outline: none;
-    @if mixin-exists(hook-totop-hover) {
-        @include hook-totop-hover;
-    }
-}
-
-/* OnClick */
-.uk-totop:active {
-    color: var(--totop-active-color);
-    @if mixin-exists(hook-totop-active) {
-        @include hook-totop-active;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-totop-misc) {
-    @include hook-totop-misc;
-}
-
-.hook-totop() {}
-
-.hook-totop-hover() {}
-
-.hook-totop-active() {}
-
-.hook-totop-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-component-totop() {
-    .uk-totop {
-        color: var(--inverse-totop-color);
-        @if mixin-exists(hook-inverse-totop) {
-            @include hook-inverse-totop;
-        }
-    }
-
-    .uk-totop:hover,
-    .uk-totop:focus {
-        color: var(--inverse-totop-hover-color);
-        @if mixin-exists(hook-inverse-totop-hover) {
-            @include hook-inverse-totop-hover;
-        }
-    }
-
-    .uk-totop:active {
-        color: var(--inverse-totop-active-color);
-        @if mixin-exists(hook-inverse-totop-active) {
-            @include 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/esm/styles/transition.scss

@@ -1,192 +0,0 @@
-// 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};
-}