@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/animation.scss

@@ -1,349 +0,0 @@
-// Name:            Animation
-// Description:     Utilities for keyframe animations
-//
-// Component:       `uk-animation-*`
-//
-// Modifiers:       `uk-animation-fade`
-//                  `uk-animation-scale-up`
-//                  `uk-animation-scale-down`
-//                  `uk-animation-slide-top-*`
-//                  `uk-animation-slide-bottom-*`
-//                  `uk-animation-slide-left-*`
-//                  `uk-animation-slide-right-*`
-//                  `uk-animation-kenburns`
-//                  `uk-animation-shake`
-//                  `uk-animation-stroke`
-//                  `uk-animation-reverse`
-//                  `uk-animation-fast`
-//
-// Sub-objects:     `uk-animation-toggle`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Animation
- ========================================================================== */
-
-[class*='uk-animation-'] {
-    animation-duration: var(--animation-duration);
-    animation-fill-mode: both;
-    animation-timing-function: var(--ease-out);
-}
-
-
-/* Animations
- ========================================================================== */
-
-/*
- * Fade
- */
-
-.uk-animation-fade {
-    animation-duration: var(--animation-fade-duration);
-    animation-name: uk-fade;
-    animation-timing-function: linear;
-}
-
-/*
- * Scale
- */
-
-.uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
-.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
-
-/*
- * Slide
- */
-
-.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
-.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
-.uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
-.uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
-
-/*
- * Slide Small
- */
-
-.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
-.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
-.uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
-.uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
-
-/*
- * Slide Medium
- */
-
-.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
-.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
-.uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
-.uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
-
-/*
- * Kenburns
- */
-
-.uk-animation-kenburns {
-    animation-duration: var(--animation-kenburns-duration);
-    animation-name: uk-kenburns;
-}
-
-/*
- * Shake
- */
-
-.uk-animation-shake { animation-name: uk-shake; }
-
-/*
- * SVG Stroke
- * The `--uk-animation-stroke` custom property contains the longest path length.
- * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
- * All strokes are animated by the same pace and doesn't end simultaneously.
- * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
- */
-
-.uk-animation-stroke {
-    animation-duration: var(--animation-stroke-duration);
-    animation-name: uk-stroke;
-    stroke-dasharray: var(--uk-animation-stroke);
-}
-
-
-/* Direction modifier
- ========================================================================== */
-
-.uk-animation-reverse {
-    animation-direction: reverse;
-    animation-timing-function: var(--ease-in);
-}
-
-
-/* Duration modifier
- ========================================================================== */
-
-.uk-animation-fast { animation-duration: var(--animation-fast-duration); }
-
-.uk-animation-medium-fast { animation-duration: var(--animation-medium-fast-duration); }
-
-
-/* Toggle animation based on the State of the Parent Element
-========================================================================== */
-
-/*
- * The toggle is triggered on touch devices using `:focus` and tabindex
- */
-
-.uk-animation-toggle:not(:hover, :focus) [class*='uk-animation-'] { animation-name: none; }
-
-/*
- * 1. Prevent tab highlighting on iOS.
- */
-
-.uk-animation-toggle {
-    -webkit-tap-highlight-color: transparent; /* 1 */
-}
-
-/*
- * Remove outline for `tabindex`
- */
-
-.uk-animation-toggle:focus { outline: none; }
-
-
-/* Keyframes used by animation classes
- ========================================================================== */
-
-/*
- * Fade
- */
-
-@keyframes uk-fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-/*
- * Scale
- */
-
-@keyframes uk-scale-up {
-    0% { transform: scale(0.9); }
-    100% { transform: scale(1); }
-}
-
-@keyframes uk-scale-down {
-    0% { transform: scale(1.1); }
-    100% { transform: scale(1); }
-}
-
-/*
- * Slide
- */
-
-@keyframes uk-slide-top {
-    0% { transform: translateY(-100%); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-bottom {
-    0% { transform: translateY(100%); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-left {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(0); }
-}
-
-@keyframes uk-slide-right {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(0); }
-}
-
-/*
- * Slide Small
- */
-
-@keyframes uk-slide-top-small {
-    0% { transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-bottom-small {
-    0% { transform: translateY(var(--animation-slide-small-translate)); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-left-small {
-    0% { transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
-    100% { transform: translateX(0); }
-}
-
-@keyframes uk-slide-right-small {
-    0% { transform: translateX(var(--animation-slide-small-translate)); }
-    100% { transform: translateX(0); }
-}
-
-/*
- * Slide Medium
- */
-
-@keyframes uk-slide-top-medium {
-    0% { transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-bottom-medium {
-    0% { transform: translateY(var(--animation-slide-medium-translate)); }
-    100% { transform: translateY(0); }
-}
-
-@keyframes uk-slide-left-medium {
-    0% { transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
-    100% { transform: translateX(0); }
-}
-
-@keyframes uk-slide-right-medium {
-    0% { transform: translateX(var(--animation-slide-medium-translate)); }
-    100% { transform: translateX(0); }
-}
-
-/*
- * Kenburns
- */
-
-@keyframes uk-kenburns {
-    0% { transform: scale(1); }
-    100% { transform: scale(1.2); }
-}
-
-/*
- * Shake
- */
-
-@keyframes uk-shake {
-    0%,
-    100% { transform: translateX(0); }
-    10% { transform: translateX(-9px); }
-    20% { transform: translateX(8px); }
-    30% { transform: translateX(-7px); }
-    40% { transform: translateX(6px); }
-    50% { transform: translateX(-5px); }
-    60% { transform: translateX(4px); }
-    70% { transform: translateX(-3px); }
-    80% { transform: translateX(2px); }
-    90% { transform: translateX(-1px); }
-}
-
-/*
- * Stroke
- */
-
-@keyframes uk-stroke {
-    0% { stroke-dashoffset: var(--uk-animation-stroke); }
-    100% { stroke-dashoffset: 0; }
-}
-
-/*
- * Wave
- */
-
-@keyframes uk-wave-effect {
-    0% {
-        opacity: 0.5;
-        transform: scale(1);
-    }
-
-    100% {
-        opacity: 0;
-        transform: scale(1.6);
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-animation-misc') {
-    @include hook-animation-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --animation-duration: #{$animation-duration};
-    --animation-fade-duration: #{$animation-fade-duration};
-    --animation-stroke-duration: #{$animation-stroke-duration};
-    --animation-kenburns-duration: #{$animation-kenburns-duration};
-    --animation-fast-duration: #{$animation-fast-duration};
-    --animation-medium-fast-duration: #{$animation-medium-fast-duration};
-    --animation-slide-small-translate: #{$animation-slide-small-translate};
-    --animation-slide-medium-translate: #{$animation-slide-medium-translate};
-    --ease-base-out: #{$ease-base-out};
-    --ease-base-in: #{$ease-base-in};
-    --ease-out: #{$ease-out};
-    --ease-in: #{$ease-in};
-    --ease-in-out: #{$ease-in-out};
-    --ease-out-back: #{$ease-out-back};
-    --ease-in-back: #{$ease-in-back};
-    --ease-in-out-back: #{$ease-in-out-back};
-    --ease-out-circ: #{$ease-out-circ};
-    --ease-in-circ: #{$ease-in-circ};
-    --ease-in-out-circ: #{$ease-in-out-circ};
-    --ease-out-quint: #{$ease-out-quint};
-    --ease-in-quint: #{$ease-in-quint};
-    --ease-in-out-quint: #{$ease-in-out-quint};
-}

package/styles/article.scss

@@ -1,105 +0,0 @@
-// Name:            Article
-// Description:     Component to create articles
-//
-// Component:       `uk-article`
-//
-// Sub-objects:     `uk-article-title`
-//                  `uk-article-meta`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Article
- ========================================================================== */
-
-.uk-article {
-    display: flow-root;
-    @if meta.mixin-exists('hook-article') {
-        @include hook-article;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-article > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Adjacent sibling
- ========================================================================== */
-
-.uk-article + .uk-article {
-    margin-top: var(--article-margin-top);
-    @if meta.mixin-exists('hook-article-adjacent') {
-        @include hook-article-adjacent;
-    }
-}
-
-
-/* Title
- ========================================================================== */
-
-.uk-article-title {
-    font-size: var(--article-title-font-size);
-    line-height: var(--article-title-line-height);
-    @if meta.mixin-exists('hook-article-title') {
-        @include hook-article-title;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-article-title {
-        font-size: var(--article-title-font-size-m);
-    }
-}
-
-
-/* Meta
- ========================================================================== */
-
-.uk-article-meta {
-    color: var(--article-meta-color);
-    font-size: var(--article-meta-font-size);
-    line-height: var(--article-meta-line-height);
-    @if meta.mixin-exists('hook-article-meta') {
-        @include hook-article-meta;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-article-misc') {
-    @include hook-article-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --article-margin-top: var(--global-large-margin);
-    --article-title-font-size-m: var(--global-2xlarge-font-size);
-    --article-title-font-size: calc(var(--article-title-font-size-m) * 0.85);
-    --article-title-line-height: #{$article-title-line-height};
-    --article-meta-font-size: var(--global-small-font-size);
-    --article-meta-line-height: #{$article-meta-line-height};
-    --article-meta-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-article-meta-color: var(--inverse-global-muted-color);
-}

package/styles/background.scss

@@ -1,167 +0,0 @@
-// Name:            Background
-// Description:     Utilities for backgrounds
-//
-// Component:       `uk-background-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Background
- ========================================================================== */
-
-
-/* Color
- ========================================================================== */
-
-.uk-background-default { background-color: var(--default-background); }
-.uk-background-muted { background-color: var(--muted-background); }
-.uk-background-primary { background-color: var(--primary-background); }
-.uk-background-secondary { background-color: var(--secondary-background); }
-.uk-background-tertiary { background-color: var(--tertiary-background); }
-
-
-/* Size
- ========================================================================== */
-
-.uk-background-cover,
-.uk-background-contain,
-.uk-background-width-1-1,
-.uk-background-height-1-1 {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-}
-
-.uk-background-cover { background-size: cover; }
-.uk-background-contain { background-size: contain; }
-.uk-background-width-1-1 { background-size: 100%; }
-.uk-background-height-1-1 { background-size: auto 100%; }
-
-
-/* Position
- ========================================================================== */
-
-.uk-background-top-left { background-position: 0 0; }
-.uk-background-top-center { background-position: 50% 0; }
-.uk-background-top-right { background-position: 100% 0; }
-.uk-background-center-left { background-position: 0 50%; }
-.uk-background-center-center { background-position: 50% 50%; }
-.uk-background-center-right { background-position: 100% 50%; }
-.uk-background-bottom-left { background-position: 0 100%; }
-.uk-background-bottom-center { background-position: 50% 100%; }
-.uk-background-bottom-right { background-position: 100% 100%; }
-
-
-/* Repeat
- ========================================================================== */
-
-.uk-background-no-repeat { background-repeat: no-repeat; }
-
-
-/* Attachment
- ========================================================================== */
-
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
-
-.uk-background-fixed {
-    /* 1 */
-    backface-visibility: hidden;
-    background-attachment: fixed;
-}
-
-/*
- * Exclude touch devices because `fixed` doesn't work on iOS and Android
- */
-
-@media (pointer: coarse) {
-    .uk-background-fixed {
-        background-attachment: scroll;
-    }
-}
-
-
-/* Image
- ========================================================================== */
-
-/* Phone portrait and smaller */
-@media (max-width: $breakpoint-xsmall-max) {
-    .uk-background-image\@s {
-        background-image: none !important;
-    }
-
-}
-
-/* Phone landscape and smaller */
-@media (max-width: $breakpoint-small-max) {
-    .uk-background-image\@m {
-        background-image: none !important;
-    }
-
-}
-
-/* Tablet landscape and smaller */
-@media (max-width: $breakpoint-medium-max) {
-    .uk-background-image\@l {
-        background-image: none !important;
-    }
-
-}
-
-/* Desktop and smaller */
-@media (max-width: $breakpoint-large-max) {
-    .uk-background-image\@xl {
-        background-image: none !important;
-    }
-
-}
-
-
-/* Blend modes
- ========================================================================== */
-
-.uk-background-blend-multiply { background-blend-mode: multiply; }
-.uk-background-blend-screen { background-blend-mode: screen; }
-.uk-background-blend-overlay { background-blend-mode: overlay; }
-.uk-background-blend-darken { background-blend-mode: darken; }
-.uk-background-blend-lighten { background-blend-mode: lighten; }
-.uk-background-blend-color-dodge { background-blend-mode: color-dodge; }
-.uk-background-blend-color-burn { background-blend-mode: color-burn; }
-.uk-background-blend-hard-light { background-blend-mode: hard-light; }
-.uk-background-blend-soft-light { background-blend-mode: soft-light; }
-.uk-background-blend-difference { background-blend-mode: difference; }
-.uk-background-blend-exclusion { background-blend-mode: exclusion; }
-.uk-background-blend-hue { background-blend-mode: hue; }
-.uk-background-blend-saturation { background-blend-mode: saturation; }
-.uk-background-blend-color { background-blend-mode: color; }
-.uk-background-blend-luminosity { background-blend-mode: luminosity; }
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-background-misc') {
-    @include hook-background-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --default-background: var(--global-default-background);
-    --muted-background: var(--global-muted-background);
-    --primary-background: var(--global-primary-background);
-    --secondary-background: var(--global-secondary-background);
-    --tertiary-background: var(--global-tertiary-background);
-}

package/styles/badge.scss

@@ -1,85 +0,0 @@
-// Name:            Badge
-// Description:     Component to create notification badges
-//
-// Component:       `uk-badge`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Badge
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Center child vertically and horizontally
- */
-
-.uk-badge {
-    align-items: center; /* 2 */
-    background: var(--badge-background); /* 1 */
-    border-radius: var(--badge-border-radius);
-    box-sizing: border-box;
-    color: var(--badge-color); /* 1 */
-    display: inline-flex; /* 2 */
-    font-size: var(--badge-font-size); /* 1 */
-    height: var(--badge-size);
-    justify-content: center; /* 2 */
-    line-height: 0;
-    min-width: var(--badge-size);
-    padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
-    vertical-align: middle;
-    @if meta.mixin-exists('hook-badge') {
-        @include hook-badge;
-    }
-}
-
-/*
- * Required for `a`
- */
-
-.uk-badge:hover,
-.uk-badge:focus {
-    color: var(--badge-hover-color);
-    outline: none;
-    text-decoration: none;
-    @if meta.mixin-exists('hook-badge-hover') {
-        @include hook-badge-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-badge-misc') {
-    @include hook-badge-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --badge-size: #{$badge-size};
-    --badge-padding-vertical: #{$badge-padding-vertical};
-    --badge-padding-horizontal: #{$badge-padding-horizontal};
-    --badge-border-radius: #{$badge-border-radius};
-    --badge-background: var(--global-primary-background);
-    --badge-color: var(--global-inverse-color);
-    --badge-font-size: var(--global-small-font-size);
-    --badge-hover-color: var(--global-inverse-color);
-
-    // Inverse
-    --inverse-badge-background: var(--inverse-global-primary-background);
-    --inverse-badge-color: var(--inverse-global-inverse-color);
-    --inverse-badge-hover-color: var(--inverse-global-inverse-color);
-}