zulip/static/styles/input_pill.scss

.pill-container {
    display: inline-flex;
    flex-wrap: wrap;

    padding: 2px;
    border: 1px solid hsla(0, 0%, 0%, 0.15);
    border-radius: 4px;

    font-size: 0.9em;

    cursor: text;

    .pill {
        display: inline-flex;
        align-items: center;

        height: 20px;
        margin: 1px 2px;

        color: inherit;
        border: 1px solid hsla(0, 0%, 0%, 0.15);

        border-radius: 4px;
        background-color: hsla(0, 0%, 0%, 0.07);
        cursor: pointer;

        &:focus {
            color: hsl(0, 0%, 100%);
            border: 1px solid hsl(176, 78%, 28%);
            background-color: hsl(176, 49%, 42%);
            outline: none;
        }

        .pill-image {
            height: 20px;
            width: 20px;
            border-radius: 4px 0 0 4px;
        }

        .pill-value {
            margin: 0 5px;
        }

        .exit {
            opacity: 0.5;
            font-size: 1.3em;
            margin-right: 3px;
        }

        &:hover .exit {
            opacity: 1;
        }
    }

    &.not-editable {
        cursor: not-allowed;
        border: none;
        background-color: transparent;
        padding: 0;

        .pill {
            padding-right: 4px;
            cursor: not-allowed;

            &:focus {
                color: inherit;
                border: 1px solid hsla(0, 0%, 0%, 0.15);
                background-color: hsla(0, 0%, 0%, 0.07);
            }

            .exit {
                display: none;
            }
        }
    }

    .input {
        display: inline-block;
        padding: 2px 4px;

        min-width: 2px;
        word-break: break-all;

        outline: none;

        &.shake {
            animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
    }
}

.pm_recipient .pill-container {
    padding: 0 2px;
    border: none;
    flex-grow: 1;
    align-content: center;

    .input {
        height: 20px;

        &:first-child:empty::before {
            content: attr(data-no-recipients-text);
            opacity: 0.5;
        }
    }

    .pill + .input:empty::before {
        content: attr(data-some-recipients-text);
        opacity: 0.5;
    }
}

.add_subscribers_container .pill-container {
    width: 100%;
    background-color: hsl(0, 0%, 100%);

    .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}