@broxus/react-uikit 0.3.0 → 0.3.1

package/dist/esm/components/Nav/context/NavContext.js

@@ -24,8 +24,8 @@ export function NavContextProvider(props) {
     const { children, locked, ...restProps } = props;
     const inheritableContext = useMemo(() => mergeProps({
         ...context,
-        popupPrefixCls: `${config.prefixCls}-dropdown`,
-        prefixCls: `${config.prefixCls}-nav`,
+        popupPrefixCls: context.popupPrefixCls ?? `${config.prefixCls}-dropdown`,
+        prefixCls: context.prefixCls ?? `${config.prefixCls}-nav`,
     }, restProps), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !shallowEqual(prev[1], next[1])));

package/dist/esm/styles/animation.scss

@@ -35,8 +35,8 @@
 
 [class*='uk-animation-'] {
     animation-duration: var(--animation-duration);
-    animation-timing-function: var(--ease-out);
     animation-fill-mode: both;
+    animation-timing-function: var(--ease-out);
 }
 
 
@@ -48,8 +48,8 @@
  */
 
 .uk-animation-fade {
-    animation-name: uk-fade;
     animation-duration: var(--animation-fade-duration);
+    animation-name: uk-fade;
     animation-timing-function: linear;
 }
 
@@ -102,8 +102,8 @@
  */
 
 .uk-animation-kenburns {
-    animation-name: uk-scale-kenburns;
     animation-duration: var(--animation-kenburns-duration);
+    animation-name: uk-scale-kenburns;
 }
 
 /*
@@ -121,8 +121,8 @@
  */
 
 .uk-animation-stroke {
-    animation-name: uk-stroke;
     animation-duration: var(--animation-stroke-duration);
+    animation-name: uk-stroke;
     stroke-dasharray: var(--uk-animation-stroke);
 }
 
@@ -131,8 +131,8 @@
  ========================================================================== */
 
 .uk-animation-reverse {
-    animation-timing-function: var(--ease-in);
     animation-direction: reverse;
+    animation-timing-function: var(--ease-in);
 }
 
 
