@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/cjs/components/Button/index.scss → styles/button.scss}

@@ -25,11 +25,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -67,7 +69,7 @@
     text-decoration: none; /* 10 */
     text-transform: none; /* 5 */
     vertical-align: middle; /* 7 */
-    @if mixin-exists(hook-button) {
+    @if meta.mixin-exists('hook-button') {
         @include hook-button;
     }
 }
@@ -89,7 +91,7 @@
 .uk-button:hover {
     /* 9 */
     text-decoration: none;
-    @if mixin-exists(hook-button-hover) {
+    @if meta.mixin-exists('hook-button-hover') {
         @include hook-button-hover;
     }
 }
@@ -97,7 +99,7 @@
 /* Focus */
 .uk-button:focus {
     outline: none;
-    @if mixin-exists(hook-button-focus) {
+    @if meta.mixin-exists('hook-button-focus') {
         @include hook-button-focus;
     }
 }
@@ -105,7 +107,7 @@
 /* OnClick + Active */
 .uk-button:active,
 .uk-button.uk-active {
-    @if mixin-exists(hook-button-active) {
+    @if meta.mixin-exists('hook-button-active') {
         @include hook-button-active;
     }
 }
@@ -121,7 +123,7 @@
 .uk-button-default {
     background-color: var(--button-default-background);
     color: var(--button-default-color);
-    @if mixin-exists(hook-button-default) {
+    @if meta.mixin-exists('hook-button-default') {
         @include hook-button-default;
     }
 }
@@ -131,7 +133,7 @@
 .uk-button-default:focus {
     background-color: var(--button-default-hover-background);
     color: var(--button-default-hover-color);
-    @if mixin-exists(hook-button-default-hover) {
+    @if meta.mixin-exists('hook-button-default-hover') {
         @include hook-button-default-hover;
     }
 }
@@ -141,7 +143,7 @@
 .uk-button-default.uk-active {
     background-color: var(--button-default-active-background);
     color: var(--button-default-active-color);
-    @if mixin-exists(hook-button-default-active) {
+    @if meta.mixin-exists('hook-button-default-active') {
         @include hook-button-default-active;
     }
 }
@@ -153,7 +155,7 @@
 .uk-button-primary {
     background-color: var(--button-primary-background);
     color: var(--button-primary-color);
-    @if mixin-exists(hook-button-primary) {
+    @if meta.mixin-exists('hook-button-primary') {
         @include hook-button-primary;
     }
 }
@@ -163,7 +165,7 @@
 .uk-button-primary:focus {
     background-color: var(--button-primary-hover-background);
     color: var(--button-primary-hover-color);
-    @if mixin-exists(hook-button-primary-hover) {
+    @if meta.mixin-exists('hook-button-primary-hover') {
         @include hook-button-primary-hover;
     }
 }
@@ -173,7 +175,7 @@
 .uk-button-primary.uk-active {
     background-color: var(--button-primary-active-background);
     color: var(--button-primary-active-color);
-    @if mixin-exists(hook-button-primary-active) {
+    @if meta.mixin-exists('hook-button-primary-active') {
         @include hook-button-primary-active;
     }
 }
@@ -185,7 +187,7 @@
 .uk-button-secondary {
     background-color: var(--button-secondary-background);
     color: var(--button-secondary-color);
-    @if mixin-exists(hook-button-secondary) {
+    @if meta.mixin-exists('hook-button-secondary') {
         @include hook-button-secondary;
     }
 }
@@ -195,7 +197,7 @@
 .uk-button-secondary:focus {
     background-color: var(--button-secondary-hover-background);
     color: var(--button-secondary-hover-color);
-    @if mixin-exists(hook-button-secondary-hover) {
+    @if meta.mixin-exists('hook-button-secondary-hover') {
         @include hook-button-secondary-hover;
     }
 }
@@ -205,7 +207,7 @@
 .uk-button-secondary.uk-active {
     background-color: var(--button-secondary-active-background);
     color: var(--button-secondary-active-color);
-    @if mixin-exists(hook-button-secondary-active) {
+    @if meta.mixin-exists('hook-button-secondary-active') {
         @include hook-button-secondary-active;
     }
 }
@@ -217,7 +219,7 @@
 .uk-button-tertiary {
     background-color: var(--button-tertiary-background);
     color: var(--button-tertiary-color);
-    @if mixin-exists(hook-button-tertiary) {
+    @if meta.mixin-exists('hook-button-tertiary') {
         @include hook-button-tertiary;
     }
 }
@@ -227,7 +229,7 @@
 .uk-button-tertiary:focus {
     background-color: var(--button-tertiary-hover-background);
     color: var(--button-tertiary-hover-color);
-    @if mixin-exists(hook-button-tertiary-hover) {
+    @if meta.mixin-exists('hook-button-tertiary-hover') {
         @include hook-button-tertiary-hover;
     }
 }
@@ -237,7 +239,7 @@
 .uk-button-tertiary.uk-active {
     background-color: var(--button-tertiary-active-background);
     color: var(--button-tertiary-active-color);
-    @if mixin-exists(hook-button-tertiary-active) {
+    @if meta.mixin-exists('hook-button-tertiary-active') {
         @include hook-button-tertiary-active;
     }
 }
@@ -249,7 +251,7 @@
 .uk-button-danger {
     background-color: var(--button-danger-background);
     color: var(--button-danger-color);
-    @if mixin-exists(hook-button-danger) {
+    @if meta.mixin-exists('hook-button-danger') {
         @include hook-button-danger;
     }
 }
@@ -259,7 +261,7 @@
 .uk-button-danger:focus {
     background-color: var(--button-danger-hover-background);
     color: var(--button-danger-hover-color);
-    @if mixin-exists(hook-button-danger-hover) {
+    @if meta.mixin-exists('hook-button-danger-hover') {
         @include hook-button-danger-hover;
     }
 }
@@ -269,7 +271,7 @@
 .uk-button-danger.uk-active {
     background-color: var(--button-danger-active-background);
     color: var(--button-danger-active-color);
-    @if mixin-exists(hook-button-danger-active) {
+    @if meta.mixin-exists('hook-button-danger-active') {
         @include hook-button-danger-active;
     }
 }
@@ -287,7 +289,7 @@
     .uk-button-danger:disabled {
         background-color: var(--button-disabled-background);
         color: var(--button-disabled-color);
-        @if mixin-exists(hook-button-disabled) {
+        @if meta.mixin-exists('hook-button-disabled') {
             @include hook-button-disabled;
         }
     }
@@ -297,7 +299,7 @@
     .uk-button-default:disabled {
         background-color: var(--button-default-disabled-background);
         color: var(--button-default-disabled-color);
-        @if mixin-exists(hook-button-default-disabled) {
+        @if meta.mixin-exists('hook-button-default-disabled') {
             @include hook-button-default-disabled;
         }
     }
@@ -305,7 +307,7 @@
     .uk-button-primary:disabled {
         background-color: var(--button-primary-disabled-background);
         color: var(--button-primary-disabled-color);
-        @if mixin-exists(hook-button-primary-disabled) {
+        @if meta.mixin-exists('hook-button-primary-disabled') {
             @include hook-button-primary-disabled;
         }
     }
@@ -313,7 +315,7 @@
     .uk-button-secondary:disabled {
         background-color: var(--button-secondary-disabled-background);
         color: var(--button-secondary-disabled-color);
-        @if mixin-exists(hook-button-secondary-disabled) {
+        @if meta.mixin-exists('hook-button-secondary-disabled') {
             @include hook-button-secondary-disabled;
         }
     }
@@ -321,7 +323,7 @@
     .uk-button-tertiary:disabled {
         background-color: var(--button-tertiary-disabled-background);
         color: var(--button-tertiary-disabled-color);
-        @if mixin-exists(hook-button-tertiary-disabled) {
+        @if meta.mixin-exists('hook-button-tertiary-disabled') {
             @include hook-button-tertiary-disabled;
         }
     }
@@ -329,7 +331,7 @@
     .uk-button-danger:disabled {
         background-color: var(--button-danger-disabled-background);
         color: var(--button-danger-disabled-color);
-        @if mixin-exists(hook-button-danger-disabled) {
+        @if meta.mixin-exists('hook-button-danger-disabled') {
             @include hook-button-danger-disabled;
         }
     }
@@ -342,7 +344,7 @@
     font-size: var(--button-xsmall-font-size);
     line-height: var(--button-xsmall-line-height);
     padding: 0 var(--button-xsmall-padding-horizontal);
-    @if mixin-exists(hook-button-xsmall) {
+    @if meta.mixin-exists('hook-button-xsmall') {
         @include hook-button-xsmall;
     }
 }
@@ -351,7 +353,7 @@
     font-size: var(--button-small-font-size);
     line-height: var(--button-small-line-height);
     padding: 0 var(--button-small-padding-horizontal);
-    @if mixin-exists(hook-button-small) {
+    @if meta.mixin-exists('hook-button-small') {
         @include hook-button-small;
     }
 }
@@ -360,7 +362,7 @@
     font-size: var(--button-medium-font-size);
     line-height: var(--button-medium-line-height);
     padding: 0 var(--button-medium-padding-horizontal);
-    @if mixin-exists(hook-button-medium) {
+    @if meta.mixin-exists('hook-button-medium') {
         @include hook-button-medium;
     }
 }
@@ -369,7 +371,7 @@
     font-size: var(--button-large-font-size);
     line-height: var(--button-large-line-height);
     padding: 0 var(--button-large-padding-horizontal);
-    @if mixin-exists(hook-button-large) {
+    @if meta.mixin-exists('hook-button-large') {
         @include hook-button-large;
     }
 }
@@ -378,7 +380,7 @@
     font-size: var(--button-xlarge-font-size);
     line-height: var(--button-xlarge-line-height);
     padding: 0 var(--button-xlarge-padding-horizontal);
-    @if mixin-exists(hook-button-xlarge) {
+    @if meta.mixin-exists('hook-button-xlarge') {
         @include hook-button-xlarge;
     }
 }
@@ -398,7 +400,7 @@
     color: var(--button-text-color); /* 2 */
     line-height: var(--button-text-line-height); /* 1 */
     padding: 0; /* 1 */
-    @if mixin-exists(hook-button-text) {
+    @if meta.mixin-exists('hook-button-text') {
         @include hook-button-text;
     }
 }
@@ -407,7 +409,7 @@
 .uk-button-text:hover,
 .uk-button-text:focus {
     color: var(--button-text-hover-color);
-    @if mixin-exists(hook-button-text-hover) {
+    @if meta.mixin-exists('hook-button-text-hover') {
         @include hook-button-text-hover;
     }
 }
@@ -415,7 +417,7 @@
 /* Disabled */
 .uk-button-text:disabled {
     color: var(--button-text-disabled-color);
-    @if mixin-exists(hook-button-text-disabled) {
+    @if meta.mixin-exists('hook-button-text-disabled') {
         @include hook-button-text-disabled;
     }
 }
@@ -425,7 +427,7 @@
 .uk-button-text.uk-active {
     background-color: var(--button-text-active-background);
     color: var(--button-text-active-color);
-    @if mixin-exists(hook-button-text-active) {
+    @if meta.mixin-exists('hook-button-text-active') {
         @include hook-button-text-active;
     }
 }
@@ -441,7 +443,7 @@
     color: var(--button-link-color); /* 2 */
     line-height: var(--button-link-line-height); /* 1 */
     padding: 0; /* 1 */
-    @if mixin-exists(hook-button-link) {
+    @if meta.mixin-exists('hook-button-link') {
         @include hook-button-link;
     }
 }
@@ -451,12 +453,18 @@
 .uk-button-link:focus {
     color: var(--button-link-hover-color);
     text-decoration: var(--button-link-hover-text-decoration);
+    @if meta.mixin-exists('hook-button-link-hover') {
+        @include hook-button-link-hover;
+    }
 }
 
 /* Disabled */
 .uk-button-link:disabled {
     color: var(--button-link-disabled-color);
     text-decoration: none;
+    @if meta.mixin-exists('hook-button-link-disabled') {
+        @include hook-button-link-disabled;
+    }
 }
 
 /* OnClick + Active */
@@ -464,7 +472,7 @@
 .uk-button-link.uk-active {
     background-color: var(--button-link-active-background);
     color: var(--button-link-active-color);
-    @if mixin-exists(hook-button-link-active) {
+    @if meta.mixin-exists('hook-button-link-active') {
         @include hook-button-link-active;
     }
 }
@@ -472,7 +480,7 @@
 /* Ghost modifiers
  ========================================================================== */
 
-.uk-button-ghost {
+.uk-button.uk-button-ghost {
     background-color: transparent;
     border: var(--button-ghost-border-width) var(--button-ghost-border-style);
 }
@@ -599,7 +607,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-button-misc) {
+@if meta.mixin-exists('hook-button-misc') {
     @include hook-button-misc;
 }
 

package/{dist/esm/components/Card/index.scss → styles/card.scss}

@@ -22,11 +22,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -36,7 +38,7 @@
 .uk-card {
     box-sizing: border-box;
     position: relative;
-    @if mixin-exists(hook-card) {
+    @if meta.mixin-exists('hook-card') {
         @include hook-card;
     }
 }
@@ -48,7 +50,7 @@
 .uk-card-body {
     display: flow-root;
     padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
-    @if mixin-exists(hook-card-body) {
+    @if meta.mixin-exists('hook-card-body') {
         @include hook-card-body;
     }
 }
@@ -56,7 +58,7 @@
 .uk-card-header {
     display: flow-root;
     padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
-    @if mixin-exists(hook-card-header) {
+    @if meta.mixin-exists('hook-card-header') {
         @include hook-card-header;
     }
 }
@@ -64,7 +66,7 @@
 .uk-card-footer {
     display: flow-root;
     padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
-    @if mixin-exists(hook-card-footer) {
+    @if meta.mixin-exists('hook-card-footer') {
         @include hook-card-footer;
     }
 }
@@ -104,7 +106,7 @@
  */
 
 [class*='uk-card-media'] {
-    @if mixin-exists(hook-card-media) {
+    @if meta.mixin-exists('hook-card-media') {
         @include hook-card-media;
     }
 }
@@ -112,25 +114,25 @@
 .uk-card-media-top,
 .uk-grid-stack > .uk-card-media-left,
 .uk-grid-stack > .uk-card-media-right {
-    @if mixin-exists(hook-card-media-top) {
+    @if meta.mixin-exists('hook-card-media-top') {
         @include hook-card-media-top;
     }
 }
 
 .uk-card-media-bottom {
-    @if mixin-exists(hook-card-media-bottom) {
+    @if meta.mixin-exists('hook-card-media-bottom') {
         @include hook-card-media-bottom;
     }
 }
 
 :not(.uk-grid-stack) > .uk-card-media-left {
-    @if mixin-exists(hook-card-media-left) {
+    @if meta.mixin-exists('hook-card-media-left') {
         @include hook-card-media-left;
     }
 }
 
 :not(.uk-grid-stack) > .uk-card-media-right {
-    @if mixin-exists(hook-card-media-right) {
+    @if meta.mixin-exists('hook-card-media-right') {
         @include hook-card-media-right;
     }
 }
@@ -142,7 +144,7 @@
 .uk-card-title {
     font-size: var(--card-title-font-size);
     line-height: var(--card-title-line-height);
-    @if mixin-exists(hook-card-title) {
+    @if meta.mixin-exists('hook-card-title') {
         @include hook-card-title;
     }
 }
@@ -172,7 +174,7 @@
     right: var(--card-badge-right); /* 1 */
     top: var(--card-badge-top); /* 1 */
     z-index: 1; /* 1 */
-    @if mixin-exists(hook-card-badge) {
+    @if meta.mixin-exists('hook-card-badge') {
         @include hook-card-badge;
     }
 }
@@ -191,7 +193,7 @@
 
 .uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-tertiary):hover {
     background: var(--card-hover-background);
-    @if mixin-exists(hook-card-hover) {
+    @if meta.mixin-exists('hook-card-hover') {
         @include hook-card-hover;
     }
 }
@@ -209,33 +211,33 @@
     --uk-inverse: #{$card-default-color-mode};
     background: var(--card-default-background);
     color: var(--card-default-color);
-    @if mixin-exists(hook-card-default) {
+    @if meta.mixin-exists('hook-card-default') {
         @include hook-card-default;
     }
 }
 
 .uk-card-default .uk-card-title {
     color: var(--card-default-title-color);
-    @if mixin-exists(hook-card-default-title) {
+    @if meta.mixin-exists('hook-card-default-title') {
         @include hook-card-default-title;
     }
 }
 
 .uk-card-default.uk-card-hover:hover {
     background-color: var(--card-default-hover-background);
-    @if mixin-exists(hook-card-default-hover) {
+    @if meta.mixin-exists('hook-card-default-hover') {
         @include hook-card-default-hover;
     }
 }
 
 .uk-card-default .uk-card-header {
-    @if mixin-exists(hook-card-default-header) {
+    @if meta.mixin-exists('hook-card-default-header') {
         @include hook-card-default-header;
     }
 }
 
 .uk-card-default .uk-card-footer {
-    @if mixin-exists(hook-card-default-footer) {
+    @if meta.mixin-exists('hook-card-default-footer') {
         @include hook-card-default-footer;
     }
 }
@@ -273,21 +275,21 @@
     --uk-inverse: #{$card-primary-color-mode};
     background: var(--card-primary-background);
     color: var(--card-primary-color);
-    @if mixin-exists(hook-card-primary) {
+    @if meta.mixin-exists('hook-card-primary') {
         @include hook-card-primary;
     }
 }
 
 .uk-card-primary .uk-card-title {
     color: var(--card-primary-title-color);
-    @if mixin-exists(hook-card-primary-title) {
+    @if meta.mixin-exists('hook-card-primary-title') {
         @include hook-card-primary-title;
     }
 }
 
 .uk-card-primary.uk-card-hover:hover {
     background-color: var(--card-primary-hover-background);
-    @if mixin-exists(hook-card-primary-hover) {
+    @if meta.mixin-exists('hook-card-primary-hover') {
         @include hook-card-primary-hover;
     }
 }
@@ -325,21 +327,21 @@
     --uk-inverse: #{$card-secondary-color-mode};
     background: var(--card-secondary-background);
     color: var(--card-secondary-color);
-    @if mixin-exists(hook-card-secondary) {
+    @if meta.mixin-exists('hook-card-secondary') {
         @include hook-card-secondary;
     }
 }
 
 .uk-card-secondary .uk-card-title {
     color: var(--card-secondary-title-color);
-    @if mixin-exists(hook-card-secondary-title) {
+    @if meta.mixin-exists('hook-card-secondary-title') {
         @include hook-card-secondary-title;
     }
 }
 
 .uk-card-secondary.uk-card-hover:hover {
     background-color: var(--card-secondary-hover-background);
-    @if mixin-exists(hook-card-secondary-hover) {
+    @if meta.mixin-exists('hook-card-secondary-hover') {
         @include hook-card-secondary-hover;
     }
 }
@@ -377,21 +379,21 @@
     --uk-inverse: #{$card-tertiary-color-mode};
     background: var(--card-tertiary-background);
     color: var(--card-tertiary-color);
-    @if mixin-exists(hook-card-tertiary) {
+    @if meta.mixin-exists('hook-card-tertiary') {
         @include hook-card-tertiary;
     }
 }
 
 .uk-card-tertiary .uk-card-title {
     color: var(--card-tertiary-title-color);
-    @if mixin-exists(hook-card-tertiary-title) {
+    @if meta.mixin-exists('hook-card-tertiary-title') {
         @include hook-card-tertiary-title;
     }
 }
 
 .uk-card-tertiary.uk-card-hover:hover {
     background-color: var(--card-tertiary-hover-background);
-    @if mixin-exists(hook-card-tertiary-hover) {
+    @if meta.mixin-exists('hook-card-tertiary-hover') {
         @include hook-card-tertiary-hover;
     }
 }
@@ -466,7 +468,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-card-misc) {
+@if meta.mixin-exists('hook-card-misc') {
     @include hook-card-misc;
 }