@redacto.io/consent-sdk-react 9.2.0-beta.0 → 9.2.0-beta.2

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -551,6 +551,192 @@ export const injectPCStyles = () => {
       }
     }
 
+    .pc-product-select-section {
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      overflow: visible;
+    }
+    .pc-product-select-header {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      margin-bottom: 0.75rem;
+    }
+    .pc-product-select-chips {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.4375rem;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      padding-bottom: 0.125rem;
+      overflow: visible;
+    }
+    .pc-product-select-chip {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      box-sizing: border-box;
+      padding: 0.3125rem 0.6875rem;
+      border: 1px solid var(--pc-border-color);
+      border-radius: 9999px;
+      background-color: var(--pc-bg-secondary);
+      color: var(--pc-text-primary);
+      cursor: pointer;
+      appearance: none;
+      -webkit-appearance: none;
+      font-family: inherit;
+      line-height: 1.25;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+      max-width: 100%;
+      min-width: 0;
+    }
+    .pc-product-select-chip:disabled {
+      cursor: default;
+      opacity: 0.85;
+    }
+    .pc-product-select-chip--selected {
+      border-color: var(--pc-primary);
+      background-color: color-mix(in srgb, var(--pc-primary) 10%, var(--pc-bg-primary));
+    }
+    .pc-product-select-chip--skeleton {
+      cursor: default;
+      pointer-events: none;
+    }
+    .pc-product-select-chip-inner {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.0625rem;
+      min-width: 0;
+      max-width: min(100%, 11.5rem);
+    }
+    .pc-product-select-chip-label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      min-width: 0;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      line-height: 1.25;
+    }
+    .pc-product-select-chip-suffix {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      min-width: 0;
+      font-size: 0.6875rem;
+      font-weight: 500;
+      color: var(--pc-text-secondary);
+      line-height: 1.25;
+    }
+    .pc-product-select-chip-meta {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+      min-width: 0;
+      font-size: 0.6875rem;
+      color: var(--pc-text-secondary);
+      line-height: 1.25;
+    }
+    .pc-product-purpose-panel {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-radius-lg, 0.5rem);
+      background-color: var(--pc-bg-secondary);
+      overflow: hidden;
+    }
+    .pc-product-purpose-panel-header {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      padding: 0.75rem;
+      background-color: var(--pc-bg-primary);
+      border-bottom: 1px solid var(--pc-border-color);
+    }
+    .pc-product-purpose-panel-title-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.375rem 0.5rem;
+      min-width: 0;
+    }
+    .pc-product-purpose-panel-title {
+      overflow-wrap: anywhere;
+      word-break: break-word;
+      min-width: 0;
+    }
+    .pc-product-purpose-panel-nominator,
+    .pc-product-purpose-panel-subtitle {
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    .pc-product-purpose-panel-body {
+      padding: 0.75rem;
+      background-color: var(--pc-bg-primary);
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    @media (min-width: 640px) {
+      .pc-product-select-header {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        margin-bottom: 1rem;
+      }
+      .pc-product-select-chips {
+        gap: 0.4375rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .pc-product-purpose-panel-header {
+        padding: 0.875rem 1rem;
+      }
+      .pc-product-purpose-panel-body {
+        padding: 1rem;
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-product-select-chips {
+        gap: 0.4375rem;
+      }
+      .pc-product-purpose-panel-header {
+        padding: 1rem;
+      }
+      .pc-product-purpose-panel-body {
+        padding: 1rem;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-product-select-header {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .pc-product-select-chips {
+        gap: 0.4375rem;
+      }
+      .pc-product-select-chip-inner {
+        max-width: min(100%, 13rem);
+      }
+    }
+    @media (min-width: 1280px) {
+      .pc-product-select-chips {
+        gap: 0.625rem;
+      }
+    }
+
     /* Responsive Flex Direction */
     .pc-flex-responsive {
       flex-direction: column;
@@ -901,6 +1087,121 @@ export const injectPCStyles = () => {
       }
     }
 
+    /* My Receipt — toolbar polish */
+    .pc-receipts-filters-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      background-color: var(--pc-bg-primary);
+      padding: 0.75rem;
+    }
+    .pc-receipts-filters-header {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .pc-receipts-filters-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.75rem;
+      width: 100%;
+    }
+    .pc-receipts-filter-control {
+      width: 100% !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      flex: 1 1 auto !important;
+    }
+    .pc-receipts-summary-row {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border-top: 1px solid var(--pc-border-color);
+      padding-top: 0.625rem;
+    }
+    .pc-receipts-active-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+      align-items: center;
+    }
+    .pc-receipts-filter-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      border-radius: 9999px;
+      border: 1px solid var(--pc-border-color);
+      background-color: var(--pc-bg-secondary);
+      color: var(--pc-text-secondary);
+      font-size: 0.75rem;
+      line-height: 1.2;
+      padding: 0.1875rem 0.5rem;
+      white-space: nowrap;
+    }
+    .pc-receipts-filter-chip-label {
+      color: var(--pc-text-primary);
+      font-weight: 600;
+    }
+    .pc-receipt-custom-hint {
+      margin: 0;
+      color: var(--pc-error);
+    }
+    @media (min-width: 768px) and (max-width: 1023px) {
+      .pc-receipts-filters-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-receipts-filters-card {
+        padding: 0.875rem 1rem;
+      }
+      .pc-receipts-filters-header {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 1rem;
+      }
+      .pc-receipts-summary-row {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 0.75rem;
+      }
+      .pc-receipts-active-chips {
+        justify-content: flex-end;
+      }
+    }
+    @media (min-width: 1024px) {
+      .pc-receipts-filters-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+    }
+
+    /* My Receipt — custom date range (From / To pair) */
+    .pc-receipt-date-range {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      gap: 0.5rem;
+      width: 100%;
+      margin-top: -0.125rem;
+    }
+    .pc-receipt-date-field {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+    @media (min-width: 768px) {
+      .pc-receipt-date-range {
+        width: auto !important;
+      }
+      .pc-receipt-date-field {
+        flex: 0 0 auto;
+        width: 160px;
+      }
+    }
+
     .pc-navbar-actions {
       align-items: center !important;
     }