@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/comment.css

@@ -0,0 +1,87 @@
+/* ========================================================================
+   Component: Comment
+ ========================================================================== */
+/* Sections
+ ========================================================================== */
+.uk-comment-body {
+  display: flow-root;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.uk-comment-header {
+  display: flow-root;
+  margin-bottom: var(--comment-header-margin-bottom);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-comment-body > :last-child,
+.uk-comment-header > :last-child {
+  margin-bottom: 0;
+}
+
+/* Title
+ ========================================================================== */
+.uk-comment-title {
+  font-size: var(--comment-title-font-size);
+  line-height: var(--comment-title-line-height);
+}
+
+/* Meta
+ ========================================================================== */
+.uk-comment-meta {
+  color: var(--comment-meta-color);
+  font-size: var(--comment-meta-font-size);
+  line-height: var(--comment-meta-line-height);
+}
+
+/* Avatar
+ ========================================================================== */
+/* List
+ ========================================================================== */
+.uk-comment-list {
+  list-style: none;
+  padding: 0;
+}
+
+/* Adjacent siblings */
+.uk-comment-list > :nth-child(n+2) {
+  margin-top: var(--comment-list-margin-top);
+}
+
+/*
+ * Sublists
+ * Note: General sibling selector allows reply block between comment and sublist
+ */
+.uk-comment-list .uk-comment ~ ul {
+  list-style: none;
+  margin: var(--comment-list-margin-top) 0 0 0;
+  padding-left: var(--comment-list-padding-left);
+}
+
+/* Tablet and bigger */
+@media (min-width: 960px) {
+  .uk-comment-list .uk-comment ~ ul {
+    padding-left: var(--comment-list-padding-left-m);
+  }
+}
+/* Adjacent siblings */
+.uk-comment-list .uk-comment ~ ul > :nth-child(n+2) {
+  margin-top: var(--comment-list-margin-top);
+}
+
+/* Style modifier
+ ========================================================================== */
+:root {
+  --comment-header-margin-bottom: var(--global-margin);
+  --comment-title-font-size: var(--global-medium-font-size);
+  --comment-title-line-height: 1.4;
+  --comment-meta-font-size: var(--global-small-font-size);
+  --comment-meta-line-height: 1.4;
+  --comment-meta-color: var(--global-muted-color);
+  --comment-list-margin-top: var(--global-large-margin);
+  --comment-list-padding-left: 30px;
+  --comment-list-padding-left-m: 100px;
+}

package/dist/assets/container.css

@@ -0,0 +1,171 @@
+/* ========================================================================
+   Component: Container
+ ========================================================================== */
+/*
+ * 1. Box sizing has to be `content-box` so the max-width is always the same and
+ *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+ */
+.uk-container {
+  /* 1 */
+  box-sizing: content-box;
+  display: flow-root;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-max-width);
+  padding-left: var(--container-padding-horizontal);
+  padding-right: var(--container-padding-horizontal);
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-container {
+    padding-left: var(--container-padding-horizontal-s);
+    padding-right: var(--container-padding-horizontal-s);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-container {
+    padding-left: var(--container-padding-horizontal-m);
+    padding-right: var(--container-padding-horizontal-m);
+  }
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-container > :last-child {
+  margin-bottom: 0;
+}
+
+/*
+ * Remove padding from nested containers
+ */
+.uk-container .uk-container:not(.uk-preserve) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Size modifier
+ ========================================================================== */
+.uk-container-xsmall {
+  max-width: var(--container-xsmall-max-width);
+}
+
+.uk-container-small {
+  max-width: var(--container-small-max-width);
+}
+
+.uk-container-large {
+  max-width: var(--container-large-max-width);
+}
+
+.uk-container-xlarge {
+  max-width: var(--container-xlarge-max-width);
+}
+
+.uk-container-expand {
+  max-width: none;
+}
+
+/* Expand modifier
+ ========================================================================== */
+/*
+ * Expand one side only
+ */
+.uk-container-expand-left {
+  margin-left: 0;
+}
+
+.uk-container-expand-right {
+  margin-right: 0;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-container-expand-left.uk-container-xsmall,
+  .uk-container-expand-right.uk-container-xsmall {
+    max-width: calc(50% + var(--container-xsmall-max-width) / 2 - var(--container-padding-horizontal-s));
+  }
+  .uk-container-expand-left.uk-container-small,
+  .uk-container-expand-right.uk-container-small {
+    max-width: calc(50% + var(--container-small-max-width) / 2 - var(--container-padding-horizontal-s));
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-container-expand-left,
+  .uk-container-expand-right {
+    max-width: calc(50% + var(--container-max-width) / 2 - var(--container-padding-horizontal-m));
+  }
+  .uk-container-expand-left.uk-container-xsmall,
+  .uk-container-expand-right.uk-container-xsmall {
+    max-width: calc(50% + var(--container-xsmall-max-width) / 2 - var(--container-padding-horizontal-m));
+  }
+  .uk-container-expand-left.uk-container-small,
+  .uk-container-expand-right.uk-container-small {
+    max-width: calc(50% + var(--container-small-max-width) / 2 - var(--container-padding-horizontal-m));
+  }
+  .uk-container-expand-left.uk-container-large,
+  .uk-container-expand-right.uk-container-large {
+    max-width: calc(50% + var(--container-large-max-width) / 2 - var(--container-padding-horizontal-m));
+  }
+  .uk-container-expand-left.uk-container-xlarge,
+  .uk-container-expand-right.uk-container-xlarge {
+    max-width: calc(50% + var(--container-xlarge-max-width) / 2 - var(--container-padding-horizontal-m));
+  }
+}
+/* Item
+ ========================================================================== */
+/*
+ * Utility classes to reset container padding on the left or right side
+ * Note: It has to be negative margin on the item, because it's specific to the item.
+ */
+.uk-container-item-padding-remove-left,
+.uk-container-item-padding-remove-right {
+  width: calc(100% + var(--container-padding-horizontal));
+}
+
+.uk-container-item-padding-remove-left {
+  margin-left: calc(var(--container-padding-horizontal) * -1);
+}
+
+.uk-container-item-padding-remove-right {
+  margin-right: calc(var(--container-padding-horizontal) * -1);
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-container-item-padding-remove-left,
+  .uk-container-item-padding-remove-right {
+    width: calc(100% + var(--container-padding-horizontal-s));
+  }
+  .uk-container-item-padding-remove-left {
+    margin-left: calc(var(--container-padding-horizontal-s) * -1);
+  }
+  .uk-container-item-padding-remove-right {
+    margin-right: calc(var(--container-padding-horizontal-s) * -1);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-container-item-padding-remove-left,
+  .uk-container-item-padding-remove-right {
+    width: calc(100% + var(--container-padding-horizontal-m));
+  }
+  .uk-container-item-padding-remove-left {
+    margin-left: calc(var(--container-padding-horizontal-m) * -1);
+  }
+  .uk-container-item-padding-remove-right {
+    margin-right: calc(var(--container-padding-horizontal-m) * -1);
+  }
+}
+:root {
+  --container-max-width: 1200px;
+  --container-xsmall-max-width: 750px;
+  --container-small-max-width: 900px;
+  --container-large-max-width: 1400px;
+  --container-xlarge-max-width: 1600px;
+  --container-padding-horizontal: 15px;
+  --container-padding-horizontal-s: var(--global-gutter);
+  --container-padding-horizontal-m: var(--global-medium-gutter);
+}

package/dist/assets/control.css

@@ -0,0 +1,262 @@
+/* ========================================================================
+   Component: Control
+ ========================================================================== */
+.uk-control {
+  align-items: center;
+  background-color: var(--control-background);
+  border: var(--control-border-width) var(--control-border-style) var(--control-border);
+  border-radius: var(--control-border-radius);
+  box-sizing: border-box;
+  color: var(--control-color);
+  cursor: text;
+  display: flex;
+  font-size: inherit;
+  min-height: var(--control-height);
+  padding-left: var(--control-padding-horizontal);
+  padding-right: var(--control-padding-horizontal);
+  position: relative;
+  transition: all var(--transition-duration);
+}
+
+/* Hover state  (unused for disabled state) */
+.uk-control:hover {
+  background-color: var(--control-hover-background);
+  border-color: var(--control-hover-border);
+  color: var(--control-hover-color);
+}
+
+/* Focus state  (unused for disabled state) */
+.uk-control:focus,
+.uk-control:focus-within {
+  background-color: var(--control-focus-background);
+  border-color: var(--control-focus-border);
+  color: var(--control-focus-color);
+  outline: none;
+}
+
+/* Disabled state */
+.uk-control.uk-disabled {
+  background-color: var(--control-disabled-background);
+  border-color: var(--control-disabled-border);
+  color: var(--control-disabled-color);
+  cursor: not-allowed;
+}
+
+/* Size modifier
+ ========================================================================== */
+/*
+ * Small
+ */
+.uk-control-small {
+  font-size: var(--control-small-font-size);
+  min-height: var(--control-small-height);
+  padding: 0 var(--control-small-padding-horizontal);
+}
+
+/*
+ * Medium
+ */
+.uk-control-medium {
+  font-size: var(--control-medium-font-size);
+  min-height: var(--control-medium-height);
+  padding: 0 var(--control-medium-padding-horizontal);
+}
+
+/*
+ * Large
+ */
+.uk-control-large {
+  font-size: var(--control-large-font-size);
+  min-height: var(--control-large-height);
+  padding: 0 var(--control-large-padding-horizontal);
+}
+
+/* Style modifier
+ ========================================================================== */
+/*
+ * Success
+ */
+.uk-control-success,
+.uk-control-success:hover,
+.uk-control-success:focus-within {
+  border-color: var(--control-success-border);
+  color: var(--control-success-color);
+}
+
+/*
+ * Warning
+ */
+.uk-control-warning,
+.uk-control-warning:hover,
+.uk-control-warning:focus-within {
+  border-color: var(--control-warning-border);
+  color: var(--control-warning-color);
+}
+
+/*
+ * Danger
+ */
+.uk-control-danger,
+.uk-control-danger:hover,
+.uk-control-danger:focus-within {
+  border-color: var(--control-danger-border);
+  color: var(--control-danger-color);
+}
+
+/*
+ * Blank
+ */
+.uk-control-blank,
+.uk-control-blank:hover,
+.uk-control-blank:focus-within {
+  background-color: transparent;
+  border-color: transparent;
+  border-style: var(--control-blank-border-style);
+}
+
+.uk-control-blank:focus-within {
+  border-color: var(--control-blank-focus-border);
+}
+
+/* Control input, prefix and suffix
+ ========================================================================== */
+/*
+ * Control input
+ */
+.uk-control-input {
+  max-width: 100%;
+  width: 100%;
+}
+
+.uk-control-input .uk-input,
+.uk-control-input .uk-input:hover,
+.uk-control-input .uk-input:focus,
+.uk-control-input .uk-input:disabled {
+  background: none;
+  color: inherit;
+  font-size: inherit;
+  outline: 0 none;
+  padding: 0;
+}
+
+.uk-control-input .uk-input {
+  height: 100%;
+}
+
+.uk-control-input,
+.uk-control-prefix,
+.uk-control-suffix,
+.uk-control-clear {
+  align-items: center;
+  display: inline-flex;
+}
+
+.uk-control-prefix,
+.uk-control-suffix,
+.uk-control-clear {
+  min-width: fit-content;
+  user-select: none;
+}
+
+.uk-control-clear {
+  cursor: pointer;
+  font-size: 0.8rem;
+  opacity: 0.8;
+  transition: opacity var(--transition-medium-fast-duration);
+}
+
+.uk-control-clear:hover {
+  opacity: 0.6;
+}
+
+/* Right to Left Direction
+ ========================================================================== */
+body:not([dir]) .uk-control:not(.uk-control-rtl),
+[dir=ltr] .uk-control:not(.uk-control-rtl) {
+  direction: ltr;
+}
+body:not([dir]) .uk-control:not(.uk-control-rtl) .uk-control-prefix,
+[dir=ltr] .uk-control:not(.uk-control-rtl) .uk-control-prefix {
+  margin-right: var(--control-affix-margin);
+}
+body:not([dir]) .uk-control:not(.uk-control-rtl) .uk-control-suffix,
+[dir=ltr] .uk-control:not(.uk-control-rtl) .uk-control-suffix {
+  margin-left: var(--control-affix-margin);
+}
+
+[dir=rtl] .uk-control,
+.uk-control.uk-control-rtl {
+  direction: rtl;
+}
+[dir=rtl] .uk-control .uk-control-prefix,
+.uk-control.uk-control-rtl .uk-control-prefix {
+  margin-left: var(--control-affix-margin);
+}
+[dir=rtl] .uk-control .uk-control-suffix,
+.uk-control.uk-control-rtl .uk-control-suffix {
+  margin-right: var(--control-affix-margin);
+}
+
+:root {
+  --control-height: var(--global-control-height);
+  --control-line-height: var(--control-height);
+  --control-padding-horizontal: 10px;
+  --control-padding-vertical: 4px;
+  --control-background: rgb(245.52, 245.52, 245.52);
+  --control-color: var(--global-color);
+  --control-border: var(--global-border);
+  --control-border-style: var(--global-border-style);
+  --control-border-width: var(--global-border-width);
+  --control-border-radius: 0;
+  --control-hover-background: rgb(243.04, 243.04, 243.04);
+  --control-hover-color: var(--global-color);
+  --control-hover-border: rgb(213.2448, 213.2448, 213.2448);
+  --control-focus-background: rgb(243.04, 243.04, 243.04);
+  --control-focus-color: var(--global-color);
+  --control-focus-border: var(--global-primary-border);
+  --control-disabled-background: rgb(240.56, 240.56, 240.56);
+  --control-disabled-border: var(--control-border);
+  --control-disabled-color: var(--global-color);
+  --control-placeholder-color: var(--global-muted-color);
+  --control-small-height: var(--global-control-small-height);
+  --control-small-padding-horizontal: 8px;
+  --control-small-padding-vertical: 3px;
+  --control-small-line-height: var(--control-small-height);
+  --control-small-font-size: var(--global-small-font-size);
+  --control-medium-height: var(--global-control-medium-height);
+  --control-medium-padding-horizontal: 15px;
+  --control-medium-padding-vertical: 6px;
+  --control-medium-line-height: var(--control-medium-height);
+  --control-medium-font-size: var(--global-font-size);
+  --control-large-height: var(--global-control-large-height);
+  --control-large-padding-horizontal: 12px;
+  --control-large-padding-vertical: 4px;
+  --control-large-line-height: var(--control-large-height);
+  --control-large-font-size: var(--global-medium-font-size);
+  --control-success-border: var(--global-success-border);
+  --control-success-color: var(--global-success-color);
+  --control-warning-border: var(--global-warning-border);
+  --control-warning-color: var(--global-warning-color);
+  --control-danger-border: var(--global-danger-border);
+  --control-danger-color: var(--global-danger-color);
+  --control-blank-border-style: dashed;
+  --control-blank-focus-border: rgb(235.6, 235.6, 235.6);
+  --control-affix-margin: var(--global-small-margin);
+  --control-icon-color: var(--global-muted-color);
+  --control-icon-hover-color: var(--global-color);
+  --inverse-control-background: rgba(102, 102, 102, 0.1);
+  --inverse-control-border: var(--inverse-global-border);
+  --inverse-control-color: var(--inverse-global-color);
+  --inverse-control-hover-background: rgba(76.5, 76.5, 76.5, 0.1);
+  --inverse-control-hover-border: rgba(244.8, 244.8, 244.8, 0.2);
+  --inverse-control-hover-color: var(--inverse-global-color);
+  --inverse-control-focus-background: rgba(76.5, 76.5, 76.5, 0.1);
+  --inverse-control-focus-border: var(--inverse-control-hover-border);
+  --inverse-control-focus-color: var(--inverse-global-color);
+  --inverse-control-disabled-background: rgba(178.5, 178.5, 178.5, 0.1);
+  --inverse-control-disabled-border: rgba(244.8, 244.8, 244.8, 0.2);
+  --inverse-control-disabled-color: var(--inverse-global-color);
+  --inverse-control-placeholder-color: var(--inverse-global-muted-color);
+  --inverse-control-icon-color: var(--inverse-global-muted-color);
+  --inverse-control-icon-hover-color: var(--inverse-global-color);
+}

package/dist/assets/cover.css

@@ -0,0 +1,55 @@
+/* ========================================================================
+   Component: Cover
+ ========================================================================== */
+/*
+ * Works with iframes and embedded content
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
+ * 2. Reset responsiveness for embedded content
+ * 3. Center object
+ * Note: Percent values on the `top` property only works if this element
+ *       is absolute positioned or if the container has a height
+ */
+/* 1 */
+[uk-cover]:where(canvas, iframe, svg),
+[data-uk-cover]:where(canvas, iframe, svg) {
+  --uk-position-translate-x: -50%;
+  --uk-position-translate-y: -50%;
+  left: 50%;
+  /* 1 */
+  max-width: none;
+  /* 2 */
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
+}
+
+iframe[uk-cover],
+iframe[data-uk-cover] {
+  pointer-events: none;
+}
+
+[uk-cover]:where(img, video),
+[data-uk-cover]:where(img, video) {
+  box-sizing: border-box;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  object-position: center;
+  /* 3 */
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+/* Container
+ ========================================================================== */
+/*
+ * 1. Parent container which clips resized object
+ * 2. Needed if the child is positioned absolute. See note above
+ */
+.uk-cover-container {
+  /* 1 */
+  overflow: hidden;
+  /* 2 */
+  position: relative;
+}