@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/position/_position.scss

@@ -0,0 +1,257 @@
+// Name:            Position
+// Description:     Utilities to position content
+//
+// Component:       `uk-position-absolute`
+//                  `uk-position-relative`
+//                  `uk-position-z-index`
+//                  `uk-position-top`
+//                  `uk-position-bottom`
+//                  `uk-position-left`
+//                  `uk-position-right`
+//                  `uk-position-top-left`
+//                  `uk-position-top-center`
+//                  `uk-position-top-right`
+//                  `uk-position-bottom-left`
+//                  `uk-position-bottom-center`
+//                  `uk-position-bottom-right`
+//                  `uk-position-center`
+//                  `uk-position-center-left`
+//                  `uk-position-center-right`
+//                  `uk-position-cover`
+//
+// Modifiers:       `uk-position-small`
+//                  `uk-position-medium`
+//                  `uk-position-large`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin position-styles {
+    /* ========================================================================
+       Component: Position
+     ========================================================================== */
+
+
+    /* Directions
+     ========================================================================== */
+
+    /*
+     * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
+     */
+
+    [class*='#{$prefix}-position-top'],
+    [class*='#{$prefix}-position-bottom'],
+    [class*='#{$prefix}-position-left'],
+    [class*='#{$prefix}-position-right'],
+    [class*='#{$prefix}-position-center'] {
+        box-sizing: border-box;
+
+        /* 1 */
+        max-width: string.unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
+        position: absolute !important;
+    }
+
+    /*
+     * Edges
+     * Don't use `width: 100%` because it's wrong if the parent has padding.
+     */
+
+    .#{$prefix}-position-top {
+        left: 0;
+        right: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-position-bottom {
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .#{$prefix}-position-left {
+        bottom: 0;
+        left: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-position-right {
+        bottom: 0;
+        right: 0;
+        top: 0;
+    }
+
+    /*
+     * Corners
+     */
+
+    .#{$prefix}-position-top-left {
+        left: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-position-top-right {
+        right: 0;
+        top: 0;
+    }
+
+    .#{$prefix}-position-bottom-left {
+        bottom: 0;
+        left: 0;
+    }
+
+    .#{$prefix}-position-bottom-right {
+        bottom: 0;
+        right: 0;
+    }
+
+    /*
+     * Center
+     * 1. Fix text wrapping if content is larger than 50% of the container.
+     *    Using `max-content` requires `max-width` of 100% which is set generally.
+     */
+
+    .#{$prefix}-position-center {
+        --uk-position-translate-x: -50%;
+        --uk-position-translate-y: -50%;
+        left: string.unquote('calc(50% - var(--uk-position-margin-offset))');
+        top: string.unquote('calc(50% - var(--uk-position-margin-offset))');
+        transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+
+        /* 1 */
+        width: max-content;
+    }
+
+    /* Vertical */
+    [class*='#{$prefix}-position-center-left'],
+    [class*='#{$prefix}-position-center-right'],
+    .#{$prefix}-position-center-vertical {
+        --uk-position-translate-y: -50%;
+        top: string.unquote('calc(50% - var(--uk-position-margin-offset))');
+        transform: translate(0, var(--uk-position-translate-y));
+    }
+
+    .#{$prefix}-position-center-left { left: 0; }
+    .#{$prefix}-position-center-right { right: 0; }
+
+    .#{$prefix}-position-center-vertical {
+        left: 0;
+        right: 0;
+    }
+
+    .#{$prefix}-position-center-left-out {
+        right: 100%;
+        width: max-content;
+    }
+
+    .#{$prefix}-position-center-right-out {
+        left: 100%;
+        width: max-content;
+    }
+
+    /* Horizontal */
+    .#{$prefix}-position-top-center,
+    .#{$prefix}-position-bottom-center,
+    .#{$prefix}-position-center-horizontal {
+        --uk-position-translate-x: -50%;
+        left: string.unquote('calc(50% - var(--uk-position-margin-offset))');
+        transform: translate(var(--uk-position-translate-x), 0);
+
+        /* 1 */
+        width: max-content;
+    }
+
+    .#{$prefix}-position-top-center { top: 0; }
+    .#{$prefix}-position-bottom-center { bottom: 0; }
+
+    .#{$prefix}-position-center-horizontal {
+        bottom: 0;
+        top: 0;
+    }
+
+    /*
+     * Cover
+     */
+
+    .#{$prefix}-position-cover {
+        inset: 0;
+        position: absolute;
+    }
+
+
+    /* Margin
+     ========================================================================== */
+
+    .#{$prefix}-position-small {
+        --uk-position-margin-offset: var(--position-small-margin);
+        margin: var(--position-small-margin);
+    }
+
+    .#{$prefix}-position-medium {
+        --uk-position-margin-offset: var(--position-medium-margin);
+        margin: var(--position-medium-margin);
+    }
+
+    .#{$prefix}-position-large {
+        --uk-position-margin-offset: var(--position-large-margin);
+        margin: var(--position-large-margin);
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-position-large {
+            --uk-position-margin-offset: var(--position-large-margin-l);
+            margin: var(--position-large-margin-l);
+        }
+    }
+
+
+    /* Schemes
+     ========================================================================== */
+
+    .#{$prefix}-position-relative { position: relative  !important; }
+    .#{$prefix}-position-absolute { position: absolute  !important; }
+    .#{$prefix}-position-fixed { position: fixed  !important; }
+    .#{$prefix}-position-sticky { position: sticky  !important; }
+
+
+    /* Layer
+     ========================================================================== */
+
+    .#{$prefix}-position-z-index { z-index: 1; }
+    .#{$prefix}-position-z-index-zero { z-index: 0; }
+    .#{$prefix}-position-z-index-negative { z-index: -1; }
+    .#{$prefix}-position-z-index-high { z-index: $global-z-index - 10; } // Higher than dropbar so it is behind
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-position-misc') {
+        @include meta.apply(map.get($mixins, 'hook-position-misc'));
+    }
+
+    // @mixin hook-position-misc() {}
+
+    @content;
+}
+
+@mixin position-tokens {
+    --uk-position-margin-offset: 0;
+    --position-small-margin: var(--global-small-gutter);
+    --position-medium-margin: var(--global-gutter);
+    --position-large-margin: var(--global-gutter);
+    --position-large-margin-l: #{$position-large-margin-l};
+
+    @content;
+}

