@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/cjs/styles → styles}/position.scss

@@ -25,11 +25,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -49,16 +52,18 @@
 [class*='uk-position-left'],
 [class*='uk-position-right'],
 [class*='uk-position-center'] {
+    box-sizing: border-box;
+
     /* 1 */
-    max-width: 100%;
+    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.
+ */
 
-/* Edges
- ========================================================================== */
-
-/* Don't use `width: 100%` because it is wrong if the parent has padding. */
 .uk-position-top {
     left: 0;
     right: 0;
@@ -83,9 +88,9 @@
     top: 0;
 }
 
-
-/* Corners
- ========================================================================== */
+/*
+ * Corners
+ */
 
 .uk-position-top-left {
     left: 0;
@@ -110,14 +115,15 @@
 /*
  * 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.
  */
 
 .uk-position-center {
-    box-sizing: border-box;
-    left: 50%;
-    max-width: 100%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    --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;
@@ -125,15 +131,21 @@
 
 /* Vertical */
 [class*='uk-position-center-left'],
-[class*='uk-position-center-right'] {
-    top: 50%;
-    transform: translateY(-50%);
+[class*='uk-position-center-right'],
+.uk-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));
 }
 
 .uk-position-center-left { left: 0; }
-
 .uk-position-center-right { right: 0; }
 
+.uk-position-center-vertical {
+    left: 0;
+    right: 0;
+}
+
 .uk-position-center-left-out {
     right: 100%;
     width: max-content;
@@ -146,148 +158,83 @@
 
 /* Horizontal */
 .uk-position-top-center,
-.uk-position-bottom-center {
-    box-sizing: border-box;
-    left: 50%;
-    max-width: 100%;
-    transform: translateX(-50%);
+.uk-position-bottom-center,
+.uk-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;
 }
 
 .uk-position-top-center { top: 0; }
-
 .uk-position-bottom-center { bottom: 0; }
 
-
-/* Cover
- ========================================================================== */
-
-.uk-position-cover {
+.uk-position-center-horizontal {
     bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
     top: 0;
 }
 
-
-/* Utility
- ========================================================================== */
-
-.uk-position-relative { position: relative !important; }
-
-.uk-position-absolute { position: absolute !important; }
-
-.uk-position-fixed { position: fixed !important; }
-
-.uk-position-z-index { z-index: 1; }
-
-
-/* Margin modifier
- ========================================================================== */
-
 /*
- * Small
+ * Cover
  */
 
-.uk-position-small {
-    margin: var(--position-small-margin);
-    max-width: calc(100% - var(--position-small-margin) * 2);
+.uk-position-cover {
+    inset: 0;
+    position: absolute;
 }
 
-.uk-position-small.uk-position-center {
-    transform: translate(-50%, -50%)
-        translate(unquote('calc(var(--position-small-margin) * -1)')), unquote('calc(var(--position-small-margin) * -1)');
-}
 
-.uk-position-small[class*='uk-position-center-left'],
-.uk-position-small[class*='uk-position-center-right'] {
-    transform: translateY(-50%) translateY(unquote('calc(var(--position-small-margin) * -1)'));
-}
+/* Margin
+ ========================================================================== */
 
-.uk-position-small.uk-position-top-center,
-.uk-position-small.uk-position-bottom-center {
-    transform: translateX(-50%) translateX(unquote('calc(var(--position-small-margin) * -1)'));
+.uk-position-small {
+    --uk-position-margin-offset: var(--position-small-margin);
+    margin: var(--position-small-margin);
 }
 
-/*
- * Medium
- */
-
 .uk-position-medium {
+    --uk-position-margin-offset: var(--position-medium-margin);
     margin: var(--position-medium-margin);
-    max-width: calc(100% - var(--position-medium-margin) * 2);
-}
-
-.uk-position-medium.uk-position-center {
-    transform: translate(-50%, -50%)
-        translate(unquote('calc(var(--position-medium-margin) * -1)')), unquote('calc(var(--position-medium-margin) * -1)');
-}
-
-.uk-position-medium[class*='uk-position-center-left'],
-.uk-position-medium[class*='uk-position-center-right'] {
-    transform: translateY(-50%) translateY(unquote('calc(var(--position-medium-margin) * -1)'));
 }
 
-.uk-position-medium.uk-position-top-center,
-.uk-position-medium.uk-position-bottom-center {
-    transform: translateX(-50%) translateX(unquote('calc(var(--position-medium-margin) * -1)'));
-}
-
-/*
- * Large
- */
-
 .uk-position-large {
+    --uk-position-margin-offset: var(--position-large-margin);
     margin: var(--position-large-margin);
-    max-width: calc(100% - var(--position-large-margin) * 2);
-}
-
-.uk-position-large.uk-position-center {
-    transform: translate(-50%, -50%)
-        translate(unquote('calc(var(--position-large-margin) * -1)')), unquote('calc(var(--position-large-margin) * -1)');
-}
-
-.uk-position-large[class*='uk-position-center-left'],
-.uk-position-large[class*='uk-position-center-right'] {
-    transform: translateY(-50%) translateY(unquote('calc(var(--position-large-margin) * -1)'));
-}
-
-.uk-position-large.uk-position-top-center,
-.uk-position-large.uk-position-bottom-center {
-    transform: translateX(-50%) translateX(unquote('calc(var(--position-large-margin) * -1)'));
 }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
     .uk-position-large {
+        --uk-position-margin-offset: var(--position-large-margin-l);
         margin: var(--position-large-margin-l);
-        max-width: calc(100% - var(--position-large-margin-l) * 2);
     }
+}
 
-    .uk-position-large.uk-position-center {
-        transform: translate(-50%, -50%)
-            translate(unquote('calc(var(--position-large-margin-l) * -1)')), unquote('calc(var(--position-large-margin-l) * -1)');
-    }
 
-    .uk-position-large[class*='uk-position-center-left'],
-    .uk-position-large[class*='uk-position-center-right'] {
-        transform: translateY(-50%) translateY(unquote('calc(var(--position-large-margin-l) * -1)'));
-    }
+/* Schemes
+ ========================================================================== */
 
-    .uk-position-large.uk-position-top-center,
-    .uk-position-large.uk-position-bottom-center {
-        transform: translateX(-50%) translateX(unquote('calc(var(--position-large-margin-l) * -1)'));
-    }
-}
+.uk-position-relative { position: relative  !important; }
+.uk-position-absolute { position: absolute  !important; }
+.uk-position-fixed { position: fixed  !important; }
+.uk-position-sticky { position: sticky  !important; }
+
+
+/* Layer
+ ========================================================================== */
+
+.uk-position-z-index { z-index: 1; }
+.uk-position-z-index-zero { z-index: 0; }
+.uk-position-z-index-negative { z-index: -1; }
+.uk-position-z-index-high { z-index: $global-z-index - 10; } // Higher than dropbar so it is behind
 
 
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-position-misc) {
+@if meta.mixin-exists('hook-position-misc') {
     @include hook-position-misc;
 }
 
@@ -298,6 +245,7 @@
 // ========================================================================
 
 :root {
+    --uk-position-margin-offset: 0;
     --position-small-margin: var(--global-small-gutter);
     --position-medium-margin: var(--global-gutter);
     --position-large-margin: var(--global-gutter);

package/{dist/cjs/styles → styles}/print.scss

@@ -7,6 +7,8 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 /* ========================================================================
    Component: Print
@@ -48,7 +50,7 @@
     h2,
     h3 { page-break-after: avoid; }
 
-    @if mixin-exists(hook-print) {
+    @if meta.mixin-exists('hook-print') {
         @include hook-print;
     }
 }

package/{dist/esm/components/Progress/index.scss → styles/progress.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -45,7 +47,7 @@
     /* 1 */
     vertical-align: baseline;
     width: 100%;
-    @if mixin-exists(hook-progress) {
+    @if meta.mixin-exists('hook-progress') {
         @include hook-progress;
     }
 }
@@ -66,7 +68,7 @@
 
 .uk-progress::-webkit-progress-bar {
     background-color: var(--progress-background);
-    @if mixin-exists(hook-progress) {
+    @if meta.mixin-exists('hook-progress') {
         @include hook-progress;
     }
 }
@@ -82,14 +84,14 @@
 .uk-progress::-webkit-progress-value {
     background-color: var(--progress-bar-background);
     transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
+    @if meta.mixin-exists('hook-progress-bar') {
         @include hook-progress-bar;
     }
 }
 
 .uk-progress::-moz-progress-bar {
     background-color: var(--progress-bar-background);
-    @if mixin-exists(hook-progress-bar) {
+    @if meta.mixin-exists('hook-progress-bar') {
         @include hook-progress-bar;
     }
 }
@@ -100,7 +102,7 @@
     /* 1 */
     border: 0;
     transition: width 0.6s ease;
-    @if mixin-exists(hook-progress-bar) {
+    @if meta.mixin-exists('hook-progress-bar') {
         @include hook-progress-bar;
     }
 }
@@ -109,7 +111,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-progress-misc) {
+@if meta.mixin-exists('hook-progress-misc') {
     @include hook-progress-misc;
 }
 

package/{dist/esm/components/Control/Radio/index.scss → styles/radio.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -21,14 +23,13 @@
     display: flex;
     line-height: unset;
     user-select: none;
+    @if meta.mixin-exists('hook-radio-wrapper') {
+        @include hook-radio-wrapper;
+    }
 
     &.uk-control {
         background-color: var(--radio-control-background);
     }
-
-    @if mixin-exists(hook-radio-wrapper) {
-        @include hook-radio-wrapper;
-    }
 }
 
 .uk-radio-wrapper .uk-radio {
@@ -43,7 +44,7 @@
     top: 0;
     vertical-align: sub;
     white-space: nowrap;
-    @if mixin-exists(hook-radio-radio) {
+    @if meta.mixin-exists('hook-radio-radio') {
         @include hook-radio-radio;
     }
 }
@@ -57,7 +58,7 @@
     position: absolute;
     width: 100%;
     z-index: 1;
-    @if mixin-exists(hook-radio-input) {
+    @if meta.mixin-exists('hook-radio-input') {
         @include hook-radio-input;
     }
 }
@@ -74,7 +75,7 @@
     top: 0;
     transition: all var(--transition-duration);
     width: var(--radio-size);
-    @if mixin-exists(hook-radio-inner) {
+    @if meta.mixin-exists('hook-radio-inner') {
         @include hook-radio-inner;
     }
 }
@@ -101,14 +102,14 @@
     padding-left: var(--control-affix-margin);
     text-overflow: ellipsis;
     white-space: nowrap;
-    @if mixin-exists(hook-radio-label) {
+    @if meta.mixin-exists('hook-radio-label') {
         @include hook-radio-label;
     }
 }
 
 // Hover state
 .uk-radio-wrapper:not(.uk-checked):hover {
-    @if mixin-exists(hook-radio-hover) {
+    @if meta.mixin-exists('hook-radio-hover') {
         @include hook-radio-hover;
     }
 }
@@ -125,7 +126,7 @@
 
 // Checked state
 .uk-radio-checked {
-    @if mixin-exists(hook-radio-checked) {
+    @if meta.mixin-exists('hook-radio-checked') {
         @include hook-radio-checked;
     }
 }
@@ -159,7 +160,7 @@
 // Disabled state
 .uk-radio-disabled {
     cursor: not-allowed;
-    @if mixin-exists(hook-radio-disabled) {
+    @if meta.mixin-exists('hook-radio-disabled') {
         @include hook-radio-disabled;
     }
 
@@ -191,14 +192,14 @@
     display: flex;
     flex-direction: row;
     gap: var(--control-affix-margin);
-    @if mixin-exists(hook-radio-group) {
+    @if meta.mixin-exists('hook-radio-group') {
         @include hook-radio-group;
     }
 }
 
 .uk-radio-group-stack {
     flex-direction: column;
-    @if mixin-exists(hook-radio-group-stack) {
+    @if meta.mixin-exists('hook-radio-group-stack') {
         @include hook-radio-group-stack;
     }
 }
@@ -212,7 +213,7 @@
     cursor: pointer;
     padding-bottom: var(--control-medium-padding-vertical);
     padding-top: var(--control-medium-padding-vertical);
-    @if mixin-exists(hook-radio-control) {
+    @if meta.mixin-exists('hook-radio-control') {
         @include hook-radio-control;
     }
 }
@@ -252,7 +253,7 @@
     --radio-background: var(--control-background);
     --radio-border: var(--control-border);
     --radio-border-width: var(--control-border-width);
-    --radio-hover-border: var(--global-primary-border);
+    --radio-hover-border: var(--control-hover-border);
     --radio-focus-background: var(--control-focus-background);
     --radio-focus-border: var(--control-focus-border);
     --radio-checked-background: #{$radio-checked-background};

package/{dist/cjs/styles → styles}/search.scss

@@ -14,11 +14,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -107,7 +109,7 @@
 
     /* 8 */
     width: 100%;
-    @if mixin-exists(hook-search-input) {
+    @if meta.mixin-exists('hook-search-input') {
         @include hook-search-input;
     }
 }
@@ -203,7 +205,7 @@
     height: var(--search-default-height);
     padding-left: var(--search-default-padding-horizontal);
     padding-right: var(--search-default-padding-horizontal);
-    @if mixin-exists(hook-search-default-input) {
+    @if meta.mixin-exists('hook-search-default-input') {
         @include hook-search-default-input;
     }
 }
@@ -211,7 +213,7 @@
 /* Focus */
 .uk-search-default .uk-search-input:focus {
     background-color: var(--search-default-focus-background);
-    @if mixin-exists(hook-search-default-input-focus) {
+    @if meta.mixin-exists('hook-search-default-input-focus') {
         @include hook-search-default-input-focus;
     }
 }
@@ -248,7 +250,7 @@
     background: var(--search-navbar-background);
     font-size: var(--search-navbar-font-size);
     height: var(--search-navbar-height);
-    @if mixin-exists(hook-search-navbar-input) {
+    @if meta.mixin-exists('hook-search-navbar-input') {
         @include hook-search-navbar-input;
     }
 }
@@ -285,7 +287,7 @@
     background: var(--search-large-background);
     font-size: var(--search-large-font-size);
     height: var(--search-large-height);
-    @if mixin-exists(hook-search-large-input) {
+    @if meta.mixin-exists('hook-search-large-input') {
         @include hook-search-large-input;
     }
 }
@@ -312,7 +314,7 @@
 
 .uk-search-toggle {
     color: var(--search-toggle-color);
-    @if mixin-exists(hook-search-toggle) {
+    @if meta.mixin-exists('hook-search-toggle') {
         @include hook-search-toggle;
     }
 }
@@ -321,7 +323,7 @@
 .uk-search-toggle:hover,
 .uk-search-toggle:focus {
     color: var(--search-toggle-hover-color);
-    @if mixin-exists(hook-search-toggle-hover) {
+    @if meta.mixin-exists('hook-search-toggle-hover') {
         @include hook-search-toggle-hover;
     }
 }
@@ -330,7 +332,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-search-misc) {
+@if meta.mixin-exists('hook-search-misc') {
     @include hook-search-misc;
 }
 

package/{dist/esm/components/Section/index.scss → styles/section.scss}

@@ -18,11 +18,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -38,7 +40,7 @@
     display: flow-root;
     padding-bottom: var(--section-padding-vertical);
     padding-top: var(--section-padding-vertical);
-    @if mixin-exists(hook-section) {
+    @if meta.mixin-exists('hook-section') {
         @include hook-section;
     }
 }
@@ -126,7 +128,7 @@
 .uk-section-default {
     --uk-inverse: #{$section-default-color-mode};
     background: var(--section-default-background);
-    @if mixin-exists(hook-section-default) {
+    @if meta.mixin-exists('hook-section-default') {
         @include hook-section-default;
     }
 }
@@ -150,7 +152,7 @@
 .uk-section-muted {
     --uk-inverse: #{$section-muted-color-mode};
     background: var(--section-muted-background);
-    @if mixin-exists(hook-section-muted) {
+    @if meta.mixin-exists('hook-section-muted') {
         @include hook-section-muted;
     }
 }
@@ -174,7 +176,7 @@
 .uk-section-primary {
     --uk-inverse: #{$section-primary-color-mode};
     background: var(--section-primary-background);
-    @if mixin-exists(hook-section-primary) {
+    @if meta.mixin-exists('hook-section-primary') {
         @include hook-section-primary;
     }
 }
@@ -198,7 +200,7 @@
 .uk-section-secondary {
     --uk-inverse: #{$section-secondary-color-mode};
     background: var(--section-secondary-background);
-    @if mixin-exists(hook-section-secondary) {
+    @if meta.mixin-exists('hook-section-secondary') {
         @include hook-section-secondary;
     }
 }
@@ -222,7 +224,7 @@
 .uk-section-tertiary {
     --uk-inverse: #{$section-tertiary-color-mode};
     background: var(--section-tertiary-background);
-    @if mixin-exists(hook-section-tertiary) {
+    @if meta.mixin-exists('hook-section-tertiary') {
         @include hook-section-tertiary;
     }
 }
@@ -249,7 +251,7 @@
  */
 
 .uk-section-overlap {
-    @if mixin-exists(hook-section-overlap) {
+    @if meta.mixin-exists('hook-section-overlap') {
         @include hook-section-overlap;
     }
 }
@@ -258,7 +260,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-section-misc) {
+@if meta.mixin-exists('hook-section-misc') {
     @include hook-section-misc;
 }