@broxus/react-uikit 0.22.0 → 0.23.1

package/styles/base.scss

@@ -77,13 +77,12 @@ a:hover,
 }
 
 /*
- * Remove the outline on focused links when they are also active or hovered
+ * Fix text underline offset if `vertical-align`is set to `middle`
  */
 
-a:active,
-a:hover {
-    outline: none;
-}
+a:has(.uk-text-middle),
+.uk-link:has(.uk-text-middle),
+.uk-link-toggle:hover .uk-link:has(.uk-text-middle) { text-underline-offset: 0.1875em; }
 
 
 /* Text-level semantics
@@ -95,11 +94,8 @@ a:hover {
  */
 
 abbr[title] {
-    /* 1 */
-    text-decoration: underline dotted;
-
-    /* 2 */
-    -webkit-text-decoration-style: dotted;
+    text-decoration: underline dotted; /* 1 */
+    -webkit-text-decoration-style: dotted; /* 2 */
 }
 
 /*
@@ -118,14 +114,9 @@ strong { font-weight: var(--base-strong-font-weight); }
 :not(pre) > code,
 :not(pre) > kbd,
 :not(pre) > samp {
-    /* 3 */
-    color: var(--base-code-color);
-
-    /* 1 */
-    font-family: var(--base-code-font-family), monospace;
-
-    /* 2 */
-    font-size: var(--base-code-font-size);
+    color: var(--base-code-color); /* 3 */
+    font-family: var(--base-code-font-family), monospace; /* 1 */
+    font-size: var(--base-code-font-size); /* 2 */
     padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
     white-space: nowrap;
     @if meta.mixin-exists('hook-base-code') {
@@ -190,7 +181,7 @@ sub { bottom: -0.25em; }
  ========================================================================== */
 
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 
 audio,
@@ -201,52 +192,34 @@ svg,
 video { vertical-align: middle; }
 
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 1. Constrain the element to its parent width.
+ * 2. Take border and padding into account.
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
+ * 5. Size image to fill the element's content box.
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
  */
 
 canvas,
 img,
+svg,
 video {
-    /* 3 */
-    box-sizing: border-box;
-
-    /* 2 */
-    height: auto;
-
-    /* 1 */
-    max-width: 100%;
-}
-
-/* 4 */
-@supports (display: block) {
-    svg {
-        box-sizing: border-box;
-        height: auto;
-        max-width: 100%;
-    }
+    aspect-ratio: string.unquote('attr(width type(<number>)) / attr(height type(<number>))'); /* 4 */
+    box-sizing: border-box; /* 3 */
+    height: auto; /* 2 */
+    max-width: 100%; /* 1 */
+    object-fit: cover; /* 5 */
 }
 
 /*
- * Hide the overflow in IE.
- */
-
-svg:not(:root) { overflow: hidden; }
-
-/*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 
 img:not([src]) {
-    /* 1 */
-    min-width: 1px;
-
-    /* 2 */
-    visibility: hidden;
+    min-width: 1px; /* 2 */
+    visibility: hidden; /* 1 */
 }
 
 /*
@@ -297,7 +270,8 @@ h6, .uk-h6,
 .uk-heading-medium,
 .uk-heading-large,
 .uk-heading-xlarge,
-.uk-heading-2xlarge {
+.uk-heading-2xlarge,
+.uk-heading-3xlarge {
     color: var(--base-heading-color);
     font-family: var(--base-heading-font-family), system-ui;
     font-weight: var(--base-heading-font-weight);
@@ -319,7 +293,10 @@ h6, .uk-h6,
 * + .uk-heading-medium,
 * + .uk-heading-large,
 * + .uk-heading-xlarge,
-* + .uk-heading-2xlarge { margin-top: var(--base-heading-margin-top); }
+* + .uk-heading-2xlarge,
+* + .uk-heading-3xlarge {
+    margin-top: var(--base-heading-margin-top);
+}
 
 /*
  * Sizes
@@ -419,12 +396,8 @@ hr, .uk-hr {
     border: 0; /* 3 */
     border-top: var(--base-hr-border-width) solid var(--base-hr-border); /* 3 */
     margin: 0 0 var(--base-hr-margin-vertical) 0; /* 3 */
