From e6a1ca5049b9ddd7cf0e0ee3f172a56ecf10dabe Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 15 Oct 2024 19:58:50 -0600 Subject: [PATCH] fix(ui): add missing styles under the payload-default css layer (#8723) --- .../DocumentHeader/Tabs/Tab/index.scss | 156 +++++----- .../elements/DocumentHeader/Tabs/index.scss | 82 ++--- .../src/elements/DocumentHeader/index.scss | 88 +++--- .../src/elements/DocumentLocked/index.scss | 56 ++-- .../src/elements/DocumentTakeOver/index.scss | 56 ++-- .../next/src/elements/FormHeader/index.scss | 12 +- .../elements/LeaveWithoutSaving/index.scss | 56 ++-- .../src/elements/Nav/NavWrapper/index.scss | 38 +-- packages/next/src/elements/Nav/index.scss | 284 +++++++++--------- .../src/templates/Default/Wrapper/index.scss | 84 +++--- .../next/src/templates/Default/index.scss | 124 ++++---- .../next/src/templates/Minimal/index.scss | 42 +-- .../next/src/views/API/RenderJSON/index.scss | 154 +++++----- .../nodes/unknownConvertedNode/index.scss | 24 +- .../nodes/unknownConvertedNode/index.scss | 24 +- .../toolbars/shared/ToolbarButton/index.scss | 68 +++-- .../shared/ToolbarDropdown/index.scss | 206 ++++++------- .../src/field/elements/blockquote/index.scss | 12 +- .../field/elements/link/Element/index.scss | 134 +++++---- .../field/elements/link/LinkDrawer/index.scss | 86 +++--- .../src/field/elements/ol/index.scss | 8 +- .../elements/relationship/Button/index.scss | 10 +- .../elements/relationship/Element/index.scss | 158 +++++----- .../src/field/elements/ul/index.scss | 8 +- .../field/elements/upload/Button/index.scss | 10 +- .../field/elements/upload/Element/index.scss | 262 ++++++++-------- 26 files changed, 1147 insertions(+), 1095 deletions(-) diff --git a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss index e0fe6ed83..9f8e62ecc 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss +++ b/packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss @@ -1,93 +1,95 @@ @import '../../../../scss/styles.scss'; -.doc-tab { - @extend %h5; - position: relative; +@layer payload-default { + .doc-tab { + @extend %h5; + position: relative; - &__link { - text-decoration: none; - display: flex; - justify-content: center; - align-items: center; - white-space: nowrap; + &__link { + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + white-space: nowrap; - // Use a pseudo element for the accessability so that it doesn't take up DOM space - // Also because the parent element has `overflow: hidden` which would clip an outline - &:focus-visible::after { - content: ''; - border: var(--accessibility-outline); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - } - } - - &:focus:not(:focus-visible) { - opacity: 1; - } - - &::before { - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - border-radius: var(--style-radius-s); - background-color: var(--theme-elevation-50); - opacity: 0; - } - - &:hover { - &::before { - opacity: 1; - } - - .doc-tab__count { - background-color: var(--theme-elevation-150); - } - } - - &--active { - font-weight: 600; - &::before { - opacity: 1; - background-color: var(--theme-elevation-100); - } - - .doc-tab { - &__count { - background-color: var(--theme-elevation-250); + // Use a pseudo element for the accessability so that it doesn't take up DOM space + // Also because the parent element has `overflow: hidden` which would clip an outline + &:focus-visible::after { + content: ''; + border: var(--accessibility-outline); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; } } + &:focus:not(:focus-visible) { + opacity: 1; + } + + &::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + border-radius: var(--style-radius-s); + background-color: var(--theme-elevation-50); + opacity: 0; + } + &:hover { + &::before { + opacity: 1; + } + + .doc-tab__count { + background-color: var(--theme-elevation-150); + } + } + + &--active { + font-weight: 600; + &::before { + opacity: 1; + background-color: var(--theme-elevation-100); + } + .doc-tab { &__count { background-color: var(--theme-elevation-250); } } + + &:hover { + .doc-tab { + &__count { + background-color: var(--theme-elevation-250); + } + } + } + } + + &__label { + display: flex; + position: relative; + align-items: center; + gap: 4px; + width: 100%; + height: 100%; + line-height: base(1.2); + padding: base(0.2) base(0.6); + } + + &__count { + line-height: base(0.8); + min-width: base(0.8); + text-align: center; + background-color: var(--theme-elevation-100); + border-radius: var(--style-radius-s); } } - - &__label { - display: flex; - position: relative; - align-items: center; - gap: 4px; - width: 100%; - height: 100%; - line-height: base(1.2); - padding: base(0.2) base(0.6); - } - - &__count { - line-height: base(0.8); - min-width: base(0.8); - text-align: center; - background-color: var(--theme-elevation-100); - border-radius: var(--style-radius-s); - } } diff --git a/packages/next/src/elements/DocumentHeader/Tabs/index.scss b/packages/next/src/elements/DocumentHeader/Tabs/index.scss index c06f39cb9..3a16014d8 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/index.scss +++ b/packages/next/src/elements/DocumentHeader/Tabs/index.scss @@ -1,52 +1,54 @@ @import '../../../scss/styles.scss'; -.doc-tabs { - display: flex; - - &__tabs { +@layer payload-default { + .doc-tabs { display: flex; - gap: calc(var(--base) / 2); - list-style: none; - align-items: center; - margin: 0; - padding-left: 0; - } - - @include mid-break { - width: 100%; - padding: 0; - overflow: auto; - - // this container has a gradient overlay as visual indication of `overflow: scroll` - &::-webkit-scrollbar { - display: none; - } - - &::after { - content: ''; - display: block; - position: sticky; - right: 0; - width: calc(var(--base) * 2); - height: calc(var(--base) * 2); - background: linear-gradient(to right, transparent, var(--theme-bg)); - flex-shrink: 0; - z-index: 1111; - pointer-events: none; - } &__tabs { + display: flex; + gap: calc(var(--base) / 2); + list-style: none; + align-items: center; + margin: 0; + padding-left: 0; + } + + @include mid-break { + width: 100%; padding: 0; - } - } + overflow: auto; - @include small-break { - &__tabs-container { - margin-right: var(--gutter-h); + // this container has a gradient overlay as visual indication of `overflow: scroll` + &::-webkit-scrollbar { + display: none; + } + + &::after { + content: ''; + display: block; + position: sticky; + right: 0; + width: calc(var(--base) * 2); + height: calc(var(--base) * 2); + background: linear-gradient(to right, transparent, var(--theme-bg)); + flex-shrink: 0; + z-index: 1111; + pointer-events: none; + } + + &__tabs { + padding: 0; + } } - &__tabs { - gap: var(--gutter-h); + @include small-break { + &__tabs-container { + margin-right: var(--gutter-h); + } + + &__tabs { + gap: var(--gutter-h); + } } } } diff --git a/packages/next/src/elements/DocumentHeader/index.scss b/packages/next/src/elements/DocumentHeader/index.scss index fc5d2118e..60a534ef0 100644 --- a/packages/next/src/elements/DocumentHeader/index.scss +++ b/packages/next/src/elements/DocumentHeader/index.scss @@ -1,52 +1,54 @@ @import '../../scss/styles.scss'; -.doc-header { - width: 100%; - margin-top: base(0.4); - padding-bottom: calc(var(--base) * 1.2); - display: flex; - align-items: center; - position: relative; - display: flex; - gap: calc(var(--base) / 2); - - &::after { - content: ''; - display: block; - position: absolute; - height: 1px; - background: var(--theme-elevation-100); +@layer payload-default { + .doc-header { width: 100%; - left: 0; - top: calc(100% - 1px); - } - - &__title { - flex-grow: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 0; - padding-bottom: base(0.4); - line-height: 1; - vertical-align: top; - } - - @include mid-break { - padding-left: 0; - padding-right: 0; - margin-top: base(0.25); - padding-bottom: calc(var(--base) / 1.5); - flex-direction: column; + margin-top: base(0.4); + padding-bottom: calc(var(--base) * 1.2); + display: flex; + align-items: center; + position: relative; + display: flex; gap: calc(var(--base) / 2); - padding-bottom: calc(var(--base) / 2); + + &::after { + content: ''; + display: block; + position: absolute; + height: 1px; + background: var(--theme-elevation-100); + width: 100%; + left: 0; + top: calc(100% - 1px); + } &__title { - width: 100%; + flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; + padding-bottom: base(0.4); + line-height: 1; + vertical-align: top; + } + + @include mid-break { + padding-left: 0; + padding-right: 0; + margin-top: base(0.25); + padding-bottom: calc(var(--base) / 1.5); + flex-direction: column; + gap: calc(var(--base) / 2); + padding-bottom: calc(var(--base) / 2); + + &__title { + width: 100%; + } + } + + @include small-break { + margin-top: 0; } } - - @include small-break { - margin-top: 0; - } } diff --git a/packages/next/src/elements/DocumentLocked/index.scss b/packages/next/src/elements/DocumentLocked/index.scss index d2e6d392d..3918f430c 100644 --- a/packages/next/src/elements/DocumentLocked/index.scss +++ b/packages/next/src/elements/DocumentLocked/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.document-locked { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .document-locked { + @include blur-bg; display: flex; - flex-direction: column; - gap: var(--base); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: var(--base); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: var(--base); + padding: base(2); } - } - &__controls { - display: flex; - gap: var(--base); + &__content { + display: flex; + flex-direction: column; + gap: var(--base); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: var(--base); + + .btn { + margin: 0; + } } } } diff --git a/packages/next/src/elements/DocumentTakeOver/index.scss b/packages/next/src/elements/DocumentTakeOver/index.scss index 58bbec716..a9dc269c9 100644 --- a/packages/next/src/elements/DocumentTakeOver/index.scss +++ b/packages/next/src/elements/DocumentTakeOver/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.document-take-over { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .document-take-over { + @include blur-bg; display: flex; - flex-direction: column; - gap: var(--base); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: var(--base); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: var(--base); + padding: base(2); } - } - &__controls { - display: flex; - gap: var(--base); + &__content { + display: flex; + flex-direction: column; + gap: var(--base); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: var(--base); + + .btn { + margin: 0; + } } } } diff --git a/packages/next/src/elements/FormHeader/index.scss b/packages/next/src/elements/FormHeader/index.scss index 950597471..88896041c 100644 --- a/packages/next/src/elements/FormHeader/index.scss +++ b/packages/next/src/elements/FormHeader/index.scss @@ -1,6 +1,8 @@ -.form-header { - display: flex; - flex-direction: column; - gap: calc(var(--base) * .5); - margin-bottom: var(--base); +@layer payload-default { + .form-header { + display: flex; + flex-direction: column; + gap: calc(var(--base) * 0.5); + margin-bottom: var(--base); + } } diff --git a/packages/next/src/elements/LeaveWithoutSaving/index.scss b/packages/next/src/elements/LeaveWithoutSaving/index.scss index 45765f2b5..efca3fad5 100644 --- a/packages/next/src/elements/LeaveWithoutSaving/index.scss +++ b/packages/next/src/elements/LeaveWithoutSaving/index.scss @@ -1,37 +1,39 @@ @import '../../scss/styles.scss'; -.leave-without-saving { - @include blur-bg; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - &__wrapper { - z-index: 1; - position: relative; +@layer payload-default { + .leave-without-saving { + @include blur-bg; display: flex; - flex-direction: column; - gap: base(0.8); - padding: base(2); - } + align-items: center; + justify-content: center; + height: 100%; - &__content { - display: flex; - flex-direction: column; - gap: base(0.4); - - > * { - margin: 0; + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); } - } - &__controls { - display: flex; - gap: base(0.4); + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); - .btn { - margin: 0; + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } } } } diff --git a/packages/next/src/elements/Nav/NavWrapper/index.scss b/packages/next/src/elements/Nav/NavWrapper/index.scss index ce98d2aed..4c0688900 100644 --- a/packages/next/src/elements/Nav/NavWrapper/index.scss +++ b/packages/next/src/elements/Nav/NavWrapper/index.scss @@ -1,25 +1,27 @@ @import '../../../scss/styles.scss'; -.nav { - position: sticky; - top: 0; - left: 0; - flex-shrink: 0; - height: 100vh; - width: var(--nav-width); - border-right: 1px solid var(--theme-elevation-100); - opacity: 0; +@layer payload-default { + .nav { + position: sticky; + top: 0; + left: 0; + flex-shrink: 0; + height: 100vh; + width: var(--nav-width); + border-right: 1px solid var(--theme-elevation-100); + opacity: 0; - [dir='rtl'] & { - border-right: none; - border-left: 1px solid var(--theme-elevation-100); - } + [dir='rtl'] & { + border-right: none; + border-left: 1px solid var(--theme-elevation-100); + } - &--nav-animate { - transition: opacity var(--nav-trans-time) ease-in-out; - } + &--nav-animate { + transition: opacity var(--nav-trans-time) ease-in-out; + } - &--nav-open { - opacity: 1; + &--nav-open { + opacity: 1; + } } } diff --git a/packages/next/src/elements/Nav/index.scss b/packages/next/src/elements/Nav/index.scss index 26f8285b1..93c03802f 100644 --- a/packages/next/src/elements/Nav/index.scss +++ b/packages/next/src/elements/Nav/index.scss @@ -1,160 +1,162 @@ @import '../../scss/styles.scss'; -.nav { - position: sticky; - top: 0; - left: 0; - flex-shrink: 0; - height: 100vh; - width: var(--nav-width); - border-right: 1px solid var(--theme-elevation-100); - opacity: 0; - overflow: hidden; - - [dir='rtl'] & { - border-right: none; - border-left: 1px solid var(--theme-elevation-100); - } - - &--nav-animate { - transition: opacity var(--nav-trans-time) ease-in-out; - } - - &--nav-open { - opacity: 1; - } - - &__header { - position: absolute; +@layer payload-default { + .nav { + position: sticky; top: 0; - width: 100vw; - height: var(--app-header-height); - } + left: 0; + flex-shrink: 0; + height: 100vh; + width: var(--nav-width); + border-right: 1px solid var(--theme-elevation-100); + opacity: 0; + overflow: hidden; - &__header-content { - z-index: 1; - position: relative; - height: 100%; - width: 100%; - } - - &__mobile-close { - display: none; - background: none; - border: 0; - outline: 0; - padding: base(0.8) 0; - } - - &__scroll { - height: 100%; - display: flex; - flex-direction: column; - padding: var(--app-header-height) base(1) base(2) base(1); - overflow-y: auto; - - // remove the scrollbar here to prevent layout shift as nav groups are toggled - &::-webkit-scrollbar { - display: none; - } - } - - &__wrap { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - flex-grow: 1; - } - - &__label { - color: var(--theme-elevation-400); - } - - &__controls { - margin-top: auto; - margin-bottom: 0; - - > * { - margin-top: base(1); + [dir='rtl'] & { + border-right: none; + border-left: 1px solid var(--theme-elevation-100); } - a:focus-visible { - outline: var(--accessibility-outline); + &--nav-animate { + transition: opacity var(--nav-trans-time) ease-in-out; } - } - &__log-out { - &:hover { - g { - transform: translateX(-#{base(0.125)}); - } + &--nav-open { + opacity: 1; } - } - nav { - a { + &__header { + position: absolute; + top: 0; + width: 100vw; + height: var(--app-header-height); + } + + &__header-content { + z-index: 1; position: relative; - padding-block: base(0.125); - padding-inline-start: 0; - padding-inline-end: base(1.5); - display: flex; - text-decoration: none; - - &:focus:not(:focus-visible) { - box-shadow: none; - font-weight: 600; - } - - &:hover, - &:focus-visible { - text-decoration: underline; - } - - &.active { - font-weight: normal; - padding-left: 0; - font-weight: 600; - } - } - } - - &__link { - display: flex; - align-items: center; - } - - &__link-indicator { - position: absolute; - display: block; - // top: 0; - inset-inline-start: base(-1); - width: 2px; - height: 16px; - border-start-end-radius: 2px; - border-end-end-radius: 2px; - background: var(--theme-text); - } - - @include mid-break { - &__scroll { - padding: var(--app-header-height) base(0.5) base(2); - } - } - - @include small-break { - &__scroll { - padding: var(--app-header-height) var(--gutter-h) base(2); - } - - nav a { - font-size: base(0.875); - line-height: base(1.5); + height: 100%; + width: 100%; } &__mobile-close { + display: none; + background: none; + border: 0; + outline: 0; + padding: base(0.8) 0; + } + + &__scroll { + height: 100%; + display: flex; + flex-direction: column; + padding: var(--app-header-height) base(1) base(2) base(1); + overflow-y: auto; + + // remove the scrollbar here to prevent layout shift as nav groups are toggled + &::-webkit-scrollbar { + display: none; + } + } + + &__wrap { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + flex-grow: 1; + } + + &__label { + color: var(--theme-elevation-400); + } + + &__controls { + margin-top: auto; + margin-bottom: 0; + + > * { + margin-top: base(1); + } + + a:focus-visible { + outline: var(--accessibility-outline); + } + } + + &__log-out { + &:hover { + g { + transform: translateX(-#{base(0.125)}); + } + } + } + + nav { + a { + position: relative; + padding-block: base(0.125); + padding-inline-start: 0; + padding-inline-end: base(1.5); + display: flex; + text-decoration: none; + + &:focus:not(:focus-visible) { + box-shadow: none; + font-weight: 600; + } + + &:hover, + &:focus-visible { + text-decoration: underline; + } + + &.active { + font-weight: normal; + padding-left: 0; + font-weight: 600; + } + } + } + + &__link { display: flex; align-items: center; } + + &__link-indicator { + position: absolute; + display: block; + // top: 0; + inset-inline-start: base(-1); + width: 2px; + height: 16px; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + background: var(--theme-text); + } + + @include mid-break { + &__scroll { + padding: var(--app-header-height) base(0.5) base(2); + } + } + + @include small-break { + &__scroll { + padding: var(--app-header-height) var(--gutter-h) base(2); + } + + nav a { + font-size: base(0.875); + line-height: base(1.5); + } + + &__mobile-close { + display: flex; + align-items: center; + } + } } } diff --git a/packages/next/src/templates/Default/Wrapper/index.scss b/packages/next/src/templates/Default/Wrapper/index.scss index 22b858e40..381b2766a 100644 --- a/packages/next/src/templates/Default/Wrapper/index.scss +++ b/packages/next/src/templates/Default/Wrapper/index.scss @@ -1,55 +1,57 @@ @import '../../../scss/styles.scss'; -.template-default { - min-height: 100vh; - display: grid; - position: relative; - isolation: isolate; - - @media (prefers-reduced-motion) { - transition: none; - } - - &--nav-animate { - transition: grid-template-columns var(--nav-trans-time) linear; - } - - &--nav-open { - .template-default { - &__nav-overlay { - transition: opacity var(--nav-trans-time) linear; - } - } - } -} - -@media (min-width: 1441px) { +@layer payload-default { .template-default { - grid-template-columns: 0 auto; + min-height: 100vh; + display: grid; + position: relative; + isolation: isolate; + + @media (prefers-reduced-motion) { + transition: none; + } + + &--nav-animate { + transition: grid-template-columns var(--nav-trans-time) linear; + } &--nav-open { - grid-template-columns: var(--nav-width) auto; + .template-default { + &__nav-overlay { + transition: opacity var(--nav-trans-time) linear; + } + } } } -} -@media (max-width: 1440px) { - .template-default--nav-hydrated.template-default--nav-open { - grid-template-columns: var(--nav-width) auto; - } - - .template-default { - grid-template-columns: 1fr auto; - - .nav { - display: none; - } - - &--nav-hydrated { + @media (min-width: 1441px) { + .template-default { grid-template-columns: 0 auto; + &--nav-open { + grid-template-columns: var(--nav-width) auto; + } + } + } + + @media (max-width: 1440px) { + .template-default--nav-hydrated.template-default--nav-open { + grid-template-columns: var(--nav-width) auto; + } + + .template-default { + grid-template-columns: 1fr auto; + .nav { - display: unset; + display: none; + } + + &--nav-hydrated { + grid-template-columns: 0 auto; + + .nav { + display: unset; + } } } } diff --git a/packages/next/src/templates/Default/index.scss b/packages/next/src/templates/Default/index.scss index 9711bcb74..041455573 100644 --- a/packages/next/src/templates/Default/index.scss +++ b/packages/next/src/templates/Default/index.scss @@ -1,76 +1,78 @@ @import '../../scss/styles.scss'; -.template-default { - background-color: var(--theme-bg); - color: var(--theme-text); - - [dir='rtl'] &__nav-toggler-wrapper { - left: unset; - right: 0; - } - - &__nav-toggler-wrapper { - position: sticky; - z-index: var(--z-modal); - top: 0; - left: 0; - height: 0; - width: var(--gutter-h); - display: flex; - justify-content: center; - } - - &__nav-toggler-container { - height: var(--app-header-height); - display: flex; - align-items: center; - } - - &__nav-toggler { - display: flex; - align-items: center; - } - - &__wrap { - min-width: 0; - width: 100%; - flex-grow: 1; - position: relative; +@layer payload-default { + .template-default { background-color: var(--theme-bg); - &:before { - content: ''; - display: block; - position: absolute; - inset: 0; - background-color: inherit; - opacity: 0; - z-index: var(--z-status); - visibility: hidden; - transition: all var(--nav-trans-time) linear; + color: var(--theme-text); + + [dir='rtl'] &__nav-toggler-wrapper { + left: unset; + right: 0; } - } - @include mid-break { &__nav-toggler-wrapper { - .hamburger { - left: unset; - } + position: sticky; + z-index: var(--z-modal); + top: 0; + left: 0; + height: 0; + width: var(--gutter-h); + display: flex; + justify-content: center; } - } - @include small-break { - &__nav-toggler-wrapper { - width: unset; - justify-content: unset; + &__nav-toggler-container { + height: var(--app-header-height); + display: flex; + align-items: center; + } - .hamburger { - display: none; + &__nav-toggler { + display: flex; + align-items: center; + } + + &__wrap { + min-width: 0; + width: 100%; + flex-grow: 1; + position: relative; + background-color: var(--theme-bg); + &:before { + content: ''; + display: block; + position: absolute; + inset: 0; + background-color: inherit; + opacity: 0; + z-index: var(--z-status); + visibility: hidden; + transition: all var(--nav-trans-time) linear; } } - .template-default { - &__wrap { - min-width: 100%; + @include mid-break { + &__nav-toggler-wrapper { + .hamburger { + left: unset; + } + } + } + + @include small-break { + &__nav-toggler-wrapper { + width: unset; + justify-content: unset; + + .hamburger { + display: none; + } + } + + .template-default { + &__wrap { + min-width: 100%; + } } } } diff --git a/packages/next/src/templates/Minimal/index.scss b/packages/next/src/templates/Minimal/index.scss index 7a265a590..1eb871410 100644 --- a/packages/next/src/templates/Minimal/index.scss +++ b/packages/next/src/templates/Minimal/index.scss @@ -1,28 +1,30 @@ @import '../../scss/styles'; -.template-minimal { - display: flex; - width: 100%; - justify-content: center; - align-items: center; - padding: base(3) $baseline; - margin-left: auto; - margin-right: auto; - min-height: 100%; - background-color: var(--theme-bg-color); - color: var(--theme-text); +@layer payload-default { + .template-minimal { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + padding: base(3) $baseline; + margin-left: auto; + margin-right: auto; + min-height: 100%; + background-color: var(--theme-bg-color); + color: var(--theme-text); - &--width-normal { - .template-minimal__wrap { - max-width: base(24); - width: 100%; + &--width-normal { + .template-minimal__wrap { + max-width: base(24); + width: 100%; + } } - } - &--width-wide { - .template-minimal__wrap { - max-width: base(48); - width: 100%; + &--width-wide { + .template-minimal__wrap { + max-width: base(48); + width: 100%; + } } } } diff --git a/packages/next/src/views/API/RenderJSON/index.scss b/packages/next/src/views/API/RenderJSON/index.scss index 5049de3e2..1b1c3e9da 100644 --- a/packages/next/src/views/API/RenderJSON/index.scss +++ b/packages/next/src/views/API/RenderJSON/index.scss @@ -1,90 +1,92 @@ @import '../../../scss/styles.scss'; -.query-inspector { - &__json-children { - position: relative; +@layer payload-default { + .query-inspector { + &__json-children { + position: relative; - &:before { - content: ''; - position: absolute; - top: 0; - left: 8px; - width: 1px; - height: 100%; - border-left: 1px dashed var(--theme-elevation-200); - } - } - - &__list-wrap { - position: relative; - } - - &__list-toggle { - all: unset; - width: 100%; - text-align: left; - cursor: pointer; - border-radius: 3px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - position: relative; - display: flex; - gap: 10px; - align-items: center; - left: -3px; - width: calc(100% + 3px); - - svg { - margin-left: 5px; - } - - svg .stroke { - stroke: var(--theme-elevation-400); - } - - &:hover { - background-color: var(--theme-elevation-100); - } - - &--empty { - cursor: default; - pointer-events: none; - } - } - - &__toggle-row-icon { - &--open { - transform: rotate(0deg); - } - &--closed { - transform: rotate(-90deg); - } - } - - &__value-type { - &--number { - .query-inspector__value { - color: var(--number-color); + &:before { + content: ''; + position: absolute; + top: 0; + left: 8px; + width: 1px; + height: 100%; + border-left: 1px dashed var(--theme-elevation-200); } } - &--string { - .query-inspector__value { - color: var(--string-color); + &__list-wrap { + position: relative; + } + + &__list-toggle { + all: unset; + width: 100%; + text-align: left; + cursor: pointer; + border-radius: 3px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + position: relative; + display: flex; + gap: 10px; + align-items: center; + left: -3px; + width: calc(100% + 3px); + + svg { + margin-left: 5px; + } + + svg .stroke { + stroke: var(--theme-elevation-400); + } + + &:hover { + background-color: var(--theme-elevation-100); + } + + &--empty { + cursor: default; + pointer-events: none; } } - } - &__row-line--nested { - margin-left: 25px; - } + &__toggle-row-icon { + &--open { + transform: rotate(0deg); + } + &--closed { + transform: rotate(-90deg); + } + } - &__bracket { - position: relative; + &__value-type { + &--number { + .query-inspector__value { + color: var(--number-color); + } + } - &--position-end { - left: 5px; - width: calc(100% - 5px); + &--string { + .query-inspector__value { + color: var(--string-color); + } + } + } + + &__row-line--nested { + margin-left: 25px; + } + + &__bracket { + position: relative; + + &--position-end { + left: 5px; + width: calc(100% - 5px); + } } } } diff --git a/packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.scss b/packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.scss index 8d0931114..6e16223c9 100644 --- a/packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.scss +++ b/packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.scss @@ -1,14 +1,16 @@ -span.unknownConverted { - text-transform: uppercase; - font-family: 'Roboto Mono', monospace; - letter-spacing: 2px; - font-size: calc(var(--base) * 0.5); - margin: 0 0 var(--base); - background: red; - color: white; - display: inline-block; - - div { +@layer payload-default { + span.unknownConverted { + text-transform: uppercase; + font-family: 'Roboto Mono', monospace; + letter-spacing: 2px; + font-size: calc(var(--base) * 0.5); + margin: 0 0 var(--base); background: red; + color: white; + display: inline-block; + + div { + background: red; + } } } diff --git a/packages/richtext-lexical/src/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.scss b/packages/richtext-lexical/src/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.scss index 8d0931114..6e16223c9 100644 --- a/packages/richtext-lexical/src/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.scss +++ b/packages/richtext-lexical/src/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.scss @@ -1,14 +1,16 @@ -span.unknownConverted { - text-transform: uppercase; - font-family: 'Roboto Mono', monospace; - letter-spacing: 2px; - font-size: calc(var(--base) * 0.5); - margin: 0 0 var(--base); - background: red; - color: white; - display: inline-block; - - div { +@layer payload-default { + span.unknownConverted { + text-transform: uppercase; + font-family: 'Roboto Mono', monospace; + letter-spacing: 2px; + font-size: calc(var(--base) * 0.5); + margin: 0 0 var(--base); background: red; + color: white; + display: inline-block; + + div { + background: red; + } } } diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss index 78f06a91a..f027e91dc 100644 --- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss +++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss @@ -1,44 +1,46 @@ @import '../../../../scss/styles'; -.toolbar-popup__button { - display: flex; - align-items: center; - vertical-align: middle; - justify-content: center; - height: 30px; - width: 30px; - border: 0; - background: none; - border-radius: $style-radius-m; - cursor: pointer; - padding: 0; - transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); +@layer payload-default { + .toolbar-popup__button { + display: flex; + align-items: center; + vertical-align: middle; + justify-content: center; + height: 30px; + width: 30px; + border: 0; + background: none; + border-radius: $style-radius-m; + cursor: pointer; + padding: 0; + transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); - &.spaced { - margin-right: 2px; - } - - &:hover:not(.disabled) { - background-color: var(--theme-elevation-100); - } - - &.active { - background-color: var(--theme-elevation-150); - color: var(--theme-text); - &:hover { - background-color: var(--theme-elevation-200); + &.spaced { + margin-right: 2px; } - .icon { - opacity: 1; + &:hover:not(.disabled) { + background-color: var(--theme-elevation-100); } - } - &.disabled { - cursor: not-allowed; + &.active { + background-color: var(--theme-elevation-150); + color: var(--theme-text); + &:hover { + background-color: var(--theme-elevation-200); + } - .icon { - opacity: 0.2; + .icon { + opacity: 1; + } + } + + &.disabled { + cursor: not-allowed; + + .icon { + opacity: 0.2; + } } } } diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss index cd60bb842..d6efb7871 100644 --- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss +++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss @@ -1,119 +1,121 @@ @import '../../../../scss/styles'; -.toolbar-popup__dropdown { - display: flex; - align-items: center; - vertical-align: middle; - justify-content: center; - gap: base(0.2); - height: base(1.5); - border: 0; - background: none; - border-radius: $style-radius-m; - cursor: pointer; - position: relative; - padding: 0 base(0.4) 0 base(0.3); - transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); - - &-label { - color: var(--theme-elevation-600); - padding-block: 0; - padding-inline: base(0.2) base(0.4); - } - - &:disabled { - cursor: not-allowed; - opacity: 0.2; - } - - &:hover:not([disabled]) { - background-color: var(--theme-elevation-100); - } - - .active { - background-color: var(--theme-elevation-100); - - .toolbar-popup__dropdown-caret { - &:after { - transform: rotate(0deg); - } - } - } - - &-caret { - width: base(0.4); +@layer payload-default { + .toolbar-popup__dropdown { display: flex; align-items: center; + vertical-align: middle; justify-content: center; - transform: rotate(45deg); - &:after { - display: block; - content: ' '; - position: absolute; - - /* Vector 3 */ - - width: 4px; - height: 4px; - transform: translateY(-2px); - border: solid 1px var(--theme-elevation-600); - border-width: 0 1px 1px 0; - } - } - - &-items { - position: absolute; - background: var(--theme-elevation-0); + gap: base(0.2); + height: base(1.5); + border: 0; + background: none; border-radius: $style-radius-m; - min-width: 132.5px; - max-width: 200px; - z-index: 100; + cursor: pointer; + position: relative; + padding: 0 base(0.4) 0 base(0.3); + transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); - .toolbar-popup__dropdown-item { - all: unset; // reset all default button styles - cursor: pointer; - color: var(--theme-elevation-900); - transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); + &-label { + color: var(--theme-elevation-600); + padding-block: 0; + padding-inline: base(0.2) base(0.4); + } - .text { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + &:disabled { + cursor: not-allowed; + opacity: 0.2; + } + + &:hover:not([disabled]) { + background-color: var(--theme-elevation-100); + } + + .active { + background-color: var(--theme-elevation-100); + + .toolbar-popup__dropdown-caret { + &:after { + transform: rotate(0deg); + } } + } - &:hover:not([disabled]), - &.active { - background-color: var(--theme-elevation-100); - } - &.disabled { - cursor: not-allowed; - opacity: 0.2; - } - - padding-left: 6.25px; - padding-right: 6.25px; - width: 100%; - height: 30px; - border-radius: $style-radius-m; - box-sizing: border-box; + &-caret { + width: base(0.4); display: flex; align-items: center; - gap: 6.25px; + justify-content: center; + transform: rotate(45deg); + &:after { + display: block; + content: ' '; + position: absolute; - .icon { - min-width: 20px; - height: 20px; - color: var(--theme-elevation-600); + /* Vector 3 */ + + width: 4px; + height: 4px; + transform: translateY(-2px); + border: solid 1px var(--theme-elevation-600); + border-width: 0 1px 1px 0; + } + } + + &-items { + position: absolute; + background: var(--theme-elevation-0); + border-radius: $style-radius-m; + min-width: 132.5px; + max-width: 200px; + z-index: 100; + + .toolbar-popup__dropdown-item { + all: unset; // reset all default button styles + cursor: pointer; + color: var(--theme-elevation-900); + transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1); + + .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &:hover:not([disabled]), + &.active { + background-color: var(--theme-elevation-100); + } + &.disabled { + cursor: not-allowed; + opacity: 0.2; + } + + padding-left: 6.25px; + padding-right: 6.25px; + width: 100%; + height: 30px; + border-radius: $style-radius-m; + box-sizing: border-box; + display: flex; + align-items: center; + gap: 6.25px; + + .icon { + min-width: 20px; + height: 20px; + color: var(--theme-elevation-600); + } + } + } + } + + html[data-theme='light'] { + .toolbar-popup__dropdown { + &-items { + position: absolute; + @include shadow-m; } } } } - -html[data-theme='light'] { - .toolbar-popup__dropdown { - &-items { - position: absolute; - @include shadow-m; - } - } -} diff --git a/packages/richtext-slate/src/field/elements/blockquote/index.scss b/packages/richtext-slate/src/field/elements/blockquote/index.scss index cf5cc1d11..e42e66ca5 100644 --- a/packages/richtext-slate/src/field/elements/blockquote/index.scss +++ b/packages/richtext-slate/src/field/elements/blockquote/index.scss @@ -1,9 +1,11 @@ @import '../../../scss/styles.scss'; -.rich-text-blockquote { - &[data-slate-node='element'] { - margin: base(0.625) 0; - padding-left: base(0.625); - border-left: 1px solid var(--theme-elevation-200); +@layer payload-default { + .rich-text-blockquote { + &[data-slate-node='element'] { + margin: base(0.625) 0; + padding-left: base(0.625); + border-left: 1px solid var(--theme-elevation-200); + } } } diff --git a/packages/richtext-slate/src/field/elements/link/Element/index.scss b/packages/richtext-slate/src/field/elements/link/Element/index.scss index 404d7b93e..c16c5337a 100644 --- a/packages/richtext-slate/src/field/elements/link/Element/index.scss +++ b/packages/richtext-slate/src/field/elements/link/Element/index.scss @@ -1,88 +1,90 @@ @import '../../../../scss/styles.scss'; -.rich-text-link { - position: relative; +@layer payload-default { + .rich-text-link { + position: relative; - .popup { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + .popup { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; - .popup__hide-scrollbar, - .popup__scroll-container { - overflow: visible; + .popup__hide-scrollbar, + .popup__scroll-container { + overflow: visible; + } + + .popup__scroll-content { + white-space: pre; + } } - .popup__scroll-content { - white-space: pre; + .icon--x line { + stroke-width: 2px; } - } - .icon--x line { - stroke-width: 2px; - } + &__popup { + @extend %body; + font-family: var(--font-body); + display: flex; - &__popup { - @extend %body; - font-family: var(--font-body); - display: flex; - - button { - @extend %btn-reset; - font-weight: 600; - cursor: pointer; - margin: 0; + button { + @extend %btn-reset; + font-weight: 600; + cursor: pointer; + margin: 0; + } } - } - &__link-label { - max-width: base(8); - overflow: hidden; - text-overflow: ellipsis; - border-radius: 2px; + &__link-label { + max-width: base(8); + overflow: hidden; + text-overflow: ellipsis; + border-radius: 2px; - &:hover { - background-color: var(--popup-button-highlight); - } - } -} - -.rich-text-link__popup { - display: flex; - gap: calc(var(--base) * 0.25); - button { - &:hover { - .btn__icon { + &:hover { background-color: var(--popup-button-highlight); - .fill { - fill: var(--theme-text); - } - .stroke { - stroke: var(--theme-text); + } + } + } + + .rich-text-link__popup { + display: flex; + gap: calc(var(--base) * 0.25); + button { + &:hover { + .btn__icon { + background-color: var(--popup-button-highlight); + .fill { + fill: var(--theme-text); + } + .stroke { + stroke: var(--theme-text); + } } } } } -} -.rich-text-link__popup-toggler { - position: relative; - border: 0; - background-color: transparent; - padding: 0; - color: var(--theme-success-600); - text-decoration: none; - border-bottom: 1px dotted; - cursor: text; + .rich-text-link__popup-toggler { + position: relative; + border: 0; + background-color: transparent; + padding: 0; + color: var(--theme-success-600); + text-decoration: none; + border-bottom: 1px dotted; + cursor: text; - &:focus, - &:focus-within { - outline: none; - } + &:focus, + &:focus-within { + outline: none; + } - &--open { - z-index: var(--z-popup); + &--open { + z-index: var(--z-popup); + } } } diff --git a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss index af09f5914..b2a5b8f9a 100644 --- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss +++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss @@ -1,49 +1,51 @@ @import '../../../../scss/styles.scss'; -.rich-text-link-edit-modal { - &__template { - position: relative; - z-index: 1; - padding-top: base(1); - padding-bottom: base(2); - } - - &__header { - width: 100%; - margin-bottom: $baseline; - display: flex; - justify-content: space-between; - margin-top: base(2.5); - margin-bottom: base(1); - - @include mid-break { - margin-top: base(1.5); - } - } - - &__header-text { - margin: 0; - } - - &__header-close { - border: 0; - background-color: transparent; - padding: 0; - cursor: pointer; - overflow: hidden; - width: base(1); - height: base(1); - - svg { - width: base(2); - height: base(2); +@layer payload-default { + .rich-text-link-edit-modal { + &__template { position: relative; - inset-inline-start: base(-0.5); - top: base(-0.5); + z-index: 1; + padding-top: base(1); + padding-bottom: base(2); + } - .stroke { - stroke-width: 2px; - vector-effect: non-scaling-stroke; + &__header { + width: 100%; + margin-bottom: $baseline; + display: flex; + justify-content: space-between; + margin-top: base(2.5); + margin-bottom: base(1); + + @include mid-break { + margin-top: base(1.5); + } + } + + &__header-text { + margin: 0; + } + + &__header-close { + border: 0; + background-color: transparent; + padding: 0; + cursor: pointer; + overflow: hidden; + width: base(1); + height: base(1); + + svg { + width: base(2); + height: base(2); + position: relative; + inset-inline-start: base(-0.5); + top: base(-0.5); + + .stroke { + stroke-width: 2px; + vector-effect: non-scaling-stroke; + } } } } diff --git a/packages/richtext-slate/src/field/elements/ol/index.scss b/packages/richtext-slate/src/field/elements/ol/index.scss index 75fe03f6d..cbd75c655 100644 --- a/packages/richtext-slate/src/field/elements/ol/index.scss +++ b/packages/richtext-slate/src/field/elements/ol/index.scss @@ -1,7 +1,9 @@ @import '../../../scss/styles.scss'; -.rich-text-ol { - &[data-slate-node='element'] { - margin: base(0.625) 0; +@layer payload-default { + .rich-text-ol { + &[data-slate-node='element'] { + margin: base(0.625) 0; + } } } diff --git a/packages/richtext-slate/src/field/elements/relationship/Button/index.scss b/packages/richtext-slate/src/field/elements/relationship/Button/index.scss index 6293fc586..48db7ebc3 100644 --- a/packages/richtext-slate/src/field/elements/relationship/Button/index.scss +++ b/packages/richtext-slate/src/field/elements/relationship/Button/index.scss @@ -1,7 +1,9 @@ @import '../../../../scss/styles.scss'; -.relationship-rich-text-button { - display: flex; - align-items: center; - height: 100%; +@layer payload-default { + .relationship-rich-text-button { + display: flex; + align-items: center; + height: 100%; + } } diff --git a/packages/richtext-slate/src/field/elements/relationship/Element/index.scss b/packages/richtext-slate/src/field/elements/relationship/Element/index.scss index 5205500b6..4e8a5ccf8 100644 --- a/packages/richtext-slate/src/field/elements/relationship/Element/index.scss +++ b/packages/richtext-slate/src/field/elements/relationship/Element/index.scss @@ -1,93 +1,95 @@ @import '../../../../scss/styles.scss'; -.rich-text-relationship { - @extend %body; - @include shadow-sm; - padding: base(0.75); - display: flex; - align-items: center; - background: var(--theme-input-bg); - border: 1px solid var(--theme-elevation-100); - max-width: base(15); - font-family: var(--font-body); - - &:hover { - border: 1px solid var(--theme-elevation-150); - } - - &[data-slate-node='element'] { - margin: base(0.625) 0; - } - - &__label { - margin-bottom: base(0.25); - } - - &__title { - margin: 0; - } - - &__label, - &__title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - line-height: 1 !important; - } - - &__title { - font-weight: bold; - } - - &__wrap { - flex-grow: 1; - overflow: hidden; - } - - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } - - .rich-text-relationship__doc-drawer-toggler { - text-decoration: underline; - pointer-events: all; - line-height: inherit; - } - - &__actions { +@layer payload-default { + .rich-text-relationship { + @extend %body; + @include shadow-sm; + padding: base(0.75); display: flex; align-items: center; - flex-shrink: 0; - margin-left: base(0.5); + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-100); + max-width: base(15); + font-family: var(--font-body); - & > *:not(:last-child) { - margin-right: base(0.25); - } - } - - &__removeButton { - margin: 0; - - line { - stroke-width: $style-stroke-width-m; + &:hover { + border: 1px solid var(--theme-elevation-150); } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &[data-slate-node='element'] { + margin: base(0.625) 0; } - } - &__doc-drawer-toggler, - &__list-drawer-toggler { - & > * { + &__label { + margin-bottom: base(0.25); + } + + &__title { margin: 0; } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; + &__label, + &__title { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + line-height: 1 !important; + } + + &__title { + font-weight: bold; + } + + &__wrap { + flex-grow: 1; + overflow: hidden; + } + + &--selected { + box-shadow: $focus-box-shadow; + outline: none; + } + + .rich-text-relationship__doc-drawer-toggler { + text-decoration: underline; + pointer-events: all; + line-height: inherit; + } + + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: base(0.5); + + & > *:not(:last-child) { + margin-right: base(0.25); + } + } + + &__removeButton { + margin: 0; + + line { + stroke-width: $style-stroke-width-m; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__doc-drawer-toggler, + &__list-drawer-toggler { + & > * { + margin: 0; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } } } } diff --git a/packages/richtext-slate/src/field/elements/ul/index.scss b/packages/richtext-slate/src/field/elements/ul/index.scss index d8a7789ef..75c383c25 100644 --- a/packages/richtext-slate/src/field/elements/ul/index.scss +++ b/packages/richtext-slate/src/field/elements/ul/index.scss @@ -1,7 +1,9 @@ @import '../../../scss/styles.scss'; -.rich-text-ul { - &[data-slate-node='element'] { - margin: base(0.625) 0; +@layer payload-default { + .rich-text-ul { + &[data-slate-node='element'] { + margin: base(0.625) 0; + } } } diff --git a/packages/richtext-slate/src/field/elements/upload/Button/index.scss b/packages/richtext-slate/src/field/elements/upload/Button/index.scss index 30ec5a8fa..64af92217 100644 --- a/packages/richtext-slate/src/field/elements/upload/Button/index.scss +++ b/packages/richtext-slate/src/field/elements/upload/Button/index.scss @@ -1,7 +1,9 @@ @import '../../../../scss/styles.scss'; -.upload-rich-text-button { - display: flex; - align-items: center; - height: 100%; +@layer payload-default { + .upload-rich-text-button { + display: flex; + align-items: center; + height: 100%; + } } diff --git a/packages/richtext-slate/src/field/elements/upload/Element/index.scss b/packages/richtext-slate/src/field/elements/upload/Element/index.scss index a70740f98..38e332bc8 100644 --- a/packages/richtext-slate/src/field/elements/upload/Element/index.scss +++ b/packages/richtext-slate/src/field/elements/upload/Element/index.scss @@ -1,147 +1,149 @@ @import '../../../../scss/styles.scss'; -.rich-text-upload { - @extend %body; - @include shadow-sm; - max-width: base(15); - display: flex; - align-items: center; - background: var(--theme-input-bg); - border: 1px solid var(--theme-elevation-100); - position: relative; - font-family: var(--font-body); - - &:hover { - border: 1px solid var(--theme-elevation-150); - } - - &[data-slate-node='element'] { - margin: base(0.625) 0; - } - - &__card { - @include soft-shadow-bottom; +@layer payload-default { + .rich-text-upload { + @extend %body; + @include shadow-sm; + max-width: base(15); display: flex; - flex-direction: column; - width: 100%; - } - - &__topRow { - display: flex; - } - - &__thumbnail { - width: base(3.25); - height: auto; + align-items: center; + background: var(--theme-input-bg); + border: 1px solid var(--theme-elevation-100); position: relative; - overflow: hidden; - flex-shrink: 0; + font-family: var(--font-body); - img, - svg { - position: absolute; - object-fit: cover; + &:hover { + border: 1px solid var(--theme-elevation-150); + } + + &[data-slate-node='element'] { + margin: base(0.625) 0; + } + + &__card { + @include soft-shadow-bottom; + display: flex; + flex-direction: column; width: 100%; - height: 100%; - background-color: var(--theme-elevation-800); - } - } - - &__topRowRightPanel { - flex-grow: 1; - display: flex; - align-items: center; - padding: base(0.75); - justify-content: space-between; - max-width: calc(100% - #{base(3.25)}); - } - - &__actions { - display: flex; - align-items: center; - flex-shrink: 0; - margin-left: base(0.5); - - .rich-text-upload__doc-drawer-toggler { - pointer-events: all; } - & > *:not(:last-child) { - margin-right: base(0.25); - } - } - - &__removeButton { - margin: 0; - - line { - stroke-width: $style-stroke-width-m; + &__topRow { + display: flex; } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; - } - } + &__thumbnail { + width: base(3.25); + height: auto; + position: relative; + overflow: hidden; + flex-shrink: 0; - &__upload-drawer-toggler { - background-color: transparent; - border: none; - padding: 0; - margin: 0; - outline: none; - line-height: inherit; - } - - &__doc-drawer-toggler { - text-decoration: underline; - } - - &__doc-drawer-toggler, - &__list-drawer-toggler, - &__upload-drawer-toggler { - & > * { - margin: 0; + img, + svg { + position: absolute; + object-fit: cover; + width: 100%; + height: 100%; + background-color: var(--theme-elevation-800); + } } - &:disabled { - color: var(--theme-elevation-300); - pointer-events: none; - } - } - - &__collectionLabel { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &__bottomRow { - padding: base(0.5); - border-top: 1px solid var(--theme-elevation-100); - } - - h5 { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &__wrap { - padding: base(0.5) base(0.5) base(0.5) base(1); - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - } - - &--selected { - box-shadow: $focus-box-shadow; - outline: none; - } - - @include small-break { &__topRowRightPanel { - padding: base(0.75) base(0.5); + flex-grow: 1; + display: flex; + align-items: center; + padding: base(0.75); + justify-content: space-between; + max-width: calc(100% - #{base(3.25)}); + } + + &__actions { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: base(0.5); + + .rich-text-upload__doc-drawer-toggler { + pointer-events: all; + } + + & > *:not(:last-child) { + margin-right: base(0.25); + } + } + + &__removeButton { + margin: 0; + + line { + stroke-width: $style-stroke-width-m; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__upload-drawer-toggler { + background-color: transparent; + border: none; + padding: 0; + margin: 0; + outline: none; + line-height: inherit; + } + + &__doc-drawer-toggler { + text-decoration: underline; + } + + &__doc-drawer-toggler, + &__list-drawer-toggler, + &__upload-drawer-toggler { + & > * { + margin: 0; + } + + &:disabled { + color: var(--theme-elevation-300); + pointer-events: none; + } + } + + &__collectionLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__bottomRow { + padding: base(0.5); + border-top: 1px solid var(--theme-elevation-100); + } + + h5 { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &__wrap { + padding: base(0.5) base(0.5) base(0.5) base(1); + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + } + + &--selected { + box-shadow: $focus-box-shadow; + outline: none; + } + + @include small-break { + &__topRowRightPanel { + padding: base(0.75) base(0.5); + } } } }