@payloadcms/richtext-slate 3.0.0-canary.4eb1bfc → 3.0.0-canary.51be7be

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,15 +1,16 @@
1
1
  @import '../scss/styles.scss';
2
+ @layer payload-default {
3
+ .rich-text__button {
4
+ position: relative;
5
+ cursor: pointer;
2
6
 
3
- .rich-text__button {
4
- position: relative;
5
- cursor: pointer;
7
+ svg {
8
+ width: base(0.75);
9
+ height: base(0.75);
10
+ }
6
11
 
7
- svg {
8
- width: base(0.75);
9
- height: base(0.75);
10
- }
11
-
12
- &--disabled {
13
- opacity: 0.4;
12
+ &--disabled {
13
+ opacity: 0.4;
14
+ }
14
15
  }
15
16
  }
@@ -1,9 +1,11 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-blockquote {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
6
- padding-left: base(0.625);
7
- border-left: 1px solid var(--theme-elevation-200);
3
+ @layer payload-default {
4
+ .rich-text-blockquote {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ padding-left: base(0.625);
8
+ border-left: 1px solid var(--theme-elevation-200);
9
+ }
8
10
  }
9
11
  }
@@ -1,88 +1,90 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-link {
4
- position: relative;
3
+ @layer payload-default {
4
+ .rich-text-link {
5
+ position: relative;
5
6
 
6
- .popup {
7
- position: absolute;
8
- top: 0;
9
- right: 0;
10
- bottom: 0;
11
- left: 0;
7
+ .popup {
8
+ position: absolute;
9
+ top: 0;
10
+ right: 0;
11
+ bottom: 0;
12
+ left: 0;
12
13
 
13
- .popup__hide-scrollbar,
14
- .popup__scroll-container {
15
- overflow: visible;
14
+ .popup__hide-scrollbar,
15
+ .popup__scroll-container {
16
+ overflow: visible;
17
+ }
18
+
19
+ .popup__scroll-content {
20
+ white-space: pre;
21
+ }
16
22
  }
17
23
 
18
- .popup__scroll-content {
19
- white-space: pre;
24
+ .icon--x line {
25
+ stroke-width: 2px;
20
26
  }
21
- }
22
27
 
23
- .icon--x line {
24
- stroke-width: 2px;
25
- }
28
+ &__popup {
29
+ @extend %body;
30
+ font-family: var(--font-body);
31
+ display: flex;
26
32
 
27
- &__popup {
28
- @extend %body;
29
- font-family: var(--font-body);
30
- display: flex;
31
-
32
- button {
33
- @extend %btn-reset;
34
- font-weight: 600;
35
- cursor: pointer;
36
- margin: 0;
33
+ button {
34
+ @extend %btn-reset;
35
+ font-weight: 600;
36
+ cursor: pointer;
37
+ margin: 0;
38
+ }
37
39
  }
38
- }
39
40
 
40
- &__link-label {
41
- max-width: base(8);
42
- overflow: hidden;
43
- text-overflow: ellipsis;
44
- border-radius: 2px;
41
+ &__link-label {
42
+ max-width: base(8);
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ border-radius: 2px;
45
46
 
46
- &:hover {
47
- background-color: var(--popup-button-highlight);
47
+ &:hover {
48
+ background-color: var(--popup-button-highlight);
49
+ }
48
50
  }
49
51
  }
50
- }
51
52
 
52
- .rich-text-link__popup {
53
- display: flex;
54
- gap: calc(var(--base) * 0.25);
55
- button {
56
- &:hover {
57
- .btn__icon {
58
- background-color: var(--popup-button-highlight);
59
- .fill {
60
- fill: var(--theme-text);
61
- }
62
- .stroke {
63
- stroke: var(--theme-text);
53
+ .rich-text-link__popup {
54
+ display: flex;
55
+ gap: calc(var(--base) * 0.25);
56
+ button {
57
+ &:hover {
58
+ .btn__icon {
59
+ background-color: var(--popup-button-highlight);
60
+ .fill {
61
+ fill: var(--theme-text);
62
+ }
63
+ .stroke {
64
+ stroke: var(--theme-text);
65
+ }
64
66
  }
65
67
  }
66
68
  }
67
69
  }
68
- }
69
70
 
70
- .rich-text-link__popup-toggler {
71
- position: relative;
72
- border: 0;
73
- background-color: transparent;
74
- padding: 0;
75
- color: var(--theme-success-600);
76
- text-decoration: none;
77
- border-bottom: 1px dotted;
78
- cursor: text;
71
+ .rich-text-link__popup-toggler {
72
+ position: relative;
73
+ border: 0;
74
+ background-color: transparent;
75
+ padding: 0;
76
+ color: var(--theme-success-600);
77
+ text-decoration: none;
78
+ border-bottom: 1px dotted;
79
+ cursor: text;
79
80
 
80
- &:focus,
81
- &:focus-within {
82
- outline: none;
83
- }
81
+ &:focus,
82
+ &:focus-within {
83
+ outline: none;
84
+ }
84
85
 
85
- &--open {
86
- z-index: var(--z-popup);
86
+ &--open {
87
+ z-index: var(--z-popup);
88
+ }
87
89
  }
88
90
  }
@@ -1,49 +1,51 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-link-edit-modal {
4
- &__template {
5
- position: relative;
6
- z-index: 1;
7
- padding-top: base(1);
8
- padding-bottom: base(2);
9
- }
3
+ @layer payload-default {
4
+ .rich-text-link-edit-modal {
5
+ &__template {
6
+ position: relative;
7
+ z-index: 1;
8
+ padding-top: base(1);
9
+ padding-bottom: base(2);
10
+ }
10
11
 
11
- &__header {
12
- width: 100%;
13
- margin-bottom: $baseline;
14
- display: flex;
15
- justify-content: space-between;
16
- margin-top: base(2.5);
17
- margin-bottom: base(1);
12
+ &__header {
13
+ width: 100%;
14
+ margin-bottom: $baseline;
15
+ display: flex;
16
+ justify-content: space-between;
17
+ margin-top: base(2.5);
18
+ margin-bottom: base(1);
18
19
 
19
- @include mid-break {
20
- margin-top: base(1.5);
20
+ @include mid-break {
21
+ margin-top: base(1.5);
22
+ }
21
23
  }
22
- }
23
24
 
24
- &__header-text {
25
- margin: 0;
26
- }
25
+ &__header-text {
26
+ margin: 0;
27
+ }
27
28
 
28
- &__header-close {
29
- border: 0;
30
- background-color: transparent;
31
- padding: 0;
32
- cursor: pointer;
33
- overflow: hidden;
34
- width: base(1);
35
- height: base(1);
29
+ &__header-close {
30
+ border: 0;
31
+ background-color: transparent;
32
+ padding: 0;
33
+ cursor: pointer;
34
+ overflow: hidden;
35
+ width: base(1);
36
+ height: base(1);
36
37
 
37
- svg {
38
- width: base(2);
39
- height: base(2);
40
- position: relative;
41
- inset-inline-start: base(-0.5);
42
- top: base(-0.5);
38
+ svg {
39
+ width: base(2);
40
+ height: base(2);
41
+ position: relative;
42
+ inset-inline-start: base(-0.5);
43
+ top: base(-0.5);
43
44
 
44
- .stroke {
45
- stroke-width: 2px;
46
- vector-effect: non-scaling-stroke;
45
+ .stroke {
46
+ stroke-width: 2px;
47
+ vector-effect: non-scaling-stroke;
48
+ }
47
49
  }
48
50
  }
49
51
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-ol {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
3
+ @layer payload-default {
4
+ .rich-text-ol {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ }
6
8
  }
7
9
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .relationship-rich-text-button {
4
- display: flex;
5
- align-items: center;
6
- height: 100%;
3
+ @layer payload-default {
4
+ .relationship-rich-text-button {
5
+ display: flex;
6
+ align-items: center;
7
+ height: 100%;
8
+ }
7
9
  }
@@ -1,93 +1,95 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-relationship {
4
- @extend %body;
5
- @include shadow-sm;
6
- padding: base(0.75);
7
- display: flex;
8
- align-items: center;
9
- background: var(--theme-input-bg);
10
- border: 1px solid var(--theme-elevation-100);
11
- max-width: base(15);
12
- font-family: var(--font-body);
13
-
14
- &:hover {
15
- border: 1px solid var(--theme-elevation-150);
16
- }
17
-
18
- &[data-slate-node='element'] {
19
- margin: base(0.625) 0;
20
- }
21
-
22
- &__label {
23
- margin-bottom: base(0.25);
24
- }
25
-
26
- &__title {
27
- margin: 0;
28
- }
3
+ @layer payload-default {
4
+ .rich-text-relationship {
5
+ @extend %body;
6
+ @include shadow-sm;
7
+ padding: base(0.75);
8
+ display: flex;
9
+ align-items: center;
10
+ background: var(--theme-input-bg);
11
+ border: 1px solid var(--theme-elevation-100);
12
+ max-width: base(15);
13
+ font-family: var(--font-body);
29
14
 
30
- &__label,
31
- &__title {
32
- white-space: nowrap;
33
- text-overflow: ellipsis;
34
- overflow: hidden;
35
- line-height: 1 !important;
36
- }
15
+ &:hover {
16
+ border: 1px solid var(--theme-elevation-150);
17
+ }
37
18
 
38
- &__title {
39
- font-weight: bold;
40
- }
19
+ &[data-slate-node='element'] {
20
+ margin: base(0.625) 0;
21
+ }
41
22
 
42
- &__wrap {
43
- flex-grow: 1;
44
- overflow: hidden;
45
- }
23
+ &__label {
24
+ margin-bottom: base(0.25);
25
+ }
46
26
 
47
- &--selected {
48
- box-shadow: $focus-box-shadow;
49
- outline: none;
50
- }
27
+ &__title {
28
+ margin: 0;
29
+ }
51
30
 
52
- .rich-text-relationship__doc-drawer-toggler {
53
- text-decoration: underline;
54
- pointer-events: all;
55
- line-height: inherit;
56
- }
31
+ &__label,
32
+ &__title {
33
+ white-space: nowrap;
34
+ text-overflow: ellipsis;
35
+ overflow: hidden;
36
+ line-height: 1 !important;
37
+ }
57
38
 
58
- &__actions {
59
- display: flex;
60
- align-items: center;
61
- flex-shrink: 0;
62
- margin-left: base(0.5);
39
+ &__title {
40
+ font-weight: bold;
41
+ }
63
42
 
64
- & > *:not(:last-child) {
65
- margin-right: base(0.25);
43
+ &__wrap {
44
+ flex-grow: 1;
45
+ overflow: hidden;
66
46
  }
67
- }
68
47
 
69
- &__removeButton {
70
- margin: 0;
48
+ &--selected {
49
+ box-shadow: $focus-box-shadow;
50
+ outline: none;
51
+ }
71
52
 
72
- line {
73
- stroke-width: $style-stroke-width-m;
53
+ .rich-text-relationship__doc-drawer-toggler {
54
+ text-decoration: underline;
55
+ pointer-events: all;
56
+ line-height: inherit;
74
57
  }
75
58
 
76
- &:disabled {
77
- color: var(--theme-elevation-300);
78
- pointer-events: none;
59
+ &__actions {
60
+ display: flex;
61
+ align-items: center;
62
+ flex-shrink: 0;
63
+ margin-left: base(0.5);
64
+
65
+ & > *:not(:last-child) {
66
+ margin-right: base(0.25);
67
+ }
79
68
  }
80
- }
81
69
 
82
- &__doc-drawer-toggler,
83
- &__list-drawer-toggler {
84
- & > * {
70
+ &__removeButton {
85
71
  margin: 0;
72
+
73
+ line {
74
+ stroke-width: $style-stroke-width-m;
75
+ }
76
+
77
+ &:disabled {
78
+ color: var(--theme-elevation-300);
79
+ pointer-events: none;
80
+ }
86
81
  }
87
82
 
88
- &:disabled {
89
- color: var(--theme-elevation-300);
90
- pointer-events: none;
83
+ &__doc-drawer-toggler,
84
+ &__list-drawer-toggler {
85
+ & > * {
86
+ margin: 0;
87
+ }
88
+
89
+ &:disabled {
90
+ color: var(--theme-elevation-300);
91
+ pointer-events: none;
92
+ }
91
93
  }
92
94
  }
93
95
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-ul {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
3
+ @layer payload-default {
4
+ .rich-text-ul {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ }
6
8
  }
7
9
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .upload-rich-text-button {
4
- display: flex;
5
- align-items: center;
6
- height: 100%;
3
+ @layer payload-default {
4
+ .upload-rich-text-button {
5
+ display: flex;
6
+ align-items: center;
7
+ height: 100%;
8
+ }
7
9
  }