signal-desktop/stylesheets/components/LeftPaneSearchInput.scss

132 lines
2.6 KiB
SCSS
Raw Normal View History

2022-01-27 22:12:26 +00:00
// Copyright 2021-2022 Signal Messenger, LLC
2021-11-01 18:43:02 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
.LeftPaneSearchInput {
position: relative;
2022-01-27 22:12:26 +00:00
margin: 0 16px;
2022-01-31 15:45:04 +00:00
margin-bottom: 8px;
2021-11-01 18:43:02 +00:00
&__input {
@include font-body-2;
2022-01-31 15:45:04 +00:00
border: solid 1px transparent;
2022-01-27 22:12:26 +00:00
border-radius: 8px;
2021-11-01 18:43:02 +00:00
height: 28px;
padding-left: 30px;
padding-right: 5px;
width: 100%;
@include light-theme {
2022-01-31 15:45:04 +00:00
background-color: $color-black-alpha-08;
2021-11-01 18:43:02 +00:00
color: $color-gray-90;
2022-01-31 15:45:04 +00:00
&:placeholder {
color: $color-gray-45;
}
2021-11-01 18:43:02 +00:00
}
@include dark-theme {
2022-01-31 15:45:04 +00:00
background-color: $color-white-alpha-12;
2021-11-01 18:43:02 +00:00
color: $color-gray-05;
2022-01-31 15:45:04 +00:00
&:placeholder {
color: $color-gray-25;
}
2021-11-01 18:43:02 +00:00
}
&:focus {
border: solid 1px $color-ultramarine;
outline: none;
}
&--with-text {
padding-right: 30px;
}
&--in-conversation {
padding-left: 50px;
}
}
&__icon {
height: 16px;
left: 8px;
pointer-events: none;
position: absolute;
top: 6px;
width: 16px;
@include light-theme {
2022-01-31 15:45:04 +00:00
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
2021-11-01 18:43:02 +00:00
}
@include dark-theme {
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-25);
}
}
&__in-conversation-pill {
@include button-reset;
@include rounded-corners;
align-items: center;
bottom: 3px;
display: flex;
flex-direction: row;
left: 3px;
padding: 1px 3px 1px 4px;
position: absolute;
top: 3px;
@include light-theme {
2022-01-27 22:12:26 +00:00
background-color: $color-gray-25;
2021-11-01 18:43:02 +00:00
}
@include dark-theme {
2022-01-27 22:12:26 +00:00
background-color: $color-gray-80;
2021-11-01 18:43:02 +00:00
}
&__x-button {
height: 16px;
margin-left: 2px;
width: 16px;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
}
@include light-theme {
&:hover,
&:focus,
&:active {
background: $color-ultramarine;
}
}
@include dark-theme {
&:hover,
&:focus,
&:active {
background: $color-ultramarine-light;
}
}
}
}
&__cancel {
height: 18px;
position: absolute;
right: 8px;
top: 5px;
width: 18px;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
}
}
.module-left-pane--width-narrow & {
display: none;
}
}