@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/utility.css

@@ -0,0 +1,494 @@
+/* ========================================================================
+   Component: Utility
+ ========================================================================== */
+/* Panel
+ ========================================================================== */
+.uk-panel {
+  box-sizing: border-box;
+  display: flow-root;
+  position: relative;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-panel > :last-child {
+  margin-bottom: 0;
+}
+
+/*
+ * Scrollable
+ */
+.uk-panel-scrollable {
+  border: var(--panel-scrollable-border-width) solid var(--panel-scrollable-border);
+  height: var(--panel-scrollable-height);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: var(--panel-scrollable-padding);
+  resize: both;
+}
+
+/* Clearfix
+ ========================================================================== */
+/*
+ * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
+ * 2. `table` is used again with `::after` because `clear` only works with block elements.
+ * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
+ */
+/* 1 */
+.uk-clearfix::before {
+  content: "";
+  display: table-cell;
+}
+
+/* 2 */
+.uk-clearfix::after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+/* Float
+ ========================================================================== */
+/*
+ * 1. Prevent content overflow
+ */
+.uk-float-left {
+  float: left;
+}
+
+.uk-float-right {
+  float: right;
+}
+
+/* 1 */
+[class*=uk-float-] {
+  max-width: 100%;
+}
+
+/* Overflow
+ ========================================================================== */
+.uk-overflow-hidden {
+  overflow: hidden;
+}
+
+/*
+ * Enable scrollbars if content is clipped
+ * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+ */
+.uk-overflow-auto {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.uk-overflow-auto > :last-child {
+  margin-bottom: 0;
+}
+
+/* Resize
+ ========================================================================== */
+.uk-resize {
+  resize: both;
+}
+
+.uk-resize-vertical {
+  resize: vertical;
+}
+
+/* Display
+ ========================================================================== */
+.uk-display-block {
+  display: block !important;
+}
+
+.uk-display-inline {
+  display: inline !important;
+}
+
+.uk-display-inline-block {
+  display: inline-block !important;
+}
+
+/* Inline
+ ========================================================================== */
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ * 5. Force new layer without creating a new stacking context
+ *    to fix 1px glitch when combined with overlays and transitions in Webkit
+ * 6. Clip child elements
+ */
+[class*=uk-inline] {
+  /* 5 */
+  -webkit-backface-visibility: hidden;
+  /* 1 */
+  display: inline-block;
+  /* 3 */
+  max-width: 100%;
+  /* 2 */
+  position: relative;
+  /* 4 */
+  vertical-align: middle;
+}
+
+.uk-inline-clip {
+  /* 6 */
+  overflow: hidden;
+}
+
+/* Responsive objects
+ ========================================================================== */
+/*
+ * Preserve original dimensions
+ * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
+ */
+.uk-preserve-width,
+.uk-preserve-width canvas,
+.uk-preserve-width img,
+.uk-preserve-width svg,
+.uk-preserve-width video {
+  max-width: none;
+}
+
+/*
+ * Responsiveness
+ * Corrects `max-width` and `max-height` behavior if padding and border are used
+ */
+.uk-responsive-width,
+.uk-responsive-height {
+  box-sizing: border-box;
+}
+
+/*
+ * 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
+ * 2. Auto scale the height. Only needed if `height` attribute is present
+ */
+.uk-responsive-width {
+  /* 2 */
+  height: auto;
+  /* 1 */
+  max-width: 100% !important;
+}
+
+/*
+ * 1. Set a maximum height. Only works if the parent element has a fixed height
+ * 2. Auto scale the width. Only needed if `width` attribute is present
+ * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
+ */
+.uk-responsive-height {
+  /* 1 */
+  max-height: 100%;
+  /* 3 */
+  max-width: none;
+  /* 2 */
+  width: auto;
+}
+
+/* Border
+ ========================================================================== */
+.uk-border-circle {
+  border-radius: 50%;
+}
+
+.uk-border-pill {
+  border-radius: 500px;
+}
+
+.uk-border-rounded {
+  border-radius: var(--border-rounded-border-radius);
+}
+
+/*
+ * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
+ */
+.uk-inline-clip[class*=uk-border-] {
+  -webkit-transform: translateZ(0);
+}
+
+/* Box-shadow
+ ========================================================================== */
+.uk-box-shadow-small {
+  box-shadow: var(--global-small-box-shadow);
+}
+
+.uk-box-shadow-medium {
+  box-shadow: var(--global-medium-box-shadow);
+}
+
+.uk-box-shadow-large {
+  box-shadow: var(--global-large-box-shadow);
+}
+
+.uk-box-shadow-xlarge {
+  box-shadow: var(--global-xlarge-box-shadow);
+}
+
+/*
+ * Hover
+ */
+[class*=uk-box-shadow-hover] {
+  transition: box-shadow var(--box-shadow-duration) var(--ease-in-out);
+}
+
+.uk-box-shadow-hover-small:hover {
+  box-shadow: var(--global-small-box-shadow);
+}
+
+.uk-box-shadow-hover-medium:hover {
+  box-shadow: var(--global-medium-box-shadow);
+}
+
+.uk-box-shadow-hover-large:hover {
+  box-shadow: var(--global-large-box-shadow);
+}
+
+.uk-box-shadow-hover-xlarge:hover {
+  box-shadow: var(--global-xlarge-box-shadow);
+}
+
+/* Box-shadow bottom
+ ========================================================================== */
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+@supports (filter: blur(0)) {
+  .uk-box-shadow-bottom {
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    vertical-align: middle;
+    z-index: 0;
+  }
+  .uk-box-shadow-bottom::after {
+    background: var(--box-shadow-bottom-background);
+    border-radius: var(--box-shadow-bottom-border-radius);
+    bottom: calc(var(--box-shadow-bottom-height) * -1);
+    content: "";
+    filter: blur(var(--box-shadow-bottom-blur));
+    /* 2 */
+    height: var(--box-shadow-bottom-height);
+    left: 0;
+    /* 1 */
+    position: absolute;
+    right: 0;
+    /* 3 */
+    will-change: filter;
+    z-index: -1;
+  }
+}
+/* Drop cap
+ ========================================================================== */
+/*
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+ * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
+ *    This doubles the `font-size` exponential when using the `em` unit.
+ */
+.uk-dropcap::first-letter,
+.uk-dropcap > p:first-of-type::first-letter {
+  display: block;
+  float: left;
+  font-size: var(--dropcap-font-size);
+  line-height: 1;
+  margin-right: var(--dropcap-margin-right);
+}
+
+/* 2 */
+@-moz-document url-prefix('') {
+  .uk-dropcap::first-letter,
+  .uk-dropcap > p:first-of-type::first-letter {
+    margin-top: 1.1%;
+  }
+}
+/* 3 */
+@supports (-ms-ime-align: auto) {
+  .uk-dropcap > p:first-of-type::first-letter {
+    font-size: 1em;
+  }
+}
+/* Logo
+ ========================================================================== */
+/*
+ * 1. Required for `a`
+ */
+.uk-logo {
+  color: var(--logo-color);
+  font-family: var(--logo-font-family), system-ui;
+  font-size: var(--logo-font-size);
+  /* 1 */
+  text-decoration: none;
+}
+
+/* Hover + Focus */
+.uk-logo:hover,
+.uk-logo:focus {
+  color: var(--logo-hover-color);
+  outline: none;
+  /* 1 */
+  text-decoration: none;
+}
+
+.uk-logo-inverse {
+  display: none;
+}
+
+/* Disabled State
+ ========================================================================== */
+.uk-disabled {
+  pointer-events: none;
+}
+
+/* Drag State
+ ========================================================================== */
+/*
+ * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
+ * 2. Fix dragging over iframes
+ */
+.uk-drag,
+.uk-drag * {
+  cursor: move;
+}
+
+/* 2 */
+.uk-drag iframe {
+  pointer-events: none;
+}
+
+/* Dragover State
+ ========================================================================== */
+/*
+ * Create a box-shadow when dragging a file over the upload area
+ */
+.uk-dragover {
+  box-shadow: var(--dragover-box-shadow);
+}
+
+/* Blend modes
+ ========================================================================== */
+.uk-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
+.uk-blend-screen {
+  mix-blend-mode: screen;
+}
+
+.uk-blend-overlay {
+  mix-blend-mode: overlay;
+}
+
+.uk-blend-darken {
+  mix-blend-mode: darken;
+}
+
+.uk-blend-lighten {
+  mix-blend-mode: lighten;
+}
+
+.uk-blend-color-dodge {
+  mix-blend-mode: color-dodge;
+}
+
+.uk-blend-color-burn {
+  mix-blend-mode: color-burn;
+}
+
+.uk-blend-hard-light {
+  mix-blend-mode: hard-light;
+}
+
+.uk-blend-soft-light {
+  mix-blend-mode: soft-light;
+}
+
+.uk-blend-difference {
+  mix-blend-mode: difference;
+}
+
+.uk-blend-exclusion {
+  mix-blend-mode: exclusion;
+}
+
+.uk-blend-hue {
+  mix-blend-mode: hue;
+}
+
+.uk-blend-saturation {
+  mix-blend-mode: saturation;
+}
+
+.uk-blend-color {
+  mix-blend-mode: color;
+}
+
+.uk-blend-luminosity {
+  mix-blend-mode: luminosity;
+}
+
+/* Transform
+========================================================================== */
+.uk-transform-center {
+  transform: translate(-50%, -50%);
+}
+
+/* Transform Origin
+========================================================================== */
+.uk-transform-origin-top-left {
+  transform-origin: 0 0;
+}
+
+.uk-transform-origin-top-center {
+  transform-origin: 50% 0;
+}
+
+.uk-transform-origin-top-right {
+  transform-origin: 100% 0;
+}
+
+.uk-transform-origin-center-left {
+  transform-origin: 0 50%;
+}
+
+.uk-transform-origin-center-right {
+  transform-origin: 100% 50%;
+}
+
+.uk-transform-origin-bottom-left {
+  transform-origin: 0 100%;
+}
+
+.uk-transform-origin-bottom-center {
+  transform-origin: 50% 100%;
+}
+
+.uk-transform-origin-bottom-right {
+  transform-origin: 100% 100%;
+}
+
+:root {
+  --panel-scrollable-height: 170px;
+  --panel-scrollable-padding: 10px;
+  --panel-scrollable-border-width: var(--global-border-width);
+  --panel-scrollable-border: var(--global-border);
+  --border-rounded-border-radius: 5px;
+  --box-shadow-duration: 0.1s;
+  --box-shadow-bottom-height: 30px;
+  --box-shadow-bottom-border-radius: 100%;
+  --box-shadow-bottom-background: #444;
+  --box-shadow-bottom-blur: 20px;
+  --dropcap-margin-right: 10px;
+  --dropcap-font-size: 3.75em;
+  --logo-font-size: var(--global-large-font-size);
+  --logo-font-family: var(--global-font-family);
+  --logo-color: var(--global-color);
+  --logo-hover-color: var(--global-color);
+  --dragover-box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
+  --inverse-logo-color: var(--inverse-global-color);
+  --inverse-logo-hover-color: var(--inverse-global-color);
+}

package/dist/assets/variables.css

@@ -0,0 +1 @@
+

package/dist/assets/vars.css

@@ -0,0 +1,89 @@
+:root,
+::after,
+::before {
+  --breakpoint-2xsmall: 320px;
+  --breakpoint-xsmall: 480px;
+  --breakpoint-small: 640px;
+  --breakpoint-medium: 960px;
+  --breakpoint-large: 1200px;
+  --breakpoint-xlarge: 1600px;
+  --breakpoint-2xlarge: 2560px;
+  --breakpoint-3xlarge: 3440px;
+  --breakpoint-2xsmall-max: 319px;
+  --breakpoint-xsmall-max: 639px;
+  --breakpoint-small-max: 959px;
+  --breakpoint-medium-max: 1199px;
+  --breakpoint-large-max: 1599px;
+  --breakpoint-xlarge-max: 2559px;
+  --breakpoint-2xlarge-max: 3439px;
+  --global-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --global-font-size: 16px;
+  --global-font-weight: 400;
+  --global-bold-font-weight: 600;
+  --global-line-height: 1.25;
+  --global-2xlarge-font-size: 2.625rem;
+  --global-xlarge-font-size: 2rem;
+  --global-large-font-size: 1.5rem;
+  --global-medium-font-size: 1.25rem;
+  --global-small-font-size: 0.875rem;
+  --global-xsmall-font-size: 0.75rem;
+  --global-2xsmall-font-size: 0.6875rem;
+  --global-color: #666;
+  --global-emphasis-color: #333;
+  --global-muted-color: #999;
+  --global-link-color: #1e87f0;
+  --global-link-hover-color: #0f6ecd;
+  --global-inverse-color: #fff;
+  --global-primary-color: #1e87f0;
+  --global-secondary-color: #222;
+  --global-tertiary-color: #b8b8b8;
+  --global-success-color: #1cb57c;
+  --global-warning-color: #ffbc60;
+  --global-danger-color: #f5604b;
+  --global-background: #fff;
+  --global-default-background: #e5e5e5;
+  --global-muted-background: #f8f8f8;
+  --global-primary-background: #1e87f0;
+  --global-secondary-background: #222;
+  --global-tertiary-background: #b8b8b8;
+  --global-success-background: #1cb57c;
+  --global-warning-background: #ffbc60;
+  --global-danger-background: #f5604b;
+  --global-border-width: 1px;
+  --global-border-style: solid;
+  --global-border: rgb(222.13, 222.13, 222.13);
+  --global-muted-border: #f8f8f8;
+  --global-primary-border: #1e87f0;
+  --global-secondary-border: #222;
+  --global-tertiary-border: #b8b8b8;
+  --global-success-border: #1cb57c;
+  --global-warning-border: #ffbc60;
+  --global-danger-border: #f5604b;
+  --global-border-radius: 0;
+  --global-small-border-radius: 0;
+  --global-xsmall-border-radius: 0;
+  --global-small-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --global-medium-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  --global-large-box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+  --global-xlarge-box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
+  --global-margin: 20px;
+  --global-xsmall-margin: 5px;
+  --global-small-margin: 10px;
+  --global-medium-margin: 40px;
+  --global-large-margin: 70px;
+  --global-xlarge-margin: 140px;
+  --global-gutter: 30px;
+  --global-xsmall-gutter: 5px;
+  --global-small-gutter: 15px;
+  --global-medium-gutter: 40px;
+  --global-large-gutter: 70px;
+  --global-xlarge-gutter: 100px;
+  --global-2xlarge-gutter: 140px;
+  --global-control-height: 40px;
+  --global-control-xsmall-height: 20px;
+  --global-control-small-height: 30px;
+  --global-control-medium-height: 50px;
+  --global-control-large-height: 60px;
+  --global-control-xlarge-height: 70px;
+  --global-z-index: 1000;
+}

package/dist/assets/visibility.css

@@ -0,0 +1,140 @@
+/* ========================================================================
+   Component: Visibility
+ ========================================================================== */
+/*
+ * Hidden
+ * `hidden` attribute also set here to make it stronger
+ */
+[hidden],
+.uk-hidden {
+  display: none !important;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-hidden\@s {
+    display: none !important;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-hidden\@m {
+    display: none !important;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-hidden\@l {
+    display: none !important;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-hidden\@xl {
+    display: none !important;
+  }
+}
+/*
+ * Visible
+ */
+/* Phone portrait and smaller */
+@media (max-width: 639px) {
+  .uk-visible\@s {
+    display: none !important;
+  }
+}
+/* Phone landscape and smaller */
+@media (max-width: 959px) {
+  .uk-visible\@m {
+    display: none !important;
+  }
+}
+/* Tablet landscape and smaller */
+@media (max-width: 1199px) {
+  .uk-visible\@l {
+    display: none !important;
+  }
+}
+/* Desktop and smaller */
+@media (max-width: 1599px) {
+  .uk-visible\@xl {
+    display: none !important;
+  }
+}
+/* Visibility
+ ========================================================================== */
+.uk-invisible {
+  visibility: hidden !important;
+}
+
+/* Toggle (Hover + Focus)
+ ========================================================================== */
+/*
+ * Hidden
+ * 1. The toggle is triggered on touch devices using `:focus` and tabindex
+ * 2. The target stays visible if any element within receives focus through keyboard
+ *    Doesn't work in Edge, yet.
+ * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ *
+ */
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-within) {
+  height: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  /* 3 */
+  position: absolute !important;
+  width: 0 !important;
+}
+
+/*
+ * Invisible
+ */
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover, :focus) .uk-invisible-hover:not(:focus-within) {
+  /* 3 */
+  opacity: 0 !important;
+}
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+.uk-visible-toggle {
+  /* 1 */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+.uk-visible-toggle:focus {
+  outline: none;
+}
+
+/* Touch
+ ========================================================================== */
+/*
+ * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
+ * Works on mobile browsers: Safari, Chrome and Android browser
+ */
+@media (pointer: coarse) {
+  .uk-hidden-touch {
+    display: none !important;
+  }
+}
+/*
+ * Hide if primary pointing device is accurate, e.g. mouse.
+ * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
+ * 2. Reset if supported
+ */
+/* 1 */
+.uk-hidden-notouch {
+  display: none !important;
+}
+
+@media (pointer: coarse) {
+  .uk-hidden-notouch {
+    display: block !important;
+  }
+}