@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/width.scss

@@ -1,694 +0,0 @@
-// Name:            Width
-// Description:     Utilities for widths
-//
-// Component:       `uk-child-width-*`
-//                  `uk-width-*`
-//
-// ========================================================================
-
-@use 'sass:meta';
-@use 'sass:string';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Width
- ========================================================================== */
-
-
-/* Equal child widths
- ========================================================================== */
-
-[class*='uk-child-width'] > * {
-    box-sizing: border-box;
-    width: 100%;
-}
-
-.uk-child-width-1-2 > * {
-    width: 50%;
-}
-
-.uk-child-width-1-3 > * {
-    width: string.unquote('calc(100% * 1 / 3.001)');
-}
-
-.uk-child-width-1-4 > * {
-    width: 25%;
-}
-
-.uk-child-width-1-5 > * {
-    width: 20%;
-}
-
-.uk-child-width-1-6 > * {
-    width: string.unquote('calc(100% * 1 / 6.001)');
-}
-
-.uk-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.
- */
-
-.uk-child-width-expand > :not([class*='uk-width']) {
-    flex: 1;
-
-    /* 1 */
-    min-width: 1px;
-}
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    .uk-child-width-1-1\@s > * {
-        width: 100%;
-    }
-
-    .uk-child-width-1-2\@s > * {
-        width: 50%;
-    }
-
-    .uk-child-width-1-3\@s > * {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-child-width-1-4\@s > * {
-        width: 25%;
-    }
-
-    .uk-child-width-1-5\@s > * {
-        width: 20%;
-    }
-
-    .uk-child-width-1-6\@s > * {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-child-width-auto\@s > * {
-        width: auto;
-    }
-
-    .uk-child-width-expand\@s > :not([class*='uk-width']) {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    .uk-child-width-1-1\@m > * {
-        width: 100%;
-    }
-
-    .uk-child-width-1-2\@m > * {
-        width: 50%;
-    }
-
-    .uk-child-width-1-3\@m > * {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-child-width-1-4\@m > * {
-        width: 25%;
-    }
-
-    .uk-child-width-1-5\@m > * {
-        width: 20%;
-    }
-
-    .uk-child-width-1-6\@m > * {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-child-width-auto\@m > * {
-        width: auto;
-    }
-
-    .uk-child-width-expand\@m > :not([class*='uk-width']) {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    .uk-child-width-1-1\@l > * {
-        width: 100%;
-    }
-
-    .uk-child-width-1-2\@l > * {
-        width: 50%;
-    }
-
-    .uk-child-width-1-3\@l > * {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-child-width-1-4\@l > * {
-        width: 25%;
-    }
-
-    .uk-child-width-1-5\@l > * {
-        width: 20%;
-    }
-
-    .uk-child-width-1-6\@l > * {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-child-width-auto\@l > * {
-        width: auto;
-    }
-
-    .uk-child-width-expand\@l > :not([class*='uk-width']) {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-    .uk-child-width-1-1\@xl > * {
-        width: 100%;
-    }
-
-    .uk-child-width-1-2\@xl > * {
-        width: 50%;
-    }
-
-    .uk-child-width-1-3\@xl > * {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-child-width-1-4\@xl > * {
-        width: 25%;
-    }
-
-    .uk-child-width-1-5\@xl > * {
-        width: 20%;
-    }
-
-    .uk-child-width-1-6\@xl > * {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-child-width-auto\@xl > * {
-        width: auto;
-    }
-
-    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-
-/* Single Widths
- ========================================================================== */
-
-/*
- * 1. `max-width` is needed for the pixel-based classes
- */
-
-[class*='uk-width'] {
-    box-sizing: border-box;
-
-    /* 1 */
-    max-width: 100%;
-    width: 100%;
-}
-
-/* Halves */
-.uk-width-1-2 {
-    width: 50%;
-}
-
-/* Thirds */
-.uk-width-1-3 {
-    width: string.unquote('calc(100% * 1 / 3.001)');
-}
-
-.uk-width-2-3 {
-    width: string.unquote('calc(100% * 2 / 3.001)');
-}
-
-/* Quarters */
-.uk-width-1-4 {
-    width: 25%;
-}
-
-.uk-width-3-4 {
-    width: 75%;
-}
-
-/* Fifths */
-.uk-width-1-5 {
-    width: 20%;
-}
-
-.uk-width-2-5 {
-    width: 40%;
-}
-
-.uk-width-3-5 {
-    width: 60%;
-}
-
-.uk-width-4-5 {
-    width: 80%;
-}
-
-/* Sixths */
-.uk-width-1-6 {
-    width: string.unquote('calc(100% * 1 / 6.001)');
-}
-
-.uk-width-5-6 {
-    width: string.unquote('calc(100% * 5 / 6.001)');
-}
-
-/* Pixel */
-.uk-width-small {
-    width: var(--width-small-width);
-}
-
-.uk-width-medium {
-    width: var(--width-medium-width);
-}
-
-.uk-width-large {
-    width: var(--width-large-width);
-}
-
-.uk-width-xlarge {
-    width: var(--width-xlarge-width);
-}
-
-.uk-width-2xlarge {
-    width: var(--width-2xlarge-width);
-}
-
-/* Auto */
-.uk-width-auto {
-    width: auto;
-}
-
-/* Expand */
-.uk-width-expand {
-    flex: 1;
-    min-width: 1px;
-}
-
-/* Phone landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-small) {
-    /* Whole */
-    .uk-width-1-1\@s {
-        width: 100%;
-    }
-
-    /* Halves */
-    .uk-width-1-2\@s {
-        width: 50%;
-    }
-
-    /* Thirds */
-    .uk-width-1-3\@s {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-width-2-3\@s {
-        width: string.unquote('calc(100% * 2 / 3.001)');
-    }
-
-    /* Quarters */
-    .uk-width-1-4\@s {
-        width: 25%;
-    }
-
-    .uk-width-3-4\@s {
-        width: 75%;
-    }
-
-    /* Fifths */
-    .uk-width-1-5\@s {
-        width: 20%;
-    }
-
-    .uk-width-2-5\@s {
-        width: 40%;
-    }
-
-    .uk-width-3-5\@s {
-        width: 60%;
-    }
-
-    .uk-width-4-5\@s {
-        width: 80%;
-    }
-
-    /* Sixths */
-    .uk-width-1-6\@s {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-width-5-6\@s {
-        width: string.unquote('calc(100% * 5 / 6.001)');
-    }
-
-    /* Pixel */
-    .uk-width-small\@s {
-        width: var(--width-small-width);
-    }
-
-    .uk-width-medium\@s {
-        width: var(--width-medium-width);
-    }
-
-    .uk-width-large\@s {
-        width: var(--width-large-width);
-    }
-
-    .uk-width-xlarge\@s {
-        width: var(--width-xlarge-width);
-    }
-
-    .uk-width-2xlarge\@s {
-        width: var(--width-2xlarge-width);
-    }
-
-    /* Auto */
-    .uk-width-auto\@s {
-        width: auto;
-    }
-
-    /* Expand */
-    .uk-width-expand\@s {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Tablet landscape and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-medium) {
-    /* Whole */
-    .uk-width-1-1\@m {
-        width: 100%;
-    }
-
-    /* Halves */
-    .uk-width-1-2\@m {
-        width: 50%;
-    }
-
-    /* Thirds */
-    .uk-width-1-3\@m {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-width-2-3\@m {
-        width: string.unquote('calc(100% * 2 / 3.001)');
-    }
-
-    /* Quarters */
-    .uk-width-1-4\@m {
-        width: 25%;
-    }
-
-    .uk-width-3-4\@m {
-        width: 75%;
-    }
-
-    /* Fifths */
-    .uk-width-1-5\@m {
-        width: 20%;
-    }
-
-    .uk-width-2-5\@m {
-        width: 40%;
-    }
-
-    .uk-width-3-5\@m {
-        width: 60%;
-    }
-
-    .uk-width-4-5\@m {
-        width: 80%;
-    }
-
-    /* Sixths */
-    .uk-width-1-6\@m {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-width-5-6\@m {
-        width: string.unquote('calc(100% * 5 / 6.001)');
-    }
-
-    /* Pixel */
-    .uk-width-small\@m {
-        width: var(--width-small-width);
-    }
-
-    .uk-width-medium\@m {
-        width: var(--width-medium-width);
-    }
-
-    .uk-width-large\@m {
-        width: var(--width-large-width);
-    }
-
-    .uk-width-xlarge\@m {
-        width: var(--width-xlarge-width);
-    }
-
-    .uk-width-2xlarge\@m {
-        width: var(--width-2xlarge-width);
-    }
-
-    /* Auto */
-    .uk-width-auto\@m {
-        width: auto;
-    }
-
-    /* Expand */
-    .uk-width-expand\@m {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Desktop and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-large) {
-    /* Whole */
-    .uk-width-1-1\@l {
-        width: 100%;
-    }
-
-    /* Halves */
-    .uk-width-1-2\@l {
-        width: 50%;
-    }
-
-    /* Thirds */
-    .uk-width-1-3\@l {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-width-2-3\@l {
-        width: string.unquote('calc(100% * 2 / 3.001)');
-    }
-
-    /* Quarters */
-    .uk-width-1-4\@l {
-        width: 25%;
-    }
-
-    .uk-width-3-4\@l {
-        width: 75%;
-    }
-
-    /* Fifths */
-    .uk-width-1-5\@l {
-        width: 20%;
-    }
-
-    .uk-width-2-5\@l {
-        width: 40%;
-    }
-
-    .uk-width-3-5\@l {
-        width: 60%;
-    }
-
-    .uk-width-4-5\@l {
-        width: 80%;
-    }
-
-    /* Sixths */
-    .uk-width-1-6\@l {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-width-5-6\@l {
-        width: string.unquote('calc(100% * 5 / 6.001)');
-    }
-
-    /* Pixel */
-    .uk-width-small\@l {
-        width: var(--width-small-width);
-    }
-
-    .uk-width-medium\@l {
-        width: var(--width-medium-width);
-    }
-
-    .uk-width-large\@l {
-        width: var(--width-large-width);
-    }
-
-    .uk-width-xlarge\@l {
-        width: var(--width-xlarge-width);
-    }
-
-    .uk-width-2xlarge\@l {
-        width: var(--width-2xlarge-width);
-    }
-
-    /* Auto */
-    .uk-width-auto\@l {
-        width: auto;
-    }
-
-    /* Expand */
-    .uk-width-expand\@l {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-/* Large screen and bigger */
-// noinspection Stylelint
-@media (min-width: $breakpoint-xlarge) {
-    /* Whole */
-    .uk-width-1-1\@xl {
-        width: 100%;
-    }
-
-    /* Halves */
-    .uk-width-1-2\@xl {
-        width: 50%;
-    }
-
-    /* Thirds */
-    .uk-width-1-3\@xl {
-        width: string.unquote('calc(100% * 1 / 3.001)');
-    }
-
-    .uk-width-2-3\@xl {
-        width: string.unquote('calc(100% * 2 / 3.001)');
-    }
-
-    /* Quarters */
-    .uk-width-1-4\@xl {
-        width: 25%;
-    }
-
-    .uk-width-3-4\@xl {
-        width: 75%;
-    }
-
-    /* Fifths */
-    .uk-width-1-5\@xl {
-        width: 20%;
-    }
-
-    .uk-width-2-5\@xl {
-        width: 40%;
-    }
-
-    .uk-width-3-5\@xl {
-        width: 60%;
-    }
-
-    .uk-width-4-5\@xl {
-        width: 80%;
-    }
-
-    /* Sixths */
-    .uk-width-1-6\@xl {
-        width: string.unquote('calc(100% * 1 / 6.001)');
-    }
-
-    .uk-width-5-6\@xl {
-        width: string.unquote('calc(100% * 5 / 6.001)');
-    }
-
-    /* Pixel */
-    .uk-width-small\@xl {
-        width: var(--width-small-width);
-    }
-
-    .uk-width-medium\@xl {
-        width: var(--width-medium-width);
-    }
-
-    .uk-width-large\@xl {
-        width: var(--width-large-width);
-    }
-
-    .uk-width-xlarge\@xl {
-        width: var(--width-xlarge-width);
-    }
-
-    .uk-width-2xlarge\@xl {
-        width: var(--width-2xlarge-width);
-    }
-
-    /* Auto */
-    .uk-width-auto\@xl {
-        width: auto;
-    }
-
-    /* Expand */
-    .uk-width-expand\@xl {
-        flex: 1;
-        min-width: 1px;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-
-@if meta.mixin-exists('hook-width-misc') {
-    @include hook-width-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --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};
-}