-
-    /* 1 */
-    overflow: visible;
-
-    /* 2 */
-    text-align: inherit;
+    overflow: visible; /* 1 */
+    text-align: inherit; /* 2 */
     @if meta.mixin-exists('hook-base-hr') {
         @include hook-base-hr;
     }
@@ -493,9 +466,7 @@ pre {
     font-family: var(--base-pre-font-family), monospace;
     font-size: var(--base-pre-font-size);
     line-height: var(--base-pre-line-height);
-
-    /* 1 */
-    overflow: auto;
+    overflow: auto; /* 1 */
     tab-size: 4;
     @if meta.mixin-exists('hook-base-pre') {
         @include hook-base-pre;
@@ -533,6 +504,7 @@ pre code { font-family: var(--base-pre-font-family), monospace; }
 /* 4 */
 :focus-visible {
     outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
+    outline-offset: var(--base-focus-outline-offset);
 }
 
 

package/styles/breadcrumb.scss

@@ -21,12 +21,13 @@
  ========================================================================== */
 
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 
 .uk-breadcrumb {
-    list-style: none;
-    padding: 0;
+    list-style: none; /* 2 */
+    padding: 0; /* 1 */
     @if meta.mixin-exists('hook-breadcrumb') {
         @include hook-breadcrumb;
     }
@@ -36,9 +37,7 @@
  * 1. Doesn't generate any box and replaced by child boxes
  */
 
-.uk-breadcrumb > * {
-    display: contents;
-}
+.uk-breadcrumb > * { display: contents; }
 
 
 /* Items
@@ -90,9 +89,7 @@
     content: var(--breadcrumb-divider);
     display: inline-block;
     font-size: var(--breadcrumb-divider-font-size); /* 2 */
-
-    /* 1 */
-    margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px);
+    margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px); /* 1 */
     @if meta.mixin-exists('hook-breadcrumb-divider') {
         @include hook-breadcrumb-divider;
     }

package/styles/button.scss

@@ -53,6 +53,7 @@
  */
 
 .uk-button {
+    -webkit-appearance: none; /* 6 */
     appearance: none; /* 6 */
     border: none; /* 2 */
     border-radius: 0;
@@ -74,6 +75,8 @@
     }
 }
 
+.uk-button:not(:disabled) { cursor: pointer; }
+
 /*
  * Remove the inner border and padding in Firefox.
  */
@@ -83,10 +86,6 @@
     padding: 0;
 }
 
-.uk-button:not(:disabled) {
-    cursor: pointer;
-}
-
 /* Hover */
 .uk-button:hover {
     /* 9 */
@@ -96,14 +95,6 @@
     }
 }
 
