@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

package/src/lib/v2/tabs/tab-group.scss

@@ -1,362 +0,0 @@
-@use './../../styles/vars.scss' as color-vars;
-
-.mdc-tab {
-    min-width: 90px;
-    padding: 0 12px;
-    display: flex;
-    flex: 1 0 auto;
-    justify-content: center;
-    box-sizing: border-box;
-    border: none;
-    outline: none;
-    text-align: center;
-    white-space: nowrap;
-    cursor: pointer;
-    z-index: 1;
-    touch-action: manipulation;
-}
-
-.mdc-tab__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: inherit;
-    pointer-events: none;
-}
-
-.mdc-tab__text-label {
-    transition: 150ms color linear;
-    display: inline-block;
-    line-height: 1;
-    z-index: 2;
-}
-
-.mdc-tab--active .mdc-tab__text-label {
-    transition-delay: 100ms;
-}
-
-._animation-noopable .mdc-tab__text-label {
-    transition: none;
-}
-
-.mdc-tab-indicator {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 1;
-}
-
-.mdc-tab-indicator__content {
-    transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
-    transform-origin: left;
-    opacity: 0;
-}
-
-.mdc-tab-indicator__content--underline {
-    align-self: flex-end;
-    box-sizing: border-box;
-    width: 100%;
-    border-top-style: solid;
-}
-
-.mdc-tab-indicator--active .mdc-tab-indicator__content {
-    opacity: 1;
-}
-
-._animation-noopable,
-.mdc-tab-indicator--no-transition {
-    .mdc-tab-indicator__content {
-        transition: none;
-    }
-}
-
-.mdc-tab {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-decoration: none;
-    background: none;
-    height: 40px;
-    font-family: 'Montserrat';
-    font-size: 1rem;
-    letter-spacing: 0.006rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-
-    .mdc-tab-group.mdc-tab-group-stretch-tabs > .mdc-tab-header & {
-        flex-grow: 1;
-    }
-
-    &.mdc-tab {
-        flex-grow: 0;
-    }
-
-    .mdc-tab-indicator__content--underline {
-        border-color: color-vars.$Link;
-        border-top-width: 2px;
-        border-radius: 0;
-    }
-
-    &:hover .mdc-tab__text-label {
-        color: #201a1b;
-    }
-
-    &:focus .mdc-tab__text-label {
-        color: #201a1b;
-    }
-
-    &.mdc-tab--active {
-        .mdc-tab__text-label {
-            color: #201a1b;
-        }
-
-        .mdc-tab__ripple::before {
-            background-color: #201a1b;
-        }
-
-        &:hover {
-            .mdc-tab__text-label {
-                color: #201a1b;
-            }
-
-            .mdc-tab-indicator__content--underline {
-                border-color: color-vars.$Link;
-            }
-        }
-
-        &:focus {
-            .mdc-tab__text-label {
-                color: #201a1b;
-            }
-
-            .mdc-tab-indicator__content--underline {
-                border-color: color-vars.$Link;
-            }
-        }
-    }
-
-    &.mdc-tab-disabled {
-        opacity: 0.4;
-
-        pointer-events: none;
-
-        .mdc-tab__content {
-            pointer-events: none;
-        }
-    }
-
-    .mdc-tab__ripple::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        opacity: 0;
-        pointer-events: none;
-        background-color: #201a1b;
-    }
-
-    .mdc-tab__text-label {
-        color: #201a1b;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .mdc-tab__content {
-        position: relative;
-        pointer-events: auto;
-    }
-
-    &:hover .mdc-tab__ripple::before {
-        opacity: 0.04;
-    }
-
-    &.cdk-program-focused,
-    &.cdk-keyboard-focused {
-        .mdc-tab__ripple::before {
-            opacity: 0.12;
-        }
-    }
-}
-
-.mdc-tab-group {
-    display: flex;
-    flex-direction: column;
-
-    max-width: 100%;
-
-    &.tabs-with-background {
-        > .mdc-tab-header,
-        > .mdc-tab-header-pagination {
-            //background-color: token-utils.slot(tab-background-color, $fallbacks);
-        }
-
-        &.primary > .mdc-tab-header {
-            .mdc-tab .mdc-tab__text-label {
-                //color: token-utils.slot(tab-foreground-color, $fallbacks);
-            }
-
-            .mdc-tab-indicator__content--underline {
-                //border-color: token-utils.slot(tab-foreground-color, $fallbacks);
-            }
-        }
-
-        &:not(.primary) > .mdc-tab-header {
-            .mdc-tab:not(.mdc-tab--active) {
-                .mdc-tab__text-label {
-                    //color: token-utils.slot(tab-foreground-color, $fallbacks);
-                }
-
-                .mdc-tab-indicator__content--underline {
-                    //border-color: token-utils.slot(tab-foreground-color, $fallbacks);
-                }
-            }
-        }
-
-        > .mdc-tab-header,
-        > .mdc-tab-header-pagination {
-            .mdc-tab-header-pagination-chevron,
-            .focus-indicator::before {
-                border-color: #201a1b;
-            }
-
-            .mdc-tab-header-pagination-chevron {
-                color: transparent;
-            }
-        }
-    }
-
-    &.mdc-tab-group-inverted-header {
-        flex-direction: column-reverse;
-
-        .mdc-tab-indicator__content--underline {
-            align-self: flex-start;
-        }
-    }
-}
-
-.mdc-tab-body-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-}
-
-.focus-indicator {
-    position: relative;
-}
-
-.tabs-legacy {
-    .mdc-tab-labels {
-        gap: 2px;
-    }
-    .mdc-tab-label-container {
-        border: 0px;
-    }
-}
-.mdc-tab-legacy {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-decoration: none;
-    height: 36px;
-    padding: 0 14px;
-    font-family: 'Lato';
-    font-size: 14px;
-    letter-spacing: 0px;
-    line-height: 22px;
-    font-weight: 400;
-    background-color: color-vars.$Dark-Gray-2;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    cursor: pointer;
-    max-width: 90px;
-
-    .mdc-tab-group.mdc-tab-group-stretch-tabs > .mdc-tab-header & {
-        flex-grow: 1;
-    }
-
-    &.mdc-tab {
-        flex-grow: 0;
-    }
-
-    .mdc-tab-indicator__content--underline {
-        border-color: color-vars.$Link;
-        border-top-width: 2px;
-        border-radius: 0;
-    }
-
-    &:hover:not(.mdc-tab--active) {
-        background-color: color-vars.$Dark-Gray-1;
-    }
-
-    &:focus .mdc-tab__text-label {
-        color: color-vars.$White;
-    }
-
-    &.mdc-tab--active {
-        background-color: color-vars.$Light-Gray-2;
-        .mdc-tab__text-label {
-            color: color-vars.$Black-Color;
-        }
-
-        .mdc-tab__ripple::before {
-            background-color: color-vars.$White;
-        }
-    }
-
-    &.mdc-tab-disabled {
-        pointer-events: none;
-
-        .mdc-tab__text-label {
-            color: color-vars.$Gray-2;
-        }
-
-        .mdc-tab__content {
-            pointer-events: none;
-        }
-    }
-
-    .mdc-tab__ripple::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        opacity: 0;
-        pointer-events: none;
-        background-color: color-vars.$White;
-    }
-
-    .mdc-tab__text-label {
-        color: color-vars.$White;
-        display: inline-flex;
-        align-items: center;
-
-        transition: none;
-    }
-
-    .mdc-tab__content {
-        position: relative;
-        pointer-events: auto;
-    }
-
-    &:hover .mdc-tab__ripple::before {
-        opacity: 0.04;
-    }
-
-    &.cdk-program-focused,
-    &.cdk-keyboard-focused {
-        .mdc-tab__ripple::before {
-            opacity: 0.12;
-        }
-    }
-}