@broxus/react-uikit 0.2.2 → 0.3.1

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};
 }

package/dist/esm/styles/subnav.scss

@@ -215,151 +215,44 @@
     @include hook-subnav-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() {}
-
-// Inverse
-// ========================================================================
-
-@mixin hook-inverse() {
-    .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-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() {}
-
-// Inverse
+// Vars
 // ========================================================================
 
 :root {
-    --subnav-margin-horizontal: $subnav-margin-horizontal;
-    --subnav-item-color: $global-muted-color;
-    --subnav-item-hover-color: $global-color;
-    --subnav-item-hover-text-decoration: $subnav-item-hover-text-decoration;
-    --subnav-item-active-color: $global-emphasis-color;
-    --subnav-divider-margin-horizontal: $subnav-margin-horizontal;
-    --subnav-divider-border-height: $subnav-divider-border-height;
-    --subnav-divider-border-width: $global-border-width;
-    --subnav-divider-border: $global-border;
-    --subnav-pill-item-padding-vertical: $subnav-pill-item-padding-vertical;
-    --subnav-pill-item-padding-horizontal: $subnav-pill-item-padding-horizontal;
-    --subnav-pill-item-background: $subnav-pill-item-background;
-    --subnav-pill-item-color: $subnav-item-color;
-    --subnav-pill-item-hover-background: $global-muted-background;
-    --subnav-pill-item-hover-color: $global-color;
-    --subnav-pill-item-onclick-background: $subnav-pill-item-hover-background;
-    --subnav-pill-item-onclick-color: $subnav-pill-item-hover-color;
-    --subnav-pill-item-active-background: $global-primary-background;
-    --subnav-pill-item-active-color: $global-inverse-color;
-    --subnav-item-disabled-color: $global-muted-color;
+    --subnav-margin-horizontal: #{$subnav-margin-horizontal};
+    --subnav-item-color: var(--global-muted-color);
+    --subnav-item-hover-color: var(--global-color);
+    --subnav-item-hover-text-decoration: #{$subnav-item-hover-text-decoration};
+    --subnav-item-active-color: var(--global-emphasis-color);
+    --subnav-divider-margin-horizontal: #{$subnav-margin-horizontal};
+    --subnav-divider-border-height: #{$subnav-divider-border-height};
+    --subnav-divider-border-width: var(--global-border-width);
+    --subnav-divider-border: var(--global-border);
+    --subnav-pill-item-padding-vertical: #{$subnav-pill-item-padding-vertical};
+    --subnav-pill-item-padding-horizontal: #{$subnav-pill-item-padding-horizontal};
+    --subnav-pill-item-background: #{$subnav-pill-item-background};
+    --subnav-pill-item-color: #{$subnav-item-color};
+    --subnav-pill-item-hover-background: var(--global-muted-background);
+    --subnav-pill-item-hover-color: var(--global-color);
+    --subnav-pill-item-onclick-background: #{$subnav-pill-item-hover-background};
+    --subnav-pill-item-onclick-color: #{$subnav-pill-item-hover-color};
+    --subnav-pill-item-active-background: var(--global-primary-background);
+    --subnav-pill-item-active-color: var(--global-inverse-color);
+    --subnav-item-disabled-color: var(--global-muted-color);
 
     // Inverse
-    --inverse-subnav-item-color: $inverse-global-muted-color;
-    --inverse-subnav-item-hover-color: $inverse-global-color;
-    --inverse-subnav-item-active-color: $inverse-global-emphasis-color;
-    --inverse-subnav-divider-border: $inverse-global-border;
-    --inverse-subnav-pill-item-background: $inverse-subnav-pill-item-background;
-    --inverse-subnav-pill-item-color: $inverse-global-muted-color;
-    --inverse-subnav-pill-item-hover-background: $inverse-global-muted-background;
-    --inverse-subnav-pill-item-hover-color: $inverse-global-color;
-    --inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background;
-    --inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color;
-    --inverse-subnav-pill-item-active-background: $inverse-global-primary-background;
-    --inverse-subnav-pill-item-active-color: $inverse-global-inverse-color;
-    --inverse-subnav-item-disabled-color: $inverse-global-muted-color;
+    --inverse-subnav-item-color: var(--inverse-global-muted-color);
+    --inverse-subnav-item-hover-color: var(--inverse-global-color);
+    --inverse-subnav-item-active-color: var(--inverse-global-emphasis-color);
+    --inverse-subnav-divider-border: var(--inverse-global-border);
+    --inverse-subnav-pill-item-background: #{$inverse-subnav-pill-item-background};
+    --inverse-subnav-pill-item-color: var(--inverse-global-muted-color);
+    --inverse-subnav-pill-item-hover-background: var(--inverse-global-muted-background);
+    --inverse-subnav-pill-item-hover-color: var(--inverse-global-color);
+    --inverse-subnav-pill-item-onclick-background: #{$inverse-subnav-pill-item-hover-background};
+    --inverse-subnav-pill-item-onclick-color: #{$inverse-subnav-pill-item-hover-color};
+    --inverse-subnav-pill-item-active-background: var(--inverse-global-primary-background);
+    --inverse-subnav-pill-item-active-color: var(--inverse-global-inverse-color);
+    --inverse-subnav-item-disabled-color: var(--inverse-global-muted-color);
 }