package/styles/print.scss

@@ -7,8 +7,11 @@
 //
 // ========================================================================
 
+@use 'sass:map';
 @use 'sass:meta';
 
+@use 'mixins' as *;
+
 
 /* ========================================================================
    Component: Print
@@ -28,13 +31,13 @@
     pre,
     blockquote {
         border: 1px solid #999;
-        page-break-inside: avoid;
+        break-inside: avoid;
     }
 
     thead { display: table-header-group; }
 
     tr,
-    img { page-break-inside: avoid; }
+    img { break-inside: avoid; }
 
     img { max-width: 100% !important; }
 
@@ -48,9 +51,9 @@
     }
 
     h2,
-    h3 { page-break-after: avoid; }
+    h3 { break-after: avoid; }
 
-    @if meta.mixin-exists('hook-print') {
-        @include hook-print;
+    @if map.has-key($mixins, 'hook-print') {
+        @include meta.apply(map.get($mixins, 'hook-print'));
     }
 }

package/styles/progress/_index.scss

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

package/styles/progress/_progress.scss

@@ -0,0 +1,131 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin progress-styles {
+    /* ========================================================================
+       Component: Progress
+     ========================================================================== */
+
+    /*
+     * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+     * 2. Remove default style
+     * 3. Behave like a block element
+     * 4. Remove borders in Firefox and Edge
+     * 5. Set background color for progress container in Firefox, IE11 and Edge
+     * 6. Style
+     */
+
+    .#{$prefix}-progress {
+        /* 2 */
+        appearance: none;
+
+        /* 5 */
+        background-color: var(--progress-background);
+
+        /* 4 */
+        border: 0;
+
+        /* 3 */
+        display: block;
+        height: var(--progress-height);
+
+        /* 6 */
+        margin-bottom: var(--progress-margin-vertical);
+
+        /* 1 */
+        vertical-align: baseline;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-progress') {
+            @include meta.apply(map.get($mixins, 'hook-progress'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + .#{$prefix}-progress { margin-top: var(--progress-margin-vertical); }
+
+    /*
+     * Remove animated circles for indeterminate state in IE11 and Edge
+     */
+
+    .#{$prefix}-progress:indeterminate { color: transparent; }
+
+    /*
+     * Progress container
+     * 2. Remove progress bar for indeterminate state in Firefox
+     */
+
+    .#{$prefix}-progress::-webkit-progress-bar {
+        background-color: var(--progress-background);
+        @if map.has-key($mixins, 'hook-progress') {
+            @include meta.apply(map.get($mixins, 'hook-progress'));
+        }
+    }
+
+    /* 2 */
+    .#{$prefix}-progress:indeterminate::-moz-progress-bar { width: 0; }
+
+    /*
+     * Progress bar
+     * 1. Remove right border in IE11 and Edge
+     */
+
+    .#{$prefix}-progress::-webkit-progress-value {
+        background-color: var(--progress-bar-background);
+        transition: width 0.6s ease;
+        @if map.has-key($mixins, 'hook-progress-bar') {
+            @include meta.apply(map.get($mixins, 'hook-progress-bar'));
+        }
+    }
+
+    .#{$prefix}-progress::-moz-progress-bar {
+        background-color: var(--progress-bar-background);
+        @if map.has-key($mixins, 'hook-progress-bar') {
+            @include meta.apply(map.get($mixins, 'hook-progress-bar'));
+        }
+    }
+
+    .#{$prefix}-progress::-ms-fill {
+        background-color: var(--progress-bar-background);
+
+        /* 1 */
+        border: 0;
+        transition: width 0.6s ease;
+        @if map.has-key($mixins, 'hook-progress-bar') {
+            @include meta.apply(map.get($mixins, 'hook-progress-bar'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-progress-misc') {
+        @include meta.apply(map.get($mixins, 'hook-progress-misc'));
+    }
+
+    @content;
+}
+
+@mixin progress-tokens {
+    --progress-height: #{$progress-height};
+    --progress-margin-vertical: var(--global-margin);
+    --progress-background: var(--global-muted-background);
+    --progress-bar-background: var(--global-primary-background);
+
+    @content;
+}

package/styles/radio/_index.scss

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