@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/esm/styles/animation.scss

@@ -35,8 +35,8 @@
 
 [class*='uk-animation-'] {
     animation-duration: var(--animation-duration);
-    animation-fill-mode: both;
     animation-timing-function: var(--ease-out);
+    animation-fill-mode: both;
 }
 
 
@@ -48,8 +48,8 @@
  */
 
 .uk-animation-fade {
-    animation-duration: var(--animation-fade-duration);
     animation-name: uk-fade;
+    animation-duration: var(--animation-fade-duration);
     animation-timing-function: linear;
 }
 
@@ -102,8 +102,8 @@
  */
 
 .uk-animation-kenburns {
-    animation-duration: var(--animation-kenburns-duration);
     animation-name: uk-scale-kenburns;
+    animation-duration: var(--animation-kenburns-duration);
 }
 
 /*
@@ -121,8 +121,8 @@
  */
 
 .uk-animation-stroke {
-    animation-duration: var(--animation-stroke-duration);
     animation-name: uk-stroke;
+    animation-duration: var(--animation-stroke-duration);
     stroke-dasharray: var(--uk-animation-stroke);
 }
 
@@ -131,8 +131,8 @@
  ========================================================================== */
 
 .uk-animation-reverse {
-    animation-direction: reverse;
     animation-timing-function: var(--ease-in);
+    animation-direction: reverse;
 }
 
 
@@ -151,7 +151,7 @@
  * The toggle is triggered on touch devices using `:focus` and tabindex
  */
 
-.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
+.uk-animation-toggle:not(:hover, :focus) [class*='uk-animation-'] { animation-name: none; }
 
 /*
  * 1. Prevent tab highlighting on iOS.
@@ -187,13 +187,13 @@
 
 @keyframes uk-fade-top {
     0% {
-        opacity: 0;
         transform: translateY(-100%);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -203,13 +203,13 @@
 
 @keyframes uk-fade-bottom {
     0% {
-        opacity: 0;
         transform: translateY(100%);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -219,13 +219,13 @@
 
 @keyframes uk-fade-left {
     0% {
-        opacity: 0;
         transform: translateX(-100%);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -235,13 +235,13 @@
 
 @keyframes uk-fade-right {
     0% {
-        opacity: 0;
         transform: translateX(100%);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -251,13 +251,13 @@
 
 @keyframes uk-fade-top-small {
     0% {
-        opacity: 0;
         transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -267,13 +267,13 @@
 
 @keyframes uk-fade-bottom-small {
     0% {
-        opacity: 0;
         transform: translateY(var(--animation-slide-small-translate));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -283,13 +283,13 @@
 
 @keyframes uk-fade-left-small {
     0% {
-        opacity: 0;
         transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -299,13 +299,13 @@
 
 @keyframes uk-fade-right-small {
     0% {
-        opacity: 0;
         transform: translateX(var(--animation-slide-small-translate));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -315,13 +315,13 @@
 
 @keyframes uk-fade-top-medium {
     0% {
-        opacity: 0;
         transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -331,13 +331,13 @@
 
 @keyframes uk-fade-bottom-medium {
     0% {
-        opacity: 0;
         transform: translateY(var(--animation-slide-medium-translate));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateY(0);
+        opacity: 1;
     }
 }
 
@@ -347,13 +347,13 @@
 
 @keyframes uk-fade-left-medium {
     0% {
-        opacity: 0;
         transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -363,13 +363,13 @@
 
 @keyframes uk-fade-right-medium {
     0% {
-        opacity: 0;
         transform: translateX(var(--animation-slide-medium-translate));
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
     }
 }
 
@@ -379,13 +379,13 @@
 
 @keyframes uk-fade-scale-02 {
     0% {
-        opacity: 0;
         transform: scale(0.2);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: scale(1);
+        opacity: 1;
     }
 }
 
@@ -395,13 +395,13 @@
 
 @keyframes uk-fade-scale-18 {
     0% {
-        opacity: 0;
         transform: scale(1.8);
+        opacity: 0;
     }
 
     100% {
-        opacity: 1;
         transform: scale(1);
+        opacity: 1;
     }
 }
 
@@ -446,7 +446,7 @@
 // ========================================================================
 
 @if mixin-exists(hook-animation-misc) {
-    @include hook-animation-misc();
+    @include hook-animation-misc;
 }
 
 

package/dist/esm/styles/column.scss

@@ -109,7 +109,6 @@
 }
 
 /* Large screen and bigger */
