@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/navbar.css

@@ -0,0 +1,468 @@
+/* ========================================================================
+   Component: Navbar
+ ========================================================================== */
+/*
+ * 1. Create position context to center navbar group
+ */
+.uk-navbar {
+  --uk-inverse: dark;
+  display: flex;
+  position: relative; /* 1 */
+}
+
+/* Container
+ ========================================================================== */
+.uk-navbar-container:not(.uk-navbar-transparent) {
+  background: var(--navbar-background);
+}
+
+/* Groups
+ ========================================================================== */
+/*
+ * 1. Stretch height if a sibling's height is expanded by its content
+ */
+.uk-navbar-left,
+.uk-navbar-right,
+[class*=uk-navbar-center] {
+  align-items: stretch; /* 1 */
+  display: flex;
+  flex: none;
+  gap: var(--navbar-gap);
+  min-width: 1px;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-left,
+  .uk-navbar-right,
+  [class*=uk-navbar-center] {
+    gap: var(--navbar-gap-m);
+  }
+  .uk-navbar-center-left {
+    right: calc(100% + var(--navbar-gap-m));
+  }
+  .uk-navbar-center-right {
+    left: calc(100% + var(--navbar-gap-m));
+  }
+}
+/*
+ * Horizontal alignment
+ * 1. Create position context for centered navbar with sub groups (left/right)
+ * 2. Fix text wrapping if content is larger than 50% of the container.
+ * 3. Needed for dropdowns because a new position context is created
+ *    `z-index` must be smaller than Drawer
+ * 4. Align sub groups for centered navbar
+ */
+.uk-navbar-left {
+  flex: 1;
+}
+
+.uk-navbar-right {
+  margin-left: auto;
+}
+
+.uk-navbar-center:only-child {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative; /* 1 */
+}
+
+.uk-navbar-center:not(:only-child) {
+  align-items: stretch;
+  box-sizing: border-box;
+  height: 100%; /* 4 */
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max-content; /* 2 */
+  z-index: calc(var(--global-z-index) - 10); /* 3 */
+}
+
+.uk-navbar-center-left,
+.uk-navbar-center-right {
+  height: 100%; /* 4 */
+  position: absolute; /* 5 */
+  top: 0;
+}
+
+.uk-navbar-center-left {
+  right: calc(100% + var(--navbar-gap));
+}
+
+.uk-navbar-center-right {
+  left: calc(100% + var(--navbar-gap));
+}
+
+[class*=uk-navbar-center-] {
+  box-sizing: border-box;
+  width: max-content;
+}
+
+/* Nav
+ ========================================================================== */
+/*
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
+ */
+.uk-navbar-nav {
+  align-items: stretch; /* 1 */
+  display: flex;
+  flex: auto;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: 0; /* 2 */
+  max-width: 100%;
+  min-width: 1px;
+  padding: 0;
+  white-space: nowrap;
+}
+
+/*
+ * Allow items to wrap into the next line
+ * Only not `absolute` positioned groups
+ */
+.uk-navbar-left,
+.uk-navbar-right,
+.uk-navbar-center:only-child {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+/*
+ * Items
+ * 1. Center content vertically and horizontally
+ * 2. Imitate white space gap when using flexbox
+ * 3. Dimensions
+ * 4. Style
+ * 5. Required for `a`
+ */
+.uk-navbar-nav > li[class*=uk-nav-item] > a,
+.uk-navbar-item,
+.uk-navbar-toggle { /* Clickable item */
+  align-items: center;
+  box-sizing: border-box; /* 3 */
+  column-gap: 0.25em; /* 2 */
+  display: flex; /* 1 */
+  flex: none;
+  font-family: var(--navbar-nav-item-font-family), system-ui;
+  font-size: var(--navbar-nav-item-font-size); /* 4 */
+  justify-content: center;
+  min-height: var(--navbar-nav-item-height);
+  text-decoration: none; /* 5 */
+}
+
+/*
+ * Nav items
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
+ */
+.uk-navbar-nav > li[class*=uk-nav-item] > a {
+  color: var(--navbar-nav-item-color);
+  height: 100%; /* 1 */
+  padding: 0 var(--navbar-nav-item-padding-horizontal); /* 2 */
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-nav > li[class*=uk-nav-item] > a {
+    padding: 0 var(--navbar-nav-item-padding-horizontal-m); /* 2 */
+  }
+}
+/*
+ * Hover
+ * Apply hover style also if dropdown is opened
+ */
+.uk-navbar-nav > li[class*=uk-nav-item].uk-hover > a,
+.uk-navbar-nav > li[class*=uk-nav-item]:hover > a,
+.uk-navbar-nav > li[class*=uk-nav-item] > a[aria-expanded=true],
+.uk-navbar-nav > li[class*=uk-nav-item] > a.uk-open {
+  color: var(--navbar-nav-item-hover-color);
+}
+
+/* OnClick */
+.uk-navbar-nav > li[class*=uk-nav-item] > a:active {
+  color: var(--navbar-nav-item-onclick-color);
+}
+
+/* Active */
+.uk-navbar-nav > li[class*=uk-nav-item].uk-active > a {
+  color: var(--navbar-nav-item-active-color);
+}
+
+/* Parent icon modifier
+ ========================================================================== */
+.uk-navbar-parent-icon {
+  margin-left: var(--navbar-parent-icon-margin-left);
+  transition: transform var(--transition-duration) var(--ease-out);
+}
+
+.uk-navbar-nav > li > a[aria-expanded=true] .uk-navbar-parent-icon {
+  transform: rotateX(180deg);
+}
+
+/* Item
+ ========================================================================== */
+.uk-navbar-item {
+  color: var(--navbar-item-color);
+  padding: 0 var(--navbar-item-padding-horizontal);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-item {
+    padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
+  }
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-navbar-item > :last-child {
+  margin-bottom: 0;
+}
+
+/* Toggle
+ ========================================================================== */
+.uk-navbar-toggle {
+  color: var(--navbar-toggle-color);
+  padding: 0 var(--navbar-item-padding-horizontal);
+}
+
+.uk-navbar-toggle:hover,
+.uk-navbar-toggle[aria-expanded=true],
+.uk-navbar-toggle.uk-open {
+  color: var(--navbar-toggle-hover-color);
+  outline: none;
+  text-decoration: none;
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-toggle {
+    padding: 0 var(--navbar-item-padding-horizontal-m); /* 2 */
+  }
+}
+/*
+ * Icon
+ * Adopts `uk-icon`
+ */
+/* Hover */
+/* Subtitle
+ ========================================================================== */
+.uk-navbar-subtitle {
+  font-size: var(--navbar-subtitle-font-size);
+}
+
+/* Justify modifier
+ ========================================================================== */
+.uk-navbar-justify .uk-navbar-left,
+.uk-navbar-justify .uk-navbar-right,
+.uk-navbar-justify .uk-navbar-nav,
+.uk-navbar-justify .uk-navbar-nav > li,
+.uk-navbar-justify .uk-navbar-item,
+.uk-navbar-justify .uk-navbar-toggle {
+  flex-grow: 1;
+}
+
+/* Style modifiers
+ ========================================================================== */
+/* Dropdown
+ ========================================================================== */
+/*
+ * Adopts `uk-drop`
+ * 1. Set a default width
+ * 2. Style
+ */
+.uk-navbar-dropdown {
+  --uk-inverse: dark;
+  background: var(--navbar-dropdown-background);
+  box-sizing: border-box; /* 3 */
+  color: var(--navbar-dropdown-color);
+  display: block; /* 1 */
+  padding: var(--navbar-dropdown-padding); /* 4 */
+  position: absolute; /* 2 */
+  width: var(--navbar-dropdown-width);
+  z-index: var(--navbar-dropdown-z-index);
+}
+
+/* Hide */
+.uk-navbar-dropdown.uk-hidden {
+  display: none;
+}
+
+/*
+ * Transform origin
+ */
+[class*=uk-navbar-dropdown-left-top] {
+  transform-origin: 100% 0;
+}
+
+[class*=uk-navbar-dropdown-right-top] {
+  transform-origin: 0 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-navbar-dropdown > :last-child {
+  margin-bottom: 0;
+}
+
+.uk-navbar-dropdown :focus-visible {
+  outline-color: var(--navbar-dropdown-focus-outline) !important;
+}
+
+/*
+ * Grid
+ * Adopts `uk-grid`
+ */
+/* Gutter Horizontal */
+.uk-navbar-dropdown .uk-drop-grid {
+  margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1);
+}
+
+.uk-navbar-dropdown .uk-drop-grid > * {
+  padding-left: var(--navbar-dropdown-grid-gutter-horizontal);
+}
+
+/* Gutter Vertical */
+.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin {
+  margin-top: var(--navbar-dropdown-grid-gutter-vertical);
+}
+
+/*
+ * Width modifier
+ */
+.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
+  width: calc(var(--navbar-dropdown-width) * 2);
+}
+
+.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
+  width: calc(var(--navbar-dropdown-width) * 3);
+}
+
+.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
+  width: calc(var(--navbar-dropdown-width) * 4);
+}
+
+.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
+  width: calc(var(--navbar-dropdown-width) * 5);
+}
+
+/* Dropdown Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+/*
+ * Items
+ */
+.uk-navbar-dropdown-nav > li > a {
+  color: var(--navbar-dropdown-nav-item-color);
+}
+
+/* Hover */
+.uk-navbar-dropdown-nav > li > a:hover {
+  color: var(--navbar-dropdown-nav-item-hover-color);
+}
+
+/* Active */
+.uk-navbar-dropdown-nav > li.uk-active > a {
+  color: var(--navbar-dropdown-nav-item-active-color);
+}
+
+/*
+ * Subtitle
+ */
+.uk-navbar-dropdown-nav .uk-nav-subtitle {
+  font-size: var(--navbar-dropdown-nav-subtitle-font-size);
+}
+
+/*
+ * Header
+ */
+.uk-navbar-dropdown-nav .uk-nav-header {
+  color: var(--navbar-dropdown-nav-header-color);
+}
+
+/*
+ * Divider
+ */
+.uk-navbar-dropdown-nav .uk-nav-divider {
+  border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
+}
+
+/*
+ * Sublists
+ */
+.uk-navbar-dropdown-nav .uk-nav-sub a {
+  color: var(--navbar-dropdown-nav-sublist-item-color);
+}
+
+.uk-navbar-dropdown-nav .uk-nav-sub a:hover,
+.uk-navbar-dropdown-nav .uk-nav-sub a:focus {
+  color: var(--navbar-dropdown-nav-sublist-item-hover-color);
+}
+
+.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
+  color: var(--navbar-dropdown-nav-sublist-item-active-color);
+}
+
+:root {
+  --navbar-background: var(--global-muted-background);
+  --navbar-gap: 20px;
+  --navbar-nav-gap: 20px;
+  --navbar-gap-m: 30px;
+  --navbar-nav-gap-m: 30px;
+  --navbar-nav-item-height: 80px;
+  --navbar-nav-item-padding-horizontal: 10px;
+  --navbar-nav-item-padding-horizontal-m: 15px;
+  --navbar-nav-item-color: var(--global-muted-color);
+  --navbar-nav-item-font-size: var(--global-font-size);
+  --navbar-nav-item-font-family: var(--global-font-family);
+  --navbar-nav-item-hover-color: var(--global-color);
+  --navbar-nav-item-onclick-color: var(--global-emphasis-color);
+  --navbar-nav-item-active-color: var(--global-emphasis-color);
+  --navbar-parent-icon-margin-left: 4px;
+  --navbar-item-padding-horizontal: 0;
+  --navbar-item-padding-horizontal-m: 0;
+  --navbar-item-color: var(--global-color);
+  --navbar-toggle-color: var(--global-muted-color);
+  --navbar-toggle-hover-color: var(--global-color);
+  --navbar-subtitle-font-size: var(--global-small-font-size);
+  --navbar-dropdown-margin: 0;
+  --navbar-dropdown-padding: 15px;
+  --navbar-dropdown-width: 200px;
+  --navbar-dropdown-background: var(--global-muted-background);
+  --navbar-dropdown-color: var(--global-color);
+  --navbar-dropdown-focus-outline: var(--base-focus-outline);
+  --navbar-dropdown-z-index: 1020;
+  --navbar-dropdown-grid-gutter-horizontal: var(--global-gutter);
+  --navbar-dropdown-grid-gutter-vertical: var(--navbar-dropdown-grid-gutter-horizontal);
+  --navbar-dropdown-nav-item-color: var(--global-muted-color);
+  --navbar-dropdown-nav-item-hover-color: var(--global-color);
+  --navbar-dropdown-nav-item-active-color: var(--global-emphasis-color);
+  --navbar-dropdown-nav-subtitle-font-size: var(--global-small-font-size);
+  --navbar-dropdown-nav-header-color: var(--global-emphasis-color);
+  --navbar-dropdown-nav-divider-border-width: var(--global-border-width);
+  --navbar-dropdown-nav-divider-border: var(--global-border);
+  --navbar-dropdown-nav-sublist-item-color: var(--global-muted-color);
+  --navbar-dropdown-nav-sublist-item-hover-color: var(--global-color);
+  --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
+  --inverse-navbar-background: var(--inverse-global-muted-background);
+  --inverse-navbar-nav-item-color: var(--inverse-global-muted-color);
+  --inverse-navbar-nav-item-hover-color: var(--inverse-global-color);
+  --inverse-navbar-nav-item-onclick-color: var(--inverse-global-emphasis-color);
+  --inverse-navbar-nav-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-navbar-item-color: var(--inverse-global-color);
+  --inverse-navbar-toggle-color: var(--inverse-global-muted-color);
+  --inverse-navbar-toggle-hover-color: var(--inverse-global-color);
+  --inverse-navbar-dropdown-background: var(--inverse-global-muted-background);
+  --inverse-navbar-dropdown-color: var(--inverse-global-muted-color);
+  --inverse-navbar-dropdown-nav-item-color: var(--inverse-global-muted-color);
+  --inverse-navbar-dropdown-nav-item-hover-color: var(--inverse-global-color);
+  --inverse-navbar-dropdown-nav-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-navbar-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+  --inverse-navbar-dropdown-nav-divider-border: var(--inverse-global-border);
+  --inverse-navbar-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+  --inverse-navbar-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+  --inverse-navbar-dropdown-nav-sublist-item-active-color: var(--inverse-global-emphasis-color);
+}

