mirror of https://github.com/zulip/zulip.git
138 lines
2.4 KiB
SCSS
138 lines
2.4 KiB
SCSS
.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: inherit;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.15);
|
|
|
|
border-radius: 4px;
|
|
background: hsla(0, 0%, 0%, 0.07);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pill-container .pill:focus {
|
|
color: #fff;
|
|
border: 1px solid #108179;
|
|
background: hsl(176, 49%, 42%);
|
|
outline: none;
|
|
}
|
|
|
|
.pill-container.notmem {
|
|
cursor: not-allowed;
|
|
border: none;
|
|
}
|
|
|
|
.pill-container.notmem .pill {
|
|
padding-right: 4px;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pill-container.notmem .pill:focus {
|
|
color: inherit;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.15);
|
|
background: hsla(0, 0%, 0%, 0.07);
|
|
}
|
|
|
|
.pill-container.notmem .pill .exit {
|
|
display: none;
|
|
}
|
|
|
|
.pill-container .input {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
|
|
min-width: 2px;
|
|
word-break: break-all;
|
|
|
|
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;
|
|
|
|
display: flex;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.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: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);
|
|
}
|
|
}
|