@colijnit/transaction 261.20.27 → 261.20.29

package/lib/component/checkout/style/_layout.scss

@@ -1,7 +1,5 @@
 @include export-module('co-checkout-layout') {
   .co-checkout {
-    max-width: $tp-checkout-wrapper-max-width;
-    margin: 0 auto;
     display: block;
     width: 100%;
     .co-stepper-content-wrapper {
@@ -10,6 +8,8 @@
       flex-wrap: nowrap;
       column-gap: $tp-checkout-column-gap;
       padding: $tp-checkout-padding;
+      max-width: $tp-checkout-wrapper-max-width;
+      margin: 0 auto;
     }
     .co-stepper-step {
       flex-basis: $tp-checkout-default-width;
@@ -83,6 +83,7 @@
       .label-description {
         font-size: $tp-checkout-label-description-fontsize;
         font-weight: $tp-checkout-label-description-fontweight;
+        text-transform: uppercase;
       }
     }
     .checkout-data-column {
@@ -92,7 +93,7 @@
       width: 100%;
       overflow: hidden;
       background: $tp-checkout-checkout-data-column-background;
-      padding: 30px;
+      padding: $tp-checkout-padding;
     }
     .checkout-data-row {
       display: flex;

package/lib/component/checkout/style/_material-definition.scss

@@ -1,15 +1,19 @@
 $tp-checkout-font-family: $tp-font-family !default;
-$tp-checkout-padding: 30px !default;
+$tp-checkout-padding: 30px 0 !default;
 $tp-checkout-column-gap: 30px !default;
 $tp-checkout-row-gap: 10px !default;
 $tp-checkout-default-width: 55% !default;
 $tp-checkout-max-width: calc(100% - 450px) !default;
 $tp-checkout-right-panel-max-width: 450px !default;
-$tp-checkout-wrapper-max-width: 1340px !default;
+$tp-checkout-wrapper-max-width: 1240px !default;
 $tp-checkout-right-panel-row-gap: 15px !default;
 $tp-checkout-right-panel-width: 400px !default;
 $tp-checkout-right-panel-width: 50% !default;
 $tp-checkout-label-column-font-family: $tp-font-family;
 $tp-checkout-label-fontsize: 12px !default;
-$tp-checkout-label-description-fontsize: 16px !default;
-$tp-checkout-label-description-fontweight: bold !default;
+$tp-checkout-label-description-fontsize: 14px !default;
+$tp-checkout-label-description-fontweight: 600 !default;
+$tp-checkout-wrapper-header-margin: 10px !default;
+$tp-checkout-wrapper-header-box-shadow: 4px 1px 4px 0px rgba(0, 0, 0, 0.1) !default;
+$tp-checkout-wrapper-header-top: 51px !default;
+$tp-checkout-wrapper-header-height: 60px !default;

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-dropdown/style/_layout.scss

@@ -0,0 +1,53 @@
+@include export-module('cc-delivery-planning-overview-tile-dropdown-layout') {
+  .co-delivery-planning-overview-tile-dropdown {
+
+      display: block;
+      background: white;
+      z-index: 100;
+
+
+    .dropdown-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.75rem;
+      border: 1px solid #d9dee7;
+      border-radius: 0.5rem;
+      background: white;
+      box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
+    }
+
+    .dropdown-action {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0.875rem 1rem;
+      border: 1px solid transparent;
+      border-radius: 0.625rem;
+      background: #f8fafc;
+      cursor: pointer;
+      transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+      font: inherit;
+      text-align: left;
+      color: #1e293b;
+    }
+
+    .dropdown-action:hover,
+    .dropdown-action:focus-visible {
+      background: #eef4ff;
+      border-color: #bfd2ff;
+      outline: none;
+      transform: translateY(-1px);
+    }
+
+    .dropdown-action:active {
+      transform: translateY(0);
+    }
+
+    .dropdown-action span {
+      font-size: 0.95rem;
+      font-weight: 600;
+      line-height: 1.2rem;
+    }
+  }
+}

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-dropdown/style/_material-definition.scss

@@ -0,0 +1 @@
+

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-dropdown/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('cc-delivery-planning-overview-tile-dropdown-theme') {
+  .co-delivery-planning-overview-tile-dropdown {
+  }
+}

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/component/delivery-planning-overview-tile-dropdown/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/delivery-planning-main/component/delivery-planning-overview/component/delivery-planning-overview-tile/style/_layout.scss

@@ -5,9 +5,15 @@
       opacity: 0.2;
     }
 
+    display: flex;
+    position: relative;
 
 
-    display: flex;
+    co-delivery-planning-overview-tile-dropdown {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
 
     .footer-wrapper {
       width: 100%;

package/lib/component/dialog/transaction-header/dialog-transaction-header-discount/style/_layout.scss

@@ -28,6 +28,20 @@
         display: flex;
         flex-direction: column;
       }
+      .with-discount-button {
+        display: flex;
+        align-items: center;
+
+        > * {
+          flex: 1;
+          min-width: 0;
+          margin-right: 10px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
       .divide-discount-button {
         border: none;
         background: transparent;
@@ -105,5 +119,45 @@
         font-weight: $tp-dialog-transaction-discount-total-font-weight;
       }
     }
+    .discount-button {
+      width: 36px !important;
+      height: 36px !important;
+      max-width: 36px;
+      &.updated {
+        background-color: #37c949;
+      }
+    }
+    .discount-codes-modal {
+      .co-dialog-wrapper {
+        width: 350px !important;
+      }
+
+      .dialog-header-caption {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+
+        co-icon {
+          height: 20px;
+          width: 20px;
+        }
+
+        .co-dialog-header-title {
+          margin: 0;
+        }
+      }
+
+      .dialog-content {
+        margin-top: 20px;
+      }
+
+      .dialog-footer {
+        border: none;
+      }
+
+      co-input-textarea {
+        margin-top: 15px;
+      }
+    }
   }
 }

package/lib/component/dialog/transaction-line/dialog-transaction-line-discount/style/_layout.scss

@@ -14,12 +14,59 @@
       flex-direction: row;
       column-gap: 10px;
       > * {
-        width: 50%;
+        width: calc(50% - 5px);
+      }
+    }
+    .two-column-grid-item {
+      display: flex;
+      align-items: center;
+
+      div {
+        flex: 1;
+        min-width: 0;
       }
     }
     .transaction-line-button {
       margin: 10px 0;
     }
