@colijnit/transaction 261.20.28 → 261.20.30

package/index.d.ts

@@ -10708,6 +10708,7 @@ declare class DeliveryPlanningOverviewTileComponent implements OnInit, OnDestroy
     hourSchedulingComp: HourSchedulingExpandableComponent;
     get tileMode(): DeliveryPlanningTileModes;
     expanded: boolean;
+    showDropdown: boolean;
     showClass(): boolean;
     constructor(_deliveryPlanningService: DeliveryPlanningService, _transaction: TransactionService, _changeDetector: ChangeDetectorRef, iconCacheService: IconCacheService, dialogService: TransactionDialogService);
     get employeeView(): boolean;
@@ -10749,6 +10750,7 @@ declare class DeliveryPlanningOverviewTileComponent implements OnInit, OnDestroy
         id: number;
     }): void;
     handleMapClicked(mouseEvent: MouseEvent, transport: PlanningTransportWeekDay): void;
+    handleDropdownClicked(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DeliveryPlanningOverviewTileComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DeliveryPlanningOverviewTileComponent, "co-delivery-planning-overview-tile", never, { "disabled": { "alias": "disabled"; "required": false; }; "transportDay": { "alias": "transportDay"; "required": false; }; }, { "transportSelected": "transportSelected"; "expandedEvent": "expandedEvent"; "deleteOrderEvent": "deleteOrderEvent"; "planOrderOnSameTimeEvent": "planOrderOnSameTimeEvent"; "deleteOrderLineEvent": "deleteOrderLineEvent"; "editOrderEvent": "editOrderEvent"; "getTransportOrdersEvent": "getTransportOrdersEvent"; "timeChangeEvent": "timeChangeEvent"; "openSettingsDialogEvent": "openSettingsDialogEvent"; "availabilityChecked": "availabilityChecked"; "calendarPlanEvent": "calendarPlanEvent"; "moveEvent": "moveEvent"; "reorderOrderEvent": "reorderOrderEvent"; "moveOrderUpEvent": "moveOrderUpEvent"; "moveOrderDownEvent": "moveOrderDownEvent"; }, never, never, false, never>;
 }
@@ -10990,9 +10992,24 @@ declare class DeliveryPlanningOverviewShortLineModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DeliveryPlanningOverviewShortLineModule>;
 }
 
