mirror of https://github.com/zulip/zulip.git
125 lines
2.2 KiB
CSS
125 lines
2.2 KiB
CSS
.pill-container {
|
|
display: inline-block;
|
|
|
|
padding: 2px;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.15);
|
|
border-radius: 4px;
|
|
|
|
font-size: 0.9em;
|
|
|
|
cursor: text;
|
|
}
|
|
|
|
.pill-container .pill {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
padding: 0px 18px 0px 3px;
|
|
margin: 1px 1px;
|
|
|
|
color: hsl(177, 38%, 54%);
|
|
border: 1px solid #b2e4e2;
|
|
|
|
border-radius: 4px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pill-container .pill:focus {
|
|
color: hsl(0, 38%, 54%);
|
|
border: 1px solid #e4b2b2;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.pill-container .input {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
|
|
min-width: 2px;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.pill-container .pill .exit {
|
|
content: "\D7";
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 3px;
|
|
|
|
opacity: 0.5;
|
|
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.pill-container .pill:hover .exit {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pill-container .input.shake {
|
|
animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
|
|
transform: translate3d(0, 0, 0);
|
|
backface-visibility: hidden;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.pm_recipient .pill-container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0px 2px;
|
|
|
|
/* this is because the pills have a margin-bottom of 2px, so we want to negate
|
|
the height of the bottom row. */
|
|
margin: -1px 0px;
|
|
|
|
border: none;
|
|
}
|
|
|
|
.pm_recipient .pill-container .pill {
|
|
color: inherit;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.15);
|
|
background: hsla(0, 0%, 0%, 0.07);
|
|
}
|
|
|
|
.pm_recipient .pill-container .pill:focus {
|
|
color: #fff;
|
|
border: 1px solid #108179;
|
|
background: hsl(176, 49%, 42%);
|
|
}
|
|
|
|
.pm_recipient .pill-container .input {
|
|
height: 20px;
|
|
}
|
|
|
|
.pm_recipient .pill-container .input:first-child:empty::before {
|
|
content: attr(data-no-recipients-text);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.pm_recipient .pill-container .pill + .input:focus:empty::before {
|
|
content: attr(data-some-recipients-text);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|