+    .discount-button {
+      margin-left: 10px;
+      &.updated {
+        background-color: #37c949;
+      }
+    }
+    .discount-codes-modal {
+      .co-dialog-wrapper {
+        width: 350px !important;
+      }
+
+      .dialog-header-caption {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+
+        co-icon {
+          height: 20px;
+          width: 20px;
+        }
+
+        .co-dialog-header-title {
+          margin: 0;
+        }
+      }
+
+      .dialog-content {
+        margin-top: 20px;
+      }
+
+      .dialog-footer {
+        border: none;
+      }
+
+      co-input-textarea {
+        margin-top: 15px;
+      }
+    }
     .transaction-line-discount-overview {
       margin: $tp-dialog-transaction-line-discount-overview-margin;
       border: $tp-dialog-transaction-line-discount-overview-border;

package/lib/component/relation/relation-type/style/_layout.scss

@@ -2,9 +2,25 @@
   .co-relation-type {
     .default-data-row {
       display: flex;
-      column-gap: 10px;
+      border: 1px solid #e2e2e2;
+      border-radius: 10px;
+      padding: 3px;
+      width: auto;
+      float: left;
       .default-width {
         width: $tp-radio-button-width;
+        min-width: 90px;
+        align-items: center;
+        justify-content: center;
+      }
+      .co-radio-button {
+        &.selected {
+          background: #FFF;
+          border-radius: 10px;
+        }
+        .outer-circle {
+          display: none;
+        }
       }
     }
   }

package/lib/component/returns/return-wizard/return-lines-wizard/style/_layout.scss

@@ -0,0 +1,77 @@
+@include export-module('co-return-lines-wizard-layout') {
+  .co-return-lines-wizard {
+    .return-line-wizard-contents {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+
+      .lines-wizard-sub-title {
+        font-weight: bold;
+      }
+
+      .files-upload {
+        display: flex;
+
+        .co-files-upload {
+          width: 100%;
+          min-height: 150px;
+          overflow-x: auto;
+
+          .co-drag-drop-container {
+            padding-top: 30px;
+            position: relative;
+            margin-top: 0;
+            gap: 5px;
+            align-items: flex-start;
+
+            .add-file {
+              position: absolute;
+              top: 0;
+
+              .co-tile-render {
+                display: flex;
+                align-items: center;
+                flex-direction: row-reverse;
+
+                .add-button {
+                  position: unset;
+                }
+              }
+
+              .description {
+                font-weight: bold;
+                font-size: 12px;
+              }
+            }
+
+            .tile {
+              padding: 10px;
+              border-radius: 5px;
+              border: 1px solid #CCCCCC;
+              height: 100%;
+
+              .info {
+                max-width: 100px;
+
+                .description {
+                  font-size: 10px;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+              }
+
+              .trash {
+                width: 20px;
+                height: 20px;
+                padding: 2px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/returns/return-wizard/return-lines-wizard/style/_material-definition.scss

@@ -0,0 +1 @@
+

package/lib/component/returns/return-wizard/return-lines-wizard/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-return-lines-wizard-theme') {
+  .co-return-lines-wizard-tile {
+  }
+}

package/lib/component/returns/return-wizard/return-lines-wizard/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/returns/return-wizard/style/_layout.scss

@@ -1,9 +1,27 @@
 @include export-module('co-return-wizard-layout') {
   .co-return-wizard {
-    .line-selection-navigation-buttons {
+    font-family: $tp-co-transaction-search-font-family;
+    font-size: $tp-co-transaction-search-font-size;
+    .return-wizard-content {
+      width: 1000px;
+      padding: 20px;
+
       display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      flex-direction: column;
+      row-gap: 10px;
+      .wizard-title {
+        font-weight: bold;
+        font-size: 14px;
+        padding-bottom: 30px;
+      }
+      .wizard-sub-title {
+        font-weight: bold;
+      }
+      .line-selection-navigation-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
     }
   }
 }

package/lib/component/returns/return-wizard/wizard-return-line-display/style/_layout.scss

@@ -0,0 +1,7 @@
+@include export-module('co-wizard-return-line-display-layout') {
+  .co-wizard-return-line-display {
+    .return-line-display-contents {
+      box-shadow: -1px 2px 3px 0px rgba(0, 0, 0, 0.2);
+    }
+  }
+}

package/lib/component/returns/return-wizard/wizard-return-line-display/style/_material-definition.scss

@@ -0,0 +1 @@
+

package/lib/component/returns/return-wizard/wizard-return-line-display/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-wizard-return-line-display-theme') {
+  .co-wizard-return-line-display {
+  }
+}

package/lib/component/returns/return-wizard/wizard-return-line-display/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/returns/return-wizard/wizard-return-line-display-tile/style/_layout.scss

@@ -3,23 +3,69 @@
     .return-line-tile-contents {
       display: flex;
       flex-direction: row;
-      column-gap: 30px;
-      .return-line-image-display{
+      justify-content: space-between;
+      padding: 10px 15px;
+      border-color: rgba(0, 0, 0, 0.2);
+      border-style: solid;
+      border-width: 1px 1px 1px 1px;
+      margin-bottom: -1px;
+
+      .return-line-tile-left-contents {
         display: flex;
-        height: 100px;
-        width: 100px;
-        justify-content: center;
-        align-items: center;
-      }
-      .return-line-texts {
-        display: flex;
-        flex-direction: column;
-        row-gap: 10px;
+        flex-direction: row;
+        column-gap: 30px;
+        align-items: flex-start;
+
+        .wizard-line-checkbox {
+          padding-top: 15px;
+        }
+
+        .return-line-image-display {
+          display: flex;
+          height: 100px;
+          width: 100px;
+          justify-content: flex-start;
+          align-items: flex-start;
+        }
+
+        .return-line-texts {
+          font-size: 12px;
+          left: 200px;
+          display: flex;
+          flex-direction: column;
+          row-gap: 10px;
+
+          .return-line-description {
+            font-weight: 600;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+          }
+
+          .return-line-extra-texts {
+            display: flex;
+            flex-direction: column;
+            row-gap: 5px;
+            padding-top: 5px;
+          }
+        }
       }
+
       .return-line-picker-button {
         display: flex;
         flex-direction: row;
         column-gap: 10px;
+        height: 100%;
+        align-items: center;
+
+        .return-amount-picker {
+          width: 100px;
+          height: 30px;
+        }
       }
     }
   }

package/lib/component/simple-vertical-stepper/style/_material-definition.scss

@@ -26,7 +26,7 @@ $tp-co-stepper-step-title-icon-size: 17px !default;
 
 $tp-co-stepper-step-button-color: $tp-color-action !default;
 $tp-co-stepper-step-button-background-color: $tp-default-background-accent !default;
-$tp-co-stepper-step-button-icon-size: 15px !default;
+$tp-co-stepper-step-button-icon-size: 13px !default;
 $tp-co-stepper-step-button-icon-color: $tp-color-action !default;
 
 $tp-co-stepper-step-save-button-size: auto !default;

package/lib/component/stepper/style/_layout.scss

@@ -10,10 +10,27 @@ $index-origin: calc((#{$tp-co-stepper-step-index-size} / 2) + (#{$tp-co-stepper-
     flex-direction: column;
     width: 100%;
     box-sizing: initial;
+    .stepper-header-wrapper {
+      background-color: #FFF;
+      display: flex;
+      position: sticky;
+      top: $tp-checkout-wrapper-header-top;
+      z-index: 2;
+      font-size: 12px;
+      margin-bottom: $tp-checkout-wrapper-header-margin;
+      box-shadow: $tp-checkout-wrapper-header-box-shadow;
+      height: $tp-checkout-wrapper-header-height;
+    }
     .co-stepper-content {
       display: flex;
       flex-direction: row;
-      position: relative;
+      max-width: $tp-checkout-wrapper-max-width;
+      margin: 0 auto;
+      position: absolute;
+      width: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 15px;
     }
     .stepper-step {
       position: relative;
@@ -56,7 +73,7 @@ $index-origin: calc((#{$tp-co-stepper-step-index-size} / 2) + (#{$tp-co-stepper-
         box-sizing: initial;
       }
       .description {
-        margin-bottom: 15px;
+        margin-bottom: 5px;
         font-weight: $tp-co-stepper-step-incomplete-description-font-weight;
       }
       &.active {
@@ -120,11 +137,28 @@ $index-origin: calc((#{$tp-co-stepper-step-index-size} / 2) + (#{$tp-co-stepper-
       display: flex;
       column-gap: 5px;
       justify-content: flex-end;
-      margin: 15px 0;
-      .co-button {
+      position: sticky;
+      bottom: 0;
+      background: #FFF;
+      padding: 15px 25px;
+      z-index: 2;
+      box-shadow: 0px 2px 0px 0px rgba(234, 234, 234, 0.7);
+      border-top: 10px solid #f8f8fa;
+      co-button.co-button {
+        background: #212437;
+        color: #FFF;
+        border: 1px solid #1A73E8;
+        height: 32px;
+
         .co-icon {
           width: $tp-co-stepper-step-button-icon-size;
           height: $tp-co-stepper-step-button-icon-size;
+          svg {
+            fill: #FFF;
+          }
+          svg [fill] {
+            fill: #FFF;
+          }
         }
       }
     }

package/lib/component/stepper/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $tp-co-stepper-font-family: $tp-font-family !default;
 $tp-co-stepper-font-size: $tp-font-size !default;
-$tp-co-stepper-step-index-size: 11px !default;
+$tp-co-stepper-step-index-size: 8px !default;
 $tp-co-stepper-step-index-border-width: 3px !default;
 $tp-co-stepper-step-index-font-size: $tp-font-size-big !default;
 $tp-co-stepper-step-padding: 30px !default;
@@ -17,7 +17,7 @@ $tp-co-stepper-step-description-font-weight: bold !default;
 $tp-co-stepper-step-incomplete-description-color: rgba(0, 0, 0, 0.3) !default;
 $tp-co-stepper-step-incomplete-description-font-weight: normal !default;
 
-$tp-co-stepper-step-title-padding: 30px !default;
+$tp-co-stepper-step-title-padding: 0 25px !default;
 $tp-co-stepper-step-title-column-gap: 10px !default;
 $tp-co-stepper-step-title-font-family: $tp-font-family !default;
 $tp-co-stepper-step-title-font-size: 20px !default;
@@ -26,5 +26,5 @@ $tp-co-stepper-step-title-icon-size: 17px !default;
 
 $tp-co-stepper-step-button-color: $tp-color-action !default;
 $tp-co-stepper-step-button-background-color: $tp-default-background-accent !default;
-$tp-co-stepper-step-button-icon-size: 15px !default;
+$tp-co-stepper-step-button-icon-size: 13px !default;
 $tp-co-stepper-step-button-icon-color: $tp-color-action !default;

package/lib/component/stepper-step/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $tp-co-stepper-font-family: $tp-font-family !default;
 $tp-co-stepper-font-size: $tp-font-size !default;
-$tp-co-stepper-step-index-size: 11px !default;
+$tp-co-stepper-step-index-size: 8px !default;
 $tp-co-stepper-step-index-border-width: 3px !default;
 $tp-co-stepper-step-index-font-size: $tp-font-size-big !default;
 $tp-co-stepper-step-padding: 30px !default;

package/lib/component/transaction-header-fields/transaction-header-delivery-method-button/style/_layout.scss

@@ -9,8 +9,8 @@
         display: none;
       }
       .transaction-inside-label {
-        font-size: 9px;
-        top: -10px;
+        font-size: 7.5px;
+        top: -9px;
         line-height: 18px;
         color: #2e3350;
         padding: 0 5px;

package/lib/component/transaction-line/transaction-line-label/style/_layout.scss

@@ -3,9 +3,9 @@
     .transaction-inside-label {
       position: absolute;
       transform: translateX(-50%);
-      top: -5px;
+      top: -3px;
       left: 50%;
-      font-size: 8px;
+      font-size: 6.5px;
       color: #171721;
       max-width: 100%;
       text-overflow: ellipsis;
@@ -17,6 +17,7 @@
       width: auto;
       text-align: center;
       font-weight: normal;
+      text-transform: uppercase;
     }
   }
 

package/lib/component/transaction-line/transaction-overview-line/style/_layout.scss

@@ -13,6 +13,9 @@
           width: 20px;
           height: 20px;
 
+          svg {
+            fill: $color-user-form-detail;
+          }
           &.final {
             svg {
               fill: $color-user-form-detail-final;