@broxus/react-uikit 0.3.0 → 0.4.0

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

package/dist/esm/styles/switch.scss

@@ -0,0 +1 @@
+@import '../components/Switch/index.scss';

package/dist/esm/styles/switcher.scss

@@ -49,5 +49,3 @@
 @if mixin-exists(hook-switcher-misc) {
     @include hook-switcher-misc;
 }
-
-// @mixin hook-switcher-misc() {}

package/dist/esm/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/esm/styles/thumbnav.scss

@@ -36,7 +36,9 @@
     /* 2 */
     margin: 0 0 0 /* 3 */ calc(var(--thumbnav-margin-horizontal) * -1);
     padding: 0;
-    .hook-thumbnav;
+    @if mixin-exists(hook-thumbnav) {
+        @include hook-thumbnav;
+    }
 }
 
 /*
@@ -59,19 +61,25 @@
 
 .uk-thumbnav > * > * {
     display: inline-block;
-    .hook-thumbnav-item;
+    @if mixin-exists(hook-thumbnav-item) {
+        @include hook-thumbnav-item;
+    }
 }
 
 /* Hover + Focus */
 .uk-thumbnav > * > :hover,
 .uk-thumbnav > * > :focus {
     outline: none;
-    .hook-thumbnav-item-hover;
+    @if mixin-exists(hook-thumbnav-item-hover) {
+        @include hook-thumbnav-item-hover;
+    }
 }
 
 /* Active */
 .uk-thumbnav > .uk-active > * {
-    .hook-thumbnav-item-active;
+    @if mixin-exists(hook-thumbnav-item-active) {
+        @include hook-thumbnav-item-active;
+    }
 }
 
 
@@ -102,50 +110,15 @@
 // Hooks
 // ========================================================================
 
-.hook-thumbnav-misc;
-
-.hook-thumbnav() {}
-
-.hook-thumbnav-item() {}
-
-.hook-thumbnav-item-hover() {}
-
-.hook-thumbnav-item-active() {}
-
-.hook-thumbnav-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse() {
-
-    .uk-thumbnav > * > * {
-        .hook-inverse-thumbnav-item;
-    }
-
-    .uk-thumbnav > * > :hover,
-    .uk-thumbnav > * > :focus {
-        .hook-inverse-thumbnav-item-hover;
-    }
-
-    .uk-thumbnav > .uk-active > * {
-        .hook-inverse-thumbnav-item-active;
-    }
-
+@if mixin-exists(hook-thumbnav-misc) {
+    @include hook-thumbnav-misc;
 }
 
-.hook-inverse-thumbnav-item() {}
-
-.hook-inverse-thumbnav-item-hover() {}
-
-.hook-inverse-thumbnav-item-active() {}
-
 
 // Vars
 // ========================================================================
 
 .hook-inverse() {
-    --thumbnav-margin-horizontal: @thumbnav-margin-horizontal;
+    --thumbnav-margin-horizontal: #{$thumbnav-margin-horizontal};
     --thumbnav-margin-vertical: var(--thumbnav-margin-horizontal);
 }