@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/cjs/styles/tooltip.scss

@@ -36,6 +36,9 @@
  */
 
 .uk-tooltip {
+    --uk-position-offset: var(--tooltip-margin);
+    --uk-position-viewport-offset: 10;
+
     /* 5 */
     background: var(--tooltip-background);
     border-radius: var(--tooltip-border-radius);
@@ -65,16 +68,6 @@
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: calc(var(--tooltip-margin) * -1); }
-[class*='uk-tooltip-bottom'] { margin-top: var(--tooltip-margin); }
-[class*='uk-tooltip-left'] { margin-left: calc(var(--tooltip-margin) * -1); }
-[class*='uk-tooltip-right'] { margin-left: var(--tooltip-margin); }
-
-
 // Hooks
 // ========================================================================
 

package/dist/cjs/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);