@wordpress/dataviews 4.4.5 → 4.4.7
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.
- package/build/dataviews-layouts/list/index.js +70 -75
- package/build/dataviews-layouts/list/index.js.map +1 -1
- package/build-module/dataviews-layouts/list/index.js +70 -75
- package/build-module/dataviews-layouts/list/index.js.map +1 -1
- package/build-style/style-rtl.css +29 -31
- package/build-style/style.css +29 -31
- package/build-types/dataviews-layouts/list/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/dataviews-layouts/list/index.tsx +81 -100
- package/src/dataviews-layouts/list/style.scss +32 -43
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -7,63 +7,40 @@ ul.dataviews-view-list {
|
|
|
7
7
|
|
|
8
8
|
li {
|
|
9
9
|
margin: 0;
|
|
10
|
-
cursor: pointer;
|
|
11
10
|
border-top: 1px solid $gray-100;
|
|
12
11
|
|
|
13
12
|
.dataviews-view-list__item-wrapper {
|
|
14
13
|
position: relative;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
> * {
|
|
18
|
-
width: 100%;
|
|
19
|
-
}
|
|
14
|
+
padding: $grid-unit-20 $grid-unit-30;
|
|
20
15
|
}
|
|
21
16
|
|
|
22
17
|
.dataviews-view-list__item-actions {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
right: 0;
|
|
26
|
-
|
|
18
|
+
flex: 0;
|
|
19
|
+
overflow: hidden;
|
|
27
20
|
|
|
28
21
|
> div {
|
|
29
22
|
height: $button-size-small;
|
|
30
23
|
}
|
|
31
24
|
|
|
32
25
|
.components-button {
|
|
26
|
+
position: relative;
|
|
27
|
+
z-index: 1;
|
|
33
28
|
opacity: 0;
|
|
34
29
|
}
|
|
35
30
|
}
|
|
36
31
|
|
|
37
|
-
&:
|
|
38
|
-
.dataviews-view-list__item-actions {
|
|
39
|
-
top: 50%;
|
|
40
|
-
transform: translateY(-50%);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&.is-selected,
|
|
45
|
-
&.is-hovered,
|
|
46
|
-
&:focus-within {
|
|
32
|
+
&:where(.is-selected, .is-hovered, :focus-within) {
|
|
47
33
|
.dataviews-view-list__item-actions {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
margin-
|
|
51
|
-
box-shadow: -12px 0 8px 0 #f8f8f8;
|
|
34
|
+
flex-basis: min-content;
|
|
35
|
+
overflow: unset;
|
|
36
|
+
margin-inline: $grid-unit-10 0;
|
|
52
37
|
|
|
53
38
|
.components-button {
|
|
54
39
|
opacity: 1;
|
|
55
|
-
position: static;
|
|
56
40
|
}
|
|
57
41
|
}
|
|
58
42
|
}
|
|
59
43
|
|
|
60
|
-
&.is-selected {
|
|
61
|
-
.dataviews-view-list__item-actions {
|
|
62
|
-
background-color: rgb(247 248 255);
|
|
63
|
-
box-shadow: -12px 0 8px 0 rgb(247 248 255);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
44
|
&.is-selected.is-selected {
|
|
68
45
|
border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
|
|
69
46
|
|
|
@@ -105,27 +82,38 @@ ul.dataviews-view-list {
|
|
|
105
82
|
}
|
|
106
83
|
|
|
107
84
|
.dataviews-view-list__item {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
85
|
+
position: absolute;
|
|
86
|
+
z-index: 1;
|
|
87
|
+
inset: 0;
|
|
111
88
|
scroll-margin: $grid-unit-10 0;
|
|
89
|
+
appearance: none;
|
|
90
|
+
border: none;
|
|
91
|
+
background: none;
|
|
92
|
+
padding: 0;
|
|
93
|
+
cursor: pointer;
|
|
112
94
|
|
|
113
95
|
&:focus-visible {
|
|
96
|
+
outline: none;
|
|
97
|
+
|
|
114
98
|
&::before {
|
|
115
99
|
position: absolute;
|
|
116
100
|
content: "";
|
|
117
|
-
|
|
118
|
-
right: var(--wp-admin-border-width-focus);
|
|
119
|
-
bottom: var(--wp-admin-border-width-focus);
|
|
120
|
-
left: var(--wp-admin-border-width-focus);
|
|
101
|
+
inset: var(--wp-admin-border-width-focus);
|
|
121
102
|
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
|
|
122
103
|
border-radius: $radius-small;
|
|
104
|
+
// Windows High Contrast mode will show this outline, but not the box-shadow.
|
|
105
|
+
outline: 2px solid transparent;
|
|
123
106
|
}
|
|
124
107
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
108
|
+
}
|
|
109
|
+
.dataviews-view-list__primary-field {
|
|
110
|
+
flex: 1;
|
|
111
|
+
min-height: $grid-unit-30;
|
|
112
|
+
line-height: $grid-unit-30;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
// The field should be in front of the main button in case it has a link/button.
|
|
115
|
+
&:has(a, button) {
|
|
116
|
+
z-index: 1;
|
|
129
117
|
}
|
|
130
118
|
}
|
|
131
119
|
|
|
@@ -164,6 +152,7 @@ ul.dataviews-view-list {
|
|
|
164
152
|
|
|
165
153
|
.dataviews-view-list__field-wrapper {
|
|
166
154
|
min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
|
|
155
|
+
flex-grow: 1;
|
|
167
156
|
}
|
|
168
157
|
|
|
169
158
|
.dataviews-view-list__fields {
|