wickes-css2 2.116.0 → 2.117.0-develop.1

package/src/scss/components/_pdf-preview-modal.scss

@@ -0,0 +1,122 @@
+.pdf-preview {
+  &__heading {
+    font-size: 1rem;
+    padding: 10px 0;
+
+    .pdf-preview__icon {
+      font-size: 1.25rem;
+      color: $blue;
+      margin-right: 10px;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0;
+    border-top: 1px solid $gray-light;
+
+    .btn {
+      margin: 0 4px;
+
+      // The global button-secondary mixin styles :focus like :hover, so a tapped
+      // button stays filled. Keep the filled look for keyboard focus only.
+      &:focus:not(:focus-visible) {
+        color: $blue;
+        background-color: $white;
+        border-color: $blue;
+        box-shadow: none;
+      }
+
+      // Touch screens keep :hover on the last tapped element; drop it where
+      // there is no real hover. :active still gives feedback while pressed.
+      @media (hover: none) {
+        &:hover {
+          color: $blue;
+          background-color: $white;
+          border-color: $blue;
+        }
+      }
+    }
+  }
+
+  &__pages {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 8px;
+    font-size: 0.875rem;
+  }
+
+  &__page-input {
+    width: 50px;
+    margin-right: 4px;
+    padding: 2px 4px;
+    border: 1px solid $gray;
+    border-radius: 3px;
+    text-align: center;
+  }
+
+  // Scrolling, page stacking and the spacing around the pages come from the
+  // PdfPreview library; only the decoration is set here. The background makes
+  // the gutter visible, so it reads as the edge of the preview.
+  &__viewer {
+    height: 50vh;
+    background: $gray-light;
+  }
+
+  &__info {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  &__actions {
+    padding: 0 30px;
+
+    .btn {
+      width: 100%;
+
+      &:last-of-type {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  &__page {
+    background: $white;
+    box-shadow: 0 2px 8px $black-transparent20;
+  }
+
+  // sass-lint:disable no-important
+  .modal-header {
+    .modal-title {
+      margin-bottom: 0 !important;
+    }
+  }
+}
+
+.id-pdf-preview {
+  padding-bottom: 10px;
+}
+
+// Only the preview area breaks out of the modal's content column; the heading
+// and the navigation above it keep the default width. Row margin and column
+// gutter are both zeroed so the preview sits flush with the popup edges. The
+// border sits here rather than on the controls so it spans the whole popup.
+.id-pdf-preview-pages {
+  border: 1px solid $gray-light;
+
+  .modal-box__inner-row {
+    margin: 0;
+  }
+
+  .modal-box__inner-columns {
+    @include make-col(12);
+
+    padding: 0;
+  }
+}
+
+.id-pdf-preview-actions {
+  padding-bottom: 30px;
+}

package/src/scss/pages/_checkout-tradepro.scss

@@ -1,6 +1,7 @@
 @import '../helpers/helpers';
 @import '../components/id-type-modal';
 @import '../components/capture-modal';
+@import '../components/pdf-preview-modal';
 
 .page_checkout-tradePro,
 .page_checkout-confirmation-new {

package/src/scss/pages/tradePro-signup.scss

@@ -1,6 +1,7 @@
 @import '../helpers/helpers';
 @import '../components/id-type-modal';
 @import '../components/capture-modal';
+@import '../components/pdf-preview-modal';
 
 .page_signup-tradepro {
   .page-header {

package/src/sitemap.html

@@ -1331,6 +1331,7 @@
                 <li><a href="badges.html" target="_blank">Badges</a></li>
                 <li><a href="badges-ripple.html" target="_blank">Badges static</a></li>
                 <li><a href="loader-page.html" target="_blank">Loader</a></li>
+                <li><a href="page_pdf-preview-example.html" target="_blank">PDF Preview</a></li>
             </ul>
         </div>
     </div>