@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/align/_align.scss

@@ -0,0 +1,153 @@
+// Name:            Align
+// Description:     Utilities to align embedded content
+//
+// Component:       `uk-align-left-*`
+//                  `uk-align-right-*`
+//                  `uk-align-center`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin align-styles {
+    /* ========================================================================
+       Component: Align
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    [class*='#{$prefix}-align'] {
+        display: block;
+        margin-bottom: var(--align-margin-vertical);
+    }
+
+    * + [class*='#{$prefix}-align'] {
+        margin-top: var(--align-margin-vertical);
+    }
+
+    /*
+     * Center
+     */
+
+    .#{$prefix}-align-center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    /*
+     * Left/Right
+     */
+
+    .#{$prefix}-align-left {
+        float: left;
+        margin-right: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    .#{$prefix}-align-right {
+        float: right;
+        margin-left: var(--align-margin-horizontal);
+        margin-top: 0;
+    }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-align-left\@s {
+            float: left;
+            margin-right: var(--align-margin-horizontal);
+            margin-top: 0;
+        }
+
+        .#{$prefix}-align-right\@s {
+            float: right;
+            margin-left: var(--align-margin-horizontal);
+            margin-top: 0;
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-align-left\@m {
+            float: left;
+            margin-right: var(--align-margin-horizontal);
+            margin-top: 0;
+        }
+
+        .#{$prefix}-align-right\@m {
+            float: right;
+            margin-left: var(--align-margin-horizontal);
+            margin-top: 0;
+        }
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-align-left\@l {
+            float: left;
+            margin-top: 0;
+        }
+
+        .#{$prefix}-align-right\@l {
+            float: right;
+            margin-top: 0;
+        }
+
+        .#{$prefix}-align-left,
+        .#{$prefix}-align-left\@s,
+        .#{$prefix}-align-left\@m,
+        .#{$prefix}-align-left\@l {
+            margin-right: var(--align-margin-horizontal-l);
+        }
+
+        .#{$prefix}-align-right,
+        .#{$prefix}-align-right\@s,
+        .#{$prefix}-align-right\@m,
+        .#{$prefix}-align-right\@l {
+            margin-left: var(--align-margin-horizontal-l);
+        }
+    }
+
+    /* Large screen and bigger */
+    @media (--media-breakpoint-xlarge) {
+        .#{$prefix}-align-left\@xl {
+            float: left;
+            margin-right: var(--align-margin-horizontal-l);
+            margin-top: 0;
+        }
+
+        .#{$prefix}-align-right\@xl {
+            float: right;
+            margin-left: var(--align-margin-horizontal-l);
+            margin-top: 0;
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-align-misc') {
+        @include meta.apply(map.get($mixins, 'hook-align-misc'));
+    }
+
+    @content;
+}
+
+@mixin align-tokens {
+    --align-margin-horizontal: var(--global-gutter);
+    --align-margin-horizontal-l: var(--global-medium-gutter);
+    --align-margin-vertical: var(--global-gutter);
+
+    @content;
+}

package/styles/align/_index.scss

@@ -0,0 +1,11 @@
+@use 'align' as *;
+
+$generate-tokens: true !default;
+
+@include align-styles;
+
+@if $generate-tokens {
+    :root {
+        @include align-tokens;
+    }
+}

package/styles/animation/_animation.scss

