@colijnit/sharedcomponents 1.0.64 → 1.0.65

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

@@ -1,473 +1,519 @@
-@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-max-width;
-      width: $sc-stock-info-container-width;
-      padding: $sc-stock-info-container-padding;
-      height: $sc-stock-info-container-height;
-      position: relative;
-    }
-
-    .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;
-      border-width: $sc-stock-info-border-width;
-      border-color: $sc-stock-info-border-color;
-      border-style: solid;
-    }
-
-    .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;
-      .stock-image {
-        margin-right: 0;
-      }
-      .no-image-wrapper {
-        height: $sc-stock-image-height;
-      }
-    }
-
-    .stock-good-info {
-      display: block;
-    }
-
-    .stock-status {
-      display: grid;
-      position: relative;
-    }
-
-    .stock-info > div:not(:first-child) {
-      padding: 0 0 0 30px;
-      border-left: $sc-stock-border-left;
-      &:before {
-        content: '';
-        height: 30px;
-        width: 1px;
-        background: #DCE4EA;
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    .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;
-      padding: 7px 10px;
-      text-align: center;
-      color: #FFFFFF;
-      background: $sc-color-action;
-      border-radius: 3px;
-    }
-
-    .co-dialog-wrapper {
-      width: 70%;
-    }
-
-    .stock-label {
-      font-size: $sc-font-size-small;
-      align-self: center;
-    }
-
-    .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;
-        }
-      }
-    }
-
-      .simple-grid-column-header {
-        border-width: 0;
-      }
-      .simple-grid-row {
-        border-width: 0;
-        border: none;
-        height: 45px;
-        font-size: 10px;
-        &:nth-child(odd) {
-          background: #f8f8fa;
-        }
-      }
-      .simple-grid-column-cell-field {
-        border-width: 1px;
-        border-radius: 0;
-        padding: 5px 10px;
-        border-color: #DCE4EA;
-      }
-      .simple-grid-column-header-label {
-        border-width: 0 0 1px 0;
-      }
-      .co-simple-grid-cell {
-        .menu-icon {
-          cursor: pointer;
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-
-}
+@include export-module('co-stock-layout') {
+  .co-stock {
+    .stock-grid {
+      co-dialog {
+        .co-dialog-wrapper {
+          width: 500px;
+          display: flex;
+        }
+        .stock-dialog-header {
+          font-weight: bold;
+          margin-bottom: 10px;
+          display: block;
+        }
+        .header-wrapper {
+          span {
+            font-weight: bold;
+          }
+          padding: 1em;
+        }
+        .dialog-wrapper {
+          display: flex;
+          gap: 5px;
+          padding: 10px;
+          flex-direction: column;
+        }
+        .stock-dialog-row {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          > * {
+            flex: 1;
+          }
+          .stock-dialog-row-row {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+          }
+        }
+      }
+    }
+
+    .stock-info-container {
+      max-width: $sc-stock-info-container-max-width;
+      width: $sc-stock-info-container-width;
+      padding: $sc-stock-info-container-padding;
+      height: $sc-stock-info-container-height;
+      position: relative;
+    }
+
+    .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;
+      border-width: $sc-stock-info-border-width;
+      border-color: $sc-stock-info-border-color;
+      border-style: solid;
+    }
+
+    .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;
+      .stock-image {
+        margin-right: 0;
+      }
+      .no-image-wrapper {
+        height: $sc-stock-image-height;
+      }
+    }
+
+    .stock-good-info {
+      display: block;
+    }
+
+    .stock-status {
+      display: grid;
+      position: relative;
+    }
+
+    .stock-info > div:not(:first-child) {
+      padding: 0 0 0 30px;
+      border-left: $sc-stock-border-left;
+      &:before {
+        content: '';
+        height: 30px;
+        width: 1px;
+        background: #DCE4EA;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .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;
+          background-color: #1A73E8;
+          .co-icon {
+            height: 16px;
+            width: 16px;
+            svg {
+              fill: #FFFFFF;
+            }
+          }
+          .label {
+            margin: 0 7px;
+            color: #FFF;
+          }
+        }
+      }
+    }
+
+    .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;
+      .co-grid-toolbar {
+        .co-icon {
+          border-color: #1A73E8;
+          width: 38px;
+          height: 28px;
+          padding: 5px;
+          border-radius: 0;
+          svg {
+            fill: #1A73E8;
+            height: auto;
+            width: auto;
+          }
+          &:hover {
+            background: #1A73E8;
+            svg {
+              fill: #FFF;
+            }
+          }
+        }
+      }
+    }
+
+    .location-link {
+      cursor: pointer;
+      padding: 7px 10px;
+      text-align: center;
+      color: #FFFFFF;
+      background: $sc-color-action;
+      border-radius: 3px;
+    }
+
+    .co-dialog-wrapper {
+      width: 70%;
+    }
+
+    .stock-label {
+      font-size: $sc-font-size-small;
+      align-self: center;
+    }
+
+    .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;
+        }
+      }
+    }
+
+      .simple-grid-column-header {
+        border-width: 0;
+      }
+      .simple-grid-row {
+        border-width: 0;
+        border: none;
+        height: 45px;
+        font-size: 10px;
+        &:nth-child(odd) {
+          background: #f8f8fa;
+        }
+      }
+      .simple-grid-column-cell-field {
+        border-width: 1px;
+        border-radius: 0;
+        padding: 5px 10px;
+        border-color: #DCE4EA;
+      }
+      .simple-grid-column-header-label {
+        border-width: 0 0 1px 0;
+      }
+      .co-simple-grid-cell {
+        .menu-icon {
+          cursor: pointer;
+          width: 24px;
+          height: 24px;
+        }
+        .stock-amount {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          cursor: pointer;
+          .menu-icon {
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+    }
+
+}