Merge pull request #2481 from IDEMSInternational/review/2479

refactor: plh_kw theme folder
IDEMSInternational · Oct 23, 2024 · 5044b6c · 5044b6c
2 parents 5b2391e + 6d799d4
commit 5044b6c
Show file tree

Hide file tree

Showing 7 changed files with 348 additions and 334 deletions.
diff --git a/src/app/shared/components/template/components/accordion/accordion.component.scss b/src/app/shared/components/template/components/accordion/accordion.component.scss
@@ -18,38 +18,3 @@ ion-label.accordion-section-title {
 ion-item.accordion-content {
   padding-bottom: 1rem;
 }
-
-// KUWAIT THEME STYLING
-:host-context([data-theme="plh_kids_kw"]){
-  ion-accordion {
-    background: var(--ion-color-primary-600);
-
-    border: none;
-    border-radius: var(--ion-border-radius-small);
-    box-shadow: none;
-    .accordion-section-title{
-      color: white;
-
-      font-size: var(--font-size-text-large);
-      font-weight: var(--font-weight-bold);
-    }
-  }
-  .accordion-header::ng-deep ion-icon{
-    color: white;
-  }
-  ion-item.accordion-content{
-    border-top: 1px solid #C4C7C9;
-    margin:0px 16px;
-
-    &::ng-deep {
-      p{
-        color:white;
-        font-size: var(--font-size-text-medium);
-        line-height: var(--line-height-text-medium);
-        font-weight: var(--font-weight-standard);
-      } 
-    }
-  }
-
-}
-
diff --git a/src/app/shared/components/template/components/audio/audio.component.scss b/src/app/shared/components/template/components/audio/audio.component.scss
@@ -188,148 +188,3 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 .disabled {
   pointer-events: none;
 }
-
-// KUWAIT THEME STYLING
-:host-context([data-theme="plh_kids_kw"]){
-  .container-player[data-variant~="compact"] {
-    width:var(--buttons-full-width);
-
-    border: 0.9px solid var(--ion-color-primary-100);
-    border-radius: var(--ion-border-radius-rounded);
-    box-shadow: none;
-
-    background-color: var(--ion-color-primary-50);
-    padding: 8px 16px;
-    padding-right: 24px;
-
-    .top-row {
-      min-height: 0;
-      position: absolute;
-      top: -46px;
-      margin: 0 0 0 -14px;
-      h3 {
-        margin: 0;
-        margin-right: 0;
-        color: var(--ion-color-gray-900);
-        max-width: 95%;
-        font-weight: var(--font-weight-bold);
-        font-size: var(var(--font-size-text-medium) + 2);
-      }
-    }
-    .second-row {
-      .controls {
-        ion-button.btn-play {
-          --background: var(--ion-color-secondary-600);
-          --border-radius: var(--ion-border-radius-rounded);
-          --box-shadow: none ;
-          height: 52px ;
-          width: 52px ;
-          ion-icon {
-            font-size: var(--icon-size-large) ;
-          }
-        }
-      }
-      .progress-block {
-        ion-range {
-          width: 100% ;
-          --bar-background: white;
-          --bar-height: 12px ;
-          --knob-size: 20px ;
-          --knob-background: var(--ion-color-secondary-600);
-          --bar-border-radius: var(--ion-border-radius-standard);
-        }
-        .time {
-          .time-value {
-            font-size: var(--font-size-text-small) ;
-            font-weight: var(--font-weight-medium);
-            line-height: var(--line-height-text-tiny) ;
-            color: var(--ion-color-gray-700);
-          }
-        }
-      }
-    }
-  }
-  .container-player[data-variant~="large"] {
-    background: var(--ion-color-primary-50);
-    border: 0.9px solid var(--ion-color-primary-100);
-    box-sizing: border-box;
-    box-shadow: none;
-    border-radius: var(--ion-border-radius-standard);
-    padding: 12px 16px;
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    .top-row {
-      position: absolute;
-      top: -52px;
-      margin: 0 0 0 -14px;
-      h3 {
-        margin: 0;
-        margin-right: 0;
-        color: var(--ion-color-gray-900);
-        max-width: 85%;
-        font-weight: var(--font-weight-bold);
-        font-size: var(var(--font-size-text-medium) + 2);
-      }
-      ion-button.action-button {
-        --padding-start: 2px;
-        --padding-end: 2px;
-      }
-    }
-    .second-row{
-      display: flex;
-      flex-direction: column-reverse;
-      .controls {
-        width: var(--audio-controls-width);
-        .rewind,
-        .forward {
-          ion-icon {
-            font-size: var(--icon-size-extra-large);
-            color: var(--ion-color-secondary-600);
-            border-radius: 2px;
-          }
-        }
-        .btn-play {
-          @include mixins.large-square;
-          --background: var(--ion-color-primary-50);
-          --border-radius: var(--ion-border-radius-rounded);
-          --padding: 0;
-          --box-shadow: none;
-          ion-icon {
-            position: absolute;
-            font-size: var(--icon-size-largest);
-            color: var(--ion-color-secondary-600);
-          }
-        }
-      }
-      .progress-block {
-        .audio-range {
-          --bar-background-active: var(--ion-color-primary-400);
-          --bar-background: white;
-          --bar-height: 12px;
-          --bar-border-radius: var(--ion-border-radius-standard);
-          --knob-size: 0px;
-          --pin-background: var(--ion-color-primary-300);
-          --knob-background: var(--ion-color-primary-300);
-          padding-inline: 0;
-        }
-
-        ion-range::part(bar) {
-          border: none;
-        }
-
-        ion-range::part(bar-active) {
-          top: -1.5px;
-          margin-left: 0;
-        }
-        .time {
-          &-value {
-            font-size: var(--font-size-text-small);
-            line-height: var(--line-height-text-tiny);
-            color: var(--ion-color-gray-700);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/shared/components/template/components/button/button.component.scss b/src/app/shared/components/template/components/button/button.component.scss
@@ -218,71 +218,3 @@ ion-button[data-variant~="card"] {
     max-width: 10rem;
   }
 }
-
-// KUWAIT THEME STYLING
-:host-context([data-theme="plh_kids_kw"]){
-  ion-button{
-    min-height: var(--buttons-medium-height);
-    height: var(--buttons-full-height);
-    width: var(--buttons-full-width);
-    margin: 0 auto;
-    --border-radius: var(--ion-border-radius-rounded);
-    --box-shadow: none;
-
-    font-size: var(--buttons-font-size-large);
-    font-weight: var(--font-weight-bold);
-    letter-spacing: var(--font-letter-spacing);
-    line-height: var(--line-height-text);
-    text-transform: none;
-  }
-  ion-button:disabled,
-  ion-button[disabled] {
-    filter: none;
-  }
-  // Center align all button text by default
-  .left.null ::ng-deep{
-    p{
-      text-align: center;
-    }
-  }
-  .left ::ng-deep{
-    p{
-      text-align: left;
-    }
-  }
-  .left.centre ::ng-deep{
-    p{
-      text-align: center;
-    }
-  }
-  .left.right ::ng-deep{
-    p{
-      text-align: right;
-    }
-  }
-  //Alignment Buttons
-  ion-button.left {
-    width: 50%;
-    margin-left: 0;
-  }
-  ion-button.right {
-    width: 50%;
-    margin-right: 0;
-  }
-  // Color Alternatives
-  .standard {
-    color: white;
-  }
-  .card.standard{
-    color: var(--ion-color-primary-800);
-  }
-  .alternative {
-    color: var(--ion-color-primary-50);
-  }
-  .information {
-    --background: var(--ion-color-primary-600);
-    &:hover{
-      --background: var(--ion-color-primary-500)
-    }
-  }
-}
diff --git a/src/theme/themes/_index.scss b/src/theme/themes/_index.scss
@@ -3,4 +3,4 @@
 @forward "./pfr.scss";
 @forward "./plh_facilitator_mx.scss";
 @forward "./early_family_math.scss";
-@forward "./plh_kids_kw.scss";
+@forward "./plh_kids_kw/index";