@broxus/react-uikit 0.21.0 → 0.23.0

package/styles/animation.scss

@@ -60,45 +60,35 @@
  * Scale
  */
 
-.uk-animation-scale-up { animation-name: uk-fade-scale-02; }
-
-.uk-animation-scale-down { animation-name: uk-fade-scale-18; }
+.uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
+.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
 
 /*
  * Slide
  */
 
-.uk-animation-slide-top { animation-name: uk-fade-top; }
-
-.uk-animation-slide-bottom { animation-name: uk-fade-bottom; }
-
-.uk-animation-slide-left { animation-name: uk-fade-left; }
-
-.uk-animation-slide-right { animation-name: uk-fade-right; }
+.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
+.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
+.uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
+.uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
 
 /*
  * Slide Small
  */
 
-.uk-animation-slide-top-small { animation-name: uk-fade-top-small; }
-
-.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; }
-
-.uk-animation-slide-left-small { animation-name: uk-fade-left-small; }
-
-.uk-animation-slide-right-small { animation-name: uk-fade-right-small; }
+.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
+.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
+.uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
+.uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
 
 /*
  * Slide Medium
  */
 
-.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; }
-
-.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; }
-
-.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; }
-
-.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; }
+.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
+.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
+.uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
+.uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
 
 /*
  * Kenburns
@@ -106,7 +96,7 @@
 
 .uk-animation-kenburns {
     animation-duration: var(--animation-kenburns-duration);
-    animation-name: uk-scale-kenburns;
+    animation-name: uk-kenburns;
 }
 
 /*
@@ -147,7 +137,7 @@
 .uk-animation-medium-fast { animation-duration: var(--animation-medium-fast-duration); }
 
 
-/* Toggle (Hover + Focus)
+/* Toggle animation based on the State of the Parent Element
 ========================================================================== */
 
 /*
@@ -161,8 +151,7 @@
  */
 
 .uk-animation-toggle {
-    /* 1 */
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent; /* 1 */
 }
 
 /*
@@ -185,234 +174,96 @@
 }
 
 /*
- * Slide Top
+ * Scale
  */
 
