Apply new design system style on share modal input (#11415)

GitOrigin-RevId: b7eb7e1e86786431415d69080a874508de143f22
This commit is contained in:
M Fahru 2023-02-07 10:10:50 -07:00 committed by Copybot
parent 5f3ef71e43
commit 49afb315ed

View file

@ -21,10 +21,8 @@
.tags-input .tags { .tags-input .tags {
.form-control; .form-control;
border-radius: 3px; /* overriding .form-control */
-moz-appearance: textfield; -moz-appearance: textfield;
-webkit-appearance: textfield; -webkit-appearance: textfield;
padding: 3px;
overflow: hidden; overflow: hidden;
word-wrap: break-word; word-wrap: break-word;
cursor: text; cursor: text;
@ -33,13 +31,19 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.tags-input .tags.focused, .tags-input .tags when(@is-new-css = false) {
.tags-input .tags:focus-within { padding: 3px;
border-radius: 3px; /* overriding .form-control */
}
.tags-input .tags:focus-within when(@is-new-css = false) {
outline: none; outline: none;
-webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
} }
.tags-input .tags:focus-within when(@is-new-css = true) {
&:extend(.input-focus-style);
}
.tags-input .tags .tag-list { .tags-input .tags .tag-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -75,13 +79,18 @@
.tags-input .tags .input { .tags-input .tags .input {
border: 0; border: 0;
outline: none; outline: none;
margin: 2px;
padding: 0;
padding-left: 5px;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.tags-input .tags .input when(@is-new-css = false) {
margin: 2px;
padding: 0;
padding-left: 5px;
}
.tags-input .tags .input when(@is-new-css = true) {
.placeholder();
}
.tags-input .tags .input.invalid-tag { .tags-input .tags .input.invalid-tag {
color: @brand-danger; color: @brand-danger;
} }