+type DeliveryPlanningOverviewTileDropdownAction = "ORDER_PICKING" | "DELIVERY_SLIP";
+declare class DeliveryPlanningOverviewTileDropdownComponent {
+    actionClicked: EventEmitter<DeliveryPlanningOverviewTileDropdownAction>;
+    showClass(): boolean;
+    onActionClicked(action: DeliveryPlanningOverviewTileDropdownAction): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeliveryPlanningOverviewTileDropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DeliveryPlanningOverviewTileDropdownComponent, "co-delivery-planning-overview-tile-dropdown", never, {}, { "actionClicked": "actionClicked"; }, never, never, false, never>;
+}
+
+declare class DeliveryPlanningOverviewTileDropdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeliveryPlanningOverviewTileDropdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DeliveryPlanningOverviewTileDropdownModule, [typeof DeliveryPlanningOverviewTileDropdownComponent], [typeof i2.CommonModule, typeof PipeModule], [typeof DeliveryPlanningOverviewTileDropdownComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DeliveryPlanningOverviewTileDropdownModule>;
+}
+
 declare class DeliveryPlanningOverviewTileModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DeliveryPlanningOverviewTileModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DeliveryPlanningOverviewTileModule, [typeof DeliveryPlanningOverviewTileComponent], [typeof i2.CommonModule, typeof PipeModule, typeof i3.CollapsibleModule, typeof DeliveryPlanningOverviewTileLineModule, typeof DeliveryPlanningTileStatusModule, typeof i3.CoDialogModule, typeof i3.InputTextModule, typeof i3.ButtonModule, typeof i13.DragDropModule, typeof i3.ListOfValuesModule, typeof i3.IconModule, typeof DeliveryPlanningOverviewShortLineModule, typeof DefaultOkCancelButtonsModule, typeof i3.InputCheckboxModule, typeof i3.HourSchedulingComponentModule, typeof i3.HourSchedulingExpandableComponentModule, typeof i3.HourSchedulingExpandableTemplateModule], [typeof DeliveryPlanningOverviewTileComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DeliveryPlanningOverviewTileModule, [typeof DeliveryPlanningOverviewTileComponent], [typeof i2.CommonModule, typeof PipeModule, typeof i3.CollapsibleModule, typeof DeliveryPlanningOverviewTileLineModule, typeof DeliveryPlanningTileStatusModule, typeof i3.CoDialogModule, typeof i3.InputTextModule, typeof i3.ButtonModule, typeof i13.DragDropModule, typeof i3.ListOfValuesModule, typeof i3.IconModule, typeof DeliveryPlanningOverviewShortLineModule, typeof DefaultOkCancelButtonsModule, typeof i3.InputCheckboxModule, typeof i3.HourSchedulingComponentModule, typeof i3.HourSchedulingExpandableComponentModule, typeof i3.HourSchedulingExpandableTemplateModule, typeof DeliveryPlanningOverviewTileDropdownModule], [typeof DeliveryPlanningOverviewTileComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DeliveryPlanningOverviewTileModule>;
 }
 

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/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/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-line-interbranch-receive-goods/style/_layout.scss

@@ -1,78 +1,78 @@
-@include export-module('co-transaction-line-interbranch-receive-goods-layout') {
-  .co-transaction-line-interbranch-receive-goods {
-    .columns-wrapper {
-      display: flex;
-    }
-
-    .co-input-number-picker {
-      width: 140px;
-    }
-
-    .details-column {
-      width: 45%;
-      display: flex;
-      flex-direction: column;
-
-      .transaction-line-totals-amount {
-        margin: 5px;
-      }
-
-      //.amount-number-picker {
-      //  height: 40px;
-      //  margin: 5px;
-      //}
-    }
-
-    .header-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin: $tp-co-transaction-line-receive-goods-title-margin;
-
-      .details-header {
-        font-size: $tp-co-transaction-line-receive-goods-title-font-size;
-        font-weight: bold;
-      }
-    }
-
-    .divider-wrapper {
-      display: flex;
-      width: 10%;
-      justify-content: center;
-      visibility: hidden;
-
-      .divider {
-        border-left: 1px solid;
-        border-color: $tp-color-border;
-        margin: 5px; // $tp-co-transaction-request-details-input-margin;
-      }
-    }
-
-    .details-input {
-      margin: 5px; // $tp-co-transaction-request-details-input-margin;
-    }
-
-    .location-wrapper {
-      position: relative;
-
-      .co-transaction-button {
-        width: auto;
-        margin: 5px;
-      }
-    }
-    .disabled {
-      cursor: default;
-      opacity: 0.6;
-    }
-    .clickable {
-      cursor: pointer;
-    }
-
-    .warehouse-buttons {
-      width: 100%;
-      .co-transaction-button {
-        width: 100%;
-      }
-    }
-  }
-}
+@include export-module('co-transaction-line-interbranch-receive-goods-layout') {
+  .co-transaction-line-interbranch-receive-goods {
+    .columns-wrapper {
+      display: flex;
+    }
+
+    .co-input-number-picker {
+      width: 140px;
+    }
+
+    .details-column {
+      width: 45%;
+      display: flex;
+      flex-direction: column;
+
+      .transaction-line-totals-amount {
+        margin: 5px;
+      }
+
+      //.amount-number-picker {
+      //  height: 40px;
+      //  margin: 5px;
+      //}
+    }
+
+    .header-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: $tp-co-transaction-line-receive-goods-title-margin;
+
+      .details-header {
+        font-size: $tp-co-transaction-line-receive-goods-title-font-size;
+        font-weight: bold;
+      }
+    }
+
+    .divider-wrapper {
+      display: flex;
+      width: 10%;
+      justify-content: center;
+      visibility: hidden;
+
+      .divider {
+        border-left: 1px solid;
+        border-color: $tp-color-border;
+        margin: 5px; // $tp-co-transaction-request-details-input-margin;
+      }
+    }
+
+    .details-input {
+      margin: 5px; // $tp-co-transaction-request-details-input-margin;
+    }
+
+    .location-wrapper {
+      position: relative;
+
+      .co-transaction-button {
+        width: auto;
+        margin: 5px;
+      }
+    }
+    .disabled {
+      cursor: default;
+      opacity: 0.6;
+    }
+    .clickable {
+      cursor: pointer;
+    }
+
+    .warehouse-buttons {
+      width: 100%;
+      .co-transaction-button {
+        width: 100%;
+      }
+    }
+  }
+}

