@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/nav.css

@@ -0,0 +1,406 @@
+/* ========================================================================
+   Component: Nav
+ ========================================================================== */
+/*
+ * Reset
+ */
+.uk-nav,
+.uk-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Reset link
+ */
+.uk-nav li > a,
+.uk-nav-item > a {
+  align-items: center;
+  column-gap: 0.25em; /* 2 */
+  display: flex; /* 1 */
+  text-decoration: none; /* 3 */
+}
+
+/*
+ * Items
+ * Must target `a` elements to exclude other elements (e.g. lists)
+ */
+.uk-nav > li > a,
+.uk-nav > .uk-nav-item > a {
+  padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
+}
+
+.uk-nav-item {
+  position: relative;
+  white-space: nowrap;
+}
+
+/* Disabled */
+.uk-nav-item.uk-disabled {
+  cursor: not-allowed;
+  opacity: 0.85;
+}
+
+/* Modes, elements etc.
+ ========================================================================== */
+.uk-nav-overflow {
+  display: flex;
+}
+.uk-nav-overflow-item {
+  flex: none;
+}
+.uk-nav-hidden, .uk-nav-submenu-hidden {
+  display: none;
+}
+.uk-nav-vertical.uk-nav-sub, .uk-nav-vertical-left.uk-nav-sub, .uk-nav-vertical-right.uk-nav-sub {
+  border-right: 0;
+  max-height: calc(100vh - 100px);
+  min-width: 160px;
+  overflow: hidden;
+  padding: 0;
+}
+.uk-nav-vertical.uk-nav-sub:not([class*=-active]), .uk-nav-vertical-left.uk-nav-sub:not([class*=-active]), .uk-nav-vertical-right.uk-nav-sub:not([class*=-active]) {
+  overflow: hidden auto;
+}
+.uk-nav-vertical.uk-nav-sub .uk-nav-item, .uk-nav-vertical-left.uk-nav-sub .uk-nav-item, .uk-nav-vertical-right.uk-nav-sub .uk-nav-item {
+  border-right: 0;
+  left: 0;
+  margin-left: 0;
+}
+.uk-nav-vertical.uk-nav-sub .uk-nav-item::after, .uk-nav-vertical-left.uk-nav-sub .uk-nav-item::after, .uk-nav-vertical-right.uk-nav-sub .uk-nav-item::after {
+  border-right: 0;
+}
+.uk-nav-vertical.uk-nav-sub > .uk-nav-item,
+.uk-nav-vertical.uk-nav-sub > .uk-nav-submenu, .uk-nav-vertical-left.uk-nav-sub > .uk-nav-item,
+.uk-nav-vertical-left.uk-nav-sub > .uk-nav-submenu, .uk-nav-vertical-right.uk-nav-sub > .uk-nav-item,
+.uk-nav-vertical-right.uk-nav-sub > .uk-nav-submenu {
+  transform-origin: 0 0;
+}
+
+/* Submenu
+ ========================================================================== */
+.uk-nav-submenu-title {
+  align-items: center;
+  column-gap: 0.25em; /* 2 */
+  cursor: pointer;
+  display: flex; /* 1 */
+  padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal);
+  position: relative;
+  text-decoration: none; /* 3 */
+  white-space: nowrap;
+  /* 4 */
+}
+.uk-nav-submenu-title > * {
+  flex: none;
+}
+.uk-nav-submenu-title {
+  /* 4 */
+  /* Remove default focus style */
+}
+.uk-nav-submenu-title .uk-nav-submenu-title:focus {
+  outline: none;
+}
+.uk-nav-submenu-arrow {
+  color: var(--nav-default-item-color);
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform var(--transition-duration) var(--ease-in-out);
+  width: 10px;
+}
+.uk-nav-submenu-arrow::before, .uk-nav-submenu-arrow::after {
+  background-color: currentColor;
+  border-radius: 2px;
+  content: "";
+  height: 1.5px;
+  position: absolute;
+  transition: background var(--transition-duration) var(--ease-in-out), transform var(--transition-duration) var(--ease-in-out), top var(--transition-duration) var(--ease-in-out), color var(--transition-duration) var(--ease-in-out);
+  width: 6px;
+}
+.uk-nav-submenu-vertical .uk-nav-submenu-arrow::before {
+  transform: rotate(45deg) translateY(-2.5px);
+}
+.uk-nav-submenu-vertical .uk-nav-submenu-arrow::after {
+  transform: rotate(-45deg) translateY(2.5px);
+}
+.uk-nav-submenu-inline .uk-nav-submenu-arrow::before {
+  transform: rotate(-45deg) translateX(2.5px);
+}
+.uk-nav-submenu-inline .uk-nav-submenu-arrow::after {
+  transform: rotate(45deg) translateX(-2.5px);
+}
+.uk-nav-submenu-open.uk-nav-inline > .uk-nav-submenu-title > .uk-nav-submenu-arrow {
+  transform: translateY(-2px);
+}
+.uk-nav-submenu-open.uk-nav-inline > .uk-nav-submenu-title > .uk-nav-submenu-arrow::after {
+  transform: rotate(-45deg) translateX(-2.5px);
+}
+.uk-nav-submenu-open.uk-nav-inline > .uk-nav-submenu-title > .uk-nav-submenu-arrow::before {
+  transform: rotate(45deg) translateX(2.5px);
+}
+.uk-nav-submenu-horizontal .uk-nav-submenu-arrow {
+  display: none;
+}
+.uk-nav-submenu-popup {
+  position: absolute;
+  transform-origin: 0 0;
+}
+.uk-nav-submenu-popup::before {
+  content: " ";
+  height: 100%;
+  inset: -7px 0 0;
+  opacity: 0.0001;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+.uk-nav-submenu-placement-right-top::before {
+  left: -7px;
+  top: 0;
+}
+
+/* Sublists
+ ========================================================================== */
+/*
+ * Level 2
+ * `ul` needed for higher specificity to override padding
+ */
+ul.uk-nav-sub {
+  padding: 0 0 0 var(--nav-sublist-padding-left);
+}
+
+/*
+ * Level 3 and deeper
+ */
+.uk-nav-sub ul {
+  padding-left: var(--nav-sublist-deeper-padding-left);
+}
+
+/*
+ * Items
+ */
+.uk-nav-sub a {
+  padding: var(--nav-sublist-item-padding-vertical) 0;
+}
+
+/* Header + Item group title
+ ========================================================================== */
+.uk-nav-header,
+.uk-nav-group-header {
+  font-size: var(--nav-header-font-size);
+  padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
+  text-transform: var(--nav-header-text-transform);
+}
+
+.uk-nav-header:not(:first-child),
+.uk-nav-group-header:not(:first-child) {
+  margin-top: var(--nav-header-margin-top);
+}
+
+/* Divider
+ ========================================================================== */
+.uk-nav-divider {
+  border-top: var(--nav-divider-border-width) solid var(--nav-divider-border);
+  margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
+}
+
+/* Default modifier
+ ========================================================================== */
+/*
+ * Items
+ */
+.uk-nav-default > li > a {
+  color: var(--nav-default-item-color);
+}
+
+/* Hover + Focus */
+.uk-nav-default > li.uk-hover > a,
+.uk-nav-default > li > a:hover,
+.uk-nav-default > li > a:focus {
+  color: var(--nav-default-item-hover-color);
+}
+
+/* Active */
+.uk-nav-default > li.uk-active > a {
+  color: var(--nav-default-item-active-color);
+}
+
+/*
+ * Header
+ */
+.uk-nav-default .uk-nav-header {
+  color: var(--nav-default-header-color);
+}
+
+/*
+ * Divider
+ */
+.uk-nav-default .uk-nav-divider {
+  border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
+}
+
+/*
+ * Sublists
+ */
+.uk-nav-default .uk-nav-sub a {
+  color: var(--nav-default-sublist-item-color);
+}
+
+.uk-nav-default .uk-nav-sub a:hover,
+.uk-nav-default .uk-nav-sub a:focus {
+  color: var(--nav-default-sublist-item-hover-color);
+}
+
+.uk-nav-default .uk-nav-sub li.uk-active > a {
+  color: var(--nav-default-sublist-item-active-color);
+}
+
+/* Primary modifier
+ ========================================================================== */
+/*
+ * Items
+ */
+.uk-nav-primary > li > a {
+  color: var(--nav-primary-item-color);
+  font-size: var(--nav-primary-item-font-size);
+  line-height: var(--nav-primary-item-line-height);
+}
+
+/* Hover + Focus */
+.uk-nav-primary > li.uk-hover > a,
+.uk-nav-primary > li > a:hover,
+.uk-nav-primary > li > a:focus {
+  color: var(--nav-primary-item-hover-color);
+}
+
+/* Active */
+.uk-nav-primary > li.uk-active > a {
+  color: var(--nav-primary-item-active-color);
+}
+
+/*
+ * Header
+ */
+.uk-nav-primary .uk-nav-header {
+  color: var(--nav-primary-header-color);
+}
+
+/*
+ * Divider
+ */
+.uk-nav-primary .uk-nav-divider {
+  border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
+}
+
+/*
+ * Sublists
+ */
+.uk-nav-primary .uk-nav-sub a {
+  color: var(--nav-primary-sublist-item-color);
+}
+
+.uk-nav-primary .uk-nav-sub a:hover,
+.uk-nav-primary .uk-nav-sub a:focus {
+  color: var(--nav-primary-sublist-item-hover-color);
+}
+
+.uk-nav-primary .uk-nav-sub li.uk-active > a {
+  color: var(--nav-primary-sublist-item-active-color);
+}
+
+/* Alignment modifier
+ ========================================================================== */
+/*
+ * 1. Center header
+ * 2. Center items
+ */
+/* 1 */
+.uk-nav-center {
+  text-align: center;
+}
+
+/* 2 */
+.uk-nav-center li > a {
+  justify-content: center;
+}
+
+/* Sublists */
+.uk-nav-center .uk-nav-sub,
+.uk-nav-center .uk-nav-sub ul {
+  padding-left: 0;
+}
+
+/* Style modifier
+ ========================================================================== */
+.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
+  border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
+  margin-top: var(--nav-dividers-margin-top);
+  padding-top: var(--nav-dividers-margin-top);
+}
+
+:root {
+  --nav-item-padding-horizontal: 0;
+  --nav-item-padding-vertical: 5px;
+  --nav-sublist-padding-vertical: 5px;
+  --nav-sublist-padding-left: 15px;
+  --nav-sublist-deeper-padding-left: 15px;
+  --nav-sublist-item-padding-vertical: 2px;
+  --nav-parent-icon-width: calc(var(--global-line-height) * 1em);
+  --nav-parent-icon-height: var(--nav-parent-icon-width);
+  --nav-parent-icon-color: var(--global-color);
+  --nav-header-padding-horizontal: var(--nav-item-padding-horizontal);
+  --nav-header-padding-vertical: var(--nav-item-padding-vertical);
+  --nav-header-font-size: var(--global-small-font-size);
+  --nav-header-text-transform: uppercase;
+  --nav-header-margin-top: var(--global-margin);
+  --nav-divider-border-width: var(--global-border-width);
+  --nav-divider-border: var(--global-border);
+  --nav-divider-margin-horizontal: 0;
+  --nav-divider-margin-vertical: 5px;
+  --nav-default-item-color: var(--global-muted-color);
+  --nav-default-item-hover-color: var(--global-color);
+  --nav-default-item-active-color: var(--global-emphasis-color);
+  --nav-default-item-disable-color: var(--global-muted-color);
+  --nav-default-header-color: var(--global-emphasis-color);
+  --nav-default-divider-border-width: var(--global-border-width);
+  --nav-default-divider-border: var(--global-border);
+  --nav-default-sublist-item-color: var(--global-muted-color);
+  --nav-default-sublist-item-hover-color: var(--global-color);
+  --nav-default-sublist-item-active-color: var(--global-emphasis-color);
+  --nav-default-sublist-item-disable-color: var(--global-muted-color);
+  --nav-primary-item-font-size: var(--global-large-font-size);
+  --nav-primary-item-line-height: var(--global-line-height);
+  --nav-primary-item-color: var(--global-muted-color);
+  --nav-primary-item-hover-color: var(--global-color);
+  --nav-primary-item-active-color: var(--global-emphasis-color);
+  --nav-primary-header-color: var(--global-emphasis-color);
+  --nav-primary-divider-border-width: var(--global-border-width);
+  --nav-primary-divider-border: var(--global-border);
+  --nav-primary-sublist-item-color: var(--global-muted-color);
+  --nav-primary-sublist-item-hover-color: var(--global-color);
+  --nav-primary-sublist-item-active-color: var(--global-emphasis-color);
+  --nav-dividers-margin-top: 0;
+  --nav-dividers-border-width: var(--global-border-width);
+  --nav-dividers-border: var(--global-border);
+  --inverse-nav-parent-icon-color: var(--inverse-global-color);
+  --inverse-nav-default-item-color: var(--inverse-global-muted-color);
+  --inverse-nav-default-item-hover-color: var(--inverse-global-color);
+  --inverse-nav-default-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-nav-default-header-color: var(--inverse-global-emphasis-color);
+  --inverse-nav-default-divider-border: var(--inverse-global-border);
+  --inverse-nav-default-sublist-item-color: var(--inverse-global-muted-color);
+  --inverse-nav-default-sublist-item-hover-color: var(--inverse-global-color);
+  --inverse-nav-default-sublist-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-nav-primary-item-color: var(--inverse-global-muted-color);
+  --inverse-nav-primary-item-hover-color: var(--inverse-global-color);
+  --inverse-nav-primary-item-active-color: var(--inverse-global-emphasis-color);
+  --inverse-nav-primary-header-color: var(--inverse-global-emphasis-color);
+  --inverse-nav-primary-divider-border: var(--inverse-global-border);
+  --inverse-nav-primary-sublist-item-color: var(--inverse-global-muted-color);
+  --inverse-nav-primary-sublist-item-hover-color: var(--inverse-global-color);
+  --inverse-nav-primary-sublist-item-active-color: var(--inverse-global-emphasis-color);
+}