@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/totop.css

@@ -0,0 +1,32 @@
+/* ========================================================================
+   Component: Totop
+ ========================================================================== */
+/*
+ * Addopts `uk-icon`
+ */
+.uk-totop {
+  color: var(--totop-color);
+  padding: var(--totop-padding);
+}
+
+/* Hover + Focus */
+.uk-totop:hover,
+.uk-totop:focus {
+  color: var(--totop-hover-color);
+  outline: none;
+}
+
+/* OnClick */
+.uk-totop:active {
+  color: var(--totop-active-color);
+}
+
+:root {
+  --totop-padding: 5px;
+  --totop-color: var(--global-muted-color);
+  --totop-hover-color: var(--global-color);
+  --totop-active-color: var(--global-emphasis-color);
+  --inverse-totop-color: var(--inverse-global-muted-color);
+  --inverse-totop-hover-color: var(--inverse-global-color);
+  --inverse-totop-active-color: var(--inverse-global-emphasis-color);
+}

package/dist/assets/transition.css

@@ -0,0 +1,154 @@
+/* ========================================================================
+   Component: Transition
+ ========================================================================== */
+/* Toggle (Hover + Focus)
+ ========================================================================== */
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+.uk-transition-toggle {
+  /* 1 */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+.uk-transition-toggle:focus {
+  outline: none;
+}
+
+/* Transitions
+ ========================================================================== */
+/*
+ * The toggle is triggered on touch devices by two methods:
+ * 1. Using `:focus` and tabindex
+ * 2. Using `:hover` and a `touchstart` event listener registered on the document
+ *    (Doesn't work on Surface touch devices)
+ *
+ * Note: Transitions don't work with `uk-position-center-*` classes because they also use `transform`,
+ *       therefore it's recommended to use an extra `div` for the transition.
+ */
+.uk-transition-fade,
+[class*=uk-transition-scale],
+[class*=uk-transition-slide] {
+  opacity: 0;
+  transition: var(--transition-duration) var(--ease-out);
+  transition-property: opacity, transform, filter;
+}
+
+/*
+ * Fade
+ */
+.uk-transition-toggle:hover .uk-transition-fade,
+.uk-transition-toggle:focus .uk-transition-fade,
+.uk-transition-active.uk-active .uk-transition-fade {
+  opacity: 1;
+}
+
+/*
+ * Scale
+ */
+.uk-transition-scale-up {
+  transform: scale(1, 1);
+}
+
+.uk-transition-scale-down {
+  transform: scale(var(--transition-scale), var(--transition-scale));
+}
+
+/* Show */
+.uk-transition-toggle:hover .uk-transition-scale-up,
+.uk-transition-toggle:focus .uk-transition-scale-up,
+.uk-transition-active.uk-active .uk-transition-scale-up {
+  opacity: 1;
+  transform: scale(var(--transition-scale), var(--transition-scale));
+}
+
+.uk-transition-toggle:hover .uk-transition-scale-down,
+.uk-transition-toggle:focus .uk-transition-scale-down,
+.uk-transition-active.uk-active .uk-transition-scale-down {
+  opacity: 1;
+  transform: scale(1, 1);
+}
+
+/*
+ * Slide
+ */
+.uk-transition-slide-top {
+  transform: translateY(-100%);
+}
+
+.uk-transition-slide-bottom {
+  transform: translateY(100%);
+}
+
+.uk-transition-slide-left {
+  transform: translateX(-100%);
+}
+
+.uk-transition-slide-right {
+  transform: translateX(100%);
+}
+
+.uk-transition-slide-top-small {
+  transform: translateY(calc(var(--transition-slide-small-translate) * -1));
+}
+
+.uk-transition-slide-bottom-small {
+  transform: translateY(var(--transition-slide-small-translate));
+}
+
+.uk-transition-slide-left-small {
+  transform: translateX(calc(var(--transition-slide-small-translate) * -1));
+}
+
+.uk-transition-slide-right-small {
+  transform: translateX(var(--transition-slide-small-translate));
+}
+
+.uk-transition-slide-top-medium {
+  transform: translateY(calc(var(--transition-slide-medium-translate) * -1));
+}
+
+.uk-transition-slide-bottom-medium {
+  transform: translateY(var(--transition-slide-medium-translate));
+}
+
+.uk-transition-slide-left-medium {
+  transform: translateX(calc(var(--transition-slide-medium-translate) * -1));
+}
+
+.uk-transition-slide-right-medium {
+  transform: translateX(var(--transition-slide-medium-translate));
+}
+
+/* Show */
+.uk-transition-toggle:hover [class*=uk-transition-slide],
+.uk-transition-toggle:focus [class*=uk-transition-slide],
+.uk-transition-active.uk-active [class*=uk-transition-slide] {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
+/* Opacity modifier
+ ========================================================================== */
+.uk-transition-opaque {
+  opacity: 1;
+}
+
+/* Duration modifiers
+ ========================================================================== */
+.uk-transition-slow {
+  transition-duration: var(--transition-slow-duration);
+}
+
+:root {
+  --transition-duration: 0.3s;
+  --transition-fast-duration: 0.1s;
+  --transition-medium-fast-duration: 0.2s;
+  --transition-slow-duration: 0.7s;
+  --transition-scale: 1.1;
+  --transition-slide-small-translate: 10px;
+  --transition-slide-medium-translate: 50px;
+}