@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/switch.css

@@ -0,0 +1,167 @@
+/* ========================================================================
+   Component: Switch
+ ========================================================================== */
+.uk-switch {
+  appearance: none;
+  background: var(--switch-background);
+  border: var(--switch-border-width) var(--switch-border-style) var(--switch-border);
+  border-radius: var(--switch-border-radius);
+  box-sizing: content-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  height: var(--switch-height);
+  line-height: var(--switch-height);
+  margin: 0;
+  min-width: var(--switch-width);
+  padding: 0;
+  position: relative;
+  transition: all var(--transition-medium-fast-duration);
+  user-select: none;
+  vertical-align: middle;
+}
+
+.uk-switch:not(.uk-switch-disabled):hover::after {
+  visibility: visible;
+}
+
+.uk-switch-handle {
+  height: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+  inset-inline-start: var(--switch-handle-offset);
+  position: absolute;
+  top: var(--switch-handle-offset);
+  transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+  width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
+  z-index: 10;
+}
+
+.uk-switch-handle::before {
+  background: var(--switch-handle-background);
+  border-radius: var(--switch-handle-border-radius);
+  bottom: 0;
+  content: "";
+  inset-inline: 0;
+  position: absolute;
+  top: 0;
+  transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+/* Inner
+ ========================================================================== */
+.uk-switch-inner {
+  border-radius: var(--switch-border-radius);
+  box-sizing: border-box;
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
+  transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked,
+.uk-switch-inner-unchecked {
+  display: block;
+  pointer-events: none;
+  transition: margin-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), margin-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-switch-inner-checked {
+  margin-inline: calc(-100% + var(--switch-height) - (var(--switch-height) + var(--switch-handle-offset)) * 2) calc(100% - var(--switch-height) + (var(--switch-height) + var(--switch-handle-offset)) * 2);
+}
+
+.uk-switch-inner-unchecked {
+  margin-inline: 0;
+  margin-top: calc(var(--switch-height) * -1);
+}
+
+/* States
+ ========================================================================== */
+.uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
+  inset-inline: 0 -30%;
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
+  inset-inline: -30% 0;
+}
+
+.uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
+  margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
+}
+
+.uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
+  margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
+}
+
+.uk-switch-checked {
+  background: var(--switch-checked-background);
+}
+
+.uk-switch-checked::after {
+  animation: uk-wave-effect 0.36s var(--ease-in-out);
+  animation-fill-mode: backwards;
+  border: var(--switch-border-width) solid var(--switch-checked-background);
+  border-radius: var(--switch-border-radius);
+  box-sizing: border-box;
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+
+.uk-switch-checked .uk-switch-handle {
+  inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
+}
+
+.uk-switch-checked .uk-switch-handle::before {
+  background: var(--switch-handle-checked-background);
+}
+
+.uk-switch-checked .uk-switch-inner {
+  padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
+}
+
+.uk-switch-checked .uk-switch-inner-checked {
+  margin-inline: 0;
+}
+
+.uk-switch-checked .uk-switch-inner-unchecked {
+  margin-inline: calc(100% - var(--switch-height) + (var(--switch-height) + var(--switch-handle-offset)) * 2) calc(-100% + var(--switch-height) - (var(--switch-height) + var(--switch-handle-offset)) * 2);
+}
+
+.uk-switch-disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+/* Loading
+ ========================================================================== */
+.uk-switch-loading .uk-switch-handle::before {
+  visibility: hidden;
+}
+
+.uk-switch-loading-icon {
+  display: block;
+}
+
+/* Hooks
+ ========================================================================== */
+/* Vars
+ ========================================================================== */
+:root {
+  --switch-background: rgb(198.4, 198.4, 198.4);
+  --switch-border: var(--global-border);
+  --switch-border-style: var(--global-border-style);
+  --switch-border-width: var(--global-border-width);
+  --switch-checked-background: var(--global-success-background);
+  --switch-border-radius: 100px;
+  --switch-height: 22px;
+  --switch-width: 44px;
+  --switch-handle-background: var(--global-background);
+  --switch-handle-checked-background: var(--global-background);
+  --switch-handle-border-radius: 100px;
+  --switch-handle-offset: 2px;
+}

package/dist/assets/table.css

@@ -0,0 +1,224 @@
+/* ========================================================================
+   Component: Table
+ ========================================================================== */
+/*
+ * 1. Remove most spacing between table cells.
+ * 2. Behave like a block element
+ * 3. Style
+ */
+.uk-table {
+  /* 1 */
+  border-collapse: collapse;
+  border-spacing: 0;
+  /* 3 */
+  margin-bottom: var(--table-margin-vertical);
+  /* 2 */
+  width: 100%;
+}
+
+/* Add margin if adjacent element */
+* + .uk-table {
+  margin-top: var(--table-margin-vertical);
+}
+
+/* Header cell
+ ========================================================================== */
+/*
+ * 1. Style
+ */
+.uk-table th {
+  color: var(--table-header-cell-color);
+  /* 1 */
+  font-size: var(--table-header-cell-font-size);
+  font-weight: var(--table-header-cell-font-weight);
+  padding: var(--table-cell-padding-vertical);
+  text-align: left;
+  vertical-align: bottom;
+}
+
+/* Cell
+ ========================================================================== */
+.uk-table td {
+  padding: var(--table-cell-padding-vertical);
+  vertical-align: top;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-table td > :last-child {
+  margin-bottom: 0;
+}
+
+/* Footer
+ ========================================================================== */
+.uk-table tfoot {
+  font-size: var(--table-footer-font-size);
+}
+
+/* Caption
+ ========================================================================== */
+.uk-table caption {
+  color: var(--table-caption-color);
+  font-size: var(--table-caption-font-size);
+  text-align: left;
+}
+
+/* Alignment modifier
+ ========================================================================== */
+.uk-table-middle,
+.uk-table-middle td {
+  vertical-align: middle !important;
+}
+
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Divider
+ */
+.uk-table-divider > tr:not(:first-child),
+.uk-table-divider > :not(:first-child) > tr,
+.uk-table-divider > :first-child > tr:not(:first-child) {
+  border-top: var(--table-divider-border-width);
+}
+
+/*
+ * Striped
+ */
+.uk-table-striped > tr:nth-of-type(odd),
+.uk-table-striped tbody tr:nth-of-type(odd) {
+  background: var(--table-striped-row-background);
+}
+
+/*
+ * Hover
+ */
+.uk-table-hover > tr:hover,
+.uk-table-hover tbody tr:hover {
+  background: var(--table-hover-row-background);
+}
+
+/* Active state
+ ========================================================================== */
+.uk-table > tr.uk-active,
+.uk-table tbody tr.uk-active {
+  background: var(--table-row-active-background);
+}
+
+/* Size modifier
+ ========================================================================== */
+.uk-table-small th,
+.uk-table-small td {
+  padding: var(--table-small-cell-padding-vertical);
+}
+
+.uk-table-large th,
+.uk-table-large td {
+  padding: var(--table-large-cell-padding-vertical);
+}
+
+/* Justify modifier
+ ========================================================================== */
+.uk-table-justify th:first-child,
+.uk-table-justify td:first-child {
+  padding-left: 0;
+}
+
+.uk-table-justify th:last-child,
+.uk-table-justify td:last-child {
+  padding-right: 0;
+}
+
+/* Cell size modifier
+ ========================================================================== */
+.uk-table-shrink {
+  width: 1px;
+}
+
+.uk-table-expand {
+  min-width: var(--table-expand-min-width);
+}
+
+/* Cell link modifier
+ ========================================================================== */
+/*
+ * Does not work with `uk-table-justify` at the moment
+ */
+.uk-table-link {
+  padding: 0 !important;
+}
+
+.uk-table-link > a {
+  display: block;
+  padding: var(--table-cell-padding-vertical);
+}
+
+.uk-table-small .uk-table-link > a {
+  padding: var(--table-small-cell-padding-vertical);
+}
+
+/* Responsive table
+ ========================================================================== */
+/* Phone landscape and smaller */
+@media (max-width: 959px) {
+  .uk-table-responsive,
+  .uk-table-responsive tbody,
+  .uk-table-responsive th,
+  .uk-table-responsive td,
+  .uk-table-responsive tr {
+    display: block;
+  }
+  .uk-table-responsive thead {
+    display: none;
+  }
+  .uk-table-responsive th,
+  .uk-table-responsive td {
+    max-width: none !important;
+    min-width: 0 !important;
+    overflow: visible !important;
+    white-space: normal !important;
+    width: auto !important;
+  }
+  .uk-table-responsive th:not(:first-child, .uk-table-link),
+  .uk-table-responsive td:not(:first-child, .uk-table-link),
+  .uk-table-responsive .uk-table-link:not(:first-child) > a {
+    padding-top: 5px !important;
+  }
+  .uk-table-responsive th:not(:last-child, .uk-table-link),
+  .uk-table-responsive td:not(:last-child, .uk-table-link),
+  .uk-table-responsive .uk-table-link:not(:last-child) > a {
+    padding-bottom: 5px !important;
+  }
+  .uk-table-justify.uk-table-responsive th,
+  .uk-table-justify.uk-table-responsive td {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+:root {
+  --table-margin-vertical: var(--global-margin);
+  --table-cell-padding-vertical: 16px;
+  --table-cell-padding-horizontal: 12px;
+  --table-header-cell-font-size: var(--global-font-size);
+  --table-header-cell-font-weight: bold;
+  --table-header-cell-color: var(--global-color);
+  --table-footer-font-size: var(--global-small-font-size);
+  --table-caption-font-size: var(--global-small-font-size);
+  --table-caption-color: var(--global-muted-color);
+  --table-row-active-background: #ffd;
+  --table-divider-border-width: var(--global-border-width);
+  --table-divider-border: var(--global-border);
+  --table-striped-row-background: var(--global-muted-background);
+  --table-hover-row-background: var(--table-row-active-background);
+  --table-small-cell-padding-vertical: 10px;
+  --table-small-cell-padding-horizontal: 12px;
+  --table-large-cell-padding-vertical: 22px;
+  --table-large-cell-padding-horizontal: 12px;
+  --table-expand-min-width: 150px;
+  --inverse-table-header-cell-color: var(--inverse-global-color);
+  --inverse-table-caption-color: var(--inverse-global-muted-color);
+  --inverse-table-row-active-background: rgba(255, 255, 255, 0.98);
+  --inverse-table-divider-border: var(--inverse-global-border);
+  --inverse-table-striped-row-background: var(--inverse-global-muted-background);
+  --inverse-table-hover-row-background: var(--inverse-table-row-active-background);
+}