@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/tile.scss

@@ -1,309 +0,0 @@
-// Name:            Tile
-// Description:     Component to create tiled boxes
-//
-// Component:       `uk-tile`
-//
-// Modifiers:       `uk-tile-xsmall`
-//                  `uk-tile-small`
-//                  `uk-tile-large`
-//                  `uk-tile-xlarge`
-//                  `uk-tile-default`
-//                  `uk-tile-muted`
-//                  `uk-tile-primary`
-//                  `uk-tile-secondary`
-//
-// States:          `uk-preserve-color`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Tile
- ========================================================================== */
-
-.uk-tile {
-    box-sizing: border-box;
-    display: flow-root;
-    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
-    position: relative;
-    @if meta.mixin-exists('hook-tile') {
-        @include hook-tile;
-    }
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-tile {
-        padding-left: var(--tile-padding-horizontal-s);
-        padding-right: var(--tile-padding-horizontal-s);
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-tile {
-        padding: var(--tile-padding-vertical-m) var(--tile-padding-horizontal-m);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-tile > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-/*
- * XSmall
- */
-
-.uk-tile-xsmall {
-    padding-bottom: var(--tile-xsmall-padding-vertical);
-    padding-top: var(--tile-xsmall-padding-vertical);
-}
-
-/*
- * Small
- */
-
-.uk-tile-small {
-    padding-bottom: var(--tile-small-padding-vertical);
-    padding-top: var(--tile-small-padding-vertical);
-}
-
-/*
- * Large
- */
-
-.uk-tile-large {
-    padding-bottom: var(--tile-large-padding-vertical);
-    padding-top: var(--tile-large-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-tile-large {
-        padding-bottom: var(--tile-large-padding-vertical-m);
-        padding-top: var(--tile-large-padding-vertical-m);
-    }
-}
-
-/*
- * XLarge
- */
-
-.uk-tile-xlarge {
-    padding-bottom: var(--tile-xlarge-padding-vertical);
-    padding-top: var(--tile-xlarge-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-tile-xlarge {
-        padding-bottom: var(--tile-xlarge-padding-vertical-m);
-        padding-top: var(--tile-xlarge-padding-vertical-m);
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-tile-default {
-    --uk-inverse: #{$tile-default-color-mode};
-    background: var(--tile-default-background);
-    @if meta.mixin-exists('hook-tile-default') {
-        @include hook-tile-default;
-    }
-}
-
-.uk-tile-default.uk-tile-hover:hover {
-    @if meta.mixin-exists('hook-tile-default-hover') {
-        @include hook-tile-default-hover;
-    }
-}
-
-// Color Mode
-@if $tile-default-color-mode == light {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $tile-default-color-mode == dark {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Muted
- */
-
-.uk-tile-muted {
-    --uk-inverse: #{$tile-muted-color-mode};
-    background: var(--tile-muted-background);
-    @if meta.mixin-exists('hook-tile-muted') {
-        @include hook-tile-muted;
-    }
-}
-
-.uk-tile-muted.uk-tile-hover:hover {
-    @if meta.mixin-exists('hook-tile-muted-hover') {
-        @include hook-tile-muted-hover;
-    }
-}
-
-// Color Mode
-@if $tile-default-color-mode == light {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $tile-default-color-mode == dark {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-tile-primary {
-    --uk-inverse: #{$tile-primary-color-mode};
-    background: var(--tile-primary-background);
-    @if meta.mixin-exists('hook-tile-primary') {
-        @include hook-tile-primary;
-    }
-}
-
-.uk-tile-primary.uk-tile-hover:hover {
-    @if meta.mixin-exists('hook-tile-primary-hover') {
-        @include hook-tile-primary-hover;
-    }
-}
-
-// Color Mode
-@if $tile-primary-color-mode == light {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $tile-primary-color-mode == dark {
-    .uk-tile-primary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Secondary
- */
-
-.uk-tile-secondary {
-    --uk-inverse: #{$tile-secondary-color-mode};
-    background: var(--tile-secondary-background);
-    @if meta.mixin-exists('hook-tile-secondary') {
-        @include hook-tile-secondary;
-    }
-}
-
-.uk-tile-secondary.uk-tile-hover:hover {
-    @if meta.mixin-exists('hook-tile-secondary-hover') {
-        @include hook-tile-secondary-hover;
-    }
-}
-
-// Color Mode
-@if $tile-secondary-color-mode == light {
-    .uk-tile-secondary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $tile-secondary-color-mode == dark {
-    .uk-tile-secondary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Tertiary
- */
-
-.uk-tile-tertiary {
-    --uk-inverse: #{$tile-tertiary-color-mode};
-    background: var(--tile-tertiary-background);
-    @if meta.mixin-exists('hook-tile-tertiary') {
-        @include hook-tile-tertiary;
-    }
-}
-
-.uk-tile-tertiary.uk-tile-hover:hover {
-    @if meta.mixin-exists('hook-tile-tertiary-hover') {
-        @include hook-tile-tertiary-hover;
-    }
-}
-
-// Color Mode
-@if $tile-tertiary-color-mode == light {
-    .uk-tile-tertiary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $tile-tertiary-color-mode == dark {
-    .uk-tile-tertiary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-tile-misc') {
-    @include hook-tile-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --tile-padding-horizontal: #{$tile-padding-horizontal};
-    --tile-padding-horizontal-s: var(--global-gutter);
-    --tile-padding-horizontal-m: var(--global-medium-gutter);
-    --tile-padding-vertical: var(--global-medium-margin);
-    --tile-padding-vertical-m: var(--global-large-margin);
-    --tile-xsmall-padding-vertical: var(--global-margin);
-    --tile-small-padding-vertical: var(--global-medium-margin);
-    --tile-large-padding-vertical: var(--global-large-margin);
-    --tile-large-padding-vertical-m: var(--global-xlarge-margin);
-    --tile-xlarge-padding-vertical: var(--global-xlarge-margin);
-    --tile-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
-    --tile-default-background: var(--global-background);
-    --tile-muted-background: var(--global-muted-background);
-    --tile-primary-background: var(--global-primary-background);
-    --tile-secondary-background: var(--global-secondary-background);
-    --tile-tertiary-background: var(--global-tertiary-background);
-}

package/styles/tooltip.scss

@@ -1,94 +0,0 @@
-// 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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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 {
-    --uk-position-offset: var(--tooltip-margin);
-    --uk-position-viewport-offset: 10;
-
-    /* 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 meta.mixin-exists('hook-tooltip') {
-        @include hook-tooltip;
-    }
-}
-
-/* Show */
-.uk-tooltip.uk-active { display: block; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-tooltip-misc') {
-    @include hook-tooltip-misc;
-}
-
-
-// Hooks
-// ========================================================================
-
-:root {
-    --tooltip-z-index: #{$tooltip-z-index};
-    --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/styles/totop.scss

@@ -1,73 +0,0 @@
-// Name:            Totop
-// Description:     Component to create an icon to scroll back to top
-//
-// Component:       `uk-totop`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Totop
- ========================================================================== */
-
-/*
- * Addopts `uk-icon`
- */
-
-.uk-totop {
-    color: var(--totop-color);
-    padding: var(--totop-padding);
-    @if meta.mixin-exists('hook-totop') {
-        @include hook-totop;
-    }
-}
-
-/* Hover + Focus */
-.uk-totop:hover,
-.uk-totop:focus {
-    color: var(--totop-hover-color);
-    outline: none;
-    @if meta.mixin-exists('hook-totop-hover') {
-        @include hook-totop-hover;
-    }
-}
-
-/* OnClick */
-.uk-totop:active {
-    color: var(--totop-active-color);
-    @if meta.mixin-exists('hook-totop-active') {
-        @include hook-totop-active;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-totop-misc') {
-    @include hook-totop-misc;
-}
-
-
-// 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/styles/transition.scss

@@ -1,193 +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`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   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(string.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(string.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(string.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(string.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 meta.mixin-exists('hook-transition-misc') {
-    @include 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};
-}