@uxf/cms 10.0.0-beta.59 → 10.0.0-beta.60

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 (7) hide show
  1. package/package.json +9 -9
  2. package/ui/styles/breadcrumbs.css +1 -1
  3. package/ui/styles/layout.css +23 -25
  4. package/ui/styles/login-layout.css +11 -11
  5. package/ui/styles/menu.css +48 -48
  6. package/ui/styles/mobile-bar.css +1 -1
  7. package/ui/styles/sidebar.css +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/cms",
3
- "version": "10.0.0-beta.59",
3
+ "version": "10.0.0-beta.60",
4
4
  "description": "UXF Cms",
5
5
  "author": "UXFans <dev@uxf.cz>",
6
6
  "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -41,12 +41,12 @@
41
41
  "@types/react": "18.2.6",
42
42
  "@types/react-dom": "18.2.4",
43
43
  "@uxf/core": "10.0.0-beta.37",
44
- "@uxf/data-grid": "10.0.0-beta.59",
45
- "@uxf/form": "10.0.0-beta.59",
44
+ "@uxf/data-grid": "10.0.0-beta.60",
45
+ "@uxf/form": "10.0.0-beta.60",
46
46
  "@uxf/icons-generator": "10.0.0-beta.19",
47
47
  "@uxf/router": "10.0.0-beta.15",
48
- "@uxf/ui": "10.0.0-beta.59",
49
- "@uxf/wysiwyg": "10.0.0-beta.59",
48
+ "@uxf/ui": "10.0.0-beta.60",
49
+ "@uxf/wysiwyg": "10.0.0-beta.60",
50
50
  "axios": "^1.4.0",
51
51
  "axios-hooks": "^4.0.0",
52
52
  "coordinate-parser": "1.0.7",
@@ -59,10 +59,10 @@
59
59
  },
60
60
  "peerDependencies": {
61
61
  "@uxf/core": "10.0.0-beta.37",
62
- "@uxf/data-grid": "10.0.0-beta.59",
63
- "@uxf/form": "10.0.0-beta.59",
64
- "@uxf/ui": "10.0.0-beta.59",
65
- "@uxf/wysiwyg": "10.0.0-beta.59",
62
+ "@uxf/data-grid": "10.0.0-beta.60",
63
+ "@uxf/form": "10.0.0-beta.60",
64
+ "@uxf/ui": "10.0.0-beta.60",
65
+ "@uxf/wysiwyg": "10.0.0-beta.60",
66
66
  "axios": "^1.4.0",
67
67
  "axios-hooks": "^4.0.0",
68
68
  "dayjs": "^1.11.7",
package/ui/styles/breadcrumbs.css CHANGED
@@ -16,8 +16,8 @@
16
16
  }
17
17
 
18
18
  &__divide-icon {
19
- margin-right: theme("spacing.2");
20
19
  display: inline;
20
+ margin-right: theme("spacing.2");
21
21
  }
22
22
 
23
23
  &__link {
package/ui/styles/layout.css CHANGED
@@ -6,12 +6,12 @@
6
6
  width: 100%;
7
7
 
8
8
  :root .light & {
9
- background-color: theme('colors.gray.100');
9
+ background-color: theme("colors.gray.100");
10
10
  }
11
11
 
12
12
  :root .dark & {
13
- background-color: theme('colors.gray.900');
14
- color: theme('colors.darkHigh');
13
+ background-color: theme("colors.gray.900");
14
+ color: theme("colors.darkHigh");
15
15
  }
16
16
  }
17
17
 
@@ -19,22 +19,21 @@
19
19
  --drawer-width: 264px;
20
20
 
21
21
  min-height: 100vh;
22
- padding-bottom: theme('spacing.16');
22
+ padding-bottom: theme("spacing.16");
23
23
  width: 100%;
24
24
 
25
- @media screen(md) {
25
+ @screen md {
26
26
  margin-left: var(--drawer-width);
27
27
  padding-bottom: 0;
28
28
  width: calc(100% - var(--drawer-width));
29
29
  }
30
-
31
30
  }
32
31
 
33
32
  &__loading {
34
33
  align-items: center;
35
34
  display: flex;
36
35
  flex-direction: column;
37
- height: theme('spacing.96');
36
+ height: theme("spacing.96");
38
37
  justify-content: center;
39
38
 
40
39
  &-inner {
@@ -42,65 +41,64 @@
42
41
  }
43
42
 
44
43
  &-text {
45
- margin-top: theme('spacing.2');
44
+ margin-top: theme("spacing.2");
46
45
  }
47
46
  }
48
47
 
