@colijnit/sharedcomponents 1.0.61 → 1.0.63

package/lib/components/stock/style/_layout.scss

@@ -1,286 +1,421 @@
-@include export-module('co-stock-layout') {
-  .co-stock {
-
-    .stock-grid {
-      co-dialog {
-
-        .co-dialog-wrapper{
-          width: 500px;
-          height: 350px;
-          display: flex;
-
-        }
-
-
-        .header-wrapper {
-          span {
-            font-weight: bold;
-          }
-          padding: 1em;
-        }
-
-
-
-        .dialog-wrapper {
-          display: flex;
-          gap: 1em;
-          padding: 1em;
-          flex-direction: column;
-        }
-        .button-wrapper {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          gap: 2em;
-
-          co-button {
-            width: 125px;
-            display: flex;
-            text-align: center;
-            align-items: center;
-            justify-content: center;
-          }
-          .cancel-button {
-            background: none;
-            text-decoration: underline;
-            color: $cc-color-font;
-          }
-        }
-      }
-    }
-    .stock-info-container {
-      max-width: $sc-stock-info-container-width;
-      padding: $sc-stock-info-container-padding;
-      height: $sc-stock-info-container-height;
-    }
-
-    .stock-info {
-      margin: $sc-stock-info-margin;
-      padding: $sc-stock-info-padding;
-      display: inline-flex;
-      width: $sc-stock-info-width;
-      gap: $sc-stock-info-gap;
-    }
-
-    .stock-info-row {
-      display: inline-flex;
-    }
-
-    .stock-info-row-image {
-      display: inline-flex;
-      gap: $sc-stock-gap;
-    }
-
-    .stock-image {
-      height: $sc-stock-image-height;
-      margin-right: $sc-stock-image-width;
-      .no-image-wrapper {
-        height: $sc-stock-image-height;
-      }
-    }
-
-    .stock-good-info {
-      display: block;
-    }
-
-    .stock-status {
-      display: grid;
-    }
-
-    .stock-info > div:not(:first-child) {
-      padding: 0 10px;
-      border-left: $sc-stock-border-left;
-    }
-
-    .stock-line {
-      font-weight: $sc-stock-line-font-weight;
-      margin: $sc-stock-line-margin;
-    }
-
-    .stock-lines-button {
-      margin-bottom: 5%;
-    }
-
-    .tab-link {
-      gap: 30px;
-      &.hide {
-        display: none;
-      }
-
-      &.show {
-        display: flex;
-      }
-      flex-direction: row;
-    }
-
-    .tab-link > div {
-      margin: 25px 0;
-      padding-right: 10px;
-
-      &.inactive {
-        font-weight: normal;
-      }
-    }
-
-    .stock-grid {
-      margin: $sc-stock-grid-margin;
-
-    }
-
-    .buttons-wrapper {
-      display: flex;
-    }
-
-    .dropdown-wrapper {
-      display: flex;
-      float: right;
-      max-width: 20%;
-    }
-
-    .stock-location-group {
-      display: flex;
-    }
-
-    .stock-location-left-group {
-      float: left;
-      display: flex;
-      flex: 1;
-      justify-content: flex-start;
-    }
-
-    .stock-location-right-group {
-      display: flex;
-      justify-content: flex-end;
-      co-list-of-values ::ng-deep {
-        co-input-text {
-          height: 100%;
-        }
-      }
-    }
-
-    .stock-button-toolbar {
-      display: flex;
-      justify-content: space-between;
-      margin: 10px;
-    }
-
-    .stock-button-left-group {
-      display: flex;
-      flex: 1;
-      justify-content: flex-start;
-
-      .co-button {
-        margin-right: 10px;
-        width: 100px;
-      }
-    }
-    .stock-button-middle-group {
-      display: flex;
-      flex: 1;
-    }
-
-    .stock-transfer-right-column {
-      display: flex;
-      flex-direction: column;
-      width: 35%;
-      float: right;
-      gap: 1em;
-    }
-
-    .stock-transfer-left-column {
-      display: flex;
-      flex-direction: column;
-      width: 35%;
-      float: left;
-      gap: 1em;
-    }
-
-    .ok-cancel-buttons {
-      display: flex;
-      justify-content: center;
-      padding-top: 25px;
-    }
-
-    .ok-cancel-buttons co-button {
-      margin-right: 10px;
-      width: 100px;
-    }
-
-    .stock-transfer {
-      span {
-        font-weight: bold;
-      }
-    }
-
-    .stock-transfer-columns {
-      display: flex;
-      width: $sc-stock-transfer-column-width;
-      overflow: hidden;
-      flex-direction: row;
-      gap: 2em;
-      margin: 2em;
-
-      .icon-wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-
-        co-icon {
-          height: 50px;
-          width: 50px;
-        }
-      }
-    }
-
-
-    .tab-link-buttons {
-      cursor: $sc-stock-tab-link-buttons-pointer;
-    }
-
-    .active {
-      color: $sc-color-action;
-    }
-
-    .stock-button-back {
-      color: $sc-color-action;
-      cursor: pointer;
-    }
-
-    .drop-list-group {
-      height: $sc-stock-grid-height;
-      overflow-y: $sc-stock-grid-overflow-y;
-    }
-
-    .co-button-small {
-      width: 50%;
-    }
-
-    .simple-grid {
-      height: $sc-stock-grid-height;
-      overflow: auto;
-    }
-
-    .location-link {
-      cursor: pointer;
-      color: $sc-color-action;
-    }
-
-    .co-dialog-wrapper {
-      width: 70%;
-    }
-
-    .stock-label {
-      font-size: $sc-font-size-small;
-    }
-
-    .stock-span {
-      font-size: $sc-font-size;
-      align-self: center;
-    }
-  }
-}
+@include export-module('co-stock-layout') {
+  .co-stock {
+    .stock-grid {
+      co-dialog {
+        .co-dialog-wrapper {
+          width: 500px;
+          height: 350px;
+          display: flex;
+        }
+
+        .header-wrapper {
+          span {
+            font-weight: bold;
+          }
+
+          padding: 1em;
+        }
+
+        .dialog-wrapper {
+          display: flex;
+          gap: 1em;
+          padding: 1em;
+          flex-direction: column;
+        }
+      }
+    }
+
+    .stock-info-container {
+      max-width: $sc-stock-info-container-width;
+      padding: $sc-stock-info-container-padding;
+      height: $sc-stock-info-container-height;
+    }
+
+    .stock-info {
+      margin: $sc-stock-info-margin;
+      padding: $sc-stock-info-padding;
+      display: inline-flex;
+      width: $sc-stock-info-width;
+      gap: $sc-stock-info-gap;
+    }
+
+    .stock-info-row {
+      display: inline-flex;
+    }
+
+    .stock-info-row-image {
+      display: inline-flex;
+      gap: $sc-stock-gap;
+    }
+
+    .stock-image {
+      height: $sc-stock-image-height;
+      margin-right: $sc-stock-image-width;
+
+      .no-image-wrapper {
+        height: $sc-stock-image-height;
+      }
+    }
+
+    .stock-good-info {
+      display: block;
+    }
+
+    .stock-status {
+      display: grid;
+    }
+
+    .stock-info > div:not(:first-child) {
+      padding: 0 10px;
+      border-left: $sc-stock-border-left;
+    }
+
+    .stock-line {
+      font-weight: $sc-stock-line-font-weight;
+      margin: $sc-stock-line-margin;
+    }
+
+    .stock-lines-button {
+      margin-bottom: 5%;
+    }
+
+    .tab-link {
+      gap: 30px;
+
+      &.hide {
+        display: none;
+      }
+
+      &.show {
+        display: flex;
+      }
+
+      flex-direction: row;
+    }
+
+    .tab-link > div {
+      margin: 25px 0;
+      padding-right: 10px;
+
+      &.inactive {
+        font-weight: normal;
+      }
+    }
+
+    .stock-grid {
+      margin: $sc-stock-grid-margin;
+
+    }
+
+    .buttons-wrapper {
+      display: flex;
+    }
+
+    .dropdown-wrapper {
+      display: flex;
+      float: right;
+      max-width: 20%;
+    }
+
+    .stock-location-group {
+      display: flex;
+    }
+
+    .stock-location-left-group {
+      float: left;
+      display: flex;
+      flex: 1;
+      justify-content: flex-start;
+    }
+
+    .stock-location-right-group {
+      display: flex;
+      justify-content: flex-end;
+
+      co-list-of-values ::ng-deep {
+        co-input-text {
+          height: 100%;
+        }
+      }
+    }
+
+    .stock-button-toolbar {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px;
+    }
+
+    .stock-button-left-group {
+      display: flex;
+      flex: 1;
+      justify-content: flex-start;
+
+      .co-button {
+        margin-right: 10px;
+        width: 100px;
+      }
+    }
+
+    .stock-button-middle-group {
+      display: flex;
+      flex: 1;
+    }
+
+    .ok-cancel-buttons {
+      display: flex;
+      justify-content: center;
+      gap: 5px;
+
+      .co-button {
+        width: 100px;
+        height: 36px;
+
+        &.save-button {
+          width: 36px;
+          border-color: #DCE4EA;
+          border-style: solid;
+          border-width: 0 0 0 0;
+          background-color: #1A73E8;
+          padding: 8px;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+          cursor: pointer;
+        }
+
+        &.text-button {
+          border-color: #DCE4EA;
+          border-style: solid;
+          border-width: 0 0 0 0;
+          background-color: #475060;
+          padding: 8px;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+          cursor: pointer;
+        }
+
+        &.cancel-button {
+          width: 36px;
+          border-color: #DCE4EA;
+          border-style: solid;
+          border-width: 0 0 0 0;
+          background-color: #475060;
+          padding: 8px;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+          cursor: pointer;
+        }
+
+        .co-icon {
+          height: 20px;
+          width: 20px;
+
+          svg {
+            fill: #FFF;
+          }
+
+          [fill] {
+            fill: #FFF;
+          }
+        }
+      }
+    }
+    .stock-transfer-wrapper {
+      .co-dialog {
+        .co-dialog-wrapper {
+          width: 410px;
+          max-width: 100%;
+        }
+      }
+    }
+    .stock-transfer {
+      .stock-transfer-bottom-column {
+        display: flex;
+        flex-direction: column;
+        background: #FFF;
+        padding: 10px;
+        border: 1px solid #ccc;
+        gap: 5px;
+        margin-top: -20px;
+        .transfer-bottom-row {
+          display: flex;
+          gap: 5px;
+        }
+        .co-list-of-values {
+          background: #f8f8fa;
+          &:before {
+            box-shadow: none;
+          }
+        }
+        .co-input-text {
+          background: #f8f8fa;
+          width: 100%;
+          &:before {
+            box-shadow: none;
+          }
+        }
+      }
+      .stock-transfer-top-column {
+        display: flex;
+        flex-direction: row;
+        background: #FFFFFF;
+        padding: 30px 15px;
+        gap: 10px;
+        border: 1px solid #ccc;
+        overflow: hidden;
+        .transfer-items {
+          display: flex;
+          flex-direction: column;
+          .transfer-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            .item-label {
+              font-weight: 600;
+            }
+            .item-value {
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .transfer-quantity {
+          .co-input-number-picker {
+            height: 30px;
+            max-width: 150px;
+          }
+        }
+      }
+      .transfer-arrow-wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        top: -25px;
+        span.half-circle {
+          width: 50px;
+          height: 25px;
+          border-radius: 25px 25px 0 0;
+          border-left: 1px solid #ccc;
+          border-top: 1px solid #ccc;
+          border-right: 1px solid #ccc;
+          border-bottom: 1px solid transparent;
+          background-color: #f8f8fa;
+        }
+      }
+      .stock-transfer-columns {
+        display: flex;
+        flex-direction: column;
+        .icon-wrapper {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          position: relative;
+          padding: 10px;
+          border-radius: 100%;
+          background: #f5f5fc;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+          top: -15px;
+          co-icon {
+            height: 20px;
+            width: 20px;
+          }
+        }
+      }
+      .transfer-sticker-buttons {
+        display: flex;
+        width: 100%;
+        justify-content: flex-end;
+        margin-top: 5px;
+        .co-button {
+          height: 30px;
+          padding: 0 10px;
+          .co-icon {
+            height: 16px;
+            width: 16px;
+            svg {
+              fill: #FFFFFF;
+            }
+          }
+          .label {
+            margin: 0 7px;
+          }
+        }
+      }
+    }
+
+    .tab-link-buttons {
+      cursor: $sc-stock-tab-link-buttons-pointer;
+    }
+
+    .active {
+      color: $sc-color-action;
+    }
+
+    .stock-button-back {
+      color: $sc-color-action;
+      cursor: pointer;
+    }
+
+    .drop-list-group {
+      height: $sc-stock-grid-height;
+      overflow-y: $sc-stock-grid-overflow-y;
+    }
+
+    .co-button-small {
+      width: 50%;
+    }
+
+    .simple-grid {
+      height: $sc-stock-grid-height;
+      overflow: auto;
+    }
+
+    .location-link {
+      cursor: pointer;
+      color: $sc-color-action;
+    }
+
+    .co-dialog-wrapper {
+      width: 70%;
+    }
+
+    .stock-label {
+      font-size: $sc-font-size-small;
+    }
+
+    .stock-span {
+      font-size: $sc-font-size;
+      align-self: center;
+    }
+    .co-dialog {
+      .dialog-content {
+        overflow-x: hidden;
+      }
+      .co-dialog-header-title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .co-icon {
+          width: 20px;
+          height: 20px;
+          margin: 0 0 20px 0;
+        }
+        .co-dialog-header-title {
+          font-size: 14px;
+          margin: 0 0 20px 0;
+          font-weight: bold;
+        }
+      }
+      .dialog-header {
+        padding: 0;
+        .dialog-header-caption {
+          border: none;
+          margin: 0;
+        }
+      }
+    }
+
+  }
+}