@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/AppFlowContainer/AppFlowWrap/styles.module.scss

@@ -0,0 +1,452 @@
+.integry-container {
+  width: inherit;
+  height: inherit;
+  .inlineSetup {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    position: relative;
+    justify-content: flex-start;
+    height: 100%;
+    padding: 15px;
+  }
+}
+
+.flowSetupHeaderCompact {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+
+  .backLink {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    cursor: pointer;
+    user-select: none;
+    min-width: 32px;
+  }
+
+  .flowNameCompact {
+    color: var(--black-and-grey-title-and-desc, #333);
+    text-align: left;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 89%;
+
+    .flowNameCompactImg {
+      width: 20px !important;
+      height: 20px !important;
+      object-fit: contain;
+      border-radius: 0 !important;
+      user-select: none;
+    }
+
+    span {
+      color: var(--black-and-grey-title-and-desc, #333);
+      text-align: left;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.flowSetupHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 24px;
+  padding-bottom: 10px;
+  padding-left: 24px;
+  .backLink {
+    z-index: 3;
+    cursor: pointer;
+  }
+  .flowName {
+    margin-top: -2px;
+  }
+}
+
+.appFlowSetupForm {
+  height: 100%;
+  // max-height: 518px;
+  overflow-y: auto;
+  // padding-top: 24px;
+  position: relative;
+  .setupContainer {
+    position: static;
+    .stepsBottom {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      background-color: white;
+      padding-right: 24px;
+      box-sizing: border-box;
+      padding-top: 18px;
+    }
+    .stepsBottomModal {
+      position: absolute;
+      bottom: 20px;
+      width: calc(100% - 84px);
+      max-width: 706px;
+      background-color: white;
+      padding-right: 24px;
+      box-sizing: border-box;
+      padding-top: 25px;
+    }
+  }
+
+  .setupContainerModal {
+    position: static;
+    height: 100%;
+
+    .stepsBottom {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      max-width: 706px;
+      background-color: white;
+      padding-right: 24px;
+      box-sizing: border-box;
+      padding-top: 25px;
+    }
+    .stepsBottomModal {
+      position: absolute;
+      bottom: 20px;
+      width: calc(100% - 84px);
+      max-width: 706px;
+      background-color: white;
+      padding-right: 24px;
+      box-sizing: border-box;
+      padding-top: 25px;
+    }
+  }
+
+  .maxHeight60vh {
+    max-height: calc(60vh);
+  }
+
+  .flowSetupWrapper {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // margin-top: -24px;
+    width: fit-content;
+    // min-width: 670px;
+    width: 100%;
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+    /* Track */
+    &::-webkit-scrollbar-track {
+      // background: #f1f1f1;
+      background: transparent;
+      border-radius: 10px;
+      margin-right: 5px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: #ededed;
+      border: 1px solid #e7e7e7;
+      border-radius: 10px;
+      background: #d3d2d2;
+      margin-right: 5px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #cccccc;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #cccccc;
+    }
+  }
+
+  .flowSetupWrapperModalCompact {
+    overflow-y: hidden !important;
+  }
+
+  .flowSetupWrapperModal {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // margin-top: -24px;
+    width: fit-content;
+    // min-width: 670px;
+    // padding-bottom: 35px;
+    padding-bottom: 0;
+    width: 100%;
+    // overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+    /* Track */
+    &::-webkit-scrollbar-track {
+      // background: #f1f1f1;
+      background: transparent;
+      border-radius: 10px;
+      margin-right: 5px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: #ededed;
+      border: 1px solid #e7e7e7;
+      border-radius: 10px;
+      background: #d3d2d2;
+      margin-right: 5px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #cccccc;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #cccccc;
+    }
+  }
+}
+
+.appPageContainer {
+  display: grid;
+  // grid-template-rows: 72px 1fr;
+  font-family: 'Inter';
+  grid-template-rows: 96px 1fr 20px;
+  height: inherit;
+  width: 100%;
+  height: 100%;
+  * {
+    box-sizing: border-box;
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-right: 100px;
+    // min-height: 115px;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 16px;
+    padding-left: 24px;
+
+    .appInfo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      img,
+      .appIcon {
+        height: 35px;
+        width: 35px;
+        border-radius: 4px;
+      }
+      .appName {
+        min-height: 22px;
+        min-width: 200px;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .headerCompact {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-right: 100px;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 16px;
+    padding-left: 24px;
+
+    .appInfo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      max-width: calc(100% - 32px);
+      width: 100%;
+      img,
+      .appIcon {
+        height: 35px;
+        width: 35px;
+        border-radius: 4px;
+      }
+      .appName {
+        min-height: 22px;
+        min-width: 200px;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .headerCompactInModal {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 16px;
+    padding-left: 24px;
+    width: 390px;
+
+    .appInfo {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      max-width: calc(100% - 32px);
+      img,
+      .appIcon {
+        height: 35px;
+        width: 35px;
+        border-radius: 4px;
+      }
+      .appName {
+        min-height: 22px;
+        min-width: 200px;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .modalContentWrap {
+    height: calc(100vh - 230px);
+    max-height: 532px;
+    .appFlowSetupForm {
+      .stepsBottom {
+        left: 0px;
+        // max-width: calc(100% - 24px);
+      }
+    }
+  }
+  .modalContentWrapCompact {
+    min-height: 410px;
+    .appFlowSetupForm {
+      max-width: 390px;
+
+      .flowSetupWrap {
+        height: auto;
+        padding-bottom: 0;
+        width: 390px;
+      }
+
+      .stepsBottom {
+        left: 0px;
+        max-width: calc(100% - 24px);
+        min-width: 370px;
+        margin: 0;
+        padding-bottom: 16px;
+        position: relative;
+      }
+    }
+
+    .appFlowSetupForm {
+      // min-height: 605px;
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .inlineContentWrap {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 557px;
+    // min-height: max-content;
+    .appFlowSetupForm {
+      height: 100%;
+      overflow-y: visible;
+      max-height: none;
+    }
+    .flowSetupWrapper {
+      height: 100%;
+    }
+    .flowCardContainer {
+      overflow-y: visible;
+    }
+  }
+}
+
+.appPageContainerCompact {
+  grid-template-rows: auto 1fr;
+}
+
+.appPageLoader {
+  max-width: 730px;
+  margin: 0 auto;
+  @keyframes placeHolderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+  .animatedBackground {
+    animation-duration: 1.25s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background: darkgray;
+    background: linear-gradient(
+      to right,
+      #eeeeee 10%,
+      #dddddd 18%,
+      #eeeeee 33%
+    );
+    background-size: 800px 104px;
+    height: inherit;
+    position: relative;
+    border-radius: inherit;
+  }
+  .flowName {
+    height: 17px;
+    width: 100px;
+    margin-bottom: 8px;
+  }
+  .flowDescription {
+    height: 17px;
+    max-width: 335px;
+    width: 100%;
+  }
+  .accountName {
+    height: 20px;
+    width: 300px;
+    margin-top: 8px;
+  }
+  .footerButton {
+    height: 25px;
+    width: 100px;
+    border-radius: 4px;
+  }
+}
+
+.compact-view {
+  width: 390px;
+  height: calc(100% - 24px);
+  padding: 0;
+  margin: 0 auto;
+}