sdarbinyan/marketplaces
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
sdarbinyan
2026-02-14 02:34:11 +04:00
parent 751ad48489
commit 4238d59fc6
20 changed files with 1448 additions and 1032 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/header/header.component.html
View File

@@ -73,7 +73,7 @@
</div>
</nav>
<!-- Search Box -->
<!-- Search Box (desktop) -->
<div class="dexar-search-wrapper">
<div class="dexar-search-box">
<svg class="dexar-search-icon" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -84,6 +84,14 @@
</div>
</div>
<!-- Search Icon (mobile only) -->
<button class="dexar-search-mobile" (click)="navigateToSearch()" aria-label="Поиск">
<svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#1e3c38" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#1e3c38" />
</svg>
</button>
<!-- Right Actions -->
<div class="dexar-actions">
<!-- Cart Button -->

78
src/app/components/header/header.component.scss
View File

@@ -78,12 +78,12 @@
&:hover {
color: var(--primary-hover);
background: rgba(85, 104, 211, 0.05);
background: rgba(73, 118, 113, 0.05);
}
&.active {
color: var(--primary-hover);
background: rgba(85, 104, 211, 0.1);
background: rgba(73, 118, 113, 0.1);
font-weight: 600;
}
}
@@ -183,11 +183,11 @@
}
&:hover {
background: rgba(85, 104, 211, 0.05);
background: rgba(73, 118, 113, 0.05);
}
&.active {
background: rgba(85, 104, 211, 0.1);
background: rgba(73, 118, 113, 0.1);
}
}
@@ -458,6 +458,7 @@
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dexar-header-container {
@@ -585,14 +586,14 @@
.dexar-actions {
display: flex;
align-items: center;
gap: 4px;
gap: 8px;
flex-shrink: 0;
}
.dexar-cart-btn {
position: relative;
width: 32px;
height: 24px;
width: 36px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
@@ -601,8 +602,8 @@
transition: opacity 0.3s ease;
svg {
width: 32px;
height: 24px;
width: 36px;
height: 28px;
}
&:hover {
@@ -616,18 +617,21 @@
.dexar-cart-badge {
position: absolute;
top: -6px;
right: -6px;
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
color: white;
top: -8px;
right: -10px;
background: #497671;
color: #ffffff;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
border: 2px solid white;
font-size: 10px;
line-height: 1;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dexar-lang-selector {
@@ -667,6 +671,23 @@
}
}
// Mobile Search Icon
.dexar-search-mobile {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 6px;
margin-left: auto;
transition: opacity 0.2s ease;
&:hover {
opacity: 0.7;
}
}
// Responsive Design
@media (max-width: 1200px) {
.dexar-header-container {
@@ -777,22 +798,11 @@
}
.dexar-search-wrapper {
flex: 1;
max-width: none;
margin-left: 0;
display: none;
}
.dexar-search-box {
height: 40px;
}
.dexar-search-icon {
width: 20px;
height: 20px;
}
.dexar-search-input {
font-size: 16px;
.dexar-search-mobile {
display: flex;
}
.dexar-menu-toggle {

68
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -3,6 +3,7 @@
padding: 2rem 0;
max-width: 1400px;
margin: 0 auto;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
::ng-deep {
// PrimeNG carousel wrapper
@@ -21,8 +22,8 @@
height: 3rem;
border-radius: 50%;
background: white;
border: 2px solid #e5e7eb;
color: #374151;
border: 2px solid #d3dad9;
color: #1e3c38;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
align-self: center;
@@ -31,13 +32,13 @@
&:hover {
background: #f9fafb;
border-color: #d1d5db;
border-color: #d3dad9;
transform: scale(1.05);
}
&:not(:disabled):hover {
background: var(--primary-color, #5568d3);
border-color: var(--primary-color, #5568d3);
background: var(--primary-color, #497671);
border-color: var(--primary-color, #497671);
color: white;
}
}
@@ -63,7 +64,7 @@
flex-shrink: 0;
}
// Pagination dots - using actual PrimeNG rendered classes
// Pagination dots
.p-carousel-indicator-list {
display: flex !important;
justify-content: center !important;
@@ -79,20 +80,20 @@
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background-color: #d1d5db !important;
background-color: #d3dad9 !important;
border: 0 !important;
padding: 0 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
&:hover {
background-color: #9ca3af !important;
background-color: #a1b4b5 !important;
transform: scale(1.2);
}
}
&.p-carousel-indicator-active .p-carousel-indicator-button {
background-color: var(--primary-color, #5568d3) !important;
background-color: var(--primary-color, #497671) !important;
width: 32px !important;
border-radius: 6px !important;
}
@@ -106,14 +107,14 @@
.carousel-empty {
text-align: center;
padding: 3rem 1rem;
color: #666;
color: #697777;
.spinner {
width: 40px;
height: 40px;
margin: 0 auto 1rem;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--primary-color, #5568d3);
border-top: 4px solid var(--primary-color, #497671);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -124,12 +125,13 @@
100% { transform: rotate(360deg); }
}
// Item card styles matching your existing design
// Item card styles
.item-card {
background: white;
border-radius: 12px;
border-radius: 13px;
border: 1px solid #d3dad9;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
height: 100%;
@@ -140,7 +142,7 @@
margin: 0 auto;
&:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
}
@@ -159,7 +161,7 @@
height: 140px;
overflow: hidden;
background: #f5f5f5;
border-radius: 12px;
border-radius: 13px;
img {
width: 100%;
@@ -181,10 +183,10 @@
position: absolute;
top: 12px;
right: 12px;
background: #e74c3c;
background: #ef4444;
color: white;
padding: 0.4rem 0.8rem;
border-radius: 6px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 700;
z-index: 10;
@@ -211,11 +213,11 @@
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1a1a1a;
color: #1e3c38;
transition: color 0.2s;
&:hover {
color: var(--primary-color, #5568d3);
color: var(--primary-color, #497671);
}
}
@@ -226,12 +228,12 @@
font-size: 0.75rem;
.rating-stars {
color: #fbbf24;
color: #497671;
font-weight: 600;
}
.rating-count {
color: #6b7280;
color: #697777;
}
}
@@ -253,26 +255,26 @@
.discounted-price {
font-size: 0.9375rem;
font-weight: 700;
color: #1a1a1a;
color: #1e3c38;
}
.discounted-price {
color: #e74c3c;
color: #ef4444;
}
.original-price {
font-size: 0.8125rem;
color: #9ca3af;
color: #697777;
text-decoration: line-through;
}
}
.cart-icon-btn {
padding: 0.5rem;
background: var(--primary-color, #5568d3);
background: var(--primary-color, #497671);
color: white;
border: none;
border-radius: 8px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
@@ -285,7 +287,7 @@
}
&:hover {
background: var(--primary-hover, #4456b3);
background: var(--primary-hover, #3d635f);
transform: scale(1.05);
}
@@ -301,14 +303,14 @@
.p-carousel-prev,
.p-carousel-next {
&:not(:disabled):hover {
background: var(--primary-color, #5568d3);
border-color: var(--primary-color, #5568d3);
background: var(--primary-color, #497671);
border-color: var(--primary-color, #497671);
}
}
.p-carousel-indicators {
.p-carousel-indicator.p-highlight button {
background: var(--primary-color, #5568d3);
background: var(--primary-color, #497671);
}
}
}
@@ -319,10 +321,10 @@
}
.cart-icon-btn {
background: var(--primary-color, #5568d3);
background: var(--primary-color, #497671);
&:hover {
background: var(--primary-hover, #4456b3);
background: var(--primary-hover, #3d635f);
}
}
}

4
src/app/components/language-selector/language-selector.component.scss
View File

@@ -155,8 +155,8 @@
// Dexar header specific styles
:host-context(.dexar-header) {
.language-selector {
width: 52px;
height: 26px;
width: 56px;
height: 28px;
}
.language-button {