Merge branch 'master' into fix/data-items-nested-templates

IDEMSInternational · Dec 20, 2024 · 462cebe · 462cebe
2 parents fd346d6 + 4c184e6
commit 462cebe
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 3 deletions.
diff --git a/src/app/shared/components/template/components/combo-box/combo-box.component.ts b/src/app/shared/components/template/components/combo-box/combo-box.component.ts
@@ -32,7 +32,10 @@ export class TmplComboBoxComponent
   answerList: IAnswerListItem[];
   private componentDestroyed$ = new ReplaySubject(1);
 
-  constructor(private modalController: ModalController, private templateService: TemplateService) {
+  constructor(
+    private modalController: ModalController,
+    private templateService: TemplateService
+  ) {
     super();
   }
 
@@ -74,7 +77,6 @@ export class TmplComboBoxComponent
         customAnswerSelected: this.customAnswerSelected,
         style: this.style,
       },
-      showBackdrop: false,
     });
 
     modal.onDidDismiss().then(async (data) => {

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -550,7 +550,7 @@ body[data-theme="plh_kids_kw"] {
       padding: 16px;
       box-shadow: 1px 1px 10px #92b7da;
       background-color: #f6fafe;
-      margin: 12px 0;
+      margin-bottom: 16px;
       .container {
         display: flex;
         flex-direction: row;
@@ -714,6 +714,7 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
   // Round Button
   ion-tab-button {
     box-shadow: none;
@@ -745,6 +746,189 @@ body[data-theme="plh_kids_kw"] {
     }
   }
 
+  // Combo-box
+  button.open-combobox {
+    border: 1px solid var(--ion-color-primary-400) !important;
+    border-radius: var(--ion-border-radius-small) !important;
+    filter: none !important;
+    background: var(--ion-color-primary-50);
+    box-shadow: -2px 2px 6px var(--ion-color-primary-100);
+    min-height: 58px !important;
+    &.placeholder-style {
+      color: var(--ion-color-primary-300) !important;
+      font-weight: var(--font-weight-bold) !important;
+    }
+    &.with-value {
+      background: var(--ion-color-primary-600);
+      font-weight: var(--font-weight-bold) !important;
+      color: white;
+    }
+  }
+  combo-box-modal {
+    .container-modal {
+      background-color: var(--color-surface-white) !important;
+      padding: 40px 20px;
+      font-family: var(--ion-font-family);
+      .header {
+        font-size: var(--font-size-text-large) !important;
+        font-weight: var(--font-weight-bold) !important;
+        text-align: unset !important;
+        color: var(--ion-color-gray-800);
+      }
+    }
+    .container-radio {
+      box-shadow: none !important;
+      border-radius: var(--ion-border-radius-small) !important;
+      background: var(--ion-color-primary-50) !important;
+      border: 1px solid var(--ion-color-primary-300) !important;
+      label {
+        padding: 8px !important;
+        text-align: unset !important;
+        font-size: var(--font-size-text-medium) !important;
+        color: var(--ion-color-gray-800) !important;
+        min-height: 56px !important;
+        border-radius: var(--ion-border-radius-small) !important;
+        font-weight: var(--font-weight-medium) !important;
+      }
+    }
+    .checked-radio {
+      background: var(--ion-color-primary-100) !important;
+      border: 2px solid var(--ion-color-primary-600) !important;
+    }
+    .wrapper {
+      .text-box-input {
+        background: var(--color-surface-white) !important;
+        border: 1px solid var(--color-outline) !important;
+        font-size: var(--font-size-text-medium) !important;
+        color: var(--color-surface-black) !important;
+        font-weight: var(--font-weight-medium) !important;
+        box-shadow: none !important;
+        --padding-end: 16px !important;
+        --padding-start: 16px !important;
+        --padding-top: 14px;
+        --padding-bottom: 14px;
+        min-height: 58px !important;
+        border-radius: var(--ion-border-radius-standard) !important;
+      }
+      .checked-radion {
+        border: 2px solid var(--ion-color-primary-600) !important;
+      }
+    }
+  }
+
+  // Dashed Box
+  .box-wrapper {
+    .item {
+      border-radius: var(--ion-border-radius-small) !important;
+      border: 1px dashed var(--ion-color-primary-400) !important;
+      box-shadow: -1px 1px 8px var(--ion-color-primary-100);
+    }
+  }
+
+  // Task Card
+  plh-task-card {
+    .card-wrapper {
+      filter: none !important;
+      border: 1px solid #e1e2e4 !important;
+      border-radius: var(--ion-border-radius-small) !important;
+      box-shadow: 0px 2px 8px rgba($color: #000000, $alpha: 0.1);
+      margin: 12px auto !important;
+    }
+    .image-wrapper {
+      img {
+        border-radius: var(--ion-border-radius-small);
+      }
+    }
+    .content-wrapper {
+      padding: 8px !important;
+      .text-wrapper {
+        width: 100% !important;
+        h1 {
+          margin: 0;
+          line-height: var(--line-height-text-largest);
+          font-weight: var(--font-weight-bold);
+          @media (max-width: 375px) {
+            font-size: var(--font-size-title-small) !important;
+          }
+          @media (max-width: 320px) {
+            font-size: var(--font-size-title-small) !important;
+          }
+        }
+        color: inherit !important;
+      }
+
+      .image-wrapper {
+        width: 45%;
+        padding-left: var(--small-padding);
+      }
+    }
+    .card-wrapper[data-variant~="portrait"],
+    &.portrait {
+      width: 50vw !important;
+      max-width: 360px !important;
+      // padding: 10px !important;
+      .image-wrapper {
+        width: 100% !important;
+        padding-left: 0px !important;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      .content-wrapper {
+        .text-wrapper {
+          width: 100% !important;
+          h1 {
+            font-size: var(--font-size-subtitle-medium) !important;
+            line-height: var(--line-height-text-medium) !important;
+          }
+          .subtitle-wrapper {
+            p {
+              margin: 0px !important;
+              margin-top: 10px !important;
+              font-size: var(--font-size-text-small) !important;
+            }
+          }
+        }
+      }
+    }
+    .card-wrapper[data-variant~="button"],
+    &.button {
+      padding: 6px !important;
+      .content-wrapper {
+        .image-wrapper {
+          // height: 36px;
+          width: 40% !important;
+          height: auto !important;
+          padding-left: 0px !important;
+          img {
+            height: auto !important;
+            width: 100% !important;
+          }
+        }
+        .text-wrapper {
+          width: auto;
+          padding: 6px 8px;
+          h1 {
+            padding: 0px;
+            font-size: var(--font-text-size-medium) !important;
+            line-height: var(--line-height-text-small);
+          }
+        }
+        .button-content {
+          width: fit-content;
+          margin-left: auto;
+        }
+      }
+    }
+    .circle-card-wrapper {
+      .circle-wrapper {
+        filter: none !important;
+        border: 1px solid #e1e2e4 !important;
+        box-shadow: 0px 2px 8px rgba($color: #000000, $alpha: 0.1);
+      }
+    }
+  }
   // Radio Button Grid
   .radio-grid {
     .item {