@alfalab/core-components 47.6.0-beta.0 → 47.7.0

package/tabs/moderncssm/components/primary-tablist/index.module.css

@@ -1,531 +0,0 @@
-/* */
-:root {
-    --primary-tablist-color: var(--color-light-text-secondary);
-    --primary-tablist-hover-color: var(--color-light-text-primary);
-    --primary-tablist-selected-color: var(--color-light-text-primary);
-    --primary-tablist-disabled-color: var(--color-light-text-tertiary);
-    --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
-    --primary-tablist-line-color: var(--color-light-accent-primary);
-    --primary-tablist-font-feature-settings: normal;
-
-    /* mobile */
-
-    /* size s */
-    --primary-tablist-s-gaps: var(--gap-2xl);
-    --primary-tablist-s-font-size: 18px;
-    --primary-tablist-s-font-weight: 400;
-    --primary-tablist-s-font-family: var(--font-family-system);
-    --primary-tablist-s-padding: 0 0 var(--gap-s);
-
-    /* size m */
-    --primary-tablist-m-gaps: var(--gap-2xl);
-    --primary-tablist-m-font-size: 18px;
-    --primary-tablist-m-font-weight: 400;
-    --primary-tablist-m-font-family: var(--font-family-system);
-    --primary-tablist-m-padding: 0 0 var(--gap-m);
-
-    /* size l */
-    --primary-tablist-l-gaps: var(--gap-2xl);
-    --primary-tablist-l-font-size: 18px;
-    --primary-tablist-l-font-weight: 400;
-    --primary-tablist-l-font-family: var(--font-family-system);
-    --primary-tablist-l-padding: 0 0 var(--gap-l);
-
-    /* size xl */
-    --primary-tablist-xl-gaps: var(--gap-2xl);
-    --primary-tablist-xl-font-size: 18px;
-    --primary-tablist-xl-font-weight: 400;
-    --primary-tablist-xl-font-family: var(--font-family-system);
-    --primary-tablist-xl-padding: 0 0 var(--gap-l);
-
-    /* mobile */
-
-    /* size xxs */
-
-    /* size xs */
-
-    /* size s */
-
-    /* size m */
-
-    /* size l */
-
-    /* size xl */
-}
-.component {
-    position: relative;
-    display: inline-flex;
-    min-width: 100%
-}
-.component:before {
-        content: '';
-        display: block;
-        position: absolute;
-        bottom: 1px;
-        height: 1px;
-        width: 100%;
-        background-color: var(--primary-tablist-bottom-border-color);
-    }
-.desktop.paragraph-primary-large .title {
-        font-size: 18px;
-        line-height: 24px;
-        font-weight: 400;
-    }
-.desktop.paragraph-primary-medium .title {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 400;
-    }
-.desktop.paragraph-primary-small .title {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 400;
-    }
-.desktop.action-primary-large .title {
-        font-size: 18px;
-        line-height: 24px;
-        font-weight: 500;
-    }
-.desktop.action-primary-medium .title {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 500;
-    }
-.desktop.action-primary-small .title {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 500;
-    }
-.desktop.accent-primary-large .title {
-        font-size: 18px;
-        line-height: 24px;
-        font-weight: 700;
-    }
-.desktop.accent-primary-medium .title {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 700;
-    }
-.desktop.accent-primary-small .title {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 700;
-    }
-.desktop.paragraph-primary-large .title, .desktop.paragraph-primary-medium .title, .desktop.accent-primary-large .title, .desktop.accent-primary-medium .title, .desktop.action-primary-large .title, .desktop.action-primary-medium .title {
-        padding-bottom: calc(24px / 2);
-    }
-.desktop.paragraph-primary-large .title + .title,
-    .desktop.paragraph-primary-large .pickerWrapper,
-    .desktop.paragraph-primary-medium .title + .title,
-    .desktop.paragraph-primary-medium .pickerWrapper,
-    .desktop.accent-primary-large .title + .title,
-    .desktop.accent-primary-large .pickerWrapper,
-    .desktop.accent-primary-medium .title + .title,
-    .desktop.accent-primary-medium .pickerWrapper,
-    .desktop.action-primary-large .title + .title,
-    .desktop.action-primary-large .pickerWrapper,
-    .desktop.action-primary-medium .title + .title,
-    .desktop.action-primary-medium .pickerWrapper {
-        margin-left: 24px;
-    }
-.desktop.paragraph-primary-large .option, .desktop.paragraph-primary-medium .option, .desktop.accent-primary-large .option, .desktop.accent-primary-medium .option, .desktop.action-primary-large .option, .desktop.action-primary-medium .option {
-        padding: 0;
-    }
-.desktop.paragraph-primary-large .scrollControls > button, .desktop.paragraph-primary-medium .scrollControls > button, .desktop.accent-primary-large .scrollControls > button, .desktop.accent-primary-medium .scrollControls > button, .desktop.action-primary-large .scrollControls > button, .desktop.action-primary-medium .scrollControls > button {
-            box-sizing: content-box;
-            width: 24px;
-            height: 24px;
-            padding: 0;
-        }
-.desktop.paragraph-primary-large .scrollControls button:first-child, .desktop.paragraph-primary-medium .scrollControls button:first-child, .desktop.accent-primary-large .scrollControls button:first-child, .desktop.accent-primary-medium .scrollControls button:first-child, .desktop.action-primary-large .scrollControls button:first-child, .desktop.action-primary-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(24px / 2);
-        }
-.desktop.paragraph-primary-small .title, .desktop.accent-primary-small .title, .desktop.action-primary-small .title {
-        padding-bottom: calc(20px / 2);
-    }
-.desktop.paragraph-primary-small .title + .title,
-    .desktop.paragraph-primary-small .pickerWrapper,
-    .desktop.accent-primary-small .title + .title,
-    .desktop.accent-primary-small .pickerWrapper,
-    .desktop.action-primary-small .title + .title,
-    .desktop.action-primary-small .pickerWrapper {
-        margin-left: 20px;
-    }
-.desktop.paragraph-primary-small .option, .desktop.accent-primary-small .option, .desktop.action-primary-small .option {
-        padding: 0;
-    }
-.desktop.paragraph-primary-small .scrollControls > button, .desktop.accent-primary-small .scrollControls > button, .desktop.action-primary-small .scrollControls > button {
-            box-sizing: content-box;
-            width: 20px;
-            height: 20px;
-            padding: 0;
-        }
-.desktop.paragraph-primary-small .scrollControls button:first-child, .desktop.accent-primary-small .scrollControls button:first-child, .desktop.action-primary-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(20px / 2);
-        }
-.desktop.headline-system-xlarge .title {
-        font-size: 48px;
-        line-height: 52px;
-        font-weight: 700;
-    }
-.desktop.headline-system-large .title {
-        font-size: 40px;
-        line-height: 48px;
-        font-weight: 700;
-    }
-.desktop.headline-system-medium .title {
-        font-size: 30px;
-        line-height: 36px;
-        font-weight: 700;
-    }
-.desktop.headline-system-small .title {
-        font-size: 22px;
-        line-height: 26px;
-        font-weight: 700;
-    }
-.desktop.headline-system-xsmall .title {
-        font-size: 18px;
-        line-height: 22px;
-        font-weight: 700;
-    }
-.desktop.headline-xlarge .title {
-        font-size: 48px;
-        line-height: 64px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
-    }
-.desktop.headline-large .title {
-        font-size: 40px;
-        line-height: 48px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
-    }
-.desktop.headline-medium .title {
-        font-size: 32px;
-        line-height: 40px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
-    }
-.desktop.headline-small .title {
-        font-size: 24px;
-        line-height: 32px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
-    }
-.desktop.headline-xsmall .title {
-        font-size: 20px;
-        line-height: 24px;
-        font-weight: 500;
-        font-feature-settings: 'ss01';
-        font-family: var(--font-family-styrene);
-    }
-.desktop.headline-system-xlarge .title {
-        padding-bottom: calc(52px / 2);
-    }
-.desktop.headline-system-xlarge .title + .title,
-    .desktop.headline-system-xlarge .pickerWrapper {
-        margin-left: 52px;
-    }
-.desktop.headline-system-xlarge .option {
-        padding: 0;
-    }
-.desktop.headline-system-xlarge .scrollControls > button {
-            box-sizing: content-box;
-            width: 52px;
-            height: 52px;
-            padding: 0;
-        }
-.desktop.headline-system-xlarge .scrollControls button:first-child {
-            margin: 0 0 0 calc(52px / 2);
-        }
-.desktop.headline-system-large .title, .desktop.headline-large .title {
-        padding-bottom: calc(48px / 2);
-    }
-.desktop.headline-system-large .title + .title,
-    .desktop.headline-system-large .pickerWrapper,
-    .desktop.headline-large .title + .title,
-    .desktop.headline-large .pickerWrapper {
-        margin-left: 48px;
-    }
-.desktop.headline-system-large .option, .desktop.headline-large .option {
-        padding: 0;
-    }
-.desktop.headline-system-large .scrollControls > button, .desktop.headline-large .scrollControls > button {
-            box-sizing: content-box;
-            width: 48px;
-            height: 48px;
-            padding: 0;
-        }
-.desktop.headline-system-large .scrollControls button:first-child, .desktop.headline-large .scrollControls button:first-child {
-            margin: 0 0 0 calc(48px / 2);
-        }
-.desktop.headline-system-medium .title {
-        padding-bottom: calc(36px / 2);
-    }
-.desktop.headline-system-medium .title + .title,
-    .desktop.headline-system-medium .pickerWrapper {
-        margin-left: 36px;
-    }
-.desktop.headline-system-medium .option {
-        padding: 0;
-    }
-.desktop.headline-system-medium .scrollControls > button {
-            box-sizing: content-box;
-            width: 36px;
-            height: 36px;
-            padding: 0;
-        }
-.desktop.headline-system-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(36px / 2);
-        }
-.desktop.headline-system-small .title {
-        padding-bottom: calc(26px / 2);
-    }
-.desktop.headline-system-small .title + .title,
-    .desktop.headline-system-small .pickerWrapper {
-        margin-left: 26px;
-    }
-.desktop.headline-system-small .option {
-        padding: 0;
-    }
-.desktop.headline-system-small .scrollControls > button {
-            box-sizing: content-box;
-            width: 26px;
-            height: 26px;
-            padding: 0;
-        }
-.desktop.headline-system-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(26px / 2);
-        }
-.desktop.headline-system-xsmall .title {
-        padding-bottom: calc(22px / 2);
-    }
-.desktop.headline-system-xsmall .title + .title,
-    .desktop.headline-system-xsmall .pickerWrapper {
-        margin-left: 22px;
-    }
-.desktop.headline-system-xsmall .option {
-        padding: 0;
-    }
-.desktop.headline-system-xsmall .scrollControls > button {
-            box-sizing: content-box;
-            width: 22px;
-            height: 22px;
-            padding: 0;
-        }
-.desktop.headline-system-xsmall .scrollControls button:first-child {
-            margin: 0 0 0 calc(22px / 2);
-        }
-.desktop.headline-xlarge .title {
-        padding-bottom: calc(64px / 2);
-    }
-.desktop.headline-xlarge .title + .title,
-    .desktop.headline-xlarge .pickerWrapper {
-        margin-left: 64px;
-    }
-.desktop.headline-xlarge .option {
-        padding: 0;
-    }
-.desktop.headline-xlarge .scrollControls > button {
-            box-sizing: content-box;
-            width: 64px;
-            height: 64px;
-            padding: 0;
-        }
-.desktop.headline-xlarge .scrollControls button:first-child {
-            margin: 0 0 0 calc(64px / 2);
-        }
-.desktop.headline-medium .title {
-        padding-bottom: calc(40px / 2);
-    }
-.desktop.headline-medium .title + .title,
-    .desktop.headline-medium .pickerWrapper {
-        margin-left: 40px;
-    }
-.desktop.headline-medium .option {
-        padding: 0;
-    }
-.desktop.headline-medium .scrollControls > button {
-            box-sizing: content-box;
-            width: 40px;
-            height: 40px;
-            padding: 0;
-        }
-.desktop.headline-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(40px / 2);
-        }
-.desktop.headline-small .title {
-        padding-bottom: calc(32px / 2);
-    }
-.desktop.headline-small .title + .title,
-    .desktop.headline-small .pickerWrapper {
-        margin-left: 32px;
-    }
-.desktop.headline-small .option {
-        padding: 0;
-    }
-.desktop.headline-small .scrollControls > button {
-            box-sizing: content-box;
-            width: 32px;
-            height: 32px;
-            padding: 0;
-        }
-.desktop.headline-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(32px / 2);
-        }
-.desktop.headline-xsmall .title {
-        padding-bottom: calc(24px / 2);
-    }
-.desktop.headline-xsmall .title + .title,
-    .desktop.headline-xsmall .pickerWrapper {
-        margin-left: 24px;
-    }
-.desktop.headline-xsmall .option {
-        padding: 0;
-    }
-.desktop.headline-xsmall .scrollControls > button {
-            box-sizing: content-box;
-            width: 24px;
-            height: 24px;
-            padding: 0;
-        }
-.desktop.headline-xsmall .scrollControls button:first-child {
-            margin: 0 0 0 calc(24px / 2);
-        }
-.fullWidthScroll {
-    min-width: calc(100% - 2 * var(--gap-m));
-    margin: 0 var(--gap-m);
-}
-.container {
-    position: relative;
-    overflow: hidden;
-
-    /* focus-outline fix */
-    margin: var(--gap-2xs-neg) 0 var(--gap-2xs-neg) var(--gap-2xs-neg);
-    padding: var(--gap-2xs) 0 var(--gap-2xs) var(--gap-2xs);
-}
-.title {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0;
-    cursor: pointer;
-    color: var(--primary-tablist-color);
-    font-feature-settings: var(--primary-tablist-font-feature-settings);
-    transition: color 0.2s ease;
-    border: 0;
-    background: none;
-    white-space: nowrap;
-    box-shadow: none;
-    -webkit-user-select: none;
-            user-select: none;
-    outline: none
-}
-.title:not(:disabled):hover {
-        color: var(--primary-tablist-hover-color);
-    }
-.focused {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-}
-.collapsed {
-    order: 99;
-    visibility: collapse;
-}
-.selected {
-    cursor: default;
-    color: var(--primary-tablist-selected-color);
-}
-.disabled {
-    cursor: var(--disabled-cursor);
-    color: var(--primary-tablist-disabled-color);
-}
-.line {
-    position: absolute;
-    height: 3px;
-    bottom: 0;
-    left: 0;
-    background-color: var(--primary-tablist-line-color);
-    transition: transform 0.2s ease, width 0.2s ease;
-}
-.option {
-    color: var(--color-light-text-primary);
-}
-/* sizes */
-.s .title, .xs .title, .xxs .title {
-        padding: var(--primary-tablist-s-padding);
-        font-size: var(--primary-tablist-s-font-size);
-        font-weight: var(--primary-tablist-s-font-weight);
-        font-family: var(--primary-tablist-s-font-family);
-        line-height: 24px;
-    }
-.s .title + .title, .xs .title + .title, .xxs .title + .title {
-        margin-left: var(--primary-tablist-s-gaps);
-    }
-.s .pickerWrapper, .xs .pickerWrapper, .xxs .pickerWrapper {
-        margin-left: var(--primary-tablist-s-gaps);
-    }
-.s .option, .xs .option, .xxs .option {
-        padding: 0;
-    }
-.m .title {
-        padding: var(--primary-tablist-m-padding);
-        font-size: var(--primary-tablist-m-font-size);
-        font-weight: var(--primary-tablist-m-font-weight);
-        font-family: var(--primary-tablist-m-font-family);
-        line-height: 24px;
-    }
-.m .title + .title {
-        margin-left: var(--primary-tablist-m-gaps);
-    }
-.m .pickerWrapper {
-        margin-left: var(--primary-tablist-m-gaps);
-    }
-.m .option {
-        padding: 0;
-    }
-.l .title {
-        padding: var(--primary-tablist-l-padding);
-        font-size: var(--primary-tablist-l-font-size);
-        font-weight: var(--primary-tablist-l-font-weight);
-        font-family: var(--primary-tablist-l-font-family);
-        line-height: 24px;
-    }
-.l .title + .title {
-        margin-left: var(--primary-tablist-l-gaps);
-    }
-.l .pickerWrapper {
-        margin-left: var(--primary-tablist-l-gaps);
-    }
-.l .option {
-        padding: 0;
-    }
-.xl .title {
-        padding: var(--primary-tablist-xl-padding);
-        font-size: var(--primary-tablist-xl-font-size);
-        font-weight: var(--primary-tablist-xl-font-weight);
-        font-family: var(--primary-tablist-xl-font-family);
-        line-height: 32px;
-    }
-.xl .title + .title {
-        margin-left: var(--primary-tablist-xl-gaps);
-    }
-.xl .pickerWrapper {
-        margin-left: var(--primary-tablist-xl-gaps);
-    }
-.xl .option {
-        padding: 0;
-    }
-.rightAddons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: var(--gap-xs);
-}
-.rightAddonsMarginZero {
-    margin-left: 0;
-}