@broxus/react-uikit 0.3.0 → 0.3.1

package/dist/cjs/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);
 }

package/dist/cjs/styles/table.scss

@@ -24,7 +24,6 @@
 
 @import 'variables.scss';
 
-
 /* ========================================================================
    Component: Table
  ========================================================================== */
@@ -45,12 +44,15 @@
 
     /* 2 */
     width: 100%;
-    .hook-table;
+    @if mixin-exists(hook-table) {
+        @include hook-table;
+    }
 }
 
 /* Add margin if adjacent element */
-* + .uk-table { margin-top: var(--table-margin-vertical); }
-
+* + .uk-table {
+    margin-top: var(--table-margin-vertical);
+}
 
 /* Header cell
  ========================================================================== */
@@ -68,35 +70,40 @@
     padding: var(--table-cell-padding-vertical);
     text-align: left;
     vertical-align: bottom;
-    .hook-table-header-cell;
+    @if mixin-exists(hook-table) {
+        @include hook-table-header-cell;
+    }
 }
 
-
 /* Cell
  ========================================================================== */
 
 .uk-table td {
     padding: var(--table-cell-padding-vertical);
     vertical-align: top;
-    .hook-table-cell;
+    @if mixin-exists(hook-table-cell) {
+        @include hook-table-cell;
+    }
 }
 
 /*
  * Remove margin from the last-child
  */
 
-.uk-table td > :last-child { margin-bottom: 0; }
-
+.uk-table td > :last-child {
+    margin-bottom: 0;
+}
 
 /* Footer
  ========================================================================== */
 
 .uk-table tfoot {
     font-size: var(--table-footer-font-size);
-    .hook-table-footer;
+    @if mixin-exists(hook-table-footer) {
+        @include hook-table-footer;
+    }
 }
 
-
 /* Caption
  ========================================================================== */
 
@@ -104,16 +111,18 @@
     color: var(--table-caption-color);
     font-size: var(--table-caption-font-size);
     text-align: left;
-    .hook-table-caption;
+    @if mixin-exists(hook-table-caption) {
+        @include hook-table-caption;
+    }
 }
 
-
 /* Alignment modifier
  ========================================================================== */
 
 .uk-table-middle,
-.uk-table-middle td { vertical-align: middle !important; }
-
+.uk-table-middle td {
+    vertical-align: middle !important;
+}
 
 /* Style modifiers
  ========================================================================== */
@@ -126,7 +135,9 @@
 .uk-table-divider > :not(:first-child) > tr,
 .uk-table-divider > :first-child > tr:not(:first-child) {
     border-top: var(--table-divider-border-width);
-    .hook-table-divider;
+    @if mixin-exists(hook-table-divider) {
+        @include hook-table-divider;
+    }
 }
 
 /*
@@ -136,7 +147,9 @@
 .uk-table-striped > tr:nth-of-type(odd),
 .uk-table-striped tbody tr:nth-of-type(odd) {
     background: var(--table-striped-row-background);
-    .hook-table-striped;
+    @if mixin-exists(hook-table-striped) {
+        @include hook-table-striped;
+    }
 }
 
 /*
@@ -146,17 +159,20 @@
 .uk-table-hover > tr:hover,
 .uk-table-hover tbody tr:hover {
     background: var(--table-hover-row-background);
-    .hook-table-hover;
+    @if mixin-exists(hook-table-hover) {
+        @include hook-table-hover;
+    }
 }
 
-
 /* Active state
  ========================================================================== */
 
 .uk-table > tr.uk-active,
 .uk-table tbody tr.uk-active {
     background: var(--table-row-active-background);
-    .hook-table-row-active;
+    @if mixin-exists(hook-table-row-active) {
+        @include hook-table-row-active;
+    }
 }
 
 /* Size modifier
@@ -165,32 +181,42 @@
 .uk-table-small th,
 .uk-table-small td {
     padding: var(--table-small-cell-padding-vertical);
-    .hook-table-small;
+    @if mixin-exists(hook-table-small) {
+        @include hook-table-small;
+    }
 }
 
 .uk-table-large th,
 .uk-table-large td {
     padding: var(--table-large-cell-padding-vertical);
-    .hook-table-large;
+    @if mixin-exists(hook-table-large) {
+        @include hook-table-large;
+    }
 }
 
-
 /* Justify modifier
  ========================================================================== */
 
 .uk-table-justify th:first-child,
-.uk-table-justify td:first-child { padding-left: 0; }
+.uk-table-justify td:first-child {
+    padding-left: 0;
+}
 
 .uk-table-justify th:last-child,
-.uk-table-justify td:last-child { padding-right: 0; }
-
+.uk-table-justify td:last-child {
+    padding-right: 0;
+}
 
 /* Cell size modifier
  ========================================================================== */
 
