Azimkin
56af404dc9
All checks were successful
Build and Push Docker Image / build (push) Successful in 38s
- Added `selected_color` field to `CartItem` model with migration - Updated color swatch behavior on product detail page with selection logic and disabled button handling - Improved cart templates to display selected color alongside item details - Modified `add_item_to_cart` service and `add` view to handle color selection - Enhanced styles for active swatches and cart item color display
722 lines
13 KiB
CSS
722 lines
13 KiB
CSS
aside {
|
|
flex: 0 0 250px;
|
|
}
|
|
|
|
.catalog-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 28px;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.a-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.a-section h2 {
|
|
font-weight: 400;
|
|
font-size: 26px;
|
|
line-height: 1.2;
|
|
color: #36213e;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.category {
|
|
display: block;
|
|
padding: 6px 0;
|
|
color: #554971;
|
|
font-size: 18px;
|
|
line-height: 1.25;
|
|
transition: color 0.2s, text-decoration-color 0.2s;
|
|
}
|
|
|
|
.category:hover,
|
|
.category.active {
|
|
color: #36213e;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.categories-empty,
|
|
.item-list-empty {
|
|
color: #554971;
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.catalog-filter-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.catalog-price-slider {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.catalog-price-slider__values {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: #554971;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.catalog-price-slider__controls {
|
|
position: relative;
|
|
height: 32px;
|
|
}
|
|
|
|
.catalog-price-slider__track {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
transform: translateY(-50%);
|
|
background: rgba(99, 118, 141, 0.18);
|
|
}
|
|
|
|
.catalog-price-slider__track-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: #63768d;
|
|
}
|
|
|
|
.catalog-price-slider__range {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 32px;
|
|
margin: 0;
|
|
pointer-events: none;
|
|
appearance: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.catalog-price-slider__range::-webkit-slider-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #63768d;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
appearance: none;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 3px rgba(99, 118, 141, 0.08);
|
|
}
|
|
|
|
.catalog-price-slider__range::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #63768d;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 3px rgba(99, 118, 141, 0.08);
|
|
}
|
|
|
|
.catalog-price-slider__range::-webkit-slider-runnable-track {
|
|
height: 4px;
|
|
background: transparent;
|
|
}
|
|
|
|
.catalog-price-slider__range::-moz-range-track {
|
|
height: 4px;
|
|
background: transparent;
|
|
}
|
|
|
|
.catalog-price-slider__range:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.catalog-filter-submit {
|
|
min-height: 42px;
|
|
margin-top: 16px;
|
|
border: 1px solid #63768d;
|
|
background: #63768d;
|
|
color: #ffffff;
|
|
font-family: 'Noah', sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.catalog-filter-submit:hover {
|
|
background: #554971;
|
|
border-color: #554971;
|
|
}
|
|
|
|
.item-list {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.items-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.item-card {
|
|
min-width: 0;
|
|
border: 1px solid rgba(54, 33, 62, 0.14);
|
|
background: #ffffff;
|
|
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.item-card:hover {
|
|
border-color: rgba(54, 33, 62, 0.3);
|
|
box-shadow: 0 18px 36px rgba(54, 33, 62, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.item-card-media-link {
|
|
display: block;
|
|
}
|
|
|
|
.item-card-image {
|
|
aspect-ratio: 4 / 3;
|
|
background: rgba(99, 118, 141, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-card-image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.item-card-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #63768d;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.item-card-body {
|
|
padding: 18px;
|
|
}
|
|
|
|
.item-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.item-card-category {
|
|
color: #63768d;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
margin-bottom: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.item-card-favorite-form {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.item-card-favorite-button {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: #63768d;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: color 0.2s, opacity 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.item-card-favorite-button:hover {
|
|
color: #36213e;
|
|
opacity: 0.82;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.item-card-favorite-button svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.item-card-favorite-button.is-active {
|
|
color: #c54c5d;
|
|
}
|
|
|
|
.item-card-favorite-button--login {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.item-card-title-link {
|
|
display: block;
|
|
}
|
|
|
|
.item-card-title {
|
|
color: #36213e;
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
display: -webkit-box;
|
|
min-height: 58px;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.item-card-description {
|
|
margin-top: 10px;
|
|
color: #554971;
|
|
font-size: 16px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.item-card-footer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.item-card-price-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.item-card-price {
|
|
color: #36213e;
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.item-card-price--discount {
|
|
color: #c54c5d;
|
|
}
|
|
|
|
.item-card-price-original {
|
|
color: #8a8a9a;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
text-decoration: line-through;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.item-card-availability {
|
|
flex: 0 0 auto;
|
|
color: #554971;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.item-card-availability.available {
|
|
color: #4f7d4f;
|
|
}
|
|
|
|
.item-card-availability.unavailable {
|
|
color: #a14b4b;
|
|
}
|
|
|
|
.product-detail {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 420px) minmax(320px, 1fr);
|
|
gap: 78px;
|
|
align-items: start;
|
|
margin-top: 44px;
|
|
margin-bottom: 88px;
|
|
}
|
|
|
|
.product-gallery {
|
|
min-width: 0;
|
|
}
|
|
|
|
.product-gallery__main {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 0.96;
|
|
background: rgba(99, 118, 141, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-gallery__main a,
|
|
.product-gallery__main img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.product-gallery__main img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-gallery__placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #63768d;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.product-gallery__thumbs {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 28px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.product-gallery__thumb {
|
|
display: block;
|
|
aspect-ratio: 1.2 / 1;
|
|
background: rgba(99, 118, 141, 0.08);
|
|
border: 1px solid transparent;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.product-gallery__thumb:hover,
|
|
.product-gallery__thumb.active {
|
|
border-color: rgba(54, 33, 62, 0.35);
|
|
}
|
|
|
|
.product-gallery__thumb img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-summary {
|
|
min-width: 0;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.product-summary__category {
|
|
color: #63768d;
|
|
font-size: 16px;
|
|
line-height: 1.2;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.product-summary__title {
|
|
max-width: 650px;
|
|
color: #36213e;
|
|
font-weight: 400;
|
|
font-size: 42px;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.product-summary__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 18px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.product-summary__price-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.product-summary__price {
|
|
color: #36213e;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.product-summary__price--discount {
|
|
color: #c54c5d;
|
|
}
|
|
|
|
.product-summary__price-original {
|
|
color: #8a8a9a;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
text-decoration: line-through;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.product-summary__color-name {
|
|
font-size: 16px;
|
|
color: #554971;
|
|
}
|
|
|
|
.product-summary__availability {
|
|
color: #554971;
|
|
font-size: 17px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.product-summary__availability.available {
|
|
color: #4f7d4f;
|
|
}
|
|
|
|
.product-summary__availability.unavailable {
|
|
color: #a14b4b;
|
|
}
|
|
|
|
.product-summary__swatches {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.product-summary__swatch {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
border: 2px solid rgba(54, 33, 62, 0.18);
|
|
cursor: pointer;
|
|
transition: box-shadow 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.product-summary__swatch--active {
|
|
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #554971;
|
|
border-color: #554971;
|
|
}
|
|
|
|
.product-summary__description {
|
|
max-width: 560px;
|
|
margin-top: 28px;
|
|
color: #36213e;
|
|
font-size: 18px;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.product-summary__actions {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 245px) minmax(160px, 245px);
|
|
gap: 34px;
|
|
margin-top: 88px;
|
|
}
|
|
|
|
.product-summary__cart-form {
|
|
display: contents;
|
|
}
|
|
|
|
.product-summary__button {
|
|
min-height: 38px;
|
|
border: 1px solid #63768d;
|
|
font-family: 'Noah', sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.product-summary__button--link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-summary__button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.product-summary__button--primary {
|
|
background: #63768d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.product-summary__button--primary:hover {
|
|
background: #554971;
|
|
border-color: #554971;
|
|
}
|
|
|
|
.product-summary__button--secondary {
|
|
background: #ffffff;
|
|
color: #63768d;
|
|
}
|
|
|
|
.product-summary__button--secondary:hover {
|
|
border-color: #554971;
|
|
color: #36213e;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.catalog-container {
|
|
flex-direction: column;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
aside,
|
|
.item-list {
|
|
width: 100%;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.product-detail {
|
|
grid-template-columns: 1fr;
|
|
gap: 36px;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
margin-top: 28px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.product-summary__title {
|
|
font-size: 34px;
|
|
}
|
|
|
|
.product-summary__actions {
|
|
margin-top: 42px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.items-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.item-card-footer {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.item-card-header {
|
|
gap: 10px;
|
|
}
|
|
|
|
.item-card-favorite-button {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.product-gallery__thumbs {
|
|
gap: 12px;
|
|
}
|
|
|
|
.product-summary__title {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.product-summary__swatch {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.product-summary__description {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.product-summary__actions {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.product-summary__button {
|
|
min-height: 44px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Sidebar section links (Акции / Новинки headings) */
|
|
.sidebar-section-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.sidebar-section-link:hover,
|
|
.sidebar-section-link.active {
|
|
color: #36213e;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Sidebar mini-cards */
|
|
.sidebar-mini-card {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sidebar-mini-card__img-link {
|
|
flex: 0 0 52px;
|
|
width: 52px;
|
|
height: 52px;
|
|
display: block;
|
|
overflow: hidden;
|
|
background: rgba(99, 118, 141, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sidebar-mini-card__img-link img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-mini-card__body {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.sidebar-mini-card__name {
|
|
color: #36213e;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
transition: text-decoration-color 0.2s;
|
|
}
|
|
|
|
.sidebar-mini-card__name:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sidebar-mini-card__price {
|
|
color: #554971;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-more-link {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
color: #63768d;
|
|
font-size: 15px;
|
|
text-decoration: underline;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.sidebar-more-link:hover {
|
|
color: #36213e;
|
|
}
|