-@keyframes uk-fade-top {
-    0% {
-        opacity: 0;
-        transform: translateY(-100%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-scale-up {
+    0% { transform: scale(0.9); }
+    100% { transform: scale(1); }
 }
 
-/*
- * Slide Bottom
- */
-
-@keyframes uk-fade-bottom {
-    0% {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-scale-down {
+    0% { transform: scale(1.1); }
+    100% { transform: scale(1); }
 }
 
 /*
- * Slide Left
+ * Slide
  */
 
-@keyframes uk-fade-left {
-    0% {
-        opacity: 0;
-        transform: translateX(-100%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right
- */
-
-@keyframes uk-fade-right {
-    0% {
-        opacity: 0;
-        transform: translateX(100%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom {
+    0% { transform: translateY(100%); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Top Small
- */
-
-@keyframes uk-fade-top-small {
-    0% {
-        opacity: 0;
-        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-left {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Slide Bottom Small
- */
-
-@keyframes uk-fade-bottom-small {
-    0% {
-        opacity: 0;
-        transform: translateY(var(--animation-slide-small-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-right {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(0); }
 }
 
 /*
- * Slide Left Small
+ * Slide Small
  */
 
-@keyframes uk-fade-left-small {
-    0% {
-        opacity: 0;
-        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top-small {
+    0% { transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right Small
- */
-
-@keyframes uk-fade-right-small {
-    0% {
-        opacity: 0;
-        transform: translateX(var(--animation-slide-small-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom-small {
+    0% { transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Top Medium
- */
-
-@keyframes uk-fade-top-medium {
-    0% {
-        opacity: 0;
-        transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-left-small {
+    0% { transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Slide Bottom Medium
- */
-
-@keyframes uk-fade-bottom-medium {
-    0% {
-        opacity: 0;
-        transform: translateY(var(--animation-slide-medium-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-right-small {
+    0% { transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)')); }
+    100% { transform: translateX(0); }
 }
 
 /*
- * Slide Left Medium
+ * Slide Medium
  */
 
-@keyframes uk-fade-left-medium {
-    0% {
-        opacity: 0;
-        transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top-medium {
+    0% { transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right Medium
- */
-
-@keyframes uk-fade-right-medium {
-    0% {
-        opacity: 0;
-        transform: translateX(var(--animation-slide-medium-translate));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom-medium {
+    0% { transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Scale Up
- */
-
-@keyframes uk-fade-scale-02 {
-    0% {
-        opacity: 0;
-        transform: scale(0.2);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+@keyframes uk-slide-left-medium {
+    0% { transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Scale Down
- */
-
-@keyframes uk-fade-scale-18 {
-    0% {
-        opacity: 0;
-        transform: scale(1.8);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+@keyframes uk-slide-right-medium {
+    0% { transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)')); }
+    100% { transform: translateX(0); }
 }
 
 /*
  * Kenburns
  */
 
-@keyframes uk-scale-kenburns {
+@keyframes uk-kenburns {
     0% { transform: scale(1); }
     100% { transform: scale(1.2); }
 }

package/styles/background.scss

@@ -23,25 +23,11 @@
 /* Color
  ========================================================================== */
 
-.uk-background-default {
-    background-color: var(--default-background);
-}
-
-.uk-background-muted {
-    background-color: var(--muted-background);
-}
-
-.uk-background-primary {
-    background-color: var(--primary-background);
-}
-
-.uk-background-secondary {
-    background-color: var(--secondary-background);
-}
-
-.uk-background-tertiary {
-    background-color: var(--tertiary-background);
-}
+.uk-background-default { background-color: var(--default-background); }
+.uk-background-muted { background-color: var(--muted-background); }
+.uk-background-primary { background-color: var(--primary-background); }
+.uk-background-secondary { background-color: var(--secondary-background); }
+.uk-background-tertiary { background-color: var(--tertiary-background); }
 
 
 /* Size
@@ -55,69 +41,30 @@
     background-repeat: no-repeat;
 }
 
-.uk-background-cover {
-    background-size: cover;
-}
-
-.uk-background-contain {
-    background-size: contain;
-}
-
-.uk-background-width-1-1 {
-    background-size: 100%;
-}
-
-.uk-background-height-1-1 {
-    background-size: auto 100%;
-}
+.uk-background-cover { background-size: cover; }
+.uk-background-contain { background-size: contain; }
+.uk-background-width-1-1 { background-size: 100%; }
+.uk-background-height-1-1 { background-size: auto 100%; }
 
 
 /* Position
  ========================================================================== */
 
-.uk-background-top-left {
-    background-position: 0 0;
-}
-
-.uk-background-top-center {
-    background-position: 50% 0;
-}
-
-.uk-background-top-right {
-    background-position: 100% 0;
-}
-
-.uk-background-center-left {
-    background-position: 0 50%;
-}
-
-.uk-background-center-center {
-    background-position: 50% 50%;
-}
-
-.uk-background-center-right {
-    background-position: 100% 50%;
-}
-
-.uk-background-bottom-left {
-    background-position: 0 100%;
-}
-
-.uk-background-bottom-center {
-    background-position: 50% 100%;
-}
-
-.uk-background-bottom-right {
-    background-position: 100% 100%;
-}
+.uk-background-top-left { background-position: 0 0; }
+.uk-background-top-center { background-position: 50% 0; }
+.uk-background-top-right { background-position: 100% 0; }
+.uk-background-center-left { background-position: 0 50%; }
+.uk-background-center-center { background-position: 50% 50%; }
+.uk-background-center-right { background-position: 100% 50%; }
+.uk-background-bottom-left { background-position: 0 100%; }
+.uk-background-bottom-center { background-position: 50% 100%; }
+.uk-background-bottom-right { background-position: 100% 100%; }
 
 
 /* Repeat
  ========================================================================== */
 
-.uk-background-no-repeat {
-    background-repeat: no-repeat;
-}
+.uk-background-no-repeat { background-repeat: no-repeat; }
 
 
 /* Attachment
@@ -183,65 +130,21 @@
 /* Blend modes
  ========================================================================== */
 
-.uk-background-blend-multiply {
-    background-blend-mode: multiply;
-}
-
-.uk-background-blend-screen {
-    background-blend-mode: screen;
-}
-
-.uk-background-blend-overlay {
-    background-blend-mode: overlay;
-}
-
-.uk-background-blend-darken {
-    background-blend-mode: darken;
-}
-
-.uk-background-blend-lighten {
-    background-blend-mode: lighten;
-}
-
-.uk-background-blend-color-dodge {
-    background-blend-mode: color-dodge;
-}
-
-.uk-background-blend-color-burn {
-    background-blend-mode: color-burn;
-}
-
-.uk-background-blend-hard-light {
-    background-blend-mode: hard-light;
-}
-
-.uk-background-blend-soft-light {
-    background-blend-mode: soft-light;
-}
-
-.uk-background-blend-difference {
-    background-blend-mode: difference;
-}
-
-.uk-background-blend-exclusion {
-    background-blend-mode: exclusion;
-}
-
-.uk-background-blend-hue {
-    background-blend-mode: hue;
-}
-
-.uk-background-blend-saturation {
-    background-blend-mode: saturation;
-}
-
-.uk-background-blend-color {
-    background-blend-mode: color;
-}
-
-.uk-background-blend-luminosity {
-    background-blend-mode: luminosity;
-}
+.uk-background-blend-multiply { background-blend-mode: multiply; }
+.uk-background-blend-screen { background-blend-mode: screen; }
+.uk-background-blend-overlay { background-blend-mode: overlay; }
+.uk-background-blend-darken { background-blend-mode: darken; }
+.uk-background-blend-lighten { background-blend-mode: lighten; }
+.uk-background-blend-color-dodge { background-blend-mode: color-dodge; }
+.uk-background-blend-color-burn { background-blend-mode: color-burn; }
+.uk-background-blend-hard-light { background-blend-mode: hard-light; }
+.uk-background-blend-soft-light { background-blend-mode: soft-light; }
+.uk-background-blend-difference { background-blend-mode: difference; }
+.uk-background-blend-exclusion { background-blend-mode: exclusion; }
+.uk-background-blend-hue { background-blend-mode: hue; }
+.uk-background-blend-saturation { background-blend-mode: saturation; }
+.uk-background-blend-color { background-blend-mode: color; }
+.uk-background-blend-luminosity { background-blend-mode: luminosity; }
 
 
 // Hooks