Skip to content

Commit a5361e6

Browse files
AllanJardAllanJard
committed
Updating package for DataTables 3
1 parent a0d58bc commit a5361e6

6 files changed

Lines changed: 127 additions & 83 deletions

File tree

‎css/responsive.jqueryui.css‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
:root {
2+
--dtr-control-triangle_size: 5px;
3+
--dtr-control-triangle_color: rgba(0, 0, 0, 0.5);
4+
--dtr-details-list_padding: 0 0 0 1em;
5+
--dtr-details-list_gap: 0.333em;
6+
--dtr-modal_background: #f5f5f7;
7+
--dtr-modal_border: 1px solid black;
8+
--dtr-modal_border-radius: 0.5em;
9+
--dtr-modal_box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
10+
--dtr-modal-background_background: rgba(0, 0, 0, 0.6);
11+
}
12+
113
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
214
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
315
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
@@ -18,24 +30,24 @@ table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
1830
display: inline-block;
1931
box-sizing: border-box;
2032
content: "";
21-
border-top: 5px solid transparent;
22-
border-left: 10px solid rgba(0, 0, 0, 0.5);
23-
border-bottom: 5px solid transparent;
33+
border-top: var(--dtr-control-triangle_size) solid transparent;
34+
border-left: calc(var(--dtr-control-triangle_size) * 2) solid var(--dtr-control-triangle_color);
35+
border-bottom: var(--dtr-control-triangle_size) solid transparent;
2436
border-right: 0px solid transparent;
2537
}
2638
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,
2739
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {
28-
border-top: 5px solid transparent;
40+
border-top: var(--dtr-control-triangle_size) solid transparent;
2941
border-left: 0px solid transparent;
30-
border-bottom: 5px solid transparent;
31-
border-right: 10px solid rgba(0, 0, 0, 0.5);
42+
border-bottom: var(--dtr-control-triangle_size) solid transparent;
43+
border-right: 10px solid var(--dtr-control-triangle_color);
3244
}
3345
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
3446
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
35-
border-top: 10px solid rgba(0, 0, 0, 0.5);
36-
border-left: 5px solid transparent;
47+
border-top: calc(var(--dtr-control-triangle_size) * 2) solid var(--dtr-control-triangle_color);
48+
border-left: var(--dtr-control-triangle_size) solid transparent;
3749
border-bottom: 0px solid transparent;
38-
border-right: 5px solid transparent;
50+
border-right: var(--dtr-control-triangle_size) solid transparent;
3951
}
4052
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
4153
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
@@ -54,44 +66,42 @@ table.dataTable.dtr-column > tbody > tr > th.control:before {
5466
display: inline-block;
5567
box-sizing: border-box;
5668
content: "";
57-
border-top: 5px solid transparent;
58-
border-left: 10px solid rgba(0, 0, 0, 0.5);
59-
border-bottom: 5px solid transparent;
69+
border-top: var(--dtr-control-triangle_size) solid transparent;
70+
border-left: calc(var(--dtr-control-triangle_size) * 2) solid var(--dtr-control-triangle_color);
71+
border-bottom: var(--dtr-control-triangle_size) solid transparent;
6072
border-right: 0px solid transparent;
6173
}
6274
table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,
6375
table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,
6476
table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,
6577
table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {
66-
border-top: 5px solid transparent;
78+
border-top: var(--dtr-control-triangle_size) solid transparent;
6779
border-left: 0px solid transparent;
68-
border-bottom: 5px solid transparent;
69-
border-right: 10px solid rgba(0, 0, 0, 0.5);
80+
border-bottom: var(--dtr-control-triangle_size) solid transparent;
81+
border-right: calc(var(--dtr-control-triangle_size) * 2) solid var(--dtr-control-triangle_color);
7082
}
7183
table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,
7284
table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,
7385
table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,
7486
table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {
75-
border-top: 10px solid rgba(0, 0, 0, 0.5);
76-
border-left: 5px solid transparent;
87+
border-top: calc(var(--dtr-control-triangle_size) * 2) solid var(--dtr-control-triangle_color);
88+
border-left: var(--dtr-control-triangle_size) solid transparent;
7789
border-bottom: 0px solid transparent;
78-
border-right: 5px solid transparent;
79-
}
80-
table.dataTable > tbody > tr.child {
81-
padding: 0.5em 1em;
90+
border-right: var(--dtr-control-triangle_size) solid transparent;
8291
}
8392
table.dataTable > tbody > tr.child:hover {
8493
background: transparent !important;
8594
}
8695
table.dataTable > tbody > tr.child ul.dtr-details {
87-
display: inline-block;
96+
display: inline-grid;
97+
grid-template-columns: minmax(125px, 1fr) auto;
98+
gap: var(--dtr-details-list_gap);
8899
list-style-type: none;
89100
margin: 0;
90-
padding: 0;
101+
padding: var(--dtr-details-list_padding);
91102
}
92103
table.dataTable > tbody > tr.child ul.dtr-details > li {
93-
border-bottom: 1px solid #efefef;
94-
padding: 0.5em 0;
104+
display: contents;
95105
}
96106
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
97107
padding-top: 0;
@@ -102,7 +112,7 @@ table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
102112
}
103113
table.dataTable > tbody > tr.child span.dtr-title {
104114
display: inline-block;
105-
min-width: 75px;
115+
min-width: 125px;
106116
font-weight: bold;
107117
}
108118

