@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/height.css

@@ -0,0 +1,63 @@
+/* ========================================================================
+   Component: Height
+ ========================================================================== */
+[class*=uk-height] {
+  box-sizing: border-box;
+}
+
+/*
+ * Only works if parent element has a height set
+ */
+.uk-height-1-1 {
+  height: 100%;
+}
+
+/*
+ * Useful to create image teasers
+ */
+.uk-height-viewport {
+  min-height: 100vh;
+}
+
+/*
+ * Pixel
+ * Useful for `overflow: auto`
+ */
+.uk-height-small {
+  height: var(--height-small-height);
+}
+
+.uk-height-medium {
+  height: var(--height-medium-height);
+}
+
+.uk-height-large {
+  height: var(--height-large-height);
+}
+
+.uk-height-xlarge {
+  height: var(--height-large-height);
+}
+
+.uk-height-max-small {
+  max-height: var(--height-small-height);
+}
+
+.uk-height-max-medium {
+  max-height: var(--height-medium-height);
+}
+
+.uk-height-max-large {
+  max-height: var(--height-large-height);
+}
+
+.uk-height-max-xlarge {
+  max-height: var(--height-xlarge-height);
+}
+
+:root {
+  --height-small-height: 150px;
+  --height-medium-height: 300px;
+  --height-large-height: 450px;
+  --height-xlarge-height: 600px;
+}

package/dist/assets/icon.css