-.uk-table-shrink { width: 1px; }
-.uk-table-expand { min-width: var(--table-expand-min-width); }
+.uk-table-shrink {
+    width: 1px;
+}
 
+.uk-table-expand {
+    min-width: var(--table-expand-min-width);
+}
 
 /* Cell link modifier
  ========================================================================== */
@@ -199,7 +225,9 @@
  * Does not work with `uk-table-justify` at the moment
  */
 
-.uk-table-link { padding: 0 !important; }
+.uk-table-link {
+    padding: 0 !important;
+}
 
 .uk-table-link > a {
     display: block;
@@ -210,21 +238,23 @@
     padding: var(--table-small-cell-padding-vertical);
 }
 
-
 /* Responsive table
  ========================================================================== */
 
 
 /* Phone landscape and smaller */
-@media (max-width: @breakpoint-small-max) {
-
+@media (max-width: $breakpoint-small-max) {
     .uk-table-responsive,
     .uk-table-responsive tbody,
     .uk-table-responsive th,
     .uk-table-responsive td,
-    .uk-table-responsive tr { display: block; }
+    .uk-table-responsive tr {
+        display: block;
+    }
 
-    .uk-table-responsive thead { display: none; }
+    .uk-table-responsive thead {
+        display: none;
+    }
 
     .uk-table-responsive th,
     .uk-table-responsive td {
@@ -235,16 +265,16 @@
         width: auto !important;
     }
 
-    .uk-table-responsive th:not(:first-child):not(.uk-table-link),
-    .uk-table-responsive td:not(:first-child):not(.uk-table-link),
+    .uk-table-responsive th:not(:first-child, .uk-table-link),
+    .uk-table-responsive td:not(:first-child, .uk-table-link),
     .uk-table-responsive .uk-table-link:not(:first-child) > a {
-        padding-top: round(@table-cell-padding-vertical / 3) !important;
+        padding-top: round($table-cell-padding-vertical / 3) !important;
     }
 
-    .uk-table-responsive th:not(:last-child):not(.uk-table-link),
-    .uk-table-responsive td:not(:last-child):not(.uk-table-link),
+    .uk-table-responsive th:not(:last-child, .uk-table-link),
+    .uk-table-responsive td:not(:last-child, .uk-table-link),
     .uk-table-responsive .uk-table-link:not(:last-child) > a {
-        padding-bottom: round(@table-cell-padding-vertical / 3) !important;
+        padding-bottom: round($table-cell-padding-vertical / 3) !important;
     }
 
     .uk-table-justify.uk-table-responsive th,
@@ -252,123 +282,44 @@
         padding-left: 0;
         padding-right: 0;
     }
-
 }
 
-
 // Hooks
 // ========================================================================
 
-.hook-table-misc;
-
-.hook-table() {}
-
-.hook-table-header-cell() {}
-
-.hook-table-cell() {}
-
-.hook-table-footer() {}
-
-.hook-table-caption() {}
-
-.hook-table-row-active() {}
-
-.hook-table-divider() {}
-
-.hook-table-striped() {}
-
-.hook-table-hover() {}
-
-.hook-table-small() {}
-
-.hook-table-large() {}
-
-.hook-table-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse() {
-
-    .uk-table th {
-        color: var(--inverse-table-header-cell-color);
-        .hook-inverse-table-header-cell;
-    }
-
-    .uk-table caption {
-        color: var(--inverse-table-caption-color);
-        .hook-inverse-table-caption;
-    }
-
-    .uk-table > tr.uk-active,
-    .uk-table tbody tr.uk-active {
-        background: var(--inverse-table-row-active-background);
-        .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);
-        .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);
-        .hook-inverse-table-striped;
-    }
-
-    .uk-table-hover > tr:hover,
-    .uk-table-hover tbody tr:hover {
-        background: var(--inverse-table-hover-row-background);
-        .hook-inverse-table-hover;
-    }
-
+@if mixin-exists(hook-table-misc) {
+    @include hook-table-misc;
 }
 
