grav-svelte 0.0.85 → 0.0.87
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,69 +1,74 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
2
|
+
import type { TableHeader } from "../interfaces.js";
|
|
3
|
+
import CrudTableButtons from "../CrudTableButtons.svelte";
|
|
4
|
+
import TextCell from "./TextCell.svelte";
|
|
5
|
+
import TextAreaCell from "./TextAreaCell.svelte";
|
|
6
|
+
import DateCell from "./DateCell.svelte";
|
|
7
|
+
import BoolCell from "./BoolCell.svelte";
|
|
8
|
+
import EditableBoolCell from "./EditableBoolCell.svelte";
|
|
9
|
+
import EditableTextCell from "./EditableTextCell.svelte";
|
|
10
|
+
import EditableNumberCell from "./EditableNumberCell.svelte";
|
|
11
|
+
import ImageCell from "./ImageCell.svelte";
|
|
12
|
+
import DynamicButtonCell from "./DynamicButtonCell.svelte";
|
|
13
|
+
import ImageButtonCell from "./ImageButtonCell.svelte";
|
|
14
|
+
import DualTextButtonCell from "./DualTextButtonCell.svelte";
|
|
15
|
+
import ConditionalCell from "./ConditionalCell.svelte";
|
|
16
|
+
import MultiTextButtonCell from "./MultiTextButtonCell.svelte";
|
|
17
|
+
import ComponentCell from "./ComponentCell.svelte";
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
export let item: any;
|
|
20
|
+
export let header: TableHeader;
|
|
21
|
+
export let idField: string;
|
|
22
|
+
export let index: number;
|
|
23
|
+
export let dragEnabled: boolean;
|
|
24
|
+
export let expandEnabled: boolean;
|
|
25
|
+
export let onImageClick: (src: string) => void;
|
|
25
26
|
</script>
|
|
26
27
|
|
|
27
28
|
<td
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
class="table-cell {index == 0 && !dragEnabled && !expandEnabled
|
|
30
|
+
? 'sticky-cell'
|
|
31
|
+
: ''} {header.tipo === 'TextArea' ? 'cell-textarea' : ''}"
|
|
32
|
+
style="text-align: {header.align ?? 'center'}; {header.tipo === 'TextArea'
|
|
33
|
+
? `max-height: calc(${header.cellMaxHeight ?? '150px'} + 14px + 0.6rem);`
|
|
34
|
+
: ''}"
|
|
32
35
|
>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
36
|
+
{#if header.tipo == "Text" || header.tipo == "Number"}
|
|
37
|
+
<TextCell {item} {header} />
|
|
38
|
+
{:else if header.tipo == "TextArea"}
|
|
39
|
+
<TextAreaCell {item} {header} />
|
|
40
|
+
{:else if header.tipo == "Date"}
|
|
41
|
+
<DateCell {item} {header} isDatetime={false} />
|
|
42
|
+
{:else if header.tipo == "Datetime"}
|
|
43
|
+
<DateCell {item} {header} isDatetime={true} />
|
|
44
|
+
{:else if header.tipo == "Bool"}
|
|
45
|
+
<BoolCell {item} {header} />
|
|
46
|
+
{:else if header.tipo == "EditableBool"}
|
|
47
|
+
<EditableBoolCell {item} {header} {idField} />
|
|
48
|
+
{:else if header.tipo == "EditableText"}
|
|
49
|
+
<EditableTextCell {item} {header} {idField} />
|
|
50
|
+
{:else if header.tipo == "EditableNumber"}
|
|
51
|
+
<EditableNumberCell {item} {header} {idField} />
|
|
52
|
+
{:else if header.tipo == "Image"}
|
|
53
|
+
<ImageCell {item} {header} {onImageClick} />
|
|
54
|
+
{:else if header.tipo == "Buttons"}
|
|
55
|
+
<CrudTableButtons
|
|
56
|
+
id={item[header.campo]}
|
|
57
|
+
buttonsConfig={header.buttonsConfig ?? []}
|
|
58
|
+
align={header.align ?? "center"}
|
|
59
|
+
row={item}
|
|
60
|
+
/>
|
|
61
|
+
{:else if header.tipo == "DynamicButton"}
|
|
62
|
+
<DynamicButtonCell {item} {header} {idField} />
|
|
63
|
+
{:else if header.tipo == "ImageButton"}
|
|
64
|
+
<ImageButtonCell {item} {header} {idField} />
|
|
65
|
+
{:else if header.tipo == "DualTextButton"}
|
|
66
|
+
<DualTextButtonCell {item} {header} {idField} />
|
|
67
|
+
{:else if header.tipo == "ConditionalCell"}
|
|
68
|
+
<ConditionalCell {item} {header} {idField} />
|
|
69
|
+
{:else if header.tipo == "MultiTextButton"}
|
|
70
|
+
<MultiTextButtonCell {item} {header} {idField} />
|
|
71
|
+
{:else if header.tipo == "Component"}
|
|
72
|
+
<ComponentCell {item} {header} />
|
|
73
|
+
{/if}
|
|
69
74
|
</td>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { TableHeader } from "../interfaces.js";
|
|
3
|
+
|
|
4
|
+
export let item: any;
|
|
5
|
+
export let header: TableHeader;
|
|
6
|
+
|
|
7
|
+
// Altura máxima para TextArea (150px por defecto, puede ser personalizada con cellMaxHeight)
|
|
8
|
+
$: maxHeight = header.cellMaxHeight ?? "180px";
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<div
|
|
12
|
+
class="cell-content-textarea {header.biBold ? 'bold' : ''}"
|
|
13
|
+
style="text-align: {header.align ?? 'left'}; {header.colorCampo &&
|
|
14
|
+
item[header.colorCampo]
|
|
15
|
+
? `background-color: ${item[header.colorCampo]}; color: white;`
|
|
16
|
+
: ''} max-height: {maxHeight};"
|
|
17
|
+
>
|
|
18
|
+
{item[header.campo] ?? ""}
|
|
19
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { TableHeader } from "../interfaces.js";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
item: any;
|
|
6
|
+
header: TableHeader;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {};
|
|
12
|
+
};
|
|
13
|
+
export type TextAreaCellProps = typeof __propDef.props;
|
|
14
|
+
export type TextAreaCellEvents = typeof __propDef.events;
|
|
15
|
+
export type TextAreaCellSlots = typeof __propDef.slots;
|
|
16
|
+
export default class TextAreaCell extends SvelteComponentTyped<TextAreaCellProps, TextAreaCellEvents, TextAreaCellSlots> {
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -11,7 +11,7 @@ export interface ButtonConfig {
|
|
|
11
11
|
export interface TableHeader {
|
|
12
12
|
titulo: string;
|
|
13
13
|
biSort: boolean;
|
|
14
|
-
tipo: 'Text' | 'Number' | 'Buttons' | 'Bool' | 'Image' | 'Datetime' | 'Date' | 'EditableBool' | 'EditableText' | 'EditableNumber' | 'DynamicButton' | 'ImageButton' | 'DualTextButton' | 'ConditionalCell' | 'MultiTextButton' | 'Component';
|
|
14
|
+
tipo: 'Text' | 'TextArea' | 'Number' | 'Buttons' | 'Bool' | 'Image' | 'Datetime' | 'Date' | 'EditableBool' | 'EditableText' | 'EditableNumber' | 'DynamicButton' | 'ImageButton' | 'DualTextButton' | 'ConditionalCell' | 'MultiTextButton' | 'Component';
|
|
15
15
|
biBold: boolean;
|
|
16
16
|
/**
|
|
17
17
|
* Alignment for the content of the cells belonging to this header.
|
|
@@ -1,430 +1,483 @@
|
|
|
1
1
|
.table-container {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
word-break: break-word;
|
|
7
|
+
z-index: 30;
|
|
8
|
+
width: 100%;
|
|
9
|
+
margin-bottom: 0.75rem;
|
|
10
|
+
margin-top: 0.75rem;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.table-scroll {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
overflow: auto;
|
|
15
|
+
max-height: 80vh;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
/* Scrollbar Styles for WebKit browsers (Chrome, Safari, Edge) */
|
|
19
19
|
.table-scroll::-webkit-scrollbar {
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
width: var(--grav-crud-scrollbar-width);
|
|
21
|
+
height: var(--grav-crud-scrollbar-width);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.table-scroll::-webkit-scrollbar-track {
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
background: var(--grav-crud-scrollbar-track);
|
|
26
|
+
border-radius: var(--grav-border-radius-sm);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.table-scroll::-webkit-scrollbar-thumb {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
background: var(--grav-crud-scrollbar-thumb);
|
|
31
|
+
border-radius: var(--grav-border-radius-sm);
|
|
32
|
+
transition: background-color 0.2s ease;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.table-scroll::-webkit-scrollbar-thumb:hover {
|
|
36
|
-
|
|
36
|
+
background: var(--grav-crud-scrollbar-thumb-hover);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/* Scrollbar Styles for Firefox */
|
|
40
40
|
.table-scroll {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
scrollbar-width: thin;
|
|
42
|
+
scrollbar-color: var(--grav-crud-scrollbar-thumb)
|
|
43
|
+
var(--grav-crud-scrollbar-track);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.data-table {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
47
|
+
width: 100%;
|
|
48
|
+
border-collapse: collapse;
|
|
49
|
+
table-layout: auto;
|
|
50
|
+
/* Permitir que la tabla se expanda más horizontalmente para TextArea */
|
|
51
|
+
min-width: max-content;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
.table-header {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@supports (backdrop-filter: blur(8px)) or
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
--grav-crud-color-bg,
|
|
70
|
-
rgba(255, 255, 255, 0.85)
|
|
71
|
-
);
|
|
72
|
-
}
|
|
55
|
+
position: sticky;
|
|
56
|
+
top: 0;
|
|
57
|
+
z-index: 20;
|
|
58
|
+
border-bottom-style: solid;
|
|
59
|
+
border-bottom-color: var(--grav-crud-color-border);
|
|
60
|
+
border-bottom-width: var(--grav-crud-cell-border-width, 1.5px);
|
|
61
|
+
background-color: rgba(255, 255, 255, 0.8);
|
|
62
|
+
backdrop-filter: blur(8px);
|
|
63
|
+
-webkit-backdrop-filter: blur(8px);
|
|
64
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
|
|
68
|
+
.table-header {
|
|
69
|
+
background-color: var(--grav-crud-color-bg, rgba(255, 255, 255, 0.85));
|
|
70
|
+
}
|
|
73
71
|
}
|
|
74
72
|
|
|
75
73
|
.table-header-cell {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
74
|
+
padding: 0.75rem;
|
|
75
|
+
text-align: center;
|
|
76
|
+
padding-top: 0.25rem;
|
|
77
|
+
padding-bottom: 0.25rem;
|
|
78
|
+
font-family: var(--grav-crud-header-font-family, "mundial", sans-serif);
|
|
79
|
+
font-size: var(--grav-crud-header-font-size, 0.75rem);
|
|
80
|
+
font-weight: var(--grav-crud-header-font-weight, 400);
|
|
81
|
+
line-height: var(--grav-crud-header-line-height, 1.5);
|
|
82
|
+
text-transform: uppercase;
|
|
83
|
+
white-space: nowrap;
|
|
84
|
+
background-color: inherit;
|
|
85
|
+
color: var(--grav-crud-color-neutral);
|
|
86
|
+
border-left: 0;
|
|
89
87
|
}
|
|
90
88
|
|
|
91
89
|
.non-sortable {
|
|
92
|
-
|
|
90
|
+
cursor: not-allowed;
|
|
93
91
|
}
|
|
94
92
|
|
|
95
93
|
.sortable {
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
text-align: left;
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
.borderleft {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
99
|
+
border-left-width: var(--grav-crud-table-border-width, 1.5px);
|
|
100
|
+
border-left-style: solid;
|
|
101
|
+
border-left-color: var(--grav-crud-color-border);
|
|
104
102
|
}
|
|
105
103
|
|
|
106
104
|
/* Special class for header cells that are sticky on both axes (top + left) */
|
|
107
105
|
.header-sticky-intersection {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
106
|
+
background-color: var(
|
|
107
|
+
--grav-crud-color-bg,
|
|
108
|
+
rgba(255, 255, 255, 0.95)
|
|
109
|
+
) !important;
|
|
110
|
+
backdrop-filter: none !important;
|
|
111
|
+
-webkit-backdrop-filter: none !important;
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
/* When header-sticky-intersection is applied to first column header (not drag-header) */
|
|
117
115
|
.borderleft.header-sticky-intersection {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
116
|
+
position: sticky;
|
|
117
|
+
left: 0;
|
|
118
|
+
z-index: 25;
|
|
119
|
+
padding-right: 1rem;
|
|
120
|
+
margin-right: 0.5rem;
|
|
121
|
+
box-shadow: inset -1.5px 0 0 var(--grav-crud-color-border),
|
|
122
|
+
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
126
123
|
}
|
|
127
124
|
|
|
128
125
|
.sort-icon {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
justify-content: center;
|
|
132
129
|
}
|
|
133
130
|
|
|
134
131
|
.sort-arrow {
|
|
135
|
-
|
|
132
|
+
margin-left: 0.25rem;
|
|
136
133
|
}
|
|
137
134
|
|
|
138
135
|
.table-row {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
136
|
+
border-bottom-width: var(--grav-crud-cell-border-width, 1.5px);
|
|
137
|
+
border-bottom-style: solid;
|
|
138
|
+
border-bottom-color: var(--grav-crud-color-border);
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
transition: background-color 0.2s;
|
|
144
141
|
}
|
|
145
142
|
|
|
146
143
|
.table-row:hover {
|
|
147
|
-
|
|
144
|
+
background-color: var(--grav-crud-color-light);
|
|
148
145
|
}
|
|
149
146
|
|
|
150
147
|
.table-row.selected {
|
|
151
|
-
|
|
148
|
+
background-color: var(--grav-crud-color-drag);
|
|
152
149
|
}
|
|
153
150
|
|
|
154
151
|
.table-cell {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
152
|
+
border-top: 0;
|
|
153
|
+
border-left: 0;
|
|
154
|
+
border-right: 0;
|
|
155
|
+
white-space: nowrap;
|
|
156
|
+
vertical-align: middle;
|
|
157
|
+
z-index: 10;
|
|
158
|
+
padding-top: 7px;
|
|
159
|
+
padding-bottom: 7px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Celdas con TextArea - permitir que el contenido tenga scroll sin expandir la celda */
|
|
163
|
+
.table-cell.cell-textarea {
|
|
164
|
+
white-space: normal;
|
|
165
|
+
vertical-align: top;
|
|
166
|
+
/* Altura máxima basada en el contenido + padding */
|
|
167
|
+
max-height: calc(
|
|
168
|
+
150px + 14px + 0.6rem
|
|
169
|
+
); /* max-height del contenido + padding celda + padding contenido */
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
/* Asegurar que la celda no se expanda */
|
|
172
|
+
box-sizing: border-box;
|
|
173
|
+
/* Expandir más en el eje X (horizontal) */
|
|
174
|
+
min-width: 250px;
|
|
175
|
+
max-width: 500px;
|
|
176
|
+
width: auto;
|
|
163
177
|
}
|
|
164
178
|
|
|
165
179
|
.sticky-cell {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
(-
|
|
180
|
-
|
|
181
|
-
background-color: var(
|
|
182
|
-
--grav-crud-color-bg,
|
|
183
|
-
rgba(255, 255, 255, 0.85)
|
|
184
|
-
);
|
|
185
|
-
}
|
|
180
|
+
position: sticky;
|
|
181
|
+
left: 0;
|
|
182
|
+
background-color: rgba(255, 255, 255, 0.8);
|
|
183
|
+
backdrop-filter: blur(8px);
|
|
184
|
+
-webkit-backdrop-filter: blur(8px);
|
|
185
|
+
z-index: 15;
|
|
186
|
+
border-bottom: inherit;
|
|
187
|
+
box-shadow: inset -1.5px 0 0 var(--grav-crud-color-border),
|
|
188
|
+
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
|
|
192
|
+
.sticky-cell {
|
|
193
|
+
background-color: var(--grav-crud-color-bg, rgba(255, 255, 255, 0.85));
|
|
194
|
+
}
|
|
186
195
|
}
|
|
187
196
|
|
|
188
197
|
.cell-content {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
198
|
+
padding-left: 0.25rem;
|
|
199
|
+
white-space: normal;
|
|
200
|
+
word-break: break-word;
|
|
201
|
+
font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
|
|
202
|
+
font-size: var(--grav-crud-cell-font-size, 0.875rem);
|
|
203
|
+
font-weight: var(--grav-crud-cell-font-weight, 400);
|
|
204
|
+
line-height: var(--grav-crud-cell-line-height, 1.5);
|
|
205
|
+
color: var(--grav-crud-color-neutral);
|
|
206
|
+
margin-left: 3px;
|
|
207
|
+
margin-right: 3px;
|
|
208
|
+
padding-right: 0.3rem;
|
|
209
|
+
padding-left: 0.3rem;
|
|
210
|
+
border-radius: 0.375rem;
|
|
202
211
|
}
|
|
203
212
|
|
|
204
213
|
.cell-content.bold {
|
|
205
|
-
|
|
214
|
+
font-weight: bold;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Estilos para TextArea - celda con scroll vertical */
|
|
218
|
+
.cell-content-textarea {
|
|
219
|
+
padding-left: 0.25rem;
|
|
220
|
+
padding-right: 0.3rem;
|
|
221
|
+
padding-top: 0.3rem;
|
|
222
|
+
padding-bottom: 0.3rem;
|
|
223
|
+
white-space: normal;
|
|
224
|
+
word-break: break-word;
|
|
225
|
+
font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
|
|
226
|
+
font-size: var(--grav-crud-cell-font-size, 0.875rem);
|
|
227
|
+
font-weight: var(--grav-crud-cell-font-weight, 400);
|
|
228
|
+
line-height: var(--grav-crud-cell-line-height, 1.5);
|
|
229
|
+
color: var(--grav-crud-color-neutral);
|
|
230
|
+
border-radius: 0.375rem;
|
|
231
|
+
/* Scroll vertical activado */
|
|
232
|
+
overflow-x: hidden;
|
|
233
|
+
overflow-y: auto;
|
|
234
|
+
/* Altura máxima (se establece inline desde el componente) */
|
|
235
|
+
max-height: 150px;
|
|
236
|
+
/* Asegurar que no expanda la celda */
|
|
237
|
+
display: block;
|
|
238
|
+
/* Scrollbar personalizado */
|
|
239
|
+
scrollbar-width: thin;
|
|
240
|
+
scrollbar-color: var(--grav-crud-scrollbar-thumb)
|
|
241
|
+
var(--grav-crud-scrollbar-track);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Scrollbar personalizado para TextArea en WebKit */
|
|
245
|
+
.cell-content-textarea::-webkit-scrollbar {
|
|
246
|
+
width: 6px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.cell-content-textarea::-webkit-scrollbar-track {
|
|
250
|
+
background: var(--grav-crud-scrollbar-track);
|
|
251
|
+
border-radius: var(--grav-border-radius-sm);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.cell-content-textarea::-webkit-scrollbar-thumb {
|
|
255
|
+
background: var(--grav-crud-scrollbar-thumb);
|
|
256
|
+
border-radius: var(--grav-border-radius-sm);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.cell-content-textarea::-webkit-scrollbar-thumb:hover {
|
|
260
|
+
background: var(--grav-crud-scrollbar-thumb-hover);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.cell-content-textarea.bold {
|
|
264
|
+
font-weight: bold;
|
|
206
265
|
}
|
|
207
266
|
|
|
208
267
|
.no-data {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
268
|
+
text-align: center;
|
|
269
|
+
padding: 1rem 0;
|
|
270
|
+
font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
|
|
271
|
+
font-size: var(--grav-crud-cell-font-size, 0.875rem);
|
|
272
|
+
font-weight: var(--grav-crud-cell-font-weight, 400);
|
|
273
|
+
line-height: var(--grav-crud-cell-line-height, 1.5);
|
|
215
274
|
}
|
|
216
275
|
|
|
217
276
|
.loading-container {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
277
|
+
margin: 0 auto;
|
|
278
|
+
width: 100%;
|
|
279
|
+
padding: 1rem;
|
|
221
280
|
}
|
|
222
281
|
|
|
223
282
|
.loading-animation {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
283
|
+
display: flex;
|
|
284
|
+
flex-direction: column;
|
|
285
|
+
width: 100%;
|
|
286
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
228
287
|
}
|
|
229
288
|
|
|
230
289
|
.loading-line {
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
290
|
+
height: 1rem;
|
|
291
|
+
border-radius: 0.25rem;
|
|
292
|
+
background-color: var(--grav-crud-color-border);
|
|
293
|
+
margin-bottom: 0.5rem;
|
|
294
|
+
width: 100%;
|
|
295
|
+
margin: 0 0 0.5rem 0;
|
|
296
|
+
flex: none;
|
|
238
297
|
}
|
|
239
298
|
|
|
240
299
|
@keyframes pulse {
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
300
|
+
0%,
|
|
301
|
+
100% {
|
|
302
|
+
opacity: 1;
|
|
303
|
+
}
|
|
304
|
+
50% {
|
|
305
|
+
opacity: 0.5;
|
|
306
|
+
}
|
|
248
307
|
}
|
|
249
308
|
|
|
250
309
|
@media (min-width: 640px) {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
310
|
+
.cell-content {
|
|
311
|
+
font-size: 1rem;
|
|
312
|
+
}
|
|
254
313
|
}
|
|
255
314
|
|
|
256
315
|
.crud-image {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
316
|
+
width: 4rem;
|
|
317
|
+
height: 4rem;
|
|
318
|
+
object-fit: cover;
|
|
319
|
+
margin: 0.5rem auto;
|
|
320
|
+
border-radius: var(--grav-crud-image-border-radius, 0.25rem);
|
|
321
|
+
display: block;
|
|
263
322
|
}
|
|
264
323
|
|
|
265
324
|
/* Drag and drop styles */
|
|
266
325
|
.drag-header {
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
326
|
+
width: 40px;
|
|
327
|
+
text-align: center;
|
|
328
|
+
cursor: default;
|
|
329
|
+
position: sticky;
|
|
330
|
+
left: 0;
|
|
331
|
+
z-index: 25;
|
|
332
|
+
padding-right: 0.75rem;
|
|
333
|
+
box-shadow: inset -1.5px 0 0 var(--grav-crud-color-border),
|
|
334
|
+
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
277
335
|
}
|
|
278
336
|
|
|
279
337
|
.drag-handle-header {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
338
|
+
display: flex;
|
|
339
|
+
align-items: center;
|
|
340
|
+
justify-content: center;
|
|
341
|
+
color: var(--grav-crud-color-icon);
|
|
284
342
|
}
|
|
285
343
|
|
|
286
344
|
.drag-handle-cell {
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
(-
|
|
304
|
-
|
|
305
|
-
background-color: var(
|
|
306
|
-
--grav-crud-color-bg,
|
|
307
|
-
rgba(255, 255, 255, 0.85)
|
|
308
|
-
);
|
|
309
|
-
}
|
|
345
|
+
width: 40px;
|
|
346
|
+
text-align: center;
|
|
347
|
+
padding: 0.5rem;
|
|
348
|
+
padding-right: 0.75rem;
|
|
349
|
+
cursor: grab;
|
|
350
|
+
background-color: rgba(255, 255, 255, 0.8);
|
|
351
|
+
backdrop-filter: blur(8px);
|
|
352
|
+
-webkit-backdrop-filter: blur(8px);
|
|
353
|
+
z-index: 15;
|
|
354
|
+
border-bottom: inherit;
|
|
355
|
+
box-shadow: inset -1.5px 0 0 var(--grav-crud-color-border),
|
|
356
|
+
2px 0 6px rgba(0, 0, 0, 0.08);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
|
|
360
|
+
.drag-handle-cell {
|
|
361
|
+
background-color: var(--grav-crud-color-bg, rgba(255, 255, 255, 0.85));
|
|
362
|
+
}
|
|
310
363
|
}
|
|
311
364
|
|
|
312
365
|
.drag-handle {
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
366
|
+
display: flex;
|
|
367
|
+
align-items: center;
|
|
368
|
+
justify-content: center;
|
|
369
|
+
color: var(--grav-crud-color-icon);
|
|
370
|
+
transition: color 0.2s;
|
|
371
|
+
padding: 0.25rem;
|
|
319
372
|
}
|
|
320
373
|
|
|
321
374
|
.draggable-row {
|
|
322
|
-
|
|
375
|
+
transition: all 0.3s ease;
|
|
323
376
|
}
|
|
324
377
|
|
|
325
378
|
.draggable-row.dragging {
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
379
|
+
opacity: 0.5;
|
|
380
|
+
transform: scale(0.98);
|
|
381
|
+
background-color: var(--grav-crud-color-drag);
|
|
382
|
+
cursor: grabbing;
|
|
330
383
|
}
|
|
331
384
|
|
|
332
385
|
.draggable-row.dragging .drag-handle {
|
|
333
|
-
|
|
386
|
+
cursor: grabbing;
|
|
334
387
|
}
|
|
335
388
|
|
|
336
389
|
.draggable-row.drag-over {
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
390
|
+
background-color: var(--grav-crud-color-drag);
|
|
391
|
+
border-top: 2px solid var(--grav-crud-color-drag);
|
|
392
|
+
border-bottom: 2px solid var(--grav-crud-color-drag);
|
|
340
393
|
}
|
|
341
394
|
|
|
342
395
|
/* Editable cell styles */
|
|
343
396
|
.editable-checkbox {
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
397
|
+
width: 2rem;
|
|
398
|
+
height: 2rem;
|
|
399
|
+
background: transparent;
|
|
400
|
+
border: 1.5px solid var(--grav-crud-color-neutral);
|
|
401
|
+
color: var(--grav-crud-color-neutral);
|
|
402
|
+
cursor: pointer;
|
|
403
|
+
border-radius: 0.375rem;
|
|
404
|
+
display: inline-flex;
|
|
405
|
+
align-items: center;
|
|
406
|
+
justify-content: center;
|
|
407
|
+
transition: all 0.2s ease;
|
|
408
|
+
padding: 0;
|
|
356
409
|
}
|
|
357
410
|
|
|
358
411
|
.editable-checkbox:hover {
|
|
359
|
-
|
|
412
|
+
background-color: var(--grav-crud-color-light);
|
|
360
413
|
}
|
|
361
414
|
|
|
362
415
|
.editable-checkbox.checked {
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
416
|
+
background-color: var(--grav-crud-color-primary);
|
|
417
|
+
color: var(--grav-crud-color-icon);
|
|
418
|
+
border-color: var(--grav-crud-color-primary);
|
|
366
419
|
}
|
|
367
420
|
|
|
368
421
|
.editable-input {
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
422
|
+
width: 100%;
|
|
423
|
+
padding: 0.5rem;
|
|
424
|
+
border: 1.5px solid transparent;
|
|
425
|
+
background: transparent;
|
|
426
|
+
border-radius: 0.375rem;
|
|
427
|
+
font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
|
|
428
|
+
font-size: var(--grav-crud-cell-font-size, 0.875rem);
|
|
429
|
+
color: var(--grav-crud-color-neutral);
|
|
430
|
+
transition: all 0.2s ease;
|
|
378
431
|
}
|
|
379
432
|
|
|
380
433
|
.editable-input:hover {
|
|
381
|
-
|
|
382
|
-
|
|
434
|
+
border-color: var(--grav-crud-color-border);
|
|
435
|
+
background-color: var(--grav-crud-color-light);
|
|
383
436
|
}
|
|
384
437
|
|
|
385
438
|
.editable-input:focus {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
439
|
+
outline: none;
|
|
440
|
+
border-color: var(--grav-crud-color-primary);
|
|
441
|
+
background-color: var(--grav-crud-color-bg);
|
|
389
442
|
}
|
|
390
443
|
|
|
391
444
|
/* Remove number input arrows */
|
|
392
445
|
.editable-input[type="number"]::-webkit-outer-spin-button,
|
|
393
446
|
.editable-input[type="number"]::-webkit-inner-spin-button {
|
|
394
|
-
|
|
395
|
-
|
|
447
|
+
-webkit-appearance: none;
|
|
448
|
+
margin: 0;
|
|
396
449
|
}
|
|
397
450
|
|
|
398
451
|
.editable-input[type="number"] {
|
|
399
|
-
|
|
452
|
+
-moz-appearance: textfield;
|
|
400
453
|
}
|
|
401
454
|
|
|
402
455
|
/* Dynamic Button Styles */
|
|
403
456
|
.dynamic-button {
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
457
|
+
display: flex;
|
|
458
|
+
align-items: center;
|
|
459
|
+
justify-content: center;
|
|
460
|
+
gap: 0.5rem;
|
|
461
|
+
padding: 0.5rem 1rem;
|
|
462
|
+
border-radius: 0.375rem;
|
|
463
|
+
font-family: var(--grav-crud-cell-font-family, "mundial", sans-serif);
|
|
464
|
+
font-size: var(--grav-crud-cell-font-size, 0.875rem);
|
|
465
|
+
font-weight: 500;
|
|
466
|
+
border: 1.5px solid transparent;
|
|
467
|
+
cursor: pointer;
|
|
468
|
+
transition: all 0.2s ease;
|
|
469
|
+
white-space: nowrap;
|
|
470
|
+
background-color: var(--grav-crud-color-neutral);
|
|
471
|
+
color: var(--grav-crud-color-button);
|
|
419
472
|
}
|
|
420
473
|
|
|
421
474
|
.dynamic-button:hover {
|
|
422
|
-
|
|
423
|
-
|
|
475
|
+
opacity: 0.8;
|
|
476
|
+
transform: translateY(-1px);
|
|
424
477
|
}
|
|
425
478
|
|
|
426
479
|
.dynamic-button:active {
|
|
427
|
-
|
|
480
|
+
transform: translateY(0);
|
|
428
481
|
}
|
|
429
482
|
|
|
430
483
|
.dynamic-button-icon-left {
|
|
@@ -435,235 +488,235 @@
|
|
|
435
488
|
|
|
436
489
|
/* Image Button Styles */
|
|
437
490
|
.image-button-wrapper {
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
491
|
+
background: transparent;
|
|
492
|
+
border: none;
|
|
493
|
+
padding: 0;
|
|
494
|
+
cursor: pointer;
|
|
495
|
+
display: inline-flex;
|
|
496
|
+
align-items: center;
|
|
497
|
+
justify-content: center;
|
|
445
498
|
}
|
|
446
499
|
|
|
447
500
|
.image-button {
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
501
|
+
border-radius: 50%;
|
|
502
|
+
object-fit: cover;
|
|
503
|
+
transition: all 0.2s ease;
|
|
504
|
+
border: none;
|
|
452
505
|
}
|
|
453
506
|
|
|
454
507
|
.image-button:hover {
|
|
455
|
-
|
|
456
|
-
|
|
508
|
+
transform: scale(1.1);
|
|
509
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
457
510
|
}
|
|
458
511
|
|
|
459
512
|
.image-button:active {
|
|
460
|
-
|
|
513
|
+
transform: scale(1.05);
|
|
461
514
|
}
|
|
462
515
|
|
|
463
516
|
.image-button-sm {
|
|
464
|
-
|
|
465
|
-
|
|
517
|
+
width: 32px;
|
|
518
|
+
height: 32px;
|
|
466
519
|
}
|
|
467
520
|
|
|
468
521
|
.image-button-md {
|
|
469
|
-
|
|
470
|
-
|
|
522
|
+
width: 48px;
|
|
523
|
+
height: 48px;
|
|
471
524
|
}
|
|
472
525
|
|
|
473
526
|
.image-button-lg {
|
|
474
|
-
|
|
475
|
-
|
|
527
|
+
width: 64px;
|
|
528
|
+
height: 64px;
|
|
476
529
|
}
|
|
477
530
|
|
|
478
531
|
/* Expand/Collapse Styles */
|
|
479
532
|
.expand-header {
|
|
480
|
-
|
|
481
|
-
|
|
533
|
+
width: 50px;
|
|
534
|
+
text-align: center;
|
|
482
535
|
}
|
|
483
536
|
|
|
484
537
|
.expand-cell {
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
538
|
+
width: 50px;
|
|
539
|
+
text-align: center;
|
|
540
|
+
padding: 0.5rem;
|
|
541
|
+
vertical-align: middle;
|
|
489
542
|
}
|
|
490
543
|
|
|
491
544
|
.expand-button {
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
545
|
+
background: transparent;
|
|
546
|
+
border: none;
|
|
547
|
+
cursor: pointer;
|
|
548
|
+
padding: 0.25rem;
|
|
549
|
+
display: inline-flex;
|
|
550
|
+
align-items: center;
|
|
551
|
+
justify-content: center;
|
|
552
|
+
border-radius: 0.25rem;
|
|
553
|
+
transition: all 0.2s ease;
|
|
501
554
|
}
|
|
502
555
|
|
|
503
556
|
.expand-button:hover {
|
|
504
|
-
|
|
557
|
+
background-color: var(--grav-crud-color-light);
|
|
505
558
|
}
|
|
506
559
|
|
|
507
560
|
.chevron-icon {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
561
|
+
color: var(--grav-crud-color-neutral);
|
|
562
|
+
transition: transform 0.3s ease;
|
|
563
|
+
transform: rotate(0deg);
|
|
511
564
|
}
|
|
512
565
|
|
|
513
566
|
.chevron-icon.expanded {
|
|
514
|
-
|
|
567
|
+
transform: rotate(90deg);
|
|
515
568
|
}
|
|
516
569
|
|
|
517
570
|
.expand-button:hover .chevron-icon {
|
|
518
|
-
|
|
519
|
-
|
|
571
|
+
color: var(--grav-crud-color-primary, var(--grav-crud-color-neutral));
|
|
572
|
+
transform: scale(1.15) rotate(0deg);
|
|
520
573
|
}
|
|
521
574
|
|
|
522
575
|
.expand-button:hover .chevron-icon.expanded {
|
|
523
|
-
|
|
576
|
+
transform: scale(1.15) rotate(90deg);
|
|
524
577
|
}
|
|
525
578
|
|
|
526
579
|
/* Subrow Styles */
|
|
527
580
|
.sub-row-container {
|
|
528
|
-
|
|
581
|
+
background-color: rgba(0, 0, 0, 0.02);
|
|
529
582
|
}
|
|
530
583
|
|
|
531
584
|
.sub-row-cell {
|
|
532
|
-
|
|
585
|
+
padding: 0 !important;
|
|
533
586
|
}
|
|
534
587
|
|
|
535
588
|
.sub-table {
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
589
|
+
width: auto;
|
|
590
|
+
border-collapse: collapse;
|
|
591
|
+
margin: 0;
|
|
592
|
+
background-color: rgba(0, 0, 0, 0.02);
|
|
540
593
|
}
|
|
541
594
|
|
|
542
595
|
.sub-table .sub-row {
|
|
543
|
-
|
|
596
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
544
597
|
}
|
|
545
598
|
|
|
546
599
|
.sub-table .sub-row:hover {
|
|
547
|
-
|
|
600
|
+
background-color: rgba(0, 0, 0, 0.04);
|
|
548
601
|
}
|
|
549
602
|
|
|
550
603
|
.sub-table .table-cell {
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
604
|
+
padding: 0.5rem;
|
|
605
|
+
vertical-align: middle;
|
|
606
|
+
border: none;
|
|
554
607
|
}
|
|
555
608
|
|
|
556
609
|
.sub-table .cell-content {
|
|
557
|
-
|
|
610
|
+
padding-left: 0.5rem;
|
|
558
611
|
}
|
|
559
612
|
|
|
560
613
|
/* Dual Text Button Styles */
|
|
561
614
|
.dual-text-button {
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
615
|
+
display: flex;
|
|
616
|
+
flex-direction: column;
|
|
617
|
+
align-items: center;
|
|
618
|
+
justify-content: center;
|
|
619
|
+
cursor: pointer;
|
|
620
|
+
font-family: var(--grav-crud-header-font-family, "mundial", sans-serif);
|
|
568
621
|
}
|
|
569
622
|
|
|
570
623
|
.dual-text-button:hover {
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
624
|
+
border-color: var(--grav-crud-color-primary);
|
|
625
|
+
transform: translateY(-1px);
|
|
626
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
574
627
|
}
|
|
575
628
|
|
|
576
629
|
.dual-text-button:active {
|
|
577
|
-
|
|
630
|
+
transform: translateY(0);
|
|
578
631
|
}
|
|
579
632
|
|
|
580
633
|
.dual-text-1 {
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
634
|
+
font-weight: 600;
|
|
635
|
+
width: 100%;
|
|
636
|
+
padding: 0.25rem 0.5rem;
|
|
637
|
+
border-top-left-radius: var(--grav-border-radius-md);
|
|
638
|
+
border-top-right-radius: var(--grav-border-radius-md);
|
|
586
639
|
}
|
|
587
640
|
|
|
588
641
|
.dual-text-2 {
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
642
|
+
font-weight: 600;
|
|
643
|
+
width: 100%;
|
|
644
|
+
padding: 0.25rem 0.5rem;
|
|
645
|
+
border-bottom-left-radius: var(--grav-border-radius-md);
|
|
646
|
+
border-bottom-right-radius: var(--grav-border-radius-md);
|
|
594
647
|
}
|
|
595
648
|
|
|
596
649
|
.rounded-bottom {
|
|
597
|
-
|
|
598
|
-
|
|
650
|
+
border-bottom-left-radius: var(--grav-border-radius-md);
|
|
651
|
+
border-bottom-right-radius: var(--grav-border-radius-md);
|
|
599
652
|
}
|
|
600
653
|
|
|
601
654
|
.dual-text-separator {
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
655
|
+
color: var(--grav-crud-color-neutral);
|
|
656
|
+
opacity: 0.5;
|
|
657
|
+
font-weight: 400;
|
|
605
658
|
}
|
|
606
659
|
|
|
607
660
|
/* Multi Text Button Styles */
|
|
608
661
|
.multi-text-button {
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
662
|
+
display: flex;
|
|
663
|
+
cursor: pointer;
|
|
664
|
+
transition: all 0.2s ease;
|
|
665
|
+
border: none;
|
|
666
|
+
background: transparent;
|
|
667
|
+
padding: 0.25rem;
|
|
668
|
+
width: 100%;
|
|
616
669
|
}
|
|
617
670
|
|
|
618
671
|
.multi-text-button:hover {
|
|
619
|
-
|
|
672
|
+
transform: translateY(-1px);
|
|
620
673
|
}
|
|
621
674
|
|
|
622
675
|
.multi-text-button:active {
|
|
623
|
-
|
|
676
|
+
transform: translateY(0);
|
|
624
677
|
}
|
|
625
678
|
|
|
626
679
|
.multi-text-vertical {
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
680
|
+
flex-direction: column;
|
|
681
|
+
gap: 0.25rem;
|
|
682
|
+
align-items: center;
|
|
683
|
+
justify-content: center;
|
|
631
684
|
}
|
|
632
685
|
|
|
633
686
|
.multi-text-horizontal {
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
687
|
+
flex-direction: row;
|
|
688
|
+
gap: 0.5rem;
|
|
689
|
+
flex-wrap: wrap;
|
|
690
|
+
align-items: center;
|
|
691
|
+
justify-content: center;
|
|
639
692
|
}
|
|
640
693
|
|
|
641
694
|
.multi-text-item {
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
695
|
+
font-weight: 600;
|
|
696
|
+
padding: 0.25rem 0.5rem;
|
|
697
|
+
border-radius: var(--grav-border-radius-md);
|
|
698
|
+
font-size: 0.875rem;
|
|
699
|
+
white-space: nowrap;
|
|
700
|
+
transition: all 0.2s ease;
|
|
701
|
+
text-align: center;
|
|
649
702
|
}
|
|
650
703
|
|
|
651
704
|
.multi-text-vertical .multi-text-item {
|
|
652
|
-
|
|
705
|
+
min-width: 120px;
|
|
653
706
|
}
|
|
654
707
|
|
|
655
708
|
.multi-text-vertical .multi-text-item:first-child {
|
|
656
|
-
|
|
657
|
-
|
|
709
|
+
border-top-left-radius: var(--grav-border-radius-md);
|
|
710
|
+
border-top-right-radius: var(--grav-border-radius-md);
|
|
658
711
|
}
|
|
659
712
|
|
|
660
713
|
.multi-text-vertical .multi-text-item:last-child {
|
|
661
|
-
|
|
662
|
-
|
|
714
|
+
border-bottom-left-radius: var(--grav-border-radius-md);
|
|
715
|
+
border-bottom-right-radius: var(--grav-border-radius-md);
|
|
663
716
|
}
|
|
664
717
|
|
|
665
718
|
.multi-text-separator {
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
719
|
+
color: var(--grav-crud-color-neutral);
|
|
720
|
+
opacity: 0.5;
|
|
721
|
+
font-weight: 400;
|
|
669
722
|
}
|