118 lines
2.7 KiB
CSS
118 lines
2.7 KiB
CSS
.catalogWrapper {
|
|
display: flex;
|
|
padding: 20px;
|
|
gap: 40px;
|
|
}
|
|
|
|
/*.sidebar {
|
|
width: 260px;
|
|
}*/
|
|
|
|
.productsSection {
|
|
flex: 1;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
padding: 20px;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card img {
|
|
max-width: 160px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.name {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.plus {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
font-size: 22px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #ffcc00;
|
|
}
|
|
|
|
/*SidebarCategories*/
|
|
.sidebar { width: 260px; padding: 20px 0; }
|
|
.title { font-weight:700; font-size:14px; margin-bottom:16px; }
|
|
.list { list-style:none; padding:0; margin:0; }
|
|
.item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; }
|
|
.item:hover { color:#000; }
|
|
.activeCat { color:#000; font-weight:700; }
|
|
/*SidebarCategories*/
|
|
|
|
/*Pagination*/
|
|
.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;}
|
|
.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;}
|
|
.pages{ display:flex; gap:8px;}
|
|
.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;}
|
|
.active{ background:#ffd400; font-weight:700; border-color:#ffd400;}
|
|
button:disabled{ opacity:.5; cursor:default;}
|
|
/*Pagination*/
|
|
|
|
/*CategoryFilters*/
|
|
.filtersWrap { margin:24px 0; }
|
|
.title { font-weight:700; margin-bottom:12px; }
|
|
.block { margin-bottom:16px; }
|
|
.blockTitle{ font-weight:600; margin-bottom:8px; }
|
|
.opt { display:block; margin:6px 0; font-size:14px; }
|
|
.actions { margin-top:12px; display:flex; gap:12px; }
|
|
.apply { background:#ffd400; border:none; padding:10px 22px; border-radius:26px; cursor:pointer;}
|
|
.reset { background:#fff; border:1px solid #ddd; padding:8px 16px; cursor:pointer;}
|
|
/*CategoryFilters*/
|
|
|
|
.categoryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
|
|
.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .15s; }
|
|
.categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); }
|
|
.categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; }
|
|
.categoryName { font-weight:700; }
|
|
@media(max-width:1090px){ .grid{grid-template-columns:repeat(2,1fr)} }
|
|
|
|
@media(max-width:600px){ .grid{grid-template-columns:1fr} }
|
|
|
|
@media (max-width: 1300px){
|
|
.grid {
|
|
gap: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1254px){
|
|
|
|
}
|
|
|
|
@media (max-width: 1045px) {
|
|
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.catalogWrapper {
|
|
flex-direction: column;
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
}
|