paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

fix(ui): add smooth border animations and improve SearchField styling

Browse Source 
Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
This commit is contained in:
Sofia Sjöblad
2025-09-18 14:57:39 +02:00
parent 9a471252a4
commit b937a11d2e
2 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/css/styles.css
+23 -4
View File
@@ -10564,14 +10564,33 @@
opacity: 0;
}
}
& .bui-InputWrapper {
& .bui-Input[data-icon] {
padding-right: 0;
}
}
}
}
}
.bui-SearchField .bui-Input {
padding-left: var(--bui-space-6);
padding-right: var(--bui-space-1);
transition: padding .3s ease-in-out;
transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
&[data-hovered] {
border-color: var(--bui-border-hover);
}
&[data-focused] {
border-color: var(--bui-border-pressed);
outline-width: 0;
}
}
.bui-SearchField .bui-InputWrapper {
& .bui-Input[data-icon] {
padding-right: var(--bui-space-6);
}
}
.bui-SearchField .bui-InputIcon {
@@ -10580,7 +10599,7 @@
left: 0;
&[data-size="small"] {
width: var(--bui-space-9);
width: var(--bui-space-8);
}
&[data-size="medium"] {
packages/ui/src/components/SearchField/SearchField.styles.css
+25 -5
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
.bui-SearchField {
.bui-SearchField {
flex: 1;
flex-shrink: 0;
@@ -60,14 +60,34 @@
opacity: 0;
}
}
.bui-InputWrapper {
.bui-Input[data-icon] {
padding-right: 0px;
}
}
}
}
}
.bui-SearchField .bui-Input {
padding-left: var(--bui-space-6);
padding-right: var(--bui-space-1);
transition: padding 0.3s ease-in-out;
transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
&[data-hovered] {
border-color: var(--bui-border-hover);
}
&[data-focused] {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
}
.bui-SearchField .bui-InputWrapper {
.bui-Input[data-icon] {
padding-right: var(--bui-space-6);
}
}
.bui-SearchField .bui-InputIcon {
@@ -76,7 +96,7 @@
justify-content: center;
&[data-size='small'] {
width: var(--bui-space-9);
width: var(--bui-space-8);
}
&[data-size='medium'] {