From 4b7fa7e990965876a1fb1fec4eb01e91335d04fb Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Wed, 18 Dec 2024 18:52:23 -0600 Subject: [PATCH 1/6] fix(shs-5996-shs-5997): wysiwyg more link and external link styles --- .../humsci_basic/src/scss/tools/_mixins.icons.scss | 2 +- .../src/scss/utilities/_wysiwyg-text-area.scss | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.icons.scss b/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.icons.scss index f0cdc05c9d..84f4e8a90b 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.icons.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.icons.scss @@ -6,7 +6,7 @@ background-image: svg(hc-get-icons($icon, $icon-color)); } @else { - $icon-color: map-get(map-get($hc-colorful-pairings, 'ocean'), $color); + $icon-color: map-get(map-get($hc-colorful-pairings, 'cardinal'), $color); background-image: svg(hc-get-icons($icon, $icon-color)); .hc-pairing-ocean & { diff --git a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss index 5772947778..acc9c3b1b3 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss @@ -308,7 +308,8 @@ blockquote:nth-child(n) { } a[href*="//"].hs-external-link, -.hs-external-link a[href*="//"] +.hs-external-link a[href*="//"], +.ck-content a.hs-external-link { @include hb-link--inline; @include hb-external-link-icon; @@ -338,6 +339,16 @@ a[href*="//"].hs-external-link, } } } + + .ck-style-grid__button & { + &::after { + width: 18px; + height: 11px; + margin-bottom: 0; + background-size: 11px; + padding-left: 0; + } + } } a.hs-private-link, From 3f5e3fcb5e2b98c5948d62d7c150b1750841fbed Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 2 Jan 2025 09:11:47 -0600 Subject: [PATCH 2/6] fix(shs-5996-shs-5997): move external link styles for CKEditor UI to the admin theme CSS --- .../src/scss/utilities/_wysiwyg-text-area.scss | 10 ---------- .../su_humsci_gin_admin/dist/su_humsci_gin_admin.css | 10 ++++++++++ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss index acc9c3b1b3..6a3a90fd38 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss @@ -339,16 +339,6 @@ a[href*="//"].hs-external-link, } } } - - .ck-style-grid__button & { - &::after { - width: 18px; - height: 11px; - margin-bottom: 0; - background-size: 11px; - padding-left: 0; - } - } } a.hs-private-link, diff --git a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css index 70ab9f1b41..e7f474fd96 100644 --- a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css +++ b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css @@ -217,3 +217,13 @@ body.gin--edit-form .views-exposed-form .select-preact button svg { .ck-powered-by-balloon { z-index: 1000 !important; } + +/* Match styles of external link's icon in the WYSIWYG style's dropdown preview with the original design */ +.ck-style-grid__button .ck-content a.hs-external-link::after { + width: 20px; + height: 11px; + margin-bottom: 0; + /* Use px instead of rem because when using rem the icon looks way bigger */ + background-size: 11px; + padding-left: 0; +} \ No newline at end of file From 2d4f040dbcc71afd4be044a2e374ba8ea7870cb6 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 2 Jan 2025 09:13:50 -0600 Subject: [PATCH 3/6] fix(shs-5996-shs-5997): move external link styles for CKEditor UI to the admin theme CSS --- .../humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css index e7f474fd96..ed4f80eb41 100644 --- a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css +++ b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css @@ -219,11 +219,11 @@ body.gin--edit-form .views-exposed-form .select-preact button svg { } /* Match styles of external link's icon in the WYSIWYG style's dropdown preview with the original design */ +/* Resize the icon, using px instead of rem, because when using rem the icon looks way bigger */ .ck-style-grid__button .ck-content a.hs-external-link::after { width: 20px; height: 11px; margin-bottom: 0; - /* Use px instead of rem because when using rem the icon looks way bigger */ background-size: 11px; padding-left: 0; } \ No newline at end of file From 55401069af59c93fcae73701c02dbcc118f703ae Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 2 Jan 2025 09:24:40 -0600 Subject: [PATCH 4/6] fix(shs-5996-shs-5997): add empty space at the end of the admin theme CSS file --- .../humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css index ed4f80eb41..acc76c25d7 100644 --- a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css +++ b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css @@ -226,4 +226,4 @@ body.gin--edit-form .views-exposed-form .select-preact button svg { margin-bottom: 0; background-size: 11px; padding-left: 0; -} \ No newline at end of file +} From aa788019186c24bc83bd877e69069dfcb27349c2 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 2 Jan 2025 16:56:28 -0600 Subject: [PATCH 5/6] fix(shs-5996-shs-5997): move external links to _wysiwyg-editor file --- .../src/scss/admin/_wysiwyg-editor.scss | 45 +++++++++++++++++++ .../scss/utilities/_wysiwyg-text-area.scss | 4 +- .../dist/su_humsci_gin_admin.css | 10 ----- 3 files changed, 46 insertions(+), 13 deletions(-) diff --git a/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss b/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss index 533dd0ff15..6d81e6e741 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss @@ -98,3 +98,48 @@ drupal-media { .ck-editor .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items { flex-wrap: wrap; } + +/* Match styles of external link in the WYSIWYG style's dropdown preview with the original design */ +.ck-content a.hs-external-link { + @include hb-link--inline; + @include hb-external-link-icon; + + & + + .hb-dark-pattern.hb-local-footer & { + @include hb-colorful { + color: var(--palette--white); + + &::after { + @include hb-icon-background('ext-link', 'white'); + } + + &:hover::after { + @include hb-icon-background('ext-link', 'gray-medium'); + } + } + + @include hb-traditional { + color: var(--palette--tertiary-highlight); + + &::after { + @include hb-icon-background('ext-link', 'tertiary-highlight'); + } + + &:hover::after { + @include hb-icon-background('ext-link', 'tertiary-highlight-darken-10'); + } + } + } + + /* Resize the icon, using px instead of rem, because when using rem the icon looks way bigger */ + .ck-style-grid__button & { + &::after { + width: 18px; + height: 11px; + margin-bottom: 0; + background-size: 11px; + padding-left: 0; + } + } +} diff --git a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss index 6a3a90fd38..0f020638bb 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/utilities/_wysiwyg-text-area.scss @@ -308,9 +308,7 @@ blockquote:nth-child(n) { } a[href*="//"].hs-external-link, -.hs-external-link a[href*="//"], -.ck-content a.hs-external-link -{ +.hs-external-link a[href*="//"] { @include hb-link--inline; @include hb-external-link-icon; diff --git a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css index acc76c25d7..70ab9f1b41 100644 --- a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css +++ b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css @@ -217,13 +217,3 @@ body.gin--edit-form .views-exposed-form .select-preact button svg { .ck-powered-by-balloon { z-index: 1000 !important; } - -/* Match styles of external link's icon in the WYSIWYG style's dropdown preview with the original design */ -/* Resize the icon, using px instead of rem, because when using rem the icon looks way bigger */ -.ck-style-grid__button .ck-content a.hs-external-link::after { - width: 20px; - height: 11px; - margin-bottom: 0; - background-size: 11px; - padding-left: 0; -} From 21e0b5f060b60b606ae3e0b4a81292bd7af5d992 Mon Sep 17 00:00:00 2001 From: Mari Nez Date: Thu, 2 Jan 2025 17:16:30 -0600 Subject: [PATCH 6/6] fix(shs-5996-shs-5997): move external links to _wysiwyg-editor file --- .../src/scss/admin/_wysiwyg-editor.scss | 44 +++---------------- 1 file changed, 7 insertions(+), 37 deletions(-) diff --git a/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss b/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss index 6d81e6e741..55a7b2db0a 100644 --- a/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss +++ b/docroot/themes/humsci/humsci_basic/src/scss/admin/_wysiwyg-editor.scss @@ -100,46 +100,16 @@ drupal-media { } /* Match styles of external link in the WYSIWYG style's dropdown preview with the original design */ -.ck-content a.hs-external-link { +.ck-style-grid__button__preview a.hs-external-link { @include hb-link--inline; @include hb-external-link-icon; - & - - .hb-dark-pattern.hb-local-footer & { - @include hb-colorful { - color: var(--palette--white); - - &::after { - @include hb-icon-background('ext-link', 'white'); - } - - &:hover::after { - @include hb-icon-background('ext-link', 'gray-medium'); - } - } - - @include hb-traditional { - color: var(--palette--tertiary-highlight); - - &::after { - @include hb-icon-background('ext-link', 'tertiary-highlight'); - } - - &:hover::after { - @include hb-icon-background('ext-link', 'tertiary-highlight-darken-10'); - } - } - } - /* Resize the icon, using px instead of rem, because when using rem the icon looks way bigger */ - .ck-style-grid__button & { - &::after { - width: 18px; - height: 11px; - margin-bottom: 0; - background-size: 11px; - padding-left: 0; - } + &::after { + width: 18px; + height: 11px; + margin-bottom: 0; + background-size: 11px; + padding-left: 0; } }