package/lib/component/transaction-line-interbranch-receive-goods/style/_material-definition.scss

@@ -1,2 +1,2 @@
-$tp-co-transaction-line-receive-goods-title-font-size: 12px !default;
-$tp-co-transaction-line-receive-goods-title-margin: 0 0 10px 5px !default;
+$tp-co-transaction-line-receive-goods-title-font-size: 12px !default;
+$tp-co-transaction-line-receive-goods-title-margin: 0 0 10px 5px !default;

package/lib/component/transaction-line-interbranch-receive-goods/style/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('co-transaction-line-interbranch-receive-goods-theme') {
-  .co-transaction-line-interbranch-receive-goods {
-  }
-}
+@include export-module('co-transaction-line-interbranch-receive-goods-theme') {
+  .co-transaction-line-interbranch-receive-goods {
+  }
+}

package/lib/component/transaction-line-interbranch-receive-goods/style/material.scss

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

package/lib/component/transaction-quick-access/transaction-quick-access-interbranch-order-purchase/style/_layout.scss

@@ -1,27 +1,27 @@
-@use "sass:math";
-@import "../../../../style/mixin";
-
-@include export-module('co-transaction-quick-access-interbranch-order-purchase-layout') {
-  .co-transaction-quick-access-interbranch-order-purchase {
-    .select-all-wrapper {
-      display: flex;
-      align-items: center;
-    }
-    .button {
-      padding: 0.25em;
-      background-color: white;
-      border: 1px solid $tp-transaction-quick-access-planning-lsp-mode-button;
-      cursor: pointer;
-      co-icon {
-        fill: $tp-transaction-quick-access-planning-lsp-mode-button;
-      }
-      &.selected {
-        background-color: $tp-transaction-quick-access-planning-lsp-mode-button;
-        co-icon {
-          fill: white;
-        }
-      }
-    }
-
-  }
-}
+@use "sass:math";
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-quick-access-interbranch-order-purchase-layout') {
+  .co-transaction-quick-access-interbranch-order-purchase {
+    .select-all-wrapper {
+      display: flex;
+      align-items: center;
+    }
+    .button {
+      padding: 0.25em;
+      background-color: white;
+      border: 1px solid $tp-transaction-quick-access-planning-lsp-mode-button;
+      cursor: pointer;
+      co-icon {
+        fill: $tp-transaction-quick-access-planning-lsp-mode-button;
+      }
+      &.selected {
+        background-color: $tp-transaction-quick-access-planning-lsp-mode-button;
+        co-icon {
+          fill: white;
+        }
+      }
+    }
+
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-interbranch-order-purchase/style/_material-definition.scss

@@ -1 +1 @@
-$tp-transaction-quick-access-planning-lsp-mode-button: #1A73E8;
+$tp-transaction-quick-access-planning-lsp-mode-button: #1A73E8;

package/lib/component/transaction-quick-access/transaction-quick-access-interbranch-order-purchase/style/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('co-transaction-quick-access-interbranch-order-purchase-theme') {
-  .co-transaction-quick-access-interbranch-order-purchase {
-  }
-}
+@include export-module('co-transaction-quick-access-interbranch-order-purchase-theme') {
+  .co-transaction-quick-access-interbranch-order-purchase {
+  }
+}

package/lib/component/transaction-quick-access/transaction-quick-access-interbranch-order-purchase/style/material.scss

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