editableDayPicker.scss

TLDR

This file contains the SCSS code for styling an editable day picker component.

Classes

EditableDayPicker

This class represents the main container element for the editable day picker component. It contains nested styles for the child elements within the component.

END

.EditableDayPicker {
    .DayPickerInput {
        input {
            cursor: text;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid transparent;
            min-height: 24px;

            &.active {
                min-width: 100px;
            }

            &::placeholder {
                color: rgba(var(--center-channel-color-rgb), 0.4);
                opacity: 1;
            }

            &.error {
                border: 1px solid rgb(var(--error-text-rgb));
                border-radius: var(--default-rad);
            }
        }
    }

    .DayPickerInput-Overlay {
        background-color: rgba(var(--center-channel-bg-rgb));
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1);
        line-height: 100%;
    }

    .DayPicker-Day--today {
        color: #c74655;
    }

    .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
        background-color: rgba(var(--center-channel-color-rgb), 0.2);
    }
}