src/widgets/cart/CartItem/ui/CartItem.module.css - main - lizardking/react_final

src/widgets/cart/CartItem/ui/CartItem.module.css
149 строк2 KB
LizardKing
Рефакторинг на FSD
24 ноя 2025, 16:05
24 ноя 2025, 16:05eedf5c5
.cart_item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eceff1;
}

.cart_item:last-of-type {
  border-bottom: none;
}

.cart_item_desc {
  display: flex;
  flex-grow: 1;
  align-items: center;
  column-gap: 16px;
}

.cart_item_image {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.cart_item_body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  row-gap: 8px;
}

.cart_item_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.cart_item_title {
  width: 100%;
  margin: 0;
  color: currentcolor;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.cart_item_name {
  margin: 0;
  font: inherit;
}

.cart_item_controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 8px;
  min-width: 140px;
}

.cart_item_price {
  text-align: right;
}

.price_wrap {
  display: inline-flex;
  align-items: baseline;
  column-gap: 8px;
}

.price_big {
  font-weight: 800;
}

.price {
  font-size: 16px;
  line-height: 20px;
}

.price_discount {
  font-size: 18px;
  line-height: 24px;
}

.price_old {
  color: #7b8e98;
  font-size: 13px;
  line-height: 16px;
  text-decoration-line: line-through;
}

.price_right {
  text-align: right;
}

.cart_item_bnt_trash {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

.cart_item_bnt_trash:hover {
  background-color: rgb(244 67 54 / 6%);
  transform: translateY(-1px);
}

.cart_item_bnt_trash:hover path {
  fill: #f44336;
}

.cart_item_bnt_trash:active {
  transform: translateY(0);
}

@media (width <= 768px) {
  .cart_item {
    align-items: flex-start;
  }

  .cart_item_desc {
    align-items: flex-start;
  }

  .cart_item_controls {
    align-items: flex-start;
    min-width: auto;
  }

  .cart_item_price {
    text-align: left;
  }
}