@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/transition/_transition.scss

@@ -0,0 +1,197 @@
+// 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:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin transition-styles {
+    /* ========================================================================
+       Component: Transition
+     ========================================================================== */
+
+
+    /* Toggle (Hover + Focus)
+     ========================================================================== */
+
+    /*
+     * 1. Prevent tab highlighting on iOS.
+     */
+
+    .#{$prefix}-transition-toggle {
+        /* 1 */
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    /*
+     * Remove outline for `tabindex`
+     */
+
+    .#{$prefix}-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.
+     */
+
+    .#{$prefix}-transition-fade,
+    [class*='#{$prefix}-transition-scale'],
+    [class*='#{$prefix}-transition-slide'] {
+        opacity: 0;
+        transition: var(--transition-duration) var(--ease-out);
+        transition-property: opacity, transform, filter;
+    }
+
+    /*
+     * Fade
+     */
+
+    .#{$prefix}-transition-toggle:hover .#{$prefix}-transition-fade,
+    .#{$prefix}-transition-toggle:focus .#{$prefix}-transition-fade,
+    .#{$prefix}-transition-active.#{$prefix}-active .#{$prefix}-transition-fade { opacity: 1; }
+
+    /*
+     * Scale
+     */
+
+    .#{$prefix}-transition-scale-up { transform: scale(1, 1); }
+
+    .#{$prefix}-transition-scale-down { transform: scale(var(--transition-scale), var(--transition-scale)); }
+
+    /* Show */
+    .#{$prefix}-transition-toggle:hover .#{$prefix}-transition-scale-up,
+    .#{$prefix}-transition-toggle:focus .#{$prefix}-transition-scale-up,
+    .#{$prefix}-transition-active.#{$prefix}-active .#{$prefix}-transition-scale-up {
+        opacity: 1;
+        transform: scale(var(--transition-scale), var(--transition-scale));
+    }
+
+    .#{$prefix}-transition-toggle:hover .#{$prefix}-transition-scale-down,
+    .#{$prefix}-transition-toggle:focus .#{$prefix}-transition-scale-down,
+    .#{$prefix}-transition-active.#{$prefix}-active .#{$prefix}-transition-scale-down {
+        opacity: 1;
+        transform: scale(1, 1);
+    }
+
+    /*
+     * Slide
+     */
+
+    .#{$prefix}-transition-slide-top { transform: translateY(-100%); }
+
+    .#{$prefix}-transition-slide-bottom { transform: translateY(100%); }
+
+    .#{$prefix}-transition-slide-left { transform: translateX(-100%); }
+
+    .#{$prefix}-transition-slide-right { transform: translateX(100%); }
+
+    .#{$prefix}-transition-slide-top-small {
+        transform: translateY(string.unquote('calc(var(--transition-slide-small-translate) * -1)'));
+    }
+
+    .#{$prefix}-transition-slide-bottom-small {
+        transform: translateY(var(--transition-slide-small-translate));
+    }
+
+    .#{$prefix}-transition-slide-left-small {
+        transform: translateX(string.unquote('calc(var(--transition-slide-small-translate) * -1)'));
+    }
+
+    .#{$prefix}-transition-slide-right-small {
+        transform: translateX(var(--transition-slide-small-translate));
+    }
+
+    .#{$prefix}-transition-slide-top-medium {
+        transform: translateY(string.unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+    }
+
+    .#{$prefix}-transition-slide-bottom-medium {
+        transform: translateY(var(--transition-slide-medium-translate));
+    }
+
+    .#{$prefix}-transition-slide-left-medium {
+        transform: translateX(string.unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+    }
+
+    .#{$prefix}-transition-slide-right-medium {
+        transform: translateX(var(--transition-slide-medium-translate));
+    }
+
+    /* Show */
+    .#{$prefix}-transition-toggle:hover [class*='#{$prefix}-transition-slide'],
+    .#{$prefix}-transition-toggle:focus [class*='#{$prefix}-transition-slide'],
+    .#{$prefix}-transition-active.#{$prefix}-active [class*='#{$prefix}-transition-slide'] {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+
+
+    /* Opacity modifier
+     ========================================================================== */
+
+    .#{$prefix}-transition-opaque { opacity: 1; }
+
+
+    /* Duration modifiers
+     ========================================================================== */
+
+    .#{$prefix}-transition-slow { transition-duration: var(--transition-slow-duration); }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-transition-misc') {
+        @include meta.apply(map.get($mixins, 'hook-transition-misc'));
+    }
+
+    @content;
+}
+
+@mixin transition-tokens {
+    --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};
+
+    @content;
+}

package/styles/utility/_index.scss

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