@payloadcms/next 3.0.0-beta.114 → 3.0.0-beta.115

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.
Files changed (15) hide show
  1. package/dist/elements/DocumentHeader/Tabs/Tab/index.scss +70 -68
  2. package/dist/elements/DocumentHeader/Tabs/index.scss +41 -39
  3. package/dist/elements/DocumentHeader/index.scss +44 -42
  4. package/dist/elements/DocumentLocked/index.scss +28 -26
  5. package/dist/elements/DocumentTakeOver/index.scss +28 -26
  6. package/dist/elements/FormHeader/index.scss +7 -5
  7. package/dist/elements/LeaveWithoutSaving/index.scss +28 -26
  8. package/dist/elements/Nav/NavWrapper/index.scss +20 -18
  9. package/dist/elements/Nav/index.scss +127 -125
  10. package/dist/prod/styles.css +1 -1
  11. package/dist/templates/Default/Wrapper/index.scss +38 -36
  12. package/dist/templates/Default/index.scss +60 -58
  13. package/dist/templates/Minimal/index.scss +22 -20
  14. package/dist/views/API/RenderJSON/index.scss +68 -66
  15. package/package.json +6 -6
package/dist/elements/Nav/index.scss CHANGED
@@ -1,160 +1,162 @@
1
1
  @import '../../scss/styles.scss';
2
2
 