-.hook-inverse-table-header-cell() {}
-
-.hook-inverse-table-caption() {}
-
-.hook-inverse-table-row-active() {}
-
-.hook-inverse-table-divider() {}
-
-.hook-inverse-table-striped() {}
-
-.hook-inverse-table-hover() {}
-
 
 // Vars
 // ========================================================================
 
 :root {
     --table-margin-vertical: var(--global-margin);
-    --table-cell-padding-vertical: @table-cell-padding-vertical;
-    --table-cell-padding-horizontal: @table-cell-padding-horizontal;
+    --table-cell-padding-vertical: #{$table-cell-padding-vertical};
+    --table-cell-padding-horizontal: #{$table-cell-padding-horizontal};
     --table-header-cell-font-size: var(--global-font-size);
-    --table-header-cell-font-weight: @table-header-cell-font-weight;
+    --table-header-cell-font-weight: #{$table-header-cell-font-weight};
     --table-header-cell-color: var(--global-color);
     --table-footer-font-size: var(--global-small-font-size);
     --table-caption-font-size: var(--global-small-font-size);
     --table-caption-color: var(--global-muted-color);
-    --table-row-active-background: @table-row-active-background;
+    --table-row-active-background: #{$table-row-active-background};
     --table-divider-border-width: var(--global-border-width);
     --table-divider-border: var(--global-border);
     --table-striped-row-background: var(--global-muted-background);
     --table-hover-row-background: var(--table-row-active-background);
-    --table-small-cell-padding-vertical: @table-small-cell-padding-vertical;
-    --table-small-cell-padding-horizontal: @table-small-cell-padding-horizontal;
-    --table-large-cell-padding-vertical: @table-large-cell-padding-vertical;
-    --table-large-cell-padding-horizontal: @table-large-cell-padding-horizontal;
-    --table-expand-min-width: @table-expand-min-width;
+    --table-small-cell-padding-vertical: #{$table-small-cell-padding-vertical};
+    --table-small-cell-padding-horizontal: #{$table-small-cell-padding-horizontal};
+    --table-large-cell-padding-vertical: #{$table-large-cell-padding-vertical};
+    --table-large-cell-padding-horizontal: #{$table-large-cell-padding-horizontal};
+    --table-expand-min-width: #{$table-expand-min-width};
 
     // Inverse
     --inverse-table-header-cell-color: var(--inverse-global-color);
     --inverse-table-caption-color: var(--inverse-global-muted-color);
-    --inverse-table-row-active-background: @inverse-table-row-active-background;
+    --inverse-table-row-active-background: #{$inverse-table-row-active-background};
     --inverse-table-divider-border: var(--inverse-global-border);
     --inverse-table-striped-row-background: var(--inverse-global-muted-background);
     --inverse-table-hover-row-background: var(--inverse-table-row-active-background);

package/dist/cjs/styles/thumbnav.scss

@@ -146,6 +146,6 @@
 // ========================================================================
 
 .hook-inverse() {
-    --thumbnav-margin-horizontal: @thumbnav-margin-horizontal;
+    --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
     --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
 }

package/dist/cjs/styles/totop.scss

@@ -23,7 +23,9 @@
 .uk-totop {
     color: var(--totop-color);
     padding: var(--totop-padding);
-    .hook-totop;
+    @if mixin-exists(hook-totop) {
+        @include hook-totop;
+    }
 }
 
 /* Hover + Focus */
@@ -31,20 +33,26 @@
 .uk-totop:focus {
     color: var(--totop-hover-color);
     outline: none;
-    .hook-totop-hover;
+    @if mixin-exists(hook-totop-hover) {
+        @include hook-totop-hover;
+    }
 }
 
 /* OnClick */
 .uk-totop:active {
     color: var(--totop-active-color);
-    .hook-totop-active;
+    @if mixin-exists(hook-totop-active) {
+        @include hook-totop-active;
+    }
 }
 
 
 // Hooks
 // ========================================================================
 
-.hook-totop-misc;
+@if mixin-exists(hook-totop-misc) {
+    @include hook-totop-misc;
+}
 
 .hook-totop() {}
 
@@ -58,24 +66,28 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse() {
-
+.hook-inverse-component-totop() {
     .uk-totop {
         color: var(--inverse-totop-color);
-        .hook-inverse-totop;
+        @if mixin-exists(hook-inverse-totop) {
+            @include hook-inverse-totop;
+        }
     }
 
     .uk-totop:hover,
     .uk-totop:focus {
         color: var(--inverse-totop-hover-color);
-        .hook-inverse-totop-hover;
+        @if mixin-exists(hook-inverse-totop-hover) {
+            @include hook-inverse-totop-hover;
+        }
     }
 
     .uk-totop:active {
         color: var(--inverse-totop-active-color);
-        .hook-inverse-totop-active;
+        @if mixin-exists(hook-inverse-totop-active) {
+            @include hook-inverse-totop-active;
+        }
     }
-
 }
 
 .hook-inverse-totop() {}
@@ -89,7 +101,7 @@
 // ========================================================================
 
 :root {
-    --totop-padding: @totop-padding;
+    --totop-padding: #{$totop-padding};
     --totop-color: var(--global-muted-color);
     --totop-hover-color: var(--global-color);
     --totop-active-color: var(--global-emphasis-color);