-// noinspection Stylelint
 @media (min-width: $breakpoint-xlarge) {
     .uk-column-1-2\@xl { column-count: 2; }
 

package/dist/esm/styles/mixins.scss

@@ -40,8 +40,8 @@
 
 @mixin hook-alert() {
     a:not([class]) {
-        color: inherit;
         text-decoration: underline;
+        color: inherit;
     }
 }
 @mixin hook-alert-close() {}
@@ -50,7 +50,29 @@
 @mixin hook-alert-success() {}
 @mixin hook-alert-warning() {}
 @mixin hook-alert-danger() {}
-@mixin hook-alert-misc() {}
+@mixin hook-alert-misc() {
+    /*
+     * Content
+     */
+
+    .uk-alert h1,
+    .uk-alert h2,
+    .uk-alert h3,
+    .uk-alert h4,
+    .uk-alert h5,
+    .uk-alert h6 { color: inherit; }
+
+    .uk-alert a:not([class]) {
+        text-decoration: underline;
+        color: inherit;
+    }
+
+    .uk-alert a:not([class]):hover {
+        text-decoration: underline;
+        color: inherit;
+    }
+
+}
 
 @mixin hook-align-misc() {}
 
@@ -364,14 +386,14 @@
     .uk-button-group {
         .uk-button-circle:not(:last-child),
         .uk-button-round:not(:last-child) {
-            border-bottom-right-radius: 0;
             border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
         .uk-button-circle:not(:first-child),
         .uk-button-round:not(:first-child) {
-            border-bottom-left-radius: 0;
             border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
         }
     }
 }
@@ -961,8 +983,8 @@
 @mixin hook-inverse-control-blank-focus() {}
 @mixin hook-inverse-component-control() {
     .uk-control {
-        background-color: var(--inverse-control-background);
         border-color: var(--inverse-control-border);
+        background-color: var(--inverse-control-background);
         color: var(--inverse-control-color);
         @if mixin-exists(hook-inverse-control) {
             @include hook-inverse-control;
@@ -971,8 +993,8 @@
 
     // Hover state (unused for disabled state)
     .uk-control:hover {
-        background-color: var(--inverse-control-hover-background);
         border-color: var(--inverse-control-hover-border);
+        background-color: var(--inverse-control-hover-background);
         color: var(--inverse-control-hover-color);
         @if mixin-exists(hook-inverse-control-hover) {
             @include hook-inverse-control-hover;
@@ -981,8 +1003,8 @@
 
     // Focus state (unused for disabled state)
     .uk-control:focus-within {
-        background-color: var(--inverse-control-focus-background);
         border-color: var(--inverse-control-focus-border);
+        background-color: var(--inverse-control-focus-background);
         color: var(--inverse-control-focus-color);
         @if mixin-exists(hook-inverse-control-focus) {
             @include hook-inverse-control-focus;
@@ -991,8 +1013,8 @@
 
     // Disabled state
     .uk-control.uk-disabled {
-        background-color: var(--inverse-ontrol-disabled-background);
         border-color: var(--inverse-control-disabled-border);
+        background-color: var(--inverse-ontrol-disabled-background);
         color: var(--inverse-control-disabled-color);
         @if mixin-exists(hook-inverse-control-disabled) {
             @include hook-inverse-control-disabled;