From 57656f6234b673ce266cbc51374b027861661fa1 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 18 Jan 2023 16:42:59 +0000 Subject: [PATCH 1/4] Moved to _defaults folder --- less/{project => _defaults}/blend.less | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename less/{project => _defaults}/blend.less (100%) diff --git a/less/project/blend.less b/less/_defaults/blend.less similarity index 100% rename from less/project/blend.less rename to less/_defaults/blend.less From 015fc7fc60144fca17396aa0cf5d026a91a8c36c Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 18 Jan 2023 16:43:47 +0000 Subject: [PATCH 2/4] Moved to _defaults folder --- less/{project => _defaults}/filter.less | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename less/{project => _defaults}/filter.less (100%) diff --git a/less/project/filter.less b/less/_defaults/filter.less similarity index 100% rename from less/project/filter.less rename to less/_defaults/filter.less From f36cd2cb335776f8d6251790440dd47a45381181 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 18 Jan 2023 16:51:37 +0000 Subject: [PATCH 3/4] Split theme-extras into smaller files --- less/project/theme-blocks.less | 73 ++++++++ less/project/theme-common.less | 67 +++++++ less/project/theme-components.less | 48 +++++ less/project/theme-contentObjects.less | 52 ++++++ less/project/theme-extras.less | 243 ------------------------- 5 files changed, 240 insertions(+), 243 deletions(-) create mode 100644 less/project/theme-blocks.less create mode 100644 less/project/theme-common.less create mode 100644 less/project/theme-components.less create mode 100644 less/project/theme-contentObjects.less delete mode 100644 less/project/theme-extras.less diff --git a/less/project/theme-blocks.less b/less/project/theme-blocks.less new file mode 100644 index 00000000..b9289205 --- /dev/null +++ b/less/project/theme-blocks.less @@ -0,0 +1,73 @@ +// -------------------------------------------------- +// Block +// -------------------------------------------------- + +// Reverses the visual layout of the components above the medium breakpoint +// e.g. Left layout components would still render first in the DOM order +// but visually appear on the right hand side above the medium breakpoint. The +// components woud vertically stack as per the DOM order below the breakpoint +.block.reverse-desktop-order .component { + @media (min-width: @device-width-medium) { + &__container { + flex-direction: row-reverse; + } + } +} + +// Extend width of block to 70rem (1120px) +// -------------------------------------------------- +.block.extend-content-container .block__inner { + max-width: 70rem; +} + +// Extend width of block to max page width +// -------------------------------------------------- +.block.extend-container .block__inner { + max-width: @max-page-width; +} + +// DEPRECATED in favour of bg-color-mixin +// Block background color mixin +// Add to block to enable +// e.g. 'block-color black' +// Note: both arguments must be predefined variables +// -------------------------------------------------- +.block-color-mixin(@color, @color-inverted) { + +.block-color.@{color} { + background-color: @@color; + color: @@color-inverted; + + .block, + .component { + &__title, + &__body a, + &__instruction a { + color: @@color-inverted; + } + } + + .pagelevelprogress { + &__indicator { + border-color: @@color-inverted; + } + &__indicator-inner { + background-color: @@color; + } + &__indicator-bar { + background-color: @@color-inverted; + } + } + + .narrative { + &__progress { + background-color: fade(@@color-inverted, 50%); + } + + &__progress.is-selected { + background-color: @@color-inverted; + } + } +} + +} diff --git a/less/project/theme-common.less b/less/project/theme-common.less new file mode 100644 index 00000000..b8a5f46e --- /dev/null +++ b/less/project/theme-common.less @@ -0,0 +1,67 @@ +// -------------------------------------------------- +// Common +// -------------------------------------------------- + +// Background color mixin +// Can be added to course, contentObject, article, block, or component to enable +// e.g. 'bg-color black' +// Note: both arguments must be predefined variables +// -------------------------------------------------- +.bg-color-mixin(black, white); +.bg-color-mixin(background, background-inverted); +.bg-color-mixin(transparent-light, black); +.bg-color-mixin(transparent-dark, white); + +.bg-color-mixin(@color, @color-inverted) { + +.bg-color.@{color} { + background-color: @@color; + color: @@color-inverted; + + .block, + .component { + &__title, + &__body a, + &__instruction a { + color: @@color-inverted; + } + } + + .pagelevelprogress { + &__indicator { + border-color: @@color-inverted; + } + &__indicator-inner { + background-color: @@color; + } + &__indicator-bar { + background-color: @@color-inverted; + } + } + + .narrative { + &__progress { + background-color: fade(@@color-inverted, 50%); + } + + &__progress.is-selected { + background-color: @@color-inverted; + } + } +} + +} + +// classes to hide content above / below medium breakpoint +// -------------------------------------------------- +.hide-on-desktop { + @media (min-width: @device-width-medium) { + display: none; + } +} + +.hide-on-mobile { + @media (max-width: @device-width-medium) { + display: none; + } +} diff --git a/less/project/theme-components.less b/less/project/theme-components.less new file mode 100644 index 00000000..767368e5 --- /dev/null +++ b/less/project/theme-components.less @@ -0,0 +1,48 @@ +// -------------------------------------------------- +// Component +// -------------------------------------------------- + +// Component header bg color mixin +// Can be added to component to enable +// e.g. 'comp-header-bg-color black' +// Note: both arguments must be predefined variables +.component-header-bg-mixin(black, white); +.component-header-bg-mixin(background, background-inverted); +.component-header-bg-mixin(transparent-light, font-color); +.component-header-bg-mixin(transparent-dark, font-color-inverted); + +.component-header-bg-mixin(@color, @color-inverted) { + +.comp-header-bg-color.@{color} { + .component { + &__inner { + margin: -@component-padding-ver -@component-padding-hoz; + } + + &__header { + padding: @component-padding-ver @component-padding-ver; + background-color: @@color; + color: @@color-inverted; + } + + &__title, + &__body a, + &__instruction a { + color: @@color-inverted; + } + } + + .pagelevelprogress { + &__indicator { + border-color: @@color-inverted; + } + &__indicator-inner { + background-color: @@color; + } + &__indicator-bar { + background-color: @@color-inverted; + } + } +} + +} diff --git a/less/project/theme-contentObjects.less b/less/project/theme-contentObjects.less new file mode 100644 index 00000000..fa20eb03 --- /dev/null +++ b/less/project/theme-contentObjects.less @@ -0,0 +1,52 @@ +// -------------------------------------------------- +// contentObject +// -------------------------------------------------- + +// "_htmlClasses" +// Hide nav back button +// -------------------------------------------------- +.hide-nav-back-btn .nav__back-btn { + .u-display-none; +} + +// "_classes" +// Hide the page header +// -------------------------------------------------- +.hide-page-header .page__header { + .u-display-none; +} + +// Header color mixin +// Add to menu/page to enable +// e.g. 'header-color transparent-dark' +// Note: both arguments must be predefined variables +// -------------------------------------------------- +.header-color-mixin(black, white); +.header-color-mixin(background, background-inverted); +.header-color-mixin(transparent-light, font-color); +.header-color-mixin(transparent-dark, font-color-inverted); + +.header-color-mixin(@color, @color-inverted) { + +.header-color.@{color} { + .menu, + .page { + &__header { + background-color: @@color; + } + } + + .menu, + .page { + &__title, + &__subtitle, + &__body, + &__body a, + &__instruction, + &__instruction a { + color: @@color-inverted; + } + } +} + +} diff --git a/less/project/theme-extras.less b/less/project/theme-extras.less deleted file mode 100644 index 8996b396..00000000 --- a/less/project/theme-extras.less +++ /dev/null @@ -1,243 +0,0 @@ -// -------------------------------------------------- -// contentObject -// -------------------------------------------------- - -// "_htmlClasses" -// Hide nav back button -// -------------------------------------------------- -.hide-nav-back-btn .nav__back-btn { - .u-display-none; -} - -// "_classes" -// Hide the page header -// -------------------------------------------------- -.hide-page-header .page__header { - .u-display-none; -} - -// Header color mixin -// Add to menu/page to enable -// e.g. 'header-color transparent-dark' -// Note: both arguments must be predefined variables -// -------------------------------------------------- -.header-color-mixin(black, white); -.header-color-mixin(background, background-inverted); -.header-color-mixin(transparent-light, font-color); -.header-color-mixin(transparent-dark, font-color-inverted); - -.header-color-mixin(@color, @color-inverted) { - -.header-color.@{color} { - .menu, - .page { - &__header { - background-color: @@color; - } - } - - .menu, - .page { - &__title, - &__subtitle, - &__body, - &__body a, - &__instruction, - &__instruction a { - color: @@color-inverted; - } - } -} - -} - -// -------------------------------------------------- -// Block -// -------------------------------------------------- - -// Reverses the visual layout of the components above the medium breakpoint -// e.g. Left layout components would still render first in the DOM order -// but visually appear on the right hand side above the medium breakpoint. The -// components woud vertically stack as per the DOM order below the breakpoint -.block.reverse-desktop-order .component { - @media (min-width: @device-width-medium) { - &__container { - flex-direction: row-reverse; - } - } -} - -// Extend width of block to 70rem (1120px) -// -------------------------------------------------- -.block.extend-content-container .block__inner { - max-width: 70rem; -} - -// Extend width of block to max page width -// -------------------------------------------------- -.block.extend-container .block__inner { - max-width: @max-page-width; -} - -// DEPRECATED in favour of bg-color-mixin -// Block background color mixin -// Add to block to enable -// e.g. 'block-color black' -// Note: both arguments must be predefined variables -// -------------------------------------------------- -.block-color-mixin(@color, @color-inverted) { - -.block-color.@{color} { - background-color: @@color; - color: @@color-inverted; - - .block, - .component { - &__title, - &__body a, - &__instruction a { - color: @@color-inverted; - } - } - - .pagelevelprogress { - &__indicator { - border-color: @@color-inverted; - } - &__indicator-inner { - background-color: @@color; - } - &__indicator-bar { - background-color: @@color-inverted; - } - } - - .narrative { - &__progress { - background-color: fade(@@color-inverted, 50%); - } - - &__progress.is-selected { - background-color: @@color-inverted; - } - } -} - -} - -// -------------------------------------------------- -// Component -// -------------------------------------------------- - -// Component header bg color mixin -// Can be added to component to enable -// e.g. 'comp-header-bg-color black' -// Note: both arguments must be predefined variables -.component-header-bg-mixin(black, white); -.component-header-bg-mixin(background, background-inverted); -.component-header-bg-mixin(transparent-light, font-color); -.component-header-bg-mixin(transparent-dark, font-color-inverted); - -.component-header-bg-mixin(@color, @color-inverted) { - -.comp-header-bg-color.@{color} { - .component { - &__inner { - margin: -@component-padding-ver -@component-padding-hoz; - } - - &__header { - padding: @component-padding-ver @component-padding-ver; - background-color: @@color; - color: @@color-inverted; - } - - &__title, - &__body a, - &__instruction a { - color: @@color-inverted; - } - } - - .pagelevelprogress { - &__indicator { - border-color: @@color-inverted; - } - &__indicator-inner { - background-color: @@color; - } - &__indicator-bar { - background-color: @@color-inverted; - } - } -} - -} - -// -------------------------------------------------- -// Common -// -------------------------------------------------- - -// Background color mixin -// Can be added to course, contentObject, article, block, or component to enable -// e.g. 'bg-color black' -// Note: both arguments must be predefined variables -// -------------------------------------------------- -.bg-color-mixin(black, white); -.bg-color-mixin(background, background-inverted); -.bg-color-mixin(transparent-light, black); -.bg-color-mixin(transparent-dark, white); - -.bg-color-mixin(@color, @color-inverted) { - -.bg-color.@{color} { - background-color: @@color; - color: @@color-inverted; - - .block, - .component { - &__title, - &__body a, - &__instruction a { - color: @@color-inverted; - } - } - - .pagelevelprogress { - &__indicator { - border-color: @@color-inverted; - } - &__indicator-inner { - background-color: @@color; - } - &__indicator-bar { - background-color: @@color-inverted; - } - } - - .narrative { - &__progress { - background-color: fade(@@color-inverted, 50%); - } - - &__progress.is-selected { - background-color: @@color-inverted; - } - } -} - -} - -// classes to hide content above / below medium breakpoint -// -------------------------------------------------- -.hide-on-desktop { - @media (min-width: @device-width-medium) { - display: none; - } -} - -.hide-on-mobile { - @media (max-width: @device-width-medium) { - display: none; - } -} From 403d0ff268fcf4f3b310151834b847dcc251d852 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 18 Jan 2023 17:24:10 +0000 Subject: [PATCH 4/4] Moved _textAlignment styles to theme-common --- less/core/global.less | 37 -------------------------------- less/project/theme-common.less | 39 ++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/less/core/global.less b/less/core/global.less index a03640b9..c94c789f 100644 --- a/less/core/global.less +++ b/less/core/global.less @@ -7,43 +7,6 @@ body { vertical-align: middle; } -.text-align-mixin(page); -.text-align-mixin(article); -.text-align-mixin(block); -.text-align-mixin(component); - -.text-align-mixin(@selector) { - -.@{selector} { - &.title-align-left &__title, - &.body-align-left &__body, - &.instruction-align-left &__instruction { - text-align: left; - - .dir-rtl & { - text-align: right; - } - } - - &.title-align-center &__title, - &.body-align-center &__body, - &.instruction-align-center &__instruction { - text-align: center; - } - - &.title-align-right &__title, - &.body-align-right &__body, - &.instruction-align-right &__instruction { - text-align: right; - - .dir-rtl & { - text-align: left; - } - } -} - -} - // Quote related styling // override browser defined margins with rem unit blockquote, diff --git a/less/project/theme-common.less b/less/project/theme-common.less index b8a5f46e..1879e7c9 100644 --- a/less/project/theme-common.less +++ b/less/project/theme-common.less @@ -52,6 +52,45 @@ } +// styles associated with _textAlignment property +// -------------------------------------------------- +.text-align-mixin(page); +.text-align-mixin(article); +.text-align-mixin(block); +.text-align-mixin(component); + +.text-align-mixin(@selector) { + +.@{selector} { + &.title-align-left &__title, + &.body-align-left &__body, + &.instruction-align-left &__instruction { + text-align: left; + + .dir-rtl & { + text-align: right; + } + } + + &.title-align-center &__title, + &.body-align-center &__body, + &.instruction-align-center &__instruction { + text-align: center; + } + + &.title-align-right &__title, + &.body-align-right &__body, + &.instruction-align-right &__instruction { + text-align: right; + + .dir-rtl & { + text-align: left; + } + } +} + +} + // classes to hide content above / below medium breakpoint // -------------------------------------------------- .hide-on-desktop {