@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/esm/components/Tabs/index.scss

@@ -1,772 +0,0 @@
-// Name:            Tabs
-// Description:     Component to create a tabbed navigation
-//
-// Component:       `uk-tabs`
-//
-// Modifiers:       `uk-tabs-bottom`
-//                  `uk-tabs-left`
-//                  `uk-tabs-right`
-//                  `uk-tabs-large`
-//
-// States:          `uk-active`
-//                  `uk-disabled`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Tabs
- ========================================================================== */
-
-.uk-tabs {
-    display: flex;
-    overflow: hidden;
-}
-
-/*
- * Nav
- */
-
-.uk-tabs-nav {
-    align-items: center;
-    display: flex;
-    flex: none;
-    position: relative;
-    @if mixin-exists(hook-tabs) {
-        @include hook-tabs;
-    }
-}
-
-.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;
-    min-width: var(--tabs-card-height);
-    outline: 0 none;
-    padding: 0 var(--small-padding);
-    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;
-    @if mixin-exists(hook-tabs-tab) {
-        @include hook-tabs-tab;
-    }
-}
-
-/* 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);
-    @if mixin-exists(hook-tabs-tab-hover) {
-        @include hook-tabs-tab-hover;
-    }
-}
-
-/* Active */
-.uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
-    color: var(--tabs-tab-active-color);
-    @if mixin-exists(hook-tabs-tab-active) {
-        @include hook-tabs-tab-active;
-    }
-}
-
-/* Disabled */
-.uk-tabs-tab-disabled {
-    color: var(--tabs-tab-disabled-color);
-    cursor: not-allowed;
-    @if mixin-exists(hook-tabs-tab-disabled) {
-        @include hook-tabs-tab-disabled;
-    }
-}
-
-/*
- * 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-nav::before {
-        border-bottom: var(--global-border-width) var(--global-border-style) var(--global-border);
-        content: '';
-        left: 0;
-        position: absolute;
-        right: 0;
-    }
-
-    .uk-tabs-nav-add {
-        margin: 0 0 0 var(--tabs-margin-horizontal);
-    }
-
-    .uk-tabs-ink-bar {
-        height: var(--tabs-ink-bar-height);
-    }
-
-    .uk-tabs-ink-bar-animated {
-        transition: width var(--transition-duration), left var(--transition-duration), right var(--transition-duration);
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab + .uk-tabs-tab {
-            margin-left: var(--tabs-card-gutter);
-        }
-
-        .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-nav::before {
-        top: 0;
-    }
-
-    .uk-tabs-ink-bar {
-        top: 0;
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab {
-            border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
-        }
-
-        .uk-tabs-tab-active {
-            border-top-color: var(--tabs-card-tab-active-background);
-        }
-    }
-
-    .uk-tabs-nav-add {
-        border-radius: 0 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius);
-    }
-
-    .uk-tabs-content-holder {
-        order: 0;
-    }
-
-    @if mixin-exists(hook-tabs-bottom) {
-        @include hook-tabs-bottom;
-    }
-}
-
-.uk-tabs-bottom .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-bottom-tab) {
-        @include hook-tabs-bottom-tab;
-    }
-}
-
-/*
- * Top
- */
-
-.uk-tabs-top {
-    .uk-tabs-nav {
-        margin-bottom: var(--tabs-margin-vertical);
-    }
-
-    .uk-tabs-nav::before {
-        bottom: 0;
-    }
-
-    .uk-tabs-ink-bar {
-        bottom: 0;
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab {
-            border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
-        }
-
-        .uk-tabs-tab-active {
-            border-bottom-color: var(--tabs-card-tab-active-background);
-        }
-    }
-
-    .uk-tabs-nav-add {
-        border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
-    }
-
-    @if mixin-exists(hook-tabs-top) {
-        @include hook-tabs-top;
-    }
-}
-
-.uk-tabs-top .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-top-tab) {
-        @include hook-tabs-top-tab;
-    }
-}
-
-
-/*
- * Left + Right
- */
-
-.uk-tabs-left,
-.uk-tabs-right {
-    .uk-tabs-nav {
-        flex-direction: column;
-        min-width: 50px;
-    }
-
-    .uk-tabs-nav-wrap {
-        flex-direction: column;
-    }
-
-    .uk-tabs-tab {
-        text-align: center;
-    }
-
-    .uk-tabs-tab + .uk-tabs-tab {
-        margin: var(--tabs-margin-vertical) 0 0 0;
-    }
-
-    .uk-tabs-ink-bar {
-        width: var(--tabs-ink-bar-width);
-    }
-
-    .uk-tabs-ink-bar-animated {
-        transition: height var(--transition-duration), top var(--transition-duration);
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab + .uk-tabs-tab {
-            margin-top: var(--tabs-card-gutter);
-        }
-    }
-
-    .uk-tabs-nav-add {
-        margin: var(--tabs-card-gutter) 0 0 0;
-    }
-
-    .uk-tabs-nav-list,
-    .uk-tabs-nav-operations {
-        flex: 1 0 auto; // fix safari scroll problem
-        flex-direction: column;
-    }
-}
-
-/*
- * 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-content > .uk-tabs-tabpane {
-        padding-left: var(--tabs-margin-horizontal);
-    }
-
-    .uk-tabs-ink-bar {
-        right: 0;
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab {
-            border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
-        }
-
-        .uk-tabs-tab-active {
-            border-right-color: var(--tabs-card-tab-active-background);
-        }
-    }
-
-    .uk-tabs-nav-add {
-        border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
-    }
-
-    @if mixin-exists(hook-tabs-left) {
-        @include hook-tabs-left;
-    }
-}
-
-.uk-tabs-left .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-left-tab) {
-        @include hook-tabs-left-tab;
-    }
-}
-
-/*
- * Right
- */
-
-.uk-tabs-right {
-    .uk-tabs-nav {
-        order: 1;
-    }
-
-    .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-content > .uk-tabs-tabpane {
-        padding-right: var(--tabs-margin-horizontal);
-    }
-
-    .uk-tabs-ink-bar {
-        left: 0;
-    }
-
-    &.uk-tabs-card {
-        .uk-tabs-tab {
-            border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
-        }
-
-        .uk-tabs-tab-active {
-            border-left-color: var(--tabs-card-tab-active-background);
-        }
-    }
-
-    .uk-tabs-nav-add {
-        border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
-    }
-
-    @if mixin-exists(hook-tabs-right) {
-        @include hook-tabs-right;
-    }
-}
-
-.uk-tabs-right .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-right-tab) {
-        @include hook-tabs-right-tab;
-    }
-}
-
-
-/* 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);
-
-    &:last-of-type {
-        margin-left: 0;
-    }
-
-    .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-large .uk-tabs-tab {
-    padding: var(--tabs-large-tab-padding-vertical) var(--tabs-large-tab-padding-horizontal);
-}
-
-.uk-tabs-card-large .uk-tabs-tab {
-    padding: var(--tabs-card-large-tab-padding-vertical) var(--tabs-card-large-tab-padding-horizontal);
-}
-
-
-// Dropdown
-// ========================================================================
-
-.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;
-    @if mixin-exists(hook-tabs-dropdown-menu) {
-        @include hook-tabs-dropdown-menu;
-    }
-}
-
-.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 {
-    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;
-}
-
-
-// Ink Bar
-// ========================================================================
-
-.uk-tabs-ink-bar {
-    background: var(--tabs-ink-bar-color);
-    pointer-events: none;
-    position: absolute;
-}
-
-
-// Motion
-// ========================================================================
-
-.uk-tabs-motion-switch {
-    &-appear,
-    &-enter {
-        transition: none;
-
-        &-start { opacity: 0; }
-
-        &-active {
-            opacity: 1;
-            transition: opacity var(--transition-duration);
-        }
-    }
-
-    &-leave {
-        inset: 0;
-        position: absolute;
-        transition: none;
-
-        &-start { opacity: 1; }
-
-        &-active {
-            opacity: 0;
-            transition: opacity var(--transition-duration);
-        }
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-tabs-misc) {
-    @include hook-tabs-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --tabs-margin-horizontal: #{$tabs-margin-horizontal};
-    --tabs-margin-vertical: #{$tabs-margin-vertical};
-    --tabs-tab-padding-horizontal: #{$tabs-tab-padding-horizontal};
-    --tabs-tab-padding-vertical: #{$tabs-tab-padding-vertical};
-    --tabs-large-tab-padding-horizontal: #{$tabs-large-tab-padding-horizontal};
-    --tabs-large-tab-padding-vertical: #{$tabs-large-tab-padding-vertical};
-    --tabs-tab-font-size: var(--global-font-size);
-    --tabs-tab-color: var(--global-color);
-    --tabs-tab-hover-color: var(--global-primary-background);
-    --tabs-tab-active-color: var(--global-primary-background);
-    --tabs-tab-disabled-color: var(--global-muted-color);
-    --tabs-tab-remove-color: var(--global-muted-color);
-    --tabs-tab-remove-font-size: var(--global-small-font-size);
-    --tabs-tab-remove-hover-color: var(--global-danger-background);
-    --tabs-tab-remove-active-color: var(--global-danger-background);
-    --tabs-nav-more-font-size: var(--global-small-font-size);
-    --tabs-ink-bar-color: var(--global-primary-background);
-    --tabs-ink-bar-height: #{$tabs-ink-bar-height};
-    --tabs-ink-bar-width: #{$tabs-ink-bar-width};
-    --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-gutter: var(--global-xsmall-gutter);
-    --tabs-card-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
-    --tabs-card-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
-    --tabs-card-large-tab-padding-horizontal: #{$tabs-card-tab-padding-horizontal};
-    --tabs-card-large-tab-padding-vertical: #{$tabs-card-tab-padding-vertical};
-    --tabs-card-tab-active-background: var(--global-background);
-    --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
-    --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);
-}