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

very first commit

Browse Source
This commit is contained in:
sdarbinyan
2026-01-18 18:57:06 +04:00
commit bd80896886
152 changed files with 28211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
src/app/components/header/header.component.scss Normal file
View File

@@ -0,0 +1,451 @@
.header {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 1000;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #333;
font-size: 1.5rem;
font-weight: 700;
transition: color 0.2s;
.logo-icon {
font-size: 2rem;
}
&:hover {
color: var(--primary-hover);
}
}
/* Shared badge styling for cart count */
.cart-badge {
background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
color: white;
font-weight: 700;
padding: 3px 7px;
border-radius: 12px;
min-width: 20px;
text-align: center;
box-shadow: 0 3px 8px rgba(255, 71, 87, 0.4);
border: 2px solid white;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
align-items: center;
gap: 32px;
a {
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: #333;
font-weight: 500;
transition: all 0.2s;
position: relative;
padding: 8px 12px;
border-radius: 6px;
.nav-icon {
font-size: 1.2rem;
line-height: 1;
}
.nav-text {
font-size: 1rem;
}
&:hover {
color: var(--primary-hover);
background: rgba(85, 104, 211, 0.05);
}
&.active {
color: var(--primary-hover);
background: rgba(85, 104, 211, 0.1);
font-weight: 600;
}
}
.cart-link {
.cart-badge {
position: absolute;
top: -6px;
right: -6px;
font-size: 0.75rem;
}
}
}
.cart-link {
display: flex;
align-items: center;
gap: 6px;
position: relative;
.cart-icon {
font-size: 1.3rem;
}
.cart-badge {
position: absolute;
top: -8px;
right: -12px;
font-size: 0.8rem;
}
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
span {
width: 25px;
height: 3px;
background: #333;
border-radius: 2px;
transition: all 0.3s;
}
&.active {
span:nth-child(1) {
transform: rotate(45deg) translate(7px, 4.5px);
}
span:nth-child(2) {
opacity: 0;
}
span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -4.5px);
}
}
}
.cart-link-mobile {
display: none;
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
margin-right: 8px;
}
@media (max-width: 768px) {
.cart-link-mobile {
display: flex;
align-items: center;
position: relative;
text-decoration: none;
margin-right: 8px;
padding: 8px;
border-radius: 6px;
transition: background 0.2s;
.cart-icon {
font-size: 1.5rem;
color: #333;
}
.cart-badge {
position: absolute;
top: 2px;
right: 2px;
font-size: 0.75rem;
}
&:hover {
background: rgba(85, 104, 211, 0.05);
}
&.active {
background: rgba(85, 104, 211, 0.1);
}
}
.nav {
position: fixed;
top: 68px;
left: 0;
right: 0;
background: white;
flex-direction: column;
gap: 0;
padding: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
&.nav-open {
max-height: 300px;
}
a {
width: 100%;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
&::after {
display: none;
}
&.active {
background: #f5f5f5;
}
}
.cart-link {
display: none;
}
}
.menu-toggle {
display: flex;
}
.logo-text {
font-size: 1.2rem;
}
}
// ========== novo HEADER STYLES ==========
.novo-header {
background: white;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95);
}
.novo-header-container {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.novo-left {
flex: 1;
}
.novo-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
.novo-brand {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
transition: color 0.3s;
}
&:hover .novo-brand {
color: var(--primary-color);
}
}
.novo-nav {
flex: 2;
display: flex;
justify-content: center;
.novo-nav-links {
display: flex;
gap: 2.5rem;
}
.novo-link {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s;
}
&:hover,
&.novo-active {
color: var(--primary-color);
&::after {
width: 100%;
}
}
}
}
.novo-right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.5rem;
}
.novo-cart {
position: relative;
color: var(--text-primary);
text-decoration: none;
padding: 0.5rem;
border-radius: var(--radius-md);
transition: all 0.3s;
svg {
display: block;
}
&:hover,
&.novo-cart-active {
color: var(--primary-color);
background: var(--bg-secondary);
}
.novo-cart-badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--primary-color);
color: white;
font-size: 0.7rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
box-shadow: var(--shadow-sm);
}
}
.novo-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
span {
width: 24px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s;
}
&.novo-active {
span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
span:nth-child(2) {
opacity: 0;
}
span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
}
}
@media (max-width: 968px) {
.novo-nav {
position: fixed;
top: 65px;
left: 0;
right: 0;
background: white;
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
&.novo-nav-open {
max-height: 300px;
}
.novo-nav-links {
width: 100%;
flex-direction: column;
gap: 0;
padding: 1rem 0;
}
.novo-link {
padding: 1rem 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
&::after {
display: none;
}
&:hover,
&.novo-active {
background: var(--bg-secondary);
}
}
}
.novo-menu-toggle {
display: flex;
}
}
@media (max-width: 768px) {
.novo-header-container {
padding: 1rem;
}
.novo-logo .novo-brand {
font-size: 1.1rem;
}
}