Skip to content

Commit

Permalink
refactor: plh_kw theme folder
Browse files Browse the repository at this point in the history
chrismclarke committed Oct 23, 2024
1 parent 5b2391e commit 6d799d4
Showing 7 changed files with 348 additions and 334 deletions.
Original file line number Diff line number Diff line change
@@ -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);
}
}
}

}

Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -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)
}
}
}
2 changes: 1 addition & 1 deletion src/theme/themes/_index.scss
Original file line number Diff line number Diff line change
@@ -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";
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use "./utils";
@use "../utils";
@use "sass:color";
@use "./overrides";
@use "./typography";

@mixin theme-plh_kids_kw {
[data-theme="plh_kids_kw"] {
@@ -8,84 +10,16 @@
$color-secondary: hsl(199 100% 41.6%); // #0092D4
$page-background: white;

// Nunito Variable weights
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 300;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-300.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 500;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 500;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500italic.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 600;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 600;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600italic.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 700;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700italic.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 800;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 800;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800italic.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 900;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900.woff2") format("woff2")
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 900;
src: local(""), url("../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900italic.woff2") format("woff2")
}

/** Authoring component overrides **/
$variable-overrides: (
ion-font-family: "Nunito",
font-weight-standard: 500,
font-weight-medium:600,
font-weight-medium: 600,
font-weight-bold: 700,
font-weight-extra-bold: 800,
font-letter-spacing: -0.2px,
font-letter-spacing-large: -0.5px,

font-size-text-tiny: 14px,
font-size-text-small: 16px,
font-size-text-medium: 20px,
@@ -96,7 +30,7 @@
line-height-text-medium: 28px,
line-height-text-large: 32px,
line-height-text-extra-large: 40px,

ion-border-radius-small: 8px,
ion-border-radius-standard: 12px,
ion-border-radius-secondary: 20px,
@@ -118,41 +52,30 @@
button-background-secondary: var(--ion-color-secondary),
button-background-option: var(--ion-color-primary-800),
round-button-background-secondary-light: var(--ion-color-yellow),

tile-button-background-primary: var(--ion-color-primary-500),
tile-button-background-primary-light: var(--ion-color-primary-300),
tile-button-background-secondary: var(--ion-color-secondary),
tile-button-background-secondary-light: var(--ion-color-yellow),

points-item-background: var(--ion-background-color),
points-item-background-complete: var(--ion-color-primary-200),
points-item-border: rgba(black, 0.07),

display-group-background-banner-primary: var(--ion-color-primary-200),
display-group-background-banner-secondary: var(--ion-color-secondary-300),
display-group-background-home-light: var(--ion-color-primary-300),
display-group-background-home-mid: var(--ion-color-primary-600),
display-group-background-home-dark: var(--ion-color-primary-800),

combo-box-background-with-value: var(--ion-color-primary-300),

accordion-background-highlight: var(--ion-color-primary-300),

tour-next-button-background: var(--ion-color-secondary),

radio-group-background-selected: var(--ion-color-primary-300),

ion-item-background: var(--ion-color-gray-light),

task-progress-bar-color: var(--ion-color-green),

progress-path-line-background: var(--ion-color-gray-100),

icon-size-small: 16px,
icon-size-medium: 24px,
icon-size-large: 32px,
icon-size-extra-large: 40px,
icon-size-largest: 48px,
icon-size-extra-large: 40px,
icon-size-largest: 48px,
);
@include utils.generateTheme($color-primary, $color-secondary, $page-background);
@each $name, $value in $variable-overrides {
250 changes: 250 additions & 0 deletions src/theme/themes/plh_kids_kw/_overrides.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
@use "../../mixins";

body[data-theme="plh_kids_kw"] {
// button
plh-button {
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);
}
}
}

// audio
plh-audio {
.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);
}
}
}
}
}
}

// accordion
plh-accordion-component {
// KUWAIT THEME STYLING
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);
}
}
}
}
}
89 changes: 89 additions & 0 deletions src/theme/themes/plh_kids_kw/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// Nunito Variable weights
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 300;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-300.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 500;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 500;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500italic.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 600;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 600;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600italic.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 700;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700italic.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 800;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 800;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800italic.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 900;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900.woff2") format("woff2");
}
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 900;
src:
local(""),
url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900italic.woff2") format("woff2");
}

0 comments on commit 6d799d4

Please sign in to comment.