49
48
  &__header {
50
49
  :root .light & {
51
- background-color: theme('colors.white');
50
+ background-color: theme("colors.white");
52
51
  }
53
52
 
54
53
  :root .dark & {
55
- background-color: theme('colors.gray.950');
54
+ background-color: theme("colors.gray.950");
56
55
  }
57
56
 
58
57
  &--sticky {
59
- box-shadow: theme('boxShadow.md');
58
+ box-shadow: theme("boxShadow.md");
60
59
  position: sticky;
61
60
  top: 0;
62
61
  z-index: 10;
63
62
 
64
63
  :root .light & {
65
- background-color: theme('colors.white');
64
+ background-color: theme("colors.white");
66
65
  }
67
66
 
68
67
  :root .dark & {
69
- background-color: theme('colors.gray.950');
68
+ background-color: theme("colors.gray.950");
70
69
  }
71
70
  }
72
71
  }
73
72
 
74
73
  &__toolbar {
75
74
  align-items: center;
76
- background-color: theme('colors.sidebar.background');
75
+ background-color: theme("colors.sidebar.background");
77
76
  display: flex;
78
- height: theme('spacing.12');
77
+ height: theme("spacing.12");
79
78
  justify-content: flex-end;
80
- padding: 0 theme('spacing.6');
79
+ padding: 0 theme("spacing.6");
81
80
 
82
81
  :root .light & {
83
- color: theme('colors.darkMedium');
82
+ color: theme("colors.darkMedium");
84
83
  }
85
84
 
86
85
  :root .dark & {
87
- color: theme('colors.lightMedium');
86
+ color: theme("colors.lightMedium");
88
87
  }
89
-
90
88
  }
91
89
 
