@taiga-ui/core/styles/mixins/date-picker.less

Core library for creating Angular components and applications using Taiga UI

@import 'mixins.less';

.date-picker() {
    .t-row {
        display: flex;
        justify-content: flex-start;
        font: var(--tui-font-text-m);

        &:first-child {
            justify-content: flex-end;
        }

        &:last-child {
            justify-content: flex-start;
        }
    }

    .t-cell {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 2rem;
        isolation: isolate;
        cursor: pointer;
        overflow: hidden;
        border: 0.125rem solid transparent;
        box-sizing: border-box;
        mask: linear-gradient(
            transparent calc(50% - 1rem),
            #000 calc(50% - 1rem),
            #000 calc(50% + 1rem),
            transparent calc(50% + 1rem)
        );

        &:first-child {
            border-inline-start-color: transparent !important;
        }

        &:last-child {
            border-inline-end-color: transparent !important;
        }

        &::before,
        &::after {
            .fullsize(absolute, inset);

            content: '';
            z-index: -1;
            border-radius: var(--tui-radius-m);
        }

        &::after {
            mask:
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>')
                    right/0.75rem 100% no-repeat,
                linear-gradient(#000, #000) left/calc(100% - 0.7rem) 100% no-repeat;
        }

        &[data-range]::before {
            background: var(--tui-background-neutral-1);
        }

        :host._picking &[data-range]::before {
            background: var(--tui-background-neutral-1-hover);
        }

        &[data-range='middle'] {
            border-color: var(--tui-background-neutral-1);

            :host._picking & {
                border-color: var(--tui-background-neutral-1-hover);
            }

            &:not(:first-child)::before {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &:not(:last-child)::before {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &[data-range='start'] {
            border-inline-end-color: var(--tui-background-neutral-1);
            color: var(--tui-text-primary-on-accent-1);

            :host._picking & {
                border-inline-end-color: var(--tui-background-neutral-1-hover);
            }

            &:not(:last-child)::before {
                right: -1rem;
            }

            &::after {
                background: var(--tui-background-accent-1);
            }
        }

        &[data-range='end'] {
            border-inline-start-color: var(--tui-background-neutral-1);
            color: var(--tui-text-primary-on-accent-1);

            :host._picking & {
                border-inline-start-color: var(--tui-background-neutral-1-hover);
            }

            &:not(:first-child)::before {
                left: -1rem;
            }

            &::after {
                background: var(--tui-background-accent-1);
                transform: scale(-1, 1);
            }
        }

        &[data-range='active'] {
            color: var(--tui-text-primary-on-accent-1);

            &::after {
                background: var(--tui-background-accent-1);
                mask: none;
            }
        }

        &_disabled {
            opacity: var(--tui-disabled-opacity);
            pointer-events: none;
        }

        &_today {
            text-decoration: underline;
            text-underline-offset: 0.25rem;
        }

        @media @tui-mouse {
            &:hover:not([data-range='start']):not([data-range='end'])::before {
                background: var(--tui-background-neutral-1-hover);
            }

            &[data-range='start']:hover::after,
            &[data-range='end']:hover::after,
            &[data-range='active']:hover::after {
                background: var(--tui-background-accent-1-hover);
            }
        }
    }
}