@taiga-ui/core/styles/components/group.less

Core library for creating Angular components and applications using Taiga UI

/**
 * @name Group
 * @selector [tuiGroup]
 *
 * @description
 * A directive to combine children into rounded flex group
 *
 * @attributes
 * data-size — size (default: 'l') ('s' | 'm' | 'l')
 * data-orientation — orientation (default: 'horizontal') ('horizontal' | 'vertical')
 *
 * @example
 * <div tuiGroup>
 *   <button tuiButton>Click me</button>
 *   <button tuiButton>Click me</button>
 *   <button tuiButton>Click me</button>
 * </div>
 *
 * @see-also
 * Button, Block, Textfield
 */
[tuiGroup] {
    position: relative;
    display: flex;
    transform: translate3d(0, 0, 0);

    --t-group-radius: var(--tui-radius-l);
    --t-group-margin: -1px;
    --t-group-mask: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5) 1px,
        #000 2px,
        #000 calc(100% - 2px),
        rgba(0, 0, 0, 0.5)
    );
    --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
    --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));

    & > * {
        z-index: 1;
        flex: 1 1 0;
        min-inline-size: 0;
        mask: var(--t-group-mask);
        mask-clip: no-clip;

        &:disabled,
        &._disabled {
            z-index: 0;
        }

        &:invalid:not([data-mode]),
        &[data-mode~='invalid'] {
            z-index: 2;

            --t-group-mask: none;
        }

        &:has(:invalid:not([data-mode])),
        &:has([data-mode~='invalid']) {
            z-index: 2;

            --t-group-mask: none;
        }

        &:has(:focus-visible) {
            z-index: 3;

            --t-group-mask: none;
        }

        &:has([data-focus='true']) {
            z-index: 3;

            --t-group-mask: none;
        }

        &:checked:not([data-mode]),
        &[data-mode~='checked'] {
            z-index: 4;

            --t-group-mask: none;
        }

        &:has([tuiBlock]:checked) {
            z-index: 4;

            --t-group-mask: none;
        }

        &:not(:last-child) {
            margin-inline-end: var(--t-group-margin);
        }

        &:nth-child(n) {
            border-radius: 0;
        }

        &:first-child {
            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
            mask-image: var(--t-group-mask-start);
        }

        &:last-child {
            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
            mask-image: var(--t-group-mask-end);
        }

        &:only-child {
            border-radius: var(--t-group-radius);
            mask: none;
        }
    }

    [dir='rtl'] &:not([data-orientation='vertical']) > * {
        &:first-child {
            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
            mask-image: var(--t-group-mask-end);
        }

        &:last-child {
            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
            mask-image: var(--t-group-mask-start);
        }

        &:only-child {
            border-radius: var(--t-group-radius);
            mask: none;
        }
    }

    &[data-size='s'],
    &[data-size='m'] {
        --t-group-radius: var(--tui-radius-m);
    }

    &[data-orientation='vertical'] {
        display: inline-flex;
        flex-direction: column;

        --t-group-mask: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.5) 1px,
            #000 2px,
            #000 calc(100% - 2px),
            rgba(0, 0, 0, 0.5)
        );
        --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
        --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);

        & > * {
            min-block-size: auto;
            flex: 0 0 auto;

            &:not(:last-child) {
                margin-inline-end: 0;
                margin-block-end: var(--t-group-margin);
            }

            &:first-child {
                border-radius: var(--t-group-radius) var(--t-group-radius) 0 0;
            }

            &:last-child {
                border-radius: 0 0 var(--t-group-radius) var(--t-group-radius);
            }

            &:only-child {
                border-radius: var(--t-group-radius);
            }
        }
    }
}