@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/tabs.css

@@ -0,0 +1,631 @@
+/* ========================================================================
+   Component: Tabs
+ ========================================================================== */
+.uk-tabs {
+  display: flex;
+  overflow: hidden;
+}
+
+/*
+ * Nav
+ */
+.uk-tabs-nav {
+  align-items: center;
+  display: flex;
+  flex: none;
+  position: relative;
+}
+
+.uk-tabs-nav-wrap {
+  align-self: stretch;
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+  position: relative;
+  transform: translate(0);
+  white-space: nowrap;
+}
+
+.uk-tabs-nav-wrap::before,
+.uk-tabs-nav-wrap::after {
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--transition-duration);
+  z-index: 1;
+}
+
+/*
+ * List
+ */
+.uk-tabs-nav-list {
+  display: flex;
+  position: relative;
+  transition: transform var(--transition-duration);
+}
+
+/*
+ * Operations
+ */
+.uk-tabs-nav-operations {
+  align-self: stretch;
+  display: flex;
+}
+
+.uk-tabs-nav-operations-hidden {
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+
+.uk-tabs-nav-more {
+  --icon-size: var(--tabs-nav-more-font-size);
+  background: transparent;
+  border: 0;
+  color: var(--tabs-tab-color);
+  font-size: var(--tabs-nav-more-font-size);
+  padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+  position: relative;
+}
+
+.uk-tabs-nav-more::after {
+  bottom: 0;
+  content: "";
+  height: 5px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: translateY(100%);
+}
+
+.uk-tabs-nav-more .uk-icon * {
+  width: 100%;
+}
+
+.uk-tabs-nav-add {
+  background: var(--tabs-card-tab-background);
+  border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+  color: var(--tabs-tab-color);
+  cursor: pointer;
+  outline: 0 none;
+  padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
+  transition: all var(--transition-duration) var(--ease-in-out);
+}
+
+.uk-tabs-nav-add:hover {
+  color: var(--tabs-tab-hover-color);
+}
+
+.uk-tabs-nav-add:active,
+.uk-tabs-nav-add:focus {
+  color: var(--tabs-tab-active-color);
+}
+
+.uk-tabs-extra-content {
+  flex: none;
+}
+
+.uk-tabs-centered .uk-tabs-nav-wrap:not([class*=uk-tabs-nav-wrap-ping]) {
+  justify-content: center;
+}
+
+/* Items
+ ========================================================================== */
+.uk-tabs-tab {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--tabs-tab-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--tabs-tab-font-size);
+  justify-content: space-between;
+  outline: none;
+  padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
+  position: relative;
+}
+
+/* Hover + Focus */
+.uk-tabs-tab:not(.uk-tabs-tab-disabled):hover,
+.uk-tabs-tab:not(.uk-tabs-tab-disabled):focus {
+  color: var(--tabs-tab-hover-color);
+}
+
+/* Active */
+.uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
+  color: var(--tabs-tab-active-color);
+}
+
+/* Disabled */
+.uk-tabs-tab-disabled {
+  color: var(--tabs-tab-disabled-color);
+  cursor: not-allowed;
+}
+
+/*
+ * Gutter
+ */
+.uk-tabs-tab + .uk-tabs-tab {
+  margin: 0 0 0 var(--tabs-margin-horizontal);
+}
+
+/*
+ * Remove
+ */
+.uk-tabs-tab-remove {
+  --icon-size: var(--tabs-tab-remove-font-size);
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--tabs-tab-remove-color);
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  font-size: var(--tabs-tab-remove-font-size);
+  margin-left: var(--tabs-card-gutter);
+  margin-right: calc(var(--tabs-card-gutter) * -1);
+  outline: 0 none;
+  padding: 0;
+  transition: all var(--transition-duration);
+}
+
+.uk-tabs-tab-remove:hover {
+  color: var(--tabs-tab-remove-hover-color);
+}
+
+.uk-tabs-tab-remove:focus,
+.uk-tabs-tab-remove:active {
+  color: var(--tabs-tab-remove-active-color);
+}
+
+/* Card modifier
+ ========================================================================== */
+.uk-tabs-card .uk-tabs-tab {
+  background: var(--tabs-card-tab-background);
+  border: var(--tabs-card-tab-border-width) var(--tabs-card-tab-border-style) var(--tabs-card-tab-border);
+  margin: 0;
+  padding: var(--tabs-card-tab-padding-vertical) var(--tabs-card-tab-padding-horizontal);
+  transition: all var(--transition-duration) var(--ease-in-out);
+}
+
+.uk-tabs-card .uk-tabs-tab-active {
+  background-color: var(--tabs-card-tab-active-background);
+  color: var(--tabs-card-tab-active-color);
+}
+
+.uk-tabs-card .uk-tabs-ink-bar {
+  visibility: hidden;
+}
+
+/* Content
+ ========================================================================== */
+.uk-tabs-content {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+}
+
+/* Tabpane
+ ========================================================================== */
+.uk-tabs-tabpane-hidden {
+  display: none;
+}
+
+/* Position modifier
+ ========================================================================== */
+/*
+ * Bottom + Top
+ */
+.uk-tabs-bottom,
+.uk-tabs-top {
+  flex-direction: column;
+}
+.uk-tabs-bottom > .uk-tabs-nav::before,
+.uk-tabs-top > .uk-tabs-nav::before {
+  border-bottom: var(--global-border-width) var(--global-border-style) var(--global-border);
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+}
+.uk-tabs-bottom .uk-tabs-nav-add,
+.uk-tabs-top .uk-tabs-nav-add {
+  margin: 0 0 0 var(--tabs-margin-horizontal);
+}
+.uk-tabs-bottom .uk-tabs-ink-bar,
+.uk-tabs-top .uk-tabs-ink-bar {
+  height: var(--tabs-ink-bar-height);
+}
+.uk-tabs-bottom .uk-tabs-ink-bar-animated,
+.uk-tabs-top .uk-tabs-ink-bar-animated {
+  transition: width var(--transition-duration), left var(--transition-duration), right var(--transition-duration);
+}
+.uk-tabs-bottom.uk-tabs-card .uk-tabs-tab + .uk-tabs-tab,
+.uk-tabs-top.uk-tabs-card .uk-tabs-tab + .uk-tabs-tab {
+  margin-left: var(--tabs-card-gutter);
+}
+.uk-tabs-bottom.uk-tabs-card .uk-tabs-nav-add,
+.uk-tabs-top.uk-tabs-card .uk-tabs-nav-add {
+  margin: 0 0 0 var(--tabs-card-gutter);
+}
+
+/*
+ * Bottom
+ */
+.uk-tabs-bottom > .uk-tabs-nav {
+  margin-top: var(--tabs-margin-vertical);
+  order: 1;
+}
+.uk-tabs-bottom > .uk-tabs-nav::before {
+  top: 0;
+}
+.uk-tabs-bottom .uk-tabs-ink-bar {
+  top: 0;
+}
+.uk-tabs-bottom.uk-tabs-card .uk-tabs-tab {
+  border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+}
+.uk-tabs-bottom.uk-tabs-card .uk-tabs-tab-active {
+  border-top-color: var(--tabs-card-tab-active-background);
+}
+.uk-tabs-bottom .uk-tabs-nav-add {
+  border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
+}
+.uk-tabs-bottom .uk-tabs-content-holder {
+  order: 0;
+}
+
+/*
+ * Top
+ */
+.uk-tabs-top > .uk-tabs-nav {
+  margin-bottom: var(--tabs-margin-vertical);
+}
+.uk-tabs-top > .uk-tabs-nav::before {
+  bottom: 0;
+}
+.uk-tabs-top .uk-tabs-ink-bar {
+  bottom: 0;
+}
+.uk-tabs-top.uk-tabs-card .uk-tabs-tab {
+  border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+}
+.uk-tabs-top.uk-tabs-card .uk-tabs-tab-active {
+  border-bottom-color: var(--tabs-card-tab-active-background);
+}
+.uk-tabs-top .uk-tabs-nav-add {
+  border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
+}
+
+/*
+ * Left + Right
+ */
+.uk-tabs-left .uk-tabs-nav,
+.uk-tabs-right .uk-tabs-nav {
+  flex-direction: column;
+  min-width: 50px;
+}
+.uk-tabs-left .uk-tabs-nav-wrap,
+.uk-tabs-right .uk-tabs-nav-wrap {
+  flex-direction: column;
+}
+.uk-tabs-left .uk-tabs-tab,
+.uk-tabs-right .uk-tabs-tab {
+  text-align: center;
+}
+.uk-tabs-left .uk-tabs-tab + .uk-tabs-tab,
+.uk-tabs-right .uk-tabs-tab + .uk-tabs-tab {
+  margin: var(--tabs-margin-vertical) 0 0 0;
+}
+.uk-tabs-left .uk-tabs-ink-bar,
+.uk-tabs-right .uk-tabs-ink-bar {
+  width: var(--tabs-ink-bar-width);
+}
+.uk-tabs-left .uk-tabs-ink-bar-animated,
+.uk-tabs-right .uk-tabs-ink-bar-animated {
+  transition: height var(--transition-duration), top var(--transition-duration);
+}
+.uk-tabs-left.uk-tabs-card .uk-tabs-tab + .uk-tabs-tab,
+.uk-tabs-right.uk-tabs-card .uk-tabs-tab + .uk-tabs-tab {
+  margin-top: var(--tabs-card-gutter);
+}
+.uk-tabs-left .uk-tabs-nav-add,
+.uk-tabs-right .uk-tabs-nav-add {
+  margin: var(--tabs-card-gutter) 0 0 0;
+}
+.uk-tabs-left .uk-tabs-nav-list,
+.uk-tabs-left .uk-tabs-nav-operations,
+.uk-tabs-right .uk-tabs-nav-list,
+.uk-tabs-right .uk-tabs-nav-operations {
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+.uk-tabs-left.uk-tabs-centered .uk-tabs-nav-list,
+.uk-tabs-right.uk-tabs-centered .uk-tabs-nav-list {
+  flex: none;
+}
+
+/*
+ * Left
+ */
+.uk-tabs-left .uk-tabs-content-holder {
+  border-left: var(--global-border-width) var(--global-border-style) var(--global-border);
+  margin-left: calc(var(--global-border-width) * -1);
+}
+.uk-tabs-left .uk-tabs-content > .uk-tabs-tabpane {
+  padding-left: var(--tabs-margin-horizontal);
+}
+.uk-tabs-left .uk-tabs-ink-bar {
+  right: 0;
+}
+.uk-tabs-left.uk-tabs-card .uk-tabs-tab {
+  border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+}
+.uk-tabs-left.uk-tabs-card .uk-tabs-tab-active {
+  border-right-color: var(--tabs-card-tab-active-background);
+}
+.uk-tabs-left .uk-tabs-nav-add {
+  border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
+}
+
+/*
+ * Right
+ */
+.uk-tabs-right .uk-tabs-nav {
+  order: 1;
+}
+.uk-tabs-right .uk-tabs-content-holder {
+  border-right: var(--global-border-width) var(--global-border-style) var(--global-border);
+  margin-right: calc(var(--global-border-width) * -1);
+}
+.uk-tabs-right .uk-tabs-content > .uk-tabs-tabpane {
+  padding-right: var(--tabs-margin-horizontal);
+}
+.uk-tabs-right .uk-tabs-ink-bar {
+  left: 0;
+}
+.uk-tabs-right.uk-tabs-card .uk-tabs-tab {
+  border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+}
+.uk-tabs-right.uk-tabs-card .uk-tabs-tab-active {
+  border-left-color: var(--tabs-card-tab-active-background);
+}
+.uk-tabs-right .uk-tabs-nav-add {
+  border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
+}
+
+/* Right to Left Direction
+ ========================================================================== */
+.uk-tabs-rtl {
+  direction: rtl;
+}
+
+.uk-tabs-rtl .uk-tabs-tab-remove {
+  margin-left: calc(var(--tabs-card-gutter) * -1);
+  margin-right: var(--tabs-card-gutter);
+}
+
+.uk-tabs-rtl.uk-tabs-bottom .uk-tabs-tab,
+.uk-tabs-rtl.uk-tabs-top .uk-tabs-tab {
+  margin: 0 0 0 var(--tabs-margin-horizontal);
+}
+.uk-tabs-rtl.uk-tabs-bottom .uk-tabs-tab:last-of-type,
+.uk-tabs-rtl.uk-tabs-top .uk-tabs-tab:last-of-type {
+  margin-left: 0;
+}
+.uk-tabs-rtl.uk-tabs-bottom .uk-tabs-tab .uk-tabs-tab-remove,
+.uk-tabs-rtl.uk-tabs-top .uk-tabs-tab .uk-tabs-tab-remove {
+  margin-left: calc(var(--tabs-card-tab-padding-horizontal) * -1);
+  margin-right: var(--tabs-card-tab-padding-horizontal);
+}
+
+.uk-tabs-rtl.uk-tabs-left .uk-tabs-nav {
+  order: 1;
+}
+
+.uk-tabs-rtl.uk-tabs-left .uk-tabs-content-holder {
+  order: 0;
+}
+
+.uk-tabs-rtl.uk-tabs-right .uk-tabs-nav {
+  order: 0;
+}
+
+.uk-tabs-rtl.uk-tabs-right .uk-tabs-content-holder {
+  order: 1;
+}
+
+/* Size modifier
+ ========================================================================== */
+.uk-tabs-medium .uk-tabs-tab {
+  padding: var(--tabs-medium-tab-padding-vertical) var(--tabs-medium-tab-padding-horizontal);
+}
+
+.uk-tabs-large .uk-tabs-tab {
+  padding: var(--tabs-large-tab-padding-vertical) var(--tabs-large-tab-padding-horizontal);
+}
+
+.uk-tabs-medium.uk-tabs-card .uk-tabs-tab,
+.uk-tabs-medium.uk-tabs-card .uk-tabs-nav-add {
+  padding: var(--tabs-card-medium-tab-padding-vertical) var(--tabs-card-medium-tab-padding-horizontal);
+}
+
+.uk-tabs-large.uk-tabs-card .uk-tabs-tab,
+.uk-tabs-large.uk-tabs-card .uk-tabs-nav-add {
+  padding: var(--tabs-card-large-tab-padding-vertical) var(--tabs-card-large-tab-padding-horizontal);
+}
+
+.uk-tabs-dropdown {
+  box-sizing: border-box;
+  display: block;
+  left: -9999px;
+  line-height: normal;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  top: -9999px;
+  z-index: calc(var(--global-z-index) + 50);
+}
+
+.uk-tabs-dropdown-hidden {
+  display: none;
+}
+
+.uk-tabs-dropdown-menu {
+  background-clip: padding-box;
+  background-color: var(--tabs-dropdown-background);
+  border-radius: var(--tabs-dropdown-border-radius);
+  box-shadow: none;
+  list-style-type: none;
+  margin: 0;
+  max-height: 200px;
+  outline: none;
+  overflow: hidden auto;
+  padding: 0;
+  text-align: left;
+}
+
+.uk-tabs-dropdown-menu-item {
+  align-items: center;
+  color: var(--tabs-dropdown-item-color);
+  cursor: pointer;
+  display: flex;
+  font-weight: normal;
+  margin: 0;
+  min-width: 120px;
+  overflow: hidden;
+  padding: var(--tabs-dropdown-item-padding-vertical) var(--tabs-dropdown-item-padding-horizontal);
+  text-overflow: ellipsis;
+  transition: all var(--transition-duration);
+  white-space: nowrap;
+}
+
+.uk-tabs-dropdown-menu-item-disabled,
+.uk-tabs-dropdown-menu-item-disabled:hover {
+  background: transparent;
+  color: var(--tabs-dropdown-item-disabled-color);
+  cursor: not-allowed;
+}
+
+.uk-tabs-dropdown-menu-item:hover {
+  background-color: var(--tabs-dropdown-item-hover-background);
+  color: var(--tabs-dropdown-item-hover-color);
+}
+
+.uk-tabs-dropdown-menu-item > span {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.uk-tabs-dropdown-menu-item-remove {
+  --icon-size: var(--tabs-tab-remove-font-size);
+  background: transparent;
+  border: 0;
+  color: var(--tabs-tab-remove-color);
+  cursor: pointer;
+  flex: none;
+  font-size: var(--tabs-tab-remove-font-size);
+  margin-left: var(--tabs-card-gutter);
+}
+
+.uk-tabs-dropdown-menu-item-remove:hover {
+  color: var(--tabs-tab-remove-hover-color);
+}
+
+.uk-tabs-dropdown-rtl {
+  direction: rtl;
+}
+
+.uk-tabs-dropdown-rtl .uk-tabs-dropdown-menu-item {
+  text-align: right;
+}
+
+.uk-tabs-ink-bar {
+  background: var(--tabs-ink-bar-color);
+  pointer-events: none;
+  position: absolute;
+}
+
+.uk-tabs-motion-switch-appear,
+.uk-tabs-motion-switch-enter {
+  transition: none;
+}
+
+.uk-tabs-motion-switch-appear-start,
+.uk-tabs-motion-switch-enter-start {
+  opacity: 0;
+}
+
+.uk-tabs-motion-switch-appear-active,
+.uk-tabs-motion-switch-enter-active {
+  opacity: 1;
+  transition: opacity var(--transition-duration);
+}
+
+.uk-tabs-motion-switch-leave {
+  inset: 0;
+  position: absolute;
+  transition: none;
+}
+
+.uk-tabs-motion-switch-leave-start {
+  opacity: 1;
+}
+
+.uk-tabs-motion-switch-leave-active {
+  opacity: 0;
+  transition: opacity var(--transition-duration);
+}
+
+:root {
+  --tabs-margin-horizontal: 20px;
+  --tabs-margin-vertical: 10px;
+  --tabs-tab-padding-horizontal: 15px;
+  --tabs-tab-padding-vertical: 10px;
+  --tabs-medium-tab-padding-horizontal: 20px;
+  --tabs-medium-tab-padding-vertical: 15px;
+  --tabs-large-tab-padding-horizontal: 25px;
+  --tabs-large-tab-padding-vertical: 20px;
+  --tabs-tab-font-size: var(--global-font-size);
+  --tabs-tab-color: var(--global-color);
+  --tabs-tab-hover-color: var(--global-primary-color);
+  --tabs-tab-active-color: var(--global-primary-color);
+  --tabs-tab-disabled-color: var(--global-muted-color);
+  --tabs-tab-remove-color: var(--global-muted-color);
+  --tabs-tab-remove-font-size: var(--global-font-size);
+  --tabs-tab-remove-hover-color: var(--global-danger-color);
+  --tabs-tab-remove-active-color: var(--global-danger-color);
+  --tabs-nav-more-font-size: var(--global-font-size);
+  --tabs-ink-bar-color: var(--global-primary-color);
+  --tabs-ink-bar-height: 2px;
+  --tabs-ink-bar-width: 2px;
+  --tabs-card-tab-background: var(--global-muted-background);
+  --tabs-card-tab-border-width: var(--global-border-width);
+  --tabs-card-tab-border-style: var(--global-border-style);
+  --tabs-card-tab-border: var(--global-border);
+  --tabs-card-tab-border-radius: var(--global-border-radius);
+  --tabs-card-tab-padding-horizontal: var(--tabs-tab-padding-horizontal);
+  --tabs-card-tab-padding-vertical: var(--tabs-tab-padding-vertical);
+  --tabs-card-medium-tab-padding-horizontal: var(--tabs-medium-tab-padding-horizontal);
+  --tabs-card-medium-tab-padding-vertical: var(--tabs-medium-tab-padding-vertical);
+  --tabs-card-large-tab-padding-horizontal: var(--tabs-large-tab-padding-horizontal);
+  --tabs-card-large-tab-padding-vertical: var(--tabs-large-tab-padding-vertical);
+  --tabs-card-tab-active-background: var(--global-background);
+  --tabs-card-tab-active-color: var(--global-emphasis-color);
+  --tabs-card-gutter: var(--global-xsmall-gutter);
+  --tabs-dropdown-background: var(--dropdown-background);
+  --tabs-dropdown-border-radius: var(--global-border-radius);
+  --tabs-dropdown-item-color: var(--tabs-tab-color);
+  --tabs-dropdown-item-hover-color: var(--global-inverse-color);
+  --tabs-dropdown-item-disabled-color: var(--tabs-tab-disabled-color);
+  --tabs-dropdown-item-hover-background: var(--global-primary-background);
+  --tabs-dropdown-item-padding-horizontal: var(--tabs-tab-padding-horizontal);
+  --tabs-dropdown-item-padding-vertical: var(--tabs-tab-padding-vertical);
+  --inverse-tabs-tab-color: var(--inverse-global-muted-color);
+  --inverse-tabs-tab-hover-color: var(--inverse-global-color);
+  --inverse-tabs-tab-active-color: var(--inverse-global-emphasis-color);
+  --inverse-tabs-tab-disabled-color: var(--inverse-global-muted-color);
+  --inverse-tabs-ink-bar-color: var(--inverse-global-primary-background);
+}