@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/margin.css

@@ -0,0 +1,362 @@
+/* ========================================================================
+   Component: Margin
+ ========================================================================== */
+/*
+ * Default
+ */
+.uk-margin {
+  margin-bottom: var(--margin);
+}
+
+* + .uk-margin {
+  margin-top: var(--margin) !important;
+}
+
+.uk-margin-top {
+  margin-top: var(--margin) !important;
+}
+
+.uk-margin-bottom {
+  margin-bottom: var(--margin) !important;
+}
+
+.uk-margin-left {
+  margin-left: var(--margin) !important;
+}
+
+.uk-margin-right {
+  margin-right: var(--margin) !important;
+}
+
+.uk-margin-xsmall {
+  margin-bottom: var(--xsmall-margin);
+}
+
+* + .uk-margin-xsmall {
+  margin-top: var(--xsmall-margin) !important;
+}
+
+.uk-margin-xsmall-top {
+  margin-top: var(--xsmall-margin) !important;
+}
+
+.uk-margin-xsmall-bottom {
+  margin-bottom: var(--xsmall-margin) !important;
+}
+
+.uk-margin-xsmall-left {
+  margin-left: var(--xsmall-margin) !important;
+}
+
+.uk-margin-xsmall-right {
+  margin-right: var(--xsmall-margin) !important;
+}
+
+/* Small
+ ========================================================================== */
+.uk-margin-small {
+  margin-bottom: var(--small-margin);
+}
+
+* + .uk-margin-small {
+  margin-top: var(--small-margin) !important;
+}
+
+.uk-margin-small-top {
+  margin-top: var(--small-margin) !important;
+}
+
+.uk-margin-small-bottom {
+  margin-bottom: var(--small-margin) !important;
+}
+
+.uk-margin-small-left {
+  margin-left: var(--small-margin) !important;
+}
+
+.uk-margin-small-right {
+  margin-right: var(--small-margin) !important;
+}
+
+/* Medium
+ ========================================================================== */
+.uk-margin-medium {
+  margin-bottom: var(--medium-margin);
+}
+
+* + .uk-margin-medium {
+  margin-top: var(--medium-margin) !important;
+}
+
+.uk-margin-medium-top {
+  margin-top: var(--medium-margin) !important;
+}
+
+.uk-margin-medium-bottom {
+  margin-bottom: var(--medium-margin) !important;
+}
+
+.uk-margin-medium-left {
+  margin-left: var(--medium-margin) !important;
+}
+
+.uk-margin-medium-right {
+  margin-right: var(--medium-margin) !important;
+}
+
+/* Large
+ ========================================================================== */
+.uk-margin-large {
+  margin-bottom: var(--large-margin);
+}
+
+* + .uk-margin-large {
+  margin-top: var(--large-margin) !important;
+}
+
+.uk-margin-large-top {
+  margin-top: var(--large-margin) !important;
+}
+
+.uk-margin-large-bottom {
+  margin-bottom: var(--large-margin) !important;
+}
+
+.uk-margin-large-left {
+  margin-left: var(--large-margin) !important;
+}
+
+.uk-margin-large-right {
+  margin-right: var(--large-margin) !important;
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-margin-large {
+    margin-bottom: var(--large-margin-l);
+  }
+  * + .uk-margin-large {
+    margin-top: var(--large-margin-l) !important;
+  }
+  .uk-margin-large-top {
+    margin-top: var(--large-margin-l) !important;
+  }
+  .uk-margin-large-bottom {
+    margin-bottom: var(--large-margin-l) !important;
+  }
+  .uk-margin-large-left {
+    margin-left: var(--large-margin-l) !important;
+  }
+  .uk-margin-large-right {
+    margin-right: var(--large-margin-l) !important;
+  }
+}
+/* XLarge
+ ========================================================================== */
+.uk-margin-xlarge {
+  margin-bottom: var(--xlarge-margin);
+}
+
+* + .uk-margin-xlarge {
+  margin-top: var(--xlarge-margin) !important;
+}
+
+.uk-margin-xlarge-top {
+  margin-top: var(--xlarge-margin) !important;
+}
+
+.uk-margin-xlarge-bottom {
+  margin-bottom: var(--xlarge-margin) !important;
+}
+
+.uk-margin-xlarge-left {
+  margin-left: var(--xlarge-margin) !important;
+}
+
+.uk-margin-xlarge-right {
+  margin-right: var(--xlarge-margin) !important;
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-margin-xlarge {
+    margin-bottom: var(--xlarge-margin-l);
+  }
+  * + .uk-margin-xlarge {
+    margin-top: var(--xlarge-margin-l) !important;
+  }
+  .uk-margin-xlarge-top {
+    margin-top: var(--xlarge-margin-l) !important;
+  }
+  .uk-margin-xlarge-bottom {
+    margin-bottom: var(--xlarge-margin-l) !important;
+  }
+  .uk-margin-xlarge-left {
+    margin-left: var(--xlarge-margin-l) !important;
+  }
+  .uk-margin-xlarge-right {
+    margin-right: var(--xlarge-margin-l) !important;
+  }
+}
+/* Auto
+ ========================================================================== */
+.uk-margin-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.uk-margin-auto-top {
+  margin-top: auto !important;
+}
+
+.uk-margin-auto-bottom {
+  margin-bottom: auto !important;
+}
+
+.uk-margin-auto-left {
+  margin-left: auto !important;
+}
+
+.uk-margin-auto-right {
+  margin-right: auto !important;
+}
+
+.uk-margin-auto-vertical {
+  margin-bottom: auto !important;
+  margin-top: auto !important;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-margin-auto\@s {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  .uk-margin-auto-left\@s {
+    margin-left: auto !important;
+  }
+  .uk-margin-auto-right\@s {
+    margin-right: auto !important;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-margin-auto\@m {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  .uk-margin-auto-left\@m {
+    margin-left: auto !important;
+  }
+  .uk-margin-auto-right\@m {
+    margin-right: auto !important;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-margin-auto\@l {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  .uk-margin-auto-left\@l {
+    margin-left: auto !important;
+  }
+  .uk-margin-auto-right\@l {
+    margin-right: auto !important;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-margin-auto\@xl {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  .uk-margin-auto-left\@xl {
+    margin-left: auto !important;
+  }
+  .uk-margin-auto-right\@xl {
+    margin-right: auto !important;
+  }
+}
+/* Remove
+ ========================================================================== */
+.uk-margin-remove {
+  margin: 0 !important;
+}
+
+.uk-margin-remove-top {
+  margin-top: 0 !important;
+}
+
+.uk-margin-remove-bottom {
+  margin-bottom: 0 !important;
+}
+
+.uk-margin-remove-left {
+  margin-left: 0 !important;
+}
+
+.uk-margin-remove-right {
+  margin-right: 0 !important;
+}
+
+.uk-margin-remove-vertical {
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+}
+
+.uk-margin-remove-adjacent + *,
+.uk-margin-remove-first-child > :first-child {
+  margin-top: 0 !important;
+}
+
+.uk-margin-remove-last-child > :last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-margin-remove-left\@s {
+    margin-left: 0 !important;
+  }
+  .uk-margin-remove-right\@s {
+    margin-right: 0 !important;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-margin-remove-left\@m {
+    margin-left: 0 !important;
+  }
+  .uk-margin-remove-right\@m {
+    margin-right: 0 !important;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-margin-remove-left\@l {
+    margin-left: 0 !important;
+  }
+  .uk-margin-remove-right\@l {
+    margin-right: 0 !important;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-margin-remove-left\@xl {
+    margin-left: 0 !important;
+  }
+  .uk-margin-remove-right\@xl {
+    margin-right: 0 !important;
+  }
+}
+:root {
+  --margin: var(--global-margin);
+  --xsmall-margin: var(--global-xsmall-margin);
+  --small-margin: var(--global-small-margin);
+  --medium-margin: var(--global-medium-margin);
+  --large-margin: var(--global-medium-margin);
+  --large-margin-l: var(--global-large-margin);
+  --xlarge-margin: var(--global-large-margin);
+  --xlarge-margin-l: var(--global-xlarge-margin);
+}

package/dist/assets/marker.css

@@ -0,0 +1,28 @@
+/* ========================================================================
+   Component: Marker
+ ========================================================================== */
+/*
+ * Addopts `uk-icon`
+ */
+.uk-marker {
+  background: var(--marker-background);
+  color: var(--marker-color);
+  padding: var(--marker-padding);
+}
+
+/* Hover + Focus */
+.uk-marker:hover,
+.uk-marker:focus {
+  color: var(--marker-hover-color);
+  outline: none;
+}
+
+:root {
+  --marker-padding: 5px;
+  --marker-background: var(--global-secondary-background);
+  --marker-color: var(--global-inverse-color);
+  --marker-hover-color: var(--global-inverse-color);
+  --inverse-marker-background: var(--global-muted-background);
+  --inverse-marker-color: var(--global-color);
+  --inverse-marker-hover-color: var(--global-color);
+}

package/dist/assets/mixin.css

@@ -0,0 +1 @@
+

package/dist/assets/mixins.css

@@ -0,0 +1 @@
+

package/dist/assets/modal.css

@@ -0,0 +1,227 @@
+/* ========================================================================
+   Component: Modal
+ ========================================================================== */
+.uk-modal-wrap {
+  inset: 0;
+  outline: 0 none;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
+  position: fixed;
+  z-index: var(--modal-z-index);
+}
+
+.uk-modal {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0 auto;
+  max-width: 100%;
+  pointer-events: none;
+  width: var(--modal-width);
+  z-index: var(--modal-z-index);
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-modal-wrap {
+    padding: var(--modal-padding-vertical-s) var(--modal-padding-horizontal-s);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-modal-wrap {
+    padding-left: var(--modal-padding-horizontal-m);
+    padding-right: var(--modal-padding-horizontal-m);
+  }
+}
+/* Page
+ ========================================================================== */
+/*
+ * Prevent scrollbars
+ */
+.uk-modal-page {
+  overflow: clip;
+}
+
+/* Dialog
+ ========================================================================== */
+/*
+ * 1. Create position context for spinner and close button
+ * 2. Dimensions
+ * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
+ *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
+ */
+.uk-modal-container {
+  /* 4 */
+  background: var(--modal-background);
+  /* 2 */
+  box-sizing: border-box;
+  max-width: calc(100% - 0.01px);
+  pointer-events: auto;
+  position: relative;
+}
+
+/* Mask
+ ========================================================================== */
+/*
+ * 1. Set position
+ * 2. Mask the background page
+ */
+.uk-modal-mask {
+  /* 2 */
+  background: var(--modal-mask-background);
+  height: 100%;
+  inset: 0;
+  /* 1 */
+  position: fixed;
+  z-index: var(--modal-z-index);
+}
+
+/* Centered modifier
+ ========================================================================== */
+.uk-modal-centered {
+  align-items: center;
+  display: flex;
+}
+
+/* Size modifier
+ ========================================================================== */
+/*
+ * Full size
+ * 1. Remove padding and background from modal
+ * 2. Reset all default declarations from modal dialog
+ */
+/* 1 */
+.uk-modal-full {
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* 2 */
+.uk-modal-full .uk-modal {
+  height: 100%;
+  margin: 0;
+  max-width: 100%;
+  transform: translateY(0);
+  width: 100%;
+}
+
+/* Sections
+ ========================================================================== */
+.uk-modal-body {
+  display: flow-root;
+  padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
+}
+
+.uk-modal-header {
+  background: var(--modal-header-background);
+  display: flow-root;
+  padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
+}
+
+.uk-modal-footer {
+  background: var(--modal-footer-background);
+  display: flow-root;
+  padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-modal-body > :last-child,
+.uk-modal-header > :last-child,
+.uk-modal-footer > :last-child {
+  margin-bottom: 0;
+}
+
+/* Title
+ ========================================================================== */
+.uk-modal-title {
+  font-size: var(--modal-title-font-size);
+  line-height: var(--modal-title-line-height);
+}
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+[class*=uk-modal-close-] {
+  --icon-size: 24px;
+  box-sizing: content-box;
+  cursor: pointer;
+  padding: var(--modal-close-padding);
+  position: absolute;
+  right: var(--modal-close-position);
+  top: var(--modal-close-position);
+  z-index: var(--modal-z-index);
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+[class*=uk-modal-close-]:first-child + * {
+  margin-top: 0;
+}
+
+/*
+ * Hover
+ */
+/*
+ * Default
+ */
+/*
+ * Outside
+ * 1. Prevent scrollbar on small devices
+ */
+.uk-modal-close-outside {
+  color: var(--modal-close-outside-color);
+  /* 1 */
+  right: calc(var(--modal-close-padding) * -1);
+  top: var(--modal-close-outside-position);
+  transform: translate(0, calc(var(--modal-close-outside-translate) * -1));
+}
+
+.uk-modal-close-outside:hover {
+  color: var(--modal-close-outside-hover-color);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  /* 1 */
+  .uk-modal-close-outside {
+    right: var(--modal-close-outside-position);
+    transform: translate(var(--modal-close-outside-translate), calc(var(--modal-close-outside-translate) * -1));
+  }
+}
+/*
+ * Full
+ */
+:root {
+  --modal-z-index: calc(var(--global-z-index) + 10);
+  --modal-mask-background: rgba(0, 0, 0, 0.3);
+  --modal-background: var(--global-background);
+  --modal-padding-horizontal: 15px;
+  --modal-padding-horizontal-s: var(--global-gutter);
+  --modal-padding-horizontal-m: var(--global-medium-gutter);
+  --modal-padding-vertical: var(--modal-padding-horizontal);
+  --modal-padding-vertical-s: 50px;
+  --modal-width: 600px;
+  --modal-body-padding-horizontal: var(--global-gutter);
+  --modal-body-padding-vertical: var(--global-gutter);
+  --modal-header-background: var(--global-muted-background);
+  --modal-header-padding-horizontal: var(--global-gutter);
+  --modal-header-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
+  --modal-footer-background: var(--global-muted-background);
+  --modal-footer-padding-horizontal: var(--global-gutter);
+  --modal-footer-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
+  --modal-title-font-size: var(--global-xlarge-font-size);
+  --modal-title-line-height: 1.3;
+  --modal-close-position: var(--global-small-margin);
+  --modal-close-padding: 5px;
+  --modal-close-outside-position: 0;
+  --modal-close-outside-translate: 100%;
+  --modal-close-outside-color: white;
+  --modal-close-outside-hover-color: var(--global-inverse-color);
+}