@@ -187,13 +187,13 @@
 
 @keyframes uk-fade-top {
     0% {
-        transform: translateY(-100%);
         opacity: 0;
+        transform: translateY(-100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -203,13 +203,13 @@
 
 @keyframes uk-fade-bottom {
     0% {
-        transform: translateY(100%);
         opacity: 0;
+        transform: translateY(100%);
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -219,13 +219,13 @@
 
 @keyframes uk-fade-left {
     0% {
-        transform: translateX(-100%);
         opacity: 0;
+        transform: translateX(-100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -235,13 +235,13 @@
 
 @keyframes uk-fade-right {
     0% {
-        transform: translateX(100%);
         opacity: 0;
+        transform: translateX(100%);
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -251,13 +251,13 @@
 
 @keyframes uk-fade-top-small {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -267,13 +267,13 @@
 
 @keyframes uk-fade-bottom-small {
     0% {
-        transform: translateY(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -283,13 +283,13 @@
 
 @keyframes uk-fade-left-small {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -299,13 +299,13 @@
 
 @keyframes uk-fade-right-small {
     0% {
-        transform: translateX(var(--animation-slide-small-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-small-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -315,13 +315,13 @@
 
 @keyframes uk-fade-top-medium {
     0% {
-        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -331,13 +331,13 @@
 
 @keyframes uk-fade-bottom-medium {
     0% {
-        transform: translateY(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateY(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -347,13 +347,13 @@
 
 @keyframes uk-fade-left-medium {
     0% {
-        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
         opacity: 0;
+        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -363,13 +363,13 @@
 
 @keyframes uk-fade-right-medium {
     0% {
-        transform: translateX(var(--animation-slide-medium-translate));
         opacity: 0;
+        transform: translateX(var(--animation-slide-medium-translate));
     }
 
     100% {
-        transform: translateX(0);
         opacity: 1;
+        transform: translateX(0);
     }
 }
 
@@ -379,13 +379,13 @@
 
 @keyframes uk-fade-scale-02 {
     0% {
-        transform: scale(0.2);
         opacity: 0;
+        transform: scale(0.2);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 
@@ -395,13 +395,13 @@
 
 @keyframes uk-fade-scale-18 {
     0% {
-        transform: scale(1.8);
         opacity: 0;
+        transform: scale(1.8);
     }
 
     100% {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 }
 

package/dist/esm/styles/column.scss

@@ -143,7 +143,7 @@
     --column-gutter: var(--global-gutter);
     --column-gutter-l: var(--global-medium-gutter);
     --column-divider-rule-color: var(--global-border);
-    --column-divider-rule-width: $column-divider-rule-width;
+    --column-divider-rule-width: #{$column-divider-rule-width};
 
     // Inverse
     --inverse-column-divider-rule-color: var(--inverse-global-border);

package/dist/esm/styles/marker.scss

@@ -46,41 +46,12 @@
     @include hook-marker-misc;
 }
 
-// @mixin hook-marker() {}
-// @mixin hook-marker-hover() {}
-// @mixin hook-marker-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .uk-marker {
-        background: var(--inverse-marker-background);
-        color: var(--inverse-marker-color);
-        @if mixin-exists(hook-inverse-marker) {
-            @include hook-inverse-marker;
-        }
-    }
-
-    .uk-marker:hover,
-    .uk-marker:focus {
-        color: var(--inverse-marker-hover-color);
-        @if mixin-exists(hook-inverse-marker-hover) {
-            @include hook-inverse-marker-hover;
-        }
-    }
-}
-
-// @mixin hook-inverse-marker() {}
-// @mixin hook-inverse-marker-hover() {}
-
 
 // Vars
 // ========================================================================
 
 :root {
-    --marker-padding: $marker-padding;
+    --marker-padding: #{$marker-padding};
     --marker-background: var(--global-secondary-background);
     --marker-color: var(--global-inverse-color);
     --marker-hover-color: var(--global-inverse-color);

package/dist/esm/styles/mixins.scss

@@ -959,7 +959,6 @@
     }
 }
 
-
 @mixin hook-control() {}
 @mixin hook-control-hover() {}
 @mixin hook-control-focus() {}
@@ -975,7 +974,6 @@
 @mixin hook-control-input() {}
 @mixin hook-control-prefix() {}
 @mixin hook-control-suffix() {}
-
 @mixin hook-inverse-control() {}
 @mixin hook-inverse-control-hover() {}
 @mixin hook-inverse-control-focus() {}
@@ -1757,6 +1755,12 @@
     }
 }
 
+@mixin hook-overlay() {}
+@mixin hook-overlay-icon() {}
+@mixin hook-overlay-default() {}
+@mixin hook-overlay-primary() {}
+@mixin hook-overlay-misc() {}
+
 @mixin hook-position-misc() {}
 
 @mixin hook-print() {}
@@ -1854,6 +1858,29 @@
     }
 }
 
+@mixin hook-marker() {}
+@mixin hook-marker-hover() {}
+@mixin hook-marker-misc() {}
+@mixin hook-inverse-marker() {}
+@mixin hook-inverse-marker-hover() {}
+@mixin hook-inverse-component-marker() {
+    .uk-marker {
+        background: var(--inverse-marker-background);
+        color: var(--inverse-marker-color);
+        @if mixin-exists(hook-inverse-marker) {
+            @include hook-inverse-marker;
+        }
+    }
+
+    .uk-marker:hover,
+    .uk-marker:focus {
+        color: var(--inverse-marker-hover-color);
+        @if mixin-exists(hook-inverse-marker-hover) {
+            @include hook-inverse-marker-hover;
+        }
+    }
+}
+
 @mixin hook-modal() {}
 @mixin hook-modal-content() {}
 @mixin hook-modal-mask() {}
@@ -1877,6 +1904,109 @@
 @mixin hook-spinner() {}
 @mixin hook-spinner-misc() {}
 
+@mixin hook-subnav() {}
+@mixin hook-subnav-item() {}
+@mixin hook-subnav-item-hover() {}
+@mixin hook-subnav-item-active() {}
+@mixin hook-subnav-divider() {}
+@mixin hook-subnav-pill-item() {}
+@mixin hook-subnav-pill-item-hover() {}
+@mixin hook-subnav-pill-item-onclick() {}
+@mixin hook-subnav-pill-item-active() {}
+@mixin hook-subnav-item-disabled() {}
+@mixin hook-subnav-misc() {}
+@mixin hook-inverse-subnav-item() {}
+@mixin hook-inverse-subnav-item-hover() {}
+@mixin hook-inverse-subnav-item-active() {}
+@mixin hook-inverse-subnav-divider() {}
+@mixin hook-inverse-subnav-pill-item() {}
+@mixin hook-inverse-subnav-pill-item-hover() {}
+@mixin hook-inverse-subnav-pill-item-onclick() {}
+@mixin hook-inverse-subnav-pill-item-active() {}
+@mixin hook-inverse-subnav-item-disabled() {}
+@mixin hook-inverse-component-subnav() {
+    .uk-subnav > * > :first-child {
+        color: var(--inverse-subnav-item-color);
+        @if mixin-exists(hook-inverse-subnav-item) {
+            @include hook-inverse-subnav-item;
+        }
+    }
+
+    .uk-subnav > * > a:hover,
+    .uk-subnav > * > a:focus {
+        color: var(--inverse-subnav-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-item-hover) {
+            @include hook-inverse-subnav-item-hover;
+        }
+    }
+
+    .uk-subnav > .uk-active > a {
+        color: var(--inverse-subnav-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-item-active) {
+            @include hook-inverse-subnav-item-active;
+        }
+    }
+
+    //
+    // Divider
+    //
+
+    .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+        border-left-color: var(--inverse-subnav-divider-border);
+        @if mixin-exists(hook-inverse-subnav-divider) {
+            @include hook-inverse-subnav-divider;
+        }
+    }
+
+    //
+    // Pill
+    //
+
+    .uk-subnav-pill > * > :first-child {
+        background-color: var(--inverse-subnav-pill-item-background);
+        color: var(--inverse-subnav-pill-item-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item) {
+            @include hook-inverse-subnav-pill-item;
+        }
+    }
+
+    .uk-subnav-pill > * > a:hover,
+    .uk-subnav-pill > * > a:focus {
+        background-color: var(--inverse-subnav-pill-item-hover-background);
+        color: var(--inverse-subnav-pill-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-hover) {
+            @include hook-inverse-subnav-pill-item-hover;
+        }
+    }
+
+    .uk-subnav-pill > * > a:active {
+        background-color: var(--inverse-subnav-pill-item-onclick-background);
+        color: var(--inverse-subnav-pill-item-onclick-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-onclick) {
+            @include hook-inverse-subnav-pill-item-onclick;
+        }
+    }
+
+    .uk-subnav-pill > .uk-active > a {
+        background-color: var(--inverse-subnav-pill-item-active-background);
+        color: var(--inverse-subnav-pill-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-active) {
+            @include hook-inverse-subnav-pill-item-active;
+        }
+    }
+
+    //
+    // Disabled
+    //
+
+    .uk-subnav > .uk-disabled > a {
+        color: var(--inverse-subnav-item-disabled-color);
+        @if mixin-exists(hook-inverse-subnav-item-disabled) {
+            @include hook-inverse-subnav-item-disabled;
+        }
+    }
+}
+
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
 @mixin hook-tabs-tab-hover() {}
@@ -1934,6 +2064,73 @@
     }
 }
 
+@mixin hook-table() {}
+@mixin hook-table-header-cell() {}
+@mixin hook-table-cell() {}
+@mixin hook-table-footer() {}
+@mixin hook-table-caption() {}
+@mixin hook-table-row-active() {}
+@mixin hook-table-divider() {}
+@mixin hook-table-striped() {}
+@mixin hook-table-hover() {}
+@mixin hook-table-small() {}
+@mixin hook-table-large() {}
+@mixin hook-table-misc() {}
+@mixin hook-inverse-table-header-cell() {  }
+@mixin hook-inverse-table-caption() {  }
+@mixin hook-inverse-table-row-active() {  }
+@mixin hook-inverse-table-divider() {  }
+@mixin hook-inverse-table-striped() {  }
+@mixin hook-inverse-table-hover() {}
+@mixin hook-inverse-component-table() {
+    .uk-table th {
+        color: var(--inverse-table-header-cell-color);
+        @if mixin-exists(hook-inverse-table-header-cell) {
+            @include hook-inverse-table-header-cell;
+        }
+    }
+
+    .uk-table caption {
+        color: var(--inverse-table-caption-color);
+        @if mixin-exists(hook-inverse-table-caption) {
+            @include hook-inverse-table-caption;
+        }
+    }
+
+    .uk-table > tr.uk-active,
+    .uk-table tbody tr.uk-active {
+        background: var(--inverse-table-row-active-background);
+        @if mixin-exists(hook-inverse-table-row-active) {
+            @include hook-inverse-table-row-active;
+        }
+    }
+
+    .uk-table-divider > tr:not(:first-child),
+    .uk-table-divider > :not(:first-child) > tr,
+    .uk-table-divider > :first-child > tr:not(:first-child) {
+        border-top-color: var(--inverse-table-divider-border);
+        @if mixin-exists(hook-inverse-table-divider) {
+            @include hook-inverse-table-divider;
+        }
+    }
+
+    .uk-table-striped > tr:nth-of-type(odd),
+    .uk-table-striped tbody tr:nth-of-type(odd) {
+        background: var(--inverse-table-striped-row-background);
+        @if mixin-exists(hook-inverse-table-striped) {
+            @include hook-inverse-table-striped;
+        }
+    }
+
+    .uk-table-hover > tr:hover,
+    .uk-table-hover tbody tr:hover {
+        background: var(--inverse-table-hover-row-background);
+        @if mixin-exists(hook-inverse-table-hover) {
+            @include hook-inverse-table-hover;
+        }
+    }
+}
+
 
 @mixin hook-inverse() {
     @include hook-inverse-component-base;
@@ -1962,11 +2159,12 @@
     @include hook-inverse-component-nav;
     @include hook-inverse-component-navbar;
 
-    // @include hook-inverse-component-subnav;
+    @include hook-inverse-component-subnav;
     @include hook-inverse-component-breadcrumb;
 
     // @include hook-inverse-component-pagination;
     @include hook-inverse-component-tabs;
+    @include hook-inverse-component-table;
 
     // @include hook-inverse-component-slidenav;
     @include hook-inverse-component-dotnav;
@@ -1974,4 +2172,5 @@
     @include hook-inverse-component-text;
     @include hook-inverse-component-column;
     @include hook-inverse-component-utility;
+    @include hook-inverse-component-marker;
 }

package/dist/esm/styles/overlay.scss

@@ -93,12 +93,6 @@
     @include hook-overlay-misc;
 }
 
-// @mixin hook-overlay(){}
-// @mixin hook-overlay-icon(){}
-// @mixin hook-overlay-default(){}
-// @mixin hook-overlay-primary(){}
-// @mixin hook-overlay-misc(){}
-
 
 // Vars
 // ========================================================================
@@ -106,6 +100,6 @@
 :root {
     --overlay-padding-horizontal: var(--global-gutter);
     --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: fade($global-background, 80%);
-    --overlay-primary-background: fade($global-secondary-background, 80%);
+    --overlay-default-background: #{$overlay-default-background};
+    --overlay-primary-background: #{$overlay-primary-background};
 }