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 index 1054119771..daec4a1de7 100644 --- 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 index 0767c9937b..e69693b40f 100644 --- 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 {