@@ -129,10 +139,10 @@ div.dtr-modal div.dtr-modal-display {
129139
margin: auto;
130140
z-index: 102;
131141
overflow: auto;
132-
background-color: #f5f5f7;
133-
border: 1px solid black;
134-
border-radius: 0.5em;
135-
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
142+
background: var(--dtr-modal_background);
143+
border: var(--dtr-modal_border);
144+
border-radius: var(--dtr-modal_border-radius);
145+
box-shadow: var(--dtr-modal_box-shadow);
136146
}
137147
div.dtr-modal div.dtr-modal-content {
138148
position: relative;
@@ -159,36 +169,30 @@ div.dtr-modal div.dtr-modal-background {
159169
right: 0;
160170
bottom: 0;
161171
z-index: 101;
162-
background: rgba(0, 0, 0, 0.6);
172+
background: var(--dtr-modal-background_background);
163173
}
164174

165175
@media screen and (max-width: 767px) {
166176
div.dtr-modal div.dtr-modal-display {
167177
width: 95%;
168178
}
169179
}
170-
html.dark table.dataTable > tbody > tr > td.dtr-control:before,
171-
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control:before {
172-
border-left-color: rgba(255, 255, 255, 0.5) !important;
173-
}
174-
html.dark table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
175-
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control.arrow-right::before {
176-
border-right-color: rgba(255, 255, 255, 0.5) !important;
177-
}
178-
html.dark table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
179-
html.dark table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before,
180-
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
181-
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before {
182-
border-top-color: rgba(255, 255, 255, 0.5) !important;
183-
border-left-color: transparent !important;
184-
border-right-color: transparent !important;
185-
}
186-
html.dark table.dataTable > tbody > tr.child ul.dtr-details > li,
187-
html[data-bs-theme=dark] table.dataTable > tbody > tr.child ul.dtr-details > li {
188-
border-bottom-color: rgb(64, 67, 70);
189-
}
190-
html.dark div.dtr-modal div.dtr-modal-display,
191-
html[data-bs-theme=dark] div.dtr-modal div.dtr-modal-display {
192-
background-color: rgb(33, 37, 41);
193-
border: 1px solid rgba(255, 255, 255, 0.15);
180+
@media screen and (max-width: 567px) {
181+
table.dataTable > tbody > tr.child ul.dtr-details {
182+
display: block;
183+
padding: 0;
184+
}
185+
table.dataTable > tbody > tr.child ul.dtr-details > li {
186+
display: block;
187+
padding-bottom: var(--dtr-details-list_gap);
188+
}
189+
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
190+
padding-bottom: 0;
191+
}
192+
table.dataTable > tbody > tr.child ul.dtr-details > li span.dtr-title {
193+
display: block;
194+
}
195+
table.dataTable > tbody > tr.child ul.dtr-details > li span.dtr-data {
196+
display: block;
197+
}
194198
}

‎css/responsive.jqueryui.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)