@@ -0,0 +1,353 @@
+// 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:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin animation-styles {
+    /* ========================================================================
+       Component: Animation
+     ========================================================================== */
+
+    [class*='#{$prefix}-animation-'] {
+        animation-duration: var(--animation-duration);
+        animation-fill-mode: both;
+        animation-timing-function: var(--ease-out);
+    }
+
+
+    /* Animations
+     ========================================================================== */
+
+    /*
+     * Fade
+     */
+
+    .#{$prefix}-animation-fade {
+        animation-duration: var(--animation-fade-duration);
+        animation-name: uk-fade;
+        animation-timing-function: linear;
+    }
+
+    /*
+     * Scale
+     */
+
+    .#{$prefix}-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
+    .#{$prefix}-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
+
+    /*
+     * Slide
+     */
+
+    .#{$prefix}-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
+    .#{$prefix}-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
+    .#{$prefix}-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
+    .#{$prefix}-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
+
+    /*
+     * Slide Small
+     */
+
+    .#{$prefix}-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
+    .#{$prefix}-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
+    .#{$prefix}-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
+    .#{$prefix}-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
+
+    /*
+     * Slide Medium
+     */
+
+    .#{$prefix}-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
+    .#{$prefix}-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
+    .#{$prefix}-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
+    .#{$prefix}-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
+
+    /*
+     * Kenburns
+     */
+
+    .#{$prefix}-animation-kenburns {
+        animation-duration: var(--animation-kenburns-duration);
+        animation-name: uk-kenburns;
+    }
+
+    /*
+     * Shake
+     */
+
+    .#{$prefix}-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.
+     */
+
+    .#{$prefix}-animation-stroke {
+        animation-duration: var(--animation-stroke-duration);
+        animation-name: uk-stroke;
+        stroke-dasharray: var(--uk-animation-stroke);
+    }
+
+
+    /* Direction modifier
+     ========================================================================== */
+
+    .#{$prefix}-animation-reverse {
+        animation-direction: reverse;
+        animation-timing-function: var(--ease-in);
+    }
+
+
+    /* Duration modifier
+     ========================================================================== */
+
+    .#{$prefix}-animation-fast { animation-duration: var(--animation-fast-duration); }
+
+    .#{$prefix}-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
+     */
+
+    .#{$prefix}-animation-toggle:not(:hover, :focus) [class*='#{$prefix}-animation-'] { animation-name: none; }
+
+    /*
+     * 1. Prevent tab highlighting on iOS.
+     */
+
+    .#{$prefix}-animation-toggle {
+        -webkit-tap-highlight-color: transparent; /* 1 */
+    }
+
+    /*
+     * Remove outline for `tabindex`
+     */
+
+    .#{$prefix}-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 map.has-key($mixins, 'hook-animation-misc') {
+        @include meta.apply(map.get($mixins, 'hook-animation-misc'));
+    }
+
+    @content;
+}
+
+@mixin animation-tokens {
+    --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};
+
+    @content;
+}

package/styles/animation/_index.scss

@@ -0,0 +1,11 @@
+@use 'animation' as *;
+
+$generate-tokens: true !default;
+
+@include animation-styles;
+
+@if $generate-tokens {
+    :root {
+        @include animation-tokens;
+    }
+}

package/styles/article/_article.scss

@@ -0,0 +1,112 @@
+// Name:            Article
+// Description:     Component to create articles
+//
+// Component:       `uk-article`
+//
+// Sub-objects:     `uk-article-title`
+//                  `uk-article-meta`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin article-styles {
+    /* ========================================================================
+       Component: Article
+     ========================================================================== */
+
+    .#{$prefix}-article {
+        display: flow-root;
+        @if map.has-key($mixins, 'hook-article') {
+            @include meta.apply(map.get($mixins, 'hook-article'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-article > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Adjacent sibling
+     ========================================================================== */
+
+    .#{$prefix}-article + .#{$prefix}-article {
+        margin-top: var(--article-margin-top);
+        @if map.has-key($mixins, 'hook-article-adjacent') {
+            @include meta.apply(map.get($mixins, 'hook-article-adjacent'));
+        }
+    }
+
+
+    /* Title
+     ========================================================================== */
+
+    .#{$prefix}-article-title {
+        font-size: var(--article-title-font-size);
+        line-height: var(--article-title-line-height);
+        @if map.has-key($mixins, 'hook-article-title') {
+            @include meta.apply(map.get($mixins, 'hook-article-title'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-article-title {
+            font-size: var(--article-title-font-size-m);
+        }
+    }
+
+
+    /* Meta
+     ========================================================================== */
+
+    .#{$prefix}-article-meta {
+        color: var(--article-meta-color);
+        font-size: var(--article-meta-font-size);
+        line-height: var(--article-meta-line-height);
+        @if map.has-key($mixins, 'hook-article-meta') {
+            @include meta.apply(map.get($mixins, 'hook-article-meta'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-article-misc') {
+        @include meta.apply(map.get($mixins, 'hook-article-misc'));
+    }
+
+    @content;
+}
+
+@mixin article-tokens {
+    --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);
+
+    @content;
+}
+
+@mixin article-inverse-tokens {
+    --inverse-article-meta-color: var(--inverse-global-muted-color);
+
+    @content;
+}

package/styles/article/_index.scss

@@ -0,0 +1,11 @@
+@use 'article' as *;
+
+$generate-tokens: true !default;
+
+@include article-styles;
+
+@if $generate-tokens {
+    :root {
+        @include article-tokens;
+    }
+}