@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-card-product/dropi-card-product.css

@@ -1,158 +1,235 @@
-:host { display: block; }
+:host {
+  display: block;
+  font-family: 'Inter', sans-serif;
+}
 *, *::before, *::after { box-sizing: border-box; }
 
-.card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--Gray-Gray-100, #eceef4);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+/* ── Card wrapper ── */
+.dropi-card-product {
+  position: relative;
+  background: #ffffff;
+  border-radius: 8px;
   overflow: hidden;
+  transition: all 0.2s ease-in-out;
   cursor: pointer;
-  transition: box-shadow 0.2s, transform 0.2s;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 450px;
+  box-shadow: none;
 }
-.card:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-  transform: translateY(-2px);
+
+/* ── Image container ── */
+.product-image-container {
+  padding: 4px;
+  flex-shrink: 0;
 }
 
-/* Image */
-.card__image-wrap {
+.product-image {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
-  background: var(--Gray-Gray-50, #f7f8fa);
+  border-radius: 8px;
+  border: 1px solid #c3c9d9;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
 }
 
-.card__image {
+.product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 8px;
 }
 
-.card__image-placeholder {
-  width: 100%;
-  height: 100%;
+.product-image img.error-img {
+  object-fit: contain;
+}
+
+/* ── Favorite button ── */
+.favorite-button {
+  position: absolute;
+  bottom: 5px;
+  right: 6px;
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 42px;
+  height: 40px;
+  background: #ffffff;
+  border: 1px solid #858ea6;
 }
 
-/* Badge */
-.card__badge {
-  position: absolute;
-  top: var(--Size-2, 8px);
-  left: var(--Size-2, 8px);
-  padding: 2px 8px;
-  border-radius: 100px;
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-bold, 700);
-}
-.card__badge--default  { background: var(--Gray-Gray-100, #eceef4); color: var(--Gray-Gray-700, #32394d); }
-.card__badge--success  { background: var(--Success-Success-100, #d4f5de); color: var(--Success-Success-700, #0f7b2e); }
-.card__badge--warning  { background: var(--Warning-Warning-100, #fef3cd); color: var(--Warning-Warning-700, #856404); }
-.card__badge--error    { background: var(--Error-Error-100, #fde8e8); color: var(--Error-Error-700, #9b1c1c); }
-.card__badge--info     { background: var(--Info-Info-100, #dbeafe); color: var(--Info-Info-700, #1d4ed8); }
-
-/* Favorite button */
-.card__fav {
+.favorite-button.favorite-active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Product info ── */
+.product-info {
+  position: relative;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  justify-content: space-between;
+}
+
+/* ── Supplier insignia — overlaps from top ── */
+.supplier-insignia {
   position: absolute;
-  top: var(--Size-2, 8px);
-  right: var(--Size-2, 8px);
-  background: var(--Neutral-White, #fff);
-  border: none;
-  border-radius: 50%;
-  width: 30px;
-  height: 30px;
+  top: -24px;
+  left: 0px;
+}
+
+/* ── Header: category + stock ── */
+.product-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
-  transition: transform 0.15s;
+  width: 100%;
+  height: 26px;
 }
-.card__fav:hover { transform: scale(1.1); }
-.card__fav--active { background: var(--Error-Error-50, #fef2f2); }
 
-/* Body */
-.card__body {
+.category {
+  color: #69738c;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
   flex: 1;
-  padding: var(--Size-3, 12px);
+}
+
+.stock-info {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  gap: 2px;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
 }
 
-.card__category {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-400, #858ea6);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+.stock-label {
+  color: #69738c;
 }
 
-.card__name {
+.stock-value {
+  font-weight: 500;
+}
+
+/* ── Product name ── */
+.product-name {
+  color: #32394d;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
   margin: 0;
-  font-size: var(--font-size-s, 12px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
+  overflow: hidden;
+  text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
-.card__price {
-  margin: 4px 0 0;
-  font-size: var(--font-size-m, 14px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Primary-Primary-500, #f49a3d);
+/* ── Supplier ── */
+.supplier-info {
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  line-height: 1.2;
 }
 
-.card__price-currency {
-  font-size: var(--font-size-xs, 10px);
-  margin-right: 2px;
+.supplier-label {
+  color: #69738c;
+  font-weight: 400;
 }
 
-.card__supplier {
-  margin: 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-400, #858ea6);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.supplier-name {
+  color: #50a5f1;
+  font-weight: 400;
+  margin-left: 4px;
+  cursor: pointer;
 }
 
-.card__no-stock {
-  margin: 4px 0 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Error-Error-500, #f46a6b);
+/* ── Prices ── */
+.price-container {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
 }
 
-/* Footer */
-.card__footer {
-  padding: var(--Size-2, 8px) var(--Size-3, 12px) var(--Size-3, 12px);
+.price-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.card__add-btn {
-  width: 100%;
-  height: 36px;
+.price-label {
+  color: #69738c;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  height: 18px;
+  min-width: max-content;
+}
+
+.price-value {
+  color: #32394d;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
+/* ── Separator ── */
+.separator {
+  height: 1px;
+  background: #e6eaf2;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* ── Action button ── */
+.action-button {
+  background: #ffffff;
+  border: none;
+  border-top: 1px solid #e6eaf2;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--Size-1, 4px);
-  background: var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #fff);
-  border: none;
-  border-radius: var(--Border-2, 8px);
-  font-size: var(--font-size-s, 12px);
-  font-weight: var(--font-weight-bold, 700);
-  font-family: inherit;
-  cursor: pointer;
-  transition: background 0.15s;
+  gap: 8px;
+  height: 40px;
+  flex-shrink: 0;
 }
-.card__add-btn:hover:not(:disabled) { background: var(--Primary-Primary-600, #e08526); }
-.card__add-btn:disabled {
-  background: var(--Gray-Gray-200, #c3c9d9);
+
+.action-button--disabled {
+  opacity: 0.3;
   cursor: not-allowed;
 }
+
+.button-text {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.1;
+  color: #f49a3d;
+  text-align: center;
+  white-space: nowrap;
+}