Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-02-14 21:02:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: dashboard search rework

Browse Source
This commit is contained in:
Thea Schöbl
2023-03-10 15:46:59 +00:00
committed by Rainer Killinger
parent dff4a95acc
commit 8c30a47706
40 changed files with 375 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/modules/dashboard/sections/search-section/search-section.component.scss
View File

@@ -1,36 +1,43 @@
/*!
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
* Copyright (C) 2023 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.searchbar {
position: relative;
max-width: 700px;
ion-ripple-effect {
z-index: 1000;
border-radius: var(--spacing-sm);
}
ion-input {
background: var(--ion-color-field-bg);
border-radius: var(--border-radius-default);
--padding-start: var(--spacing-md);
--padding-end: var(--spacing-md);
--padding-top: var(--spacing-md);
--padding-bottom: var(--spacing-md);
box-shadow: var(--shadow-default);
ion-searchbar {
cursor: text;
}
ion-searchbar ::ng-deep .searchbar-input-container {
pointer-events: none;
}
ion-searchbar.ios {
ion-ripple-effect {
display: none;
}
ion-icon {
position: absolute;
top: 50%;
right: var(--spacing-md);
transform: translateY(-50%);
z-index: 2;
transition: opacity 150ms ease;
&:active {
opacity: 0.6;
}
@media (hover: hover) {
&:hover {
opacity: 0.6;
}
}
}