tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): add missing styles under the payload-default css layer (#8723)

Browse Source
This commit is contained in:
Paul
2024-10-15 19:58:50 -06:00
committed by GitHub
parent 6d0676ab09
commit e6a1ca5049
26 changed files with 1147 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss
View File

@@ -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);
}
}

82
packages/next/src/elements/DocumentHeader/Tabs/index.scss
View File

@@ -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);
}
}
}
}

88
packages/next/src/elements/DocumentHeader/index.scss
View File

@@ -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;
}
}

56
packages/next/src/elements/DocumentLocked/index.scss
View File

@@ -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;
}
}
}
}

56
packages/next/src/elements/DocumentTakeOver/index.scss
View File

@@ -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;
}
}
}
}

12
packages/next/src/elements/FormHeader/index.scss
View File

@@ -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);
}
}

56
packages/next/src/elements/LeaveWithoutSaving/index.scss
View File

@@ -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;
}
}
}
}

38
packages/next/src/elements/Nav/NavWrapper/index.scss
View File

@@ -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;
}
}
}

284
packages/next/src/elements/Nav/index.scss
View File

@@ -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;
}
}
}
}

84
packages/next/src/templates/Default/Wrapper/index.scss
View File

@@ -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;
}
}
}
}

124
packages/next/src/templates/Default/index.scss
View File

@@ -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%;
}
}
}
}

42
packages/next/src/templates/Minimal/index.scss
View File

@@ -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%;
}
}
}
}

154
packages/next/src/views/API/RenderJSON/index.scss
View File

@@ -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);
}
}
}
}

24
packages/richtext-lexical/src/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.scss
View File

@@ -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;
}
}
}

24
packages/richtext-lexical/src/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.scss
View File

@@ -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;
}
}
}

68
packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.scss
View File

@@ -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;
}
}
}
}

206
packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss
View File

@@ -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;
}
}
}

12
packages/richtext-slate/src/field/elements/blockquote/index.scss
View File

@@ -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);
}
}
}

134
packages/richtext-slate/src/field/elements/link/Element/index.scss
View File

@@ -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);
}
}
}

86
packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
View File

@@ -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;
}
}
}
}

8
packages/richtext-slate/src/field/elements/ol/index.scss
View File

@@ -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;
}
}
}

10
packages/richtext-slate/src/field/elements/relationship/Button/index.scss
View File

@@ -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%;
}
}

158
packages/richtext-slate/src/field/elements/relationship/Element/index.scss
View File

@@ -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;
}
}
}
}

8
packages/richtext-slate/src/field/elements/ul/index.scss
View File

@@ -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;
}
}
}

10
packages/richtext-slate/src/field/elements/upload/Button/index.scss
View File

@@ -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%;
}
}

262
packages/richtext-slate/src/field/elements/upload/Element/index.scss
View File

@@ -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);
}
}
}
}