@@ -0,0 +1,188 @@
+/* ========================================================================
+   Component: Icon
+ ========================================================================== */
+/*
+ * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Remove border-radius in Chrome.
+ * 4. Address `overflow` set to `hidden` in IE.
+ * 5. Correct `font` properties and `color` not being inherited for `button`.
+ * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 7. Remove default `button` padding and background color
+ * 8. Style
+ * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
+ * 10. Let the container fit the height of the icon
+ */
+.uk-icon {
+  background-color: transparent; /* 7 */
+  border: none; /* 2 */
+  border-radius: 0; /* 3 */
+  color: inherit;
+  display: inline-block; /* 8 */
+  fill: currentColor; /* 9 */
+  font: inherit; /* 5 */
+  line-height: 0; /* 10 */
+  margin: 0; /* 1 */
+  overflow: visible; /* 4 */
+  padding: 0; /* 7 */
+  text-transform: none; /* 6 */
+}
+
+/* Required for `button`. */
+button.uk-icon:not(:disabled) {
+  cursor: pointer;
+}
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+.uk-icon::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/*
+ * Set the fill and stroke color of all SVG elements to the current text color
+ */
+.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
+  fill: currentColor;
+}
+
+.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
+  stroke: currentColor;
+}
+
+/*
+ * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
+ */
+.uk-icon > * {
+  transform: translate(0, 0);
+}
+
+/* Image modifier
+ ========================================================================== */
+/*
+ * Display images in icon dimensions
+ */
+.uk-icon-image {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: var(--icon-image-size);
+  vertical-align: middle;
+  width: var(--icon-image-size);
+}
+
+/* Material UI icons modifier
+ ========================================================================== */
+.uk-icon-material:not(.uk-icon-button) {
+  height: var(--icon-size, 1.4rem);
+  min-width: var(--icon-size, 1.4rem);
+  width: var(--icon-size, 1.4rem);
+}
+.uk-icon-material i {
+  direction: ltr;
+  display: inline-block;
+  font-family: "Material Icons Outlined";
+  /* Support for IE. */
+  font-feature-settings: "liga";
+  font-size: var(--icon-size, 1.4rem);
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  text-decoration: none;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.uk-icon-material i.uk-icon-round {
+  font-family: "Material Icons Round";
+}
+
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Link
+ */
+.uk-icon-link {
+  color: var(--icon-link-color);
+}
+
+.uk-icon-link:hover,
+.uk-icon-link:focus {
+  color: var(--icon-link-hover-color);
+  outline: none;
+  text-decoration: none;
+}
+
+/* OnClick + Active */
+.uk-icon-link:active,
+.uk-active > .uk-icon-link {
+  color: var(--icon-link-active-color);
+}
+
+/*
+ * Button
+ * 1. Center icon vertically and horizontally
+ */
+.uk-icon-button {
+  align-items: center; /* 1 */
+  background: var(--icon-button-background);
+  border-radius: var(--icon-button-border-radius);
+  box-sizing: border-box;
+  color: var(--icon-button-color);
+  display: inline-flex; /* 1 */
+  height: var(--icon-button-size);
+  justify-content: center; /* 1 */
+  vertical-align: middle;
+  width: var(--icon-button-size);
+}
+
+/* Hover + Focus */
+.uk-icon-button:hover,
+.uk-icon-button:focus {
+  background-color: var(--icon-button-hover-background);
+  color: var(--icon-button-hover-color);
+  outline: none;
+  text-decoration: none;
+}
+
+/* OnClick + Active */
+.uk-icon-button:active,
+.uk-active > .uk-icon-button {
+  background-color: var(--icon-button-active-background);
+  color: var(--icon-button-active-color);
+}
+
+:root {
+  --icon-image-size: 20px;
+  --icon-link-color: var(--global-muted-color);
+  --icon-link-hover-color: var(--global-color);
+  --icon-link-active-color: rgb(96.9, 96.9, 96.9);
+  --icon-button-size: 36px;
+  --icon-button-border-radius: 500px;
+  --icon-button-background: var(--global-muted-background);
+  --icon-button-color: var(--global-muted-color);
+  --icon-button-hover-background: rgb(235.6, 235.6, 235.6);
+  --icon-button-hover-color: var(--global-color);
+  --icon-button-active-background: rgb(223.2, 223.2, 223.2);
+  --icon-button-active-color: var(--global-color);
+  --inverse-icon-link-color: var(--inverse-global-muted-color);
+  --inverse-icon-link-hover-color: var(--inverse-global-color);
+  --inverse-icon-link-active-color: var(--inverse-global-color);
+  --inverse-icon-button-background: var(--inverse-global-muted-background);
+  --inverse-icon-button-color: var(--inverse-global-muted-color);
+  --inverse-icon-button-hover-background: rgba(242.25, 242.25, 242.25, 0.1);
+  --inverse-icon-button-hover-color: var(--inverse-global-color);
+  --inverse-icon-button-active-background: rgba(229.5, 229.5, 229.5, 0.1);
+  --inverse-icon-button-active-color: var(--inverse-global-color);
+}

package/dist/assets/iconnav.css

@@ -0,0 +1,83 @@
+/* ========================================================================
+   Component: Iconnav
+ ========================================================================== */
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+.uk-iconnav {
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+  list-style: none;
+  /* 2 */
+  margin: 0 0 0 calc(var(--iconnav-margin-horizontal) * -1);
+  padding: 0;
+}
+
+/*
+ * Space is allocated based on content dimensions, but shrinks: 0 1 auto
+ * 1. Gutter
+ */
+.uk-iconnav > * {
+  /* 1 */
+  padding-left: var(--iconnav-margin-horizontal);
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * Items must target `a` elements to exclude other elements (e.g. dropdowns)
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+.uk-iconnav > * > a {
+  /* 2 */
+  color: var(--iconnav-item-color);
+  /* 1 */
+  display: block;
+}
+
+/* Hover + Focus */
+.uk-iconnav > * > a:hover,
+.uk-iconnav > * > a:focus {
+  color: var(--iconnav-item-hover-color);
+  outline: none;
+}
+
+/* Active */
+.uk-iconnav > .uk-active > a {
+  color: var(--iconnav-item-active-color);
+}
+
+/* Modifier: 'uk-iconnav-vertical'
+ ========================================================================== */
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+.uk-iconnav-vertical {
+  /* 1 */
+  flex-direction: column;
+  /* 2 */
+  margin-left: 0;
+  margin-top: calc(var(--iconnav-margin-vertical) * -1);
+}
+
+/* 2 */
+.uk-iconnav-vertical > * {
+  padding-left: 0;
+  padding-top: var(--iconnav-margin-vertical);
+}
+
+:root {
+  --iconnav-margin-horizontal: var(--global-small-margin);
+  --iconnav-margin-vertical: var(--iconnav-margin-horizontal);
+  --iconnav-item-color: var(--global-muted-color);
+  --iconnav-item-hover-color: var(--global-color);
+  --iconnav-item-active-color: var(--global-color);
+  --inverse-iconnav-item-color: var(--inverse-global-muted-color);
+  --inverse-iconnav-item-hover-color: var(--inverse-global-color);
+  --inverse-iconnav-item-active-color: var(--inverse-global-color);
+}

package/dist/assets/input-number.css

@@ -0,0 +1,89 @@
+/* ========================================================================
+   Component: Number
+ ========================================================================== */
+.uk-number-wrapper {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+.uk-number-input {
+  -webkit-appearance: none;
+  background: none;
+  border: 0 none;
+  color: inherit;
+  display: inline-block;
+  font: inherit;
+  max-width: 100%;
+  outline: 0 none;
+  overflow: visible;
+  padding: 0;
+  vertical-align: middle;
+  width: 100%;
+}
+
+.uk-number-input:focus {
+  outline: 0 none;
+}
+
+.uk-number-input[type=number]::-webkit-inner-spin-button,
+.uk-number-input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  height: auto;
+  margin: 0;
+}
+
+.uk-number-input::-moz-placeholder {
+  opacity: 1;
+}
+
+.uk-number-input::-ms-input-placeholder {
+  color: var(--control-placeholder-color) !important;
+}
+
+.uk-number-input::placeholder {
+  color: var(--control-placeholder-color);
+}
+
+.uk-number-actions {
+  background-color: transparent;
+  border: 0 none;
+  border-radius: 0;
+  height: calc(2em - var(--control-border-width) * 2);
+  opacity: 1;
+  order: 99;
+}
+
+.uk-number-action {
+  align-items: center;
+  border: 0;
+  border-radius: 0;
+  display: flex;
+  height: 50%;
+}
+
+.uk-number-action:active .uk-number-action-up-inner,
+.uk-number-action:active .uk-number-action-down-inner {
+  transform: scale(0.9);
+}
+
+.uk-number-action .uk-number-action-up-inner,
+.uk-number-action .uk-number-action-down-inner {
+  color: var(--control-icon-color);
+  cursor: pointer;
+  transform: none;
+  transform-origin: 50% 50%;
+}
+.uk-number-action .uk-number-action-up-inner:hover,
+.uk-number-action .uk-number-action-down-inner:hover {
+  color: var(--control-icon-hover-color);
+}
+
+/* Control
+ ========================================================================== */
+.uk-control-number.uk-disabled .uk-number-actions,
+.uk-control-number.uk-readonly .uk-number-actions {
+  display: none;
+}

package/dist/assets/input-password.css

@@ -0,0 +1,24 @@
+/* ========================================================================
+   Component: Password
+ ========================================================================== */
+.uk-control-password,
+.uk-control-text {
+  /*
+   * Icon
+   */
+}
+.uk-control-password .uk-control-password-icon,
+.uk-control-text .uk-control-password-icon {
+  color: var(--control-icon-color);
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all var(--transition-duration);
+}
+.uk-control-password .uk-control-password-icon:hover,
+.uk-control-text .uk-control-password-icon:hover {
+  color: var(--control-icon-hover-color);
+}
+.uk-control-password .uk-control-password.uk-disabled .uk-control-password-icon,
+.uk-control-text .uk-control-password.uk-disabled .uk-control-password-icon {
+  display: none;
+}