mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

One SearchInput to rule them all

Browse source
This commit is contained in:
Josh Perez 2021-05-10 20:50:43 -04:00 • committed by GitHub
parent c62b5a900e
commit 24b7790829
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 266 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

30
stylesheets/components/AddGroupMembersModal.scss
View file

@ -29,36 +29,6 @@
@include modal-close-button;
}
&__search-input {
margin: 10px $padding;
padding: 5px 12px;
border-radius: 17px;
border: none;
@include font-body-2;
@include light-theme {
background-color: $color-gray-05;
color: $color-gray-90;
border: solid 1px $color-gray-02;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-95;
border: solid 1px $color-gray-80;
}
&:placeholder {
color: $color-gray-45;
}
&:focus {
border: solid 1px $ultramarine-ui-light;
outline: none;
}
}
.module-ContactPills {
max-height: 50px;
}

63
stylesheets/components/ForwardMessageModal.scss
View file

@ -57,7 +57,7 @@
}
}
&__scroller {
&__input__scroller {
max-height: 300px;
min-height: 300px;
padding: 16px;
@ -149,67 +149,6 @@
}
}
&__search {
border-radius: 8px;
border: none;
margin: 10px 16px;
padding: 5px 12px;
position: relative;
@include font-body-2;
@include light-theme {
background-color: $color-gray-02;
border: solid 1px $color-gray-02;
color: $color-gray-90;
}
@include dark-theme {
background: $color-gray-65;
border: solid 1px $color-gray-65;
color: $color-gray-05;
}
&--icon {
cursor: text;
height: 16px;
left: 8px;
position: absolute;
top: 6px;
width: 16px;
@include light-theme {
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
}
}
@include keyboard-mode {
&:focus-within {
border: solid 1px $ultramarine-ui-light;
outline: none;
}
}
&--input {
background: inherit;
border: none;
padding-left: 16px;
width: 100%;
&:placeholder {
color: $color-gray-45;
}
@include dark-theme {
color: $color-gray-05;
}
&:focus {
outline: none;
}
}
}
&__list-wrapper {
flex-grow: 1;
overflow: hidden;

64
stylesheets/components/SearchInput.scss Normal file
View file

@ -0,0 +1,64 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-SearchInput {
&__container {
border-radius: 8px;
border: none;
margin: 10px 16px;
padding: 5px 12px;
position: relative;
@include font-body-2;
@include light-theme {
background-color: $color-gray-02;
border: solid 1px $color-gray-02;
color: $color-gray-90;
}
@include dark-theme {
background: $color-gray-90;
border: solid 1px $color-gray-90;
color: $color-gray-05;
}
&:focus-within {
border: solid 1px $ultramarine-ui-light;
outline: none;
}
}
&__icon {
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
cursor: text;
height: 16px;
left: 8px;
position: absolute;
top: 6px;
width: 16px;
}
&__input {
background: inherit;
border: none;
padding-left: 16px;
width: 100%;
&:placeholder {
color: $color-gray-45;
}
@include light-theme {
color: $color-black;
}
@include dark-theme {
color: $color-gray-05;
}
&:focus {
outline: none;
}
}
}