tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update store header and input styles for improved UI consistency

Browse Source
This commit is contained in:
ncoronel
2026-07-01 16:50:24 -03:00
parent cb77ef9d20
commit ac9d1fdc85
3 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/layout/store-layout/store-header/store-header.component.html
View File

@@ -1,6 +1,6 @@
<header class="store-layout__header">
<div class="store-layout__header-main">
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
<div
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
data-testid="store-header-brand-slot"
@@ -15,7 +15,7 @@
}
</div>
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
<div class="d-flex flex-row align-items-center gap-3 ms-auto store-layout__actions-group">
<div class="input-group store-layout__search" role="search">
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
<input

37
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -45,47 +45,56 @@
min-width: 18rem;
}
.store-layout__actions-group {
flex-wrap: nowrap;
}
.store-layout__search-input {
border-color: rgba(255, 255, 255, 0.2);
color: #666666;
border-color: #cccccc;
background-color: rgba(255, 255, 255, 0.96);
}
.store-layout__search-input::placeholder {
color: #666666;
}
.store-layout__search-input:focus {
border-color: var(--tenant-primary);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
}
.store-layout__search-button {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
color: #a0a0a0;
border-color: #cccccc;
background-color: rgba(255, 255, 255, 0.96);
}
.store-layout__search-button:hover,
.store-layout__search-button:focus-visible {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.28);
background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
color: #8a8a8a;
border-color: #cccccc;
background-color: #ffffff;
}
.store-layout__action-button {
color: #ffffff;
color: #a0a0a0;
}
.store-layout__action-button:hover,
.store-layout__action-button:focus-visible {
color: color-mix(in srgb, white 84%, var(--tenant-primary));
color: #8a8a8a;
}
.store-layout__category-trigger {
font-size: 0.8rem;
letter-spacing: 0.02em;
color: #ffffff;
color: #a0a0a0;
}
.store-layout__category-trigger:hover,
.store-layout__category-trigger:focus-visible {
color: color-mix(in srgb, white 84%, var(--tenant-primary));
color: #8a8a8a;
}
@keyframes store-header-logo-skeleton {
@@ -103,7 +112,13 @@
min-width: 0;
}
.store-layout__actions-group {
width: 100%;
justify-content: space-between;
}
.store-layout__search {
flex: 1 1 auto;
min-width: 0;
}
}

17
src/app/shared/components/input/input.component.scss
View File

@@ -14,7 +14,7 @@
right: 1rem;
top: 50%;
z-index: 1;
color: #495057;
color: #a0a0a0;
transform: translateY(-50%);
pointer-events: none;
}
@@ -23,7 +23,8 @@
min-height: 40px;
padding: 0.625rem 1rem;
border-radius: 0.5rem;
color: #212529;
border-color: #cccccc;
color: #666666;
font-size: 15px;
font-weight: 400;
@@ -34,6 +35,10 @@
&:disabled {
opacity: 1;
}
&::placeholder {
color: #666666;
}
}
.input-with-search-icon {
@@ -116,7 +121,7 @@ input[type='file'].form-control {
padding: 0;
border: 0;
background: transparent;
color: #495057;
color: #a0a0a0;
transform: translateY(-50%);
cursor: pointer;
transition: color 0.2s ease;
@@ -127,10 +132,10 @@ input[type='file'].form-control {
}
.input-icon-active {
color: #adb5bd;
color: #a0a0a0;
&:hover {
color: #495057;
color: #8a8a8a;
}
}
@@ -145,7 +150,7 @@ input[type='file'].form-control {
right: 1rem;
top: 50%;
z-index: 1;
color: #495057;
color: #a0a0a0;
transform: translateY(-50%);
pointer-events: none;
}