package/dist/assets/overlay.css

@@ -0,0 +1,38 @@
+/* ========================================================================
+   Component: Overlay
+ ========================================================================== */
+.uk-overlay {
+  padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-overlay > :last-child {
+  margin-bottom: 0;
+}
+
+/* Icon
+ ========================================================================== */
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Default
+ */
+.uk-overlay-default {
+  background: var(--overlay-default-background);
+}
+
+/*
+ * Primary
+ */
+.uk-overlay-primary {
+  background: var(--overlay-primary-background);
+}
+
+:root {
+  --overlay-padding-horizontal: var(--global-gutter);
+  --overlay-padding-vertical: var(--global-gutter);
+  --overlay-default-background: rgba(255, 255, 255, 0.8);
+  --overlay-primary-background: rgba(34, 34, 34, 0.8);
+}

package/dist/assets/padding.css

@@ -0,0 +1,70 @@
+/* ========================================================================
+   Component: Padding
+ ========================================================================== */
+.uk-padding {
+  padding: var(--padding);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-padding {
+    padding: var(--padding-l);
+  }
+}
+/* Small
+ ========================================================================== */
+.uk-padding-small {
+  padding: var(--small-padding);
+}
+
+/* Large
+ ========================================================================== */
+.uk-padding-large {
+  padding: var(--large-padding);
+}
+
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-padding-large {
+    padding: var(--large-padding-l);
+  }
+}
+/* Remove
+ ========================================================================== */
+.uk-padding-remove {
+  padding: 0 !important;
+}
+
+.uk-padding-remove-top {
+  padding-top: 0 !important;
+}
+
+.uk-padding-remove-bottom {
+  padding-bottom: 0 !important;
+}
+
+.uk-padding-remove-left {
+  padding-left: 0 !important;
+}
+
+.uk-padding-remove-right {
+  padding-right: 0 !important;
+}
+
+.uk-padding-remove-vertical {
+  padding-bottom: 0 !important;
+  padding-top: 0 !important;
+}
+
+.uk-padding-remove-horizontal {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+:root {
+  --padding: var(--global-gutter);
+  --padding-l: var(--global-medium-gutter);
+  --small-padding: var(--global-small-gutter);
+  --large-padding: var(--global-gutter);
+  --large-padding-l: var(--global-large-gutter);
+}

package/dist/assets/pagination.css

@@ -0,0 +1,78 @@
+/* ========================================================================
+   Component: Pagination
+ ========================================================================== */
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Gutter
+ * 3. Reset list
+ */
+.uk-pagination {
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+  list-style: none;
+  /* 2 */
+  margin-left: calc(var(--pagination-margin-horizontal) * -1);
+  /* 3 */
+  padding: 0;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ * 3. Create position context for dropdowns
+ */
+.uk-pagination > * {
+  /* 1 */
+  flex: none;
+  /* 2 */
+  padding-left: var(--pagination-margin-horizontal);
+  /* 3 */
+  position: relative;
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * 1. Prevent gap if child element is `inline-block`, e.g. an icon
+ * 2. Style
+ */
+.uk-pagination > * > * {
+  color: var(--pagination-item-color);
+  /* 1 */
+  display: block;
+  /* 2 */
+  padding: var(--pagination-item-padding-vertical) var(--pagination-item-padding-horizontal);
+}
+
+/* Hover + Focus */
+.uk-pagination > * > :hover,
+.uk-pagination > * > :focus {
+  color: var(--pagination-item-hover-color);
+  text-decoration: var(--pagination-item-hover-text-decoration);
+}
+
+/* Active */
+.uk-pagination > .uk-active > * {
+  color: var(--pagination-item-active-color);
+}
+
+/* Disabled */
+.uk-pagination > .uk-disabled > * {
+  color: var(--pagination-item-disabled-color);
+}
+
+:root {
+  --pagination-margin-horizontal: 0;
+  --pagination-item-padding-vertical: 5px;
+  --pagination-item-padding-horizontal: 10px;
+  --pagination-item-color: var(--global-muted-color);
+  --pagination-item-hover-color: var(--global-color);
+  --pagination-item-hover-text-decoration: none;
+  --pagination-item-active-color: var(--global-color);
+  --pagination-item-disabled-color: var(--global-muted-color);
+  --inverse-pagination-item-color: var(--inverse-global-muted-color);
+  --inverse-pagination-item-hover-color: var(--inverse-global-color);
+  --inverse-pagination-item-active-color: var(--inverse-global-color);
+  --inverse-pagination-item-disabled-color: var(--inverse-global-muted-color);
+}

package/dist/assets/placeholder.css

@@ -0,0 +1,27 @@
+/* ========================================================================
+   Component: Placeholder
+ ========================================================================== */
+.uk-placeholder {
+  background: var(--placeholder-background);
+  margin-bottom: var(--placeholder-margin-vertical);
+  padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
+}
+
+/* Add margin if adjacent element */
+* + .uk-placeholder {
+  margin-top: var(--placeholder-margin-vertical);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-placeholder > :last-child {
+  margin-bottom: 0;
+}
+
+:root {
+  --placeholder-margin-vertical: var(--global-margin);
+  --placeholder-padding-vertical: var(--global-gutter);
+  --placeholder-padding-horizontal: var(--global-gutter);
+  --placeholder-background: var(--global-muted-background);
+}