@alfalab/core-components 42.2.1 → 42.2.3

package/vars/dist/src/mixins.css

@@ -1,72 +0,0 @@
-@define-mixin focus-outline {
-    outline: 2px solid var(--focus-color);
-    outline-offset: 2px;
-}
-
-@define-mixin custom-scrollbar {
-    overflow: auto;
-    overflow: overlay;
-    cursor: auto;
-
-    &::-webkit-scrollbar {
-        width: 12px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: var(--color-light-graphic-primary-alpha-30);
-        border-radius: var(--border-radius-circle) / 6px;
-        border-color: transparent;
-        border-style: solid;
-        border-width: 4px;
-        background-clip: padding-box;
-        min-height: 40px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-        border-radius: var(--border-radius-circle) / 7px;
-        border-width: 4px 3px;
-    }
-
-    &::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-light-graphic-primary-alpha-60);
-    }
-
-    &::-webkit-resizer {
-        background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
-            no-repeat right bottom;
-    }
-
-    &::-webkit-scrollbar-button,
-    &::-webkit-scrollbar-corner {
-        display: none;
-    }
-}
-
-@define-mixin bg-class-list {
-    @each $backgroundColorBg in accent, info, attention-muted, positive-muted, negative-muted,
-        primary, primary-inverted, secondary, secondary-inverted, tertiary, tertiary-inverted,
-        quaternary, quaternary-inverted
-    {
-        .background-$(backgroundColorBg) {
-            background-color: var(--color-light-bg-$(backgroundColorBg));
-        }
-    }
-
-    @each $backgroundColor in specialbg-component, specialbg-component-inverted,
-        specialbg-primary-grouped, specialbg-secondary-grouped, specialbg-tertiary-grouped,
-        specialbg-secondary-transparent, specialbg-secondary-transparent-inverted,
-        specialbg-tertiary-transparent, specialbg-tertiary-transparent-inverted
-    {
-        .background-$(backgroundColor) {
-            background-color: var(--color-light-$(backgroundColor));
-        }
-    }
-}

package/vars/dist/src/shadows-bluetint.css

@@ -1,43 +0,0 @@
-:root {
-    --shadow-xs: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-l: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
-        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-xl: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
-        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
-        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-
-    /* Hard */
-    --shadow-xs-hard: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
-        0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
-        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
-        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
-        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-
-    /* Up */
-    --shadow-xs-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
-    --shadow-s-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
-    --shadow-m-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
-    --shadow-l-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
-    --shadow-xl-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
-
-    /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
-        0 -2px 4px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
-        0 -4px 8px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
-        0 -8px 16px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
-        0 -12px 24px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
-        0 -16px 32px rgba(0, 0, 0, 0.16);
-}

package/vars/dist/src/shadows-indigo.css

@@ -1,38 +0,0 @@
-:root {
-    --shadow-xs: 0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04);
-    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
-    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
-    --shadow-xl: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32);
-
-    /* Hard */
-    --shadow-xs-hard: 0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04),
-        0 2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08),
-        0 4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
-        0 8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24),
-        0 12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32),
-        0 16px 32px rgba(11, 31, 53, 0.16);
-
-    /* Up */
-    --shadow-xs-up: 0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04);
-    --shadow-s-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08);
-    --shadow-m-up: 0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-up: 0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24);
-    --shadow-xl-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32);
-
-    /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04),
-        0 -2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08),
-        0 -4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16),
-        0 -8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24),
-        0 -12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
-        0 -16px 32px rgba(11, 31, 53, 0.16);
-}

package/vars/dist/typography.css

@@ -1,519 +0,0 @@
-:root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
-        'Helvetica Neue', Helvetica, sans-serif;
-}
-
-@define-mixin accent_caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-@define-mixin accent_component_primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-@define-mixin accent_component_secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 700;
-}
-
-@define-mixin accent_primary_large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 700;
-}
-
-@define-mixin accent_primary_medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 700;
-}
-
-@define-mixin accent_primary_small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-@define-mixin accent_secondary_large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-@define-mixin accent_secondary_medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-@define-mixin accent_secondary_small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 700;
-}
-
-@define-mixin action_caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 700;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-@define-mixin action_component_primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-@define-mixin action_component_secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 500;
-}
-
-@define-mixin action_primary_large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
-}
-
-@define-mixin action_primary_medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-}
-
-@define-mixin action_primary_small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-@define-mixin action_secondary_large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-@define-mixin action_secondary_medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-@define-mixin action_secondary_small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-@define-mixin headline-mobile_large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline-mobile_medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline-mobile_small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline-mobile_xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline-mobile_xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline-system-mobile_large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 600;
-}
-
-@define-mixin headline-system-mobile_medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 600;
-}
-
-@define-mixin headline-system-mobile_small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 600;
-}
-
-@define-mixin headline-system-mobile_xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 600;
-}
-
-@define-mixin headline-system-mobile_xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 600;
-}
-
-@define-mixin headline-system_large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 700;
-}
-
-@define-mixin headline-system_medium {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 700;
-}
-
-@define-mixin headline-system_small {
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 700;
-}
-
-@define-mixin headline-system_xlarge {
-    font-size: 48px;
-    line-height: 52px;
-    font-weight: 700;
-}
-
-@define-mixin headline-system_xsmall {
-    font-size: 18px;
-    line-height: 22px;
-    font-weight: 700;
-}
-
-@define-mixin headline_large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline_medium {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline_small {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline_xlarge {
-    font-size: 48px;
-    line-height: 64px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin headline_xsmall {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin key_large {
-    font-size: 120px;
-    line-height: 132px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin key_medium {
-    font-size: 96px;
-    line-height: 120px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin key_small {
-    font-size: 80px;
-    line-height: 96px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin key_xlarge {
-    font-size: 144px;
-    line-height: 180px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin key_xsmall {
-    font-size: 64px;
-    line-height: 80px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin paragraph_caps {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;
-    letter-spacing: 1.25px;
-    text-transform: uppercase;
-}
-
-@define-mixin paragraph_component_primary {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_component_secondary {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_primary_large {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_primary_medium {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_primary_small {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_secondary_large {
-    font-size: 13px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_secondary_medium {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-@define-mixin paragraph_secondary_small {
-    font-size: 11px;
-    line-height: 16px;
-    font-weight: 400;
-}
-
-@define-mixin promo-mobile_large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo-mobile_medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo-mobile_small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo-mobile_xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo-mobile_xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo-system-mobile_large {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system-mobile_medium {
-    font-size: 26px;
-    line-height: 32px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system-mobile_small {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system-mobile_xlarge {
-    font-size: 34px;
-    line-height: 40px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system-mobile_xsmall {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system_large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system_medium {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system_small {
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system_xlarge {
-    font-size: 48px;
-    line-height: 52px;
-    font-weight: 400;
-}
-
-@define-mixin promo-system_xsmall {
-    font-size: 18px;
-    line-height: 22px;
-    font-weight: 400;
-}
-
-@define-mixin promo_large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo_medium {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo_small {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo_xlarge {
-    font-size: 48px;
-    line-height: 64px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin promo_xsmall {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 400;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-}
-
-@define-mixin accent_component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 700;
-}
-
-@define-mixin action_component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
-}
-
-@define-mixin paragraph_component {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 400;
-}
-
-@define-mixin row_limit $num {
-    -webkit-line-clamp: $num;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}