diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml index 92f2b14cc4c0d3735f94e2dbec27d0041a0f43cf..5b8fd2393527301e88f3799f7d23e99ff196a0a2 100644 --- a/core/themes/claro/claro.info.yml +++ b/core/themes/claro/claro.info.yml @@ -136,6 +136,8 @@ libraries-extend: - claro/ajax user/drupal.user: - claro/form.password-confirm + node/drupal.node.preview: + - claro/drupal.node.preview views/views.module: - claro/views media/media_embed_ckeditor_theme: diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml index 718bbf6ec44802f90c94b02ed126003f578d399f..3a16437d1ae7fc80c8ce8e12d226e4c46544e9bd 100644 --- a/core/themes/claro/claro.libraries.yml +++ b/core/themes/claro/claro.libraries.yml @@ -133,6 +133,12 @@ claro.tabledrag: js: js/tabledrag.js: {} +drupal.node.preview: + version: VERSION + css: + theme: + css/components/node-preview.css: {} + tour-styling: version: VERSION css: diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme index b760ed3de079a14b44dee4a8b1f7c415e1e5a404..b5205023968d16f72a59facae1fe33f3c5590098 100644 --- a/core/themes/claro/claro.theme +++ b/core/themes/claro/claro.theme @@ -1848,3 +1848,13 @@ function claro_form_user_admin_permissions_alter(&$form, FormStateInterface $for } } } + +/** + * Implements hook_form_FORM_ID_alter(). + */ +function claro_form_node_preview_form_select_alter(array &$form, FormStateInterface $form_state) { + if (isset($form['backlink'])) { + $form['backlink']['#options']['attributes']['class'][] = 'action-link'; + $form['backlink']['#options']['attributes']['class'][] = 'action-link--icon-chevron-left'; + } +} diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css index a64881c5b9bcc832492a1414f22400fb878d9a07..702b6a98ef7cfb89e9886d5ba88886a61ca89501 100644 --- a/core/themes/claro/css/components/action-link.css +++ b/core/themes/claro/css/components/action-link.css @@ -508,3 +508,15 @@ .action-link--icon-questionmark.action-link--danger:active::before { background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e"); } + +.action-link--icon-chevron-left::before { + display: block; + content: ""; + background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e"); +} + +@media (min-width: 30em) { + .action-link--icon-chevron-left::before { + display: inline-block; + } +} diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css index ecb54967f01c1ed4f88d9a1a3b4a39965e1815f6..51a0c9ed0109a4dbb56154eb8598a6944daed335 100644 --- a/core/themes/claro/css/components/action-link.pcss.css +++ b/core/themes/claro/css/components/action-link.pcss.css @@ -494,3 +494,19 @@ } } } + +.action-link--icon-chevron-left { + &::before { + display: block; + content: ""; + background-image: url("../../images/icons/545560/pager-prev.svg"); + } +} + +@media (min-width: 30em) { + .action-link--icon-chevron-left { + &::before { + display: inline-block; + } + } +} diff --git a/core/themes/claro/css/components/node-preview.css b/core/themes/claro/css/components/node-preview.css new file mode 100644 index 0000000000000000000000000000000000000000..1a0fc25114c8ce3301c69a0e6fe4ff824f53943e --- /dev/null +++ b/core/themes/claro/css/components/node-preview.css @@ -0,0 +1,23 @@ +/* + * DO NOT EDIT THIS FILE. + * See the following change record for more information, + * https://www.drupal.org/node/3084859 + * @preserve + */ + +.node-preview-container { + position: sticky; + z-index: 499; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + width: 100%; +} + +.node-preview-form-select { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} diff --git a/core/themes/claro/css/components/node-preview.pcss.css b/core/themes/claro/css/components/node-preview.pcss.css new file mode 100644 index 0000000000000000000000000000000000000000..e47d56a882f3130e61f4ad98bc0f69ba3cccc607 --- /dev/null +++ b/core/themes/claro/css/components/node-preview.pcss.css @@ -0,0 +1,16 @@ +.node-preview-container { + position: sticky; + z-index: 499; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + width: 100%; +} + +.node-preview-form-select { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +}