@broxus/react-uikit 0.2.2 → 0.3.1

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

@@ -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/esm/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);

package/dist/esm/styles/variables.scss

@@ -1520,7 +1520,7 @@ $sortable-empty-height:                         50px !default;
 // Spinner
 // ========================================================================
 
-$spinner-size:                                  30px !default;
+$spinner-size:                                  20px !default;
 $spinner-stroke-width:                          2 !default;
 $spinner-radius:                                floor(($spinner-size - $spinner-stroke-width) * 0.5) !default; // Minus stroke width to prevent overflow clipping
 $spinner-circumference:                         round(2 * 3.141 * $spinner-radius) !default;
@@ -1580,8 +1580,10 @@ $inverse-subnav-item-disabled-color:            $inverse-global-muted-color !def
 
 $tabs-margin-horizontal:                        20px !default;
 $tabs-margin-vertical:                          10px !default;
-$tabs-tab-padding-horizontal:                   10px !default;
-$tabs-tab-padding-vertical:                     5px !default;
+$tabs-tab-padding-horizontal:                   15px !default;
+$tabs-tab-padding-vertical:                     10px !default;
+$tabs-large-tab-padding-horizontal:             25px !default;
+$tabs-large-tab-padding-vertical:               20px !default;
 $tabs-tab-font-size:                            $global-font-size !default;
 $tabs-tab-color:                                $global-color !default;
 $tabs-tab-hover-color:                          $global-primary-background !default;
@@ -1600,8 +1602,10 @@ $tabs-card-tab-border-width:                    $global-border-width !default;
 $tabs-card-tab-border-style:                    $global-border-style !default;
 $tabs-card-tab-border:                          $global-border !default;
 $tabs-card-tab-border-radius:                   $global-border-radius !default;
-$tabs-card-tab-padding-horizontal:              10px !default;
-$tabs-card-tab-padding-vertical:                5px !default;
+$tabs-card-tab-padding-horizontal:              15px !default;
+$tabs-card-tab-padding-vertical:                10px !default;
+$tabs-card-large-tab-padding-horizontal:        25px !default;
+$tabs-card-large-tab-padding-vertical:          20px !default;
 $tabs-card-tab-active-background:               $global-background !default;
 $tabs-card-gutter:                              $global-xsmall-gutter !default;
 $tabs-dropdown-background:                      $dropdown-background !default;