@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/card.css

@@ -0,0 +1,255 @@
+/* ========================================================================
+   Component: Card
+ ========================================================================== */
+.uk-card {
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* Sections
+ ========================================================================== */
+.uk-card-body {
+  display: flow-root;
+  padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
+}
+
+.uk-card-header {
+  display: flow-root;
+  padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
+}
+
+.uk-card-footer {
+  display: flow-root;
+  padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-card-body {
+    padding: var(--card-body-padding-vertical-l) var(--card-body-padding-horizontal-l);
+  }
+  .uk-card-header {
+    padding: var(--card-header-padding-vertical-l) var(--card-header-padding-horizontal-l);
+  }
+  .uk-card-footer {
+    padding: var(--card-footer-padding-vertical-l) var(--card-footer-padding-horizontal-l);
+  }
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-card-body > :last-child,
+.uk-card-header > :last-child,
+.uk-card-footer > :last-child {
+  margin-bottom: 0;
+}
+
+/* Media
+ ========================================================================== */
+/*
+ * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+ * Implemented by the theme
+ */
+/* Title
+ ========================================================================== */
+.uk-card-title {
+  font-size: var(--card-title-font-size);
+  line-height: var(--card-title-line-height);
+}
+
+/* Badge
+ ========================================================================== */
+/*
+ * 1. Position
+ * 2. Size
+ * 3. Style
+ * 4. Center child vertically
+ */
+.uk-card-badge {
+  align-items: center; /* 4 */
+  background: var(--card-badge-background); /* 3 */
+  color: var(--card-badge-color); /* 3 */
+  display: flex; /* 4 */
+  font-size: var(--card-badge-font-size); /* 3 */
+  height: var(--card-badge-height); /* 2 */
+  justify-content: center; /* 4 */
+  line-height: 0; /* 4 */
+  padding: 0 var(--card-badge-padding-horizontal);
+  position: absolute; /* 1 */
+  right: var(--card-badge-right); /* 1 */
+  top: var(--card-badge-top); /* 1 */
+  z-index: 1; /* 1 */
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+.uk-card-badge:first-child + * {
+  margin-top: 0;
+}
+
+/* Hover modifier
+ ========================================================================== */
+.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-tertiary):hover {
+  background: var(--card-hover-background);
+}
+
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Default
+ * Note: Header and Footer are only implemented for the default style
+ */
+.uk-card-default {
+  --uk-inverse: dark;
+  background: var(--card-default-background);
+  color: var(--card-default-color);
+}
+
+.uk-card-default .uk-card-title {
+  color: var(--card-default-title-color);
+}
+
+.uk-card-default.uk-card-hover:hover {
+  background-color: var(--card-default-hover-background);
+}
+
+/*
+ * Primary
+ */
+.uk-card-primary {
+  --uk-inverse: light;
+  background: var(--card-primary-background);
+  color: var(--card-primary-color);
+}
+
+.uk-card-primary .uk-card-title {
+  color: var(--card-primary-title-color);
+}
+
+.uk-card-primary.uk-card-hover:hover {
+  background-color: var(--card-primary-hover-background);
+}
+
+/*
+ * Secondary
+ */
+.uk-card-secondary {
+  --uk-inverse: light;
+  background: var(--card-secondary-background);
+  color: var(--card-secondary-color);
+}
+
+.uk-card-secondary .uk-card-title {
+  color: var(--card-secondary-title-color);
+}
+
+.uk-card-secondary.uk-card-hover:hover {
+  background-color: var(--card-secondary-hover-background);
+}
+
+/*
+ * Tertiary
+ */
+.uk-card-tertiary {
+  --uk-inverse: light;
+  background: var(--card-tertiary-background);
+  color: var(--card-tertiary-color);
+}
+
+.uk-card-tertiary .uk-card-title {
+  color: var(--card-tertiary-title-color);
+}
+
+.uk-card-tertiary.uk-card-hover:hover {
+  background-color: var(--card-tertiary-hover-background);
+}
+
+/* Size modifier
+ ========================================================================== */
+/*
+ * Small
+ */
+.uk-card-small.uk-card-body,
+.uk-card-small .uk-card-body {
+  padding: var(--card-small-body-padding-vertical) var(--card-small-body-padding-horizontal);
+}
+
+.uk-card-small .uk-card-header {
+  padding: var(--card-small-header-padding-vertical) var(--card-small-header-padding-horizontal);
+}
+
+.uk-card-small .uk-card-footer {
+  padding: var(--card-small-footer-padding-vertical) var(--card-small-footer-padding-horizontal);
+}
+
+/*
+ * Large
+ */
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-card-large.uk-card-body,
+  .uk-card-large .uk-card-body {
+    padding: var(--card-large-body-padding-vertical-l) var(--card-large-body-padding-horizontal-l);
+  }
+  .uk-card-large .uk-card-header {
+    padding: var(--card-large-header-padding-vertical-l) var(--card-large-header-padding-horizontal-l);
+  }
+  .uk-card-large .uk-card-footer {
+    padding: var(--card-large-footer-padding-vertical-l) var(--card-large-footer-padding-horizontal-l);
+  }
+}
+:root {
+  --card-body-padding-horizontal: var(--global-gutter);
+  --card-body-padding-vertical: var(--global-gutter);
+  --card-body-padding-horizontal-l: var(--global-medium-gutter);
+  --card-body-padding-vertical-l: var(--global-medium-gutter);
+  --card-header-padding-horizontal: var(--global-gutter);
+  --card-header-padding-vertical: 15px;
+  --card-header-padding-horizontal-l: var(--global-medium-gutter);
+  --card-header-padding-vertical-l: 20px;
+  --card-footer-padding-horizontal: var(--global-gutter);
+  --card-footer-padding-vertical: 15px;
+  --card-footer-padding-horizontal-l: var(--global-medium-gutter);
+  --card-footer-padding-vertical-l: 20px;
+  --card-title-font-size: var(--global-large-font-size);
+  --card-title-line-height: 1.4;
+  --card-badge-top: var(--global-small-gutter);
+  --card-badge-right: var(--card-badge-top);
+  --card-badge-height: var(--badge-size);
+  --card-badge-padding-horizontal: var(--badge-padding-horizontal);
+  --card-badge-background: var(--badge-background);
+  --card-badge-color: var(--badge-color);
+  --card-badge-font-size: var(--badge-font-size);
+  --card-hover-background: var(--global-muted-background);
+  --card-default-background: var(--global-muted-background);
+  --card-default-color: var(--global-color);
+  --card-default-title-color: var(--global-emphasis-color);
+  --card-default-hover-background: rgb(235.6, 235.6, 235.6);
+  --card-primary-background: var(--global-primary-background);
+  --card-primary-color: var(--global-inverse-color);
+  --card-primary-title-color: var(--card-primary-color);
+  --card-primary-hover-background: rgb(17.34375, 128.25, 239.15625);
+  --card-secondary-background: var(--global-secondary-background);
+  --card-secondary-color: var(--global-inverse-color);
+  --card-secondary-title-color: var(--card-secondary-color);
+  --card-secondary-hover-background: rgb(32.3, 32.3, 32.3);
+  --card-tertiary-background: var(--global-tertiary-background);
+  --card-tertiary-color: var(--global-inverse-color);
+  --card-tertiary-title-color: var(--card-tertiary-color);
+  --card-tertiary-hover-background: rgb(174.8, 174.8, 174.8);
+  --card-small-body-padding-horizontal: var(--global-margin);
+  --card-small-body-padding-vertical: var(--global-margin);
+  --card-small-header-padding-horizontal: var(--global-margin);
+  --card-small-header-padding-vertical: 13px;
+  --card-small-footer-padding-horizontal: var(--global-margin);
+  --card-small-footer-padding-vertical: 13px;
+  --card-large-body-padding-horizontal-l: var(--global-large-gutter);
+  --card-large-body-padding-vertical-l: var(--global-large-gutter);
+  --card-large-header-padding-horizontal-l: var(--global-large-gutter);
+  --card-large-header-padding-vertical-l: 35px;
+  --card-large-footer-padding-horizontal-l: var(--global-large-gutter);
+  --card-large-footer-padding-vertical-l: 35px;
+  --inverse-card-badge-background: var(--inverse-global-primary-background);
+  --inverse-card-badge-color: var(--inverse-global-inverse-color);
+}

package/dist/assets/checkbox.css

@@ -0,0 +1,240 @@
+/* ========================================================================
+   Component: Checkbox
+ ========================================================================== */
+.uk-checkbox-wrapper {
+  cursor: pointer;
+  display: flex;
+  line-height: unset;
+  user-select: none;
+}
+.uk-checkbox-wrapper.uk-control {
+  background-color: var(--checkbox-control-background);
+}
+
+.uk-checkbox-wrapper .uk-checkbox {
+  border: 0;
+  display: inline-block;
+  height: var(--checkbox-size);
+  line-height: 1;
+  margin: 0;
+  min-width: var(--checkbox-size);
+  overflow: visible;
+  position: relative;
+  top: 0;
+  vertical-align: sub;
+  white-space: nowrap;
+}
+
+.uk-checkbox-wrapper .uk-checkbox-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.uk-checkbox-wrapper .uk-checkbox-inner {
+  background-color: var(--checkbox-background);
+  border: var(--checkbox-border-width) solid var(--checkbox-border);
+  border-collapse: separate;
+  border-radius: var(--checkbox-border-radius);
+  box-sizing: border-box;
+  direction: ltr;
+  display: block;
+  height: var(--checkbox-size);
+  left: 0;
+  position: relative;
+  top: 0;
+  transition: all var(--transition-duration);
+  width: var(--checkbox-size);
+}
+
+.uk-checkbox-wrapper .uk-checkbox-inner::after {
+  border: var(--checkbox-checked-icon-border-width) solid var(--checkbox-checked-icon-color);
+  border-left: 0;
+  border-top: 0;
+  box-sizing: border-box;
+  content: " ";
+  display: block;
+  height: calc(var(--checkbox-size) / 2);
+  left: 28.5%;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  transform: rotate(45deg) scale(0) translate(-50%, -50%);
+  transition: all var(--transition-fast-duration) var(--ease-in-back), opacity var(--transition-fast-duration);
+  width: calc(var(--checkbox-size) / 4);
+}
+
+.uk-checkbox-wrapper .uk-checkbox-label {
+  line-height: var(--checkbox-size);
+  max-width: 100%;
+  overflow: hidden;
+  padding-left: var(--control-affix-margin);
+  text-overflow: ellipsis;
+}
+
+/* States
+ ========================================================================== */
+.uk-checkbox-wrapper:not(.uk-checked):hover .uk-checkbox-inner,
+.uk-checkbox:not(.uk-checkbox-checked):hover .uk-checkbox-inner {
+  border-color: var(--checkbox-hover-border);
+}
+
+.uk-checkbox-wrapper:not(.uk-disabled):hover .uk-checkbox::after,
+.uk-checkbox:not(.uk-checkbox-disabled):hover::after {
+  visibility: visible;
+}
+
+.uk-checkbox-checked::after {
+  animation: uk-wave-effect 0.36s var(--ease-in-out);
+  animation-fill-mode: backwards;
+  border: var(--checkbox-border-width) solid var(--checkbox-checked-border);
+  border-radius: var(--checkbox-border-radius);
+  box-sizing: border-box;
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+
+.uk-checkbox-checked .uk-checkbox-inner {
+  background-color: var(--checkbox-checked-background);
+  border-color: var(--checkbox-checked-border);
+}
+
+.uk-checkbox-checked .uk-checkbox-inner::after {
+  border-color: var(--checkbox-checked-icon-color);
+  opacity: 1;
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  transition: all var(--transition-medium-fast-duration) var(--ease-out-back) var(--transition-fast-duration);
+}
+
+.uk-checkbox-disabled {
+  cursor: not-allowed;
+}
+
+.uk-checkbox-disabled .uk-checkbox-label {
+  color: var(--control-placeholder-color);
+}
+
+.uk-checkbox-disabled .uk-checkbox-input {
+  cursor: not-allowed;
+}
+
+.uk-checkbox-disabled .uk-checkbox-inner {
+  background-color: transparent;
+  border-color: var(--checkbox-disabled-border);
+  cursor: not-allowed;
+}
+
+.uk-checkbox-disabled.uk-checkbox-checked .uk-checkbox-inner::after {
+  animation-name: none;
+  border-color: var(--checkbox-disabled-icon-color);
+}
+
+/* Intermediate
+ ========================================================================== */
+.uk-checkbox-indeterminate .uk-checkbox-inner {
+  background-color: transparent;
+}
+
+.uk-checkbox-indeterminate.uk-checkbox-checked .uk-checkbox-inner {
+  border-color: var(--checkbox-border);
+}
+
+.uk-checkbox-indeterminate .uk-checkbox-inner::after {
+  background-color: var(--checkbox-checked-background);
+  border: 0;
+  content: " ";
+  height: var(--checkbox-indeterminate-size);
+  left: 50%;
+  opacity: 1;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  width: var(--checkbox-indeterminate-size);
+}
+
+.uk-checkbox-indeterminate.uk-checkbox-disabled .uk-checkbox-inner::after {
+  background-color: var(--checkbox-disabled-background);
+}
+
+/* Group
+ ========================================================================== */
+.uk-checkbox-group {
+  display: flex;
+  flex-direction: row;
+  gap: var(--control-affix-margin);
+}
+
+.uk-checkbox-group-stack {
+  flex-direction: column;
+}
+
+/* Control
+ ========================================================================== */
+.uk-control-checkbox {
+  cursor: pointer;
+  padding-bottom: var(--control-medium-padding-vertical);
+  padding-top: var(--control-medium-padding-vertical);
+}
+
+.uk-control-checkbox.uk-checked {
+  background-color: var(--checkbox-checked-control-background);
+  border-color: var(--checkbox-checked-border);
+  color: var(--checkbox-checked-control-color);
+}
+
+.uk-control-checkbox.uk-checked:hover {
+  border-color: var(--checkbox-checked-border);
+}
+
+.uk-control-checkbox.uk-disabled {
+  background-color: var(--checkbox-disabled-background);
+  border-color: var(--checkbox-disabled-border);
+  cursor: not-allowed;
+}
+
+/* Right to Left Direction
+ ========================================================================== */
+.uk-checkbox-rtl {
+  flex-direction: row-reverse;
+}
+
+.uk-checkbox-rtl .uk-checkbox-label {
+  padding-left: 0;
+  padding-right: var(--control-affix-margin);
+}
+
+:root, ::after, ::before {
+  --checkbox-background: var(--control-background);
+  --checkbox-border: var(--control-border);
+  --checkbox-border-width: var(--control-border-width);
+  --checkbox-border-radius: var(--control-border-radius);
+  --checkbox-hover-border: var(--control-hover-border);
+  --checkbox-focus-background: var(--control-focus-background);
+  --checkbox-focus-border: var(--control-focus-border);
+  --checkbox-disabled-background: var(--control-disabled-background);
+  --checkbox-disabled-border: var(--control-disabled-border);
+  --checkbox-disabled-icon-color: var(--global-muted-color);
+  --checkbox-indeterminate-size: 10px;
+  --checkbox-size: 20px;
+  --checkbox-checked-background: var(--global-primary-background);
+  --checkbox-checked-border: var(--global-primary-border);
+  --checkbox-checked-icon-border-width: 2px;
+  --checkbox-checked-icon-color: var(--global-inverse-color);
+  --checkbox-control-background: rgba(245.52, 245.52, 245.52, 0.45);
+  --checkbox-checked-control-background: rgba(30, 135, 240, 0.15);
+  --checkbox-checked-control-color: #1e87f0;
+  --checkbox-checked-control-padding: 10px;
+}

package/dist/assets/close.css

@@ -0,0 +1,24 @@
+/* ========================================================================
+   Component: Close
+ ========================================================================== */
+/*
+ * Adopts `uk-icon`
+ */
+.uk-close {
+  background-color: transparent;
+  color: var(--close-color);
+}
+
+/* Hover + Focus */
+.uk-close:hover,
+.uk-close:focus {
+  color: var(--close-hover-color);
+  outline: none;
+}
+
+:root {
+  --close-color: var(--global-muted-color);
+  --close-hover-color: var(--global-color);
+  --inverse-close-color: var(--inverse-global-muted-color);
+  --inverse-close-hover-color: var(--inverse-global-color);
+}

package/dist/assets/column.css

@@ -0,0 +1,145 @@
+/* ========================================================================
+   Component: Column
+ ========================================================================== */
+[class*=uk-column-] {
+  column-gap: var(--column-gutter);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  [class*=uk-column-] {
+    column-gap: var(--column-gutter-l);
+  }
+}
+/*
+ * Fix image 1px line wrapping into the next column in Chrome
+ */
+[class*=uk-column-] img {
+  transform: translate3d(0, 0, 0);
+}
+
+/* Divider
+ ========================================================================== */
+/*
+ * 1. Double the column gap
+ */
+.uk-column-divider {
+  /* 1 */
+  column-gap: calc(var(--column-gutter) * 2);
+  column-rule: var(--column-divider-rule-width) solid var(--column-divider-rule-color);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-column-divider {
+    column-gap: calc(var(--column-gutter-l) * 2);
+  }
+}
+/* Width modifiers
+ ========================================================================== */
+.uk-column-1-2 {
+  column-count: 2;
+}
+
+.uk-column-1-3 {
+  column-count: 3;
+}
+
+.uk-column-1-4 {
+  column-count: 4;
+}
+
+.uk-column-1-5 {
+  column-count: 5;
+}
+
+.uk-column-1-6 {
+  column-count: 6;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-column-1-2\@s {
+    column-count: 2;
+  }
+  .uk-column-1-3\@s {
+    column-count: 3;
+  }
+  .uk-column-1-4\@s {
+    column-count: 4;
+  }
+  .uk-column-1-5\@s {
+    column-count: 5;
+  }
+  .uk-column-1-6\@s {
+    column-count: 6;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-column-1-2\@m {
+    column-count: 2;
+  }
+  .uk-column-1-3\@m {
+    column-count: 3;
+  }
+  .uk-column-1-4\@m {
+    column-count: 4;
+  }
+  .uk-column-1-5\@m {
+    column-count: 5;
+  }
+  .uk-column-1-6\@m {
+    column-count: 6;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-column-1-2\@l {
+    column-count: 2;
+  }
+  .uk-column-1-3\@l {
+    column-count: 3;
+  }
+  .uk-column-1-4\@l {
+    column-count: 4;
+  }
+  .uk-column-1-5\@l {
+    column-count: 5;
+  }
+  .uk-column-1-6\@l {
+    column-count: 6;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-column-1-2\@xl {
+    column-count: 2;
+  }
+  .uk-column-1-3\@xl {
+    column-count: 3;
+  }
+  .uk-column-1-4\@xl {
+    column-count: 4;
+  }
+  .uk-column-1-5\@xl {
+    column-count: 5;
+  }
+  .uk-column-1-6\@xl {
+    column-count: 6;
+  }
+}
+/* Make element span across all columns
+ * Does not work in Firefox yet
+ ========================================================================== */
+.uk-column-span {
+  column-span: all;
+}
+
+:root {
+  --column-gutter: var(--global-gutter);
+  --column-gutter-l: var(--global-medium-gutter);
+  --column-divider-rule-color: var(--global-border);
+  --column-divider-rule-width: 1px;
+  --inverse-column-divider-rule-color: var(--inverse-global-border);
+}