@broxus/react-uikit 0.17.4 → 0.19.0

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};
-}

package/dist/esm/styles/vars.scss

@@ -1,126 +0,0 @@
-// Name:            Vars
-// Description:     Define.scss variables via the `var()` CSS function
-//
-// ========================================================================
-
-@import 'variables.scss';
-
-:root, ::after, ::before {
-    // Breakpoints
-    // ========================================================================
-
-    --breakpoint-xsmall: #{$breakpoint-xsmall};
-    --breakpoint-small: #{$breakpoint-small};
-    --breakpoint-medium: #{$breakpoint-medium};
-    --breakpoint-large: #{$breakpoint-large};
-    --breakpoint-xlarge: #{$breakpoint-xlarge};
-    --breakpoint-2xlarge: #{$breakpoint-2xlarge};
-    --breakpoint-3xlarge: #{$breakpoint-3xlarge};
-    --breakpoint-xsmall-max: #{$breakpoint-xsmall-max};
-    --breakpoint-small-max: #{$breakpoint-small-max};
-    --breakpoint-medium-max: #{$breakpoint-medium-max};
-    --breakpoint-large-max: #{$breakpoint-large-max};
-    --breakpoint-xlarge-max: #{$breakpoint-xlarge-max};
-    --breakpoint-2xlarge-max: #{$breakpoint-2xlarge-max};
-
-
-    // Global variables
-    // ========================================================================
-
-    //
-    // Typography
-    //
-    --global-font-family: #{$global-font-family};
-    --global-font-size: #{$global-font-size};
-    --global-font-weight: #{$global-font-weight};
-    --global-bold-font-weight: #{$global-bold-font-weight};
-    --global-line-height: #{$global-line-height};
-    --global-2xlarge-font-size: #{$global-2xlarge-font-size};
-    --global-xlarge-font-size: #{$global-xlarge-font-size};
-    --global-large-font-size: #{$global-large-font-size};
-    --global-medium-font-size: #{$global-medium-font-size};
-    --global-small-font-size: #{$global-small-font-size};
-    --global-xsmall-font-size: #{$global-xsmall-font-size};
-    --global-2xsmall-font-size: #{$global-2xsmall-font-size};
-
-    //
-    // Colors
-    //
-
-    --global-color: #{$global-color};
-    --global-emphasis-color: #{$global-emphasis-color};
-    --global-muted-color: #{$global-muted-color};
-    --global-link-color: #{$global-link-color};
-    --global-link-hover-color: #{$global-link-hover-color};
-    --global-inverse-color: #{$global-inverse-color};
-
-    //
-    // Backgrounds
-    //
-
-    --global-background: #{$global-background};
-    --global-default-background: #{$global-default-background};
-    --global-muted-background: #{$global-muted-background};
-    --global-primary-background: #{$global-primary-background};
-    --global-secondary-background: #{$global-secondary-background};
-    --global-tertiary-background: #{$global-tertiary-background};
-    --global-success-background: #{$global-success-background};
-    --global-warning-background: #{$global-warning-background};
-    --global-danger-background: #{$global-danger-background};
-
-    //
-    // Borders
-    //
-
-    --global-border-width: #{$global-border-width};
-    --global-border-style: #{$global-border-style};
-    --global-border: #{$global-border};
-    --global-muted-border: #{$global-muted-border};
-    --global-primary-border: #{$global-primary-border};
-    --global-secondary-border: #{$global-secondary-border};
-    --global-tertiary-border: #{$global-tertiary-border};
-    --global-border-radius: #{$global-border-radius};
-
-    //
-    // Box-Shadows
-    //
-
-    --global-small-box-shadow: #{$global-small-box-shadow};
-    --global-medium-box-shadow: #{$global-medium-box-shadow};
-    --global-large-box-shadow: #{$global-large-box-shadow};
-    --global-xlarge-box-shadow: #{$global-xlarge-box-shadow};
-
-    //
-    // Spacings
-    //
-
-    --global-margin: #{$global-margin};
-    --global-xsmall-margin: #{$global-xsmall-margin};
-    --global-small-margin: #{$global-small-margin};
-    --global-medium-margin: #{$global-medium-margin};
-    --global-large-margin: #{$global-large-margin};
-    --global-xlarge-margin: #{$global-xlarge-margin};
-    --global-gutter: #{$global-gutter};
-    --global-xsmall-gutter: #{$global-xsmall-gutter};
-    --global-small-gutter: #{$global-small-gutter};
-    --global-medium-gutter: #{$global-medium-gutter};
-    --global-large-gutter: #{$global-large-gutter};
-    --global-xlarge-gutter: #{$global-xlarge-gutter};
-
-    //
-    // Controls
-    //
-
-    --global-control-height: #{$global-control-height};
-    --global-control-xsmall-height: #{$global-control-xsmall-height};
-    --global-control-small-height: #{$global-control-small-height};
-    --global-control-medium-height: #{$global-control-medium-height};
-    --global-control-large-height: #{$global-control-large-height};
-    --global-control-xlarge-height: #{$global-control-xlarge-height};
-
-    //
-    // Z-index
-    //
-
-    --global-z-index: #{$global-z-index};
-}