From 8df47a4d4de809de924d060dc4ec83743da79084 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 11 Jan 2024 16:23:41 +0000 Subject: [PATCH 01/86] Content item focus and disabled state added - focus state inherits from hover (as per existing component focus styles) - existing @visited vars are only used by components so grouped with content item --- less/_defaults/_colors.less | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 674adf4f..422a1afb 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -34,7 +34,7 @@ @heading-color: @blue; @heading-color-inverted: @white; -// Items - components +// Content Item (components) // -------------------------------------------------- @item-color: @blue; @item-color-inverted: @white; @@ -42,14 +42,18 @@ @item-color-hover: darken(@item-color, 10%); @item-color-inverted-hover: @item-color-inverted; +@item-color-focus: @item-color-hover; +@item-color-inverted-focus: @item-color-inverted-hover; + @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; -// Visited - presentation components -// -------------------------------------------------- @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; +@item-color-disabled: @disabled; +@item-color-inverted-disabled: @disabled-inverted; + // Buttons // -------------------------------------------------- @btn-color: @greyDark; From 31c845f85261ac6f6a0fee0db704aa8a2259e99b Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 11 Jan 2024 16:34:45 +0000 Subject: [PATCH 02/86] Content button focus, selected, locked and disabled state added - focus state inherits from hover (as per existing focus styles) - locked state inherits from disabled (as per existing locked styles) --- less/_defaults/_colors.less | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 422a1afb..61ccfc39 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -54,7 +54,7 @@ @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; -// Buttons +// Content Buttons // -------------------------------------------------- @btn-color: @greyDark; @btn-color-inverted: @white; @@ -62,6 +62,18 @@ @btn-color-hover: darken(@btn-color, 10%); @btn-color-inverted-hover: @btn-color-inverted; +@btn-color-focus: @btn-color-hover; +@btn-color-inverted-focus: @btn-color-inverted-hover; + +@btn-color-selected: darken(@btn-color, 20%); +@btn-color-inverted-selected: @btn-color-inverted; + +@btn-color-locked: @disabled; +@btn-color-inverted-locked: @disabled-inverted; + +@btn-color-disabled: @disabled; +@btn-color-inverted-disabled: @disabled-inverted; + // Button icon // -------------------------------------------------- @btn-icon-color: @nav-icon; From 2d76066d7b7a650a4fd04d0f15b98d21563f12c7 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 12 Jan 2024 17:13:09 +0000 Subject: [PATCH 03/86] Set up btn-ui-color variables --- less/_defaults/_colors.less | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 61ccfc39..d9d8cbed 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -74,6 +74,23 @@ @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; +// UI button +// -------------------------------------------------- +@btn-ui-color: red; +@btn-ui-color-inverted: white; + +@btn-ui-color-hover: blue; +@btn-ui-color-inverted-hover: white; + +@btn-ui-color-focus: green; +@btn-ui-color-inverted-focus: white; + +@btn-ui-color-selected: yellow; +@btn-ui-color-inverted-selected: black; + +@btn-ui-color-disabled: orange; +@btn-ui-color-inverted-disabled: white; + // Button icon // -------------------------------------------------- @btn-icon-color: @nav-icon; From 86ded189ae4563a802cf410cb570583f2a057fad Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 12 Jan 2024 17:13:22 +0000 Subject: [PATCH 04/86] Set up btn-color and btn-ui-color mixins --- less/_defaults/_buttonStates.less | 61 +++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 less/_defaults/_buttonStates.less diff --git a/less/_defaults/_buttonStates.less b/less/_defaults/_buttonStates.less new file mode 100644 index 00000000..90f38045 --- /dev/null +++ b/less/_defaults/_buttonStates.less @@ -0,0 +1,61 @@ +// Button states + +// Content item + +// Content buttons +.btn-color() { + background-color: @btn-color; + color: @btn-color-inverted; +} + +.btn-color-hover() { + background-color: @btn-color-hover; + color: @btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-focus() { + background-color: @btn-color-focus; + color: @btn-color-inverted-focus; +} + +.btn-color-selected() { + background-color: @btn-color-selected; + color: @btn-color-inverted-selected; +} + +.btn-color-locked() { + background-color: @btn-color-locked; + color: @btn-color-inverted-locked; +} + +.btn-color-disabled() { + background-color: @btn-color-disabled; + color: @btn-color-inverted-disabled; +} + +// UI button +.btn-ui-color() { + background-color: @btn-ui-color; + color: @btn-ui-color-inverted; +} + +.btn-ui-color-hover() { + background-color: @btn-ui-color-hover; + color: @btn-ui-color-inverted-hover; +} + +.btn-ui-color-focus() { + background-color: @btn-ui-color-focus; + color: @btn-ui-color-inverted-focus; +} + +.btn-ui-color-selected() { + background-color: @btn-ui-color-selected; + color: @btn-ui-color-inverted-selected; +} + +.btn-ui-color-disabled() { + background-color: @btn-ui-color-disabled; + color: @btn-ui-color-inverted-disabled; +} From 090292075add743b803d7603c562eeecacd434a0 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 12 Jan 2024 17:22:43 +0000 Subject: [PATCH 05/86] Removed previous btn styling, added new mixin support --- less/core/button.less | 44 ++++++++++++++++++------------------------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/less/core/button.less b/less/core/button.less index cf17788a..b738873b 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -3,44 +3,36 @@ margin-top: @btn-margin; } - &-icon { - background-color: @btn-icon-color; - color: @btn-icon-color-inverted; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @btn-icon-color-hover; - color: @btn-icon-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } - } - &-text { .button-text; } + // ? Do we move these elsewhere? &-text { - background-color: @btn-color; - color: @btn-color-inverted; border-radius: @btn-border-radius; + } + + &-icon.is-locked { + cursor: not-allowed; + } + // ? + + &__action, + &__feedback { + .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @btn-color-hover; - color: @btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .btn-color-hover; } - } - &-icon.is-disabled, - &-text.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } } - &-icon.is-locked, - &-text.is-locked { - background-color: @disabled; - color: @disabled-inverted; - cursor: not-allowed; + &__action.is-disabled, + &__feedback.is-disabled { + .btn-color-disabled; } &__marking { From fe1cd97f50ed381f2669c79024efbc2459dae249 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 12 Jan 2024 17:23:21 +0000 Subject: [PATCH 06/86] Added missing styling to plugins --- .../assessmentResults.less | 18 +++++++++++++++++- .../languagePicker.less | 13 +++++++++++++ .../plugins/adapt-contrib-trickle/trickle.less | 16 ++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less index c6186fab..e833f19c 100644 --- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less +++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less @@ -2,4 +2,20 @@ &__retry-feedback { margin-bottom: @component-body-margin; } -} \ No newline at end of file + + &__retry-btn { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &__retry-btn.is-disabled { + .btn-color-disabled; + } +} diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less index c835b063..ad20bb59 100644 --- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less +++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less @@ -26,6 +26,19 @@ &__language-btn { margin: @item-margin / 2; + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &__language-btn.is-disabled { + .btn-color-disabled; } } diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index cef2d9f4..27af6ab0 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,4 +1,20 @@ .trickle { + &__btn { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &__btn.is-disabled { + .btn-color-disabled; + } + &__btn-icon { display: inline-block; vertical-align: middle; From e2c978c8c4ef31e6566d3161864ec5b6244fbaa7 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 12 Jan 2024 17:23:30 +0000 Subject: [PATCH 07/86] Narrative controls disabled fix --- less/plugins/adapt-contrib-narrative/narrative.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index c9c34327..f0d6bf73 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -19,6 +19,11 @@ } } + &__controls.is-disabled { + background-color: @item-color-disabled; + color: @item-color-inverted-disabled; + } + &__progress { background-color: @item-color; border-radius: 50%; From c06e250621c6416d57e70f8d81867f4edd3f4dd5 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 15 Jan 2024 15:00:12 +0000 Subject: [PATCH 08/86] Added item-color mixins --- less/_defaults/_buttonStates.less | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/less/_defaults/_buttonStates.less b/less/_defaults/_buttonStates.less index 90f38045..af87a636 100644 --- a/less/_defaults/_buttonStates.less +++ b/less/_defaults/_buttonStates.less @@ -1,6 +1,32 @@ -// Button states +// States +// ? Should we rename this file `_states` as it covers more than just button states? // Content item +.item-color() { + background-color: @item-color; + color: @item-color-inverted; +} + +.item-color-hover() { + background-color: @item-color-hover; + color: @item-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-color-focus() { + background-color: @item-color-focus; + color: @item-color-inverted-focus; +} + +.item-color-selected() { + background-color: @item-color-selected; + color: @item-color-inverted-selected; +} + +.item-color-disabled() { + background-color: @item-color-disabled; + color: @item-color-inverted-disabled; +} // Content buttons .btn-color() { From a3206ddc116f953a6b5bb5a832f65bf684ced520 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 15 Jan 2024 15:00:23 +0000 Subject: [PATCH 09/86] Added comments / questions --- less/_defaults/_colors.less | 2 ++ less/core/button.less | 13 +++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index d9d8cbed..dfde7625 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -51,8 +51,10 @@ @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; +// ? Should this be renamed visited rather than disabled? @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; +// ? end // Content Buttons // -------------------------------------------------- diff --git a/less/core/button.less b/less/core/button.less index b738873b..b2c70e24 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -3,19 +3,28 @@ margin-top: @btn-margin; } + // ? Should this stay in this file? + // ? Specific font styling for text only buttons &-text { .button-text; } + // ? end - // ? Do we move these elsewhere? + // ? Should we move these styles elsewhere? + // ? A: Yes, in time these should be defined elsewhere as they are generic for + // ? either text or icon buttons. This file focuses on question buttons &-text { border-radius: @btn-border-radius; } + &-icon { + border-radius: @btn-border-radius; + } + &-icon.is-locked { cursor: not-allowed; } - // ? + // ? end &__action, &__feedback { From aa52dc83ff715399df1ad8a443b60678592daa94 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 15 Jan 2024 17:32:14 +0000 Subject: [PATCH 10/86] ui color vars replaced - Replace @btn-ui-color vars with @ui-color vars. Nav, Notify and Drawer btns inherit from their view colours. This sets an extra level of vars to define global ui colors or edit these separately as per existing Vanilla. - rename _buttonStates.less file to _state-mixins.less. --- less/_defaults/_colors.less | 42 +++++-------------- ...{_buttonStates.less => _state-mixins.less} | 28 ------------- 2 files changed, 11 insertions(+), 59 deletions(-) rename less/_defaults/{_buttonStates.less => _state-mixins.less} (66%) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index dfde7625..75737a33 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -48,13 +48,13 @@ @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; +// aka @item-color-visited but avoiding breaking chnage +// @visited is only used by presentation components @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; -// ? Should this be renamed visited rather than disabled? @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; -// ? end // Content Buttons // -------------------------------------------------- @@ -76,30 +76,10 @@ @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; -// UI button +// UI (global default for nav, notify, drawer) // -------------------------------------------------- -@btn-ui-color: red; -@btn-ui-color-inverted: white; - -@btn-ui-color-hover: blue; -@btn-ui-color-inverted-hover: white; - -@btn-ui-color-focus: green; -@btn-ui-color-inverted-focus: white; - -@btn-ui-color-selected: yellow; -@btn-ui-color-inverted-selected: black; - -@btn-ui-color-disabled: orange; -@btn-ui-color-inverted-disabled: white; - -// Button icon -// -------------------------------------------------- -@btn-icon-color: @nav-icon; -@btn-icon-color-inverted: @nav-icon-inverted; - -@btn-icon-color-hover: @nav-icon-hover; -@btn-icon-color-inverted-hover: @nav-icon-inverted-hover; +@ui-color: @white; +@ui-color-inverted: @grey; // Disabled - question components // -------------------------------------------------- @@ -143,8 +123,8 @@ // Navigation // -------------------------------------------------- -@nav: @white; -@nav-inverted: @grey; +@nav: @ui-color; +@nav-inverted: @ui-color-inverted; @nav-icon: @nav-inverted; @nav-icon-inverted: @nav; @@ -162,8 +142,8 @@ // Notify // -------------------------------------------------- -@notify: @blue; -@notify-inverted: @white; +@notify: @ui-color; +@notify-inverted: @ui-color-inverted; @notify-link: @notify-inverted; @@ -183,8 +163,8 @@ // Drawer // -------------------------------------------------- -@drawer: @blueDark; -@drawer-inverted: @white; +@drawer: @ui-color; +@drawer-inverted: @ui-color-inverted; @drawer-link: @drawer-inverted; diff --git a/less/_defaults/_buttonStates.less b/less/_defaults/_state-mixins.less similarity index 66% rename from less/_defaults/_buttonStates.less rename to less/_defaults/_state-mixins.less index af87a636..61a007f7 100644 --- a/less/_defaults/_buttonStates.less +++ b/less/_defaults/_state-mixins.less @@ -1,6 +1,3 @@ -// States -// ? Should we rename this file `_states` as it covers more than just button states? - // Content item .item-color() { background-color: @item-color; @@ -60,28 +57,3 @@ color: @btn-color-inverted-disabled; } -// UI button -.btn-ui-color() { - background-color: @btn-ui-color; - color: @btn-ui-color-inverted; -} - -.btn-ui-color-hover() { - background-color: @btn-ui-color-hover; - color: @btn-ui-color-inverted-hover; -} - -.btn-ui-color-focus() { - background-color: @btn-ui-color-focus; - color: @btn-ui-color-inverted-focus; -} - -.btn-ui-color-selected() { - background-color: @btn-ui-color-selected; - color: @btn-ui-color-inverted-selected; -} - -.btn-ui-color-disabled() { - background-color: @btn-ui-color-disabled; - color: @btn-ui-color-inverted-disabled; -} From b572119a1d2e8da9b6b8d92299d36ee63a0cf953 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 16 Jan 2024 12:25:49 +0000 Subject: [PATCH 11/86] Added ui button controls mixin - ui-btn-controls vars added - shared Notify and Drawer btn styles combined into single ui-btn--controls mixin. Replacing .notify-btn-icon mixin. --- less/_defaults/_btn-mixins.less | 9 +++++++++ less/_defaults/_spacing-config.less | 7 +++++++ less/core/drawer.less | 12 +----------- less/core/notify.less | 18 +----------------- less/core/notifyPush.less | 2 +- .../hotgraphicPopup.less | 2 +- less/plugins/adapt-contrib-tutor/tutor.less | 2 +- 7 files changed, 21 insertions(+), 31 deletions(-) create mode 100644 less/_defaults/_btn-mixins.less diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less new file mode 100644 index 00000000..07e7f19c --- /dev/null +++ b/less/_defaults/_btn-mixins.less @@ -0,0 +1,9 @@ +// Notify and Drawer controls (< > x) +// moved existing shared styles into single mixin +// replaces .notify-btn-icon mixin +// ? could shorthand 'controls' to 'ctrl'? +.ui-btn--controls { + margin: @ui-btn-controls-margin; + padding: @ui-btn-controls-padding; + border-radius: @ui-btn-controls-border-radius; +} diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 44fef066..248305c1 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -16,6 +16,13 @@ @btn-border-radius: 0.25rem; +// ? As we expand on item/btn vars we should separate font/element vars into separate files? +// UI Button +// -------------------------------------------------- +@ui-btn-controls-margin: @btn-margin / 2; +@ui-btn-controls-padding: @btn-padding / 2; +@ui-btn-controls-border-radius: 50%; + // Navigation // -------------------------------------------------- @nav-btn-margin: 0; diff --git a/less/core/drawer.less b/less/core/drawer.less index f8db20ef..4a8c26d1 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -7,16 +7,6 @@ } &__btn { - margin: @btn-margin / 2; - padding: @btn-padding / 2; - background-color: @drawer-icon; - color: @drawer-icon-inverted; - border-radius: 50%; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @drawer-icon-hover; - color: @drawer-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } + .ui-btn--controls; } } diff --git a/less/core/notify.less b/less/core/notify.less index 1ae95f16..2b52ff17 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -63,7 +63,7 @@ } &__btn-icon { - .notify-btn-icon; + .ui-btn--controls; } &__close-btn { @@ -90,19 +90,3 @@ // } // } } - -// Global Notify button icon -// -------------------------------------------------- -.notify-btn-icon() { - margin: @btn-margin / 2; - padding: @btn-padding / 2; - background-color: @notify-icon; - color: @notify-icon-inverted; - border-radius: 50%; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } -} diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 95ee9e6a..51ea1019 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -33,7 +33,7 @@ position: absolute; top: 0; right: 0; - .notify-btn-icon; + .ui-btn--controls; .dir-rtl & { right: auto; diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 66700d95..844e35ce 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -8,7 +8,7 @@ &__controls, &__close { - .notify-btn-icon; + .ui-btn--controls; } &__item-title { diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 4fcc833b..11acba4c 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -18,7 +18,7 @@ } &__btn-icon { - .notify-btn-icon; + .ui-btn--controls; } // overlay From 60cabbb5670fe61cf76b66561ecccf1539ce8aeb Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 16 Jan 2024 13:13:01 +0000 Subject: [PATCH 12/86] Added comments / questions --- less/_defaults/_spacing-config.less | 7 ++++--- less/core/nav.less | 2 ++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 248305c1..66afe2dc 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -2,14 +2,14 @@ // -------------------------------------------------- @icon-padding: 1rem; -// Item +// Content Item // -------------------------------------------------- @item-margin: 0.5rem; @item-padding: 1rem; @item-border-radius: 0.25rem; -// Button +// Content Button // -------------------------------------------------- @btn-margin: 1rem; @btn-padding: 1rem; @@ -21,12 +21,13 @@ // -------------------------------------------------- @ui-btn-controls-margin: @btn-margin / 2; @ui-btn-controls-padding: @btn-padding / 2; + @ui-btn-controls-border-radius: 50%; // Navigation // -------------------------------------------------- @nav-btn-margin: 0; - +//? Add padding ooption as per other btn/items? @nav-btn-border-radius: 0; // Menu header text margin diff --git a/less/core/nav.less b/less/core/nav.less index 290c57d7..7ec37e02 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -11,6 +11,8 @@ } &__btn { + //? nav btn styles are self contained to .nav__btn using @nav vars + //? Do we need to self contain styles to mixins still? margin: @nav-btn-margin (@nav-btn-margin / 2); background-color: @nav-icon; color: @nav-icon-inverted; From 3c48fb9bd199559c4c799b2c6e828df268ca9db0 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 16 Jan 2024 17:08:32 +0000 Subject: [PATCH 13/86] Menu item btn focus and locked state added --- less/_defaults/_colors.less | 6 ++++++ less/plugins/adapt-contrib-boxmenu/boxMenuItem.less | 11 ++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 75737a33..0e8dde90 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -121,6 +121,12 @@ @menu-item-btn-color-hover: @btn-color-hover; @menu-item-btn-color-inverted-hover: @btn-color-inverted-hover; +@menu-item-btn-color-focus: @btn-color-hover; +@menu-item-btn-color-inverted-focus: @btn-color-inverted-hover; + +@menu-item-btn-color-locked: @btn-color-hover; +@menu-item-btn-color-inverted-locked: @btn-color-inverted-hover; + // Navigation // -------------------------------------------------- @nav: @ui-color; diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index bf27524c..432ec706 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -52,12 +52,17 @@ color: @menu-item-btn-color-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } - } + html:not(.a11y-disable-focusoutline) &:focus-visible { + background-color: @menu-item-btn-color-focus; + color: @menu-item-btn-color-inverted-focus; + } + } + //? do we need 'is-disabled' selector? &__button.is-locked, &__button.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + background-color: @menu-item-btn-color-locked; + color: @menu-item-btn-color-inverted-locked; } &__status { From 98ae77be0ba211228b1087c8b520ca7b1fde1f03 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 16 Jan 2024 17:14:10 +0000 Subject: [PATCH 14/86] Fix menu item btn locked state to inherit from disabled vars --- less/_defaults/_colors.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 0e8dde90..5a682bc8 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -124,8 +124,8 @@ @menu-item-btn-color-focus: @btn-color-hover; @menu-item-btn-color-inverted-focus: @btn-color-inverted-hover; -@menu-item-btn-color-locked: @btn-color-hover; -@menu-item-btn-color-inverted-locked: @btn-color-inverted-hover; +@menu-item-btn-color-locked: @disabled; +@menu-item-btn-color-inverted-locked: @disabled-inverted; // Navigation // -------------------------------------------------- From 18046ff0c061e61b304680e9b50750c687368b46 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 11:32:02 +0000 Subject: [PATCH 15/86] notify ui btn mixins --- less/_defaults/_btn-mixins.less | 14 +++++++++++++- less/core/notify.less | 5 +++++ less/core/notifyPush.less | 5 +++++ .../adapt-contrib-hotgraphic/hotgraphicPopup.less | 5 +++++ less/plugins/adapt-contrib-tutor/tutor.less | 5 +++++ 5 files changed, 33 insertions(+), 1 deletion(-) diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less index 07e7f19c..eaf8452d 100644 --- a/less/_defaults/_btn-mixins.less +++ b/less/_defaults/_btn-mixins.less @@ -2,8 +2,20 @@ // moved existing shared styles into single mixin // replaces .notify-btn-icon mixin // ? could shorthand 'controls' to 'ctrl'? -.ui-btn--controls { +.ui-btn--controls() { margin: @ui-btn-controls-margin; padding: @ui-btn-controls-padding; border-radius: @ui-btn-controls-border-radius; + +} + +.notify-ui-btn--controls() { + background-color: @notify-icon; + color: @notify-icon-inverted; +} + +.notify-ui-btn--controls-hover() { + background-color: @notify-icon-hover; + color: @notify-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); } diff --git a/less/core/notify.less b/less/core/notify.less index 2b52ff17..dbb23f95 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -64,6 +64,11 @@ &__btn-icon { .ui-btn--controls; + .notify-ui-btn--controls; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn--controls-hover; + } } &__close-btn { diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 51ea1019..e8ba31d2 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -34,6 +34,11 @@ top: 0; right: 0; .ui-btn--controls; + .notify-ui-btn--controls; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn--controls-hover; + } .dir-rtl & { right: auto; diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 844e35ce..9c4fa759 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -9,6 +9,11 @@ &__controls, &__close { .ui-btn--controls; + .notify-ui-btn--controls; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn--controls-hover; + } } &__item-title { diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 11acba4c..f959ba4f 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -19,6 +19,11 @@ &__btn-icon { .ui-btn--controls; + .notify-ui-btn--controls; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn--controls-hover; + } } // overlay From 9693002de4010ba8bcb43442d35e76d8c99b1d17 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 17 Jan 2024 12:15:43 +0000 Subject: [PATCH 16/86] Add item ui mixin - set menu item btn vars to inherit from item ui --- less/_defaults/_colors.less | 43 +++++++++++++++++++++++++------ less/_defaults/_state-mixins.less | 32 +++++++++++++++++++++++ 2 files changed, 67 insertions(+), 8 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 5a682bc8..368a9712 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -56,6 +56,33 @@ @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; +// Content UI +// narrative controls/strapline, hotgraphic pin, transcript, trickle, menu item btn +// logic: if outputting course content into word doc, these buttons wouldn’t need including +// for cascading in the _colors.less only +// TODO: confirm which states are needed +// -------------------------------------------------- +@item-ui-color: red; +@item-ui-color-inverted: @white; + +@item-ui-color-hover: darken(@item-ui-color, 10%); +@item-ui-color-inverted-hover: @item-ui-color-inverted; + +@item-ui-color-focus: @item-ui-color-hover; +@item-ui-color-inverted-focus: @item-ui-color-inverted-hover; + +@item-ui-color-selected: darken(@item-ui-color, 20%); +@item-ui-color-inverted-selected: @item-ui-color-inverted; + +@item-ui-color-visited: darken(@item-ui-color, 15%); +@item-ui-color-inverted-visited: @item-ui-color-inverted; + +@item-ui-color-locked: @disabled; +@item-ui-color-inverted-locked: @disabled-inverted; + +@item-ui-color-disabled: @disabled; +@item-ui-color-inverted-disabled: @disabled-inverted; + // Content Buttons // -------------------------------------------------- @btn-color: @greyDark; @@ -115,17 +142,17 @@ @menu-item-progress-inverted: @progress-inverted; @menu-item-progress-border: @progress-border; -@menu-item-btn-color: @btn-color; -@menu-item-btn-color-inverted: @btn-color-inverted; +@menu-item-btn-color: @item-ui-color; +@menu-item-btn-color-inverted: @item-ui-color-inverted; -@menu-item-btn-color-hover: @btn-color-hover; -@menu-item-btn-color-inverted-hover: @btn-color-inverted-hover; +@menu-item-btn-color-hover: @item-ui-color-hover; +@menu-item-btn-color-inverted-hover: @item-ui-color-inverted-hover; -@menu-item-btn-color-focus: @btn-color-hover; -@menu-item-btn-color-inverted-focus: @btn-color-inverted-hover; +@menu-item-btn-color-focus: @item-ui-color-hover; +@menu-item-btn-color-inverted-focus: @item-ui-color-inverted-hover; -@menu-item-btn-color-locked: @disabled; -@menu-item-btn-color-inverted-locked: @disabled-inverted; +@menu-item-btn-color-locked: @item-ui-color-locked; +@menu-item-btn-color-inverted-locked: @item-ui-color-inverted-locked; // Navigation // -------------------------------------------------- diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 61a007f7..d7fac337 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -25,6 +25,38 @@ color: @item-color-inverted-disabled; } +// Content ui button +.item-ui-color() { + background-color: @item-ui-color; + color: @item-ui-color-inverted; +} + +.item-ui-color-hover() { + background-color: @item-ui-color-hover; + color: @item-ui-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-ui-color-focus() { + background-color: @item-ui-color-focus; + color: @item-ui-color-inverted-focus; +} + +.item-ui-color-visited() { + background-color: @item-ui-color-visited; + color: @item-ui-color-inverted-visited; +} + +.item-ui-color-selected() { + background-color: @item-ui-color-selected; + color: @item-ui-color-inverted-selected; +} + +.item-ui-color-disabled() { + background-color: @item-ui-color-disabled; + color: @item-ui-color-inverted-disabled; +} + // Content buttons .btn-color() { background-color: @btn-color; From e051567ef2b45f001b97285d3f4220572c2fae24 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 17 Jan 2024 12:33:10 +0000 Subject: [PATCH 17/86] Comments updated --- less/_defaults/_colors.less | 3 +-- less/_defaults/_spacing-config.less | 5 +++-- less/core/drawerItem.less | 1 + less/core/nav.less | 3 +-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 368a9712..28c4ecbb 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -58,8 +58,7 @@ // Content UI // narrative controls/strapline, hotgraphic pin, transcript, trickle, menu item btn -// logic: if outputting course content into word doc, these buttons wouldn’t need including -// for cascading in the _colors.less only +// logic: if outputting course content into word doc, these buttons wouldn’t need including (action not content) // TODO: confirm which states are needed // -------------------------------------------------- @item-ui-color: red; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 66afe2dc..ba0dcce0 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -16,7 +16,8 @@ @btn-border-radius: 0.25rem; -// ? As we expand on item/btn vars we should separate font/element vars into separate files? +// TODO: separate font/element vars into separate files +// wait until work has been reviewed/approved to make it easier to diff compare // UI Button // -------------------------------------------------- @ui-btn-controls-margin: @btn-margin / 2; @@ -27,7 +28,7 @@ // Navigation // -------------------------------------------------- @nav-btn-margin: 0; -//? Add padding ooption as per other btn/items? +//TODO: Add padding option as per other btn/items @nav-btn-border-radius: 0; // Menu header text margin diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 83e718ba..ddf4edef 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -1,4 +1,5 @@ .drawer { + //TODO: separate color/non-color styles into mixins &__item-btn { display: block; padding: @item-padding; diff --git a/less/core/nav.less b/less/core/nav.less index 7ec37e02..4da1fb65 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -11,8 +11,7 @@ } &__btn { - //? nav btn styles are self contained to .nav__btn using @nav vars - //? Do we need to self contain styles to mixins still? + //TODO: separate color/non-color styles into mixins margin: @nav-btn-margin (@nav-btn-margin / 2); background-color: @nav-icon; color: @nav-icon-inverted; From cb2959335c0b8dad091e0cb0ac96cbe3987be8af Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 17 Jan 2024 14:03:34 +0000 Subject: [PATCH 18/86] Apply item ui mixin to plugin files - item ui locked state added - set .narrative__strapline-icon to inherit from narrative__strapline-btn to reduce additional state declaration styles --- less/_defaults/_colors.less | 2 +- less/_defaults/_state-mixins.less | 5 +++ .../adapt-contrib-hotgraphic/hotgraphic.less | 10 ++--- less/plugins/adapt-contrib-media/media.less | 13 ++---- .../adapt-contrib-narrative/narrative.less | 44 ++++--------------- .../adapt-contrib-trickle/trickle.less | 11 ++--- 6 files changed, 28 insertions(+), 57 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 28c4ecbb..1b405573 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -57,7 +57,7 @@ @item-color-inverted-disabled: @disabled-inverted; // Content UI -// narrative controls/strapline, hotgraphic pin, transcript, trickle, menu item btn +// boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle // logic: if outputting course content into word doc, these buttons wouldn’t need including (action not content) // TODO: confirm which states are needed // -------------------------------------------------- diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index d7fac337..4383c11b 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -52,6 +52,11 @@ color: @item-ui-color-inverted-selected; } +.item-ui-color-locked() { + background-color: @item-ui-color-locked; + color: @item-ui-color-inverted-locked; +} + .item-ui-color-disabled() { background-color: @item-ui-color-disabled; color: @item-ui-color-inverted-disabled; diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index 25472822..c517419c 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -8,20 +8,16 @@ } &__pin:not(.has-pin-image) { - background-color: @item-color; - color: @item-color-inverted; + .item-ui-color; border-radius: 50%; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-ui-color-hover; } } &__pin:not(.has-pin-image).is-visited { - background-color: @visited; - color: @visited-inverted; + .item-ui-color-visited; } // Numbered pins diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 2cb50376..90b77a16 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -5,25 +5,20 @@ &__transcript-btn { padding: @item-padding; - background-color: @item-color; - color: @item-color-inverted; + .item-ui-color; border-radius: @item-border-radius; .no-touch &:not([aria-expanded="true"]):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-ui-color-hover; } } &.is-complete &__transcript-btn { - background-color: @visited; - color: @visited-inverted; + .item-ui-color-visited; } &__transcript-btn[aria-expanded="true"] { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-ui-color-selected; } &__transcript-body-inline { diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index f0d6bf73..6df7702d 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -9,19 +9,15 @@ } &__controls { - background-color: @item-color; - color: @item-color-inverted; + .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-ui-color-hover; } } &__controls.is-disabled { - background-color: @item-color-disabled; - color: @item-color-inverted-disabled; + .item-ui-color-disabled; } &__progress { @@ -39,43 +35,21 @@ &__strapline-btn { text-align: start; - background-color: @item-color; - color: @item-color-inverted; + .item-ui-color; } - // set icon background color to transparent to 'inherit' strapline styling + // set icon background color to inherit from strapline styling &__strapline-icon { - background-color: transparent; - color: @item-color-inverted; - } - - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover, - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon { - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + background-color: inherit; + color: inherit; } .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - } - - // set icon hover background color to transparent to 'inherit' strapline styling - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon { - background-color: transparent; - } - - &__strapline-btn.is-visited, - &__strapline-btn.is-visited &__strapline-icon { - color: @visited-inverted; + .item-ui-color-hover; } &__strapline-btn.is-visited { - background-color: @visited; - } - - // set icon visited background color to transparent to 'inherit' strapline styling - &__strapline-btn.is-visited &__strapline-icon { - background-color: transparent; + .item-ui-color-visited; } &.has-img-zoom &__slider-image-container { diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index 27af6ab0..60cc2d9d 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,18 +1,19 @@ .trickle { &__btn { - .btn-color; + .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; + .item-ui-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; + .item-ui-color-focus; } } - + // ? should this be .item-ui-color-locked instead? + // ? I think we only show a disabled btn when content is steplocked &__btn.is-disabled { - .btn-color-disabled; + .item-ui-color-disabled; } &__btn-icon { From 8fd5b33549096c9f4815853d94e79f17b96943a3 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 14:17:47 +0000 Subject: [PATCH 19/86] UI control mixins, nav btn padding --- less/_defaults/_btn-mixins.less | 12 ------- less/_defaults/_spacing-config.less | 3 +- less/_defaults/_state-mixins.less | 33 +++++++++++++++++++ less/core/drawer.less | 5 +++ less/core/nav.less | 9 ++--- less/core/notify.less | 4 +-- less/core/notifyPush.less | 4 +-- .../hotgraphicPopup.less | 4 +-- less/plugins/adapt-contrib-tutor/tutor.less | 4 +-- 9 files changed, 51 insertions(+), 27 deletions(-) diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less index eaf8452d..07bc0da0 100644 --- a/less/_defaults/_btn-mixins.less +++ b/less/_defaults/_btn-mixins.less @@ -6,16 +6,4 @@ margin: @ui-btn-controls-margin; padding: @ui-btn-controls-padding; border-radius: @ui-btn-controls-border-radius; - -} - -.notify-ui-btn--controls() { - background-color: @notify-icon; - color: @notify-icon-inverted; -} - -.notify-ui-btn--controls-hover() { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); } diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index ba0dcce0..15b24204 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -28,7 +28,8 @@ // Navigation // -------------------------------------------------- @nav-btn-margin: 0; -//TODO: Add padding option as per other btn/items +@nav-btn-padding-ver: @icon-padding; +@nav-btn-padding-hoz: @icon-padding; @nav-btn-border-radius: 0; // Menu header text margin diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index d7fac337..6e18a9a2 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -89,3 +89,36 @@ color: @btn-color-inverted-disabled; } +// UI (global default for nav, notify, drawer) +.nav-ui-btn-color--controls() { + background-color: @nav-icon; + color: @nav-icon-inverted; +} + +.nav-ui-btn-color--controls-hover() { + background-color: @nav-icon-hover; + color: @nav-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-ui-btn-color--controls() { + background-color: @notify-icon; + color: @notify-icon-inverted; +} + +.notify-ui-btn-color--controls-hover() { + background-color: @notify-icon-hover; + color: @notify-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.drawer-ui-btn-color--controls() { + background-color: @drawer-icon; + color: @drawer-icon-inverted; +} + +.drawer-ui-btn-color--controls-hover() { + background-color: @drawer-icon-hover; + color: @drawer-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} diff --git a/less/core/drawer.less b/less/core/drawer.less index 4a8c26d1..c863b221 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -8,5 +8,10 @@ &__btn { .ui-btn--controls; + .drawer-ui-btn-color--controls; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-ui-btn-color--controls-hover; + } } } diff --git a/less/core/nav.less b/less/core/nav.less index 4da1fb65..1a22e839 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -11,16 +11,13 @@ } &__btn { - //TODO: separate color/non-color styles into mixins margin: @nav-btn-margin (@nav-btn-margin / 2); - background-color: @nav-icon; - color: @nav-icon-inverted; + padding: @nav-btn-padding-ver @nav-btn-padding-hoz; + .nav-ui-btn-color--controls; border-radius: @nav-btn-border-radius; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @nav-icon-hover; - color: @nav-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .nav-ui-btn-color--controls-hover; } } diff --git a/less/core/notify.less b/less/core/notify.less index dbb23f95..c7ca6e97 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -64,10 +64,10 @@ &__btn-icon { .ui-btn--controls; - .notify-ui-btn--controls; + .notify-ui-btn-color--controls; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn--controls-hover; + .notify-ui-btn-color--controls-hover; } } diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index e8ba31d2..02743af5 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -34,10 +34,10 @@ top: 0; right: 0; .ui-btn--controls; - .notify-ui-btn--controls; + .notify-ui-btn-color--controls; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn--controls-hover; + .notify-ui-btn-color--controls-hover; } .dir-rtl & { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 9c4fa759..00ca272f 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -9,10 +9,10 @@ &__controls, &__close { .ui-btn--controls; - .notify-ui-btn--controls; + .notify-ui-btn-color--controls; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn--controls-hover; + .notify-ui-btn-color--controls-hover; } } diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index f959ba4f..924bfd12 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -19,10 +19,10 @@ &__btn-icon { .ui-btn--controls; - .notify-ui-btn--controls; + .notify-ui-btn-color--controls; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn--controls-hover; + .notify-ui-btn-color--controls-hover; } } From 179f6340f44b986acbaa515b43e2528e44e6c30c Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 14:21:58 +0000 Subject: [PATCH 20/86] Updated UI base inverted colour for aa contrast --- less/_defaults/_colors.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 1b405573..12bfc394 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -105,7 +105,7 @@ // UI (global default for nav, notify, drawer) // -------------------------------------------------- @ui-color: @white; -@ui-color-inverted: @grey; +@ui-color-inverted: @greyDark; // Disabled - question components // -------------------------------------------------- From 6cffe368aee7c11d83fcb136a5cf9a62d10a8292 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 14:22:24 +0000 Subject: [PATCH 21/86] Removed unused disabled state from boxMenuItem btn --- less/plugins/adapt-contrib-boxmenu/boxMenuItem.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 432ec706..ae44b8af 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -1,6 +1,6 @@ .boxmenu-item { display: flex; - + &__inner { width: 100%; margin: 0 @menu-item-padding-hoz @menu-item-padding-ver; @@ -58,9 +58,8 @@ color: @menu-item-btn-color-inverted-focus; } } - //? do we need 'is-disabled' selector? - &__button.is-locked, - &__button.is-disabled { + + &__button.is-locked { background-color: @menu-item-btn-color-locked; color: @menu-item-btn-color-inverted-locked; } From 49987b0a231a6141b034fc0315a90c8ecfb0b4e0 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 17 Jan 2024 15:26:49 +0000 Subject: [PATCH 22/86] Focus states added to Hotgraphic pin, Media transcript btn, Narrative controls and strapline - Narrative strapline icon background color set to transparent to prevent icon background obscuring the btn focus outline --- .../adapt-contrib-hotgraphic/hotgraphic.less | 4 ++++ less/plugins/adapt-contrib-media/media.less | 4 ++++ less/plugins/adapt-contrib-narrative/narrative.less | 13 +++++++++++-- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index c517419c..413d2b10 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -14,6 +14,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .item-ui-color-hover; } + + html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + .item-ui-color-focus; + } } &__pin:not(.has-pin-image).is-visited { diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 90b77a16..f45db8b1 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -11,6 +11,10 @@ .no-touch &:not([aria-expanded="true"]):hover { .item-ui-color-hover; } + + html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { + .item-ui-color-focus; + } } &.is-complete &__transcript-btn { diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 6df7702d..1482cf02 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -14,6 +14,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .item-ui-color-hover; } + + html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + .item-ui-color-focus; + } } &__controls.is-disabled { @@ -38,9 +42,10 @@ .item-ui-color; } - // set icon background color to inherit from strapline styling + // set icon background color to transparent to 'inherit' strapline styling + // prevents icon background obscuring the btn focus outline &__strapline-icon { - background-color: inherit; + background-color: transparent; color: inherit; } @@ -48,6 +53,10 @@ .item-ui-color-hover; } + html:not(.a11y-disable-focusoutline) &__strapline-btn:not(.is-disabled):not(.is-locked):focus-visible { + .item-ui-color-focus; + } + &__strapline-btn.is-visited { .item-ui-color-visited; } From 18c96184a2600418ea6090aa8dbacd780d9ca1c2 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 15:29:11 +0000 Subject: [PATCH 23/86] Adjusted notify and drawer colour definitions --- less/_defaults/_colors.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 12bfc394..0a6c18e2 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -181,18 +181,18 @@ @notify-link-hover: @notify-link; -@notify-btn: @btn-color-inverted; -@notify-btn-inverted: @btn-color; - -@notify-btn-hover: darken(@notify-btn, 10%); -@notify-btn-inverted-hover: @notify-btn-inverted; - @notify-icon: darken(@notify, 10%); @notify-icon-inverted: @notify-inverted; -@notify-icon-hover: darken(@notify, 15%); +@notify-icon-hover: darken(@notify-icon, 10%); @notify-icon-inverted-hover: @notify-icon-inverted; +@notify-btn: @btn-color; +@notify-btn-inverted: @btn-color-inverted; + +@notify-btn-hover: darken(@notify-btn, 10%); +@notify-btn-inverted-hover: @notify-btn-inverted; + // Drawer // -------------------------------------------------- @drawer: @ui-color; @@ -202,7 +202,7 @@ @drawer-link-hover: @drawer-link; -@drawer-icon: @drawer; +@drawer-icon: darken(@drawer, 10%); @drawer-icon-inverted: @drawer-inverted; @drawer-icon-hover: darken(@drawer-icon, 10%); From 4158bfb6fa0ea8cad8e7126f40c21b327c70b82c Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 17 Jan 2024 15:29:23 +0000 Subject: [PATCH 24/86] Comment updates --- less/_defaults/_btn-mixins.less | 1 + less/_defaults/_spacing-config.less | 1 + less/_defaults/_state-mixins.less | 3 ++- less/plugins/adapt-contrib-trickle/trickle.less | 3 ++- 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less index 07bc0da0..0603a552 100644 --- a/less/_defaults/_btn-mixins.less +++ b/less/_defaults/_btn-mixins.less @@ -2,6 +2,7 @@ // moved existing shared styles into single mixin // replaces .notify-btn-icon mixin // ? could shorthand 'controls' to 'ctrl'? +// * Am happy with shorthand .ui-btn--controls() { margin: @ui-btn-controls-margin; padding: @ui-btn-controls-padding; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 15b24204..647fd493 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -30,6 +30,7 @@ @nav-btn-margin: 0; @nav-btn-padding-ver: @icon-padding; @nav-btn-padding-hoz: @icon-padding; + @nav-btn-border-radius: 0; // Menu header text margin diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 16d92193..cc775f92 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -25,7 +25,7 @@ color: @item-color-inverted-disabled; } -// Content ui button +// Content item ui button .item-ui-color() { background-color: @item-ui-color; color: @item-ui-color-inverted; @@ -95,6 +95,7 @@ } // UI (global default for nav, notify, drawer) +// ? review use of single dash vs double dash for mixin names .nav-ui-btn-color--controls() { background-color: @nav-icon; color: @nav-icon-inverted; diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index 60cc2d9d..b895436d 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -11,7 +11,8 @@ } } // ? should this be .item-ui-color-locked instead? - // ? I think we only show a disabled btn when content is steplocked + // ? I think we only show a disabled btn when content is steplocked + // * The button itself is in a disabled state rather than locked, not sure if that would have any impact on how we present the visual state &__btn.is-disabled { .item-ui-color-disabled; } From 179bd74cec305c6544b1e1fbde8385a7164ec2e3 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 17 Jan 2024 15:33:31 +0000 Subject: [PATCH 25/86] Set @item-ui-color to inherit from @item-color by default --- less/_defaults/_colors.less | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 0a6c18e2..e47199a6 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -56,13 +56,12 @@ @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; -// Content UI +// Content UI (action not content) // boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle -// logic: if outputting course content into word doc, these buttons wouldn’t need including (action not content) -// TODO: confirm which states are needed +// logic: if outputting course content into word doc, these buttons wouldn’t need including // -------------------------------------------------- -@item-ui-color: red; -@item-ui-color-inverted: @white; +@item-ui-color: @item-color; +@item-ui-color-inverted: @item-color-inverted; @item-ui-color-hover: darken(@item-ui-color, 10%); @item-ui-color-inverted-hover: @item-ui-color-inverted; From 519156a4f853bde149e620272370a6a642e52eab Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 18 Jan 2024 12:21:13 +0000 Subject: [PATCH 26/86] Added drawer item color mixins --- less/_defaults/_state-mixins.less | 25 +++++++++++++++++++++++++ less/core/drawerItem.less | 22 +++++++++------------- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index cc775f92..25cb6a24 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -128,3 +128,28 @@ color: @drawer-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } + +.drawer-item-color() { + background-color: @drawer-item; + color: @drawer-item-inverted; + border-color: @drawer-item-hover; +} + +.drawer-item-color-hover() { + background-color: @drawer-item-hover; + color: @drawer-item-inverted-hover; + border-color: @drawer-item-hover; + .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;); +} + +.drawer-item-color-locked() { + background-color: @disabled; + color: @disabled-inverted; + border-color: @drawer-item-hover; +} + +.drawer-item-color-selected() { + background-color: @drawer-item-selected; + color: @drawer-item-inverted-selected; + border-color: @drawer-item-hover; +} diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index ddf4edef..01feb2a4 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -1,27 +1,23 @@ .drawer { - //TODO: separate color/non-color styles into mixins &__item-btn { display: block; - padding: @item-padding; - background-color: @drawer-item; - border-bottom: 1px solid @drawer-item-hover; - color: @drawer-item-inverted; + padding: @item-padding; // ? set padding and margin vars as per Nav and Notify? + border-bottom: 1px solid; // TODO: set as var + .drawer-item-color(); .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @drawer-item-hover; - color: @drawer-item-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .drawer-item-color-hover; } } + //? is disabled state needed? + //? disabled drawer items include locked or selected states only &__item-btn.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + .drawer-item-color-locked } &__item-btn.is-selected { - background-color: @drawer-item-selected; - color: @drawer-item-inverted-selected; + .drawer-item-color-selected; } &__item-title { @@ -35,4 +31,4 @@ .drawer-item-body; text-align: start; } -} +} \ No newline at end of file From b3551cfa4bdd15bc1881c7cfb0573208e8d55ed1 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 18 Jan 2024 15:32:54 +0000 Subject: [PATCH 27/86] Add drawer item vars for margin, padding and border - border-radius added - default drawer item vars represent current drawer styles - margin gives option to display items in a 'button style' - when margin is set, apply border to whole of button (not just bottom) --- less/_defaults/_spacing-config.less | 9 +++++++++ less/core/drawerItem.less | 13 +++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 647fd493..5f50ce57 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -33,6 +33,15 @@ @nav-btn-border-radius: 0; +// Drawer +// -------------------------------------------------- +@drawer-item-margin: 0; +@drawer-item-padding-ver: @item-padding; +@drawer-item-padding-hoz: @item-padding; + +@drawer-item-border-radius: 0; +@drawer-item-border-width: 1px; + // Menu header text margin // -------------------------------------------------- @menu-title-margin: 1rem; diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 01feb2a4..1fd694a3 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -1,8 +1,17 @@ .drawer { &__item-btn { display: block; - padding: @item-padding; // ? set padding and margin vars as per Nav and Notify? - border-bottom: 1px solid; // TODO: set as var + padding: @drawer-item-padding-ver @drawer-item-padding-hoz; + margin: @drawer-item-margin; + border-bottom: @drawer-item-border-width solid; + border-radius: @drawer-item-border-radius; + + & when (@drawer-item-margin > 0) { + @total-margin: @drawer-item-margin * 2; + width: calc(100% ~'-' @total-margin); + border: @drawer-item-border-width solid; + } + .drawer-item-color(); .no-touch &:not(.is-disabled):not(.is-locked):hover { From 9782c7fcec990c18b372fdecfb7b667ece9995d6 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 18 Jan 2024 16:10:32 +0000 Subject: [PATCH 28/86] Drawer item focus state added - drawer item selected state expanded to support aria-current="true" (used by languagepicker which should inherit selected, not disabled styling. --- less/_defaults/_colors.less | 3 +++ less/_defaults/_state-mixins.less | 9 ++++++++- less/core/drawerItem.less | 5 +++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index e47199a6..12764863 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -213,6 +213,9 @@ @drawer-item-hover: darken(@drawer-item, 10%); @drawer-item-inverted-hover: @drawer-item-inverted; +@drawer-item-focus: darken(@drawer-item-hover, 10%); +@drawer-item-inverted-focus: @drawer-item-inverted-hover; + @drawer-item-selected: darken(@drawer-item, 20%); @drawer-item-inverted-selected: @drawer-item-inverted; @drawer-item-selected-underline: @drawer-item-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 25cb6a24..6ea14c8a 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -94,8 +94,9 @@ color: @btn-color-inverted-disabled; } -// UI (global default for nav, notify, drawer) +// UI (nav, notify, drawer) // ? review use of single dash vs double dash for mixin names +// ? expand nav and notify mixins to include border? .nav-ui-btn-color--controls() { background-color: @nav-icon; color: @nav-icon-inverted; @@ -142,6 +143,12 @@ .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;); } +.drawer-item-color-focus() { + background-color: @drawer-item-focus; + color: @drawer-item-inverted-focus; + border-color: @drawer-item-focus; +} + .drawer-item-color-locked() { background-color: @disabled; color: @disabled-inverted; diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 1fd694a3..e8dc9493 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -17,6 +17,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-item-color-hover; } + + html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + .drawer-item-color-focus; + } } //? is disabled state needed? @@ -25,6 +29,7 @@ .drawer-item-color-locked } + &__item-btn[aria-current="true"], &__item-btn.is-selected { .drawer-item-color-selected; } From e22f330b06959d945c9c0336679b5cc54b0f3214 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 18 Jan 2024 16:13:31 +0000 Subject: [PATCH 29/86] Update glossary padding vars ...to align with drawer item padding --- less/plugins/adapt-contrib-glossary/glossary.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/less/plugins/adapt-contrib-glossary/glossary.less b/less/plugins/adapt-contrib-glossary/glossary.less index 2a907111..08ed0cf9 100644 --- a/less/plugins/adapt-contrib-glossary/glossary.less +++ b/less/plugins/adapt-contrib-glossary/glossary.less @@ -1,6 +1,6 @@ .glossary { &__textbox-container { - padding: @item-padding; + padding: @drawer-item-padding-ver @drawer-item-padding-hoz; } &__textbox { @@ -8,7 +8,7 @@ } &__checkbox-container { - padding: 0 @item-padding @item-padding; + padding: 0 @drawer-item-padding-hoz @drawer-item-padding-ver; } &__checkbox-input, From b827321a7177a132d0d1aabd1c2d367f75005304 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 18 Jan 2024 16:15:53 +0000 Subject: [PATCH 30/86] Comment updates --- less/core/drawerItem.less | 1 + 1 file changed, 1 insertion(+) diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index e8dc9493..9c93d5c2 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -29,6 +29,7 @@ .drawer-item-color-locked } + // aria-current="true" is used by languagePicker &__item-btn[aria-current="true"], &__item-btn.is-selected { .drawer-item-color-selected; From d690bcca5e4afea45224611a3bafb4f8a58ad2b3 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 19 Jan 2024 17:03:31 +0000 Subject: [PATCH 31/86] Notify btn mixin --- less/_defaults/_colors.less | 17 +++++++++ less/_defaults/_spacing-config.less | 14 ++++++- less/_defaults/_state-mixins.less | 41 +++++++++++++++++++++ less/core/notify.less | 19 +++++++--- less/plugins/adapt-contrib-tutor/tutor.less | 19 ++++------ 5 files changed, 91 insertions(+), 19 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 12764863..7c495dcb 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -157,6 +157,7 @@ @nav: @ui-color; @nav-inverted: @ui-color-inverted; +// UI @nav-icon: @nav-inverted; @nav-icon-inverted: @nav; @@ -180,18 +181,32 @@ @notify-link-hover: @notify-link; +// UI @notify-icon: darken(@notify, 10%); @notify-icon-inverted: @notify-inverted; @notify-icon-hover: darken(@notify-icon, 10%); @notify-icon-inverted-hover: @notify-icon-inverted; +// Button @notify-btn: @btn-color; @notify-btn-inverted: @btn-color-inverted; @notify-btn-hover: darken(@notify-btn, 10%); @notify-btn-inverted-hover: @notify-btn-inverted; +@notify-btn-focus: @btn-color-focus; +@notify-btn-inverted-focus: @btn-color-inverted-focus; + +@notify-btn-selected: @btn-color-selected; +@notify-btn-inverted-selected: @btn-color-inverted-selected; + +@notify-btn-locked: @btn-color-locked; +@notify-btn-inverted-locked: @btn-color-inverted-locked; + +@notify-btn-disabled: @btn-color-disabled; +@notify-btn-inverted-disabled: @btn-color-inverted-disabled; + // Drawer // -------------------------------------------------- @drawer: @ui-color; @@ -201,12 +216,14 @@ @drawer-link-hover: @drawer-link; +// UI @drawer-icon: darken(@drawer, 10%); @drawer-icon-inverted: @drawer-inverted; @drawer-icon-hover: darken(@drawer-icon, 10%); @drawer-icon-inverted-hover: @drawer-icon-inverted; +// Item @drawer-item: @drawer; @drawer-item-inverted: @drawer-inverted; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 5f50ce57..d329a88d 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -21,6 +21,7 @@ // UI Button // -------------------------------------------------- @ui-btn-controls-margin: @btn-margin / 2; + @ui-btn-controls-padding: @btn-padding / 2; @ui-btn-controls-border-radius: 50%; @@ -28,14 +29,23 @@ // Navigation // -------------------------------------------------- @nav-btn-margin: 0; + @nav-btn-padding-ver: @icon-padding; @nav-btn-padding-hoz: @icon-padding; @nav-btn-border-radius: 0; -// Drawer +// Notify button // -------------------------------------------------- -@drawer-item-margin: 0; +@notify-btn-margin: 0; + +@notify-btn-padding-ver: @btn-padding / 2; +@notify-btn-padding-hoz: @btn-padding; + +// Drawer item +// -------------------------------------------------- +@drawer-item-margin: 0.5rem; + @drawer-item-padding-ver: @item-padding; @drawer-item-padding-hoz: @item-padding; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 6ea14c8a..ddc1dd9f 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -20,6 +20,11 @@ color: @item-color-inverted-selected; } +.item-color-visited() { + background-color: @visited; + color: @visited-inverted; +} + .item-color-disabled() { background-color: @item-color-disabled; color: @item-color-inverted-disabled; @@ -97,6 +102,7 @@ // UI (nav, notify, drawer) // ? review use of single dash vs double dash for mixin names // ? expand nav and notify mixins to include border? +// Nav UI .nav-ui-btn-color--controls() { background-color: @nav-icon; color: @nav-icon-inverted; @@ -108,6 +114,7 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +// Notify UI .notify-ui-btn-color--controls() { background-color: @notify-icon; color: @notify-icon-inverted; @@ -119,6 +126,39 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +// Notify button +.notify-btn-color() { + background-color: @notify-btn; + color: @notify-btn-inverted; +} + +.notify-btn-color-hover() { + background-color: @notify-btn-hover; + color: @notify-btn-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-btn-color-focus() { + background-color: @notify-btn-focus; + color: @notify-btn-inverted-focus; +} + +.notify-btn-color-selected() { + background-color: @notify-btn-selected; + color: @notify-btn-inverted-selected; +} + +.notify-btn-color-locked() { + background-color: @notify-btn-locked; + color: @notify-btn-inverted-locked; +} + +.notify-btn-color-disabled() { + background-color: @notify-btn-disabled; + color: @notify-btn-inverted-disabled; +} + +// Drawer UI .drawer-ui-btn-color--controls() { background-color: @drawer-icon; color: @drawer-icon-inverted; @@ -130,6 +170,7 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +// Drawer item .drawer-item-color() { background-color: @drawer-item; color: @drawer-item-inverted; diff --git a/less/core/notify.less b/less/core/notify.less index c7ca6e97..56196411 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -51,17 +51,26 @@ margin-top: @btn-margin; } + // Button &__btn { - background-color: @notify-btn; - color: @notify-btn-inverted; + margin: @notify-btn-margin; + padding: @notify-btn-padding-ver @notify-btn-padding-hoz; + .notify-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @notify-btn-hover; - color: @notify-btn-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .notify-btn-color-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } + } + + &__btn.is-disabled { + .notify-btn-color-disabled; } + // UI &__btn-icon { .ui-btn--controls; .notify-ui-btn-color--controls; diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 924bfd12..82d9a2e5 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -48,23 +48,18 @@ } &-type-overlay &__btn { - background-color: @notify-btn; - color: @notify-btn-inverted; + .notify-btn-color; .no-touch &:hover { - background-color: @notify-btn-hover; - color: @notify-btn-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .notify-btn-color-hover; } + } - &-icon { - background-color: @notify-icon; - color: @notify-icon-inverted; + &-type-overlay &__btn-icon { + .notify-ui-btn-color--controls; - .no-touch &:hover { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; - } + .no-touch &:hover { + .notify-ui-btn-color--controls-hover; } } } From 13bd3813aa6d6bd5ccaab47b1291b52550725398 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 19 Jan 2024 17:03:59 +0000 Subject: [PATCH 32/86] Item color mixin application --- less/core/drawerItem.less | 4 +-- .../adapt-contrib-accordion/accordion.less | 17 +++++------ less/plugins/adapt-contrib-gmcq/gmcq.less | 18 +++++------- .../adapt-contrib-matching/dropdown.less | 29 ++++++++----------- less/plugins/adapt-contrib-mcq/mcq.less | 18 +++++------- .../adapt-contrib-narrative/narrative.less | 1 + less/plugins/adapt-contrib-slider/slider.less | 6 ++-- 7 files changed, 41 insertions(+), 52 deletions(-) diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 9c93d5c2..145813a3 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -11,7 +11,7 @@ width: calc(100% ~'-' @total-margin); border: @drawer-item-border-width solid; } - + .drawer-item-color(); .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -46,4 +46,4 @@ .drawer-item-body; text-align: start; } -} \ No newline at end of file +} diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index 0b981973..88648334 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -7,25 +7,24 @@ padding-bottom: @item-padding; padding-inline: @item-padding (@icon-size + (@item-padding * 2)); text-align: start; - background-color: @item-color; - color: @item-color-inverted; + .item-color; border-radius: @item-border-radius; .no-touch &:not(.is-selected):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; } } &__btn.is-visited { - background-color: @visited; - color: @visited-inverted; + .item-color-visited; } &__btn.is-selected { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-color-selected; } &__icon { diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index d0906eeb..3d731d99 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -6,26 +6,24 @@ &__option { margin-top: @item-margin; padding: @item-padding / 2; - background-color: @item-color; - color: @item-color-inverted; + .item-color; border-radius: @item-border-radius; } - .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option, + .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { + .item-color-hover; + } + html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-focus; } &__label.is-disabled &__option { - background-color: @disabled; - color: @disabled-inverted; + .item-color-disabled; } &__label.is-selected &__option { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-color-selected; } &__state { diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 57d4178d..5e84fef1 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -6,25 +6,23 @@ padding-inline: @item-padding (@icon-size + (@item-padding * 2)); line-height: @body-line-height; text-align: start; - background-color: @item-color; - color: @item-color-inverted; + .item-color; + + .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { + .item-color-hover; + } - .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover, html:not(.a11y-disable-focusoutline) &:focus-visible { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-focus; } } &__btn.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + .item-color-disabled; } &__btn[aria-expanded="true"] { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-color-selected; } &__icon { @@ -42,14 +40,12 @@ .dropdown-item { padding: @item-padding; - background-color: @item-color; + .item-color; border-bottom: 1px solid @item-color-hover; - color: @item-color-inverted; + .no-touch &:hover, .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-hover; } &:focus-visible, @@ -60,7 +56,6 @@ // background-color: -webkit-focus-ring-color; // color: white; - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-color; } } diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index bc7b0725..2d51e2ea 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -1,15 +1,15 @@ .mcq-item { &__label { margin-bottom: @item-margin / 2; - background-color: @item-color; - color: @item-color-inverted; + .item-color; border-radius: @item-border-radius; - .no-touch &:not(.is-disabled):not(.is-selected):hover, + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .item-color-hover; + } + html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-focus; } .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { @@ -18,13 +18,11 @@ } &__label.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + .item-color-disabled; } &__label.is-selected { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + .item-color-selected; } &__state { diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 1482cf02..c2a20df7 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -69,6 +69,7 @@ &__inner.is-stacked &__content-item { margin-bottom: (@item-margin * 4); } + &__inner.is-stacked &__content-image { margin-bottom: @item-title-margin; } diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less index cc86f050..b89cd261 100644 --- a/less/plugins/adapt-contrib-slider/slider.less +++ b/less/plugins/adapt-contrib-slider/slider.less @@ -24,14 +24,12 @@ } &__number-selection { - background-color: @item-color; - color: @item-color-inverted; + .item-color; z-index: 5; } &__number-model-answer { - background-color: @item-color; - color: @item-color-inverted; + .item-color; z-index: 10; } From 8f165ac3b826bd86f7b6ac706a6222a56211a314 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 19 Jan 2024 17:04:04 +0000 Subject: [PATCH 33/86] Comments --- less/plugins/adapt-contrib-boxmenu/boxMenuItem.less | 1 + 1 file changed, 1 insertion(+) diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index ae44b8af..1fb5e43e 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -43,6 +43,7 @@ align-items: center; } + // ? Should we create a mixin here for consistency? &__button { background-color: @menu-item-btn-color; color: @menu-item-btn-color-inverted; From d57196571a44186d7efec68d82cf3a32c11fdfa3 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 22 Jan 2024 12:16:38 +0000 Subject: [PATCH 34/86] comments --- less/_defaults/_state-mixins.less | 2 +- less/core/drawerItem.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index ddc1dd9f..d93d9b34 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -100,7 +100,7 @@ } // UI (nav, notify, drawer) -// ? review use of single dash vs double dash for mixin names +// TODO: review use of single dash vs double dash for mixin names // ? expand nav and notify mixins to include border? // Nav UI .nav-ui-btn-color--controls() { diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 145813a3..9f36d1ce 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -23,8 +23,8 @@ } } - //? is disabled state needed? - //? disabled drawer items include locked or selected states only + // ? is disabled state needed? + // ? disabled drawer items include locked or selected states only &__item-btn.is-disabled { .drawer-item-color-locked } From e4773b514b72acc82eb14cc4f5c94b79e891231a Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 22 Jan 2024 17:26:10 +0000 Subject: [PATCH 35/86] Menu item btn mixin, control > ctrl, comments updated --- less/_defaults/_btn-mixins.less | 4 +- less/_defaults/_state-mixins.less | 37 +++++++++++++++---- less/core/button.less | 9 +---- less/core/drawer.less | 6 +-- less/core/nav.less | 4 +- less/core/notify.less | 6 +-- less/core/notifyPush.less | 6 +-- .../adapt-contrib-boxmenu/boxMenuItem.less | 14 ++----- .../hotgraphicPopup.less | 6 +-- less/plugins/adapt-contrib-tutor/tutor.less | 10 ++--- 10 files changed, 55 insertions(+), 47 deletions(-) diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less index 0603a552..85f05b67 100644 --- a/less/_defaults/_btn-mixins.less +++ b/less/_defaults/_btn-mixins.less @@ -1,9 +1,7 @@ // Notify and Drawer controls (< > x) // moved existing shared styles into single mixin // replaces .notify-btn-icon mixin -// ? could shorthand 'controls' to 'ctrl'? -// * Am happy with shorthand -.ui-btn--controls() { +.ui-btn-ctrl() { margin: @ui-btn-controls-margin; padding: @ui-btn-controls-padding; border-radius: @ui-btn-controls-border-radius; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index d93d9b34..728b077c 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -99,28 +99,49 @@ color: @btn-color-inverted-disabled; } +// Menu item +.menu-item-btn-color() { + background-color: @menu-item-btn-color; + color: @menu-item-btn-color-inverted; +} + +.menu-item-btn-color-hover() { + background-color: @menu-item-btn-color-hover; + color: @menu-item-btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.menu-item-btn-color-focus() { + background-color: @menu-item-btn-color-focus; + color: @menu-item-btn-color-inverted-focus; +} + +.menu-item-btn-color-locked() { + background-color: @menu-item-btn-color-locked; + color: @menu-item-btn-color-inverted-locked; +} + // UI (nav, notify, drawer) -// TODO: review use of single dash vs double dash for mixin names -// ? expand nav and notify mixins to include border? +// TODO expand nav and notify mixins to include border? // Nav UI -.nav-ui-btn-color--controls() { +.nav-ui-btn-color-ctrl() { background-color: @nav-icon; color: @nav-icon-inverted; } -.nav-ui-btn-color--controls-hover() { +.nav-ui-btn-color-ctrl-hover() { background-color: @nav-icon-hover; color: @nav-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } // Notify UI -.notify-ui-btn-color--controls() { +.notify-ui-btn-color-ctrl() { background-color: @notify-icon; color: @notify-icon-inverted; } -.notify-ui-btn-color--controls-hover() { +.notify-ui-btn-color-ctrl-hover() { background-color: @notify-icon-hover; color: @notify-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); @@ -159,12 +180,12 @@ } // Drawer UI -.drawer-ui-btn-color--controls() { +.drawer-ui-btn-color-ctrl() { background-color: @drawer-icon; color: @drawer-icon-inverted; } -.drawer-ui-btn-color--controls-hover() { +.drawer-ui-btn-color-ctrl-hover() { background-color: @drawer-icon-hover; color: @drawer-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); diff --git a/less/core/button.less b/less/core/button.less index b2c70e24..a5e12867 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -3,16 +3,11 @@ margin-top: @btn-margin; } - // ? Should this stay in this file? - // ? Specific font styling for text only buttons + // TODO Move generic button styling to new file &-text { .button-text; } - // ? end - // ? Should we move these styles elsewhere? - // ? A: Yes, in time these should be defined elsewhere as they are generic for - // ? either text or icon buttons. This file focuses on question buttons &-text { border-radius: @btn-border-radius; } @@ -24,7 +19,7 @@ &-icon.is-locked { cursor: not-allowed; } - // ? end + // TODO END &__action, &__feedback { diff --git a/less/core/drawer.less b/less/core/drawer.less index c863b221..14eac0e7 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -7,11 +7,11 @@ } &__btn { - .ui-btn--controls; - .drawer-ui-btn-color--controls; + .ui-btn-ctrl; + .drawer-ui-btn-color-ctrl; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .drawer-ui-btn-color--controls-hover; + .drawer-ui-btn-color-ctrl-hover; } } } diff --git a/less/core/nav.less b/less/core/nav.less index 1a22e839..f9a665dc 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -13,11 +13,11 @@ &__btn { margin: @nav-btn-margin (@nav-btn-margin / 2); padding: @nav-btn-padding-ver @nav-btn-padding-hoz; - .nav-ui-btn-color--controls; + .nav-ui-btn-color-ctrl; border-radius: @nav-btn-border-radius; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .nav-ui-btn-color--controls-hover; + .nav-ui-btn-color-ctrl-hover; } } diff --git a/less/core/notify.less b/less/core/notify.less index 56196411..bad261ef 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -72,11 +72,11 @@ // UI &__btn-icon { - .ui-btn--controls; - .notify-ui-btn-color--controls; + .ui-btn-ctrl; + .notify-ui-btn-color-ctrl; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color--controls-hover; + .notify-ui-btn-color-ctrl-hover; } } diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 02743af5..4473cf47 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -33,11 +33,11 @@ position: absolute; top: 0; right: 0; - .ui-btn--controls; - .notify-ui-btn-color--controls; + .ui-btn-ctrl; + .notify-ui-btn-color-ctrl; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color--controls-hover; + .notify-ui-btn-color-ctrl-hover; } .dir-rtl & { diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 1fb5e43e..6f0833be 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -43,26 +43,20 @@ align-items: center; } - // ? Should we create a mixin here for consistency? &__button { - background-color: @menu-item-btn-color; - color: @menu-item-btn-color-inverted; + .menu-item-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @menu-item-btn-color-hover; - color: @menu-item-btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .menu-item-btn-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - background-color: @menu-item-btn-color-focus; - color: @menu-item-btn-color-inverted-focus; + .menu-item-btn-color-focus; } } &__button.is-locked { - background-color: @menu-item-btn-color-locked; - color: @menu-item-btn-color-inverted-locked; + .menu-item-btn-color-locked; } &__status { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 00ca272f..011cb764 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -8,11 +8,11 @@ &__controls, &__close { - .ui-btn--controls; - .notify-ui-btn-color--controls; + .ui-btn-ctrl; + .notify-ui-btn-color-ctrl; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color--controls-hover; + .notify-ui-btn-color-ctrl-hover; } } diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 82d9a2e5..936da548 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -18,11 +18,11 @@ } &__btn-icon { - .ui-btn--controls; - .notify-ui-btn-color--controls; + .ui-btn-ctrl; + .notify-ui-btn-color-ctrl; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color--controls-hover; + .notify-ui-btn-color-ctrl-hover; } } @@ -56,10 +56,10 @@ } &-type-overlay &__btn-icon { - .notify-ui-btn-color--controls; + .notify-ui-btn-color-ctrl; .no-touch &:hover { - .notify-ui-btn-color--controls-hover; + .notify-ui-btn-color-ctrl-hover; } } } From 0970ecda1fbf5a2b94835fbb3542c36ffa4db675 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 22 Jan 2024 17:26:20 +0000 Subject: [PATCH 36/86] Resource drawer item mixins --- .../plugins/adapt-contrib-resources/resources.less | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index 505fd832..17425904 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -2,15 +2,12 @@ &__filter-btn { padding: @item-padding (@item-padding / 2); .resources-filter-btn; - background-color: @drawer-item; - border-bottom: 1px solid @drawer-item-hover; - border-right: 1px solid @drawer-item-hover; - color: @drawer-item-inverted; + border-bottom: 1px solid; + border-right: 1px solid; + .drawer-item-color; .no-touch &:not(.is-disabled):not(.is-selected):hover { - background-color: @drawer-item-hover; - color: @drawer-item-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .drawer-item-color-hover; } &:last-child { @@ -19,8 +16,7 @@ } &__filter-btn.is-selected { - background-color: @drawer-item-selected; - color: @drawer-item-inverted-selected; + .drawer-item-color-selected; box-shadow: inset 0 -0.625rem 0 -0.4375rem @drawer-item-selected-underline; } From 8f880e11a02aff05d0463912041d5580ba9cc8f5 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 22 Jan 2024 17:26:50 +0000 Subject: [PATCH 37/86] Typo fix --- less/core/drawerItem.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 9f36d1ce..8a8367c3 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -26,7 +26,7 @@ // ? is disabled state needed? // ? disabled drawer items include locked or selected states only &__item-btn.is-disabled { - .drawer-item-color-locked + .drawer-item-color-locked; } // aria-current="true" is used by languagePicker From 6956e5d0bc2e74eb4ad04523ff3a4feb6a1a26fd Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 22 Jan 2024 17:40:57 +0000 Subject: [PATCH 38/86] comments --- less/core/nav.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/core/nav.less b/less/core/nav.less index f9a665dc..9f6c48e5 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -15,7 +15,7 @@ padding: @nav-btn-padding-ver @nav-btn-padding-hoz; .nav-ui-btn-color-ctrl; border-radius: @nav-btn-border-radius; - + // ? should we include a focus state? .no-touch &:not(.is-disabled):not(.is-locked):hover { .nav-ui-btn-color-ctrl-hover; } From d5c5903b228a974048eb44b312e1503a2418ee5d Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 23 Jan 2024 09:14:28 +0000 Subject: [PATCH 39/86] restore @drawer-item-margin default --- less/_defaults/_spacing-config.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index d329a88d..bad75a15 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -44,7 +44,7 @@ // Drawer item // -------------------------------------------------- -@drawer-item-margin: 0.5rem; +@drawer-item-margin: 0; @drawer-item-padding-ver: @item-padding; @drawer-item-padding-hoz: @item-padding; From ff3a3cfffccc5d40623b24fb6e8acf4be8254d7b Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 23 Jan 2024 15:24:41 +0000 Subject: [PATCH 40/86] Added @nav-icon-focus and comments updated --- less/_defaults/_colors.less | 3 +++ less/_defaults/_state-mixins.less | 7 ++++++- less/core/drawerItem.less | 2 -- less/core/nav.less | 6 +++++- less/plugins/adapt-contrib-trickle/trickle.less | 6 ++---- 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 7c495dcb..1e4ba72c 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -164,6 +164,9 @@ @nav-icon-hover: darken(@nav-icon, 10%); @nav-icon-inverted-hover: @nav-icon-inverted; +@nav-icon-focus: @nav-icon-hover; +@nav-icon-inverted-focus: @nav-icon-inverted-hover; + @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @nav-progress-border: @nav-icon-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 728b077c..b2f1e250 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -122,7 +122,7 @@ } // UI (nav, notify, drawer) -// TODO expand nav and notify mixins to include border? +// TODO expand nav and notify mixins to include border // Nav UI .nav-ui-btn-color-ctrl() { background-color: @nav-icon; @@ -135,6 +135,11 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +.nav-ui-btn-color-ctrl-focus() { + background-color: @nav-icon-focus; + color: @nav-icon-inverted-focus; +} + // Notify UI .notify-ui-btn-color-ctrl() { background-color: @notify-icon; diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 8a8367c3..5400df0c 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -23,8 +23,6 @@ } } - // ? is disabled state needed? - // ? disabled drawer items include locked or selected states only &__item-btn.is-disabled { .drawer-item-color-locked; } diff --git a/less/core/nav.less b/less/core/nav.less index 9f6c48e5..75c4ffac 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -15,10 +15,14 @@ padding: @nav-btn-padding-ver @nav-btn-padding-hoz; .nav-ui-btn-color-ctrl; border-radius: @nav-btn-border-radius; - // ? should we include a focus state? + .no-touch &:not(.is-disabled):not(.is-locked):hover { .nav-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + .nav-ui-btn-color-ctrl-focus; + } } &__btn-label { diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index b895436d..d3e6562e 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -10,13 +10,11 @@ .item-ui-color-focus; } } - // ? should this be .item-ui-color-locked instead? - // ? I think we only show a disabled btn when content is steplocked - // * The button itself is in a disabled state rather than locked, not sure if that would have any impact on how we present the visual state + &__btn.is-disabled { .item-ui-color-disabled; } - + // TODO: add '&__btn.is-locked' state following Trickle PR https://github.com/adaptlearning/adapt-contrib-trickle/pull/209 &__btn-icon { display: inline-block; vertical-align: middle; From 68a2b5279778f40e70fc478d844f3800c07cf805 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Thu, 25 Jan 2024 09:11:23 +0000 Subject: [PATCH 41/86] Removed nots from focus state --- less/core/drawerItem.less | 6 +++--- less/core/nav.less | 2 +- less/plugins/adapt-contrib-hotgraphic/hotgraphic.less | 2 +- less/plugins/adapt-contrib-narrative/narrative.less | 4 ++-- less/plugins/adapt-contrib-trickle/trickle.less | 1 + 5 files changed, 8 insertions(+), 7 deletions(-) diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 05fac4d1..89977fc8 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -18,7 +18,7 @@ .drawer-item-color-hover; } - html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + html:not(.a11y-disable-focusoutline) &:focus-visible { .drawer-item-color-focus; } } @@ -37,11 +37,11 @@ .drawer-item-title; text-align: start; } - + &__item-title + &__item-body { margin-top: @drawer-title-margin; } - + &__item-body { margin-bottom: @drawer-body-margin; .drawer-item-body; diff --git a/less/core/nav.less b/less/core/nav.less index 75c4ffac..c4b3694d 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -20,7 +20,7 @@ .nav-ui-btn-color-ctrl-hover; } - html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + html:not(.a11y-disable-focusoutline) &:focus-visible { .nav-ui-btn-color-ctrl-focus; } } diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index 413d2b10..31a0081c 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -15,7 +15,7 @@ .item-ui-color-hover; } - html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + html:not(.a11y-disable-focusoutline) &:focus-visible { .item-ui-color-focus; } } diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index c2a20df7..b3423d94 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -15,7 +15,7 @@ .item-ui-color-hover; } - html:not(.a11y-disable-focusoutline) &:not(.is-disabled):not(.is-locked):focus-visible { + html:not(.a11y-disable-focusoutline) &:focus-visible { .item-ui-color-focus; } } @@ -53,7 +53,7 @@ .item-ui-color-hover; } - html:not(.a11y-disable-focusoutline) &__strapline-btn:not(.is-disabled):not(.is-locked):focus-visible { + html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { .item-ui-color-focus; } diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index d3e6562e..d4c85658 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -14,6 +14,7 @@ &__btn.is-disabled { .item-ui-color-disabled; } + // TODO: add '&__btn.is-locked' state following Trickle PR https://github.com/adaptlearning/adapt-contrib-trickle/pull/209 &__btn-icon { display: inline-block; From 100acfa1fe36bfd44fd6693a7719d6e581a9c62a Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Thu, 25 Jan 2024 10:17:54 +0000 Subject: [PATCH 42/86] Added missing focus states --- less/_defaults/_colors.less | 6 ++++++ less/_defaults/_state-mixins.less | 10 ++++++++++ less/core/drawer.less | 4 ++++ less/core/notify.less | 4 ++++ .../adapt-contrib-hotgraphic/hotgraphicPopup.less | 4 ++++ less/plugins/adapt-contrib-resources/resources.less | 4 ++++ less/plugins/adapt-contrib-tutor/tutor.less | 12 ++++++++++++ 7 files changed, 44 insertions(+) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 1e4ba72c..df313b4d 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -191,6 +191,9 @@ @notify-icon-hover: darken(@notify-icon, 10%); @notify-icon-inverted-hover: @notify-icon-inverted; +@notify-icon-focus: @notify-icon-hover; +@notify-icon-inverted-focus: @notify-icon-inverted-hover; + // Button @notify-btn: @btn-color; @notify-btn-inverted: @btn-color-inverted; @@ -226,6 +229,9 @@ @drawer-icon-hover: darken(@drawer-icon, 10%); @drawer-icon-inverted-hover: @drawer-icon-inverted; +@drawer-icon-focus: @drawer-icon-hover; +@drawer-icon-inverted-focus: @drawer-icon-inverted-hover; + // Item @drawer-item: @drawer; @drawer-item-inverted: @drawer-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index b2f1e250..8f568a77 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -152,6 +152,11 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +.notify-ui-btn-color-ctrl-focus() { + background-color: @notify-icon-focus; + color: @notify-icon-inverted-focus; +} + // Notify button .notify-btn-color() { background-color: @notify-btn; @@ -196,6 +201,11 @@ .transition(background-color @duration ease-in, color @duration ease-in;); } +.drawer-ui-btn-color-ctrl-focus() { + background-color: @drawer-icon-focus; + color: @drawer-icon-inverted-focus; +} + // Drawer item .drawer-item-color() { background-color: @drawer-item; diff --git a/less/core/drawer.less b/less/core/drawer.less index 14eac0e7..ab96a100 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -13,5 +13,9 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-ui-btn-color-ctrl-focus; + } } } diff --git a/less/core/notify.less b/less/core/notify.less index bad261ef..80632ab9 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -78,6 +78,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-color-ctrl-focus; + } } &__close-btn { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 011cb764..d167e610 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -14,6 +14,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-color-ctrl-focus; + } } &__item-title { diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index 17425904..5ebc18a0 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -10,6 +10,10 @@ .drawer-item-color-hover; } + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-focus; + } + &:last-child { border-right: none; } diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 936da548..5b77f963 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -24,6 +24,10 @@ .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-color-ctrl-focus; + } } // overlay @@ -53,6 +57,10 @@ .no-touch &:hover { .notify-btn-color-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } } &-type-overlay &__btn-icon { @@ -61,5 +69,9 @@ .no-touch &:hover { .notify-ui-btn-color-ctrl-hover; } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-color-ctrl-focus; + } } } From 0ed9e97eeae1a9255001e307711a37a2e431ac9a Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Thu, 25 Jan 2024 12:23:23 +0000 Subject: [PATCH 43/86] Matching dropdown updates --- less/plugins/adapt-contrib-matching/dropdown.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 5e84fef1..1a232cac 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -43,7 +43,6 @@ .item-color; border-bottom: 1px solid @item-color-hover; - .no-touch &:hover, .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { .item-color-hover; } @@ -56,6 +55,6 @@ // background-color: -webkit-focus-ring-color; // color: white; - .item-color; + .item-color-selected; } } From 1fc4e702c2e25342a12ebdf5379d4b28060cac0b Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Thu, 25 Jan 2024 15:43:37 +0000 Subject: [PATCH 44/86] Added notify push icon focus state --- less/core/notifyPush.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 4473cf47..90707bd6 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -40,6 +40,10 @@ .notify-ui-btn-color-ctrl-hover; } + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-color-ctrl-focus; + } + .dir-rtl & { right: auto; left: 0; From f38a49bd9cefaf31692507987886b85061c78807 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Tue, 12 Mar 2024 10:38:46 +0000 Subject: [PATCH 45/86] trickle btn locked state added following PR merge, 'is-locked' btn class added - https://github.com/adaptlearning/adapt-contrib-trickle/pull/209 --- less/plugins/adapt-contrib-trickle/trickle.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index d4c85658..07a293a8 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -15,7 +15,10 @@ .item-ui-color-disabled; } - // TODO: add '&__btn.is-locked' state following Trickle PR https://github.com/adaptlearning/adapt-contrib-trickle/pull/209 + &__btn.is-locked { + .item-ui-color-locked; + } + &__btn-icon { display: inline-block; vertical-align: middle; From b792f4f00e72f3e8e6b90da8580a96a9ccd02b69 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 18 Mar 2024 15:26:30 +0000 Subject: [PATCH 46/86] Button expanded mixin test --- less/_defaults/_colors.less | 58 ++++++++++- less/_defaults/_state-mixins.less | 167 ++++++++++++++++++++++++++++++ less/core/button.less | 8 +- 3 files changed, 225 insertions(+), 8 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index df313b4d..272e2a77 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -2,7 +2,7 @@ // -------------------------------------------------- @blue: #117F93; @blueDark: #263944; -@grey: #9096A0; +@grey: #DDDDDD; @greyDark: #4D4D4D; @greyLight: #f9f9f9; @@ -48,10 +48,15 @@ @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; +// TODO // aka @item-color-visited but avoiding breaking chnage // @visited is only used by presentation components @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; +// + +@item-color-visited: @visited; +@item-color-inverted-visited: @visited-inverted; @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; @@ -83,6 +88,7 @@ // Content Buttons // -------------------------------------------------- +// Filled @btn-color: @greyDark; @btn-color-inverted: @white; @@ -101,6 +107,50 @@ @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; +// Outline +@btn-color-outline: @btn-color-inverted; +@btn-color-outline-inverted: @btn-color; +@btn-color-outline-box-shadow: @btn-color; + +@btn-color-outline-hover: darken(@btn-color, 10%); +@btn-color-outline-inverted-hover: @btn-color-inverted; +@btn-color-outline-box-shadow-hover: darken(@btn-color, 10%); + +@btn-color-outline-focus: @btn-color-hover; +@btn-color-outline-inverted-focus: @btn-color-inverted-hover; +@btn-color-outline-box-shadow-focus: @btn-color-hover; + +@btn-color-outline-selected: darken(@btn-color, 20%); +@btn-color-outline-inverted-selected: @btn-color-inverted; +@btn-color-outline-box-shadow-selected: darken(@btn-color, 20%); + +@btn-color-outline-locked: @btn-color-outline; +@btn-color-outline-inverted-locked: @disabled; +@btn-color-outline-box-shadow-locked: @disabled; + +@btn-color-outline-disabled: @btn-color-outline; +@btn-color-outline-inverted-disabled: @disabled; +@btn-color-outline-box-shadow-disabled: @disabled; + +// Plain +@btn-color-plain: transparent; +@btn-color-plain-inverted: @btn-color; + +@btn-color-plain-hover: transparent; +@btn-color-plain-inverted-hover: darken(@btn-color, 10%); + +@btn-color-plain-focus: transparent; +@btn-color-plain-inverted-focus: @btn-color-hover; + +@btn-color-plain-selected: transparent; +@btn-color-plain-inverted-selected: @btn-color-inverted; + +@btn-color-plain-locked: transparent; +@btn-color-plain-inverted-locked: @disabled; + +@btn-color-plain-disabled: transparent; +@btn-color-plain-inverted-disabled: @disabled; + // UI (global default for nav, notify, drawer) // -------------------------------------------------- @ui-color: @white; @@ -108,7 +158,7 @@ // Disabled - question components // -------------------------------------------------- -@disabled: #DDDDDD; +@disabled: @grey; @disabled-inverted: @black; // Validation states - question marking @@ -121,9 +171,9 @@ // Progress // -------------------------------------------------- -@progress: @grey; +@progress: @greyDark; @progress-inverted: @white; -@progress-border: @grey; +@progress-border: @greyDark; // Menu // -------------------------------------------------- diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 8f568a77..692519a0 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -99,6 +99,173 @@ color: @btn-color-inverted-disabled; } +@button-states-single: + item-color, + btn-color; + +each(@button-states-single, { + .@{value} { + background-color: @@value; + color: ~'@{@{value}-inverted}'; + } + + .@{value}-hover { + background-color: ~'@{@{value}-hover}'; + color: ~'@{@{value}-inverted-hover}'; + } + + .@{value}-focus { + background-color: ~'@{@{value}-focus}'; + color: ~'@{@{value}-inverted-focus}'; + } + + .@{value}-selected { + background-color: ~'@{@{value}-selected}'; + color: ~'@{@{value}-inverted-selected}'; + } + + & when not (@value = btn-color) { + // & when not (@value = btn-color) or (@value = btn-color-outline) { + .@{value}-visited { + background-color: ~'@{@{value}-visited}'; + color: ~'@{@{value}-inverted-visited}'; + } + } + + & when not (@value = item-color) { + .@{value}-locked { + background-color: ~'@{@{value}-locked}'; + color: ~'@{@{value}-inverted-locked}'; + } + } + + .@{value}-disabled { + background-color: ~'@{@{value}-disabled}'; + color: ~'@{@{value}-inverted-disabled}'; + } +}); + +// @button-states-multi: { +// btn-color: btn-color-inverted; +// } + +// each(@button-states-multi, { +// .@{key} { +// background-color: @@key; +// color: @@value; +// } +// }); + + +// Filled +.btn-color-filled() { + background-color: @btn-color; + color: @btn-color-inverted; +} + +.btn-color-filled-hover() { + background-color: @btn-color-hover; + color: @btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-filled-focus() { + background-color: @btn-color-focus; + color: @btn-color-inverted-focus; +} + +.btn-color-filled-selected() { + background-color: @btn-color-selected; + color: @btn-color-inverted-selected; +} + +.btn-color-filled-locked() { + background-color: @btn-color-locked; + color: @btn-color-inverted-locked; +} + +.btn-color-filled-disabled() { + background-color: @btn-color-disabled; + color: @btn-color-inverted-disabled; +} + +// Outline +.btn-color-outline() { + background-color: @btn-color-outline; + color: @btn-color-outline-inverted; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow inset; +} + +.btn-color-outline-hover() { + background-color: @btn-color-outline-hover; + color: @btn-color-outline-inverted-hover; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.btn-color-outline-focus() { + background-color: @btn-color-outline-focus; + color: @btn-color-outline-inverted-focus; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-focus inset; +} + +.btn-color-outline-selected() { + background-color: @btn-color-outline-selected; + color: @btn-color-outline-inverted-selected; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-selected inset; +} + +.btn-color-outline-locked() { + background-color: @btn-color-outline-locked; + color: @btn-color-outline-inverted-locked; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-locked inset; +} + +.btn-color-outline-disabled() { + background-color: @btn-color-outline-disabled; + color: @btn-color-outline-inverted-disabled; + box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-disabled inset; +} + +// Plain +.btn-color-plain() { + background-color: @btn-color-plain; + color: @btn-color-plain-inverted; +} + +.btn-color-plain-hover() { + background-color: @btn-color-plain-hover; + color: @btn-color-plain-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-plain-focus() { + background-color: @btn-color-plain-focus; + color: @btn-color-plain-inverted-focus; +} + +.btn-color-plain-selected() { + background-color: @btn-color-plain-selected; + color: @btn-color-plain-inverted-selected; +} + +.btn-color-plain-locked() { + background-color: @btn-color-plain-locked; + color: @btn-color-plain-inverted-locked; +} + +.btn-color-plain-disabled() { + background-color: @btn-color-plain-disabled; + color: @btn-color-plain-inverted-disabled; +} + + + + + + + + // Menu item .menu-item-btn-color() { background-color: @menu-item-btn-color; diff --git a/less/core/button.less b/less/core/button.less index a5e12867..d6b12ef8 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -23,20 +23,20 @@ &__action, &__feedback { - .btn-color; + .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; + .btn-color-outline-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; + .btn-color-outline-focus; } } &__action.is-disabled, &__feedback.is-disabled { - .btn-color-disabled; + .btn-color-outline-disabled; } &__marking { From 7662a70d3fea511bd4b226cc5fd0d77852b3710b Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 22 Mar 2024 12:23:11 +0000 Subject: [PATCH 47/86] Buttons fill / outline / plain update --- less/_defaults/_colors.less | 55 ++--------- less/_defaults/_state-mixins.less | 147 ++++++------------------------ less/core/button.less | 26 +++++- 3 files changed, 57 insertions(+), 171 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 272e2a77..31e14e2d 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -104,63 +104,24 @@ @btn-color-locked: @disabled; @btn-color-inverted-locked: @disabled-inverted; +// TODO +// aka @btn-color-disabled but avoiding breaking chnage +@disabled: @grey; +@disabled-inverted: @black; +// + @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; // Outline -@btn-color-outline: @btn-color-inverted; -@btn-color-outline-inverted: @btn-color; -@btn-color-outline-box-shadow: @btn-color; - -@btn-color-outline-hover: darken(@btn-color, 10%); -@btn-color-outline-inverted-hover: @btn-color-inverted; -@btn-color-outline-box-shadow-hover: darken(@btn-color, 10%); - -@btn-color-outline-focus: @btn-color-hover; -@btn-color-outline-inverted-focus: @btn-color-inverted-hover; -@btn-color-outline-box-shadow-focus: @btn-color-hover; - -@btn-color-outline-selected: darken(@btn-color, 20%); -@btn-color-outline-inverted-selected: @btn-color-inverted; -@btn-color-outline-box-shadow-selected: darken(@btn-color, 20%); - -@btn-color-outline-locked: @btn-color-outline; -@btn-color-outline-inverted-locked: @disabled; -@btn-color-outline-box-shadow-locked: @disabled; - -@btn-color-outline-disabled: @btn-color-outline; -@btn-color-outline-inverted-disabled: @disabled; -@btn-color-outline-box-shadow-disabled: @disabled; - -// Plain -@btn-color-plain: transparent; -@btn-color-plain-inverted: @btn-color; - -@btn-color-plain-hover: transparent; -@btn-color-plain-inverted-hover: darken(@btn-color, 10%); - -@btn-color-plain-focus: transparent; -@btn-color-plain-inverted-focus: @btn-color-hover; - -@btn-color-plain-selected: transparent; -@btn-color-plain-inverted-selected: @btn-color-inverted; - -@btn-color-plain-locked: transparent; -@btn-color-plain-inverted-locked: @disabled; - -@btn-color-plain-disabled: transparent; -@btn-color-plain-inverted-disabled: @disabled; +@btn-color-border-width: 1px; +@btn-color-border-color: @btn-color; // UI (global default for nav, notify, drawer) // -------------------------------------------------- @ui-color: @white; @ui-color-inverted: @greyDark; -// Disabled - question components -// -------------------------------------------------- -@disabled: @grey; -@disabled-inverted: @black; - // Validation states - question marking // -------------------------------------------------- @validation-success: #065f28; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 692519a0..38e4c0c2 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -68,6 +68,8 @@ } // Content buttons +// Default +// Filled .btn-color() { background-color: @btn-color; color: @btn-color-inverted; @@ -99,164 +101,69 @@ color: @btn-color-inverted-disabled; } -@button-states-single: - item-color, - btn-color; - -each(@button-states-single, { - .@{value} { - background-color: @@value; - color: ~'@{@{value}-inverted}'; - } - - .@{value}-hover { - background-color: ~'@{@{value}-hover}'; - color: ~'@{@{value}-inverted-hover}'; - } - - .@{value}-focus { - background-color: ~'@{@{value}-focus}'; - color: ~'@{@{value}-inverted-focus}'; - } - - .@{value}-selected { - background-color: ~'@{@{value}-selected}'; - color: ~'@{@{value}-inverted-selected}'; - } - - & when not (@value = btn-color) { - // & when not (@value = btn-color) or (@value = btn-color-outline) { - .@{value}-visited { - background-color: ~'@{@{value}-visited}'; - color: ~'@{@{value}-inverted-visited}'; - } - } - - & when not (@value = item-color) { - .@{value}-locked { - background-color: ~'@{@{value}-locked}'; - color: ~'@{@{value}-inverted-locked}'; - } - } - - .@{value}-disabled { - background-color: ~'@{@{value}-disabled}'; - color: ~'@{@{value}-inverted-disabled}'; - } -}); - -// @button-states-multi: { -// btn-color: btn-color-inverted; -// } - -// each(@button-states-multi, { -// .@{key} { -// background-color: @@key; -// color: @@value; -// } -// }); - - -// Filled -.btn-color-filled() { - background-color: @btn-color; - color: @btn-color-inverted; -} - -.btn-color-filled-hover() { - background-color: @btn-color-hover; - color: @btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.btn-color-filled-focus() { - background-color: @btn-color-focus; - color: @btn-color-inverted-focus; -} - -.btn-color-filled-selected() { - background-color: @btn-color-selected; - color: @btn-color-inverted-selected; -} - -.btn-color-filled-locked() { - background-color: @btn-color-locked; - color: @btn-color-inverted-locked; -} - -.btn-color-filled-disabled() { - background-color: @btn-color-disabled; - color: @btn-color-inverted-disabled; -} - // Outline .btn-color-outline() { - background-color: @btn-color-outline; - color: @btn-color-outline-inverted; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow inset; + background-color: @btn-color-inverted; + color: @btn-color; + box-shadow: 0 0 0 @btn-color-border-width @btn-color inset; } .btn-color-outline-hover() { - background-color: @btn-color-outline-hover; - color: @btn-color-outline-inverted-hover; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-hover inset; + .btn-color-hover; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .btn-color-outline-focus() { - background-color: @btn-color-outline-focus; - color: @btn-color-outline-inverted-focus; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-focus inset; + .btn-color-focus; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset; } .btn-color-outline-selected() { - background-color: @btn-color-outline-selected; - color: @btn-color-outline-inverted-selected; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-selected inset; + .btn-color-selected; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset; } .btn-color-outline-locked() { - background-color: @btn-color-outline-locked; - color: @btn-color-outline-inverted-locked; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-locked inset; + .btn-color-locked; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset; } .btn-color-outline-disabled() { - background-color: @btn-color-outline-disabled; - color: @btn-color-outline-inverted-disabled; - box-shadow: 0 0 0 1px @btn-color-outline-box-shadow-disabled inset; + .btn-color-disabled; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset; } // Plain .btn-color-plain() { - background-color: @btn-color-plain; - color: @btn-color-plain-inverted; + background-color: transparent; + color: @btn-color; } .btn-color-plain-hover() { - background-color: @btn-color-plain-hover; - color: @btn-color-plain-inverted-hover; + background-color: transparent; + color: @btn-color-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } .btn-color-plain-focus() { - background-color: @btn-color-plain-focus; - color: @btn-color-plain-inverted-focus; + background-color: transparent; + color: @btn-color-focus; } .btn-color-plain-selected() { - background-color: @btn-color-plain-selected; - color: @btn-color-plain-inverted-selected; + background-color: transparent; + color: @btn-color-selected; } .btn-color-plain-locked() { - background-color: @btn-color-plain-locked; - color: @btn-color-plain-inverted-locked; + background-color: transparent; + color: @btn-color-locked; } .btn-color-plain-disabled() { - background-color: @btn-color-plain-disabled; - color: @btn-color-plain-inverted-disabled; + background-color: transparent; + color: @btn-color-disabled; } diff --git a/less/core/button.less b/less/core/button.less index d6b12ef8..901aca80 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -21,8 +21,10 @@ } // TODO END - &__action, - &__feedback { + // TODO + // undo overrides + // currently implemented for testing purposes + &__action { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -34,11 +36,27 @@ } } - &__action.is-disabled, - &__feedback.is-disabled { + &__feedback { + .btn-color-plain; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-plain-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-plain-focus; + } + } + + &__action.is-disabled { .btn-color-outline-disabled; } + &__feedback.is-disabled { + .btn-color-plain-disabled; + } + // end + &__marking { padding: @item-padding * 0.75; border-radius: 50%; From 2efbabf96d5acc8715c59aad5cfa7e664d3a45e6 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 12 Jun 2024 11:52:19 +0100 Subject: [PATCH 48/86] Added item-color-outline mixins --- less/_defaults/_state-mixins.less | 46 +++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 38e4c0c2..e8386dd4 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -30,6 +30,43 @@ color: @item-color-inverted-disabled; } +// Outline +.item-color-outline() { + background-color: @item-color-inverted; + color: @item-color; + box-shadow: 0 0 0 @item-color-border-width @item-color inset; +} + +.item-color-outline-hover() { + .item-color-hover; + box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-color-outline-focus() { + .item-color-focus; + box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset; +} + +.item-color-outline-selected() { + .item-color-selected; + box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset; +} + +.item-color-outline-visited() { + .item-color-visited; + box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset; +} + +.item-color-outline-disabled() { + .item-color-disabled; + box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; +} + + + + + // Content item ui button .item-ui-color() { background-color: @item-ui-color; @@ -68,8 +105,7 @@ } // Content buttons -// Default -// Filled +// Default - Filled .btn-color() { background-color: @btn-color; color: @btn-color-inverted; @@ -110,6 +146,7 @@ .btn-color-outline-hover() { .btn-color-hover; + background-color: red; box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } @@ -170,9 +207,6 @@ - - - // Menu item .menu-item-btn-color() { background-color: @menu-item-btn-color; @@ -196,7 +230,7 @@ } // UI (nav, notify, drawer) -// TODO expand nav and notify mixins to include border +// ! TODO expand nav and notify mixins to include border // Nav UI .nav-ui-btn-color-ctrl() { background-color: @nav-icon; From fc1e00815b7e0a04e1b0e0ef79242de7bc1d9bb6 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 12 Jun 2024 14:32:58 +0100 Subject: [PATCH 49/86] btn styles added to state mixins - outline and plain styles added to existing mixins still tbc - TODO and query comments added - border width and color vars added --- less/_defaults/_colors.less | 14 ++ less/_defaults/_state-mixins.less | 250 +++++++++++++++++++++++++++++- 2 files changed, 260 insertions(+), 4 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index fb76cdec..3e3eaaba 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -86,6 +86,10 @@ @item-ui-color-disabled: @disabled; @item-ui-color-inverted-disabled: @disabled-inverted; +// Outline +@item-ui-color-border-width: 1px; +@item-ui-color-border-color: @item-ui-color; + // Content Buttons // -------------------------------------------------- // Filled @@ -164,6 +168,10 @@ @menu-item-btn-color-locked: @item-ui-color-locked; @menu-item-btn-color-inverted-locked: @item-ui-color-inverted-locked; +// Outline +@menu-item-btn-color-border-width: 1px; +@menu-item-btn-color-border-color: @menu-item-btn-color; + // Navigation // -------------------------------------------------- @nav: @ui-color; @@ -179,6 +187,9 @@ @nav-icon-focus: @nav-icon-hover; @nav-icon-inverted-focus: @nav-icon-inverted-hover; +@nav-icon-border-width: 1px; +@nav-icon-border-color: @nav-icon; + @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @nav-progress-border: @nav-icon-inverted; @@ -206,6 +217,9 @@ @notify-icon-focus: @notify-icon-hover; @notify-icon-inverted-focus: @notify-icon-inverted-hover; +@notify-icon-border-width: 1px; +@notify-icon-border-color: @notify-icon; + // Button @notify-btn: @btn-color; @notify-btn-inverted: @btn-color-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index e8386dd4..97825d69 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -1,4 +1,7 @@ +// TODO separate mixins into separate 'button type' files + // Content item +// Default - Filled .item-color() { background-color: @item-color; color: @item-color-inverted; @@ -63,11 +66,42 @@ box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; } +// Plain +// ? do we need to include the duplicate styles e.g. 'background-color: transparent' applies to all? +.item-color-plain() { + background-color: transparent; + color: @item-color; +} + +.item-color-plain-hover() { + background-color: transparent; + color: @item-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-color-plain-focus() { + background-color: transparent; + color: @item-color-focus; +} +.item-color-plain-selected() { + background-color: transparent; + color: @item-color-selected; +} + +.item-color-plain-locked() { + background-color: transparent; + color: @item-color-locked; +} +.item-color-plain-disabled() { + background-color: transparent; + color: @item-color-disabled; +} // Content item ui button +// Default - Filled .item-ui-color() { background-color: @item-ui-color; color: @item-ui-color-inverted; @@ -104,6 +138,72 @@ color: @item-ui-color-inverted-disabled; } +// Outline +.item-ui-color-outline() { + background-color: @item-ui-color-inverted; + color: @item-ui-color; + box-shadow: 0 0 0 @item-ui-color-border-width @item-color inset; +} + +.item-ui-color-outline-hover() { + .item-ui-color-hover; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-ui-color-outline-focus() { + .item-ui-color-focus; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-focus inset; +} + +.item-ui-color-outline-selected() { + .item-ui-color-selected; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-selected inset; +} + +.item-ui-color-outline-visited() { + .item-ui-color-visited; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-visited inset; +} + +.item-ui-color-outline-disabled() { + .item-ui-color-disabled; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-disabled inset; +} + +// Plain +.item-ui-color-plain() { + background-color: transparent; + color: @item-ui-color; +} + +.item-ui-color-plain-hover() { + background-color: transparent; + color: @item-ui-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-ui-color-plain-focus() { + background-color: transparent; + color: @item-ui-color-focus; +} + +.item-ui-color-plain-selected() { + background-color: transparent; + color: @item-ui-color-selected; +} + +.item-ui-color-plain-locked() { + background-color: transparent; + color: @item-ui-color-locked; +} + +.item-ui-color-plain-disabled() { + background-color: transparent; + color: @item-ui-color-disabled; +} + + // Content buttons // Default - Filled .btn-color() { @@ -146,7 +246,6 @@ .btn-color-outline-hover() { .btn-color-hover; - background-color: red; box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } @@ -204,10 +303,8 @@ } - - - // Menu item +// Default - Filled .menu-item-btn-color() { background-color: @menu-item-btn-color; color: @menu-item-btn-color-inverted; @@ -229,9 +326,78 @@ color: @menu-item-btn-color-inverted-locked; } +// Outline +.menu-item-btn-color-outline() { + background-color: @menu-item-btn-color-inverted; + color: @menu-item-btn-color; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @btn-color inset; +} + +.menu-item-btn-color-outline-hover() { + .menu-item-btn-color-hover; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.menu-item-btn-color-outline-focus() { + .menu-item-btn-color-focus; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-focus inset; +} + +.menu-item-btn-color-outline-selected() { + .menu-item-btn-color-selected; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-selected inset; +} + +.menu-item-btn-color-outline-locked() { + .menu-item-btn-color-locked; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-locked inset; +} + +.menu-item-btn-color-outline-disabled() { + .menu-item-btn-color-disabled; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-disabled inset; +} + +// Plain +.menu-item-btn-color-plain() { + background-color: transparent; + color: @menu-item-btn-color; +} + +.menu-item-btn-color-plain-hover() { + background-color: transparent; + color: @menu-item-btn-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.menu-item-btn-color-plain-focus() { + background-color: transparent; + color: @menu-item-btn-color-focus; +} + +.menu-item-btn-color-plain-selected() { + background-color: transparent; + color: @menu-item-btn-color-selected; +} + +.menu-item-btn-color-plain-locked() { + background-color: transparent; + color: @menu-item-btn-color-locked; +} + +.menu-item-btn-color-plain-disabled() { + background-color: transparent; + color: @menu-item-btn-color-disabled; +} + + // UI (nav, notify, drawer) // ! TODO expand nav and notify mixins to include border +// ? should we change nav ui mixins to 'ui-btn-ctrl-color' for consistency with other color variable naming +// and consistency with .ui-btn-ctrl; // Nav UI +// Default - Filled .nav-ui-btn-color-ctrl() { background-color: @nav-icon; color: @nav-icon-inverted; @@ -248,7 +414,46 @@ color: @nav-icon-inverted-focus; } +// Outline +// TODO need to invert .pagelevelprogress__indicator border color +.nav-ui-btn-color-ctrl-outline() { + background-color: @nav-icon-inverted; + color: @nav-icon; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; +} + +.nav-ui-btn-color-ctrl-outline-hover() { + .nav-ui-btn-color-ctrl-hover; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.nav-ui-btn-color-ctrl-outline-focus() { + .nav-ui-btn-color-ctrl-focus; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; +} + +// Plain +.nav-ui-btn-color-ctrl-plain() { + background-color: transparent; + color: @nav-icon; +} + +.nav-ui-btn-color-ctrl-plain-hover() { + background-color: transparent; + color: @nav-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.nav-ui-btn-color-ctrl-plain-focus() { + background-color: transparent; + color: @nav-icon-focus; +} + + // Notify UI +// TODO needs disabled states e.g. Hotgraphic controls for first/last item +// Default - Filled .notify-ui-btn-color-ctrl() { background-color: @notify-icon; color: @notify-icon-inverted; @@ -265,6 +470,43 @@ color: @notify-icon-inverted-focus; } +// Outline +.notify-ui-btn-color-ctrl-outline() { + background-color: @notify-icon; + color: @notify-icon-inverted; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-inverted inset; +} + +.notify-ui-btn-color-ctrl-outline-hover() { + .notify-ui-btn-color-ctrl-hover; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-ui-btn-color-ctrl-outline-focus() { + .notify-ui-btn-color-ctrl-focus; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon inset; +} + +// Plain +.notify-ui-btn-color-ctrl-plain() { + background-color: transparent; + color: @notify-icon-inverted; +} + +.notify-ui-btn-color-ctrl-plain-hover() { + background-color: transparent; + color: @notify-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-ui-btn-color-ctrl-plain-focus() { + background-color: transparent; + color: @notify-icon-focus; +} + + + // Notify button .notify-btn-color() { background-color: @notify-btn; From 1690fd30d865a6c15fc7564b0546ea266a3157d0 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 12 Jun 2024 16:35:12 +0100 Subject: [PATCH 50/86] btn styles added to state mixins - outline and plain styles added to existing mixins - border width and color vars added --- less/_defaults/_colors.less | 8 ++ less/_defaults/_state-mixins.less | 149 ++++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 3e3eaaba..2e89411f 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -87,6 +87,7 @@ @item-ui-color-inverted-disabled: @disabled-inverted; // Outline +// ? move '-border-width' vars to _spacing-config.less ? @item-ui-color-border-width: 1px; @item-ui-color-border-color: @item-ui-color; @@ -239,6 +240,10 @@ @notify-btn-disabled: @btn-color-disabled; @notify-btn-inverted-disabled: @btn-color-inverted-disabled; +// Outline +@notify-btn-border-width: 1px; +@notify-btn-border-color: @notify-btn; + // Drawer // -------------------------------------------------- @drawer: @ui-color; @@ -258,6 +263,9 @@ @drawer-icon-focus: @drawer-icon-hover; @drawer-icon-inverted-focus: @drawer-icon-inverted-hover; +@drawer-icon-border-width: 1px; +@drawer-icon-border-color: @item-ui-color; + // Item @drawer-item: @drawer; @drawer-item-inverted: @drawer-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 97825d69..f59235fb 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -508,6 +508,7 @@ // Notify button +// Default - Filled .notify-btn-color() { background-color: @notify-btn; color: @notify-btn-inverted; @@ -539,7 +540,74 @@ color: @notify-btn-inverted-disabled; } +// Outline +.notify-btn-color-outline() { + background-color: @notify-btn-inverted; + color: @notify-btn; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset; +} + +.notify-btn-color-outline-hover() { + .notify-btn-color-hover; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-btn-color-outline-focus() { + .notify-btn-color-focus; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-focus inset; +} + +.notify-btn-color-outline-selected() { + .notify-btn-color-selected; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-selected inset; +} + +.notify-btn-color-outline-locked() { + .notify-btn-color-locked; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-locked inset; +} + +.notify-btn-color-outline-disabled() { + .notify-btn-color-disabled; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset; +} + +// Plain +.notify-btn-color-plain() { + background-color: transparent; + color: @notify-btn; +} + +.notify-btn-color-plain-hover() { + background-color: transparent; + color: @notify-btn-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-btn-color-plain-focus() { + background-color: transparent; + color: @notify-btn-focus; +} + +.notify-btn-color-plain-selected() { + background-color: transparent; + color: @notify-btn-selected; +} + +.notify-btn-color-plain-locked() { + background-color: transparent; + color: @notify-btn-locked; +} + +.notify-btn-color-plain-disabled() { + background-color: transparent; + color: @notify-btn-disabled; +} + + // Drawer UI +// Default - Filled .drawer-ui-btn-color-ctrl() { background-color: @drawer-icon; color: @drawer-icon-inverted; @@ -556,7 +624,43 @@ color: @drawer-icon-inverted-focus; } +// Outline +.drawer-ui-btn-color-ctrl-outline() { + background-color: @drawer-icon; + color: @drawer-icon-inverted; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-inverted inset; +} + +.drawer-ui-btn-color-ctrl-outline-hover() { + .drawer-ui-btn-color-ctrl-hover; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-ui-btn-color-ctrl-outline-focus() { + .drawer-ui-btn-color-ctrl-focus; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon inset; +} + +// Plain +.drawer-ui-btn-color-ctrl-plain() { + background-color: transparent; + color: @drawer-icon-inverted; +} + +.drawer-ui-btn-color-ctrl-plain-hover() { + background-color: transparent; + color: @drawer-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-ui-btn-color-ctrl-plain-focus() { + background-color: transparent; + color: @drawer-icon-focus; +} + // Drawer item +// Default - Filled .drawer-item-color() { background-color: @drawer-item; color: @drawer-item-inverted; @@ -587,3 +691,48 @@ color: @drawer-item-inverted-selected; border-color: @drawer-item-hover; } + +// Outline +.drawer-item-color-outline() { + background-color: @drawer-item-inverted; + color: @drawer-item; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset; +} + +.drawer-item-color-outline-hover() { + .drawer-item-color-hover; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-item-color-outline-focus() { + .drawer-item-color-focus; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset; +} + +.drawer-item-color-outline-selected() { + .drawer-item-color-selected; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset; +} + +// Plain +.drawer-item-color-plain() { + background-color: transparent; + color: @drawer-item; +} + +.drawer-item-color-plain-hover() { + background-color: transparent; + color: @drawer-item-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.drawer-item-color-plain-focus() { + background-color: transparent; + color: @drawer-item-focus; +} + +.drawer-item-color-plain-selected() { + background-color: transparent; + color: @drawer-item-selected; +} \ No newline at end of file From 810935e32881a351e83aad75fd72c6c276cc10e8 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 12 Jun 2024 16:49:56 +0100 Subject: [PATCH 51/86] notify ui disabled state added ...used for Hotgraphic controls first/last item --- less/_defaults/_colors.less | 3 +++ less/_defaults/_state-mixins.less | 7 +++++-- less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 2e89411f..a6e563d8 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -218,6 +218,9 @@ @notify-icon-focus: @notify-icon-hover; @notify-icon-inverted-focus: @notify-icon-inverted-hover; +@notify-icon-disabled: @disabled; +@notify-icon-inverted-disabled: @disabled-inverted; + @notify-icon-border-width: 1px; @notify-icon-border-color: @notify-icon; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index f59235fb..43a6e269 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -393,7 +393,6 @@ // UI (nav, notify, drawer) -// ! TODO expand nav and notify mixins to include border // ? should we change nav ui mixins to 'ui-btn-ctrl-color' for consistency with other color variable naming // and consistency with .ui-btn-ctrl; // Nav UI @@ -452,7 +451,6 @@ // Notify UI -// TODO needs disabled states e.g. Hotgraphic controls for first/last item // Default - Filled .notify-ui-btn-color-ctrl() { background-color: @notify-icon; @@ -470,6 +468,11 @@ color: @notify-icon-inverted-focus; } +.notify-ui-btn-color-ctrl-disabled() { + background-color: @notify-icon-disabled; + color: @notify-icon-inverted-disabled; +} + // Outline .notify-ui-btn-color-ctrl-outline() { background-color: @notify-icon; diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index d167e610..2f4da63d 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -18,6 +18,10 @@ html:not(.a11y-disable-focusoutline) &:focus-visible { .notify-ui-btn-color-ctrl-focus; } + + &.is-disabled { + .notify-ui-btn-color-ctrl-disabled; + } } &__item-title { From 2c5763988681c82c5e29ff991b54c263027a5da2 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 15:32:55 +0100 Subject: [PATCH 52/86] btn outline mixin color fixes --- less/_defaults/_colors.less | 2 ++ less/_defaults/_state-mixins.less | 9 ++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index a6e563d8..a5efc0ef 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -89,6 +89,8 @@ // Outline // ? move '-border-width' vars to _spacing-config.less ? @item-ui-color-border-width: 1px; +// ? is this needed? +// @item-ui-color-border-color isn't used, mixins inherit the state color var instead ? @item-ui-color-border-color: @item-ui-color; // Content Buttons diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 43a6e269..5b59ff0e 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -67,7 +67,6 @@ } // Plain -// ? do we need to include the duplicate styles e.g. 'background-color: transparent' applies to all? .item-color-plain() { background-color: transparent; color: @item-color; @@ -330,7 +329,7 @@ .menu-item-btn-color-outline() { background-color: @menu-item-btn-color-inverted; color: @menu-item-btn-color; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @btn-color inset; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color inset; } .menu-item-btn-color-outline-hover() { @@ -429,7 +428,7 @@ .nav-ui-btn-color-ctrl-outline-focus() { .nav-ui-btn-color-ctrl-focus; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-focus inset; } // Plain @@ -488,7 +487,7 @@ .notify-ui-btn-color-ctrl-outline-focus() { .notify-ui-btn-color-ctrl-focus; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon inset; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; } // Plain @@ -642,7 +641,7 @@ .drawer-ui-btn-color-ctrl-outline-focus() { .drawer-ui-btn-color-ctrl-focus; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon inset; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-focus inset; } // Plain From 005df49be9b7f7aacb00ff139f05d071d0cad957 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 15:37:55 +0100 Subject: [PATCH 53/86] remove unused btn outline 'border-color' vars ...mixins inherit from their state color var instead --- less/_defaults/_colors.less | 9 --------- 1 file changed, 9 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index a5efc0ef..f2ee5c08 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -89,9 +89,6 @@ // Outline // ? move '-border-width' vars to _spacing-config.less ? @item-ui-color-border-width: 1px; -// ? is this needed? -// @item-ui-color-border-color isn't used, mixins inherit the state color var instead ? -@item-ui-color-border-color: @item-ui-color; // Content Buttons // -------------------------------------------------- @@ -122,7 +119,6 @@ // Outline @btn-color-border-width: 1px; -@btn-color-border-color: @btn-color; // UI (global default for nav, notify, drawer) // -------------------------------------------------- @@ -173,7 +169,6 @@ // Outline @menu-item-btn-color-border-width: 1px; -@menu-item-btn-color-border-color: @menu-item-btn-color; // Navigation // -------------------------------------------------- @@ -191,7 +186,6 @@ @nav-icon-inverted-focus: @nav-icon-inverted-hover; @nav-icon-border-width: 1px; -@nav-icon-border-color: @nav-icon; @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @@ -224,7 +218,6 @@ @notify-icon-inverted-disabled: @disabled-inverted; @notify-icon-border-width: 1px; -@notify-icon-border-color: @notify-icon; // Button @notify-btn: @btn-color; @@ -247,7 +240,6 @@ // Outline @notify-btn-border-width: 1px; -@notify-btn-border-color: @notify-btn; // Drawer // -------------------------------------------------- @@ -269,7 +261,6 @@ @drawer-icon-inverted-focus: @drawer-icon-inverted-hover; @drawer-icon-border-width: 1px; -@drawer-icon-border-color: @item-ui-color; // Item @drawer-item: @drawer; From 629f915265fe98a1137740da458c1d1d106aa954 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 15:47:36 +0100 Subject: [PATCH 54/86] move btn 'border-width' vars into spacing config --- less/_defaults/_colors.less | 13 ------------- less/_defaults/_spacing-config.less | 13 ++++++++++++- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index f2ee5c08..04b55224 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -86,10 +86,6 @@ @item-ui-color-disabled: @disabled; @item-ui-color-inverted-disabled: @disabled-inverted; -// Outline -// ? move '-border-width' vars to _spacing-config.less ? -@item-ui-color-border-width: 1px; - // Content Buttons // -------------------------------------------------- // Filled @@ -117,9 +113,6 @@ @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; -// Outline -@btn-color-border-width: 1px; - // UI (global default for nav, notify, drawer) // -------------------------------------------------- @ui-color: @white; @@ -167,9 +160,6 @@ @menu-item-btn-color-locked: @item-ui-color-locked; @menu-item-btn-color-inverted-locked: @item-ui-color-inverted-locked; -// Outline -@menu-item-btn-color-border-width: 1px; - // Navigation // -------------------------------------------------- @nav: @ui-color; @@ -238,9 +228,6 @@ @notify-btn-disabled: @btn-color-disabled; @notify-btn-inverted-disabled: @btn-color-inverted-disabled; -// Outline -@notify-btn-border-width: 1px; - // Drawer // -------------------------------------------------- @drawer: @ui-color; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 769a5a52..bb8d4de2 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -9,23 +9,32 @@ @item-border-radius: 0.25rem; +// Content UI (action not content) +// -------------------------------------------------- +@item-ui-color-border-width: 1px; + // Content Button // -------------------------------------------------- @btn-margin: 1rem; @btn-padding: 1rem; @btn-border-radius: 0.25rem; +@btn-color-border-width: 1px; // TODO: separate font/element vars into separate files // wait until work has been reviewed/approved to make it easier to diff compare // UI Button // -------------------------------------------------- @ui-btn-controls-margin: @btn-margin / 2; - @ui-btn-controls-padding: @btn-padding / 2; @ui-btn-controls-border-radius: 50%; +// Menu +// ? remove 'color' from 'border-width' vars ? +// -------------------------------------------------- +@menu-item-btn-color-border-width: 1px; + // Navigation // -------------------------------------------------- @nav-btn-margin: 0; @@ -42,6 +51,8 @@ @notify-btn-padding-ver: @btn-padding / 2; @notify-btn-padding-hoz: @btn-padding; +@notify-btn-border-width: 1px; + // Drawer item // -------------------------------------------------- @drawer-item-margin: 0; From 3ac95e6ed4b827635dbcf77bb81ea4f8b1d2599f Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 15:51:58 +0100 Subject: [PATCH 55/86] nav ui mixin name change for consistency with other color variable naming ...changed to 'ui-btn-ctrl-color' for consistency with other color variable naming and consistency with .ui-btn-ctrl; --- less/_defaults/_state-mixins.less | 22 +++++++++++----------- less/core/nav.less | 6 +++--- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 5b59ff0e..f51d1622 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -396,54 +396,54 @@ // and consistency with .ui-btn-ctrl; // Nav UI // Default - Filled -.nav-ui-btn-color-ctrl() { +.nav-ui-btn-ctrl-color() { background-color: @nav-icon; color: @nav-icon-inverted; } -.nav-ui-btn-color-ctrl-hover() { +.nav-ui-btn-ctrl-color-hover() { background-color: @nav-icon-hover; color: @nav-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } -.nav-ui-btn-color-ctrl-focus() { +.nav-ui-btn-ctrl-color-focus() { background-color: @nav-icon-focus; color: @nav-icon-inverted-focus; } // Outline // TODO need to invert .pagelevelprogress__indicator border color -.nav-ui-btn-color-ctrl-outline() { +.nav-ui-btn-ctrl-color-outline() { background-color: @nav-icon-inverted; color: @nav-icon; box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; } -.nav-ui-btn-color-ctrl-outline-hover() { - .nav-ui-btn-color-ctrl-hover; +.nav-ui-btn-ctrl-color-outline-hover() { + .nav-ui-btn-ctrl-color-hover; box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.nav-ui-btn-color-ctrl-outline-focus() { - .nav-ui-btn-color-ctrl-focus; +.nav-ui-btn-ctrl-color-outline-focus() { + .nav-ui-btn-ctrl-color-focus; box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-focus inset; } // Plain -.nav-ui-btn-color-ctrl-plain() { +.nav-ui-btn-ctrl-color-plain() { background-color: transparent; color: @nav-icon; } -.nav-ui-btn-color-ctrl-plain-hover() { +.nav-ui-btn-ctrl-color-plain-hover() { background-color: transparent; color: @nav-icon-hover; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.nav-ui-btn-color-ctrl-plain-focus() { +.nav-ui-btn-ctrl-color-plain-focus() { background-color: transparent; color: @nav-icon-focus; } diff --git a/less/core/nav.less b/less/core/nav.less index c4b3694d..9761af3c 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -13,15 +13,15 @@ &__btn { margin: @nav-btn-margin (@nav-btn-margin / 2); padding: @nav-btn-padding-ver @nav-btn-padding-hoz; - .nav-ui-btn-color-ctrl; + .nav-ui-btn-ctrl-color; border-radius: @nav-btn-border-radius; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .nav-ui-btn-color-ctrl-hover; + .nav-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .nav-ui-btn-color-ctrl-focus; + .nav-ui-btn-ctrl-color-focus; } } From 643fb6761b33a06b2ca19af669819327bea91b26 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 17:27:53 +0100 Subject: [PATCH 56/86] nav ui mixin name change for consistency with other color variable naming ...changed to 'ui-btn-ctrl-color' for consistency with other color variable naming and consistency with .ui-btn-ctrl; --- less/_defaults/_spacing-config.less | 2 +- less/_defaults/_state-mixins.less | 46 +++++++++---------- less/core/drawer.less | 6 +-- less/core/notify.less | 6 +-- less/core/notifyPush.less | 6 +-- .../hotgraphicPopup.less | 8 ++-- less/plugins/adapt-contrib-tutor/tutor.less | 12 ++--- 7 files changed, 43 insertions(+), 43 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index bb8d4de2..f21ed055 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -21,7 +21,7 @@ @btn-border-radius: 0.25rem; @btn-color-border-width: 1px; -// TODO: separate font/element vars into separate files +// TODO separate font and element vars into separate files // wait until work has been reviewed/approved to make it easier to diff compare // UI Button // -------------------------------------------------- diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index f51d1622..2cef76c0 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -451,58 +451,58 @@ // Notify UI // Default - Filled -.notify-ui-btn-color-ctrl() { +.notify-ui-btn-ctrl-color() { background-color: @notify-icon; color: @notify-icon-inverted; } -.notify-ui-btn-color-ctrl-hover() { +.notify-ui-btn-ctrl-color-hover() { background-color: @notify-icon-hover; color: @notify-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } -.notify-ui-btn-color-ctrl-focus() { +.notify-ui-btn-ctrl-color-focus() { background-color: @notify-icon-focus; color: @notify-icon-inverted-focus; } -.notify-ui-btn-color-ctrl-disabled() { +.notify-ui-btn-ctrl-color-disabled() { background-color: @notify-icon-disabled; color: @notify-icon-inverted-disabled; } // Outline -.notify-ui-btn-color-ctrl-outline() { +.notify-ui-btn-ctrl-color-outline() { background-color: @notify-icon; color: @notify-icon-inverted; box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-inverted inset; } -.notify-ui-btn-color-ctrl-outline-hover() { - .notify-ui-btn-color-ctrl-hover; +.notify-ui-btn-ctrl-color-outline-hover() { + .notify-ui-btn-ctrl-color-hover; box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.notify-ui-btn-color-ctrl-outline-focus() { - .notify-ui-btn-color-ctrl-focus; +.notify-ui-btn-ctrl-color-outline-focus() { + .notify-ui-btn-ctrl-color-focus; box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; } // Plain -.notify-ui-btn-color-ctrl-plain() { +.notify-ui-btn-ctrl-color-plain() { background-color: transparent; color: @notify-icon-inverted; } -.notify-ui-btn-color-ctrl-plain-hover() { +.notify-ui-btn-ctrl-color-plain-hover() { background-color: transparent; color: @notify-icon-hover; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.notify-ui-btn-color-ctrl-plain-focus() { +.notify-ui-btn-ctrl-color-plain-focus() { background-color: transparent; color: @notify-icon-focus; } @@ -610,53 +610,53 @@ // Drawer UI // Default - Filled -.drawer-ui-btn-color-ctrl() { +.drawer-ui-btn-ctrl-color() { background-color: @drawer-icon; color: @drawer-icon-inverted; } -.drawer-ui-btn-color-ctrl-hover() { +.drawer-ui-btn-ctrl-color-hover() { background-color: @drawer-icon-hover; color: @drawer-icon-inverted-hover; .transition(background-color @duration ease-in, color @duration ease-in;); } -.drawer-ui-btn-color-ctrl-focus() { +.drawer-ui-btn-ctrl-color-focus() { background-color: @drawer-icon-focus; color: @drawer-icon-inverted-focus; } // Outline -.drawer-ui-btn-color-ctrl-outline() { +.drawer-ui-btn-ctrl-color-outline() { background-color: @drawer-icon; color: @drawer-icon-inverted; box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-inverted inset; } -.drawer-ui-btn-color-ctrl-outline-hover() { - .drawer-ui-btn-color-ctrl-hover; +.drawer-ui-btn-ctrl-color-outline-hover() { + .drawer-ui-btn-ctrl-color-hover; box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.drawer-ui-btn-color-ctrl-outline-focus() { - .drawer-ui-btn-color-ctrl-focus; +.drawer-ui-btn-ctrl-color-outline-focus() { + .drawer-ui-btn-ctrl-color-focus; box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-focus inset; } // Plain -.drawer-ui-btn-color-ctrl-plain() { +.drawer-ui-btn-ctrl-color-plain() { background-color: transparent; color: @drawer-icon-inverted; } -.drawer-ui-btn-color-ctrl-plain-hover() { +.drawer-ui-btn-ctrl-color-plain-hover() { background-color: transparent; color: @drawer-icon-hover; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } -.drawer-ui-btn-color-ctrl-plain-focus() { +.drawer-ui-btn-ctrl-color-plain-focus() { background-color: transparent; color: @drawer-icon-focus; } diff --git a/less/core/drawer.less b/less/core/drawer.less index ab96a100..4f22f316 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -8,14 +8,14 @@ &__btn { .ui-btn-ctrl; - .drawer-ui-btn-color-ctrl; + .drawer-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .drawer-ui-btn-color-ctrl-hover; + .drawer-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .drawer-ui-btn-color-ctrl-focus; + .drawer-ui-btn-ctrl-color-focus; } } } diff --git a/less/core/notify.less b/less/core/notify.less index 80632ab9..7a61b50f 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -73,14 +73,14 @@ // UI &__btn-icon { .ui-btn-ctrl; - .notify-ui-btn-color-ctrl; + .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color-ctrl-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-color-ctrl-focus; + .notify-ui-btn-ctrl-color-focus; } } diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 90707bd6..01e71cab 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -34,14 +34,14 @@ top: 0; right: 0; .ui-btn-ctrl; - .notify-ui-btn-color-ctrl; + .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color-ctrl-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-color-ctrl-focus; + .notify-ui-btn-ctrl-color-focus; } .dir-rtl & { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 2f4da63d..48862d8e 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -9,18 +9,18 @@ &__controls, &__close { .ui-btn-ctrl; - .notify-ui-btn-color-ctrl; + .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color-ctrl-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-color-ctrl-focus; + .notify-ui-btn-ctrl-color-focus; } &.is-disabled { - .notify-ui-btn-color-ctrl-disabled; + .notify-ui-btn-ctrl-color-disabled; } } diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 5b77f963..6635fdd2 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -19,14 +19,14 @@ &__btn-icon { .ui-btn-ctrl; - .notify-ui-btn-color-ctrl; + .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-color-ctrl-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-color-ctrl-focus; + .notify-ui-btn-ctrl-color-focus; } } @@ -64,14 +64,14 @@ } &-type-overlay &__btn-icon { - .notify-ui-btn-color-ctrl; + .notify-ui-btn-ctrl-color; .no-touch &:hover { - .notify-ui-btn-color-ctrl-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-color-ctrl-focus; + .notify-ui-btn-ctrl-color-focus; } } } From da3a525fd440336bcbf8ed1768c9b3630e8134e0 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 13 Jun 2024 17:36:21 +0100 Subject: [PATCH 57/86] button styles applied to _defaults and core files - temp button style vars added - naming tbc - drawer item locked state added --- less/_defaults/_colors.less | 3 ++ less/_defaults/_state-mixins.less | 20 ++++++++- less/core/button.less | 71 +++++++++++++++++++++++-------- less/core/drawer.less | 25 ++++++++--- less/core/drawerItem.less | 40 ++++++++++++++--- less/core/nav.less | 25 ++++++++--- less/core/notify.less | 58 ++++++++++++++++++++----- less/core/notifyPush.less | 25 ++++++++--- 8 files changed, 215 insertions(+), 52 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 04b55224..5b906268 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -263,6 +263,9 @@ @drawer-item-inverted-selected: @drawer-item-inverted; @drawer-item-selected-underline: @drawer-item-inverted; +@drawer-item-locked: @disabled; +@drawer-item-inverted-locked: @disabled-inverted; + @drawer-progress: @drawer-item-inverted; @drawer-progress-inverted: @drawer-item; @drawer-progress-border: @drawer-item-inverted; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 2cef76c0..f8ab852f 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -1,5 +1,17 @@ // TODO separate mixins into separate 'button type' files +// ! Temp button style vars - naming tbc +@content-item-style: outline; +@content-ui-btn-style: outline; +@button-style: outline; // content-button +@menu-item-btn: outline; +@global-ui-btn-style: outline; +@nav-ui-btn-style: @global-ui-btn-style; +@notify-btn-style: outline; +@notify-ui-btn-style: @global-ui-btn-style; +@drawer-ui-btn-style: @global-ui-btn-style; +@drawer-item-style: outline; + // Content item // Default - Filled .item-color() { @@ -392,8 +404,7 @@ // UI (nav, notify, drawer) -// ? should we change nav ui mixins to 'ui-btn-ctrl-color' for consistency with other color variable naming -// and consistency with .ui-btn-ctrl; + // Nav UI // Default - Filled .nav-ui-btn-ctrl-color() { @@ -717,6 +728,11 @@ box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset; } +.drawer-item-color-outline-locked() { + .drawer-item-color-locked; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset; +} + // Plain .drawer-item-color-plain() { background-color: transparent; diff --git a/less/core/button.less b/less/core/button.less index 901aca80..28bac3ee 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -1,3 +1,4 @@ +@button-style: outline; .btn { &__container { margin-top: @btn-margin; @@ -25,35 +26,71 @@ // undo overrides // currently implemented for testing purposes &__action { - .btn-color-outline; + & when (@button-style = filled) { + .btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-outline-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + + &.is-disabled { + .btn-color-disabled; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-outline-focus; + & when (@button-style = outline) { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + + &.is-disabled { + .btn-color-outline-disabled; + } } } &__feedback { - .btn-color-plain; + & when (@button-style = filled) { + .btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-plain-hover; - } + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-plain-focus; + &.is-disabled { + .btn-color-disabled; + } } - } - &__action.is-disabled { - .btn-color-outline-disabled; - } + & when (@button-style = outline) { + .btn-color-outline; - &__feedback.is-disabled { - .btn-color-plain-disabled; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + + &.is-disabled { + .btn-color-outline-disabled; + } + } } // end diff --git a/less/core/drawer.less b/less/core/drawer.less index 4f22f316..b5332ee4 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -8,14 +8,29 @@ &__btn { .ui-btn-ctrl; - .drawer-ui-btn-ctrl-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .drawer-ui-btn-ctrl-color-hover; + & when (@drawer-ui-btn-style = filled) { + .drawer-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .drawer-ui-btn-ctrl-color-focus; + & when (@drawer-ui-btn-style = outline) { + .drawer-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-ui-btn-ctrl-color-outline-focus; + } } } } diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 2c15b35e..04393b5a 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -12,26 +12,52 @@ border: @drawer-item-border-width solid; } - .drawer-item-color(); + & when (@drawer-item-style = filled) { + .drawer-item-color(); - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .drawer-item-color-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .drawer-item-color-focus; + & when (@drawer-item-style = outline) { + .drawer-item-color-outline(); + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-outline-focus; + } } } &__item-btn.is-locked, &__item-btn.is-disabled { - .drawer-item-color-locked; + & when (@drawer-item-style = filled) { + .drawer-item-color-locked; + } + + & when (@drawer-item-style = outline) { + .drawer-item-color-outline-locked; + } } // aria-current="true" is used by languagePicker &__item-btn[aria-current="true"], &__item-btn.is-selected { - .drawer-item-color-selected; + & when (@drawer-item-style = filled) { + .drawer-item-color-selected; + } + + & when (@drawer-item-style = outline) { + .drawer-item-color-outline-selected; + } } &__item-title { diff --git a/less/core/nav.less b/less/core/nav.less index 9761af3c..79219c8c 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -13,15 +13,30 @@ &__btn { margin: @nav-btn-margin (@nav-btn-margin / 2); padding: @nav-btn-padding-ver @nav-btn-padding-hoz; - .nav-ui-btn-ctrl-color; border-radius: @nav-btn-border-radius; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .nav-ui-btn-ctrl-color-hover; + & when (@nav-ui-btn-style = filled) { + .nav-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .nav-ui-btn-ctrl-color-focus; + & when (@nav-ui-btn-style = outline) { + .nav-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-outline-focus; + } } } diff --git a/less/core/notify.less b/less/core/notify.less index 7a61b50f..320b5988 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -55,32 +55,68 @@ &__btn { margin: @notify-btn-margin; padding: @notify-btn-padding-ver @notify-btn-padding-hoz; - .notify-btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-btn-color-hover; + & when (@nav-ui-btn-style = filled) { + .notify-btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-btn-color-focus; + & when (@nav-ui-btn-style = outline) { + .notify-btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-outline-focus; + } } } &__btn.is-disabled { - .notify-btn-color-disabled; + & when (@notify-btn-style = filled) { + .notify-btn-color-disabled; + } + + & when (@notify-btn-style = outline) { + .notify-btn-color-outline-disabled; + } } // UI &__btn-icon { .ui-btn-ctrl; - .notify-ui-btn-ctrl-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-ctrl-color-hover; + & when (@notify-btn-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + & when (@notify-btn-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } } } diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 01e71cab..9a3d0551 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -34,14 +34,29 @@ top: 0; right: 0; .ui-btn-ctrl; - .notify-ui-btn-ctrl-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-ctrl-color-hover; + & when (@notify-ui-btn-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + & when (@notify-ui-btn-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } } .dir-rtl & { From 08862f5c9e843eda9800de744c777980c084a9d3 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 17 Jun 2024 11:45:06 +0100 Subject: [PATCH 58/86] button styles applied to plugin files - missing item border-width var added - @menu-item-btn-style var name fix - missing btn state mixins added - notify btn style var fix - comments added --- less/_defaults/_spacing-config.less | 1 + less/_defaults/_state-mixins.less | 12 ++- less/core/notify.less | 4 +- .../adapt-contrib-accordion/accordion.less | 41 +++++-- .../assessmentResults.less | 32 ++++-- .../adapt-contrib-boxmenu/boxMenuItem.less | 32 ++++-- less/plugins/adapt-contrib-gmcq/gmcq.less | 41 ++++++- .../adapt-contrib-hotgraphic/hotgraphic.less | 33 +++++- .../hotgraphicPopup.less | 35 ++++-- .../languagePicker.less | 33 ++++-- .../adapt-contrib-matching/dropdown.less | 101 ++++++++++++++---- less/plugins/adapt-contrib-mcq/mcq.less | 41 +++++-- less/plugins/adapt-contrib-media/media.less | 41 +++++-- .../adapt-contrib-narrative/narrative.less | 65 +++++++++-- .../adapt-contrib-resources/resources.less | 26 ++++- .../adapt-contrib-trickle/trickle.less | 40 +++++-- less/plugins/adapt-contrib-tutor/tutor.less | 73 ++++++++++--- 17 files changed, 533 insertions(+), 118 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index f21ed055..fc949a53 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -8,6 +8,7 @@ @item-padding: 1rem; @item-border-radius: 0.25rem; +@item-color-border-width: 1px; // Content UI (action not content) // -------------------------------------------------- diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index f8ab852f..346f68e2 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -4,7 +4,7 @@ @content-item-style: outline; @content-ui-btn-style: outline; @button-style: outline; // content-button -@menu-item-btn: outline; +@menu-item-btn-style: outline; @global-ui-btn-style: outline; @nav-ui-btn-style: @global-ui-btn-style; @notify-btn-style: outline; @@ -177,6 +177,11 @@ box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-visited inset; } +.item-ui-color-outline-locked() { + .item-ui-color-locked; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-locked inset; +} + .item-ui-color-outline-disabled() { .item-ui-color-disabled; box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-disabled inset; @@ -501,6 +506,11 @@ box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; } +.notify-ui-btn-ctrl-color-outline-disabled() { + .notify-ui-btn-ctrl-color-disabled; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-disabled inset; +} + // Plain .notify-ui-btn-ctrl-color-plain() { background-color: transparent; diff --git a/less/core/notify.less b/less/core/notify.less index 320b5988..c0efaf6d 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -56,7 +56,7 @@ margin: @notify-btn-margin; padding: @notify-btn-padding-ver @notify-btn-padding-hoz; - & when (@nav-ui-btn-style = filled) { + & when (@notify-btn-style = filled) { .notify-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -68,7 +68,7 @@ } } - & when (@nav-ui-btn-style = outline) { + & when (@notify-btn-style = outline) { .notify-btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index 88648334..5f6e5fe2 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -7,24 +7,51 @@ padding-bottom: @item-padding; padding-inline: @item-padding (@icon-size + (@item-padding * 2)); text-align: start; - .item-color; border-radius: @item-border-radius; - .no-touch &:not(.is-selected):hover { - .item-color-hover; + & when (@content-item-style = filled) { + .item-color; + + .no-touch &:not(.is-selected):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-color-focus; + & when (@content-item-style = outline) { + .item-color-outline; + + .no-touch &:not(.is-selected):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-outline-focus; + } } } &__btn.is-visited { - .item-color-visited; + & when (@content-item-style = filled) { + .item-color-visited; + } + + & when (@content-item-style = outline) { + .item-color-outline-visited; + } } &__btn.is-selected { - .item-color-selected; + & when (@content-item-style = filled) { + .item-color-selected; + } + + & when (@content-item-style = outline) { + .item-color-outline-selected; + } } &__icon { diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less index e833f19c..acb527e2 100644 --- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less +++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less @@ -4,18 +4,38 @@ } &__retry-btn { - .btn-color; + & when (@button-style = filled) { + .btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; + & when (@button-style = outline) { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } } } &__retry-btn.is-disabled { - .btn-color-disabled; + & when (@button-style = filled) { + .btn-color-disabled; + } + + & when (@button-style = outline) { + .btn-color-outline-disabled; + } } } diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 691211ff..b3ec848c 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -44,19 +44,39 @@ } &__button { - .menu-item-btn-color; + & when (@menu-item-btn-style = filled) { + .menu-item-btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .menu-item-btn-color-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .menu-item-btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .menu-item-btn-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .menu-item-btn-color-focus; + & when (@menu-item-btn-style = outline) { + .menu-item-btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .menu-item-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .menu-item-btn-color-outline-focus; + } } } &__button.is-locked { - .menu-item-btn-color-locked; + & when (@menu-item-btn-style = filled) { + .menu-item-btn-color-locked; + } + + & when (@menu-item-btn-style = outline) { + .menu-item-btn-color-outline-locked; + } } &__status { diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index 344026ca..70541a39 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -10,24 +10,55 @@ &__option { margin-top: @item-margin; padding: @item-padding / 2; - .item-color; border-radius: @item-border-radius; + + & when (@content-item-style = filled) { + .item-color; + } + + & when (@content-item-style = outline) { + .item-color-outline; + } } .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { - .item-color-hover; + & when (@content-item-style = filled) { + .item-color-hover; + } + + & when (@content-item-style = outline) { + .item-color-outline-hover; + } } html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { - .item-color-focus; + & when (@content-item-style = filled) { + .item-color-focus; + } + + & when (@content-item-style = outline) { + .item-color-outline-focus; + } } &__label.is-disabled &__option { - .item-color-disabled; + & when (@content-item-style = filled) { + .item-color-disabled; + } + + & when (@content-item-style = outline) { + .item-color-outline-disabled; + } } &__label.is-selected &__option { - .item-color-selected; + & when (@content-item-style = filled) { + .item-color-selected; + } + + & when (@content-item-style = outline) { + .item-color-outline-selected; + } } &__state { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index 31a0081c..c4b12b12 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -8,20 +8,45 @@ } &__pin:not(.has-pin-image) { - .item-ui-color; border-radius: 50%; + & when (@content-ui-btn-style = filled) { + .item-ui-color; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline; + } + .no-touch &:not(.is-disabled):not(.is-locked):hover { - .item-ui-color-hover; + & when (@content-ui-btn-style = filled) { + .item-ui-color-hover; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-hover; + } } html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-ui-color-focus; + & when (@content-ui-btn-style = filled) { + .item-ui-color-focus; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-focus; + } } } &__pin:not(.has-pin-image).is-visited { - .item-ui-color-visited; + & when (@content-ui-btn-style = filled) { + .item-ui-color-visited; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-visited; + } } // Numbered pins diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 48862d8e..351ded66 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -9,18 +9,37 @@ &__controls, &__close { .ui-btn-ctrl; - .notify-ui-btn-ctrl-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-ctrl-color-hover; - } + & when (@notify-ui-btn-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + &.is-disabled { + .notify-ui-btn-ctrl-color-disabled; + } } - &.is-disabled { - .notify-ui-btn-ctrl-color-disabled; + & when (@notify-ui-btn-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } + + &.is-disabled { + .notify-ui-btn-ctrl-color-outline-disabled; + } } } diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less index ad20bb59..1c4bf7c7 100644 --- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less +++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less @@ -26,19 +26,40 @@ &__language-btn { margin: @item-margin / 2; - .btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; + & when (@button-style = filled) { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; + & when (@button-style = outline) { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } } } &__language-btn.is-disabled { - .btn-color-disabled; + & when (@button-style = filled) { + .btn-color-disabled; + } + + & when (@button-style = outline) { + .btn-color-outline-disabled; + } } } diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 1ded932d..3ecedb73 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -6,23 +6,50 @@ padding-inline: @item-padding (@icon-size + (@item-padding * 2)); line-height: @body-line-height; text-align: start; - .item-color; - .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { - .item-color-hover; + & when (@content-item-style = filled) { + .item-color; + + .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-color-focus; + & when (@content-item-style = outline) { + .item-color-outline; + + .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-outline-focus; + } } } &__btn.is-disabled { - .item-color-disabled; + & when (@content-item-style = filled) { + .item-color-disabled; + } + + & when (@content-item-style = outline) { + .item-color-outline-disabled; + } } &__btn[aria-expanded="true"] { - .item-color-selected; + & when (@content-item-style = filled) { + .item-color-selected; + } + + & when (@content-item-style = outline) { + .item-color-outline-selected; + } } &__icon { @@ -44,25 +71,55 @@ .dropdown-item { padding: @item-padding; - .item-color; - // border-bottom: 1px solid @item-color-hover; - // &:last-child { - // border-bottom: none; - // } + & when (@content-item-style = filled) { + .item-color; + border-bottom: 1px solid @item-color-hover; - .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { - .item-color-hover; + &:last-child { + border-bottom: none; + } + + .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .item-color-hover; + } + + &:focus-visible, + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { + // This code can be used to style a non-native dropdown as closely + // as possible to the default browser settings + // background-color: Highlight; + // background-color: -webkit-focus-ring-color; + // color: white; + + .item-color-selected; + } } - &:focus-visible, - .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { - // This code can be used to style a non-native dropdown as closely - // as possible to the default browser settings - // background-color: Highlight; - // background-color: -webkit-focus-ring-color; - // color: white; + & when (@content-item-style = outline) { + .item-color-outline; + // TODO review application of 'outline' styles vs existing border styles + // ? should border-bottom styles replace mixin box-shadow ? + + // border-bottom: 1px solid @item-color-hover; + + // &:last-child { + // border-bottom: none; + // } + + .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .item-color-outline-hover; + } + + &:focus-visible, + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { + // This code can be used to style a non-native dropdown as closely + // as possible to the default browser settings + // background-color: Highlight; + // background-color: -webkit-focus-ring-color; + // color: white; - .item-color-selected; + .item-color-outline-selected; + } } } diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index 2d51e2ea..3dba6740 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -1,15 +1,30 @@ .mcq-item { &__label { margin-bottom: @item-margin / 2; - .item-color; border-radius: @item-border-radius; - .no-touch &:not(.is-disabled):not(.is-selected):hover { - .item-color-hover; + & when (@content-item-style = filled) { + .item-color; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { + .item-color-focus; + } } - html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { - .item-color-focus; + & when (@content-item-style = outline) { + .item-color-outline; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { + .item-color-outline-focus; + } } .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { @@ -18,11 +33,23 @@ } &__label.is-disabled { - .item-color-disabled; + & when (@content-item-style = filled) { + .item-color-disabled; + } + + & when (@content-item-style = outline) { + .item-color-outline-disabled; + } } &__label.is-selected { - .item-color-selected; + & when (@content-item-style = filled) { + .item-color-selected; + } + + & when (@content-item-style = outline) { + .item-color-outline-selected; + } } &__state { diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index f45db8b1..9dc4b550 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -5,24 +5,51 @@ &__transcript-btn { padding: @item-padding; - .item-ui-color; border-radius: @item-border-radius; - .no-touch &:not([aria-expanded="true"]):hover { - .item-ui-color-hover; + & when (@content-ui-btn-style = filled) { + .item-ui-color; + + .no-touch &:not([aria-expanded="true"]):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { + .item-ui-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { - .item-ui-color-focus; + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline; + + .no-touch &:not([aria-expanded="true"]):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { + .item-ui-color-outline-focus; + } } } &.is-complete &__transcript-btn { - .item-ui-color-visited; + & when (@content-ui-btn-style = filled) { + .item-ui-color-visited; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-visited; + } } &__transcript-btn[aria-expanded="true"] { - .item-ui-color-selected; + & when (@content-ui-btn-style = filled) { + .item-ui-color-selected; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-selected; + } } &__transcript-body-inline { diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 1aaf7d53..47cfa6ea 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -9,19 +9,39 @@ } &__controls { - .item-ui-color; + & when (@content-ui-btn-style = filled) { + .item-ui-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .item-ui-color-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-ui-color-focus; + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-outline-focus; + } } } &__controls.is-disabled { - .item-ui-color-disabled; + & when (@content-ui-btn-style = filled) { + .item-ui-color-disabled; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-disabled; + } } &__progress { @@ -45,7 +65,14 @@ &__strapline-btn { text-align: start; - .item-ui-color; + + & when (@content-ui-btn-style = filled) { + .item-ui-color; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline; + } } // set icon background color to transparent to 'inherit' strapline styling @@ -56,15 +83,33 @@ } .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { - .item-ui-color-hover; + & when (@content-ui-btn-style = filled) { + .item-ui-color-hover; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-hover; + } } html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { - .item-ui-color-focus; + & when (@content-ui-btn-style = filled) { + .item-ui-color-focus; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-focus; + } } &__strapline-btn.is-visited { - .item-ui-color-visited; + & when (@content-ui-btn-style = filled) { + .item-ui-color-visited; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-visited; + } } &.has-img-zoom &__slider-image-container { diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index 5ebc18a0..e513fd7b 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -4,14 +4,30 @@ .resources-filter-btn; border-bottom: 1px solid; border-right: 1px solid; - .drawer-item-color; - .no-touch &:not(.is-disabled):not(.is-selected):hover { - .drawer-item-color-hover; + & when (@drawer-item-style = filled) { + .drawer-item-color; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .drawer-item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .drawer-item-color-focus; + // TODO review application of 'outline' styles vs existing border and box-shadow styles + & when (@drawer-item-style = outline) { + .drawer-item-color-outline; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .drawer-item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-outline-focus; + } } &:last-child { diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index 07a293a8..a1df81e0 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,22 +1,48 @@ .trickle { &__btn { - .item-ui-color; + & when (@content-ui-btn-style = filled) { + .item-ui-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .item-ui-color-hover; + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-ui-color-focus; + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-outline-focus; + } } } &__btn.is-disabled { - .item-ui-color-disabled; + & when (@content-ui-btn-style = filled) { + .item-ui-color-disabled; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-disabled; + } } &__btn.is-locked { - .item-ui-color-locked; + & when (@content-ui-btn-style = filled) { + .item-ui-color-locked; + } + + & when (@content-ui-btn-style = outline) { + .item-ui-color-outline-locked; + } } &__btn-icon { diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 6635fdd2..2bfde080 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -19,14 +19,29 @@ &__btn-icon { .ui-btn-ctrl; - .notify-ui-btn-ctrl-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .notify-ui-btn-ctrl-color-hover; + & when (@notify-ui-btn-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + & when (@notify-ui-btn-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } } } @@ -52,26 +67,54 @@ } &-type-overlay &__btn { - .notify-btn-color; + & when (@notify-btn-style = filled) { + .notify-btn-color; - .no-touch &:hover { - .notify-btn-color-hover; + .no-touch &:hover { + .notify-btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-btn-color-focus; + & when (@notify-btn-style = outline) { + .notify-btn-color-outline; + + .no-touch &:hover { + .notify-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-outline-focus; + } } } &-type-overlay &__btn-icon { - .notify-ui-btn-ctrl-color; + & when (@notify-ui-btn-style = filled) { + .notify-ui-btn-ctrl-color; - .no-touch &:hover { - .notify-ui-btn-ctrl-color-hover; + .no-touch &:hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + & when (@notify-ui-btn-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } } } } From 1f3ccf5094e7fed168d2b15e7a363529d1d97d14 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 17 Jun 2024 13:50:48 +0100 Subject: [PATCH 59/86] todo comment update --- less/_defaults/_spacing-config.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index fc949a53..6a567e44 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -22,8 +22,6 @@ @btn-border-radius: 0.25rem; @btn-color-border-width: 1px; -// TODO separate font and element vars into separate files -// wait until work has been reviewed/approved to make it easier to diff compare // UI Button // -------------------------------------------------- @ui-btn-controls-margin: @btn-margin / 2; @@ -68,6 +66,10 @@ // -------------------------------------------------- @progress-border-radius: 50px; + +// TODO new file (separate item spacing vars from text spacing vars) +// wait until work has been reviewed/approved to make it easier to diff compare + // Menu header text margin // -------------------------------------------------- @menu-title-margin: 1rem; From 6e574d27d6cfdbb6bbfadb00755c4dcba34adcf4 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 21 Jun 2024 14:46:33 +0100 Subject: [PATCH 60/86] Button styles updated --- less/_defaults/_buttonMixins/_btnStyles.less | 100 ++ .../_buttonMixins/_drawerItemStyles.less | 85 ++ .../_buttonMixins/_drawerUiStyles.less | 55 ++ less/_defaults/_buttonMixins/_itemStyles.less | 100 ++ .../_buttonMixins/_itemUiStyles.less | 110 +++ .../_buttonMixins/_menuItemStyles.less | 90 ++ .../_defaults/_buttonMixins/_navUiStyles.less | 56 ++ .../_buttonMixins/_notifyBtnStyles.less | 100 ++ .../_buttonMixins/_notifyUiStyles.less | 65 ++ less/_defaults/_colors.less | 10 +- less/_defaults/_state-mixins.less | 901 +++--------------- less/core/button.less | 23 +- less/core/drawer.less | 8 +- less/core/drawerItem.less | 16 +- less/core/nav.less | 10 +- less/core/notify.less | 20 +- less/core/notifyPush.less | 4 +- .../adapt-contrib-accordion/accordion.less | 16 +- .../assessmentResults.less | 8 +- .../adapt-contrib-boxmenu/boxMenuItem.less | 8 +- less/plugins/adapt-contrib-gmcq/gmcq.less | 20 +- .../adapt-contrib-hotgraphic/hotgraphic.less | 16 +- .../hotgraphicPopup.less | 4 +- .../languagePicker.less | 8 +- .../adapt-contrib-matching/dropdown.less | 18 +- less/plugins/adapt-contrib-mcq/mcq.less | 12 +- less/plugins/adapt-contrib-media/media.less | 12 +- .../adapt-contrib-narrative/narrative.less | 24 +- .../adapt-contrib-resources/resources.less | 4 +- .../adapt-contrib-trickle/trickle.less | 14 +- less/plugins/adapt-contrib-tutor/tutor.less | 12 +- 31 files changed, 1030 insertions(+), 899 deletions(-) create mode 100644 less/_defaults/_buttonMixins/_btnStyles.less create mode 100644 less/_defaults/_buttonMixins/_drawerItemStyles.less create mode 100644 less/_defaults/_buttonMixins/_drawerUiStyles.less create mode 100644 less/_defaults/_buttonMixins/_itemStyles.less create mode 100644 less/_defaults/_buttonMixins/_itemUiStyles.less create mode 100644 less/_defaults/_buttonMixins/_menuItemStyles.less create mode 100644 less/_defaults/_buttonMixins/_navUiStyles.less create mode 100644 less/_defaults/_buttonMixins/_notifyBtnStyles.less create mode 100644 less/_defaults/_buttonMixins/_notifyUiStyles.less diff --git a/less/_defaults/_buttonMixins/_btnStyles.less b/less/_defaults/_buttonMixins/_btnStyles.less new file mode 100644 index 00000000..689c27ea --- /dev/null +++ b/less/_defaults/_buttonMixins/_btnStyles.less @@ -0,0 +1,100 @@ +// -------------------------------------------------- +// BUTTON COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.btn-color() { + background-color: @btn-color; + color: @btn-color-inverted; +} + +.btn-color-hover() { + background-color: @btn-color-hover; + color: @btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-focus() { + background-color: @btn-color-focus; + color: @btn-color-inverted-focus; +} + +.btn-color-selected() { + background-color: @btn-color-selected; + color: @btn-color-inverted-selected; +} + +.btn-color-locked() { + background-color: @btn-color-locked; + color: @btn-color-inverted-locked; +} + +.btn-color-disabled() { + background-color: @btn-color-disabled; + color: @btn-color-inverted-disabled; +} + +// Outline +.btn-color-outline() { + background-color: @btn-color-inverted; + color: @btn-color; + box-shadow: 0 0 0 @btn-color-border-width @btn-color inset; +} + +.btn-color-outline-hover() { + .btn-color-hover; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.btn-color-outline-focus() { + .btn-color-focus; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset; +} + +.btn-color-outline-selected() { + .btn-color-selected; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset; +} + +.btn-color-outline-locked() { + .btn-color-locked; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset; +} + +.btn-color-outline-disabled() { + .btn-color-disabled; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset; +} + +// Plain +.btn-color-plain() { + background-color: transparent; + color: @btn-color; +} + +.btn-color-plain-hover() { + background-color: transparent; + color: @btn-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-plain-focus() { + background-color: transparent; + color: @btn-color-focus; +} + +.btn-color-plain-selected() { + background-color: transparent; + color: @btn-color-selected; +} + +.btn-color-plain-locked() { + background-color: transparent; + color: @btn-color-locked; +} + +.btn-color-plain-disabled() { + background-color: transparent; + color: @btn-color-disabled; +} diff --git a/less/_defaults/_buttonMixins/_drawerItemStyles.less b/less/_defaults/_buttonMixins/_drawerItemStyles.less new file mode 100644 index 00000000..9d4a2f01 --- /dev/null +++ b/less/_defaults/_buttonMixins/_drawerItemStyles.less @@ -0,0 +1,85 @@ +// -------------------------------------------------- +// DRAWER ITEM COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.drawer-item-color() { + background-color: @drawer-item; + color: @drawer-item-inverted; + border-color: @drawer-item-hover; +} + +.drawer-item-color-hover() { + background-color: @drawer-item-hover; + color: @drawer-item-inverted-hover; + border-color: @drawer-item-hover; + .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;); +} + +.drawer-item-color-focus() { + background-color: @drawer-item-focus; + color: @drawer-item-inverted-focus; + border-color: @drawer-item-focus; +} + +.drawer-item-color-locked() { + background-color: @disabled; + color: @disabled-inverted; + border-color: @drawer-item-hover; +} + +.drawer-item-color-selected() { + background-color: @drawer-item-selected; + color: @drawer-item-inverted-selected; + border-color: @drawer-item-hover; +} + +// Outline +.drawer-item-color-outline() { + background-color: @drawer-item-inverted; + color: @drawer-item; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset; +} + +.drawer-item-color-outline-hover() { + .drawer-item-color-hover; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-item-color-outline-focus() { + .drawer-item-color-focus; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset; +} + +.drawer-item-color-outline-selected() { + .drawer-item-color-selected; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset; +} + +.drawer-item-color-outline-locked() { + .drawer-item-color-locked; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset; +} + +// Plain +.drawer-item-color-plain() { + background-color: transparent; + color: @drawer-item; +} + +.drawer-item-color-plain-hover() { + background-color: transparent; + color: @drawer-item-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.drawer-item-color-plain-focus() { + background-color: transparent; + color: @drawer-item-focus; +} + +.drawer-item-color-plain-selected() { + background-color: transparent; + color: @drawer-item-selected; +} diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUiStyles.less new file mode 100644 index 00000000..5003a4ec --- /dev/null +++ b/less/_defaults/_buttonMixins/_drawerUiStyles.less @@ -0,0 +1,55 @@ +// -------------------------------------------------- +// DRAWER UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.drawer-ui-btn-ctrl-color() { + background-color: @drawer-icon; + color: @drawer-icon-inverted; +} + +.drawer-ui-btn-ctrl-color-hover() { + background-color: @drawer-icon-hover; + color: @drawer-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.drawer-ui-btn-ctrl-color-focus() { + background-color: @drawer-icon-focus; + color: @drawer-icon-inverted-focus; +} + +// Outline +.drawer-ui-btn-ctrl-color-outline() { + background-color: @drawer-icon; + color: @drawer-icon-inverted; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-inverted inset; +} + +.drawer-ui-btn-ctrl-color-outline-hover() { + .drawer-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-ui-btn-ctrl-color-outline-focus() { + .drawer-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-focus inset; +} + +// Plain +.drawer-ui-btn-ctrl-color-plain() { + background-color: transparent; + color: @drawer-icon-inverted; +} + +.drawer-ui-btn-ctrl-color-plain-hover() { + background-color: transparent; + color: @drawer-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-ui-btn-ctrl-color-plain-focus() { + background-color: transparent; + color: @drawer-icon-focus; +} diff --git a/less/_defaults/_buttonMixins/_itemStyles.less b/less/_defaults/_buttonMixins/_itemStyles.less new file mode 100644 index 00000000..e0386cb6 --- /dev/null +++ b/less/_defaults/_buttonMixins/_itemStyles.less @@ -0,0 +1,100 @@ +// -------------------------------------------------- +// ITEM COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.item-color() { + background-color: @item-color; + color: @item-color-inverted; +} + +.item-color-hover() { + background-color: @item-color-hover; + color: @item-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-color-focus() { + background-color: @item-color-focus; + color: @item-color-inverted-focus; +} + +.item-color-selected() { + background-color: @item-color-selected; + color: @item-color-inverted-selected; +} + +.item-color-visited() { + background-color: @visited; + color: @visited-inverted; +} + +.item-color-disabled() { + background-color: @item-color-disabled; + color: @item-color-inverted-disabled; +} + +// Outline +.item-color-outline() { + background-color: @item-color-inverted; + color: @item-color; + box-shadow: 0 0 0 @item-color-border-width @item-color inset; +} + +.item-color-outline-hover() { + .item-color-hover; + box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-color-outline-focus() { + .item-color-focus; + box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset; +} + +.item-color-outline-selected() { + .item-color-selected; + box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset; +} + +.item-color-outline-visited() { + .item-color-visited; + box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset; +} + +.item-color-outline-disabled() { + .item-color-disabled; + box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; +} + +// Plain +.item-color-plain() { + background-color: transparent; + color: @item-color; +} + +.item-color-plain-hover() { + background-color: transparent; + color: @item-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-color-plain-focus() { + background-color: transparent; + color: @item-color-focus; +} + +.item-color-plain-selected() { + background-color: transparent; + color: @item-color-selected; +} + +.item-color-plain-locked() { + background-color: transparent; + color: @item-color-locked; +} + +.item-color-plain-disabled() { + background-color: transparent; + color: @item-color-disabled; +} diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUiStyles.less new file mode 100644 index 00000000..4d6447ef --- /dev/null +++ b/less/_defaults/_buttonMixins/_itemUiStyles.less @@ -0,0 +1,110 @@ +// -------------------------------------------------- +// ITEM UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.item-ui-color() { + background-color: @item-ui-color; + color: @item-ui-color-inverted; +} + +.item-ui-color-hover() { + background-color: @item-ui-color-hover; + color: @item-ui-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-ui-color-focus() { + background-color: @item-ui-color-focus; + color: @item-ui-color-inverted-focus; +} + +.item-ui-color-visited() { + background-color: @item-ui-color-visited; + color: @item-ui-color-inverted-visited; +} + +.item-ui-color-selected() { + background-color: @item-ui-color-selected; + color: @item-ui-color-inverted-selected; +} + +.item-ui-color-locked() { + background-color: @item-ui-color-locked; + color: @item-ui-color-inverted-locked; +} + +.item-ui-color-disabled() { + background-color: @item-ui-color-disabled; + color: @item-ui-color-inverted-disabled; +} + +// Outline +.item-ui-color-outline() { + background-color: @item-ui-color-inverted; + color: @item-ui-color; + box-shadow: 0 0 0 @item-ui-color-border-width @item-color inset; +} + +.item-ui-color-outline-hover() { + .item-ui-color-hover; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-ui-color-outline-focus() { + .item-ui-color-focus; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-focus inset; +} + +.item-ui-color-outline-selected() { + .item-ui-color-selected; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-selected inset; +} + +.item-ui-color-outline-visited() { + .item-ui-color-visited; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-visited inset; +} + +.item-ui-color-outline-locked() { + .item-ui-color-locked; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-locked inset; +} + +.item-ui-color-outline-disabled() { + .item-ui-color-disabled; + box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-disabled inset; +} + +// Plain +.item-ui-color-plain() { + background-color: transparent; + color: @item-ui-color; +} + +.item-ui-color-plain-hover() { + background-color: transparent; + color: @item-ui-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-ui-color-plain-focus() { + background-color: transparent; + color: @item-ui-color-focus; +} + +.item-ui-color-plain-selected() { + background-color: transparent; + color: @item-ui-color-selected; +} + +.item-ui-color-plain-locked() { + background-color: transparent; + color: @item-ui-color-locked; +} + +.item-ui-color-plain-disabled() { + background-color: transparent; + color: @item-ui-color-disabled; +} diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItemStyles.less new file mode 100644 index 00000000..df5f8feb --- /dev/null +++ b/less/_defaults/_buttonMixins/_menuItemStyles.less @@ -0,0 +1,90 @@ +// -------------------------------------------------- +// MENU ITEM BUTTON COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.menu-item-btn-color() { + background-color: @menu-item-btn-color; + color: @menu-item-btn-color-inverted; +} + +.menu-item-btn-color-hover() { + background-color: @menu-item-btn-color-hover; + color: @menu-item-btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.menu-item-btn-color-focus() { + background-color: @menu-item-btn-color-focus; + color: @menu-item-btn-color-inverted-focus; +} + +.menu-item-btn-color-locked() { + background-color: @menu-item-btn-color-locked; + color: @menu-item-btn-color-inverted-locked; +} + +// Outline +.menu-item-btn-color-outline() { + background-color: @menu-item-btn-color-inverted; + color: @menu-item-btn-color; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color inset; +} + +.menu-item-btn-color-outline-hover() { + .menu-item-btn-color-hover; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.menu-item-btn-color-outline-focus() { + .menu-item-btn-color-focus; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-focus inset; +} + +.menu-item-btn-color-outline-selected() { + .menu-item-btn-color-selected; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-selected inset; +} + +.menu-item-btn-color-outline-locked() { + .menu-item-btn-color-locked; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-locked inset; +} + +.menu-item-btn-color-outline-disabled() { + .menu-item-btn-color-disabled; + box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-disabled inset; +} + +// Plain +.menu-item-btn-color-plain() { + background-color: transparent; + color: @menu-item-btn-color; +} + +.menu-item-btn-color-plain-hover() { + background-color: transparent; + color: @menu-item-btn-color-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.menu-item-btn-color-plain-focus() { + background-color: transparent; + color: @menu-item-btn-color-focus; +} + +.menu-item-btn-color-plain-selected() { + background-color: transparent; + color: @menu-item-btn-color-selected; +} + +.menu-item-btn-color-plain-locked() { + background-color: transparent; + color: @menu-item-btn-color-locked; +} + +.menu-item-btn-color-plain-disabled() { + background-color: transparent; + color: @menu-item-btn-color-disabled; +} diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less new file mode 100644 index 00000000..388ebbe6 --- /dev/null +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -0,0 +1,56 @@ +// -------------------------------------------------- +// NAV UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.nav-ui-btn-ctrl-color() { + background-color: @nav-icon; + color: @nav-icon-inverted; +} + +.nav-ui-btn-ctrl-color-hover() { + background-color: @nav-icon-hover; + color: @nav-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.nav-ui-btn-ctrl-color-focus() { + background-color: @nav-icon-focus; + color: @nav-icon-inverted-focus; +} + +// Outline +// TODO need to invert .pagelevelprogress__indicator border color +.nav-ui-btn-ctrl-color-outline() { + background-color: @nav-icon-inverted; + color: @nav-icon; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; +} + +.nav-ui-btn-ctrl-color-outline-hover() { + .nav-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.nav-ui-btn-ctrl-color-outline-focus() { + .nav-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-focus inset; +} + +// Plain +.nav-ui-btn-ctrl-color-plain() { + background-color: transparent; + color: @nav-icon; +} + +.nav-ui-btn-ctrl-color-plain-hover() { + background-color: transparent; + color: @nav-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.nav-ui-btn-ctrl-color-plain-focus() { + background-color: transparent; + color: @nav-icon-focus; +} diff --git a/less/_defaults/_buttonMixins/_notifyBtnStyles.less b/less/_defaults/_buttonMixins/_notifyBtnStyles.less new file mode 100644 index 00000000..2439c228 --- /dev/null +++ b/less/_defaults/_buttonMixins/_notifyBtnStyles.less @@ -0,0 +1,100 @@ +// -------------------------------------------------- +// NOTIFY BTN COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.notify-btn-color() { + background-color: @notify-btn; + color: @notify-btn-inverted; +} + +.notify-btn-color-hover() { + background-color: @notify-btn-hover; + color: @notify-btn-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-btn-color-focus() { + background-color: @notify-btn-focus; + color: @notify-btn-inverted-focus; +} + +.notify-btn-color-selected() { + background-color: @notify-btn-selected; + color: @notify-btn-inverted-selected; +} + +.notify-btn-color-locked() { + background-color: @notify-btn-locked; + color: @notify-btn-inverted-locked; +} + +.notify-btn-color-disabled() { + background-color: @notify-btn-disabled; + color: @notify-btn-inverted-disabled; +} + +// Outline +.notify-btn-color-outline() { + background-color: @notify-btn-inverted; + color: @notify-btn; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset; +} + +.notify-btn-color-outline-hover() { + .notify-btn-color-hover; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-btn-color-outline-focus() { + .notify-btn-color-focus; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-focus inset; +} + +.notify-btn-color-outline-selected() { + .notify-btn-color-selected; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-selected inset; +} + +.notify-btn-color-outline-locked() { + .notify-btn-color-locked; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-locked inset; +} + +.notify-btn-color-outline-disabled() { + .notify-btn-color-disabled; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset; +} + +// Plain +.notify-btn-color-plain() { + background-color: transparent; + color: @notify-btn; +} + +.notify-btn-color-plain-hover() { + background-color: transparent; + color: @notify-btn-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-btn-color-plain-focus() { + background-color: transparent; + color: @notify-btn-focus; +} + +.notify-btn-color-plain-selected() { + background-color: transparent; + color: @notify-btn-selected; +} + +.notify-btn-color-plain-locked() { + background-color: transparent; + color: @notify-btn-locked; +} + +.notify-btn-color-plain-disabled() { + background-color: transparent; + color: @notify-btn-disabled; +} diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUiStyles.less new file mode 100644 index 00000000..dfe3e10a --- /dev/null +++ b/less/_defaults/_buttonMixins/_notifyUiStyles.less @@ -0,0 +1,65 @@ +// -------------------------------------------------- +// NOTIFY UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.notify-ui-btn-ctrl-color() { + background-color: @notify-icon; + color: @notify-icon-inverted; +} + +.notify-ui-btn-ctrl-color-hover() { + background-color: @notify-icon-hover; + color: @notify-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-ui-btn-ctrl-color-focus() { + background-color: @notify-icon-focus; + color: @notify-icon-inverted-focus; +} + +.notify-ui-btn-ctrl-color-disabled() { + background-color: @notify-icon-disabled; + color: @notify-icon-inverted-disabled; +} + +// Outline +.notify-ui-btn-ctrl-color-outline() { + background-color: @notify-icon; + color: @notify-icon-inverted; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-inverted inset; +} + +.notify-ui-btn-ctrl-color-outline-hover() { + .notify-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-ui-btn-ctrl-color-outline-focus() { + .notify-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; +} + +.notify-ui-btn-ctrl-color-outline-disabled() { + .notify-ui-btn-ctrl-color-disabled; + box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-disabled inset; +} + +// Plain +.notify-ui-btn-ctrl-color-plain() { + background-color: transparent; + color: @notify-icon-inverted; +} + +.notify-ui-btn-ctrl-color-plain-hover() { + background-color: transparent; + color: @notify-icon-hover; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-ui-btn-ctrl-color-plain-focus() { + background-color: transparent; + color: @notify-icon-focus; +} diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 5b906268..b4da9adf 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -48,7 +48,7 @@ @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; -// TODO +// ! TODO // aka @item-color-visited but avoiding breaking chnage // @visited is only used by presentation components @visited: darken(@item-color, 15%); @@ -61,6 +61,9 @@ @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; +// Outline +@item-color-border-color: @item-color; + // Content UI (action not content) // boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle // logic: if outputting course content into word doc, these buttons wouldn’t need including @@ -104,10 +107,13 @@ @btn-color-locked: @disabled; @btn-color-inverted-locked: @disabled-inverted; -// TODO +// ! TODO // aka @btn-color-disabled but avoiding breaking chnage @disabled: @grey; @disabled-inverted: @black; + +@btn-color-disabled: @disabled; +@btn-color-disabled-inverted: @disabled-inverted; // @btn-color-disabled: @disabled; diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 346f68e2..2038a3e5 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -1,766 +1,135 @@ -// TODO separate mixins into separate 'button type' files - -// ! Temp button style vars - naming tbc -@content-item-style: outline; -@content-ui-btn-style: outline; -@button-style: outline; // content-button -@menu-item-btn-style: outline; -@global-ui-btn-style: outline; -@nav-ui-btn-style: @global-ui-btn-style; -@notify-btn-style: outline; -@notify-ui-btn-style: @global-ui-btn-style; -@drawer-ui-btn-style: @global-ui-btn-style; -@drawer-item-style: outline; - -// Content item -// Default - Filled -.item-color() { - background-color: @item-color; - color: @item-color-inverted; -} - -.item-color-hover() { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-color-focus() { - background-color: @item-color-focus; - color: @item-color-inverted-focus; -} - -.item-color-selected() { - background-color: @item-color-selected; - color: @item-color-inverted-selected; -} - -.item-color-visited() { - background-color: @visited; - color: @visited-inverted; -} - -.item-color-disabled() { - background-color: @item-color-disabled; - color: @item-color-inverted-disabled; -} - -// Outline -.item-color-outline() { - background-color: @item-color-inverted; - color: @item-color; - box-shadow: 0 0 0 @item-color-border-width @item-color inset; -} - -.item-color-outline-hover() { - .item-color-hover; - box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.item-color-outline-focus() { - .item-color-focus; - box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset; -} - -.item-color-outline-selected() { - .item-color-selected; - box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset; -} - -.item-color-outline-visited() { - .item-color-visited; - box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset; -} - -.item-color-outline-disabled() { - .item-color-disabled; - box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; -} - -// Plain -.item-color-plain() { - background-color: transparent; - color: @item-color; -} - -.item-color-plain-hover() { - background-color: transparent; - color: @item-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-color-plain-focus() { - background-color: transparent; - color: @item-color-focus; -} - -.item-color-plain-selected() { - background-color: transparent; - color: @item-color-selected; -} - -.item-color-plain-locked() { - background-color: transparent; - color: @item-color-locked; -} - -.item-color-plain-disabled() { - background-color: transparent; - color: @item-color-disabled; -} - - -// Content item ui button -// Default - Filled -.item-ui-color() { - background-color: @item-ui-color; - color: @item-ui-color-inverted; -} - -.item-ui-color-hover() { - background-color: @item-ui-color-hover; - color: @item-ui-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-ui-color-focus() { - background-color: @item-ui-color-focus; - color: @item-ui-color-inverted-focus; -} - -.item-ui-color-visited() { - background-color: @item-ui-color-visited; - color: @item-ui-color-inverted-visited; -} - -.item-ui-color-selected() { - background-color: @item-ui-color-selected; - color: @item-ui-color-inverted-selected; -} - -.item-ui-color-locked() { - background-color: @item-ui-color-locked; - color: @item-ui-color-inverted-locked; -} - -.item-ui-color-disabled() { - background-color: @item-ui-color-disabled; - color: @item-ui-color-inverted-disabled; -} - -// Outline -.item-ui-color-outline() { - background-color: @item-ui-color-inverted; - color: @item-ui-color; - box-shadow: 0 0 0 @item-ui-color-border-width @item-color inset; -} - -.item-ui-color-outline-hover() { - .item-ui-color-hover; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.item-ui-color-outline-focus() { - .item-ui-color-focus; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-focus inset; -} - -.item-ui-color-outline-selected() { - .item-ui-color-selected; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-selected inset; -} - -.item-ui-color-outline-visited() { - .item-ui-color-visited; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-visited inset; -} - -.item-ui-color-outline-locked() { - .item-ui-color-locked; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-locked inset; -} - -.item-ui-color-outline-disabled() { - .item-ui-color-disabled; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-disabled inset; -} - -// Plain -.item-ui-color-plain() { - background-color: transparent; - color: @item-ui-color; -} - -.item-ui-color-plain-hover() { - background-color: transparent; - color: @item-ui-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-ui-color-plain-focus() { - background-color: transparent; - color: @item-ui-color-focus; -} - -.item-ui-color-plain-selected() { - background-color: transparent; - color: @item-ui-color-selected; -} - -.item-ui-color-plain-locked() { - background-color: transparent; - color: @item-ui-color-locked; -} - -.item-ui-color-plain-disabled() { - background-color: transparent; - color: @item-ui-color-disabled; -} - - -// Content buttons -// Default - Filled -.btn-color() { - background-color: @btn-color; - color: @btn-color-inverted; -} - -.btn-color-hover() { - background-color: @btn-color-hover; - color: @btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.btn-color-focus() { - background-color: @btn-color-focus; - color: @btn-color-inverted-focus; -} - -.btn-color-selected() { - background-color: @btn-color-selected; - color: @btn-color-inverted-selected; -} - -.btn-color-locked() { - background-color: @btn-color-locked; - color: @btn-color-inverted-locked; -} - -.btn-color-disabled() { - background-color: @btn-color-disabled; - color: @btn-color-inverted-disabled; -} - -// Outline -.btn-color-outline() { - background-color: @btn-color-inverted; - color: @btn-color; - box-shadow: 0 0 0 @btn-color-border-width @btn-color inset; -} - -.btn-color-outline-hover() { - .btn-color-hover; - box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.btn-color-outline-focus() { - .btn-color-focus; - box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset; -} - -.btn-color-outline-selected() { - .btn-color-selected; - box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset; -} - -.btn-color-outline-locked() { - .btn-color-locked; - box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset; -} - -.btn-color-outline-disabled() { - .btn-color-disabled; - box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset; -} - -// Plain -.btn-color-plain() { - background-color: transparent; - color: @btn-color; -} - -.btn-color-plain-hover() { - background-color: transparent; - color: @btn-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.btn-color-plain-focus() { - background-color: transparent; - color: @btn-color-focus; -} - -.btn-color-plain-selected() { - background-color: transparent; - color: @btn-color-selected; -} - -.btn-color-plain-locked() { - background-color: transparent; - color: @btn-color-locked; -} - -.btn-color-plain-disabled() { - background-color: transparent; - color: @btn-color-disabled; -} - - -// Menu item -// Default - Filled -.menu-item-btn-color() { - background-color: @menu-item-btn-color; - color: @menu-item-btn-color-inverted; -} - -.menu-item-btn-color-hover() { - background-color: @menu-item-btn-color-hover; - color: @menu-item-btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.menu-item-btn-color-focus() { - background-color: @menu-item-btn-color-focus; - color: @menu-item-btn-color-inverted-focus; -} - -.menu-item-btn-color-locked() { - background-color: @menu-item-btn-color-locked; - color: @menu-item-btn-color-inverted-locked; -} - -// Outline -.menu-item-btn-color-outline() { - background-color: @menu-item-btn-color-inverted; - color: @menu-item-btn-color; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color inset; -} - -.menu-item-btn-color-outline-hover() { - .menu-item-btn-color-hover; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.menu-item-btn-color-outline-focus() { - .menu-item-btn-color-focus; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-focus inset; -} - -.menu-item-btn-color-outline-selected() { - .menu-item-btn-color-selected; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-selected inset; -} - -.menu-item-btn-color-outline-locked() { - .menu-item-btn-color-locked; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-locked inset; -} - -.menu-item-btn-color-outline-disabled() { - .menu-item-btn-color-disabled; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-disabled inset; -} - -// Plain -.menu-item-btn-color-plain() { - background-color: transparent; - color: @menu-item-btn-color; -} - -.menu-item-btn-color-plain-hover() { - background-color: transparent; - color: @menu-item-btn-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.menu-item-btn-color-plain-focus() { - background-color: transparent; - color: @menu-item-btn-color-focus; -} - -.menu-item-btn-color-plain-selected() { - background-color: transparent; - color: @menu-item-btn-color-selected; -} - -.menu-item-btn-color-plain-locked() { - background-color: transparent; - color: @menu-item-btn-color-locked; -} - -.menu-item-btn-color-plain-disabled() { - background-color: transparent; - color: @menu-item-btn-color-disabled; -} - - -// UI (nav, notify, drawer) - -// Nav UI -// Default - Filled -.nav-ui-btn-ctrl-color() { - background-color: @nav-icon; - color: @nav-icon-inverted; -} - -.nav-ui-btn-ctrl-color-hover() { - background-color: @nav-icon-hover; - color: @nav-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.nav-ui-btn-ctrl-color-focus() { - background-color: @nav-icon-focus; - color: @nav-icon-inverted-focus; -} - -// Outline -// TODO need to invert .pagelevelprogress__indicator border color -.nav-ui-btn-ctrl-color-outline() { - background-color: @nav-icon-inverted; - color: @nav-icon; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; -} - -.nav-ui-btn-ctrl-color-outline-hover() { - .nav-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.nav-ui-btn-ctrl-color-outline-focus() { - .nav-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-focus inset; -} - -// Plain -.nav-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @nav-icon; -} - -.nav-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @nav-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.nav-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @nav-icon-focus; -} - - -// Notify UI -// Default - Filled -.notify-ui-btn-ctrl-color() { - background-color: @notify-icon; - color: @notify-icon-inverted; -} - -.notify-ui-btn-ctrl-color-hover() { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.notify-ui-btn-ctrl-color-focus() { - background-color: @notify-icon-focus; - color: @notify-icon-inverted-focus; -} - -.notify-ui-btn-ctrl-color-disabled() { - background-color: @notify-icon-disabled; - color: @notify-icon-inverted-disabled; -} - -// Outline -.notify-ui-btn-ctrl-color-outline() { - background-color: @notify-icon; - color: @notify-icon-inverted; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-inverted inset; -} - -.notify-ui-btn-ctrl-color-outline-hover() { - .notify-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.notify-ui-btn-ctrl-color-outline-focus() { - .notify-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; -} - -.notify-ui-btn-ctrl-color-outline-disabled() { - .notify-ui-btn-ctrl-color-disabled; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-disabled inset; -} - -// Plain -.notify-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @notify-icon-inverted; -} - -.notify-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @notify-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.notify-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @notify-icon-focus; -} - - - -// Notify button -// Default - Filled -.notify-btn-color() { - background-color: @notify-btn; - color: @notify-btn-inverted; -} - -.notify-btn-color-hover() { - background-color: @notify-btn-hover; - color: @notify-btn-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.notify-btn-color-focus() { - background-color: @notify-btn-focus; - color: @notify-btn-inverted-focus; -} - -.notify-btn-color-selected() { - background-color: @notify-btn-selected; - color: @notify-btn-inverted-selected; -} - -.notify-btn-color-locked() { - background-color: @notify-btn-locked; - color: @notify-btn-inverted-locked; -} - -.notify-btn-color-disabled() { - background-color: @notify-btn-disabled; - color: @notify-btn-inverted-disabled; -} - -// Outline -.notify-btn-color-outline() { - background-color: @notify-btn-inverted; - color: @notify-btn; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset; -} - -.notify-btn-color-outline-hover() { - .notify-btn-color-hover; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.notify-btn-color-outline-focus() { - .notify-btn-color-focus; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-focus inset; -} - -.notify-btn-color-outline-selected() { - .notify-btn-color-selected; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-selected inset; -} - -.notify-btn-color-outline-locked() { - .notify-btn-color-locked; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-locked inset; -} - -.notify-btn-color-outline-disabled() { - .notify-btn-color-disabled; - box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset; -} - -// Plain -.notify-btn-color-plain() { - background-color: transparent; - color: @notify-btn; -} - -.notify-btn-color-plain-hover() { - background-color: transparent; - color: @notify-btn-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.notify-btn-color-plain-focus() { - background-color: transparent; - color: @notify-btn-focus; -} - -.notify-btn-color-plain-selected() { - background-color: transparent; - color: @notify-btn-selected; -} - -.notify-btn-color-plain-locked() { - background-color: transparent; - color: @notify-btn-locked; -} - -.notify-btn-color-plain-disabled() { - background-color: transparent; - color: @notify-btn-disabled; -} - - -// Drawer UI -// Default - Filled -.drawer-ui-btn-ctrl-color() { - background-color: @drawer-icon; - color: @drawer-icon-inverted; -} - -.drawer-ui-btn-ctrl-color-hover() { - background-color: @drawer-icon-hover; - color: @drawer-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.drawer-ui-btn-ctrl-color-focus() { - background-color: @drawer-icon-focus; - color: @drawer-icon-inverted-focus; -} - -// Outline -.drawer-ui-btn-ctrl-color-outline() { - background-color: @drawer-icon; - color: @drawer-icon-inverted; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-inverted inset; -} - -.drawer-ui-btn-ctrl-color-outline-hover() { - .drawer-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.drawer-ui-btn-ctrl-color-outline-focus() { - .drawer-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-focus inset; -} - -// Plain -.drawer-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @drawer-icon-inverted; -} - -.drawer-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @drawer-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.drawer-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @drawer-icon-focus; -} - -// Drawer item -// Default - Filled -.drawer-item-color() { - background-color: @drawer-item; - color: @drawer-item-inverted; - border-color: @drawer-item-hover; -} - -.drawer-item-color-hover() { - background-color: @drawer-item-hover; - color: @drawer-item-inverted-hover; - border-color: @drawer-item-hover; - .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;); -} - -.drawer-item-color-focus() { - background-color: @drawer-item-focus; - color: @drawer-item-inverted-focus; - border-color: @drawer-item-focus; -} - -.drawer-item-color-locked() { - background-color: @disabled; - color: @disabled-inverted; - border-color: @drawer-item-hover; -} - -.drawer-item-color-selected() { - background-color: @drawer-item-selected; - color: @drawer-item-inverted-selected; - border-color: @drawer-item-hover; -} - -// Outline -.drawer-item-color-outline() { - background-color: @drawer-item-inverted; - color: @drawer-item; - box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset; -} - -.drawer-item-color-outline-hover() { - .drawer-item-color-hover; - box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.drawer-item-color-outline-focus() { - .drawer-item-color-focus; - box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset; -} - -.drawer-item-color-outline-selected() { - .drawer-item-color-selected; - box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset; -} - -.drawer-item-color-outline-locked() { - .drawer-item-color-locked; - box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset; -} - -// Plain -.drawer-item-color-plain() { - background-color: transparent; - color: @drawer-item; -} - -.drawer-item-color-plain-hover() { - background-color: transparent; - color: @drawer-item-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.drawer-item-color-plain-focus() { - background-color: transparent; - color: @drawer-item-focus; -} - -.drawer-item-color-plain-selected() { - background-color: transparent; - color: @drawer-item-selected; -} \ No newline at end of file +// ! TODO Temp button style vars - naming tbc +// PR required - https://github.com/adaptlearning/adapt_framework/pull/3578 +// config.json + // "themeVariables": { + // "_styles": { + // "item-color-style": "outline", + // "item-ui-color-style": "outline", + // "btn-color-style": "outline", + // "menu-item-btn-color-style": "outline", + // "ui-color-style": "outline", + // "nav-ui-btn-ctrl-color-style": "outline", + // "notify-ui-btn-ctrl-color-style": "outline", + // "notify-btn-color-style": "outline", + // "drawer-ui-btn-ctrl-color-style": "outline", + // "drawer-item-color-style": "outline" + // }, + // "_global": { + // "font-color": "", + // "font-color-inverted": "", + // "link": "", + // "link-inverted": "", + // "link-hover": "", + // "link-inverted-hover": "", + // "heading-color": "", + // "heading-color-inverted": "" + // }, + // "_items": { + // "item-color": "", + // "item-color-inverted": "", + // "item-color-hover": "", + // "item-color-inverted-hover": "", + // "item-color-selected": "", + // "item-color-inverted-selected": "", + // "visited": "", + // "visited-inverted": "" + // }, + // "_buttons": { + // "btn-color": "", + // "btn-color-inverted": "", + // "btn-color-hover": "", + // "btn-color-inverted-hover": "", + // "btn-icon-color": "", + // "btn-icon-color-inverted": "", + // "btn-icon-color-hover": "", + // "btn-icon-color-inverted-hover": "", + // "disabled": "", + // "disabled-inverted": "" + // }, + // "_validation": { + // "validation-success": "", + // "validation-success-inverted": "", + // "validation-error": "", + // "validation-error-inverted": "" + // }, + // "_progress": { + // "progress": "", + // "progress-inverted": "", + // "progress-border": "" + // }, + // "_menu": { + // "menu-header-background-color": "", + // "menu-header-title-color": "", + // "menu-header-subtitle-color": "", + // "menu-header-body-color": "", + // "menu-header-instruction-color": "", + // "menu-item": "", + // "menu-item-inverted": "", + // "menu-item-border-color": "", + // "menu-item-progress": "", + // "menu-item-progress-inverted": "", + // "menu-item-progress-border": "", + // "menu-item-btn-color": "green", + // "menu-item-btn-color-inverted": "", + // "menu-item-btn-color-hover": "", + // "menu-item-btn-color-inverted-hover": "" + // }, + // "_nav": { + // "nav": "", + // "nav-inverted": "", + // "nav-icon": "", + // "nav-icon-inverted": "", + // "nav-icon-hover": "", + // "nav-icon-inverted-hover": "", + // "nav-progress": "", + // "nav-progress-inverted": "", + // "nav-progress-border": "", + // "nav-progress-hover": "", + // "nav-progress-inverted-hover": "", + // "nav-progress-border-hover": "" + // }, + // "_notify": { + // "notify": "", + // "notify-inverted": "", + // "notify-link": "", + // "notify-link-hover": "", + // "notify-btn": "", + // "notify-btn-inverted": "", + // "notify-btn-hover": "", + // "notify-btn-inverted-hover": "", + // "notify-icon": "", + // "notify-icon-inverted": "", + // "notify-icon-hover": "", + // "notify-icon-inverted-hover": "" + // }, + // "_drawer": { + // "drawer": "", + // "drawer-inverted": "", + // "drawer-link": "", + // "drawer-link-hover": "", + // "drawer-icon": "", + // "drawer-icon-inverted": "", + // "drawer-icon-hover": "", + // "drawer-icon-inverted-hover": "", + // "drawer-item": "", + // "drawer-item-inverted": "", + // "drawer-item-hover": "", + // "drawer-item-inverted-hover": "", + // "drawer-item-selected": "", + // "drawer-item-inverted-selected": "", + // "drawer-progress": "", + // "drawer-progress-inverted": "", + // "drawer-progress-border": "", + // "drawer-progress-hover": "", + // "drawer-progress-inverted-hover": "", + // "drawer-progress-border-hover": "" + // }, + // "_misc": { + // "background": "", + // "background-inverted": "", + // "shadow": "", + // "shadow-inverted": "", + // "loading": "", + // "loading-inverted": "" + // } + // } diff --git a/less/core/button.less b/less/core/button.less index 28bac3ee..bafda259 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -1,10 +1,9 @@ -@button-style: outline; .btn { &__container { margin-top: @btn-margin; } - // TODO Move generic button styling to new file + // ! TODO Move generic button styling to new file &-text { .button-text; } @@ -22,17 +21,14 @@ } // TODO END - // TODO - // undo overrides - // currently implemented for testing purposes &__action { - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .btn-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .btn-color-focus; } @@ -42,13 +38,13 @@ } } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { .btn-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .btn-color-outline-focus; } @@ -60,13 +56,13 @@ } &__feedback { - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .btn-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .btn-color-focus; } @@ -76,13 +72,13 @@ } } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { .btn-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .btn-color-outline-focus; } @@ -92,7 +88,6 @@ } } } - // end &__marking { padding: @item-padding * 0.75; diff --git a/less/core/drawer.less b/less/core/drawer.less index b5332ee4..29b23c55 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -9,25 +9,25 @@ &__btn { .ui-btn-ctrl; - & when (@drawer-ui-btn-style = filled) { + & when (@drawer-ui-btn-ctrl-color-style = filled) { .drawer-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-ui-btn-ctrl-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .drawer-ui-btn-ctrl-color-focus; } } - & when (@drawer-ui-btn-style = outline) { + & when (@drawer-ui-btn-ctrl-color-style = outline) { .drawer-ui-btn-ctrl-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-ui-btn-ctrl-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .drawer-ui-btn-ctrl-color-outline-focus; } diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 04393b5a..ce3066f3 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -12,25 +12,25 @@ border: @drawer-item-border-width solid; } - & when (@drawer-item-style = filled) { + & when (@drawer-item-color-style = filled) { .drawer-item-color(); .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-item-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .drawer-item-color-focus; } } - & when (@drawer-item-style = outline) { + & when (@drawer-item-color-style = outline) { .drawer-item-color-outline(); .no-touch &:not(.is-disabled):not(.is-locked):hover { .drawer-item-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .drawer-item-color-outline-focus; } @@ -39,11 +39,11 @@ &__item-btn.is-locked, &__item-btn.is-disabled { - & when (@drawer-item-style = filled) { + & when (@drawer-item-color-style = filled) { .drawer-item-color-locked; } - & when (@drawer-item-style = outline) { + & when (@drawer-item-color-style = outline) { .drawer-item-color-outline-locked; } } @@ -51,11 +51,11 @@ // aria-current="true" is used by languagePicker &__item-btn[aria-current="true"], &__item-btn.is-selected { - & when (@drawer-item-style = filled) { + & when (@drawer-item-color-style = filled) { .drawer-item-color-selected; } - & when (@drawer-item-style = outline) { + & when (@drawer-item-color-style = outline) { .drawer-item-color-outline-selected; } } diff --git a/less/core/nav.less b/less/core/nav.less index 79219c8c..ff7a7c13 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -15,25 +15,25 @@ padding: @nav-btn-padding-ver @nav-btn-padding-hoz; border-radius: @nav-btn-border-radius; - & when (@nav-ui-btn-style = filled) { + & when (@nav-ui-btn-ctrl-color-style = filled) { .nav-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .nav-ui-btn-ctrl-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .nav-ui-btn-ctrl-color-focus; } } - & when (@nav-ui-btn-style = outline) { + & when (@nav-ui-btn-ctrl-color-style = outline) { .nav-ui-btn-ctrl-color-outline; - + .no-touch &:not(.is-disabled):not(.is-locked):hover { .nav-ui-btn-ctrl-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .nav-ui-btn-ctrl-color-outline-focus; } diff --git a/less/core/notify.less b/less/core/notify.less index c0efaf6d..2ff0848e 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -56,25 +56,25 @@ margin: @notify-btn-margin; padding: @notify-btn-padding-ver @notify-btn-padding-hoz; - & when (@notify-btn-style = filled) { + & when (@notify-btn-color-style = filled) { .notify-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-btn-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .notify-btn-color-focus; } } - & when (@notify-btn-style = outline) { + & when (@notify-btn-color-style = outline) { .notify-btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-btn-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .notify-btn-color-outline-focus; } @@ -82,11 +82,11 @@ } &__btn.is-disabled { - & when (@notify-btn-style = filled) { + & when (@notify-btn-color-style = filled) { .notify-btn-color-disabled; } - & when (@notify-btn-style = outline) { + & when (@notify-btn-color-style = outline) { .notify-btn-color-outline-disabled; } } @@ -95,25 +95,25 @@ &__btn-icon { .ui-btn-ctrl; - & when (@notify-btn-style = filled) { + & when (@notify-btn-color-style = filled) { .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-ui-btn-ctrl-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .notify-ui-btn-ctrl-color-focus; } } - & when (@notify-btn-style = outline) { + & when (@notify-btn-color-style = outline) { .notify-ui-btn-ctrl-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { .notify-ui-btn-ctrl-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .notify-ui-btn-ctrl-color-outline-focus; } diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 9a3d0551..ce9864f0 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -35,7 +35,7 @@ right: 0; .ui-btn-ctrl; - & when (@notify-ui-btn-style = filled) { + & when (@notify-ui-btn-ctrl-color-style = filled) { .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -47,7 +47,7 @@ } } - & when (@notify-ui-btn-style = outline) { + & when (@notify-ui-btn-ctrl-color-style = outline) { .notify-ui-btn-ctrl-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index 5f6e5fe2..926f5adb 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -9,25 +9,25 @@ text-align: start; border-radius: @item-border-radius; - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color; .no-touch &:not(.is-selected):hover { .item-color-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .item-color-focus; } } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline; .no-touch &:not(.is-selected):hover { .item-color-outline-hover; } - + html:not(.a11y-disable-focusoutline) &:focus-visible { .item-color-outline-focus; } @@ -35,21 +35,21 @@ } &__btn.is-visited { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-visited; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-visited; } } &__btn.is-selected { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-selected; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less index acb527e2..496b5378 100644 --- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less +++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less @@ -4,7 +4,7 @@ } &__retry-btn { - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -16,7 +16,7 @@ } } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -30,11 +30,11 @@ } &__retry-btn.is-disabled { - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color-disabled; } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline-disabled; } } diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index b3ec848c..f5b55fc6 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -44,7 +44,7 @@ } &__button { - & when (@menu-item-btn-style = filled) { + & when (@menu-item-btn-color-style = filled) { .menu-item-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -56,7 +56,7 @@ } } - & when (@menu-item-btn-style = outline) { + & when (@menu-item-btn-color-style = outline) { .menu-item-btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -70,11 +70,11 @@ } &__button.is-locked { - & when (@menu-item-btn-style = filled) { + & when (@menu-item-btn-color-style = filled) { .menu-item-btn-color-locked; } - & when (@menu-item-btn-style = outline) { + & when (@menu-item-btn-color-style = outline) { .menu-item-btn-color-outline-locked; } } diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index 70541a39..bec6f229 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -12,51 +12,51 @@ padding: @item-padding / 2; border-radius: @item-border-radius; - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline; } } .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-hover; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-hover; } } html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-focus; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-focus; } } &__label.is-disabled &__option { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-disabled; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-disabled; } } &__label.is-selected &__option { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-selected; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index c4b12b12..cd0a43b0 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -10,41 +10,41 @@ &__pin:not(.has-pin-image) { border-radius: 50%; - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline; } .no-touch &:not(.is-disabled):not(.is-locked):hover { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-hover; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-hover; } } html:not(.a11y-disable-focusoutline) &:focus-visible { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-focus; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-focus; } } } &__pin:not(.has-pin-image).is-visited { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-visited; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-visited; } } diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 351ded66..7742b908 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -10,7 +10,7 @@ &__close { .ui-btn-ctrl; - & when (@notify-ui-btn-style = filled) { + & when (@notify-ui-btn-ctrl-color-style = filled) { .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -26,7 +26,7 @@ } } - & when (@notify-ui-btn-style = outline) { + & when (@notify-ui-btn-ctrl-color-style = outline) { .notify-ui-btn-ctrl-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less index 1c4bf7c7..292874a7 100644 --- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less +++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less @@ -27,7 +27,7 @@ &__language-btn { margin: @item-margin / 2; - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -39,7 +39,7 @@ } } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -53,11 +53,11 @@ } &__language-btn.is-disabled { - & when (@button-style = filled) { + & when (@btn-color-style = filled) { .btn-color-disabled; } - & when (@button-style = outline) { + & when (@btn-color-style = outline) { .btn-color-outline-disabled; } } diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 3ecedb73..6affc83b 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -7,7 +7,7 @@ line-height: @body-line-height; text-align: start; - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { @@ -19,7 +19,7 @@ } } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { @@ -33,21 +33,21 @@ } &__btn.is-disabled { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-disabled; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-disabled; } } &__btn[aria-expanded="true"] { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-selected; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-selected; } } @@ -72,7 +72,7 @@ .dropdown-item { padding: @item-padding; - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color; border-bottom: 1px solid @item-color-hover; @@ -96,11 +96,11 @@ } } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline; // TODO review application of 'outline' styles vs existing border styles // ? should border-bottom styles replace mixin box-shadow ? - + // border-bottom: 1px solid @item-color-hover; // &:last-child { diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index 3dba6740..5cdb5411 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -3,7 +3,7 @@ margin-bottom: @item-margin / 2; border-radius: @item-border-radius; - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color; .no-touch &:not(.is-disabled):not(.is-selected):hover { @@ -15,7 +15,7 @@ } } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline; .no-touch &:not(.is-disabled):not(.is-selected):hover { @@ -33,21 +33,21 @@ } &__label.is-disabled { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-disabled; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-disabled; } } &__label.is-selected { - & when (@content-item-style = filled) { + & when (@item-color-style = filled) { .item-color-selected; } - & when (@content-item-style = outline) { + & when (@item-color-style = outline) { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 9dc4b550..9d8b5ecd 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -7,7 +7,7 @@ padding: @item-padding; border-radius: @item-border-radius; - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color; .no-touch &:not([aria-expanded="true"]):hover { @@ -19,7 +19,7 @@ } } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline; .no-touch &:not([aria-expanded="true"]):hover { @@ -33,21 +33,21 @@ } &.is-complete &__transcript-btn { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-visited; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-visited; } } &__transcript-btn[aria-expanded="true"] { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-selected; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 47cfa6ea..321edaf8 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -9,7 +9,7 @@ } &__controls { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -21,7 +21,7 @@ } } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -35,11 +35,11 @@ } &__controls.is-disabled { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-disabled; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-disabled; } } @@ -66,11 +66,11 @@ &__strapline-btn { text-align: start; - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline; } } @@ -83,31 +83,31 @@ } .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-hover; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-hover; } } html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-focus; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-focus; } } &__strapline-btn.is-visited { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-visited; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-visited; } } diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index e513fd7b..dc6493a0 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -5,7 +5,7 @@ border-bottom: 1px solid; border-right: 1px solid; - & when (@drawer-item-style = filled) { + & when (@drawer-item-color-style = filled) { .drawer-item-color; .no-touch &:not(.is-disabled):not(.is-selected):hover { @@ -18,7 +18,7 @@ } // TODO review application of 'outline' styles vs existing border and box-shadow styles - & when (@drawer-item-style = outline) { + & when (@drawer-item-color-style = outline) { .drawer-item-color-outline; .no-touch &:not(.is-disabled):not(.is-selected):hover { diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index a1df81e0..05f34813 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,6 +1,6 @@ .trickle { &__btn { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -12,7 +12,7 @@ } } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -26,25 +26,25 @@ } &__btn.is-disabled { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-disabled; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-disabled; } } &__btn.is-locked { - & when (@content-ui-btn-style = filled) { + & when (@item-ui-color-style = filled) { .item-ui-color-locked; } - & when (@content-ui-btn-style = outline) { + & when (@item-ui-color-style = outline) { .item-ui-color-outline-locked; } } - + &__btn-icon { display: inline-block; vertical-align: middle; diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 2bfde080..157b9841 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -20,7 +20,7 @@ &__btn-icon { .ui-btn-ctrl; - & when (@notify-ui-btn-style = filled) { + & when (@notify-ui-btn-ctrl-color-style = filled) { .notify-ui-btn-ctrl-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -32,7 +32,7 @@ } } - & when (@notify-ui-btn-style = outline) { + & when (@notify-ui-btn-ctrl-color-style = outline) { .notify-ui-btn-ctrl-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -67,7 +67,7 @@ } &-type-overlay &__btn { - & when (@notify-btn-style = filled) { + & when (@notify-btn-color-style = filled) { .notify-btn-color; .no-touch &:hover { @@ -79,7 +79,7 @@ } } - & when (@notify-btn-style = outline) { + & when (@notify-btn-color-style = outline) { .notify-btn-color-outline; .no-touch &:hover { @@ -93,7 +93,7 @@ } &-type-overlay &__btn-icon { - & when (@notify-ui-btn-style = filled) { + & when (@notify-ui-btn-ctrl-color-style = filled) { .notify-ui-btn-ctrl-color; .no-touch &:hover { @@ -105,7 +105,7 @@ } } - & when (@notify-ui-btn-style = outline) { + & when (@notify-ui-btn-ctrl-color-style = outline) { .notify-ui-btn-ctrl-color-outline; .no-touch &:hover { From f060ca1f5eef53335effb866552731fc36c5d576 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 21 Jun 2024 15:23:27 +0100 Subject: [PATCH 61/86] Small optimisations --- less/core/button.less | 37 +------------------ .../adapt-contrib-hotgraphic/hotgraphic.less | 22 +++++------ 2 files changed, 11 insertions(+), 48 deletions(-) diff --git a/less/core/button.less b/less/core/button.less index bafda259..64b66fe0 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -19,42 +19,9 @@ &-icon.is-locked { cursor: not-allowed; } - // TODO END - - &__action { - & when (@btn-color-style = filled) { - .btn-color; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; - } - - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; - } - - &.is-disabled { - .btn-color-disabled; - } - } - - & when (@btn-color-style = outline) { - .btn-color-outline; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-outline-hover; - } - - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-outline-focus; - } - - &.is-disabled { - .btn-color-outline-disabled; - } - } - } + // ! TODO END + &__action, &__feedback { & when (@btn-color-style = filled) { .btn-color; diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index cd0a43b0..74a39f2b 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -12,28 +12,24 @@ & when (@item-ui-color-style = filled) { .item-ui-color; - } - & when (@item-ui-color-style = outline) { - .item-ui-color-outline; - } - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - & when (@item-ui-color-style = filled) { + .no-touch &:not(.is-disabled):not(.is-locked):hover { .item-ui-color-hover; } - & when (@item-ui-color-style = outline) { - .item-ui-color-outline-hover; + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; } } - html:not(.a11y-disable-focusoutline) &:focus-visible { - & when (@item-ui-color-style = filled) { - .item-ui-color-focus; + & when (@item-ui-color-style = outline) { + .item-ui-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; } - & when (@item-ui-color-style = outline) { + html:not(.a11y-disable-focusoutline) &:focus-visible { .item-ui-color-outline-focus; } } From 1db32543c58ed072d880b6ea00e10130c4b7edd3 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 21 Jun 2024 15:24:57 +0100 Subject: [PATCH 62/86] // ! todo comment updates --- less/_defaults/_buttonMixins/_navUiStyles.less | 2 +- less/_defaults/_spacing-config.less | 2 +- less/plugins/adapt-contrib-matching/dropdown.less | 2 +- less/plugins/adapt-contrib-resources/resources.less | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 388ebbe6..73f8359c 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -20,7 +20,7 @@ } // Outline -// TODO need to invert .pagelevelprogress__indicator border color +// ! TODO need to invert .pagelevelprogress__indicator border color .nav-ui-btn-ctrl-color-outline() { background-color: @nav-icon-inverted; color: @nav-icon; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 6a567e44..a87fb1f3 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -67,7 +67,7 @@ @progress-border-radius: 50px; -// TODO new file (separate item spacing vars from text spacing vars) +// ! TODO new file (separate item spacing vars from text spacing vars) // wait until work has been reviewed/approved to make it easier to diff compare // Menu header text margin diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 6affc83b..257fc7d2 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -98,7 +98,7 @@ & when (@item-color-style = outline) { .item-color-outline; - // TODO review application of 'outline' styles vs existing border styles + // ! TODO review application of 'outline' styles vs existing border styles // ? should border-bottom styles replace mixin box-shadow ? // border-bottom: 1px solid @item-color-hover; diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index dc6493a0..bffb864e 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -17,7 +17,7 @@ } } - // TODO review application of 'outline' styles vs existing border and box-shadow styles + // ! TODO review application of 'outline' styles vs existing border and box-shadow styles & when (@drawer-item-color-style = outline) { .drawer-item-color-outline; From 45c319d4d189c93ee8c5151ce7c1a9d8c079d5fa Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 24 Jun 2024 11:14:47 +0100 Subject: [PATCH 63/86] Added less style vars --- less/_defaults/_state-mixins.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index 2038a3e5..ca12fa58 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -1,4 +1,15 @@ // ! TODO Temp button style vars - naming tbc +@item-color-style: filled; +@item-ui-color-style: filled; +@btn-color-style: filled; +@menu-item-btn-color-style: filled; +@ui-color-style: filled; +@nav-ui-btn-ctrl-color-style: filled; +@notify-ui-btn-ctrl-color-style: filled; +@notify-btn-color-style: filled; +@drawer-ui-btn-ctrl-color-style: filled; +@drawer-item-color-style: filled; + // PR required - https://github.com/adaptlearning/adapt_framework/pull/3578 // config.json // "themeVariables": { From 0845a7644b27e56f840342920dd870d1983ebbff Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 24 Jun 2024 11:55:32 +0100 Subject: [PATCH 64/86] move question btn styles into separate file --- less/core/button.less | 48 +---------------------------------- less/core/questionButton.less | 46 +++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 47 deletions(-) create mode 100644 less/core/questionButton.less diff --git a/less/core/button.less b/less/core/button.less index 64b66fe0..f8e199d6 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -3,12 +3,12 @@ margin-top: @btn-margin; } - // ! TODO Move generic button styling to new file &-text { .button-text; } &-text { + // ! TODO set border-radius vars per button type border-radius: @btn-border-radius; } @@ -19,50 +19,4 @@ &-icon.is-locked { cursor: not-allowed; } - // ! TODO END - - &__action, - &__feedback { - & when (@btn-color-style = filled) { - .btn-color; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-hover; - } - - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-focus; - } - - &.is-disabled { - .btn-color-disabled; - } - } - - & when (@btn-color-style = outline) { - .btn-color-outline; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - .btn-color-outline-hover; - } - - html:not(.a11y-disable-focusoutline) &:focus-visible { - .btn-color-outline-focus; - } - - &.is-disabled { - .btn-color-outline-disabled; - } - } - } - - &__marking { - padding: @item-padding * 0.75; - border-radius: 50%; - } - - .can-show-marking &__action.is-full-width, - .can-show-marking &__feedback.is-full-width { - margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2); - } } diff --git a/less/core/questionButton.less b/less/core/questionButton.less new file mode 100644 index 00000000..429366ca --- /dev/null +++ b/less/core/questionButton.less @@ -0,0 +1,46 @@ +.btn { + &__action, + &__feedback { + & when (@btn-color-style = filled) { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + + &.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + + &.is-disabled { + .btn-color-outline-disabled; + } + } + } + + &__marking { + padding: @item-padding * 0.75; + border-radius: 50%; + } + + .can-show-marking &__action.is-full-width, + .can-show-marking &__feedback.is-full-width { + margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2); + } +} \ No newline at end of file From 08d8f85a61b18b5771eebc3a4abb8257ac9f2015 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 24 Jun 2024 12:15:15 +0100 Subject: [PATCH 65/86] Test code optimisation --- less/core/drawerItem.less | 41 +++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index ce3066f3..4b672b66 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -11,8 +11,10 @@ width: calc(100% ~'-' @total-margin); border: @drawer-item-border-width solid; } + } - & when (@drawer-item-color-style = filled) { + & when (@drawer-item-color-style = filled) { + &__item-btn { .drawer-item-color(); .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -24,7 +26,20 @@ } } - & when (@drawer-item-color-style = outline) { + &__item-btn.is-locked, + &__item-btn.is-disabled { + .drawer-item-color-locked; + } + + // aria-current="true" is used by languagePicker + &__item-btn[aria-current="true"], + &__item-btn.is-selected { + .drawer-item-color-selected; + } + } + + & when (@drawer-item-color-style = outline) { + &__item-btn { .drawer-item-color-outline(); .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -35,27 +50,15 @@ .drawer-item-color-outline-focus; } } - } - - &__item-btn.is-locked, - &__item-btn.is-disabled { - & when (@drawer-item-color-style = filled) { - .drawer-item-color-locked; - } - & when (@drawer-item-color-style = outline) { + &__item-btn.is-locked, + &__item-btn.is-disabled { .drawer-item-color-outline-locked; } - } - - // aria-current="true" is used by languagePicker - &__item-btn[aria-current="true"], - &__item-btn.is-selected { - & when (@drawer-item-color-style = filled) { - .drawer-item-color-selected; - } - & when (@drawer-item-color-style = outline) { + // aria-current="true" is used by languagePicker + &__item-btn[aria-current="true"], + &__item-btn.is-selected { .drawer-item-color-outline-selected; } } From 184073576a23e7db2dad9e10a183565412a7b9ba Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Tue, 25 Jun 2024 10:01:55 +0100 Subject: [PATCH 66/86] Code optimisation --- less/core/notify.less | 20 +++--- less/core/questionButton.less | 2 +- .../adapt-contrib-accordion/accordion.less | 32 ++++----- .../assessmentResults.less | 20 +++--- .../adapt-contrib-boxmenu/boxMenuItem.less | 20 +++--- less/plugins/adapt-contrib-gmcq/gmcq.less | 48 ++++++------- .../adapt-contrib-hotgraphic/hotgraphic.less | 20 +++--- .../languagePicker.less | 20 +++--- .../adapt-contrib-matching/dropdown.less | 32 ++++----- less/plugins/adapt-contrib-mcq/mcq.less | 40 +++++------ less/plugins/adapt-contrib-media/media.less | 32 ++++----- .../adapt-contrib-narrative/narrative.less | 70 +++++++++---------- .../adapt-contrib-trickle/trickle.less | 32 ++++----- less/plugins/adapt-contrib-tutor/tutor.less | 24 +++---- 14 files changed, 205 insertions(+), 207 deletions(-) diff --git a/less/core/notify.less b/less/core/notify.less index 2ff0848e..5aa70990 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -55,8 +55,10 @@ &__btn { margin: @notify-btn-margin; padding: @notify-btn-padding-ver @notify-btn-padding-hoz; + } - & when (@notify-btn-color-style = filled) { + & when (@notify-btn-color-style = filled) { + &__btn { .notify-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -68,7 +70,13 @@ } } - & when (@notify-btn-color-style = outline) { + &__btn.is-disabled { + .notify-btn-color-disabled; + } + } + + & when (@notify-btn-color-style = outline) { + &__btn { .notify-btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -79,14 +87,8 @@ .notify-btn-color-outline-focus; } } - } - - &__btn.is-disabled { - & when (@notify-btn-color-style = filled) { - .notify-btn-color-disabled; - } - & when (@notify-btn-color-style = outline) { + &__btn.is-disabled { .notify-btn-color-outline-disabled; } } diff --git a/less/core/questionButton.less b/less/core/questionButton.less index 429366ca..e9ee4f65 100644 --- a/less/core/questionButton.less +++ b/less/core/questionButton.less @@ -43,4 +43,4 @@ .can-show-marking &__feedback.is-full-width { margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2); } -} \ No newline at end of file +} diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index 926f5adb..92ecc7de 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -8,8 +8,10 @@ padding-inline: @item-padding (@icon-size + (@item-padding * 2)); text-align: start; border-radius: @item-border-radius; + } - & when (@item-color-style = filled) { + & when (@item-color-style = filled) { + &__btn { .item-color; .no-touch &:not(.is-selected):hover { @@ -21,7 +23,17 @@ } } - & when (@item-color-style = outline) { + &__btn.is-visited { + .item-color-visited; + } + + &__btn.is-selected { + .item-color-selected; + } + } + + & when (@item-color-style = outline) { + &__btn { .item-color-outline; .no-touch &:not(.is-selected):hover { @@ -32,24 +44,12 @@ .item-color-outline-focus; } } - } - - &__btn.is-visited { - & when (@item-color-style = filled) { - .item-color-visited; - } - & when (@item-color-style = outline) { + &__btn.is-visited { .item-color-outline-visited; } - } - - &__btn.is-selected { - & when (@item-color-style = filled) { - .item-color-selected; - } - & when (@item-color-style = outline) { + &__btn.is-selected { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less index 496b5378..e5571770 100644 --- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less +++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less @@ -3,8 +3,8 @@ margin-bottom: @component-body-margin; } - &__retry-btn { - & when (@btn-color-style = filled) { + & when (@btn-color-style = filled) { + &__retry-btn { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -16,7 +16,13 @@ } } - & when (@btn-color-style = outline) { + &__retry-btn.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + &__retry-btn { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -27,14 +33,8 @@ .btn-color-outline-focus; } } - } - - &__retry-btn.is-disabled { - & when (@btn-color-style = filled) { - .btn-color-disabled; - } - & when (@btn-color-style = outline) { + &__retry-btn.is-disabled { .btn-color-outline-disabled; } } diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index f5b55fc6..5951aba5 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -43,8 +43,8 @@ align-items: center; } - &__button { - & when (@menu-item-btn-color-style = filled) { + & when (@menu-item-btn-color-style = filled) { + &__button { .menu-item-btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -56,7 +56,13 @@ } } - & when (@menu-item-btn-color-style = outline) { + &__button.is-locked { + .menu-item-btn-color-locked; + } + } + + & when (@menu-item-btn-color-style = outline) { + &__button { .menu-item-btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -67,14 +73,8 @@ .menu-item-btn-color-outline-focus; } } - } - - &__button.is-locked { - & when (@menu-item-btn-color-style = filled) { - .menu-item-btn-color-locked; - } - & when (@menu-item-btn-color-style = outline) { + &__button.is-locked { .menu-item-btn-color-outline-locked; } } diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index bec6f229..28d0dea9 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -11,52 +11,48 @@ margin-top: @item-margin; padding: @item-padding / 2; border-radius: @item-border-radius; + } - & when (@item-color-style = filled) { + & when (@item-color-style = filled) { + &__option { .item-color; } - & when (@item-color-style = outline) { - .item-color-outline; - } - } - - .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { - & when (@item-color-style = filled) { + .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { .item-color-hover; } - & when (@item-color-style = outline) { - .item-color-outline-hover; + html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { + .item-color-focus; } - } - html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { - & when (@item-color-style = filled) { - .item-color-focus; + &__label.is-disabled &__option { + .item-color-disabled; } - & when (@item-color-style = outline) { - .item-color-outline-focus; + &__label.is-selected &__option { + .item-color-selected; } } - &__label.is-disabled &__option { - & when (@item-color-style = filled) { - .item-color-disabled; + & when (@item-color-style = outline) { + &__option { + .item-color-outline; } - & when (@item-color-style = outline) { - .item-color-outline-disabled; + .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { + .item-color-outline-hover; } - } - &__label.is-selected &__option { - & when (@item-color-style = filled) { - .item-color-selected; + html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { + .item-color-outline-focus; + } + + &__label.is-disabled &__option { + .item-color-outline-disabled; } - & when (@item-color-style = outline) { + &__label.is-selected &__option { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index 74a39f2b..d2d24947 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -9,8 +9,10 @@ &__pin:not(.has-pin-image) { border-radius: 50%; + } - & when (@item-ui-color-style = filled) { + & when (@item-ui-color-style = filled) { + &__pin:not(.has-pin-image) { .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -22,7 +24,13 @@ } } - & when (@item-ui-color-style = outline) { + &__pin:not(.has-pin-image).is-visited { + .item-ui-color-visited; + } + } + + & when (@item-ui-color-style = outline) { + &__pin:not(.has-pin-image) { .item-ui-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -33,14 +41,8 @@ .item-ui-color-outline-focus; } } - } - - &__pin:not(.has-pin-image).is-visited { - & when (@item-ui-color-style = filled) { - .item-ui-color-visited; - } - & when (@item-ui-color-style = outline) { + &__pin:not(.has-pin-image).is-visited { .item-ui-color-outline-visited; } } diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less index 292874a7..f1b15b74 100644 --- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less +++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less @@ -26,8 +26,10 @@ &__language-btn { margin: @item-margin / 2; + } - & when (@btn-color-style = filled) { + & when (@btn-color-style = filled) { + &__language-btn { .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -39,7 +41,13 @@ } } - & when (@btn-color-style = outline) { + &__language-btn.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + &__language-btn { .btn-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -50,14 +58,8 @@ .btn-color-outline-focus; } } - } - - &__language-btn.is-disabled { - & when (@btn-color-style = filled) { - .btn-color-disabled; - } - & when (@btn-color-style = outline) { + &__language-btn.is-disabled { .btn-color-outline-disabled; } } diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 257fc7d2..174d8d13 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -6,8 +6,10 @@ padding-inline: @item-padding (@icon-size + (@item-padding * 2)); line-height: @body-line-height; text-align: start; + } - & when (@item-color-style = filled) { + & when (@item-color-style = filled) { + &__btn { .item-color; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { @@ -19,7 +21,17 @@ } } - & when (@item-color-style = outline) { + &__btn.is-disabled { + .item-color-disabled; + } + + &__btn[aria-expanded="true"] { + .item-color-selected; + } + } + + & when (@item-color-style = outline) { + &__btn { .item-color-outline; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { @@ -30,24 +42,12 @@ .item-color-outline-focus; } } - } - - &__btn.is-disabled { - & when (@item-color-style = filled) { - .item-color-disabled; - } - & when (@item-color-style = outline) { + &__btn.is-disabled { .item-color-outline-disabled; } - } - - &__btn[aria-expanded="true"] { - & when (@item-color-style = filled) { - .item-color-selected; - } - & when (@item-color-style = outline) { + &__btn[aria-expanded="true"] { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index 5cdb5411..da96d37a 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -3,7 +3,13 @@ margin-bottom: @item-margin / 2; border-radius: @item-border-radius; - & when (@item-color-style = filled) { + .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { + .effect-scalePulse; + } + } + + & when (@item-color-style = filled) { + &__label { .item-color; .no-touch &:not(.is-disabled):not(.is-selected):hover { @@ -15,7 +21,17 @@ } } - & when (@item-color-style = outline) { + &__label.is-disabled { + .item-color-disabled; + } + + &__label.is-selected { + .item-color-selected; + } + } + + & when (@item-color-style = outline) { + &__label { .item-color-outline; .no-touch &:not(.is-disabled):not(.is-selected):hover { @@ -27,27 +43,11 @@ } } - .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { - .effect-scalePulse; - } - } - - &__label.is-disabled { - & when (@item-color-style = filled) { - .item-color-disabled; - } - - & when (@item-color-style = outline) { + &__label.is-disabled { .item-color-outline-disabled; } - } - - &__label.is-selected { - & when (@item-color-style = filled) { - .item-color-selected; - } - & when (@item-color-style = outline) { + &__label.is-selected { .item-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 9d8b5ecd..68ceb5e0 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -6,8 +6,10 @@ &__transcript-btn { padding: @item-padding; border-radius: @item-border-radius; + } - & when (@item-ui-color-style = filled) { + & when (@item-ui-color-style = filled) { + &__transcript-btn { .item-ui-color; .no-touch &:not([aria-expanded="true"]):hover { @@ -19,7 +21,17 @@ } } - & when (@item-ui-color-style = outline) { + &.is-complete &__transcript-btn { + .item-ui-color-visited; + } + + &__transcript-btn[aria-expanded="true"] { + .item-ui-color-selected; + } + } + + & when (@item-ui-color-style = outline) { + &__transcript-btn { .item-ui-color-outline; .no-touch &:not([aria-expanded="true"]):hover { @@ -30,24 +42,12 @@ .item-ui-color-outline-focus; } } - } - - &.is-complete &__transcript-btn { - & when (@item-ui-color-style = filled) { - .item-ui-color-visited; - } - & when (@item-ui-color-style = outline) { + &.is-complete &__transcript-btn { .item-ui-color-outline-visited; } - } - - &__transcript-btn[aria-expanded="true"] { - & when (@item-ui-color-style = filled) { - .item-ui-color-selected; - } - & when (@item-ui-color-style = outline) { + &__transcript-btn[aria-expanded="true"] { .item-ui-color-outline-selected; } } diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 321edaf8..ce56fc32 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -8,8 +8,8 @@ .link-text; } - &__controls { - & when (@item-ui-color-style = filled) { + & when (@item-ui-color-style = filled) { + &__controls { .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -21,7 +21,13 @@ } } - & when (@item-ui-color-style = outline) { + &__controls.is-disabled { + .item-ui-color-disabled; + } + } + + & when (@item-ui-color-style = outline) { + &__controls { .item-ui-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -32,14 +38,8 @@ .item-ui-color-outline-focus; } } - } - - &__controls.is-disabled { - & when (@item-ui-color-style = filled) { - .item-ui-color-disabled; - } - & when (@item-ui-color-style = outline) { + &__controls.is-disabled { .item-ui-color-outline-disabled; } } @@ -65,53 +65,51 @@ &__strapline-btn { text-align: start; + } - & when (@item-ui-color-style = filled) { + & when (@item-ui-color-style = filled) { + &__strapline-btn { .item-ui-color; } - & when (@item-ui-color-style = outline) { - .item-ui-color-outline; + .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; } - } - - // set icon background color to transparent to 'inherit' strapline styling - // prevents icon background obscuring the btn focus outline - &__strapline-icon { - background-color: transparent; - color: inherit; - } - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { - & when (@item-ui-color-style = filled) { - .item-ui-color-hover; + html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { + .item-ui-color-focus; } - & when (@item-ui-color-style = outline) { - .item-ui-color-outline-hover; + &__strapline-btn.is-visited { + .item-ui-color-visited; } } - html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { - & when (@item-ui-color-style = filled) { - .item-ui-color-focus; + & when (@item-ui-color-style = outline) { + &__strapline-btn { + .item-ui-color-outline; } - & when (@item-ui-color-style = outline) { - .item-ui-color-outline-focus; + .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; } - } - &__strapline-btn.is-visited { - & when (@item-ui-color-style = filled) { - .item-ui-color-visited; + html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { + .item-ui-color-outline-focus; } - & when (@item-ui-color-style = outline) { + &__strapline-btn.is-visited { .item-ui-color-outline-visited; } } + // set icon background color to transparent to 'inherit' strapline styling + // prevents icon background obscuring the btn focus outline + &__strapline-icon { + background-color: transparent; + color: inherit; + } + &.has-img-zoom &__slider-image-container { .img-zoom(); } diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index 05f34813..b94b6df4 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,6 +1,6 @@ .trickle { - &__btn { - & when (@item-ui-color-style = filled) { + & when (@item-ui-color-style = filled) { + &__btn { .item-ui-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -12,7 +12,17 @@ } } - & when (@item-ui-color-style = outline) { + &__btn.is-disabled { + .item-ui-color-disabled; + } + + &__btn.is-locked { + .item-ui-color-locked; + } + } + + & when (@item-ui-color-style = outline) { + &__btn { .item-ui-color-outline; .no-touch &:not(.is-disabled):not(.is-locked):hover { @@ -23,24 +33,12 @@ .item-ui-color-outline-focus; } } - } - &__btn.is-disabled { - & when (@item-ui-color-style = filled) { - .item-ui-color-disabled; - } - - & when (@item-ui-color-style = outline) { + &__btn.is-disabled { .item-ui-color-outline-disabled; } - } - - &__btn.is-locked { - & when (@item-ui-color-style = filled) { - .item-ui-color-locked; - } - & when (@item-ui-color-style = outline) { + &__btn.is-locked { .item-ui-color-outline-locked; } } diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 157b9841..668a1616 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -66,8 +66,8 @@ } } - &-type-overlay &__btn { - & when (@notify-btn-color-style = filled) { + & when (@notify-btn-color-style = filled) { + &-type-overlay &__btn { .notify-btn-color; .no-touch &:hover { @@ -79,33 +79,33 @@ } } - & when (@notify-btn-color-style = outline) { - .notify-btn-color-outline; + &-type-overlay &__btn-icon { + .notify-ui-btn-ctrl-color; .no-touch &:hover { - .notify-btn-color-outline-hover; + .notify-ui-btn-ctrl-color-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-btn-color-outline-focus; + .notify-ui-btn-ctrl-color-focus; } } } - &-type-overlay &__btn-icon { - & when (@notify-ui-btn-ctrl-color-style = filled) { - .notify-ui-btn-ctrl-color; + & when (@notify-btn-color-style = outline) { + &-type-overlay &__btn { + .notify-btn-color-outline; .no-touch &:hover { - .notify-ui-btn-ctrl-color-hover; + .notify-btn-color-outline-hover; } html:not(.a11y-disable-focusoutline) &:focus-visible { - .notify-ui-btn-ctrl-color-focus; + .notify-btn-color-outline-focus; } } - & when (@notify-ui-btn-ctrl-color-style = outline) { + &-type-overlay &__btn-icon { .notify-ui-btn-ctrl-color-outline; .no-touch &:hover { From b8e02e702595f04aefdfdfb1abe834c174d7cd98 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 1 Jul 2024 16:13:53 +0100 Subject: [PATCH 67/86] button border width variable amends - share border-width variable between drawer and notify UI button controls - remove reference to 'color' from border width variables - change reference from 'icon' to 'btn' for nav ui border-width variable for consistency with other nav btn spacing variables - move border-width variables into spacing less - set menu item to inherit its own border-radius variable --- less/_defaults/_buttonMixins/_drawerUiStyles.less | 6 +++--- less/_defaults/_buttonMixins/_itemUiStyles.less | 14 +++++++------- less/_defaults/_buttonMixins/_menuItemStyles.less | 12 ++++++------ less/_defaults/_buttonMixins/_navUiStyles.less | 6 +++--- less/_defaults/_buttonMixins/_notifyUiStyles.less | 8 ++++---- less/_defaults/_colors.less | 6 ------ less/_defaults/_spacing-config.less | 9 ++++++--- .../plugins/adapt-contrib-boxmenu/boxMenuItem.less | 4 ++++ 8 files changed, 33 insertions(+), 32 deletions(-) diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUiStyles.less index 5003a4ec..1886e3c1 100644 --- a/less/_defaults/_buttonMixins/_drawerUiStyles.less +++ b/less/_defaults/_buttonMixins/_drawerUiStyles.less @@ -23,18 +23,18 @@ .drawer-ui-btn-ctrl-color-outline() { background-color: @drawer-icon; color: @drawer-icon-inverted; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-inverted inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-inverted inset; } .drawer-ui-btn-ctrl-color-outline-hover() { .drawer-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-hover inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .drawer-ui-btn-ctrl-color-outline-focus() { .drawer-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @drawer-icon-border-width @drawer-icon-focus inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-focus inset; } // Plain diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUiStyles.less index 4d6447ef..2c2f8a83 100644 --- a/less/_defaults/_buttonMixins/_itemUiStyles.less +++ b/less/_defaults/_buttonMixins/_itemUiStyles.less @@ -43,38 +43,38 @@ .item-ui-color-outline() { background-color: @item-ui-color-inverted; color: @item-ui-color; - box-shadow: 0 0 0 @item-ui-color-border-width @item-color inset; + box-shadow: 0 0 0 @item-ui-border-width @item-color inset; } .item-ui-color-outline-hover() { .item-ui-color-hover; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-hover inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .item-ui-color-outline-focus() { .item-ui-color-focus; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-focus inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-focus inset; } .item-ui-color-outline-selected() { .item-ui-color-selected; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-selected inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-selected inset; } .item-ui-color-outline-visited() { .item-ui-color-visited; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-visited inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-visited inset; } .item-ui-color-outline-locked() { .item-ui-color-locked; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-locked inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-locked inset; } .item-ui-color-outline-disabled() { .item-ui-color-disabled; - box-shadow: 0 0 0 @item-ui-color-border-width @item-ui-color-disabled inset; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-disabled inset; } // Plain diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItemStyles.less index df5f8feb..988e41a7 100644 --- a/less/_defaults/_buttonMixins/_menuItemStyles.less +++ b/less/_defaults/_buttonMixins/_menuItemStyles.less @@ -28,33 +28,33 @@ .menu-item-btn-color-outline() { background-color: @menu-item-btn-color-inverted; color: @menu-item-btn-color; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color inset; } .menu-item-btn-color-outline-hover() { .menu-item-btn-color-hover; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-hover inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .menu-item-btn-color-outline-focus() { .menu-item-btn-color-focus; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-focus inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-focus inset; } .menu-item-btn-color-outline-selected() { .menu-item-btn-color-selected; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-selected inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-selected inset; } .menu-item-btn-color-outline-locked() { .menu-item-btn-color-locked; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-locked inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-locked inset; } .menu-item-btn-color-outline-disabled() { .menu-item-btn-color-disabled; - box-shadow: 0 0 0 @menu-item-btn-color-border-width @menu-item-btn-color-disabled inset; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-disabled inset; } // Plain diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 73f8359c..30d76752 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -24,18 +24,18 @@ .nav-ui-btn-ctrl-color-outline() { background-color: @nav-icon-inverted; color: @nav-icon; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon inset; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon inset; } .nav-ui-btn-ctrl-color-outline-hover() { .nav-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-hover inset; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .nav-ui-btn-ctrl-color-outline-focus() { .nav-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @nav-icon-border-width @nav-icon-focus inset; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-focus inset; } // Plain diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUiStyles.less index dfe3e10a..52f7ca4d 100644 --- a/less/_defaults/_buttonMixins/_notifyUiStyles.less +++ b/less/_defaults/_buttonMixins/_notifyUiStyles.less @@ -28,23 +28,23 @@ .notify-ui-btn-ctrl-color-outline() { background-color: @notify-icon; color: @notify-icon-inverted; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-inverted inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-inverted inset; } .notify-ui-btn-ctrl-color-outline-hover() { .notify-ui-btn-ctrl-color-hover; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-hover inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-hover inset; .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); } .notify-ui-btn-ctrl-color-outline-focus() { .notify-ui-btn-ctrl-color-focus; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-focus inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-focus inset; } .notify-ui-btn-ctrl-color-outline-disabled() { .notify-ui-btn-ctrl-color-disabled; - box-shadow: 0 0 0 @notify-icon-border-width @notify-icon-disabled inset; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-disabled inset; } // Plain diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index b4da9adf..110c84e6 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -181,8 +181,6 @@ @nav-icon-focus: @nav-icon-hover; @nav-icon-inverted-focus: @nav-icon-inverted-hover; -@nav-icon-border-width: 1px; - @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @nav-progress-border: @nav-icon-inverted; @@ -213,8 +211,6 @@ @notify-icon-disabled: @disabled; @notify-icon-inverted-disabled: @disabled-inverted; -@notify-icon-border-width: 1px; - // Button @notify-btn: @btn-color; @notify-btn-inverted: @btn-color-inverted; @@ -253,8 +249,6 @@ @drawer-icon-focus: @drawer-icon-hover; @drawer-icon-inverted-focus: @drawer-icon-inverted-hover; -@drawer-icon-border-width: 1px; - // Item @drawer-item: @drawer; @drawer-item-inverted: @drawer-inverted; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index a87fb1f3..9b2d29c0 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -12,7 +12,8 @@ // Content UI (action not content) // -------------------------------------------------- -@item-ui-color-border-width: 1px; +@item-ui-border-radius: @item-border-radius; +@item-ui-border-width: @item-color-border-width; // Content Button // -------------------------------------------------- @@ -28,11 +29,12 @@ @ui-btn-controls-padding: @btn-padding / 2; @ui-btn-controls-border-radius: 50%; +@ui-btn-controls-border-width: 1px; // Menu -// ? remove 'color' from 'border-width' vars ? // -------------------------------------------------- -@menu-item-btn-color-border-width: 1px; +@menu-item-btn-border-radius: @item-ui-border-radius; +@menu-item-btn-border-width: @item-ui-border-width; // Navigation // -------------------------------------------------- @@ -42,6 +44,7 @@ @nav-btn-padding-hoz: @icon-padding; @nav-btn-border-radius: 0; +@nav-btn-border-width: 1px; // Notify button // -------------------------------------------------- diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 5951aba5..713a855d 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -43,6 +43,10 @@ align-items: center; } + &__button { + border-radius: @menu-item-btn-border-radius; + } + & when (@menu-item-btn-color-style = filled) { &__button { .menu-item-btn-color; From f95324ea1843393563f698873b2443ea34004daf Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 1 Jul 2024 16:22:42 +0100 Subject: [PATCH 68/86] comments amended for deprecated color variables --- less/_defaults/_colors.less | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 110c84e6..e77f89ce 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -48,9 +48,9 @@ @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; -// ! TODO -// aka @item-color-visited but avoiding breaking chnage -// @visited is only used by presentation components +// DEPRECATED +// replaced by @item-color-visited and @item-color-inverted-visited +// Note: @visited is only used by presentation components @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; // @@ -107,13 +107,11 @@ @btn-color-locked: @disabled; @btn-color-inverted-locked: @disabled-inverted; -// ! TODO -// aka @btn-color-disabled but avoiding breaking chnage + +// DEPRECATED +// replaced by @btn-color-disabled and @btn-color-disabled-inverted @disabled: @grey; @disabled-inverted: @black; - -@btn-color-disabled: @disabled; -@btn-color-disabled-inverted: @disabled-inverted; // @btn-color-disabled: @disabled; From 2abcfad64fcac34d3e35915884bfc42cb12ec48a Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Mon, 1 Jul 2024 16:27:27 +0100 Subject: [PATCH 69/86] invert .pagelevelprogress__indicator border color for outline btn style --- less/_defaults/_buttonMixins/_navUiStyles.less | 1 - .../pageLevelProgressIndicator.less | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 30d76752..94f2d867 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -20,7 +20,6 @@ } // Outline -// ! TODO need to invert .pagelevelprogress__indicator border color .nav-ui-btn-ctrl-color-outline() { background-color: @nav-icon-inverted; color: @nav-icon; diff --git a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less index eb3a11d6..0ed13b16 100644 --- a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less +++ b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less @@ -44,6 +44,10 @@ .pagelevelprogress__nav-btn { .pagelevelprogress__indicator { border-color: @nav-progress-border; + + & when (@nav-ui-btn-ctrl-color-style = outline) { + border-color: @nav-progress-inverted; + } } .pagelevelprogress__indicator-inner { From 4d0ddd5776310261267fde6624c729e28aa1a131 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 5 Jul 2024 12:05:39 +0100 Subject: [PATCH 70/86] Matching drop down list item styling --- .../adapt-contrib-matching/dropdown.less | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 174d8d13..6e529a10 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -80,11 +80,15 @@ border-bottom: none; } - .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .no-touch &:hover, + .no-touch .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"]:hover { .item-color-hover; } - &:focus-visible, + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; + } + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { // This code can be used to style a non-native dropdown as closely // as possible to the default browser settings @@ -98,27 +102,27 @@ & when (@item-color-style = outline) { .item-color-outline; + // ! TODO review application of 'outline' styles vs existing border styles // ? should border-bottom styles replace mixin box-shadow ? + // * trial out turning off box shadow and replace with border + box-shadow: 0 0 0 0 black inset !important; + border-bottom: 1px solid @item-color-hover; - // border-bottom: 1px solid @item-color-hover; - - // &:last-child { - // border-bottom: none; - // } + &:last-child { + border-bottom: none; + } - .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .no-touch &:hover, + .no-touch .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"]:hover { .item-color-outline-hover; } - &:focus-visible, - .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { - // This code can be used to style a non-native dropdown as closely - // as possible to the default browser settings - // background-color: Highlight; - // background-color: -webkit-focus-ring-color; - // color: white; + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-outline-focus; + } + .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { .item-color-outline-selected; } } From 7c326728344216f8e0214feb22bfa5e63ab0f18b Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 5 Jul 2024 12:23:54 +0100 Subject: [PATCH 71/86] Resource comment updated --- less/plugins/adapt-contrib-resources/resources.less | 1 + 1 file changed, 1 insertion(+) diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index bffb864e..547020fe 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -18,6 +18,7 @@ } // ! TODO review application of 'outline' styles vs existing border and box-shadow styles + // * This review might tie nicely into some ideas about redoing the design of the drawer where we clearly separate the clickable part of the item as a button through the use of text and / or icon. & when (@drawer-item-color-style = outline) { .drawer-item-color-outline; From 39351d2bd507acaeee481508160bf897c01a92b4 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 5 Jul 2024 15:25:12 +0100 Subject: [PATCH 72/86] Border radius update --- less/_defaults/_buttonMixins/_btnStyles.less | 2 ++ .../_buttonMixins/_drawerItemStyles.less | 2 ++ less/_defaults/_buttonMixins/_itemStyles.less | 2 ++ .../_buttonMixins/_itemUiStyles.less | 2 ++ .../_buttonMixins/_menuItemStyles.less | 2 ++ .../_defaults/_buttonMixins/_navUiStyles.less | 2 ++ .../_buttonMixins/_notifyBtnStyles.less | 2 ++ less/_defaults/_spacing-config.less | 2 +- less/core/button.less | 9 --------- less/core/drawerItem.less | 1 - less/core/nav.less | 1 - .../adapt-contrib-accordion/accordion.less | 1 - .../adapt-contrib-boxmenu/boxMenuItem.less | 4 ---- less/plugins/adapt-contrib-gmcq/gmcq.less | 1 - .../adapt-contrib-hotgraphic/hotgraphic.less | 6 ++---- .../adapt-contrib-matching/dropdown.less | 4 ++++ less/plugins/adapt-contrib-mcq/mcq.less | 1 - less/plugins/adapt-contrib-media/media.less | 1 - less/plugins/adapt-contrib-slider/slider.less | 20 +++++++++---------- 19 files changed, 31 insertions(+), 34 deletions(-) diff --git a/less/_defaults/_buttonMixins/_btnStyles.less b/less/_defaults/_buttonMixins/_btnStyles.less index 689c27ea..4ae795c0 100644 --- a/less/_defaults/_buttonMixins/_btnStyles.less +++ b/less/_defaults/_buttonMixins/_btnStyles.less @@ -6,6 +6,7 @@ .btn-color() { background-color: @btn-color; color: @btn-color-inverted; + border-radius: @btn-border-radius; } .btn-color-hover() { @@ -39,6 +40,7 @@ background-color: @btn-color-inverted; color: @btn-color; box-shadow: 0 0 0 @btn-color-border-width @btn-color inset; + border-radius: @btn-border-radius; } .btn-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_drawerItemStyles.less b/less/_defaults/_buttonMixins/_drawerItemStyles.less index 9d4a2f01..b4e9d095 100644 --- a/less/_defaults/_buttonMixins/_drawerItemStyles.less +++ b/less/_defaults/_buttonMixins/_drawerItemStyles.less @@ -7,6 +7,7 @@ background-color: @drawer-item; color: @drawer-item-inverted; border-color: @drawer-item-hover; + border-radius: @drawer-item-border-radius; } .drawer-item-color-hover() { @@ -39,6 +40,7 @@ background-color: @drawer-item-inverted; color: @drawer-item; box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset; + border-radius: @drawer-item-border-radius; } .drawer-item-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_itemStyles.less b/less/_defaults/_buttonMixins/_itemStyles.less index e0386cb6..97b1b2c9 100644 --- a/less/_defaults/_buttonMixins/_itemStyles.less +++ b/less/_defaults/_buttonMixins/_itemStyles.less @@ -6,6 +6,7 @@ .item-color() { background-color: @item-color; color: @item-color-inverted; + border-radius: @item-border-radius; } .item-color-hover() { @@ -39,6 +40,7 @@ background-color: @item-color-inverted; color: @item-color; box-shadow: 0 0 0 @item-color-border-width @item-color inset; + border-radius: @item-border-radius; } .item-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUiStyles.less index 2c2f8a83..789be474 100644 --- a/less/_defaults/_buttonMixins/_itemUiStyles.less +++ b/less/_defaults/_buttonMixins/_itemUiStyles.less @@ -6,6 +6,7 @@ .item-ui-color() { background-color: @item-ui-color; color: @item-ui-color-inverted; + border-radius: @item-ui-border-radius; } .item-ui-color-hover() { @@ -44,6 +45,7 @@ background-color: @item-ui-color-inverted; color: @item-ui-color; box-shadow: 0 0 0 @item-ui-border-width @item-color inset; + border-radius: @item-ui-border-radius; } .item-ui-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItemStyles.less index 988e41a7..f548bda4 100644 --- a/less/_defaults/_buttonMixins/_menuItemStyles.less +++ b/less/_defaults/_buttonMixins/_menuItemStyles.less @@ -6,6 +6,7 @@ .menu-item-btn-color() { background-color: @menu-item-btn-color; color: @menu-item-btn-color-inverted; + border-radius: @menu-item-btn-border-radius; } .menu-item-btn-color-hover() { @@ -29,6 +30,7 @@ background-color: @menu-item-btn-color-inverted; color: @menu-item-btn-color; box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color inset; + border-radius: @menu-item-btn-border-radius; } .menu-item-btn-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 94f2d867..45dcfe99 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -6,6 +6,7 @@ .nav-ui-btn-ctrl-color() { background-color: @nav-icon; color: @nav-icon-inverted; + border-radius: @nav-btn-border-radius; } .nav-ui-btn-ctrl-color-hover() { @@ -24,6 +25,7 @@ background-color: @nav-icon-inverted; color: @nav-icon; box-shadow: 0 0 0 @nav-btn-border-width @nav-icon inset; + border-radius: @nav-btn-border-radius; } .nav-ui-btn-ctrl-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_notifyBtnStyles.less b/less/_defaults/_buttonMixins/_notifyBtnStyles.less index 2439c228..4e1582ad 100644 --- a/less/_defaults/_buttonMixins/_notifyBtnStyles.less +++ b/less/_defaults/_buttonMixins/_notifyBtnStyles.less @@ -6,6 +6,7 @@ .notify-btn-color() { background-color: @notify-btn; color: @notify-btn-inverted; + border-radius: @notify-btn-border-radius; } .notify-btn-color-hover() { @@ -39,6 +40,7 @@ background-color: @notify-btn-inverted; color: @notify-btn; box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset; + border-radius: @notify-btn-border-radius; } .notify-btn-color-outline-hover() { diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 9b2d29c0..a2d60849 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -53,6 +53,7 @@ @notify-btn-padding-ver: @btn-padding / 2; @notify-btn-padding-hoz: @btn-padding; +@notify-btn-border-radius: @btn-border-radius; @notify-btn-border-width: 1px; // Drawer item @@ -69,7 +70,6 @@ // -------------------------------------------------- @progress-border-radius: 50px; - // ! TODO new file (separate item spacing vars from text spacing vars) // wait until work has been reviewed/approved to make it easier to diff compare diff --git a/less/core/button.less b/less/core/button.less index f8e199d6..7c94ac2c 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -7,15 +7,6 @@ .button-text; } - &-text { - // ! TODO set border-radius vars per button type - border-radius: @btn-border-radius; - } - - &-icon { - border-radius: @btn-border-radius; - } - &-icon.is-locked { cursor: not-allowed; } diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index 4b672b66..3600d8a0 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -4,7 +4,6 @@ padding: @drawer-item-padding-ver @drawer-item-padding-hoz; margin: @drawer-item-margin; border-bottom: @drawer-item-border-width solid; - border-radius: @drawer-item-border-radius; & when (@drawer-item-margin > 0) { @total-margin: @drawer-item-margin * 2; diff --git a/less/core/nav.less b/less/core/nav.less index ff7a7c13..e74f2d92 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -13,7 +13,6 @@ &__btn { margin: @nav-btn-margin (@nav-btn-margin / 2); padding: @nav-btn-padding-ver @nav-btn-padding-hoz; - border-radius: @nav-btn-border-radius; & when (@nav-ui-btn-ctrl-color-style = filled) { .nav-ui-btn-ctrl-color; diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index 92ecc7de..cc8c8f0c 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -7,7 +7,6 @@ padding-bottom: @item-padding; padding-inline: @item-padding (@icon-size + (@item-padding * 2)); text-align: start; - border-radius: @item-border-radius; } & when (@item-color-style = filled) { diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 713a855d..5951aba5 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -43,10 +43,6 @@ align-items: center; } - &__button { - border-radius: @menu-item-btn-border-radius; - } - & when (@menu-item-btn-color-style = filled) { &__button { .menu-item-btn-color; diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index 28d0dea9..1b91289a 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -10,7 +10,6 @@ &__option { margin-top: @item-margin; padding: @item-padding / 2; - border-radius: @item-border-radius; } & when (@item-color-style = filled) { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index d2d24947..860352c2 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -7,13 +7,10 @@ } } - &__pin:not(.has-pin-image) { - border-radius: 50%; - } - & when (@item-ui-color-style = filled) { &__pin:not(.has-pin-image) { .item-ui-color; + border-radius: 50%; .no-touch &:not(.is-disabled):not(.is-locked):hover { .item-ui-color-hover; @@ -32,6 +29,7 @@ & when (@item-ui-color-style = outline) { &__pin:not(.has-pin-image) { .item-ui-color-outline; + border-radius: 50%; .no-touch &:not(.is-disabled):not(.is-locked):hover { .item-ui-color-outline-hover; diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 6e529a10..a5df38d2 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -11,6 +11,7 @@ & when (@item-color-style = filled) { &__btn { .item-color; + border-radius: 0; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { .item-color-hover; @@ -33,6 +34,7 @@ & when (@item-color-style = outline) { &__btn { .item-color-outline; + border-radius: 0; .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { .item-color-outline-hover; @@ -74,6 +76,7 @@ & when (@item-color-style = filled) { .item-color; + border-radius: 0; border-bottom: 1px solid @item-color-hover; &:last-child { @@ -102,6 +105,7 @@ & when (@item-color-style = outline) { .item-color-outline; + border-radius: 0; // ! TODO review application of 'outline' styles vs existing border styles // ? should border-bottom styles replace mixin box-shadow ? diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index da96d37a..dca0aed8 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -1,7 +1,6 @@ .mcq-item { &__label { margin-bottom: @item-margin / 2; - border-radius: @item-border-radius; .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { .effect-scalePulse; diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 68ceb5e0..8d409d1f 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -5,7 +5,6 @@ &__transcript-btn { padding: @item-padding; - border-radius: @item-border-radius; } & when (@item-ui-color-style = filled) { diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less index f3e94863..2e0beccf 100644 --- a/less/plugins/adapt-contrib-slider/slider.less +++ b/less/plugins/adapt-contrib-slider/slider.less @@ -9,16 +9,6 @@ min-height: 2.5rem; } - &__number, - &__number-selection, - &__number-model-answer { - height: 2.5rem; - width: 2.5rem; - line-height: 2.5; - text-align: center; - border-radius: 50%; - } - &__widget:not(.is-disabled) &__number { cursor: pointer; } @@ -31,6 +21,16 @@ .item-color; } + &__number, + &__number-selection, + &__number-model-answer { + height: 2.5rem; + width: 2.5rem; + line-height: 2.5; + text-align: center; + border-radius: 50%; + } + // Scale &__scale-container { background-color: lighten(@black, 75%); From 661e27481d3662b08f4bd63d451ceec59df63044 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 27 Nov 2024 17:05:31 +0000 Subject: [PATCH 73/86] deprecated @btn-icon-color vars added for legacy support only - prevent breaking change --- less/_defaults/_colors.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index e77f89ce..3a1cdae2 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -117,6 +117,15 @@ @btn-color-disabled: @disabled; @btn-color-inverted-disabled: @disabled-inverted; +// DEPRECATED +// for legacy support only, not utilised in _buttonMixins +@btn-icon-color: @nav-icon; +@btn-icon-color-inverted: @nav-icon-inverted; + +@btn-icon-color-hover: @nav-icon-hover; +@btn-icon-color-inverted-hover: @nav-icon-inverted-hover; +// + // UI (global default for nav, notify, drawer) // -------------------------------------------------- @ui-color: @white; From 7283845e7fba31216872db17c8a712cf74b91e13 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 27 Nov 2024 17:34:04 +0000 Subject: [PATCH 74/86] deprecated .notify-btn-icon mixin added for legacy support only - prevent breaking change --- less/_defaults/_btn-mixins.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less index 85f05b67..9d1b1ed7 100644 --- a/less/_defaults/_btn-mixins.less +++ b/less/_defaults/_btn-mixins.less @@ -1,6 +1,12 @@ // Notify and Drawer controls (< > x) -// moved existing shared styles into single mixin -// replaces .notify-btn-icon mixin + +// DEPRECATED +// for legacy support only, replaced by .ui-btn-ctrl() +.notify-btn-icon() { + .ui-btn-ctrl(); +} +// + .ui-btn-ctrl() { margin: @ui-btn-controls-margin; padding: @ui-btn-controls-padding; From 5dfd74b1d3cd646699614751afb656f337261308 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 4 Dec 2024 17:35:14 +0000 Subject: [PATCH 75/86] deprecated generic .btn-text and .btn-icon color styles added for legacy support only - prevent breaking change - @nav-icon-locked and @nav-icon-disabled color vars added --- .../_defaults/_buttonMixins/_navUiStyles.less | 10 +++++ less/_defaults/_colors.less | 6 +++ less/core/button.less | 44 +++++++++++++++++++ 3 files changed, 60 insertions(+) diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 45dcfe99..0932d5b5 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -20,6 +20,16 @@ color: @nav-icon-inverted-focus; } +.nav-ui-btn-ctrl-color-locked() { + background-color: @nav-icon-locked; + color: @nav-icon-inverted-locked; +} + +.nav-ui-btn-ctrl-color-disabled() { + background-color: @nav-icon-disabled; + color: @nav-icon-inverted-disabled; +} + // Outline .nav-ui-btn-ctrl-color-outline() { background-color: @nav-icon-inverted; diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 3a1cdae2..2ae87402 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -188,6 +188,12 @@ @nav-icon-focus: @nav-icon-hover; @nav-icon-inverted-focus: @nav-icon-inverted-hover; +@nav-icon-locked: @disabled; +@nav-icon-inverted-locked: @disabled-inverted; + +@nav-icon-disabled: @disabled; +@nav-icon-inverted-disabled: @disabled-inverted; + @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @nav-progress-border: @nav-icon-inverted; diff --git a/less/core/button.less b/less/core/button.less index 7c94ac2c..da4ca734 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -7,7 +7,51 @@ .button-text; } + &-text.is-locked, &-icon.is-locked { cursor: not-allowed; } + + // DEPRECATED + // legacy color styles for generic .btn-text and .btn-icon + // color mixins applied to plugin selectors instead + &-text { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &-text.is-disabled { + .btn-color-disabled; + } + + &-text.is-locked { + .btn-color-locked; + } + + &-icon { + .nav-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-focus; + } + } + + &-icon.is-disabled { + .nav-ui-btn-ctrl-color-disabled; + } + + &-icon.is-locked { + .nav-ui-btn-ctrl-color-locked; + } } From 6168a9a0ad9b989f948a008f7161604fb34d4cd7 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 5 Dec 2024 15:48:57 +0000 Subject: [PATCH 76/86] remove 'plain' button styles transparent buttons could be problematic accessibility wise --- less/_defaults/_buttonMixins/_btnStyles.less | 32 ------------------- .../_buttonMixins/_drawerItemStyles.less | 22 ------------- .../_buttonMixins/_drawerUiStyles.less | 17 ---------- less/_defaults/_buttonMixins/_itemStyles.less | 32 ------------------- .../_buttonMixins/_itemUiStyles.less | 32 ------------------- .../_buttonMixins/_menuItemStyles.less | 32 ------------------- .../_defaults/_buttonMixins/_navUiStyles.less | 17 ---------- .../_buttonMixins/_notifyBtnStyles.less | 32 ------------------- .../_buttonMixins/_notifyUiStyles.less | 17 ---------- 9 files changed, 233 deletions(-) diff --git a/less/_defaults/_buttonMixins/_btnStyles.less b/less/_defaults/_buttonMixins/_btnStyles.less index 4ae795c0..423fa017 100644 --- a/less/_defaults/_buttonMixins/_btnStyles.less +++ b/less/_defaults/_buttonMixins/_btnStyles.less @@ -68,35 +68,3 @@ .btn-color-disabled; box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset; } - -// Plain -.btn-color-plain() { - background-color: transparent; - color: @btn-color; -} - -.btn-color-plain-hover() { - background-color: transparent; - color: @btn-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.btn-color-plain-focus() { - background-color: transparent; - color: @btn-color-focus; -} - -.btn-color-plain-selected() { - background-color: transparent; - color: @btn-color-selected; -} - -.btn-color-plain-locked() { - background-color: transparent; - color: @btn-color-locked; -} - -.btn-color-plain-disabled() { - background-color: transparent; - color: @btn-color-disabled; -} diff --git a/less/_defaults/_buttonMixins/_drawerItemStyles.less b/less/_defaults/_buttonMixins/_drawerItemStyles.less index b4e9d095..789ac8cf 100644 --- a/less/_defaults/_buttonMixins/_drawerItemStyles.less +++ b/less/_defaults/_buttonMixins/_drawerItemStyles.less @@ -63,25 +63,3 @@ .drawer-item-color-locked; box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset; } - -// Plain -.drawer-item-color-plain() { - background-color: transparent; - color: @drawer-item; -} - -.drawer-item-color-plain-hover() { - background-color: transparent; - color: @drawer-item-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.drawer-item-color-plain-focus() { - background-color: transparent; - color: @drawer-item-focus; -} - -.drawer-item-color-plain-selected() { - background-color: transparent; - color: @drawer-item-selected; -} diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUiStyles.less index 1886e3c1..1d0ad742 100644 --- a/less/_defaults/_buttonMixins/_drawerUiStyles.less +++ b/less/_defaults/_buttonMixins/_drawerUiStyles.less @@ -36,20 +36,3 @@ .drawer-ui-btn-ctrl-color-focus; box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-focus inset; } - -// Plain -.drawer-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @drawer-icon-inverted; -} - -.drawer-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @drawer-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.drawer-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @drawer-icon-focus; -} diff --git a/less/_defaults/_buttonMixins/_itemStyles.less b/less/_defaults/_buttonMixins/_itemStyles.less index 97b1b2c9..2783eee4 100644 --- a/less/_defaults/_buttonMixins/_itemStyles.less +++ b/less/_defaults/_buttonMixins/_itemStyles.less @@ -68,35 +68,3 @@ .item-color-disabled; box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; } - -// Plain -.item-color-plain() { - background-color: transparent; - color: @item-color; -} - -.item-color-plain-hover() { - background-color: transparent; - color: @item-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-color-plain-focus() { - background-color: transparent; - color: @item-color-focus; -} - -.item-color-plain-selected() { - background-color: transparent; - color: @item-color-selected; -} - -.item-color-plain-locked() { - background-color: transparent; - color: @item-color-locked; -} - -.item-color-plain-disabled() { - background-color: transparent; - color: @item-color-disabled; -} diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUiStyles.less index 789be474..f40b698a 100644 --- a/less/_defaults/_buttonMixins/_itemUiStyles.less +++ b/less/_defaults/_buttonMixins/_itemUiStyles.less @@ -78,35 +78,3 @@ .item-ui-color-disabled; box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-disabled inset; } - -// Plain -.item-ui-color-plain() { - background-color: transparent; - color: @item-ui-color; -} - -.item-ui-color-plain-hover() { - background-color: transparent; - color: @item-ui-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.item-ui-color-plain-focus() { - background-color: transparent; - color: @item-ui-color-focus; -} - -.item-ui-color-plain-selected() { - background-color: transparent; - color: @item-ui-color-selected; -} - -.item-ui-color-plain-locked() { - background-color: transparent; - color: @item-ui-color-locked; -} - -.item-ui-color-plain-disabled() { - background-color: transparent; - color: @item-ui-color-disabled; -} diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItemStyles.less index f548bda4..4e9db1a9 100644 --- a/less/_defaults/_buttonMixins/_menuItemStyles.less +++ b/less/_defaults/_buttonMixins/_menuItemStyles.less @@ -58,35 +58,3 @@ .menu-item-btn-color-disabled; box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-disabled inset; } - -// Plain -.menu-item-btn-color-plain() { - background-color: transparent; - color: @menu-item-btn-color; -} - -.menu-item-btn-color-plain-hover() { - background-color: transparent; - color: @menu-item-btn-color-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.menu-item-btn-color-plain-focus() { - background-color: transparent; - color: @menu-item-btn-color-focus; -} - -.menu-item-btn-color-plain-selected() { - background-color: transparent; - color: @menu-item-btn-color-selected; -} - -.menu-item-btn-color-plain-locked() { - background-color: transparent; - color: @menu-item-btn-color-locked; -} - -.menu-item-btn-color-plain-disabled() { - background-color: transparent; - color: @menu-item-btn-color-disabled; -} diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUiStyles.less index 0932d5b5..1b6868a6 100644 --- a/less/_defaults/_buttonMixins/_navUiStyles.less +++ b/less/_defaults/_buttonMixins/_navUiStyles.less @@ -48,20 +48,3 @@ .nav-ui-btn-ctrl-color-focus; box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-focus inset; } - -// Plain -.nav-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @nav-icon; -} - -.nav-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @nav-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.nav-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @nav-icon-focus; -} diff --git a/less/_defaults/_buttonMixins/_notifyBtnStyles.less b/less/_defaults/_buttonMixins/_notifyBtnStyles.less index 4e1582ad..339d86e7 100644 --- a/less/_defaults/_buttonMixins/_notifyBtnStyles.less +++ b/less/_defaults/_buttonMixins/_notifyBtnStyles.less @@ -68,35 +68,3 @@ .notify-btn-color-disabled; box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset; } - -// Plain -.notify-btn-color-plain() { - background-color: transparent; - color: @notify-btn; -} - -.notify-btn-color-plain-hover() { - background-color: transparent; - color: @notify-btn-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); -} - -.notify-btn-color-plain-focus() { - background-color: transparent; - color: @notify-btn-focus; -} - -.notify-btn-color-plain-selected() { - background-color: transparent; - color: @notify-btn-selected; -} - -.notify-btn-color-plain-locked() { - background-color: transparent; - color: @notify-btn-locked; -} - -.notify-btn-color-plain-disabled() { - background-color: transparent; - color: @notify-btn-disabled; -} diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUiStyles.less index 52f7ca4d..083ac48e 100644 --- a/less/_defaults/_buttonMixins/_notifyUiStyles.less +++ b/less/_defaults/_buttonMixins/_notifyUiStyles.less @@ -46,20 +46,3 @@ .notify-ui-btn-ctrl-color-disabled; box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-disabled inset; } - -// Plain -.notify-ui-btn-ctrl-color-plain() { - background-color: transparent; - color: @notify-icon-inverted; -} - -.notify-ui-btn-ctrl-color-plain-hover() { - background-color: transparent; - color: @notify-icon-hover; - .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); -} - -.notify-ui-btn-ctrl-color-plain-focus() { - background-color: transparent; - color: @notify-icon-focus; -} From 0d87fbe7ec9b5af76e2d2e6536153962d1e28f9d Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Thu, 5 Dec 2024 17:18:18 +0000 Subject: [PATCH 77/86] Matching drop down list item styling - align focus and selected styles with 'master' - remove 'outline' box-shadow in favour of border. Border is used to visually distinguish/separate each item whilst box-shadow is stylistic only --- .../adapt-contrib-matching/dropdown.less | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 8a38ec32..dc8fea15 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -87,10 +87,7 @@ .item-color-hover; } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-color-focus; - } - + &:focus-visible, &[aria-selected="true"] { // This code can be used to style a non-native dropdown as closely // as possible to the default browser settings @@ -105,27 +102,19 @@ & when (@item-color-style = outline) { .item-color-outline; border-radius: 0; - - // ! TODO review application of 'outline' styles vs existing border styles - // ? should border-bottom styles replace mixin box-shadow ? - // * trial out turning off box shadow and replace with border - box-shadow: 0 0 0 0 black inset !important; + box-shadow: none; border-bottom: 1px solid @item-color-hover; &:last-child { border-bottom: none; } - .no-touch &:hover, - .no-touch .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"]:hover { + .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { .item-color-outline-hover; } - html:not(.a11y-disable-focusoutline) &:focus-visible { - .item-color-outline-focus; - } - - .dropdown__btn.is-selected + .dropdown__list &[aria-selected="true"] { + &:focus-visible, + &[aria-selected="true"] { .item-color-outline-selected; } } From 9bb1e5ba440d5fcd84464b5ec45c64987d4217c4 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 18 Dec 2024 13:54:25 +0000 Subject: [PATCH 78/86] button style comments removed/updated --- less/_defaults/_state-mixins.less | 139 +----------------------------- 1 file changed, 3 insertions(+), 136 deletions(-) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_state-mixins.less index ca12fa58..2516a07e 100644 --- a/less/_defaults/_state-mixins.less +++ b/less/_defaults/_state-mixins.less @@ -1,4 +1,6 @@ -// ! TODO Temp button style vars - naming tbc +// Button styles +// Note: default styles include 'filled' and 'outline' +// -------------------------------------------------- @item-color-style: filled; @item-ui-color-style: filled; @btn-color-style: filled; @@ -9,138 +11,3 @@ @notify-btn-color-style: filled; @drawer-ui-btn-ctrl-color-style: filled; @drawer-item-color-style: filled; - -// PR required - https://github.com/adaptlearning/adapt_framework/pull/3578 -// config.json - // "themeVariables": { - // "_styles": { - // "item-color-style": "outline", - // "item-ui-color-style": "outline", - // "btn-color-style": "outline", - // "menu-item-btn-color-style": "outline", - // "ui-color-style": "outline", - // "nav-ui-btn-ctrl-color-style": "outline", - // "notify-ui-btn-ctrl-color-style": "outline", - // "notify-btn-color-style": "outline", - // "drawer-ui-btn-ctrl-color-style": "outline", - // "drawer-item-color-style": "outline" - // }, - // "_global": { - // "font-color": "", - // "font-color-inverted": "", - // "link": "", - // "link-inverted": "", - // "link-hover": "", - // "link-inverted-hover": "", - // "heading-color": "", - // "heading-color-inverted": "" - // }, - // "_items": { - // "item-color": "", - // "item-color-inverted": "", - // "item-color-hover": "", - // "item-color-inverted-hover": "", - // "item-color-selected": "", - // "item-color-inverted-selected": "", - // "visited": "", - // "visited-inverted": "" - // }, - // "_buttons": { - // "btn-color": "", - // "btn-color-inverted": "", - // "btn-color-hover": "", - // "btn-color-inverted-hover": "", - // "btn-icon-color": "", - // "btn-icon-color-inverted": "", - // "btn-icon-color-hover": "", - // "btn-icon-color-inverted-hover": "", - // "disabled": "", - // "disabled-inverted": "" - // }, - // "_validation": { - // "validation-success": "", - // "validation-success-inverted": "", - // "validation-error": "", - // "validation-error-inverted": "" - // }, - // "_progress": { - // "progress": "", - // "progress-inverted": "", - // "progress-border": "" - // }, - // "_menu": { - // "menu-header-background-color": "", - // "menu-header-title-color": "", - // "menu-header-subtitle-color": "", - // "menu-header-body-color": "", - // "menu-header-instruction-color": "", - // "menu-item": "", - // "menu-item-inverted": "", - // "menu-item-border-color": "", - // "menu-item-progress": "", - // "menu-item-progress-inverted": "", - // "menu-item-progress-border": "", - // "menu-item-btn-color": "green", - // "menu-item-btn-color-inverted": "", - // "menu-item-btn-color-hover": "", - // "menu-item-btn-color-inverted-hover": "" - // }, - // "_nav": { - // "nav": "", - // "nav-inverted": "", - // "nav-icon": "", - // "nav-icon-inverted": "", - // "nav-icon-hover": "", - // "nav-icon-inverted-hover": "", - // "nav-progress": "", - // "nav-progress-inverted": "", - // "nav-progress-border": "", - // "nav-progress-hover": "", - // "nav-progress-inverted-hover": "", - // "nav-progress-border-hover": "" - // }, - // "_notify": { - // "notify": "", - // "notify-inverted": "", - // "notify-link": "", - // "notify-link-hover": "", - // "notify-btn": "", - // "notify-btn-inverted": "", - // "notify-btn-hover": "", - // "notify-btn-inverted-hover": "", - // "notify-icon": "", - // "notify-icon-inverted": "", - // "notify-icon-hover": "", - // "notify-icon-inverted-hover": "" - // }, - // "_drawer": { - // "drawer": "", - // "drawer-inverted": "", - // "drawer-link": "", - // "drawer-link-hover": "", - // "drawer-icon": "", - // "drawer-icon-inverted": "", - // "drawer-icon-hover": "", - // "drawer-icon-inverted-hover": "", - // "drawer-item": "", - // "drawer-item-inverted": "", - // "drawer-item-hover": "", - // "drawer-item-inverted-hover": "", - // "drawer-item-selected": "", - // "drawer-item-inverted-selected": "", - // "drawer-progress": "", - // "drawer-progress-inverted": "", - // "drawer-progress-border": "", - // "drawer-progress-hover": "", - // "drawer-progress-inverted-hover": "", - // "drawer-progress-border-hover": "" - // }, - // "_misc": { - // "background": "", - // "background-inverted": "", - // "shadow": "", - // "shadow-inverted": "", - // "loading": "", - // "loading-inverted": "" - // } - // } From 0df22a67a7a461e364356baeeab80886205f6e69 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 18 Dec 2024 14:31:37 +0000 Subject: [PATCH 79/86] comments removed --- less/_defaults/_spacing-config.less | 2 -- less/plugins/adapt-contrib-resources/resources.less | 2 -- 2 files changed, 4 deletions(-) diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index a2d60849..57a883c8 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -70,8 +70,6 @@ // -------------------------------------------------- @progress-border-radius: 50px; -// ! TODO new file (separate item spacing vars from text spacing vars) -// wait until work has been reviewed/approved to make it easier to diff compare // Menu header text margin // -------------------------------------------------- diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index 547020fe..c19468a6 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -17,8 +17,6 @@ } } - // ! TODO review application of 'outline' styles vs existing border and box-shadow styles - // * This review might tie nicely into some ideas about redoing the design of the drawer where we clearly separate the clickable part of the item as a button through the use of text and / or icon. & when (@drawer-item-color-style = outline) { .drawer-item-color-outline; From 543e198220b93a9d57dcbc2dd0915a085d572751 Mon Sep 17 00:00:00 2001 From: kirsty-hames Date: Wed, 18 Dec 2024 15:43:39 +0000 Subject: [PATCH 80/86] rename _state-mixins.less to _btn-style.less ...file doesn't include states or mixins --- less/_defaults/{_state-mixins.less => _btn-style.less} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename less/_defaults/{_state-mixins.less => _btn-style.less} (100%) diff --git a/less/_defaults/_state-mixins.less b/less/_defaults/_btn-style.less similarity index 100% rename from less/_defaults/_state-mixins.less rename to less/_defaults/_btn-style.less From 99688af97eaf7200a08f3262e2de34003fadae0a Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Wed, 8 Jan 2025 12:08:07 +0000 Subject: [PATCH 81/86] Notify / drawer outline updates --- .../_buttonMixins/_drawerUiStyles.less | 6 ++-- .../_buttonMixins/_notifyUiStyles.less | 6 ++-- less/_defaults/_colors.less | 11 ++++--- .../pageLevelProgressIndicator.less | 30 ++++++++++++++----- 4 files changed, 34 insertions(+), 19 deletions(-) diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUiStyles.less index 1d0ad742..2b128656 100644 --- a/less/_defaults/_buttonMixins/_drawerUiStyles.less +++ b/less/_defaults/_buttonMixins/_drawerUiStyles.less @@ -21,9 +21,9 @@ // Outline .drawer-ui-btn-ctrl-color-outline() { - background-color: @drawer-icon; - color: @drawer-icon-inverted; - box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-inverted inset; + background-color: @drawer-icon-inverted; + color: @drawer-icon; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon inset; } .drawer-ui-btn-ctrl-color-outline-hover() { diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUiStyles.less index 083ac48e..c5115d3e 100644 --- a/less/_defaults/_buttonMixins/_notifyUiStyles.less +++ b/less/_defaults/_buttonMixins/_notifyUiStyles.less @@ -26,9 +26,9 @@ // Outline .notify-ui-btn-ctrl-color-outline() { - background-color: @notify-icon; - color: @notify-icon-inverted; - box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-inverted inset; + background-color: @notify-icon-inverted; + color: @notify-icon; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon inset; } .notify-ui-btn-ctrl-color-outline-hover() { diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 5992e904..958b7bc6 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -102,7 +102,6 @@ @btn-color-locked: @disabled; @btn-color-inverted-locked: @disabled-inverted; - // DEPRECATED // replaced by @btn-color-disabled and @btn-color-disabled-inverted @disabled: @grey; @@ -207,8 +206,8 @@ @notify-link-hover: @notify-link; // UI -@notify-icon: darken(@notify, 10%); -@notify-icon-inverted: @notify-inverted; +@notify-icon: @notify-inverted; +@notify-icon-inverted: @notify; @notify-icon-hover: darken(@notify-icon, 10%); @notify-icon-inverted-hover: @notify-icon-inverted; @@ -248,8 +247,8 @@ @drawer-link-hover: @drawer-link; // UI -@drawer-icon: darken(@drawer, 10%); -@drawer-icon-inverted: @drawer-inverted; +@drawer-icon: @drawer-inverted; +@drawer-icon-inverted: @drawer; @drawer-icon-hover: darken(@drawer-icon, 10%); @drawer-icon-inverted-hover: @drawer-icon-inverted; @@ -264,7 +263,7 @@ @drawer-item-hover: darken(@drawer-item, 10%); @drawer-item-inverted-hover: @drawer-item-inverted; -@drawer-item-focus: darken(@drawer-item-hover, 10%); +@drawer-item-focus: @drawer-item-hover; @drawer-item-inverted-focus: @drawer-item-inverted-hover; @drawer-item-selected: darken(@drawer-item, 20%); diff --git a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less index 0ed13b16..8ccc99c0 100644 --- a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less +++ b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less @@ -79,16 +79,32 @@ // Drawer overrides // -------------------------------------------------- .pagelevelprogress__item-btn:not(.is-disabled) { - .pagelevelprogress__indicator { - border-color: @drawer-progress-border; - } + & when (@drawer-item-color-style = filled) { + .pagelevelprogress__indicator { + border-color: @drawer-progress-border; + } - .pagelevelprogress__indicator-inner { - background-color: @drawer-progress-inverted; + .pagelevelprogress__indicator-inner { + background-color: @drawer-progress-inverted; + } + + .pagelevelprogress__indicator-bar { + background-color: @drawer-progress; + } } - .pagelevelprogress__indicator-bar { - background-color: @drawer-progress; + & when (@drawer-item-color-style = outline) { + .pagelevelprogress__indicator { + border-color: @drawer-progress-inverted; + } + + .pagelevelprogress__indicator-inner { + background-color: @drawer-progress; + } + + .pagelevelprogress__indicator-bar { + background-color: @drawer-progress-inverted; + } } .no-touch &:hover { From 7c007f722e2f68f994fde9e36c81e19e67b0da06 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 10 Jan 2025 12:48:53 +0000 Subject: [PATCH 82/86] Removed unused variable --- less/_defaults/_colors.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 958b7bc6..1dde3d0d 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -56,9 +56,6 @@ @item-color-disabled: @disabled; @item-color-inverted-disabled: @disabled-inverted; -// Outline -@item-color-border-color: @item-color; - // Content UI (action not content) // boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle // logic: if outputting course content into word doc, these buttons wouldn’t need including From 38e676154b8c0b1e027f0812f96911641967c710 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Fri, 10 Jan 2025 15:41:57 +0000 Subject: [PATCH 83/86] Schemas updated --- properties.schema | 496 +++++++++++++++++++++++++++++++----- schema/theme.schema.json | 526 +++++++++++++++++++++++++++++++++------ 2 files changed, 889 insertions(+), 133 deletions(-) diff --git a/properties.schema b/properties.schema index 5ae46748..41c8c946 100644 --- a/properties.schema +++ b/properties.schema @@ -23,7 +23,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global body font colour inverted. Either a lightened/darkened alternative to Font colour." + "help": "Global body font colour inverted. Either a lightened / darkened alternative to Font colour." }, "link": { "title": "Link font colour", @@ -36,7 +36,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global link font colour inverted. Either a lightened/darkened alternative to Link colour." + "help": "Global link font colour inverted. Either a lightened / darkened alternative to Link colour." }, "link-hover": { "title": "Link font colour - hover", @@ -49,7 +49,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global link font colour when hovered over inverted. Either a lightened/darkened alternative to Link hover colour." + "help": "Global link font colour when hovered over inverted. Either a lightened / darkened alternative to Link hover colour." }, "heading-color": { "title": "Heading colour", @@ -63,7 +63,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global title colour inverted. Either a lightened/darkened alternative to Title colour." + "help": "Global title colour inverted. Either a lightened / darkened alternative to Title colour." } } }, @@ -71,7 +71,7 @@ "_items": { "type": "object", "required": false, - "title": "Items (Components)", + "title": "Content Items (components)", "properties": { "item-color": { "title": "Item colour", @@ -85,7 +85,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour. Should be a colour that provides good contrast against the Item colour." + "help": "Defines the item text / icon colour. Should be a colour that provides good contrast against the item colour." }, "item-color-hover": { "title": "Item colour - hover", @@ -98,7 +98,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when hovered over. Should be a colour that provides good contrast against the Item hover colour." + "help": "Defines the item text / icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour." + }, + "item-color-focus": { + "title": "Item colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "item-color-inverted-focus": { + "title": "Item colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item text / icon colour when focused. Should be a colour that provides good contrast against the item focus colour." }, "item-color-selected": { "title": "Item colour - selected", @@ -111,21 +124,140 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when selected. Should be a colour that provides good contrast against the Item selected colour." + "help": "Defines the item text / icon colour when selected. Should be a colour that provides good contrast against the item selected colour." }, "visited": { "title": "Visited colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item colour when it has been visited." + "help": "Defines the item colour when it has been visited." }, "visited-inverted": { "title": "Visited colour - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when visited. Should be a colour that provides good contrast against the Item visited colour." + "help": "Defines the item text / icon colour when visited. Should be a colour that provides good contrast against the item visited colour." + }, + "item-color-disabled": { + "title": "Item colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "item-color-inverted-disabled": { + "title": "Item colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item text / icon colour when disabled. Should be a colour that provides good contrast against the item disabled colour." + } + } + }, + + "_itemsUi": { + "type": "object", + "required": false, + "title": "Content Items UI (action not content)", + "properties": { + "item-ui-color": { + "title": "Item UI colour", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the clickable areas in components that don't contain course content." + }, + "item-ui-color-inverted": { + "title": "Item UI colour - inverted", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour. Should be a colour that provides good contrast against the item UI colour." + }, + "item-ui-color-hover": { + "title": "Item UI colour - hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-hover": { + "title": "Item UI colour - inverted hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when hovered over. Should be a colour that provides good contrast against the item UI hover colour." + }, + "item-ui-color-focus": { + "title": "Item UI colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-focus": { + "title": "Item UI colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when focused. Should be a colour that provides good contrast against the item UI focus colour." + }, + "item-ui-color-selected": { + "title": "Item UI colour - selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-selected": { + "title": "Item UI colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when selected. Should be a colour that provides good contrast against the item UI selected colour." + }, + "item-ui-color-visited": { + "title": "Item UI colour - visited", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-visited": { + "title": "Item UI colour - inverted visited", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when visited. Should be a colour that provides good contrast against the item UI visited colour." + }, + "item-ui-color-locked": { + "title": "Item UI colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-locked": { + "title": "Item UI colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when locked. Should be a colour that provides good contrast against the item UI locked colour." + }, + "item-ui-color-disabled": { + "title": "Item UI colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-disabled": { + "title": "Item UI colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when disabled. Should be a colour that provides good contrast against the item UI disabled colour." } } }, @@ -162,6 +294,58 @@ "default": "", "help": "Defines the button text / icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour." }, + "btn-color-focus": { + "title": "Button colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-focus": { + "title": "Button colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when focused. Should be a colour that provides good contrast against the button focus colour." + }, + "btn-color-selected": { + "title": "Button colour - selected", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-selected": { + "title": "Button colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when selected. Should be a colour that provides good contrast against the button selected colour." + }, + "btn-color-locked": { + "title": "Button colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-locked": { + "title": "Button colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when locked. Should be a colour that provides good contrast against the button locked colour." + }, + "disabled": { + "title": "Disabled colour", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "disabled-inverted": { + "title": "Disabled colour - inverted", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour." + }, "btn-icon-color": { "title": "Button icon colour", "type": "string", @@ -188,19 +372,28 @@ "inputType": "ColourPicker", "default": "", "help": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour." - }, - "disabled": { - "title": "Disabled colour", + } + } + }, + + "_globalUi": { + "type": "object", + "required": false, + "title": "Global UI", + "properties": { + "ui-color": { + "title": "UI colour", "type": "string", "inputType": "ColourPicker", - "default": "" + "default": "", + "help": "Defines the global UI colour scheme for nav, notify, and drawer." }, - "disabled-inverted": { - "title": "Disabled colour - inverted", + "ui-color-inverted": { + "title": "UI colour - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour." + "help": "Defines the global UI text / icon colour. Should be a colour that provides good contrast against the global UI colour." } } }, @@ -236,7 +429,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the question marking error text / icon colour. Should be a colour that provices good contrast against the question marking error colour." + "help": "Defines the question marking error text / icon colour. Should be a colour that provides good contrast against the question marking error colour." } } }, @@ -316,7 +509,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item text colour. Should be a colour that provides good contrast against the Menu Item colour." + "help": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour." }, "menu-item-border-color": { "title": "Menu item border colour", @@ -329,14 +522,14 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item specific global progress width fill override colour." + "help": "Defines the menu-item-specific progress width fill override colour." }, "menu-item-progress-inverted": { "title": "Menu item progress background colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item specific global progress fill background override colour." + "help": "Defines the menu-item-specific progress fill background override colour." }, "menu-item-progress-border": { "title": "Menu item progress border colour", @@ -355,7 +548,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item button text colour. Should be a colour that provides good contrast against the Menu Item button colour." + "help": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour." }, "menu-item-btn-color-hover": { "title": "Menu item button background colour - hover", @@ -368,7 +561,33 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item button text colour when hovered over. Should be a colour that provides good contrast against the Menu Item button hover colour." + "help": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour." + }, + "menu-item-btn-color-focus": { + "title": "Menu item button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "menu-item-btn-color-inverted-focus": { + "title": "Menu item button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the menu item button text colour when focused. Should be a colour that provides good contrast against the menu item button focus colour." + }, + "menu-item-btn-color-locked": { + "title": "Menu item button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "menu-item-btn-color-inverted-locked": { + "title": "Menu item button background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the menu item button text colour when locked. Should be a colour that provides good contrast against the menu item button locked colour." } } }, @@ -376,7 +595,7 @@ "_nav": { "type": "object", "required": false, - "title": "Navigation", + "title": "Navigation bar", "properties": { "nav": { "title": "Navigation background colour", @@ -389,7 +608,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the general Navigation inverted colour. Should be a colour that provides good contrast against the Navigation colour." + "help": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour." }, "nav-icon": { "title": "Navigation button background colour", @@ -402,7 +621,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation Btn text / icon colour. Should be a colour that provides good contrast against the Navigation Btn colour." + "help": "Defines the navigation button text / icon colour. Should be a colour that provides good contrast against the navigation button colour." }, "nav-icon-hover": { "title": "Navigation button background colour - hover", @@ -415,21 +634,60 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the Navigation button hover colour." + "help": "Defines the navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour." + }, + "nav-icon-focus": { + "title": "Navigation button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-focus": { + "title": "Navigation button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when focused. Should be a colour that provides good contrast against the navigation button focus colour." + }, + "nav-icon-locked": { + "title": "Navigation button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-locked": { + "title": "Navigation button background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when locked. Should be a colour that provides good contrast against the navigation button locked colour." + }, + "nav-icon-disabled": { + "title": "Navigation button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-disabled": { + "title": "Navigation button background colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when disabled. Should be a colour that provides good contrast against the navigation button disabled colour." }, "nav-progress": { "title": "Navigation progress fill color", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress width fill override colour." + "help": "Defines the navigation-specific progress width fill override colour." }, "nav-progress-inverted": { "title": "Navigation progress background color - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress fill background override colour." + "help": "Defines the navigation-specific progress fill background override colour." }, "nav-progress-border": { "title": "Navigation progress border colour", @@ -442,14 +700,14 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress width fill override colour when hovered over." + "help": "Defines the navigation-specific progress width fill override colour when hovered over." }, "nav-progress-inverted-hover": { "title": "Navigation progress background color - inverted hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress fill background override colour when hovered over." + "help": "Defines the navigation-specific progress fill background override colour when hovered over." }, "nav-progress-border-hover": { "title": "Navigation progress border colour - hover", @@ -463,7 +721,7 @@ "_notify": { "type": "object", "required": false, - "title": "Notify (pop up)", + "title": "Notify (popup)", "properties": { "notify": { "title": "Notify background colour", @@ -476,7 +734,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify text colour. Should be a colour that provides good contrast against the Notify colour." + "help": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour." }, "notify-link": { "title": "Notify link font colour", @@ -490,6 +748,58 @@ "inputType": "ColourPicker", "default": "" }, + "notify-icon": { + "title": "Notify icon button background colour", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted": { + "title": "Notify icon button background colour - inverted", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour." + }, + "notify-icon-hover": { + "title": "Notify icon button background colour - hover", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-hover": { + "title": "Notify icon button background colour - inverted hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon hover colour." + }, + "notify-icon-focus": { + "title": "Notify icon button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-focus": { + "title": "Notify icon button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when focused. Should be a colour that provides good contrast against the notify icon focus colour." + }, + "notify-icon-disabled": { + "title": "Notify icon button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-disabled": { + "title": "Notify icon button background colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when disabled. Should be a colour that provides good contrast against the notify icon disabled colour." + }, "notify-btn": { "title": "Notify button background colour", "type": "string", @@ -501,7 +811,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify button text / icon colour. Should be a colour that provides good contrast against the Notify button colour." + "help": "Defines the notify button text / icon colour. Should be a colour that provides good contrast against the notify button colour." }, "notify-btn-hover": { "title": "Notify button background colour - hover", @@ -514,33 +824,59 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the Notify button hover colour." + "help": "Defines the notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour." }, - "notify-icon": { - "title": "Notify icon button background colour", + "notify-btn-focus": { + "title": "Notify button background colour - focus", "type": "string", "inputType": "ColourPicker", "default": "" }, - "notify-icon-inverted": { - "title": "Notify icon button background colour - inverted", + "notify-btn-inverted-focus": { + "title": "Notify button background colour - inverted focus", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify Icon inverse colour. Should be a colour that provides good contrast against the Notify Icon colour." + "help": "Defines the notify button text / icon colour when focused. Should be a colour that provides good contrast against the notify button focus colour." }, - "notify-icon-hover": { - "title": "Notify icon button background colour - hover", + "notify-btn-selected": { + "title": "Notify button background colour - selected", "type": "string", "inputType": "ColourPicker", "default": "" }, - "notify-icon-inverted-hover": { - "title": "Notify icon button background colour - inverted hover", + "notify-btn-inverted-selected": { + "title": "Notify button background colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify button text / icon colour when selected. Should be a colour that provides good contrast against the notify button selected colour." + }, + "notify-btn-locked": { + "title": "Notify button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-btn-inverted-locked": { + "title": "Notify button background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify button text / icon colour when locked. Should be a colour that provides good contrast against the notify button locked colour." + }, + "notify-btn-disabled": { + "title": "Notify button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-btn-inverted-disabled": { + "title": "Notify button background colour - inverted disabled", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify Icon colour when hovered over. Should be a colour that provides good contrast against the Notify Icon colour." + "help": "Defines the notify button text / icon colour when disabled. Should be a colour that provides good contrast against the notify button disabled colour." } } }, @@ -561,7 +897,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer text colour. Should be a colour that provides good contrast against the Drawer colour." + "help": "Defines the drawer text colour. Should be a colour that provides good contrast against the Drawer colour." }, "drawer-link": { "title": "Drawer link font colour", @@ -586,7 +922,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Icon button inverse colour. Should be a colour that provides good contrast against the Drawer Icon button colour" + "help": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour." }, "drawer-icon-hover": { "title": "Drawer icon button background colour - hover", @@ -599,7 +935,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Icon button inverse colour when hovered over. Should be a colour that provides good contrast against the Drawer Icon button hover colour." + "help": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour." + }, + "drawer-icon-focus": { + "title": "Drawer icon button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-icon-inverted-focus": { + "title": "Drawer icon button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer icon button inverse colour when focused. Should be a colour that provides good contrast against the drawer icon button focus colour." }, "drawer-item": { "title": "Drawer item background colour", @@ -612,7 +961,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour. Should be a colour that provides good contrast against the Drawer Item colour." + "help": "Defines the drawer item text / icon colour. Should be a colour that provides good contrast against the drawer item colour." }, "drawer-item-hover": { "title": "Drawer item background colour - hover", @@ -625,7 +974,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour when hovered over. Should be a colour that provides good contrast against the Drawer Item hover colour." + "help": "Defines the drawer item text / icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour." + }, + "drawer-item-focus": { + "title": "Drawer item background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-item-inverted-focus": { + "title": "Drawer item background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer item text / icon colour when focused. Should be a colour that provides good contrast against the drawer item focus colour." }, "drawer-item-selected": { "title": "Drawer item background colour - selected", @@ -638,49 +1000,62 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour when selected. Should be a colour that provides good contrast against the Drawer Item selected colour." + "help": "Defines the drawer item text / icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour." + }, + "drawer-item-locked": { + "title": "Drawer item background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-item-inverted-locked": { + "title": "Drawer item background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer item text / icon colour when locked. Should be a colour that provides good contrast against the drawer item locked colour." }, "drawer-progress": { "title": "Drawer progress fill colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress width fill override colour." + "help": "Defines the drawer-specific progress width fill override colour." }, "drawer-progress-inverted": { "title": "Drawer progress background colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress fill background override colour." + "help": "Defines the drawer-specific progress fill background override colour." }, "drawer-progress-border": { "title": "Drawer progress border colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific border override colour that appears around the progress fill bar." + "help": "Defines the drawer-specific border override colour that appears around the progress fill bar." }, "drawer-progress-hover": { "title": "Drawer progress colour - hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress width fill override colour when hovered over." + "help": "Defines the drawer-specific progress width fill override colour when hovered over." }, "drawer-progress-inverted-hover": { "title": "Drawer progress colour - inverted hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress fill background override colour when hovered over." + "help": "Defines the drawer-specific progress fill background override colour when hovered over." }, "drawer-progress-border-hover": { "title": "Drawer progress border colour - hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific border override colour that appears around the progress fill bar when hovered over." + "help": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over." } } }, @@ -702,10 +1077,10 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Background text / icon colour. Should be a colour that provides good contrast against the Background colour." + "help": "Defines the background text / icon colour. Should be a colour that provides good contrast against the background colour." }, "shadow": { - "title": "Shadow background colour (loading / pop up background)", + "title": "Shadow background colour (loading / popup background)", "type": "string", "inputType": "ColourPicker", "default": "" @@ -715,7 +1090,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Shadow text / icon colour. Should be a colour that provides good contrast against the Shadow colour." + "help": "Defines the shadow text / icon colour. Should be a colour that provides good contrast against the shadow colour." }, "loading": { "title": "Loading animation background colour", @@ -733,6 +1108,7 @@ } } }, + "pluginLocations": { "type": "object", "required": true, diff --git a/schema/theme.schema.json b/schema/theme.schema.json index e0054247..07b33ed7 100644 --- a/schema/theme.schema.json +++ b/schema/theme.schema.json @@ -3,6 +3,7 @@ "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { + "_global": { "type": "object", "title": "Global", @@ -11,14 +12,14 @@ "font-color": { "type": "string", "title": "Font colour", - "description": "Global body font colour", + "description": "Global body font colour.", "default": "", "_backboneForms": "ColourPicker" }, "font-color-inverted": { "type": "string", "title": "Font colour - inverted", - "description": "Global body font colour inverted. Either a lightened/darkened alternative to Font colour", + "description": "Global body font colour inverted. Either a lightened / darkened alternative to Font colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -31,7 +32,7 @@ "link-inverted": { "type": "string", "title": "Link font colour - inverted", - "description": "Global link font colour inverted. Either a lightened/darkened alternative to Link colour", + "description": "Global link font colour inverted. Either a lightened / darkened alternative to Link colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -44,7 +45,7 @@ "link-inverted-hover": { "type": "string", "title": "Link font colour - inverted hover", - "description": "Global link font colour when hovered over inverted. Either a lightened/darkened alternative to Link hover colour", + "description": "Global link font colour when hovered over inverted. Either a lightened / darkened alternative to Link hover colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -58,28 +59,29 @@ "heading-color-inverted": { "type": "string", "title": "Heading colour - inverted", - "description": "Global title colour inverted. Either a lightened/darkened alternative to Title colour", + "description": "Global title colour inverted. Either a lightened / darkened alternative to Title colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_items": { "type": "object", - "title": "Items (components)", + "title": "Content Items (components)", "default": {}, "properties": { "item-color": { "type": "string", "title": "Item colour", - "description": "Defines the clickable areas or points of interest in components", + "description": "Defines the clickable areas or points of interest in components.", "default": "", "_backboneForms": "ColourPicker" }, "item-color-inverted": { "type": "string", "title": "Item colour - inverted", - "description": "Defines the item text/icon colour. Should be a colour that provides good contrast against the item colour", + "description": "Defines the item text / icon colour. Should be a colour that provides good contrast against the item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -92,7 +94,20 @@ "item-color-inverted-hover": { "type": "string", "title": "Item colour - inverted hover", - "description": "Defines the item text/icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour", + "description": "Defines the item text / icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-focus": { + "type": "string", + "title": "Item colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-inverted-focus": { + "type": "string", + "title": "Item colour - inverted focus", + "description": "Defines the item text / icon colour when focused. Should be a colour that provides good contrast against the item focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -105,26 +120,140 @@ "item-color-inverted-selected": { "type": "string", "title": "Item colour - inverted selected", - "description": "Defines the item text/icon colour when selected. Should be a colour that provides good contrast against the Item selected colour", + "description": "Defines the item text / icon colour when selected. Should be a colour that provides good contrast against the item selected colour.", "default": "", "_backboneForms": "ColourPicker" }, "visited": { "type": "string", "title": "Visited colour", - "description": "Defines the item colour when it has been visited", + "description": "Defines the item colour when it has been visited.", "default": "", "_backboneForms": "ColourPicker" }, "visited-inverted": { "type": "string", "title": "Visited colour - inverted", - "description": "Defines the item text/icon colour when visited. Should be a colour that provides good contrast against the item visited colour", + "description": "Defines the item text / icon colour when visited. Should be a colour that provides good contrast against the item visited colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-disabled": { + "type": "string", + "title": "Item colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-inverted-disabled": { + "type": "string", + "title": "Item colour - inverted disabled", + "description": "Defines the item text / icon colour when disabled. Should be a colour that provides good contrast against the item disabled colour.", + "default": "", + "_backboneForms": "ColourPicker" + } + } + }, + + "_itemsUi": { + "type": "object", + "title": "Content Items UI (action not content)", + "default": {}, + "properties": { + "item-ui-color": { + "type": "string", + "title": "Item UI colour", + "description": "Defines the clickable areas in components that don't contain course content.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted": { + "type": "string", + "title": "Item UI colour - inverted", + "description": "Defines the item UI text / icon colour. Should be a colour that provides good contrast against the item UI colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-hover": { + "type": "string", + "title": "Item UI colour - hover", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-hover": { + "type": "string", + "title": "Item UI colour - inverted hover", + "description": "Defines the item UI text / icon colour when hovered over. Should be a colour that provides good contrast against the item UI hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-focus": { + "type": "string", + "title": "Item UI colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-focus": { + "type": "string", + "title": "Item UI colour - inverted focus", + "description": "Defines the item UI text / icon colour when focused. Should be a colour that provides good contrast against the item UI focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-selected": { + "type": "string", + "title": "Item UI colour - selected", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-selected": { + "type": "string", + "title": "Item UI colour - inverted selected", + "description": "Defines the item UI text / icon colour when selected. Should be a colour that provides good contrast against the item UI selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-visited": { + "type": "string", + "title": "Item UI colour - visited", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-visited": { + "type": "string", + "title": "Item UI colour - inverted visited", + "description": "Defines the item UI text / icon colour when visited. Should be a colour that provides good contrast against the item UI visited colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-locked": { + "type": "string", + "title": "Item UI colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-locked": { + "type": "string", + "title": "Item UI colour - inverted locked", + "description": "Defines the item UI text / icon colour when locked. Should be a colour that provides good contrast against the item UI locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-disabled": { + "type": "string", + "title": "Item UI colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-disabled": { + "type": "string", + "title": "Item UI colour - inverted disabled", + "description": "Defines the item UI text / icon colour when disabled. Should be a colour that provides good contrast against the item UI disabled colour", "default": "", "_backboneForms": "ColourPicker" } } }, + "_buttons": { "type": "object", "title": "Buttons", @@ -133,14 +262,14 @@ "btn-color": { "type": "string", "title": "Button colour", - "description": "Defines component question buttons and navigational elements", + "description": "Defines component question buttons and navigational elements.", "default": "", "_backboneForms": "ColourPicker" }, "btn-color-inverted": { "type": "string", "title": "Button colour - inverted", - "description": "Defines the button text/icon colour. Should be a colour that provides good contrast against the button colour", + "description": "Defines the button text / icon colour. Should be a colour that provides good contrast against the button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -153,21 +282,73 @@ "btn-color-inverted-hover": { "type": "string", "title": "Button colour - inverted hover", - "description": "Defines the button text/icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour", + "description": "Defines the button text / icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-focus": { + "type": "string", + "title": "Button colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-focus": { + "type": "string", + "title": "Button colour - inverted focus", + "description": "Defines the button text / icon colour when focused. Should be a colour that provides good contrast against the button focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-selected": { + "type": "string", + "title": "Button colour - selected", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-selected": { + "type": "string", + "title": "Button colour - inverted selected", + "description": "Defines the button text / icon colour when selected. Should be a colour that provides good contrast against the button selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-locked": { + "type": "string", + "title": "Button colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-locked": { + "type": "string", + "title": "Button colour - inverted locked", + "description": "Defines the button text / icon colour when locked. Should be a colour that provides good contrast against the button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "disabled": { + "type": "string", + "title": "Disabled colour", + "default": "", + "_backboneForms": "ColourPicker" + }, + "disabled-inverted": { + "type": "string", + "title": "Disabled colour - inverted", + "description": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour.", "default": "", "_backboneForms": "ColourPicker" }, "btn-icon-color": { "type": "string", "title": "Button icon colour", - "description": "Defines the standardised icon button background colour", + "description": "Defines the standardised icon button background colour.", "default": "", "_backboneForms": "ColourPicker" }, "btn-icon-color-inverted": { "type": "string", "title": "Button icon colour - inverted", - "description": "Defines the button icon colour. Should be a colour that provides good contrast against the button colour", + "description": "Defines the button icon colour. Should be a colour that provides good contrast against the button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -180,25 +361,35 @@ "btn-icon-color-inverted-hover": { "type": "string", "title": "Button icon colour - inverted hover", - "description": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour", + "description": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour.", "default": "", "_backboneForms": "ColourPicker" - }, - "disabled": { + } + } + }, + + "_globalUi": { + "type": "object", + "title": "Global UI", + "default": {}, + "properties": { + "ui-color": { "type": "string", - "title": "Disabled colour", + "title": "UI colour", + "description": "Defines the global UI colour scheme for nav, notify, and drawer.", "default": "", "_backboneForms": "ColourPicker" }, - "disabled-inverted": { + "ui-color-inverted": { "type": "string", - "title": "Disabled colour - inverted", - "description": "Defines the button text/icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour", + "title": "UI colour - inverted", + "description": "Defines the global UI text / icon colour. Should be a colour that provides good contrast against the global UI colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_validation": { "type": "object", "title": "Validation states", @@ -207,33 +398,34 @@ "validation-success": { "type": "string", "title": "Validation success colour", - "description": "Defines the question marking success colour", + "description": "Defines the question marking success colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-success-inverted": { "type": "string", "title": "Validation success colour - inverted", - "description": "Defines the question marking success text/icon colour. Should be a colour that provides good contrast against the question marking success colour", + "description": "Defines the question marking success text / icon colour. Should be a colour that provides good contrast against the question marking success colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-error": { "type": "string", "title": "Validation error colour", - "description": "Defines the question marking error colour", + "description": "Defines the question marking error colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-error-inverted": { "type": "string", "title": "Validation error colour - inverted", - "description": "Defines the question marking error text/icon colour. Should be a colour that provices good contrast against the question marking error colour", + "description": "Defines the question marking error text / icon colour. Should be a colour that provides good contrast against the question marking error colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_progress": { "type": "object", "title": "Progress bars", @@ -242,26 +434,27 @@ "progress": { "type": "string", "title": "Progress fill colour", - "description": "Defines the global progress width fill colour", + "description": "Defines the global progress width fill colour.", "default": "", "_backboneForms": "ColourPicker" }, "progress-inverted": { "type": "string", "title": "Progress background colour", - "description": "Defines the global progress fill background colour", + "description": "Defines the global progress fill background colour.", "default": "", "_backboneForms": "ColourPicker" }, "progress-border": { "type": "string", "title": "Progress border colour", - "description": "Defines the global border colour that appears around the progress fill bar", + "description": "Defines the global border colour that appears around the progress fill bar.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_menu": { "type": "object", "title": "Menu", @@ -306,7 +499,7 @@ "menu-item-inverted": { "type": "string", "title": "Menu item colour - inverted", - "description": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour", + "description": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -319,14 +512,14 @@ "menu-item-progress": { "type": "string", "title": "Menu item progress fill colour", - "description": "Defines the menu-item-specific progress width fill override colour", + "description": "Defines the menu-item-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "menu-item-progress-inverted": { "type": "string", "title": "Menu item progress background colour", - "description": "Defines the menu-item-specific progress fill background override colour", + "description": "Defines the menu-item-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -345,7 +538,7 @@ "menu-item-btn-color-inverted": { "type": "string", "title": "Menu item button background colour - inverted", - "description": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour", + "description": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -358,12 +551,39 @@ "menu-item-btn-color-inverted-hover": { "type": "string", "title": "Menu item button background colour - inverted hover", - "description": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour", + "description": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-focus": { + "type": "string", + "title": "Menu item button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-inverted-focus": { + "type": "string", + "title": "Menu item button background colour - inverted focus", + "description": "Defines the menu item button text colour when focused. Should be a colour that provides good contrast against the menu item button focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-locked": { + "type": "string", + "title": "Menu item button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-inverted-locked": { + "type": "string", + "title": "Menu item button background colour - inverted locked", + "description": "Defines the menu item button text colour when locked. Should be a colour that provides good contrast against the menu item button locked colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_nav": { "type": "object", "title": "Navigation bar", @@ -378,7 +598,7 @@ "nav-inverted": { "type": "string", "title": "Navigation background colour - inverted", - "description": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour", + "description": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -391,7 +611,7 @@ "nav-icon-inverted": { "type": "string", "title": "Navigation button background colour - inverted", - "description": "Defines the navigation button text/icon colour. Should be a colour that provides good contrast against the navigation button colour", + "description": "Defines the navigation button text / icon colour. Should be a colour that provides good contrast against the navigation button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -404,21 +624,60 @@ "nav-icon-inverted-hover": { "type": "string", "title": "Navigation button background colour - inverted hover", - "description": "Defines the navigation button text/icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour", + "description": "Defines the navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-focus": { + "type": "string", + "title": "Navigation button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-focus": { + "type": "string", + "title": "Navigation button background colour - inverted focus", + "description": "Defines the navigation button text / icon colour when focused. Should be a colour that provides good contrast against the navigation button focus colour,", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-locked": { + "type": "string", + "title": "Navigation button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-locked": { + "type": "string", + "title": "Navigation button background colour - inverted locked", + "description": "Defines the navigation button text / icon colour when locked. Should be a colour that provides good contrast against the navigation button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-disabled": { + "type": "string", + "title": "Navigation button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-disabled": { + "type": "string", + "title": "Navigation button background colour - inverted disabled", + "description": "Defines the navigation button text / icon colour when disabled. Should be a colour that provides good contrast against the navigation button disabled colour.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress": { "type": "string", "title": "Navigation progress fill color", - "description": "Defines the navigation-specific progress width fill override colour", + "description": "Defines the navigation-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress-inverted": { "type": "string", "title": "Navigation progress background color - inverted", - "description": "Defines the navigation-specific progress fill background override colour", + "description": "Defines the navigation-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -431,14 +690,14 @@ "nav-progress-hover": { "type": "string", "title": "Navigation progress fill color - hover", - "description": "Defines the navigation-specific progress width fill override colour when hovered over", + "description": "Defines the navigation-specific progress width fill override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress-inverted-hover": { "type": "string", "title": "Navigation progress background color - inverted hover", - "description": "Defines the navigation-specific progress fill background override colour when hovered over", + "description": "Defines the navigation-specific progress fill background override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, @@ -450,6 +709,7 @@ } } }, + "_notify": { "type": "object", "title": "Notify (popup)", @@ -464,7 +724,7 @@ "notify-inverted": { "type": "string", "title": "Notify background colour - inverted", - "description": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour", + "description": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -480,6 +740,58 @@ "default": "", "_backboneForms": "ColourPicker" }, + "notify-icon": { + "type": "string", + "title": "Notify icon button background colour", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted": { + "type": "string", + "title": "Notify icon button background colour - inverted", + "description": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-hover": { + "type": "string", + "title": "Notify icon button background colour - hover", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-hover": { + "type": "string", + "title": "Notify icon button background colour - inverted hover", + "description": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-focus": { + "type": "string", + "title": "Notify icon button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-focus": { + "type": "string", + "title": "Notify icon button background colour - inverted focus", + "description": "Defines the notify icon colour when focused. Should be a colour that provides good contrast against the notify icon focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-disabled": { + "type": "string", + "title": "Notify icon button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-disabled": { + "type": "string", + "title": "Notify icon button background colour - inverted disabled", + "description": "Defines the notify icon colour when disabled. Should be a colour that provides good contrast against the notify icon disabled colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, "notify-btn": { "type": "string", "title": "Notify button background colour", @@ -489,7 +801,7 @@ "notify-btn-inverted": { "type": "string", "title": "Notify button background colour - inverted", - "description": "Defines the notify button text/icon colour. Should be a colour that provides good contrast against the notify button colour", + "description": "Defines the notify button text / icon colour. Should be a colour that provides good contrast against the notify button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -502,38 +814,65 @@ "notify-btn-inverted-hover": { "type": "string", "title": "Notify button background colour - inverted hover", - "description": "Defines the notify button text/icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour", + "description": "Defines the notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour.", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon": { + "notify-btn-focus": { "type": "string", - "title": "Notify icon button background colour", + "title": "Notify button background colour - focus", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-inverted": { + "notify-btn-inverted-focus": { "type": "string", - "title": "Notify icon button background colour - inverted", - "description": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour", + "title": "Notify button background colour - inverted focus", + "description": "Defines the notify button text / icon colour when focused. Should be a colour that provides good contrast against the notify button focus colour.", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-hover": { + "notify-btn-selected": { "type": "string", - "title": "Notify icon button background colour - hover", + "title": "Notify button background colour - selected", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-inverted-hover": { + "notify-btn-inverted-selected": { "type": "string", - "title": "Notify icon button background colour - inverted hover", - "description": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon colour", + "title": "Notify button background colour - inverted selected", + "description": "Defines the notify button text / icon colour when selected. Should be a colour that provides good contrast against the notify button selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-locked": { + "type": "string", + "title": "Notify button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-inverted-locked": { + "type": "string", + "title": "Notify button background colour - inverted locked", + "description": "Defines the notify button text / icon colour when locked. Should be a colour that provides good contrast against the notify button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-disabled": { + "type": "string", + "title": "Notify button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-inverted-disabled": { + "type": "string", + "title": "Notify button background colour - inverted disabled", + "description": "Defines the notify button text / icon colour when disabled. Should be a colour that provides good contrast against the notify button disabled colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_drawer": { "type": "object", "title": "Drawer", @@ -548,7 +887,7 @@ "drawer-inverted": { "type": "string", "title": "Drawer background colour - inverted", - "description": "Defines the drawer text colour. Should be a colour that provides good contrast against the drawer colour", + "description": "Defines the drawer text colour. Should be a colour that provides good contrast against the drawer colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -573,7 +912,7 @@ "drawer-icon-inverted": { "type": "string", "title": "Drawer icon button background colour - inverted", - "description": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour", + "description": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -586,7 +925,20 @@ "drawer-icon-inverted-hover": { "type": "string", "title": "Drawer icon button background colour - inverted hover", - "description": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour", + "description": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-icon-focus": { + "type": "string", + "title": "Drawer icon button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-icon-inverted-focus": { + "type": "string", + "title": "Drawer icon button background colour - inverted focus", + "description": "Defines the drawer icon button inverse colour when focused. Should be a colour that provides good contrast against the drawer icon button focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -599,7 +951,7 @@ "drawer-item-inverted": { "type": "string", "title": "Drawer item background colour - inverted", - "description": "Defines the drawer item text/icon colour. Should be a colour that provides good contrast against the drawer item colour", + "description": "Defines the drawer item text / icon colour. Should be a colour that provides good contrast against the drawer item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -612,7 +964,20 @@ "drawer-item-inverted-hover": { "type": "string", "title": "Drawer item background colour - inverted hover", - "description": "Defines the drawer item text/icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour", + "description": "Defines the drawer item text / icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-focus": { + "type": "string", + "title": "Drawer item background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-inverted-focus": { + "type": "string", + "title": "Drawer item background colour - inverted focus", + "description": "Defines the drawer item text / icon colour when focused. Should be a colour that provides good contrast against the drawer item focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -625,54 +990,68 @@ "drawer-item-inverted-selected": { "type": "string", "title": "Drawer item background colour - inverted selected", - "description": "Defines the drawer item text/icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour", + "description": "Defines the drawer item text / icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-locked": { + "type": "string", + "title": "Drawer item background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-inverted-locked": { + "type": "string", + "title": "Drawer item background colour - inverted locked", + "description": "Defines the drawer item text / icon colour when locked. Should be a colour that provides good contrast against the drawer item locked colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress": { "type": "string", "title": "Drawer progress fill colour", - "description": "Defines the drawer-specific progress width fill override colour", + "description": "Defines the drawer-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-inverted": { "type": "string", "title": "Drawer progress background colour", - "description": "Defines the drawer-specific progress fill background override colour", + "description": "Defines the drawer-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-border": { "type": "string", "title": "Drawer progress border colour", - "description": "Defines the drawer-specific border override colour that appears around the progress fill bar", + "description": "Defines the drawer-specific border override colour that appears around the progress fill bar.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-hover": { "type": "string", "title": "Drawer progress colour - hover", - "description": "Defines the drawer-specific progress width fill override colour when hovered over", + "description": "Defines the drawer-specific progress width fill override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-inverted-hover": { "type": "string", "title": "Drawer progress colour - inverted hover", - "description": "Defines the drawer-specific progress fill background override colour when hovered over", + "description": "Defines the drawer-specific progress fill background override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-border-hover": { "type": "string", "title": "Drawer progress border colour - hover", - "description": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over", + "description": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_misc": { "type": "object", "title": "Miscellaneous", @@ -681,27 +1060,27 @@ "background": { "type": "string", "title": "Background colour", - "description": "Sets the generic background colour", + "description": "Sets the generic background colour.", "default": "", "_backboneForms": "ColourPicker" }, "background-inverted": { "type": "string", "title": "Background colour - inverted", - "description": "Defines the background text/icon colour. Should be a colour that provides good contrast against the background colour", + "description": "Defines the background text / icon colour. Should be a colour that provides good contrast against the background colour.", "default": "", "_backboneForms": "ColourPicker" }, "shadow": { "type": "string", - "title": "Shadow background colour (loading/popup background)", + "title": "Shadow background colour (loading / popup background)", "default": "", "_backboneForms": "ColourPicker" }, "shadow-inverted": { "type": "string", "title": "Shadow background colour - inverted", - "description": "Defines the shadow text/icon colour. Should be a colour that provides good contrast against the shadow colour", + "description": "Defines the shadow text / icon colour. Should be a colour that provides good contrast against the shadow colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -714,11 +1093,12 @@ "loading-inverted": { "type": "string", "title": "Loading animation colour - inverted", - "description": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour", + "description": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour.", "default": "", "_backboneForms": "ColourPicker" } } } + } } From 56b056dbeba5736477e6b61ffd3523955f8a3fdd Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Mon, 13 Jan 2025 11:29:31 +0000 Subject: [PATCH 84/86] Schema text updates --- properties.schema | 17 ++++++++--------- schema/theme.schema.json | 15 +++++++-------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/properties.schema b/properties.schema index 41c8c946..086dadf5 100644 --- a/properties.schema +++ b/properties.schema @@ -78,7 +78,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the clickable areas or points of interest in components." + "help": "Defines the selectable areas or points of interest in components." }, "item-color-inverted": { "title": "Item colour - inverted", @@ -127,14 +127,13 @@ "help": "Defines the item text / icon colour when selected. Should be a colour that provides good contrast against the item selected colour." }, "visited": { - "title": "Visited colour", + "title": "Item colour - visited", "type": "string", "inputType": "ColourPicker", - "default": "", - "help": "Defines the item colour when it has been visited." + "default": "" }, "visited-inverted": { - "title": "Visited colour - inverted", + "title": "Item colour - inverted visited", "type": "string", "inputType": "ColourPicker", "default": "", @@ -166,7 +165,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the clickable areas in components that don't contain course content." + "help": "Defines the selectable areas in components that don't contain course content." }, "item-ui-color-inverted": { "title": "Item UI colour - inverted", @@ -334,17 +333,17 @@ "help": "Defines the button text / icon colour when locked. Should be a colour that provides good contrast against the button locked colour." }, "disabled": { - "title": "Disabled colour", + "title": "Button colour - disabled", "type": "string", "inputType": "ColourPicker", "default": "" }, "disabled-inverted": { - "title": "Disabled colour - inverted", + "title": "Button colour - inverted disabled", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour." + "help": "Defines the button text / icon colour when disabled. Should be a colour that provides good contrast against the button disabled colour." }, "btn-icon-color": { "title": "Button icon colour", diff --git a/schema/theme.schema.json b/schema/theme.schema.json index 07b33ed7..5718894d 100644 --- a/schema/theme.schema.json +++ b/schema/theme.schema.json @@ -74,7 +74,7 @@ "item-color": { "type": "string", "title": "Item colour", - "description": "Defines the clickable areas or points of interest in components.", + "description": "Defines the selectable areas or points of interest in components.", "default": "", "_backboneForms": "ColourPicker" }, @@ -126,14 +126,13 @@ }, "visited": { "type": "string", - "title": "Visited colour", - "description": "Defines the item colour when it has been visited.", + "title": "Item colour - visited", "default": "", "_backboneForms": "ColourPicker" }, "visited-inverted": { "type": "string", - "title": "Visited colour - inverted", + "title": "Item colour - inverted visited", "description": "Defines the item text / icon colour when visited. Should be a colour that provides good contrast against the item visited colour.", "default": "", "_backboneForms": "ColourPicker" @@ -162,7 +161,7 @@ "item-ui-color": { "type": "string", "title": "Item UI colour", - "description": "Defines the clickable areas in components that don't contain course content.", + "description": "Defines the selectable areas in components that don't contain course content.", "default": "", "_backboneForms": "ColourPicker" }, @@ -327,14 +326,14 @@ }, "disabled": { "type": "string", - "title": "Disabled colour", + "title": "Button colour - disabled", "default": "", "_backboneForms": "ColourPicker" }, "disabled-inverted": { "type": "string", - "title": "Disabled colour - inverted", - "description": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour.", + "title": "Button colour - inverted disabled", + "description": "Defines the button text / icon colour when disabled. Should be a colour that provides good contrast against the button disabled colour.", "default": "", "_backboneForms": "ColourPicker" }, From 61741ac9fb7903e235bf2d55773a45ef9819ea72 Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Tue, 21 Jan 2025 09:32:47 +0000 Subject: [PATCH 85/86] Renamed files --- less/_defaults/_buttonMixins/{_btnStyles.less => _btn.less} | 0 .../_buttonMixins/{_drawerItemStyles.less => _drawerItem.less} | 0 .../_buttonMixins/{_drawerUiStyles.less => _drawerUI.less} | 0 less/_defaults/_buttonMixins/{_itemStyles.less => _item.less} | 0 less/_defaults/_buttonMixins/{_itemUiStyles.less => _itemUI.less} | 0 .../_buttonMixins/{_menuItemStyles.less => _menuItem.less} | 0 less/_defaults/_buttonMixins/{_navUiStyles.less => _navUI.less} | 0 .../_buttonMixins/{_notifyUiStyles.less => _notifyUI.less} | 0 less/core/{questionButton.less => buttonQuestion.less} | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename less/_defaults/_buttonMixins/{_btnStyles.less => _btn.less} (100%) rename less/_defaults/_buttonMixins/{_drawerItemStyles.less => _drawerItem.less} (100%) rename less/_defaults/_buttonMixins/{_drawerUiStyles.less => _drawerUI.less} (100%) rename less/_defaults/_buttonMixins/{_itemStyles.less => _item.less} (100%) rename less/_defaults/_buttonMixins/{_itemUiStyles.less => _itemUI.less} (100%) rename less/_defaults/_buttonMixins/{_menuItemStyles.less => _menuItem.less} (100%) rename less/_defaults/_buttonMixins/{_navUiStyles.less => _navUI.less} (100%) rename less/_defaults/_buttonMixins/{_notifyUiStyles.less => _notifyUI.less} (100%) rename less/core/{questionButton.less => buttonQuestion.less} (100%) diff --git a/less/_defaults/_buttonMixins/_btnStyles.less b/less/_defaults/_buttonMixins/_btn.less similarity index 100% rename from less/_defaults/_buttonMixins/_btnStyles.less rename to less/_defaults/_buttonMixins/_btn.less diff --git a/less/_defaults/_buttonMixins/_drawerItemStyles.less b/less/_defaults/_buttonMixins/_drawerItem.less similarity index 100% rename from less/_defaults/_buttonMixins/_drawerItemStyles.less rename to less/_defaults/_buttonMixins/_drawerItem.less diff --git a/less/_defaults/_buttonMixins/_drawerUiStyles.less b/less/_defaults/_buttonMixins/_drawerUI.less similarity index 100% rename from less/_defaults/_buttonMixins/_drawerUiStyles.less rename to less/_defaults/_buttonMixins/_drawerUI.less diff --git a/less/_defaults/_buttonMixins/_itemStyles.less b/less/_defaults/_buttonMixins/_item.less similarity index 100% rename from less/_defaults/_buttonMixins/_itemStyles.less rename to less/_defaults/_buttonMixins/_item.less diff --git a/less/_defaults/_buttonMixins/_itemUiStyles.less b/less/_defaults/_buttonMixins/_itemUI.less similarity index 100% rename from less/_defaults/_buttonMixins/_itemUiStyles.less rename to less/_defaults/_buttonMixins/_itemUI.less diff --git a/less/_defaults/_buttonMixins/_menuItemStyles.less b/less/_defaults/_buttonMixins/_menuItem.less similarity index 100% rename from less/_defaults/_buttonMixins/_menuItemStyles.less rename to less/_defaults/_buttonMixins/_menuItem.less diff --git a/less/_defaults/_buttonMixins/_navUiStyles.less b/less/_defaults/_buttonMixins/_navUI.less similarity index 100% rename from less/_defaults/_buttonMixins/_navUiStyles.less rename to less/_defaults/_buttonMixins/_navUI.less diff --git a/less/_defaults/_buttonMixins/_notifyUiStyles.less b/less/_defaults/_buttonMixins/_notifyUI.less similarity index 100% rename from less/_defaults/_buttonMixins/_notifyUiStyles.less rename to less/_defaults/_buttonMixins/_notifyUI.less diff --git a/less/core/questionButton.less b/less/core/buttonQuestion.less similarity index 100% rename from less/core/questionButton.less rename to less/core/buttonQuestion.less From 810519a202f2c5f4348cfe351c4c9e69773b633e Mon Sep 17 00:00:00 2001 From: Guy Willis Date: Tue, 21 Jan 2025 09:38:56 +0000 Subject: [PATCH 86/86] Renamed files --- .../_buttonMixins/{_notifyBtnStyles.less => _notifyBtn.less} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename less/_defaults/_buttonMixins/{_notifyBtnStyles.less => _notifyBtn.less} (100%) diff --git a/less/_defaults/_buttonMixins/_notifyBtnStyles.less b/less/_defaults/_buttonMixins/_notifyBtn.less similarity index 100% rename from less/_defaults/_buttonMixins/_notifyBtnStyles.less rename to less/_defaults/_buttonMixins/_notifyBtn.less