-/* Focus */
-.uk-button:focus {
-    outline: none;
-    @if meta.mixin-exists('hook-button-focus') {
-        @include hook-button-focus;
-    }
-}
-
 /* OnClick + Active */
 .uk-button:active,
 .uk-button.uk-active {
@@ -128,9 +119,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-default:hover,
-.uk-button-default:focus {
+/* Hover */
+.uk-button-default:hover {
     background-color: var(--button-default-hover-background);
     color: var(--button-default-hover-color);
     @if meta.mixin-exists('hook-button-default-hover') {
@@ -160,9 +150,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-primary:hover,
-.uk-button-primary:focus {
+/* Hover */
+.uk-button-primary:hover {
     background-color: var(--button-primary-hover-background);
     color: var(--button-primary-hover-color);
     @if meta.mixin-exists('hook-button-primary-hover') {
@@ -192,9 +181,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-secondary:hover,
-.uk-button-secondary:focus {
+/* Hover */
+.uk-button-secondary:hover {
     background-color: var(--button-secondary-hover-background);
     color: var(--button-secondary-hover-color);
     @if meta.mixin-exists('hook-button-secondary-hover') {
@@ -224,9 +212,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-tertiary:hover,
-.uk-button-tertiary:focus {
+/* Hover */
+.uk-button-tertiary:hover {
     background-color: var(--button-tertiary-hover-background);
     color: var(--button-tertiary-hover-color);
     @if meta.mixin-exists('hook-button-tertiary-hover') {
@@ -256,9 +243,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-danger:hover,
-.uk-button-danger:focus {
+/* Hover */
+.uk-button-danger:hover {
     background-color: var(--button-danger-hover-background);
     color: var(--button-danger-hover-color);
     @if meta.mixin-exists('hook-button-danger-hover') {
@@ -405,9 +391,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-text:hover,
-.uk-button-text:focus {
+/* Hover */
+.uk-button-text:hover {
     color: var(--button-text-hover-color);
     @if meta.mixin-exists('hook-button-text-hover') {
         @include hook-button-text-hover;
@@ -422,16 +407,6 @@
     }
 }
 
-/* OnClick + Active */
-.uk-button-text:active,
-.uk-button-text.uk-active {
-    background-color: var(--button-text-active-background);
-    color: var(--button-text-active-color);
-    @if meta.mixin-exists('hook-button-text-active') {
-        @include hook-button-text-active;
-    }
-}
-
 /*
  * Link
  * 1. Reset
@@ -448,9 +423,8 @@
     }
 }
 
-/* Hover + Focus */
-.uk-button-link:hover,
-.uk-button-link:focus {
+/* Hover */
+.uk-button-link:hover {
     color: var(--button-link-hover-color);
     text-decoration: var(--button-link-hover-text-decoration);
     @if meta.mixin-exists('hook-button-link-hover') {
@@ -467,15 +441,6 @@
     }
 }
 
-/* OnClick + Active */
-.uk-button-link:active,
-.uk-button-link.uk-active {
-    background-color: var(--button-link-active-background);
-    color: var(--button-link-active-color);
-    @if meta.mixin-exists('hook-button-link-active') {
-        @include hook-button-link-active;
-    }
-}
 
 /* Ghost modifiers
  ========================================================================== */
@@ -491,8 +456,7 @@
     color: var(--button-ghost-default-color);
 }
 
-.uk-button-default.uk-button-ghost:hover,
-.uk-button-default.uk-button-ghost:focus {
+.uk-button-default.uk-button-ghost:hover {
     background-color: transparent;
     border-color: var(--button-ghost-default-hover-border);
 }
@@ -509,8 +473,7 @@
     color: var(--button-ghost-primary-color);
 }
 
-.uk-button-primary.uk-button-ghost:hover,
-.uk-button-primary.uk-button-ghost:focus {
+.uk-button-primary.uk-button-ghost:hover {
     background-color: transparent;
     border-color: var(--button-ghost-primary-hover-border);
 }
@@ -527,8 +490,7 @@
     color: var(--button-ghost-secondary-color);
 }
 
-.uk-button-secondary.uk-button-ghost:hover,
-.uk-button-secondary.uk-button-ghost:focus {
+.uk-button-secondary.uk-button-ghost:hover {
     background-color: transparent;
     border-color: var(--button-ghost-secondary-hover-border);
 }
@@ -545,8 +507,7 @@
     color: var(--button-ghost-tertiary-color);
 }
 
-.uk-button-tertiary.uk-button-ghost:hover,
-.uk-button-tertiary.uk-button-ghost:focus {
+.uk-button-tertiary.uk-button-ghost:hover {
     background-color: transparent;
     border-color: var(--button-ghost-tertiary-hover-border);
 }
@@ -563,8 +524,7 @@
     color: var(--button-ghost-danger-color);
 }
 
-.uk-button-danger.uk-button-ghost:hover,
-.uk-button-danger.uk-button-ghost:focus {
+.uk-button-danger.uk-button-ghost:hover {
     background-color: transparent;
     border-color: var(--button-ghost-danger-hover-border);
 }

package/styles/control.scss

@@ -350,6 +350,7 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
     --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-disabled-color: var(--inverse-global-color);
     --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/styles/datepicker.scss

@@ -631,7 +631,7 @@
     margin: var(--global-xsmall-margin) 0;
     overflow: hidden;
     padding: 0;
-    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
+    scrollbar-color: var(--global-scroll-background, var(--global-muted-background, rgba(#000, 0.15))) transparent;
     scrollbar-width: thin;
     text-align: start;
     transition: background var(--transition-medium-fast-duration);
@@ -738,7 +738,7 @@
     max-width: fit-content;
     outline: none;
     overflow: hidden;
-    padding: calc(var(--datepicker-gutter) / 2);
+    padding: var(--datepicker-gutter);
     position: absolute;
     top: -9999px;
     z-index: calc(var(--global-z-index) + 30);
@@ -776,6 +776,7 @@
     --datepicker-border: var(--control-border);
     --datepicker-border-style: var(--control-border-style);
     --datepicker-border-width: var(--control-border-width);
+    --datepicker-gutter: var(--global-small-gutter);
     --datepicker-height: #{$datepicker-height};
     --datepicker-small-height: #{$datepicker-small-height};
     --datepicker-medium-height: #{$datepicker-medium-height};

package/styles/input-number.scss

@@ -1,7 +1,7 @@
-// Name:            Checkbox Control
-// Description:     Component to create Checkbox element
+// Name:            Number Input Control
+// Description:     Component to create Number Input element
 //
-// Component:       `uk-control-checkbox`
+// Component:       `uk-control-number`
 //
 // ========================================================================
 
@@ -56,13 +56,7 @@
     color: var(--control-placeholder-color);
 }
 
-.uk-number-input-wrap {
-    flex: 1;
-    height: 100%;
-    min-width: 1px;
-}
-
-.uk-number-handler-wrap {
+.uk-number-actions {
     background-color: transparent;
     border: 0 none;
     border-radius: 0;
@@ -71,7 +65,7 @@
     order: 99;
 }
 
-.uk-number-handler {
+.uk-number-action {
     align-items: center;
     border: 0;
     border-radius: 0;
@@ -79,13 +73,13 @@
     height: 50%;
 }
 
-.uk-number-handler:active .uk-number-handler-up-inner,
-.uk-number-handler:active .uk-number-handler-down-inner {
+.uk-number-action:active .uk-number-action-up-inner,
+.uk-number-action:active .uk-number-action-down-inner {
     transform: scale(0.9);
 }
 
-.uk-number-handler .uk-number-handler-up-inner,
-.uk-number-handler .uk-number-handler-down-inner {
+.uk-number-action .uk-number-action-up-inner,
+.uk-number-action .uk-number-action-down-inner {
     color: var(--control-icon-color);
     cursor: pointer;
     transform: none;
@@ -98,11 +92,7 @@
 /* Control
  ========================================================================== */
 
-.uk-control-number.uk-control-rtl .uk-number-handler-wrap {
-    order: 1;
-}
-
-.uk-control-number.uk-disabled .uk-number-handler-wrap,
-.uk-control-number.uk-readonly .uk-number-handler-wrap {
+.uk-control-number.uk-disabled .uk-number-actions,
+.uk-control-number.uk-readonly .uk-number-actions {
     display: none;
 }

package/styles/leader.scss

@@ -40,7 +40,7 @@
 
     /* 2 */
     width: 0;
-    @if  mixin-exists(hook-leader) {
+    @if meta.mixin-exists('hook-leader') {
         @include hook-leader;
     }
 }
@@ -61,7 +61,7 @@
 // Hooks
 // ========================================================================
 
-@if  mixin-exists(hook-leader-misc) {
+@if meta.mixin-exists('hook-leader-misc') {
     @include hook-leader-misc;
 }
 

package/styles/mixins.scss

@@ -8,12 +8,14 @@
 //@mixin hook-accordion-header() {}
 //@mixin hook-accordion-header-hover() {}
 //@mixin hook-accordion-header-collapsible-only() {}
+//@mixin hook-accordion-title() {}
 //@mixin hook-accordion-panel() {}
 //@mixin hook-accordion-body() {}
 //@mixin hook-accordion-extra() {}
 //@mixin hook-accordion-misc() {}
 //@mixin hook-inverse-accordion-item() {}
 //@mixin hook-inverse-accordion-header() {}
+//@mixin hook-inverse-accordion-title() {}
 //@mixin hook-inverse-accordion-header-hover() {}
 @mixin hook-inverse-component-accordion() {
     .uk-accordion > :nth-child(n + 2) {
@@ -22,16 +24,16 @@
         }
     }
 
-    .uk-accordion-header {
-        color: var(--inverse-accordion-header-color);
-        @if meta.mixin-exists('hook-inverse-accordion-header') {
-            @include hook-inverse-accordion-header;
+    .uk-accordion-title {
+        color: var(--inverse-accordion-title-color);
+        @if meta.mixin-exists('hook-inverse-accordion-title') {
+            @include hook-inverse-accordion-title;
         }
     }
 
-    .uk-accordion-header:hover,
-    .uk-accordion-header:focus {
-        color: var(--inverse-accordion-header-hover-color);
+    .uk-accordion-title:hover,
+    .uk-accordion-title:focus {
+        color: var(--inverse-accordion-title-hover-color);
     }
 
     .uk-accordion-item-disabled {
@@ -404,9 +406,8 @@
 //@mixin hook-button-text() {}
 //@mixin hook-button-text-hover() {}
 //@mixin hook-button-text-disabled() {}
-//@mixin hook-button-text-active() {}
 //@mixin hook-button-link() {}
-//@mixin hook-button-link-active() {}
+//@mixin hook-button-link-disabled() {}
 @mixin hook-button-misc() {
     .uk-button-group {
         .uk-button-circle:not(:last-child),
@@ -1690,7 +1691,6 @@
 //@mixin hook-inverse-navbar-dropdown-nav-item-active() {}
 //@mixin hook-inverse-navbar-dropdown-nav-header() {}
 //@mixin hook-inverse-navbar-dropdown-nav-divider() {}
-//@mixin hook-inverse-navbar-dropbar() {}
 @mixin hook-inverse-component-navbar() {
     .uk-navbar-container:not(.uk-navbar-transparent) {
         background: var(--inverse-navbar-background);
@@ -1824,15 +1824,6 @@
         color: var(--inverse-navbar-dropdown-nav-sublist-item-active-color);
     }
 
-    /* Dropbar
-     ========================================================================== */
-
-    .uk-navbar-dropbar {
-        background: var(--inverse-navbar-dropbar-background);
-        @if meta.mixin-exists('hook-inverse-navbar-dropbar') {
-            @include hook-inverse-navbar-dropbar;
-        }
-    }
 }
 
 //@mixin hook-overlay() {}

package/styles/nav.scss

@@ -47,36 +47,14 @@
  * 1. Center content vertically, e.g. an icon
  * 2. Imitate white space gap when using flexbox
  * 3. Reset link
- * 4. Space is allocated solely based on content dimensions: 0 0 auto
  */
 
 .uk-nav li > a,
 .uk-nav-item > a {
     align-items: center;
-
-    /* 2 */
-    column-gap: 0.25em;
-
-    /* 1 */
-    display: flex;
-
-    /* 3 */
-    text-decoration: none;
-}
-
-/* 4 */
-.uk-nav li > a > *,
-.uk-nav-item > a > * {
-    flex: none;
-}
-
-/*
- * Remove default focus style
- */
-
-.uk-nav li > a:focus,
-.uk-nav-item > a:focus {
-    outline: none;
+    column-gap: 0.25em; /* 2 */
+    display: flex; /* 1 */
+    text-decoration: none; /* 3 */
 }
 
 /*
@@ -85,7 +63,7 @@
  */
 
 .uk-nav > li > a,
-.uk-nav-item > a {
+.uk-nav > .uk-nav-item > a {
     padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
 }
 
@@ -95,10 +73,9 @@
 }
 
 /* Disabled */
-.uk-nav-item-disabled {
+.uk-nav-item.uk-disabled {
     cursor: not-allowed;
     opacity: 0.85;
-    pointer-events: none;
 }
 
 
@@ -347,6 +324,7 @@ ul.uk-nav-sub {
 }
 
 /* Hover + Focus */
+.uk-nav-default > li.uk-hover > a,
 .uk-nav-default > li > a:hover,
 .uk-nav-default > li > a:focus {
     color: var(--nav-default-item-hover-color);
@@ -426,6 +404,7 @@ ul.uk-nav-sub {
 }
 
 /* Hover + Focus */
+.uk-nav-primary > li.uk-hover > a,
 .uk-nav-primary > li > a:hover,
 .uk-nav-primary > li > a:focus {
     color: var(--nav-primary-item-hover-color);