3
- .nav {
4
- position: sticky;
5
- top: 0;
6
- left: 0;
7
- flex-shrink: 0;
8
- height: 100vh;
9
- width: var(--nav-width);
10
- border-right: 1px solid var(--theme-elevation-100);
11
- opacity: 0;
12
- overflow: hidden;
13
-
14
- [dir='rtl'] & {
15
- border-right: none;
16
- border-left: 1px solid var(--theme-elevation-100);
17
- }
18
-
19
- &--nav-animate {
20
- transition: opacity var(--nav-trans-time) ease-in-out;
21
- }
22
-
23
- &--nav-open {
24
- opacity: 1;
25
- }
26
-
27
- &__header {
28
- position: absolute;
3
+ @layer payload-default {
4
+ .nav {
5
+ position: sticky;
29
6
  top: 0;
30
- width: 100vw;
31
- height: var(--app-header-height);
32
- }
33
-
34
- &__header-content {
35
- z-index: 1;
36
- position: relative;
37
- height: 100%;
38
- width: 100%;
39
- }
7
+ left: 0;
8
+ flex-shrink: 0;
9
+ height: 100vh;
10
+ width: var(--nav-width);
11
+ border-right: 1px solid var(--theme-elevation-100);
12
+ opacity: 0;
13
+ overflow: hidden;
14
+
15
+ [dir='rtl'] & {
16
+ border-right: none;
17
+ border-left: 1px solid var(--theme-elevation-100);
18
+ }
40
19
 
41
- &__mobile-close {
42
- display: none;
43
- background: none;
44
- border: 0;
45
- outline: 0;
46
- padding: base(0.8) 0;
47
- }
20
+ &--nav-animate {
21
+ transition: opacity var(--nav-trans-time) ease-in-out;
22
+ }
48
23
 
49
- &__scroll {
50
- height: 100%;
51
- display: flex;
52
- flex-direction: column;
53
- padding: var(--app-header-height) base(1) base(2) base(1);
54
- overflow-y: auto;
24
+ &--nav-open {
25
+ opacity: 1;
26
+ }
55
27
 
56
- // remove the scrollbar here to prevent layout shift as nav groups are toggled
57
- &::-webkit-scrollbar {
58
- display: none;
28
+ &__header {
29
+ position: absolute;
30
+ top: 0;
31
+ width: 100vw;
32
+ height: var(--app-header-height);
59
33
  }
60
- }
61
34
 
62
- &__wrap {
63
- width: 100%;
64
- display: flex;
65
- flex-direction: column;
66
- align-items: flex-start;
67
- flex-grow: 1;
68
- }
35
+ &__header-content {
36
+ z-index: 1;
37
+ position: relative;
38
+ height: 100%;
39
+ width: 100%;
40
+ }
69
41
 
70
- &__label {
71
- color: var(--theme-elevation-400);
72
- }
42
+ &__mobile-close {
43
+ display: none;
44
+ background: none;
45
+ border: 0;
46
+ outline: 0;
47
+ padding: base(0.8) 0;
48
+ }
73
49
 
74
- &__controls {
75
- margin-top: auto;
76
- margin-bottom: 0;
50
+ &__scroll {
51
+ height: 100%;
52
+ display: flex;
53
+ flex-direction: column;
54
+ padding: var(--app-header-height) base(1) base(2) base(1);
55
+ overflow-y: auto;
77
56
 
78
- > * {
79
- margin-top: base(1);
57
+ // remove the scrollbar here to prevent layout shift as nav groups are toggled
58
+ &::-webkit-scrollbar {
59
+ display: none;
60
+ }
80
61
  }
81
62
 
82
- a:focus-visible {
83
- outline: var(--accessibility-outline);
63
+ &__wrap {
64
+ width: 100%;
65
+ display: flex;
66
+ flex-direction: column;
67
+ align-items: flex-start;
68
+ flex-grow: 1;
84
69
  }
85
- }
86
70
 
87
- &__log-out {
88
- &:hover {
89
- g {
90
- transform: translateX(-#{base(0.125)});
91
- }
71
+ &__label {
72
+ color: var(--theme-elevation-400);
92
73
  }
93
- }
94
74
 
95
- nav {
96
- a {
97
- position: relative;
98
- padding-block: base(0.125);
99
- padding-inline-start: 0;
100
- padding-inline-end: base(1.5);
101
- display: flex;
102
- text-decoration: none;
75
+ &__controls {
76
+ margin-top: auto;
77
+ margin-bottom: 0;
103
78
 
104
- &:focus:not(:focus-visible) {
105
- box-shadow: none;
106
- font-weight: 600;
79
+ > * {
80
+ margin-top: base(1);
107
81
  }
108
82
 
109
- &:hover,
110
- &:focus-visible {
111
- text-decoration: underline;
83
+ a:focus-visible {
84
+ outline: var(--accessibility-outline);
112
85
  }
86
+ }
113
87
 
114
- &.active {
115
- font-weight: normal;
116
- padding-left: 0;
117
- font-weight: 600;
88
+ &__log-out {
89
+ &:hover {
90
+ g {
91
+ transform: translateX(-#{base(0.125)});
92
+ }
118
93
  }
119
94
  }
120
- }
121
95
 
122
- &__link {
123
- display: flex;
124
- align-items: center;
125
- }
126
-
127
- &__link-indicator {
128
- position: absolute;
129
- display: block;
130
- // top: 0;
131
- inset-inline-start: base(-1);
132
- width: 2px;
133
- height: 16px;
134
- border-start-end-radius: 2px;
135
- border-end-end-radius: 2px;
136
- background: var(--theme-text);
137
- }
96
+ nav {
97
+ a {
98
+ position: relative;
99
+ padding-block: base(0.125);
100
+ padding-inline-start: 0;
101
+ padding-inline-end: base(1.5);
102
+ display: flex;
103
+ text-decoration: none;
104
+
105
+ &:focus:not(:focus-visible) {
106
+ box-shadow: none;
107
+ font-weight: 600;
108
+ }
109
+
110
+ &:hover,
111
+ &:focus-visible {
112
+ text-decoration: underline;
113
+ }
114
+
115
+ &.active {
116
+ font-weight: normal;
117
+ padding-left: 0;
118
+ font-weight: 600;
119
+ }
120
+ }
121
+ }
138
122
 
139
- @include mid-break {
140
- &__scroll {
141
- padding: var(--app-header-height) base(0.5) base(2);
123
+ &__link {
124
+ display: flex;
125
+ align-items: center;
142
126
  }
143
- }
144
127
 
145
- @include small-break {
146
- &__scroll {
147
- padding: var(--app-header-height) var(--gutter-h) base(2);
128
+ &__link-indicator {
129
+ position: absolute;
130
+ display: block;
131
+ // top: 0;
132
+ inset-inline-start: base(-1);
133
+ width: 2px;
134
+ height: 16px;
135
+ border-start-end-radius: 2px;
136
+ border-end-end-radius: 2px;
137
+ background: var(--theme-text);
148
138
  }
149
139
 
150
- nav a {
151
- font-size: base(0.875);
152
- line-height: base(1.5);
140
+ @include mid-break {
141
+ &__scroll {
142
+ padding: var(--app-header-height) base(0.5) base(2);
143
+ }
153
144
  }
154
145
 
155
- &__mobile-close {
156
- display: flex;
157
- align-items: center;
146
+ @include small-break {
147
+ &__scroll {
148
+ padding: var(--app-header-height) var(--gutter-h) base(2);
149
+ }
150
+
151
+ nav a {
152
+ font-size: base(0.875);
153
+ line-height: base(1.5);
154
+ }
155
+
156
+ &__mobile-close {
157
+ display: flex;
158
+ align-items: center;
159
+ }
158
160
  }
159
161
  }
160
162
  }