barneo-search-widget-lib/src/modules/productsWidget/style/responsive.css

Библиотека для поиска по каталогу Barneo на Vue 3

/* Barneo Products Widget - Responsive Styles */

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
  .barneo-products-widget {
    gap: var(--barneo-spacing-md);
    padding: var(--barneo-spacing-lg);
  }

  .barneo-products-title {
    padding: var(--barneo-spacing-md) 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--barneo-spacing-sm);
  }

  .barneo-products-title h2 {
    font-size: var(--barneo-font-size-lg);
  }

  .barneo-products-count {
    font-size: var(--barneo-font-size-xs);
  }

  .barneo-product-image {
    height: 120px;
  }

  .barneo-product-title {
    font-size: var(--barneo-font-size-xs);
    -webkit-line-clamp: 2;
  }

  .barneo-product-description {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }

  .barneo-product-price {
    font-size: var(--barneo-font-size-sm);
  }

  .barneo-products-pagination {
    gap: var(--barneo-spacing-xs);
    padding: var(--barneo-spacing-md) 0;
  }

  .barneo-pagination-button,
  .barneo-pagination-page {
    min-width: 36px;
    height: 36px;
    padding: var(--barneo-spacing-xs) var(--barneo-spacing-sm);
    font-size: var(--barneo-font-size-xs);
  }

  .barneo-pagination-pages {
    gap: 2px;
  }

  .barneo-products-empty {
    padding: var(--barneo-spacing-2xl) var(--barneo-spacing-md);
  }

  .barneo-products-empty p {
    font-size: var(--barneo-font-size-sm);
  }

  .barneo-loading-spinner {
    width: 24px;
    height: 24px;
    margin-bottom: var(--barneo-spacing-md);
  }

  .barneo-products-error {
    padding: var(--barneo-spacing-md);
    font-size: var(--barneo-font-size-xs);
  }
}

/* Tablet Styles (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .barneo-products-widget {
    gap: var(--barneo-spacing-lg);
    padding: var(--barneo-spacing-xl);
  }

  .barneo-products-title {
    padding: var(--barneo-spacing-lg) 0;
  }

  .barneo-product-image {
    height: 160px;
  }

  .barneo-product-title {
    font-size: 13px;
  }

  .barneo-product-description {
    font-size: 11px;
  }

  .barneo-product-price {
    font-size: 15px;
  }

  .barneo-pagination-button,
  .barneo-pagination-page {
    min-width: 38px;
    height: 38px;
    padding: 7px var(--barneo-spacing-md);
  }
}

/* Desktop Styles (1024px and up) */
@media (min-width: 1024px) {
  .barneo-products-widget {
    gap: var(--barneo-spacing-lg);
    padding: var(--barneo-spacing-2xl);
  }

  .barneo-products-title {
    padding: var(--barneo-spacing-lg) 0;
  }

  .barneo-product-image {
    height: 200px;
  }

  .barneo-product-title {
    font-size: var(--barneo-font-size-sm);
  }

  .barneo-product-description {
    font-size: var(--barneo-font-size-xs);
  }

  .barneo-product-price {
    font-size: var(--barneo-font-size-base);
  }

  .barneo-pagination-button,
  .barneo-pagination-page {
    min-width: 40px;
    height: 40px;
    padding: var(--barneo-spacing-sm) var(--barneo-spacing-md);
  }
}

/* Large Desktop Styles (1440px and up) */
@media (min-width: 1440px) {
  .barneo-product-image {
    height: 220px;
  }

  .barneo-product-title {
    font-size: 15px;
  }

  .barneo-product-description {
    font-size: 13px;
  }

  .barneo-product-price {
    font-size: 17px;
  }
}

/* Landscape Mobile Styles */
@media (max-width: 767px) and (orientation: landscape) {
  .barneo-product-image {
    height: 100px;
  }

  .barneo-product-title {
    font-size: 11px;
    -webkit-line-clamp: 1;
  }

  .barneo-product-description {
    font-size: 10px;
    -webkit-line-clamp: 1;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .barneo-product-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .barneo-product-card,
  .barneo-pagination-button,
  .barneo-pagination-page,
  .barneo-products-loading,
  .barneo-products-empty,
  .barneo-products-error,
  .adaptive-grid {
    animation: none;
    transition: none;
  }

  .barneo-pagination-button::before,
  .barneo-pagination-page::before {
    animation: none;
  }
}