@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/preview/styles/_windows-chrome.scss

@@ -0,0 +1,229 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/**
+ * Windows + Chrome Notification Styles
+ * Also applies to Windows + Firefox/Edge/Opera (they extend this)
+ */
+
+.notification-container.windows-chrome {
+  // Inherit shared styles from macOS Chrome
+  @extend .notification-container.macos-chrome;
+
+  // Collapsed state - ensure header aligns center vertically and add brand icon border-radius
+  &.collapsed .notification-header {
+    align-items: center;
+
+    .notification-brand-icon-container {
+      .notification-brand-icon {
+        border-radius: 5px;
+      }
+    }
+  }
+
+  &.expanded {
+    width: 100%;
+    max-width: 352px;
+    background: $CAP_G09;
+    border: 1px solid $CAP_G07;
+    border-radius: 4px;
+    padding: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .windows-chrome-expanded-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      gap: 10px;
+    }
+
+    .windows-chrome-banner {
+      width: 100%;
+      line-height: 0;
+
+      .windows-chrome-banner-image {
+        width: 100%;
+        height: 151px;
+        object-fit: cover;
+        display: block;
+      }
+    }
+
+    .windows-chrome-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 0 12px 12px 12px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .windows-chrome-header-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .windows-chrome-browser-icon {
+      width: 32px;
+      height: 32px;
+      background: $CAP_G09;
+      border-radius: 6px;
+      padding: 6px;
+    }
+
+    .windows-chrome-browser-title {
+      flex: 1;
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .windows-chrome-menu-text {
+        font-weight: 500;
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        user-select: none;
+        font-family: 'Roboto', 'Segoe UI', sans-serif;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .windows-chrome-menu-icon {
+          height: $FONT_SIZE_M;
+          width: auto;
+          display: block;
+        }
+      }
+
+      .windows-chrome-close-text {
+        font-weight: 500;
+        font-size: $FONT_SIZE_M;
+        color: $FONT_COLOR_01;
+        line-height: 1;
+        user-select: none;
+        font-family: 'Roboto', 'Segoe UI', sans-serif;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .windows-chrome-close-icon {
+          height: $FONT_SIZE_M;
+          width: auto;
+          display: block;
+        }
+      }
+    }
+
+    .windows-chrome-content-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .windows-chrome-brand-icon {
+      width: 42px;
+      height: 42px;
+      padding: 0;
+      border-radius: 4px;
+      border: 1px solid $CAP_G07;
+      background: $CAP_WHITE;
+      flex-shrink: 0;
+
+      .notification-brand-icon {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .windows-chrome-text-block {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+      width: 100%;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-title {
+      font-weight: 600;
+      font-size: $FONT_SIZE_S;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 14px;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-url {
+      font-weight: 500;
+      font-size: $FONT_SIZE_VS;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 12px;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-body-text {
+      font-weight: 400;
+      font-size: $FONT_SIZE_VS;
+      color: $FONT_COLOR_01;
+      margin: 0;
+      line-height: 12px;
+      word-break: break-word;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+    }
+
+    .windows-chrome-cta-container {
+      display: flex;
+      gap: 8px;
+      width: 100%;
+      margin-top: 4px;
+    }
+
+    .windows-chrome-cta-button {
+      height: 32px;
+      padding: 6px 24px;
+      border-radius: 4px;
+      border: 1px solid $CAP_G07;
+      background: $CAP_WHITE;
+      cursor: pointer;
+      box-sizing: border-box;
+      width: 148px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'Roboto', 'Segoe UI', sans-serif;
+
+      &.windows-chrome-cta-button-single {
+        width: 100%;
+      }
+
+      .windows-chrome-cta-button-text {
+        font-weight: $FONT_WEIGHT_MEDIUM;
+        font-size: $FONT_SIZE_S;
+        color: $FONT_COLOR_01;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        line-height: 1;
+      }
+    }
+  }
+}
+