@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/width/_width.scss

@@ -0,0 +1,698 @@
+// Name:            Width
+// Description:     Utilities for widths
+//
+// Component:       `uk-child-width-*`
+//                  `uk-width-*`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin width-styles {
+    /* ========================================================================
+       Component: Width
+     ========================================================================== */
+
+
+    /* Equal child widths
+     ========================================================================== */
+
+    [class*='#{$prefix}-child-width'] > * {
+        box-sizing: border-box;
+        width: 100%;
+    }
+
+    .#{$prefix}-child-width-1-2 > * {
+        width: 50%;
+    }
+
+    .#{$prefix}-child-width-1-3 > * {
+        width: string.unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .#{$prefix}-child-width-1-4 > * {
+        width: 25%;
+    }
+
+    .#{$prefix}-child-width-1-5 > * {
+        width: 20%;
+    }
+
+    .#{$prefix}-child-width-1-6 > * {
+        width: string.unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .#{$prefix}-child-width-auto > * {
+        width: auto;
+    }
+
+    /*
+     * 1. Reset the `min-width`, which is set to auto by default, because
+     *    flex items won't shrink below their minimum intrinsic content size.
+     *    Using `1px` instead of `0`, so items still wrap into the next line,
+     *    if they have zero width and padding and the predecessor is 100% wide.
+     */
+
+    .#{$prefix}-child-width-expand > :not([class*='#{$prefix}-width']) {
+        flex: 1;
+
+        /* 1 */
+        min-width: 1px;
+    }
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+        .#{$prefix}-child-width-1-1\@s > * {
+            width: 100%;
+        }
+
+        .#{$prefix}-child-width-1-2\@s > * {
+            width: 50%;
+        }
+
+        .#{$prefix}-child-width-1-3\@s > * {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-child-width-1-4\@s > * {
+            width: 25%;
+        }
+
+        .#{$prefix}-child-width-1-5\@s > * {
+            width: 20%;
+        }
+
+        .#{$prefix}-child-width-1-6\@s > * {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-child-width-auto\@s > * {
+            width: auto;
+        }
+
+        .#{$prefix}-child-width-expand\@s > :not([class*='#{$prefix}-width']) {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-child-width-1-1\@m > * {
+            width: 100%;
+        }
+
+        .#{$prefix}-child-width-1-2\@m > * {
+            width: 50%;
+        }
+
+        .#{$prefix}-child-width-1-3\@m > * {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-child-width-1-4\@m > * {
+            width: 25%;
+        }
+
+        .#{$prefix}-child-width-1-5\@m > * {
+            width: 20%;
+        }
+
+        .#{$prefix}-child-width-1-6\@m > * {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-child-width-auto\@m > * {
+            width: auto;
+        }
+
+        .#{$prefix}-child-width-expand\@m > :not([class*='#{$prefix}-width']) {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-child-width-1-1\@l > * {
+            width: 100%;
+        }
+
+        .#{$prefix}-child-width-1-2\@l > * {
+            width: 50%;
+        }
+
+        .#{$prefix}-child-width-1-3\@l > * {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-child-width-1-4\@l > * {
+            width: 25%;
+        }
+
+        .#{$prefix}-child-width-1-5\@l > * {
+            width: 20%;
+        }
+
+        .#{$prefix}-child-width-1-6\@l > * {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-child-width-auto\@l > * {
+            width: auto;
+        }
+
+        .#{$prefix}-child-width-expand\@l > :not([class*='#{$prefix}-width']) {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Large screen and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-xlarge) {
+        .#{$prefix}-child-width-1-1\@xl > * {
+            width: 100%;
+        }
+
+        .#{$prefix}-child-width-1-2\@xl > * {
+            width: 50%;
+        }
+
+        .#{$prefix}-child-width-1-3\@xl > * {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-child-width-1-4\@xl > * {
+            width: 25%;
+        }
+
+        .#{$prefix}-child-width-1-5\@xl > * {
+            width: 20%;
+        }
+
+        .#{$prefix}-child-width-1-6\@xl > * {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-child-width-auto\@xl > * {
+            width: auto;
+        }
+
+        .#{$prefix}-child-width-expand\@xl > :not([class*='#{$prefix}-width']) {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+
+    /* Single Widths
+     ========================================================================== */
+
+    /*
+     * 1. `max-width` is needed for the pixel-based classes
+     */
+
+    [class*='#{$prefix}-width'] {
+        box-sizing: border-box;
+
+        /* 1 */
+        max-width: 100%;
+        width: 100%;
+    }
+
+    /* Halves */
+    .#{$prefix}-width-1-2 {
+        width: 50%;
+    }
+
+    /* Thirds */
+    .#{$prefix}-width-1-3 {
+        width: string.unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .#{$prefix}-width-2-3 {
+        width: string.unquote('calc(100% * 2 / 3.001)');
+    }
+
+    /* Quarters */
+    .#{$prefix}-width-1-4 {
+        width: 25%;
+    }
+
+    .#{$prefix}-width-3-4 {
+        width: 75%;
+    }
+
+    /* Fifths */
+    .#{$prefix}-width-1-5 {
+        width: 20%;
+    }
+
+    .#{$prefix}-width-2-5 {
+        width: 40%;
+    }
+
+    .#{$prefix}-width-3-5 {
+        width: 60%;
+    }
+
+    .#{$prefix}-width-4-5 {
+        width: 80%;
+    }
+
+    /* Sixths */
+    .#{$prefix}-width-1-6 {
+        width: string.unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .#{$prefix}-width-5-6 {
+        width: string.unquote('calc(100% * 5 / 6.001)');
+    }
+
+    /* Pixel */
+    .#{$prefix}-width-small {
+        width: var(--width-small-width);
+    }
+
+    .#{$prefix}-width-medium {
+        width: var(--width-medium-width);
+    }
+
+    .#{$prefix}-width-large {
+        width: var(--width-large-width);
+    }
+
+    .#{$prefix}-width-xlarge {
+        width: var(--width-xlarge-width);
+    }
+
+    .#{$prefix}-width-2xlarge {
+        width: var(--width-2xlarge-width);
+    }
+
+    /* Auto */
+    .#{$prefix}-width-auto {
+        width: auto;
+    }
+
+    /* Expand */
+    .#{$prefix}-width-expand {
+        flex: 1;
+        min-width: 1px;
+    }
+
+    /* Phone landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-small) {
+        /* Whole */
+        .#{$prefix}-width-1-1\@s {
+            width: 100%;
+        }
+
+        /* Halves */
+        .#{$prefix}-width-1-2\@s {
+            width: 50%;
+        }
+
+        /* Thirds */
+        .#{$prefix}-width-1-3\@s {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-width-2-3\@s {
+            width: string.unquote('calc(100% * 2 / 3.001)');
+        }
+
+        /* Quarters */
+        .#{$prefix}-width-1-4\@s {
+            width: 25%;
+        }
+
+        .#{$prefix}-width-3-4\@s {
+            width: 75%;
+        }
+
+        /* Fifths */
+        .#{$prefix}-width-1-5\@s {
+            width: 20%;
+        }
+
+        .#{$prefix}-width-2-5\@s {
+            width: 40%;
+        }
+
+        .#{$prefix}-width-3-5\@s {
+            width: 60%;
+        }
+
+        .#{$prefix}-width-4-5\@s {
+            width: 80%;
+        }
+
+        /* Sixths */
+        .#{$prefix}-width-1-6\@s {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-width-5-6\@s {
+            width: string.unquote('calc(100% * 5 / 6.001)');
+        }
+
+        /* Pixel */
+        .#{$prefix}-width-small\@s {
+            width: var(--width-small-width);
+        }
+
+        .#{$prefix}-width-medium\@s {
+            width: var(--width-medium-width);
+        }
+
+        .#{$prefix}-width-large\@s {
+            width: var(--width-large-width);
+        }
+
+        .#{$prefix}-width-xlarge\@s {
+            width: var(--width-xlarge-width);
+        }
+
+        .#{$prefix}-width-2xlarge\@s {
+            width: var(--width-2xlarge-width);
+        }
+
+        /* Auto */
+        .#{$prefix}-width-auto\@s {
+            width: auto;
+        }
+
+        /* Expand */
+        .#{$prefix}-width-expand\@s {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-medium) {
+        /* Whole */
+        .#{$prefix}-width-1-1\@m {
+            width: 100%;
+        }
+
+        /* Halves */
+        .#{$prefix}-width-1-2\@m {
+            width: 50%;
+        }
+
+        /* Thirds */
+        .#{$prefix}-width-1-3\@m {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-width-2-3\@m {
+            width: string.unquote('calc(100% * 2 / 3.001)');
+        }
+
+        /* Quarters */
+        .#{$prefix}-width-1-4\@m {
+            width: 25%;
+        }
+
+        .#{$prefix}-width-3-4\@m {
+            width: 75%;
+        }
+
+        /* Fifths */
+        .#{$prefix}-width-1-5\@m {
+            width: 20%;
+        }
+
+        .#{$prefix}-width-2-5\@m {
+            width: 40%;
+        }
+
+        .#{$prefix}-width-3-5\@m {
+            width: 60%;
+        }
+
+        .#{$prefix}-width-4-5\@m {
+            width: 80%;
+        }
+
+        /* Sixths */
+        .#{$prefix}-width-1-6\@m {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-width-5-6\@m {
+            width: string.unquote('calc(100% * 5 / 6.001)');
+        }
+
+        /* Pixel */
+        .#{$prefix}-width-small\@m {
+            width: var(--width-small-width);
+        }
+
+        .#{$prefix}-width-medium\@m {
+            width: var(--width-medium-width);
+        }
+
+        .#{$prefix}-width-large\@m {
+            width: var(--width-large-width);
+        }
+
+        .#{$prefix}-width-xlarge\@m {
+            width: var(--width-xlarge-width);
+        }
+
+        .#{$prefix}-width-2xlarge\@m {
+            width: var(--width-2xlarge-width);
+        }
+
+        /* Auto */
+        .#{$prefix}-width-auto\@m {
+            width: auto;
+        }
+
+        /* Expand */
+        .#{$prefix}-width-expand\@m {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Desktop and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-large) {
+        /* Whole */
+        .#{$prefix}-width-1-1\@l {
+            width: 100%;
+        }
+
+        /* Halves */
+        .#{$prefix}-width-1-2\@l {
+            width: 50%;
+        }
+
+        /* Thirds */
+        .#{$prefix}-width-1-3\@l {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-width-2-3\@l {
+            width: string.unquote('calc(100% * 2 / 3.001)');
+        }
+
+        /* Quarters */
+        .#{$prefix}-width-1-4\@l {
+            width: 25%;
+        }
+
+        .#{$prefix}-width-3-4\@l {
+            width: 75%;
+        }
+
+        /* Fifths */
+        .#{$prefix}-width-1-5\@l {
+            width: 20%;
+        }
+
+        .#{$prefix}-width-2-5\@l {
+            width: 40%;
+        }
+
+        .#{$prefix}-width-3-5\@l {
+            width: 60%;
+        }
+
+        .#{$prefix}-width-4-5\@l {
+            width: 80%;
+        }
+
+        /* Sixths */
+        .#{$prefix}-width-1-6\@l {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-width-5-6\@l {
+            width: string.unquote('calc(100% * 5 / 6.001)');
+        }
+
+        /* Pixel */
+        .#{$prefix}-width-small\@l {
+            width: var(--width-small-width);
+        }
+
+        .#{$prefix}-width-medium\@l {
+            width: var(--width-medium-width);
+        }
+
+        .#{$prefix}-width-large\@l {
+            width: var(--width-large-width);
+        }
+
+        .#{$prefix}-width-xlarge\@l {
+            width: var(--width-xlarge-width);
+        }
+
+        .#{$prefix}-width-2xlarge\@l {
+            width: var(--width-2xlarge-width);
+        }
+
+        /* Auto */
+        .#{$prefix}-width-auto\@l {
+            width: auto;
+        }
+
+        /* Expand */
+        .#{$prefix}-width-expand\@l {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+    /* Large screen and bigger */
+    // noinspection Stylelint
+    @media (--media-breakpoint-xlarge) {
+        /* Whole */
+        .#{$prefix}-width-1-1\@xl {
+            width: 100%;
+        }
+
+        /* Halves */
+        .#{$prefix}-width-1-2\@xl {
+            width: 50%;
+        }
+
+        /* Thirds */
+        .#{$prefix}-width-1-3\@xl {
+            width: string.unquote('calc(100% * 1 / 3.001)');
+        }
+
+        .#{$prefix}-width-2-3\@xl {
+            width: string.unquote('calc(100% * 2 / 3.001)');
+        }
+
+        /* Quarters */
+        .#{$prefix}-width-1-4\@xl {
+            width: 25%;
+        }
+
+        .#{$prefix}-width-3-4\@xl {
+            width: 75%;
+        }
+
+        /* Fifths */
+        .#{$prefix}-width-1-5\@xl {
+            width: 20%;
+        }
+
+        .#{$prefix}-width-2-5\@xl {
+            width: 40%;
+        }
+
+        .#{$prefix}-width-3-5\@xl {
+            width: 60%;
+        }
+
+        .#{$prefix}-width-4-5\@xl {
+            width: 80%;
+        }
+
+        /* Sixths */
+        .#{$prefix}-width-1-6\@xl {
+            width: string.unquote('calc(100% * 1 / 6.001)');
+        }
+
+        .#{$prefix}-width-5-6\@xl {
+            width: string.unquote('calc(100% * 5 / 6.001)');
+        }
+
+        /* Pixel */
+        .#{$prefix}-width-small\@xl {
+            width: var(--width-small-width);
+        }
+
+        .#{$prefix}-width-medium\@xl {
+            width: var(--width-medium-width);
+        }
+
+        .#{$prefix}-width-large\@xl {
+            width: var(--width-large-width);
+        }
+
+        .#{$prefix}-width-xlarge\@xl {
+            width: var(--width-xlarge-width);
+        }
+
+        .#{$prefix}-width-2xlarge\@xl {
+            width: var(--width-2xlarge-width);
+        }
+
+        /* Auto */
+        .#{$prefix}-width-auto\@xl {
+            width: auto;
+        }
+
+        /* Expand */
+        .#{$prefix}-width-expand\@xl {
+            flex: 1;
+            min-width: 1px;
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+
+    @if map.has-key($mixins, 'hook-width-misc') {
+        @include meta.apply(map.get($mixins, 'hook-width-misc'));
+    }
+
+    @content;
+}
+
+@mixin width-tokens {
+    --width-small-width: #{$width-small-width};
+    --width-medium-width: #{$width-medium-width};
+    --width-large-width: #{$width-large-width};
+    --width-xlarge-width: #{$width-xlarge-width};
+    --width-2xlarge-width: #{$width-2xlarge-width};
+
+    @content;
+}

package/dist/assets/mixin.css

@@ -1 +0,0 @@
-

package/dist/assets/mixins.css

@@ -1 +0,0 @@
-

package/dist/assets/variables.css

@@ -1 +0,0 @@
-