@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/visibility/_visibility.scss

@@ -0,0 +1,196 @@
+// Name:            Visibility
+// Description:     Utilities to show or hide content on breakpoints, hover or touch
+//
+// Component:       `uk-hidden-*`
+//                  `uk-visible-*`
+//                  `uk-invisible`
+//                  `uk-visible-toggle`
+//                  `uk-hidden-hover`
+//                  `uk-invisible-hover`
+//                  `uk-hidden-touch`
+//                  `uk-hidden-notouch`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin visibility-styles {
+    /* ========================================================================
+       Component: Visibility
+     ========================================================================== */
+
+    /*
+     * Hidden
+     * `hidden` attribute also set here to make it stronger
+     */
+
+    [hidden],
+    .#{$prefix}-hidden { display: none !important; }
+
+    /* Phone landscape and bigger */
+    @media (--media-breakpoint-small) {
+
+        .#{$prefix}-hidden\@s { display: none !important; }
+
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+
+        .#{$prefix}-hidden\@m { display: none !important; }
+
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+
+        .#{$prefix}-hidden\@l { display: none !important; }
+
+    }
+
+    /* Large screen and bigger */
+    @media (--media-breakpoint-xlarge) {
+
+        .#{$prefix}-hidden\@xl { display: none !important; }
+
+    }
+
+    /*
+     * Visible
+     */
+
+    /* Phone portrait and smaller */
+    @media (--media-breakpoint-xsmall-max) {
+
+        .#{$prefix}-visible\@s { display: none !important; }
+
+    }
+
+    /* Phone landscape and smaller */
+    @media (--media-breakpoint-small-max) {
+
+        .#{$prefix}-visible\@m { display: none !important; }
+
+    }
+
+    /* Tablet landscape and smaller */
+    @media (--media-breakpoint-medium-max) {
+
+        .#{$prefix}-visible\@l { display: none !important; }
+
+    }
+
+    /* Desktop and smaller */
+    @media (--media-breakpoint-large-max) {
+
+        .#{$prefix}-visible\@xl { display: none !important; }
+
+    }
+
+
+    /* Visibility
+     ========================================================================== */
+
+    .#{$prefix}-invisible { visibility: hidden !important; }
+
+
+    /* Toggle (Hover + Focus)
+     ========================================================================== */
+
+    /*
+     * Hidden
+     * 1. The toggle is triggered on touch devices using `:focus` and tabindex
+     * 2. The target stays visible if any element within receives focus through keyboard
+     *    Doesn't work in Edge, yet.
+     * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+     *
+     */
+
+    /* 1 + 2 */
+    .#{$prefix}-visible-toggle:not(:hover, :focus) .#{$prefix}-hidden-hover:not(:focus-within) {
+        height: 0 !important;
+        margin: 0 !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+
+        /* 3 */
+        position: absolute !important;
+        width: 0 !important;
+    }
+
+    /*
+     * Invisible
+     */
+
+    /* 1 + 2 */
+    .#{$prefix}-visible-toggle:not(:hover, :focus) .#{$prefix}-invisible-hover:not(:focus-within) {
+        /* 3 */
+        opacity: 0 !important;
+    }
+
+    /*
+     * 1. Prevent tab highlighting on iOS.
+     */
+
+    .#{$prefix}-visible-toggle {
+        /* 1 */
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    /*
+     * Remove outline for `tabindex`
+     */
+
+    .#{$prefix}-visible-toggle:focus { outline: none; }
+
+
+    /* Touch
+     ========================================================================== */
+
+    /*
+     * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
+     * Works on mobile browsers: Safari, Chrome and Android browser
+     */
+
+    @media (pointer: coarse) {
+        .#{$prefix}-hidden-touch { display: none !important; }
+    }
+
+    /*
+     * Hide if primary pointing device is accurate, e.g. mouse.
+     * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
+     * 2. Reset if supported
+     */
+
+    /* 1 */
+    .#{$prefix}-hidden-notouch { display: none !important; }
+
+    @media (pointer: coarse) {
+        .#{$prefix}-hidden-notouch { display: block !important; }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-visibility-misc') {
+        @include meta.apply(map.get($mixins, 'hook-visibility-misc'));
+    }
+
+
+    @content;
+}
+
+// No CSS custom properties for this component
+@mixin visibility-tokens {
+    @content;
+}

package/styles/width/_index.scss

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