92
90
  &__container {
93
91
  margin: 0 auto;
94
- padding: 0 theme('spacing.4');
92
+ padding: 0 theme("spacing.4");
95
93
 
96
- @media screen(md) {
97
- padding-left: theme('spacing.10');
98
- padding-right: theme('spacing.10');
94
+ @screen md {
95
+ padding-left: theme("spacing.10");
96
+ padding-right: theme("spacing.10");
99
97
  }
100
98
 
101
99
  &--basic {
102
- padding-bottom: theme('spacing.9');
103
- padding-top: theme('spacing.12');
100
+ padding-bottom: theme("spacing.9");
101
+ padding-top: theme("spacing.12");
104
102
  }
105
103
 
106
104
  &--narrow {
package/ui/styles/login-layout.css CHANGED
@@ -4,19 +4,19 @@
4
4
  flex-direction: column;
5
5
  justify-content: center;
6
6
  min-height: 100vh;
7
- padding: theme('spacing.4');
7
+ padding: theme("spacing.4");
8
8
 
9
9
  :root .light & {
10
- background-color: theme('colors.gray.100');
10
+ background-color: theme("colors.gray.100");
11
11
  }
12
12
 
13
13
  :root .dark & {
14
- background-color: theme('colors.gray.900');
15
- color: theme('colors.darkHigh');
14
+ background-color: theme("colors.gray.900");
15
+ color: theme("colors.darkHigh");
16
16
  }
17
17
 
18
18
  &__logo-wrapper {
19
- margin-bottom: theme('spacing.8');
19
+ margin-bottom: theme("spacing.8");
20
20
  }
21
21
 
22
22
  &__title {
@@ -28,25 +28,25 @@
28
28
  }
29
29
 
30
30
  &__subtitle {
31
- margin-top: theme('spacing.2');
31
+ margin-top: theme("spacing.2");
32
32
 
33
33
  :root .light & {
34
- color: theme('colors.lightMedium');
34
+ color: theme("colors.lightMedium");
35
35
  }
36
36
 
37
37
  :root .dark & {
38
- color: theme('colors.darkMedium');
38
+ color: theme("colors.darkMedium");
39
39
  }
40
40
  }
41
41
 
42
42
  &__body {
43
- margin-top: theme('spacing.8');
43
+ margin-top: theme("spacing.8");
44
44
  max-width: 100%;
45
- padding: theme('spacing.6');
45
+ padding: theme("spacing.6");
46
46
  width: 28rem;
47
47
 
48
48
  :root .dark & {
49
- background-color: theme('colors.gray.950');
49
+ background-color: theme("colors.gray.950");
50
50
  }
51
51
  }
52
52
  }
package/ui/styles/menu.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .uxf-cms-menu {
2
- background-color: theme('colors.sidebar.background');
3
- padding: 0 theme('spacing.2') theme('spacing.4');
2
+ background-color: theme("colors.sidebar.background");
3
+ padding: 0 theme("spacing.2") theme("spacing.4");
4
4
 
5
5
  &__item-wrapper {
6
6
  &--super {
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  &--user-menu {
15
- @media screen(md) {
15
+ @screen md {
16
16
  display: none;
17
17
  }
18
18
  }
@@ -22,44 +22,44 @@
22
22
  &--super {
23
23
  @apply uxf-typo-overline;
24
24
 
25
- color: theme('colors.darkLow');
26
- margin-bottom: theme('spacing.3');
27
- margin-top: theme('spacing.6');
28
- padding-left: theme('spacing.2');
25
+ color: theme("colors.darkLow");
26
+ margin-bottom: theme("spacing.3");
27
+ margin-top: theme("spacing.6");
28
+ padding-left: theme("spacing.2");
29
29
  text-transform: uppercase;
30
30
  }
31
31
 
32
32
  &--basic {
33
33
  align-items: center;
34
- background-color: theme('colors.sidebar.background');
35
- border-radius: theme('borderRadius.lg');
36
- color: theme('colors.darkMedium');
34
+ background-color: theme("colors.sidebar.background");
35
+ border-radius: theme("borderRadius.lg");
36
+ color: theme("colors.darkMedium");
37
37
  cursor: pointer;
38
38
  display: flex;
39
- margin-bottom: theme('spacing[0.5]');
40
- padding: theme('spacing[2.5]') theme('spacing.1') theme('spacing[2.5]') theme('spacing[2.5]');
39
+ margin-bottom: theme("spacing[0.5]");
40
+ padding: theme("spacing[2.5]") theme("spacing.1") theme("spacing[2.5]") theme("spacing[2.5]");
41
41
 
42
42
  &:hover {
43
- background-color: theme('colors.sidebar.hover');
43
+ background-color: theme("colors.sidebar.hover");
44
44
  }
45
45
 
46
46
  &.is-selected {
47
- background-color: theme('colors.sidebar.highlight');
48
- color: theme('colors.darkHigh');
47
+ background-color: theme("colors.sidebar.highlight");
48
+ color: theme("colors.darkHigh");
49
49
  font-weight: bold;
50
50
  }
51
51
 
52
52
  .uxf-cms-menu__icon-wrapper {
53
- width: theme('spacing.7');
53
+ width: theme("spacing.7");
54
54
 
55
55
  &--level-one {
56
- width: theme('spacing.9');
56
+ width: theme("spacing.9");
57
57
  }
58
58
  }
59
59
 
60
60
  .uxf-cms-menu__caret {
61
61
  margin-left: auto;
62
- margin-right: theme('spacing.2');
62
+ margin-right: theme("spacing.2");
63
63
 
64
64
  &.is-open {
65
65
  transform: rotate(-90deg);
@@ -76,13 +76,13 @@
76
76
  width: 100%;
77
77
 
78
78
  &--initially-closed {
79
- @media screen(md) {
79
+ @screen md {
80
80
  display: none;
81
81
  }
82
82
  }
83
83
 
84
84
  &--initially-open {
85
- @media screen(md) {
85
+ @screen md {
86
86
  pointer-events: none;
87
87
  }
88
88
  }
@@ -90,22 +90,22 @@
90
90
  }
91
91
 
92
92
  .uxf-cms-user-menu {
93
- border-top: 1px solid theme('colors.darkBorder');
94
- color: theme('colors.darkMedium');
93
+ border-top: 1px solid theme("colors.darkBorder");
94
+ color: theme("colors.darkMedium");
95
95
  display: none;
96
96
 
97
- @media screen(md) {
97
+ @screen md {
98
98
  display: block;
99
99
  }
100
100
 
101
101
  &.is-open {
102
- background-color: theme('colors.sidebar.hover');
102
+ background-color: theme("colors.sidebar.hover");
103
103
 
104
104
  .uxf-cms-menu__item {
105
- background-color: theme('colors.sidebar.hover');
105
+ background-color: theme("colors.sidebar.hover");
106
106
 
107
107
  &:hover {
108
- background-color: theme('colors.sidebar.background');
108
+ background-color: theme("colors.sidebar.background");
109
109
  }
110
110
  }
111
111
  }
@@ -113,19 +113,19 @@
113
113
  &__button {
114
114
  align-items: center;
115
115
  display: flex;
116
+ padding: theme("spacing.3") theme("spacing.4");
116
117
  text-align: left;
117
118
  width: 100%;
118
- padding: theme("spacing.3") theme("spacing.4");
119
119
 
120
120
  &:hover {
121
- background-color: theme('colors.sidebar.hover');
121
+ background-color: theme("colors.sidebar.hover");
122
122
  }
123
123
  }
124
124
 
125
125
  &__avatar {
126
126
  flex-shrink: 0;
127
127
  height: 32px;
128
- margin-right: theme('spacing.3');
128
+ margin-right: theme("spacing.3");
129
129
  width: 32px;
130
130
  }
131
131
 
@@ -140,7 +140,7 @@
140
140
  &__roles {
141
141
  @apply uxf-typo-caption truncate;
142
142
 
143
- color: theme('colors.darkLow');
143
+ color: theme("colors.darkLow");
144
144
  }
145
145
 
146
146
  &__caret-wrapper {
@@ -148,7 +148,7 @@
148
148
  }
149
149
 
150
150
  &__caret {
151
- margin-left: theme('spacing.2');
151
+ margin-left: theme("spacing.2");
152
152
 
153
153
  &.is-open {
154
154
  transform: rotate(-90deg);
@@ -163,49 +163,49 @@
163
163
  .uxf-cms-sub-menu {
164
164
  display: none;
165
165
 
166
- @media screen(md) {
166
+ @screen md {
167
167
  display: block;
168
168
  }
169
169
 
170
170
  &__wrapper {
171
- background-color: theme('colors.sidebar.highlight');
172
- border-radius: theme('borderRadius.xl');
173
- box-shadow: theme('boxShadow.lg');
171
+ background-color: theme("colors.sidebar.highlight");
172
+ border-radius: theme("borderRadius.xl");
173
+ box-shadow: theme("boxShadow.lg");
174
174
  overflow-y: auto;
175
175
  width: 100%;
176
- z-index: theme('zIndex.dropdown');
176
+ z-index: theme("zIndex.dropdown");
177
177
  }
178
178
 
179
179
  &__wrapper-mobile {
180
- background-color: theme('colors.sidebar.background');
181
- border-radius: theme('borderRadius.xl');
182
- box-shadow: theme('boxShadow.lg');
183
- left: theme('spacing.4');
180
+ background-color: theme("colors.sidebar.background");
181
+ border-radius: theme("borderRadius.xl");
182
+ box-shadow: theme("boxShadow.lg");
183
+ left: theme("spacing.4");
184
184
  overflow-y: auto;
185
185
  width: calc(100vw - 32px);
186
- z-index: theme('zIndex.dropdown');
186
+ z-index: theme("zIndex.dropdown");
187
187
  }
188
188
 
189
189
  &__item {
190
190
  @apply md:text-body2;
191
191
 
192
- background-color: theme('colors.sidebar.highlight');
193
- color: theme('colors.darkMedium');
194
- font-size: theme('fontSize.body');
192
+ background-color: theme("colors.sidebar.highlight");
193
+ color: theme("colors.darkMedium");
194
+ font-size: theme("fontSize.body");
195
195
  padding: theme("spacing[3.5]");
196
196
  width: 100%;
197
197
 
198
198
  &:hover {
199
- background-color: theme('colors.sidebar.background');
200
- color: theme('colors.darkLow');
199
+ background-color: theme("colors.sidebar.background");
200
+ color: theme("colors.darkLow");
201
201
  }
202
202
  }
203
203
 
204
204
  &__title {
205
205
  @apply uxf-typo-body;
206
206
 
207
- background-color: theme('colors.sidebar.background');
208
- color: theme('colors.darkHigh');
207
+ background-color: theme("colors.sidebar.background");
208
+ color: theme("colors.darkHigh");
209
209
  font-weight: bold;
210
210
  padding: theme("spacing[3.5]") theme("spacing.4");
211
211
  width: 100%;
package/ui/styles/mobile-bar.css CHANGED
@@ -10,7 +10,7 @@
10
10
  position: fixed;
11
11
  right: 0;
12
12
 
13
- @media screen(md) {
13
+ @screen md {
14
14
  display: none;
15
15
  }
16
16
 
package/ui/styles/sidebar.css CHANGED
@@ -11,10 +11,10 @@
11
11
  }
12
12
 
13
13
  @screen md {
14
+ border-bottom: none;
14
15
  left: 0;
15
16
  right: unset;
16
17
  z-index: 1;
17
- border-bottom: none;
18
18
  }
19
19
 
20
20
  &__content {
@@ -26,9 +26,9 @@
26
26
  height: calc(var(--device-height) - 52px);
27
27
  padding-top: theme("spacing.5");
28
28
 
29
- @media screen(md) {
30
- height: 100vh;
29
+ @screen md {
31
30
  border-bottom: none;
31
+ height: 100vh;
32
32
  }
33
33
 
34
34
  &--open {
@@ -38,7 +38,7 @@
38
38
  &--closed {
39
39
  display: none;
40
40
 
41
- @media screen(md) {
41
+ @screen md {
42
42
  display: flex;
43
43
  }
44
44
  }
@@ -54,7 +54,7 @@
54
54
  overflow: auto;
55
55
  padding: 0 0 theme("spacing.4");
56
56
 
57
- @media screen(md) {
57
+ @screen md {
58
58
  padding: 0;
59
59
  }
60
60
 
@@ -101,8 +101,8 @@
101
101
 
102
102
  &::-webkit-scrollbar-thumb {
103
103
  background-color: var(--scrollbar-color);
104
- border-radius: 999px;
105
104
  border: none;
105
+ border-radius: 999px;
106
106
  }
107
107
  }
108
108
  }