diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700.woff b/src/admin/assets/fonts/merriweather-v30-latin-700.woff deleted file mode 100644 index 31cbeaeeba..0000000000 Binary files a/src/admin/assets/fonts/merriweather-v30-latin-700.woff and /dev/null differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 deleted file mode 100644 index a6919a9da3..0000000000 Binary files a/src/admin/assets/fonts/merriweather-v30-latin-700.woff2 and /dev/null differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff deleted file mode 100644 index 8531695860..0000000000 Binary files a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff and /dev/null differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 deleted file mode 100644 index 20481352c1..0000000000 Binary files a/src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 and /dev/null differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-900.woff b/src/admin/assets/fonts/merriweather-v30-latin-900.woff new file mode 100644 index 0000000000..2a3aadc1c3 Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-900.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-900.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-900.woff2 new file mode 100644 index 0000000000..4e3aec9297 Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-900.woff2 differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff b/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff new file mode 100644 index 0000000000..29190fdfee Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff differ diff --git a/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff2 b/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff2 new file mode 100644 index 0000000000..d7cdeaa4fe Binary files /dev/null and b/src/admin/assets/fonts/merriweather-v30-latin-900italic.woff2 differ diff --git a/src/admin/components/elements/Eyebrow/index.scss b/src/admin/components/elements/Eyebrow/index.scss index 64307c91d3..f0fa88b173 100644 --- a/src/admin/components/elements/Eyebrow/index.scss +++ b/src/admin/components/elements/Eyebrow/index.scss @@ -4,7 +4,7 @@ @include blur-bg; position: sticky; top: 0; - z-index: $z-nav; + z-index: var(--z-nav); padding: base(1.5) 0; &__wrap { diff --git a/src/admin/components/elements/Nav/index.scss b/src/admin/components/elements/Nav/index.scss index 3ce75ccf72..12ff494e36 100644 --- a/src/admin/components/elements/Nav/index.scss +++ b/src/admin/components/elements/Nav/index.scss @@ -133,7 +133,7 @@ position: fixed; width: 100%; height: base(3); - z-index: $z-modal; + z-index: var(--z-modal); &__scroll { padding: 0; diff --git a/src/admin/components/elements/Popup/index.scss b/src/admin/components/elements/Popup/index.scss index ad6c462730..22a7d02d4a 100644 --- a/src/admin/components/elements/Popup/index.scss +++ b/src/admin/components/elements/Popup/index.scss @@ -7,7 +7,7 @@ position: absolute; background: var(--theme-input-bg); display: none; - z-index: $z-modal; + z-index: var(--z-popup); max-width: calc(100vw - #{$baseline}); &:after { diff --git a/src/admin/components/forms/field-types/RichText/elements/link/index.scss b/src/admin/components/forms/field-types/RichText/elements/link/index.scss index fb22a9ba4c..f830a7f01c 100644 --- a/src/admin/components/forms/field-types/RichText/elements/link/index.scss +++ b/src/admin/components/forms/field-types/RichText/elements/link/index.scss @@ -30,12 +30,11 @@ letter-spacing: inherit; line-height: inherit; position: relative; - z-index: 2; text-decoration: underline; cursor: text; &--open { - z-index: $z-modal + 1; + z-index: var(--z-popup); } } diff --git a/src/admin/components/forms/field-types/RichText/index.scss b/src/admin/components/forms/field-types/RichText/index.scss index 62baece32a..5dea0512ea 100644 --- a/src/admin/components/forms/field-types/RichText/index.scss +++ b/src/admin/components/forms/field-types/RichText/index.scss @@ -9,7 +9,7 @@ margin-bottom: $baseline; border: $style-stroke-width-s solid var(--theme-elevation-150); position: sticky; - z-index: 2; + z-index: 1; top: base(4); } diff --git a/src/admin/components/modals/LeaveWithoutSaving/index.scss b/src/admin/components/modals/LeaveWithoutSaving/index.scss index f7ae40e2f7..7b57353f0a 100644 --- a/src/admin/components/modals/LeaveWithoutSaving/index.scss +++ b/src/admin/components/modals/LeaveWithoutSaving/index.scss @@ -3,7 +3,7 @@ .leave-without-saving { @include blur-bg; position: fixed; - z-index: $z-modal; + z-index: var(--z-modal); top: 0; right: 0; bottom: 0; diff --git a/src/admin/components/views/collections/Edit/index.scss b/src/admin/components/views/collections/Edit/index.scss index e79c01017a..a697876125 100644 --- a/src/admin/components/views/collections/Edit/index.scss +++ b/src/admin/components/views/collections/Edit/index.scss @@ -74,7 +74,7 @@ padding-right: $baseline; position: sticky; top: 0; - z-index: $z-nav; + z-index: var(--z-nav); >* { position: relative; @@ -189,7 +189,7 @@ left: 0; right: 0; top: auto; - z-index: $z-nav; + z-index: var(--z-nav); } &__document-actions, diff --git a/src/admin/scss/app.scss b/src/admin/scss/app.scss index a90ca5a341..96ec4286d3 100644 --- a/src/admin/scss/app.scss +++ b/src/admin/scss/app.scss @@ -8,7 +8,6 @@ --breakpoint-s-width : #{$breakpoint-s-width}; --breakpoint-m-width : #{$breakpoint-m-width}; --breakpoint-l-width : #{$breakpoint-l-width}; - --z-modal: #{$z-modal}; --scrollbar-width: 17px; --theme-bg: var(--theme-elevation-0); @@ -18,6 +17,11 @@ --font-mono: monospace; --font-serif: 'Merriweather', serif; + --z-popup: 10; + --z-nav: 20; + --z-modal: 30; + --z-status: 40; + --gutter-h: #{base(5)}; @include large-break { @@ -164,7 +168,7 @@ dialog { .payload__modal-item--enter, .payload__modal-item--enterDone { - z-index: $z-modal; + z-index: var(--z-modal); } @import '~payload-user-css'; diff --git a/src/admin/scss/fonts.scss b/src/admin/scss/fonts.scss index 57dc0bef2e..0e33b1a2f1 100644 --- a/src/admin/scss/fonts.scss +++ b/src/admin/scss/fonts.scss @@ -51,17 +51,17 @@ @font-face { font-family: 'Merriweather'; font-style: normal; - font-weight: 700; + font-weight: 900; src: local(''), - url('../assets/fonts/merriweather-v30-latin-700.woff2') format('woff2'), - url('../assets/fonts/merriweather-v30-latin-700.woff') format('woff'); + url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'), + url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff'); } @font-face { font-family: 'Merriweather'; font-style: italic; - font-weight: 700; + font-weight: 900; src: local(''), - url('../assets/fonts/merriweather-v30-latin-700italic.woff2') format('woff2'), - url('../assets/fonts/merriweather-v30-latin-700italic.woff') format('woff'); + url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'), + url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff'); } diff --git a/src/admin/scss/styles.scss b/src/admin/scss/styles.scss index 65aa3d3e95..c163b87429 100644 --- a/src/admin/scss/styles.scss +++ b/src/admin/scss/styles.scss @@ -1,5 +1,4 @@ @import 'vars'; -@import 'z-index'; ////////////////////////////// // IMPORT OVERRIDES diff --git a/src/admin/scss/z-index.scss b/src/admin/scss/z-index.scss deleted file mode 100644 index 4774ae3f84..0000000000 --- a/src/admin/scss/z-index.scss +++ /dev/null @@ -1,9 +0,0 @@ -///////////////////////////// -// Z-INDEX CHART -///////////////////////////// - -$z-page: 20; -$z-page-content: 30; -$z-nav: 40; -$z-modal: 50; -$z-status: 60; diff --git a/test/fields/collections/RichText/index.ts b/test/fields/collections/RichText/index.ts index 2ca335517d..989945c577 100644 --- a/test/fields/collections/RichText/index.ts +++ b/test/fields/collections/RichText/index.ts @@ -3,6 +3,37 @@ import type { CollectionConfig } from '../../../../src/collections/config/types' const RichTextFields: CollectionConfig = { slug: 'rich-text-fields', fields: [ + { + name: 'selectHasMany', + hasMany: true, + type: 'select', + options: [ + { + label: 'Value One', + value: 'one', + }, + { + label: 'Value Two', + value: 'two', + }, + { + label: 'Value Three', + value: 'three', + }, + { + label: 'Value Four', + value: 'four', + }, + { + label: 'Value Five', + value: 'five', + }, + { + label: 'Value Six', + value: 'six', + }, + ], + }, { name: 'richText', type: 'richText', @@ -12,6 +43,7 @@ const RichTextFields: CollectionConfig = { }; export const richTextDoc = { + select: ['one', 'five'], richText: [ { children: [ @@ -96,6 +128,41 @@ export const richTextDoc = { }, ], }, + { + children: [ + { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.', + }, + ], + }, + { + children: [ + { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.', + }, + ], + }, + { + children: [ + { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.', + }, + ], + }, + { + children: [ + { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.', + }, + ], + }, + { + children: [ + { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.', + }, + ], + }, ], };