@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/esm/components/Control/Checkbox/index.scss → styles/checkbox.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-checkbox-wrapper') {
+        @include hook-checkbox-wrapper;
+    }
 
     &.uk-control {
         background-color: var(--checkbox-control-background);
     }
-
-    @if mixin-exists(hook-checkbox-wrapper) {
-        @include hook-checkbox-wrapper;
-    }
 }
 
 .uk-checkbox-wrapper .uk-checkbox {
@@ -43,7 +44,7 @@
     top: 0;
     vertical-align: sub;
     white-space: nowrap;
-    @if mixin-exists(hook-checkbox-checkbox) {
+    @if meta.mixin-exists('hook-checkbox-checkbox') {
         @include hook-checkbox-checkbox;
     }
 }
@@ -61,7 +62,7 @@
     position: absolute;
     width: 100%;
     z-index: 1;
-    @if mixin-exists(hook-checkbox-input) {
+    @if meta.mixin-exists('hook-checkbox-input') {
         @include hook-checkbox-input;
     }
 }
@@ -80,7 +81,7 @@
     top: 0;
     transition: all var(--transition-duration);
     width: var(--checkbox-size);
-    @if mixin-exists(hook-checkbox-inner) {
+    @if meta.mixin-exists('hook-checkbox-inner') {
         @include hook-checkbox-inner;
     }
 }
@@ -109,7 +110,7 @@
     overflow: hidden;
     padding-left: var(--control-affix-margin);
     text-overflow: ellipsis;
-    @if mixin-exists(hook-checkbox-label) {
+    @if meta.mixin-exists('hook-checkbox-label') {
         @include hook-checkbox-label;
     }
 }
@@ -120,7 +121,7 @@
 
 // Hover state
 .uk-checkbox-wrapper:not(.uk-checked):hover {
-    @if mixin-exists(hook-checkbox-hover) {
+    @if meta.mixin-exists('hook-checkbox-hover') {
         @include hook-checkbox-hover;
     }
 }
@@ -138,7 +139,7 @@
 
 // Checked state
 .uk-checkbox-checked {
-    @if mixin-exists(hook-checkbox-checked) {
+    @if meta.mixin-exists('hook-checkbox-checked') {
         @include hook-checkbox-checked;
     }
 }
@@ -176,7 +177,7 @@
 // Disabled state
 .uk-checkbox-disabled {
     cursor: not-allowed;
-    @if mixin-exists(hook-checkbox-disabled) {
+    @if meta.mixin-exists('hook-checkbox-disabled') {
         @include hook-checkbox-disabled;
     }
 }
@@ -205,7 +206,7 @@
  ========================================================================== */
 
 .uk-checkbox-indeterminate {
-    @if mixin-exists(hook-checkbox-indeterminate) {
+    @if meta.mixin-exists('hook-checkbox-indeterminate') {
         @include hook-checkbox-indeterminate;
     }
 }
@@ -242,14 +243,14 @@
     display: flex;
     flex-direction: row;
     gap: var(--control-affix-margin);
-    @if mixin-exists(hook-checkbox-group) {
+    @if meta.mixin-exists('hook-checkbox-group') {
         @include hook-checkbox-group;
     }
 }
 
 .uk-checkbox-group-stack {
     flex-direction: column;
-    @if mixin-exists(hook-checkbox-group-stack) {
+    @if meta.mixin-exists('hook-checkbox-group-stack') {
         @include hook-checkbox-group-stack;
     }
 }
@@ -262,7 +263,7 @@
     cursor: pointer;
     padding-bottom: var(--control-medium-padding-vertical);
     padding-top: var(--control-medium-padding-vertical);
-    @if mixin-exists(hook-checkbox-control) {
+    @if meta.mixin-exists('hook-checkbox-control') {
         @include hook-checkbox-control;
     }
 }
@@ -305,9 +306,9 @@
     --checkbox-border: var(--control-border);
     --checkbox-border-width: var(--control-border-width);
     --checkbox-border-radius: var(--control-border-radius);
-    --checkbox-hover-border: var(--global-primary-border);
+    --checkbox-hover-border: var(--control-hover-border);
     --checkbox-focus-background: var(--control-focus-background);
-    --checkbox-focus-border: var(--global-primary-border);
+    --checkbox-focus-border: var(--control-focus-border);
     --checkbox-disabled-background: var(--control-disabled-background);
     --checkbox-disabled-border: var(--control-disabled-border);
     --checkbox-disabled-icon-color: var(--global-muted-color);

package/{dist/cjs/components/Close/index.scss → styles/close.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -23,7 +25,7 @@
 .uk-close {
     background-color: transparent;
     color: var(--close-color);
-    @if mixin-exists(hook-close) {
+    @if meta.mixin-exists('hook-close') {
         @include hook-close;
     }
 }
@@ -33,7 +35,7 @@
 .uk-close:focus {
     color: var(--close-hover-color);
     outline: none;
-    @if mixin-exists(hook-close-hover) {
+    @if meta.mixin-exists('hook-close-hover') {
         @include hook-close-hover;
     }
 }
@@ -42,7 +44,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-close-misc) {
+@if meta.mixin-exists('hook-close-misc') {
     @include hook-close-misc;
 }
 

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

@@ -9,11 +9,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -131,7 +133,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-column-misc) {
+@if meta.mixin-exists('hook-column-misc') {
     @include hook-column-misc;
 }
 

package/{dist/esm/styles → styles}/comment.scss

@@ -14,11 +14,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -26,7 +28,7 @@
  ========================================================================== */
 
 .uk-comment {
-    @if mixin-exists(hook-comment) {
+    @if meta.mixin-exists('hook-comment') {
         @include hook-comment;
     }
 }
@@ -39,7 +41,7 @@
     display: flow-root;
     overflow-wrap: break-word;
     word-wrap: break-word;
-    @if mixin-exists(hook-comment-body) {
+    @if meta.mixin-exists('hook-comment-body') {
         @include hook-comment-body;
     }
 }
@@ -47,7 +49,7 @@
 .uk-comment-header {
     display: flow-root;
     margin-bottom: var(--comment-header-margin-bottom);
-    @if mixin-exists(hook-comment-header) {
+    @if meta.mixin-exists('hook-comment-header') {
         @include hook-comment-header;
     }
 }
@@ -68,7 +70,7 @@
 .uk-comment-title {
     font-size: var(--comment-title-font-size);
     line-height: var(--comment-title-line-height);
-    @if mixin-exists(hook-comment-title) {
+    @if meta.mixin-exists('hook-comment-title') {
         @include hook-comment-title;
     }
 }
@@ -81,7 +83,7 @@
     color: var(--comment-meta-color);
     font-size: var(--comment-meta-font-size);
     line-height: var(--comment-meta-line-height);
-    @if mixin-exists(hook-comment-meta) {
+    @if meta.mixin-exists('hook-comment-meta') {
         @include hook-comment-meta;
     }
 }
@@ -91,7 +93,7 @@
  ========================================================================== */
 
 .uk-comment-avatar {
-    @if mixin-exists(hook-comment-avatar) {
+    @if meta.mixin-exists('hook-comment-avatar') {
         @include hook-comment-avatar;
     }
 }
@@ -108,7 +110,7 @@
 /* Adjacent siblings */
 .uk-comment-list > :nth-child(n+2) {
     margin-top: var(--comment-list-margin-top);
-    @if mixin-exists(hook-comment-list-adjacent) {
+    @if meta.mixin-exists('hook-comment-list-adjacent') {
         @include hook-comment-list-adjacent;
     }
 }
@@ -122,7 +124,7 @@
     list-style: none;
     margin: var(--comment-list-margin-top) 0 0 0;
     padding-left: var(--comment-list-padding-left);
-    @if mixin-exists(hook-comment-list-sub) {
+    @if meta.mixin-exists('hook-comment-list-sub') {
         @include hook-comment-list-sub;
     }
 }
@@ -137,7 +139,7 @@
 /* Adjacent siblings */
 .uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
     margin-top: var(--comment-list-margin-top);
-    @if mixin-exists(hook-comment-list-sub-adjacent) {
+    @if meta.mixin-exists('hook-comment-list-sub-adjacent') {
         @include hook-comment-list-sub-adjacent;
     }
 }
@@ -147,7 +149,7 @@
  ========================================================================== */
 
 .uk-comment-primary {
-    @if mixin-exists(hook-comment-primary) {
+    @if meta.mixin-exists('hook-comment-primary') {
         @include hook-comment-primary;
     }
 }
@@ -156,7 +158,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-comment-misc) {
+@if meta.mixin-exists('hook-comment-misc') {
     @include hook-comment-misc;
 }
 

package/{dist/esm/components/Container/index.scss → styles/container.scss}

@@ -15,11 +15,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -214,7 +216,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-container-misc) {
+@if meta.mixin-exists('hook-container-misc') {
     @include hook-container-misc;
 }
 

package/{dist/cjs/components/Control/index.scss → styles/control.scss}

@@ -12,11 +12,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -38,7 +40,7 @@
     padding-right: var(--control-padding-horizontal);
     position: relative;
     transition: all var(--transition-duration);
-    @if mixin-exists(hook-control) {
+    @if meta.mixin-exists('hook-control') {
         @include hook-control;
     }
 }
@@ -48,7 +50,7 @@
     background-color: var(--control-hover-background);
     border-color: var(--control-hover-border);
     color: var(--control-hover-color);
-    @if mixin-exists(hook-control-hover) {
+    @if meta.mixin-exists('hook-control-hover') {
         @include hook-control-hover;
     }
 }
@@ -60,7 +62,7 @@
     border-color: var(--control-focus-border);
     color: var(--control-focus-color);
     outline: none;
-    @if mixin-exists(hook-control-focus) {
+    @if meta.mixin-exists('hook-control-focus') {
         @include hook-control-focus;
     }
 }
@@ -71,7 +73,7 @@
     border-color: var(--control-disabled-border);
     color: var(--control-disabled-color);
     cursor: not-allowed;
-    @if mixin-exists(hook-control-disabled) {
+    @if meta.mixin-exists('hook-control-disabled') {
         @include hook-control-disabled;
     }
 }
@@ -88,7 +90,7 @@
     font-size: var(--control-small-font-size);
     min-height: var(--control-small-height);
     padding: 0 var(--control-small-padding-horizontal);
-    @if mixin-exists(hook-control-small) {
+    @if meta.mixin-exists('hook-control-small') {
         @include hook-control-small;
     }
 }
@@ -101,7 +103,7 @@
     font-size: var(--control-medium-font-size);
     min-height: var(--control-medium-height);
     padding: 0 var(--control-medium-padding-horizontal);
-    @if mixin-exists(hook-control-medium) {
+    @if meta.mixin-exists('hook-control-medium') {
         @include hook-control-medium;
     }
 }
@@ -114,7 +116,7 @@
     font-size: var(--control-large-font-size);
     min-height: var(--control-large-height);
     padding: 0 var(--control-large-padding-horizontal);
-    @if mixin-exists(hook-control-large) {
+    @if meta.mixin-exists('hook-control-large') {
         @include hook-control-large;
     }
 }
@@ -132,7 +134,7 @@
 .uk-control-success:focus-within {
     border-color: var(--control-success-border);
     color: var(--control-success-color);
-    @if mixin-exists(hook-control-success) {
+    @if meta.mixin-exists('hook-control-success') {
         @include hook-control-success;
     }
 }
@@ -146,7 +148,7 @@
 .uk-control-warning:focus-within {
     border-color: var(--control-warning-border);
     color: var(--control-warning-color);
-    @if mixin-exists(hook-control-warning) {
+    @if meta.mixin-exists('hook-control-warning') {
         @include hook-control-warning;
     }
 }
@@ -160,7 +162,7 @@
 .uk-control-danger:focus-within {
     border-color: var(--control-danger-border);
     color: var(--control-danger-color);
-    @if mixin-exists(hook-control-danger) {
+    @if meta.mixin-exists('hook-control-danger') {
         @include hook-control-danger;
     }
 }
@@ -175,14 +177,14 @@
     background-color: transparent;
     border-color: transparent;
     border-style: var(--control-blank-border-style);
-    @if mixin-exists(hook-control-blank) {
+    @if meta.mixin-exists('hook-control-blank') {
         @include hook-control-blank;
     }
 }
 
 .uk-control-blank:focus-within {
     border-color: var(--control-blank-focus-border);
-    @if mixin-exists(hook-control-blank-focus) {
+    @if meta.mixin-exists('hook-control-blank-focus') {
         @include hook-control-blank-focus;
     }
 }
@@ -213,7 +215,7 @@
 
 .uk-control-input .uk-input {
     height: 100%;
-    @if mixin-exists(hook-control-input) {
+    @if meta.mixin-exists('hook-control-input') {
         @include hook-control-input;
     }
 }
@@ -234,13 +236,13 @@
 }
 
 .uk-control-prefix {
-    @if mixin-exists(hook-control-prefix) {
+    @if meta.mixin-exists('hook-control-prefix') {
         @include hook-control-prefix;
     }
 }
 
 .uk-control-suffix {
-    @if mixin-exists(hook-control-suffix) {
+    @if meta.mixin-exists('hook-control-suffix') {
         @include hook-control-suffix;
     }
 }
@@ -306,8 +308,8 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
     --control-focus-color: var(--global-color);
     --control-focus-border: var(--global-primary-border);
     --control-disabled-background: #{$control-disabled-background};
-    --control-disabled-color: var(--global-color);
     --control-disabled-border: var(--control-border);
+    --control-disabled-color: var(--global-color);
     --control-placeholder-color: var(--global-muted-color);
     --control-small-height: var(--global-control-small-height);
     --control-small-padding-horizontal: #{$control-small-padding-horizontal};
@@ -324,12 +326,12 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
     --control-large-padding-vertical: #{$control-large-padding-vertical};
     --control-large-line-height: var(--control-large-height);
     --control-large-font-size: var(--global-medium-font-size);
-    --control-success-border: var(--global-success-background);
-    --control-success-color: var(--global-success-background);
-    --control-warning-border: var(--global-warning-background);
-    --control-warning-color: var(--global-warning-background);
-    --control-danger-border: var(--global-danger-background);
-    --control-danger-color: var(--global-danger-background);
+    --control-success-border: var(--global-success-border);
+    --control-success-color: var(--global-success-color);
+    --control-warning-border: var(--global-warning-border);
+    --control-warning-color: var(--global-warning-color);
+    --control-danger-border: var(--global-danger-border);
+    --control-danger-color: var(--global-danger-color);
     --control-blank-border-style: #{$control-blank-border-style};
     --control-blank-focus-border: #{$control-blank-focus-border};
     --control-affix-margin: var(--global-small-margin);
@@ -346,6 +348,8 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
     --inverse-control-focus-background: #{$inverse-control-focus-background};
     --inverse-control-focus-border: var(--inverse-control-hover-border);
     --inverse-control-focus-color: var(--inverse-global-color);
+    --inverse-control-disabled-background: #{$inverse-control-disabled-background};
+    --inverse-control-disabled-border: #{$inverse-control-disabled-border};
     --inverse-control-placeholder-color: var(--inverse-global-muted-color);
     --inverse-control-icon-color: var(--inverse-global-muted-color);
     --inverse-control-icon-hover-color: var(--inverse-global-color);

package/{dist/cjs/components/Cover/index.scss → styles/cover.scss}

@@ -7,6 +7,8 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 /* ========================================================================
    Component: Cover
@@ -14,13 +16,18 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Reset responsiveness for embedded content
- * 2. Center object
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
+ * 2. Reset responsiveness for embedded content
+ * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover {
+/* 1 */
+[uk-cover]:where(canvas, iframe, svg),
+[data-uk-cover]:where(canvas, iframe, svg) {
+    --uk-position-translate-x: -50%;
+    --uk-position-translate-y: -50%;
     left: 50%;
 
     /* 1 */
@@ -29,10 +36,25 @@
     /* 2 */
     position: absolute;
     top: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
-iframe.uk-cover { pointer-events: none; }
+iframe[uk-cover],
+iframe[data-uk-cover] { pointer-events: none; }
+
+[uk-cover]:where(img, video),
+[data-uk-cover]:where(img, video) {
+    box-sizing: border-box;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    object-position: center;
+
+    /* 3 */
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
 
 
 /* Container
@@ -51,10 +73,9 @@ iframe.uk-cover { pointer-events: none; }
     position: relative;
 }
 
-
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-cover-misc) {
+@if meta.mixin-exists('hook-cover-misc') {
     @include hook-cover-misc;
 }