Bug 36640: (follow-up) CSS fixes for DataTables controls
This patch adds CSS fixes to try to keep styling of DataTables and related controls consistent with how it looked before the upgrade. This version of DataTables introduced a lot of usage of "!important" in the CSS which severly limited our options. For that reason I modified the file to remove all of those instances. Both the minified and unminified versions are changed. This patch continues the pre-upgrade practice of picking only the relevant DataTables CSS and including it in our CSS build. This means a smaller total CSS download for the user and eliminates the "!important" problem. Signed-off-by: Jake Deery <jake.deery@ptfs-europe.com> Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
parent
41fb29f98b
commit
e0193051e1
GPG key ID:
0EF6E2C03357A834
5 changed files with 618 additions and 544 deletions
|
|
@ -62,7 +62,7 @@ function css(css_base) {
|
|||
.pipe(rename({
|
||||
suffix: '-rtl'
|
||||
})) // Append "-rtl" to the filename.
|
||||
.pipe(dest(css_base, { sourcemaps: "/maps" } ));
|
||||
.pipe(dest(css_base, { sourcemaps: "./maps" } ));
|
||||
}
|
||||
|
||||
return stream;
|
||||
|
|
|
|||
|
|
@ -67,17 +67,17 @@ div.dt-scroll-body tfoot tr {
|
|||
div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
|
||||
div.dt-scroll-body tfoot tr th,
|
||||
div.dt-scroll-body tfoot tr td {
|
||||
height: 0 !important;
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
border-top-width: 0px !important;
|
||||
border-bottom-width: 0px !important;
|
||||
height: 0;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
border-top-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
|
||||
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
|
||||
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th:active,
|
||||
|
|
@ -426,8 +426,8 @@ table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody >
|
|||
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035);
|
||||
}
|
||||
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
|
||||
box-shadow: inset 0 0 0 9999px #0d6efd !important;
|
||||
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
|
||||
box-shadow: inset 0 0 0 9999px #0d6efd;
|
||||
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1);
|
||||
}
|
||||
table.dataTable.order-column > tbody tr > .sorting_1,
|
||||
table.dataTable.order-column > tbody tr > .sorting_2,
|
||||
|
|
@ -582,7 +582,7 @@ div.dt-container div.dt-layout-full > *:only-child {
|
|||
margin-right: auto;
|
||||
}
|
||||
div.dt-container div.dt-layout-table > div {
|
||||
display: block !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
|
@ -625,15 +625,15 @@ div.dt-container .dt-paging .dt-paging-button {
|
|||
padding: 0.5em 1em;
|
||||
margin-left: 2px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: inherit !important;
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
}
|
||||
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
|
||||
color: inherit !important;
|
||||
color: inherit;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.05))); /* Chrome,Safari4+ */
|
||||
|
|
@ -645,13 +645,13 @@ div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-pagi
|
|||
}
|
||||
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
|
||||
cursor: default;
|
||||
color: rgba(0, 0, 0, 0.5) !important;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
div.dt-container .dt-paging .dt-paging-button:hover {
|
||||
color: white !important;
|
||||
color: white;
|
||||
border: 1px solid #111;
|
||||
background-color: #111;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111)); /* Chrome,Safari4+ */
|
||||
|
|
@ -696,8 +696,8 @@ div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td
|
|||
div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td > div.dataTables_sizing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div.dt-container.dt-empty-footer tbody > tr:last-child > * {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -758,7 +758,7 @@ html.dark .dt-container .dt-paging .dt-paging-button.current, html.dark .dt-cont
|
|||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
html.dark .dt-container .dt-paging .dt-paging-button.disabled, html.dark .dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark .dt-container .dt-paging .dt-paging-button.disabled:active {
|
||||
color: #666 !important;
|
||||
color: #666;
|
||||
}
|
||||
html.dark .dt-container .dt-paging .dt-paging-button:hover {
|
||||
border: 1px solid rgb(53, 53, 53);
|
||||
|
|
@ -871,7 +871,7 @@ div.dtb-popover-close {
|
|||
}
|
||||
|
||||
button.dtb-hide-drop {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.dt-button-collection-title {
|
||||
|
|
@ -963,7 +963,7 @@ div.dt-button-collection span.dt-button-spacer.bar {
|
|||
|
||||
@media print {
|
||||
table.dataTable tr > * {
|
||||
box-shadow: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
html.dark div.dt-button-info {
|
||||
|
|
@ -1191,7 +1191,7 @@ div.dt-button-collection.fixed > :last-child {
|
|||
overflow: auto;
|
||||
}
|
||||
div.dt-button-collection.two-column > :last-child, div.dt-button-collection.three-column > :last-child, div.dt-button-collection.four-column > :last-child {
|
||||
display: block !important;
|
||||
display: block;
|
||||
-webkit-column-gap: 8px;
|
||||
-moz-column-gap: 8px;
|
||||
-ms-column-gap: 8px;
|
||||
|
|
@ -1311,7 +1311,7 @@ div.dt-button-background {
|
|||
|
||||
@media screen and (max-width: 640px) {
|
||||
div.dt-buttons {
|
||||
float: none !important;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1356,7 +1356,7 @@ html.dark div.dt-button-collection {
|
|||
|
||||
table.fixedHeader-floating,
|
||||
table.fixedHeader-locked {
|
||||
position: relative !important;
|
||||
position: relative;
|
||||
background-color: var(--dt-html-background);
|
||||
background-color: var(--dt-html-background);
|
||||
}
|
||||
|
|
@ -1371,12 +1371,12 @@ table.fixedHeader-locked {
|
|||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
cursor: default;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
|
||||
|
|
@ -1451,7 +1451,7 @@ table.dataTable > tbody > tr.child {
|
|||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
background: transparent;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul.dtr-details {
|
||||
display: inline-block;
|
||||
|
|
@ -1539,19 +1539,19 @@ div.dtr-modal div.dtr-modal-background {
|
|||
}
|
||||
html.dark table.dataTable > tbody > tr > td.dtr-control:before,
|
||||
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control:before {
|
||||
border-left-color: rgba(255, 255, 255, 0.5) !important;
|
||||
border-left-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
html.dark table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
|
||||
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control.arrow-right::before {
|
||||
border-right-color: rgba(255, 255, 255, 0.5) !important;
|
||||
border-right-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
html.dark table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
|
||||
html.dark table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before,
|
||||
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
|
||||
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before {
|
||||
border-top-color: rgba(255, 255, 255, 0.5) !important;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
html.dark table.dataTable > tbody > tr.child ul.dtr-details > li,
|
||||
html[data-bs-theme=dark] table.dataTable > tbody > tr.child ul.dtr-details > li {
|
||||
|
|
@ -1623,14 +1623,14 @@ div.dt-rowReorder-float-parent {
|
|||
table-layout: fixed;
|
||||
outline: 2px solid rgb(10, 89, 203);
|
||||
z-index: 2001;
|
||||
position: absolute !important;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
div.dt-rowReorder-float-parent table.dt-rowReorder-float {
|
||||
opacity: 0.9;
|
||||
background-color: white;
|
||||
margin: 0 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.dt-rowReorder-float-parent.drop-not-allowed {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -77,7 +77,7 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
+ table {
|
||||
+table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -113,58 +113,57 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
& > tr {
|
||||
th {
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
|
||||
&.sorting {
|
||||
position: static;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
&.dt-type-date,
|
||||
&.dt-type-numeric {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.sorting_asc {
|
||||
&::after,
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
&.dt-orderable-asc span.dt-column-order,
|
||||
&.dt-orderable-desc span.dt-column-order,
|
||||
&.dt-ordering-asc span.dt-column-order,
|
||||
&.dt-ordering-desc span.dt-column-order {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll right center $table-header-background;
|
||||
padding-right: 22px;
|
||||
|
||||
&.fixed_sort {
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L3N2Zz4=" ) no-repeat scroll right center $table-header-background;
|
||||
cursor: default;
|
||||
}
|
||||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-ordering-asc span.dt-column-order::before {
|
||||
content: "\f0d8";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 1rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
|
||||
&.sorting_desc {
|
||||
&::after,
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll right center $table-header-background;
|
||||
padding-right: 22px;
|
||||
|
||||
&.fixed_sort {
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iOS4wMSIgdmlld0JveD0iMCAwIDYgMi4zODQiPjxwYXRoIGZpbGw9IiM5NDk0OTQiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvc3ZnPg==" ) no-repeat scroll right center $table-header-background;
|
||||
cursor: default;
|
||||
}
|
||||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-orderable-desc span.dt-column-order::after,
|
||||
&.dt-orderable-desc span.dt-column-order::after {
|
||||
color: #000;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
&.sorting:not(.sorting_asc):not(.sorting_desc) {
|
||||
&::after,
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
&.dt-orderable-desc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
content: "\f0d7";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 1rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll right center $table-header-background;
|
||||
padding-right: 22px;
|
||||
&.dt-ordering-asc span.dt-column-order::before,
|
||||
&.dt-ordering-asc span.dt-column-order::before,
|
||||
&.dt-ordering-desc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
color: $green-text-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -369,7 +368,7 @@ tr {
|
|||
tr {
|
||||
&:hover {
|
||||
td {
|
||||
background-color: #FFFF99 !important;
|
||||
background-color: #FFFF99;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -392,14 +391,18 @@ caption {
|
|||
|
||||
.highlighted-row,
|
||||
.highlighted-row td {
|
||||
background-color: #FFD000 !important;
|
||||
background-color: #FFD000;
|
||||
}
|
||||
|
||||
.warned-row,
|
||||
.warned-row td { background-color: #FF9000 !important; }
|
||||
.warned-row td {
|
||||
background-color: #FF9000;
|
||||
}
|
||||
|
||||
.high-warned-row,
|
||||
.high-warned-row td { background-color: #FF0000 !important; }
|
||||
.high-warned-row td {
|
||||
background-color: #FF0000;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
|
|
@ -423,391 +426,207 @@ tbody {
|
|||
}
|
||||
}
|
||||
|
||||
.dt-container {
|
||||
.dt-processing {
|
||||
background-color: #F4F8F9;
|
||||
border: 2px solid $background-color-primary;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 3px 1px rgba( 0, 0, 0, .2 );
|
||||
color: #333;
|
||||
height: unset;
|
||||
left: 50%;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
div {
|
||||
&.dt-container {
|
||||
.dt-processing {
|
||||
background-color: #F4F8F9;
|
||||
border: 2px solid $background-color-primary;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 3px 1px rgba( 0, 0, 0, .2 );
|
||||
color: #333;
|
||||
height: unset;
|
||||
left: 50%;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
|
||||
& > div {
|
||||
&:last-child {
|
||||
& > div {
|
||||
background: $background-color-secondary;
|
||||
& > div {
|
||||
&:last-child {
|
||||
& > div {
|
||||
background: $background-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-info {
|
||||
float: none;
|
||||
line-height: 1.9em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dt-length {
|
||||
display: none;
|
||||
float: none;
|
||||
line-height: 1.5em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.dt-input {
|
||||
float: none;
|
||||
padding-right: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
padding: 1px 2px;
|
||||
.dt-info {
|
||||
float: none;
|
||||
line-height: 1.9em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dt-buttons {
|
||||
display: flex;
|
||||
}
|
||||
.dt-length {
|
||||
display: none;
|
||||
float: none;
|
||||
line-height: 1.5em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.dt-paging {
|
||||
float: none;
|
||||
line-height: 1.5em;
|
||||
padding: 0;
|
||||
padding-right: 1em;
|
||||
.dt-input {
|
||||
float: none;
|
||||
padding-right: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
.dt-paging-button,
|
||||
.ellipsis {
|
||||
display: none;
|
||||
input {
|
||||
border-radius: 0;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.dt-paging-button {
|
||||
border-radius: 4px;
|
||||
color: $green-text-color !important;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
.dt-buttons {
|
||||
display: flex;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
> .dt-button {
|
||||
background: transparent none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
color: darken( $green-text-color, 5 ) !important;
|
||||
text-decoration: underline !important;
|
||||
font-size: .9rem;
|
||||
padding: .3rem .5rem;
|
||||
|
||||
&:hover:not( .disabled ) {
|
||||
background: #EEE none;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-paging {
|
||||
float: none;
|
||||
line-height: 1.5em;
|
||||
padding: 0;
|
||||
padding-right: 1em;
|
||||
|
||||
span {
|
||||
.dt-paging-button,
|
||||
.ellipsis {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: lighten( saturate( $background-color-secondary, 7 ), 37 ) none;
|
||||
border: 0;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
.dt-paging-button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
color: $green-text-color;
|
||||
padding: .2em 1em .5em 1em;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: lighten( saturate( $background-color-secondary, 7 ), 45 ) none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.first,
|
||||
&.previous,
|
||||
&.next,
|
||||
&.last {
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.first {
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
content: "\f100";
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.previous {
|
||||
&::before {
|
||||
content: "\f104";
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
&::after {
|
||||
content: "\f105";
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.last {
|
||||
display: none;
|
||||
|
||||
&::after {
|
||||
content: "\f101";
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-info {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.dt-info + .pager {
|
||||
border-top: 1px solid $table-border-color;
|
||||
margin-top: .3em;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 90%;
|
||||
|
||||
&.top {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
div.dt-buttons {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
button.dt_button_clear_filter {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="search"] {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
} /* /.pager */
|
||||
|
||||
.dt-buttons {
|
||||
button,
|
||||
div,
|
||||
a {
|
||||
&.dt-button {
|
||||
background: transparent none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
line-height: 1.7em;
|
||||
margin: 0 3px 0;
|
||||
padding: 0 .5em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: transparent none;
|
||||
border: 1px solid transparent;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid #ADADAD;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
background: transparent none;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not( .disabled ),
|
||||
&:focus:not( .disabled ) {
|
||||
background: transparent none;
|
||||
border: 1px solid #ADADAD;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
|
||||
&:not( .disabled ):hover:not( .disabled ) {
|
||||
background: #EEE none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
color: darken( $green-text-color, 5 );
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: transparent none;
|
||||
border: 0;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: transparent none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&.first,
|
||||
&.previous,
|
||||
&.next,
|
||||
&.last {
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.first {
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
content: "\f100";
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.previous {
|
||||
&::before {
|
||||
content: "\f104";
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
&::after {
|
||||
content: "\f105";
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.last {
|
||||
display: none;
|
||||
|
||||
&::after {
|
||||
content: "\f101";
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent none;
|
||||
border: 1px solid transparent;
|
||||
.dt-search {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:not( .disabled ) {
|
||||
.dt-button-collection {
|
||||
width: auto;
|
||||
|
||||
.dt-button {
|
||||
&.buttons-columnVisibility {
|
||||
display: flex;
|
||||
|
||||
> span {
|
||||
border: 1px solid transparent;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #EEE none;
|
||||
}
|
||||
}
|
||||
|
||||
&.active:not( .disabled ):hover:not( .disabled ) {
|
||||
background: #EEE none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toptabs {
|
||||
.pager {
|
||||
margin: 0;
|
||||
padding-bottom: .7em;
|
||||
padding-top: .7em;
|
||||
|
||||
&.bottom {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter_column {
|
||||
& > input {
|
||||
&[type="text"] {
|
||||
border: 0;
|
||||
color: #999;
|
||||
font-size: 85%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.dt-button-collection {
|
||||
padding: 8px 8px 4px 8px;
|
||||
width: auto;
|
||||
|
||||
button {
|
||||
&.dt-button {
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
border: 1px solid #EEE;
|
||||
}
|
||||
|
||||
&.buttons-collection {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.buttons-columnVisibility {
|
||||
background: #FFF none;
|
||||
border: 1px solid #EEE;
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
margin: 0 0 4px 0;
|
||||
padding: .3em .7em;
|
||||
text-shadow: none;
|
||||
|
||||
&::after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: #CC0000;
|
||||
content: "\f00d";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #FFC none;
|
||||
border: 1px solid #999;
|
||||
box-shadow: none;
|
||||
|
||||
&::before {
|
||||
color: #538200;
|
||||
content: "\f00c";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not( .disabled ):hover:not( .disabled ) {
|
||||
background: transparent none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.dt-button-active {
|
||||
background: #E6F0F2 none;
|
||||
border-color: #999;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: #FFC none;
|
||||
|
||||
&::before {
|
||||
color: #CC0000;
|
||||
content: "\f00d";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&:not( .disabled ):hover:not( .disabled ) {
|
||||
background: transparent none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: #538200;
|
||||
content: "\f00c";
|
||||
display: inline-block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: .5em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.buttons-csv,
|
||||
&.buttons-excel,
|
||||
&.buttons-html5,
|
||||
&.buttons-print {
|
||||
background: #FFF none;
|
||||
border: 1px solid #EEE;
|
||||
box-shadow: none;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 4px 0;
|
||||
padding: .3em .7em;
|
||||
padding: .5em .7em;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: #FFC none;
|
||||
background: #EEE none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -841,6 +660,85 @@ div {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-button-active::after {
|
||||
color: $green-text-color;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-top: unset;
|
||||
padding-left: 1em;
|
||||
position: relative;
|
||||
right: unset;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dt-button-down-arrow {
|
||||
color: #787878;
|
||||
font-size: 90%;
|
||||
padding-left: .3rem;
|
||||
}
|
||||
|
||||
.dt-info {
|
||||
margin-top: .5em;
|
||||
|
||||
& + .pager {
|
||||
border-top: 1px solid $table-border-color;
|
||||
margin-top: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 90%;
|
||||
|
||||
&.top {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input {
|
||||
&[type="search"] {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toptabs {
|
||||
.pager {
|
||||
margin: 0;
|
||||
padding-bottom: .7em;
|
||||
padding-top: .7em;
|
||||
|
||||
&.bottom {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter_column {
|
||||
& > input {
|
||||
&[type="text"] {
|
||||
border: 0;
|
||||
color: #999;
|
||||
font-size: 85%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -863,12 +761,14 @@ div {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.dt-container {
|
||||
.dt-paging {
|
||||
.dt-paging-button {
|
||||
&.first,
|
||||
&.last {
|
||||
display: inline-block;
|
||||
div {
|
||||
.dt-container {
|
||||
.dt-paging {
|
||||
.dt-paging-button {
|
||||
&.first,
|
||||
&.last {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -876,23 +776,23 @@ div {
|
|||
}
|
||||
|
||||
@media only screen and ( min-width: 500px ) {
|
||||
.dt-container {
|
||||
.dt-length {
|
||||
display: block;
|
||||
div {
|
||||
.dt-container {
|
||||
.dt-length {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 850px ) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: 767px ) {
|
||||
.dt-container {
|
||||
.dt-info,
|
||||
.dt-paging {
|
||||
float: none;
|
||||
text-align: left;
|
||||
div {
|
||||
.dt-container {
|
||||
.dt-info,
|
||||
.dt-paging {
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -913,13 +813,15 @@ div {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
.dt-container {
|
||||
.dt-paging {
|
||||
span {
|
||||
.dt-paging-button,
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
@media only screen and ( min-width: 1500px ) {
|
||||
div {
|
||||
.dt-container {
|
||||
.dt-paging {
|
||||
span {
|
||||
.dt-paging-button,
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -545,61 +545,279 @@ div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before
|
|||
}
|
||||
|
||||
table {
|
||||
&.dataTable {
|
||||
&.dtr-column {
|
||||
tbody {
|
||||
tr {
|
||||
td,
|
||||
th {
|
||||
&.dtr-control {
|
||||
min-width: 4em;
|
||||
padding: 0;
|
||||
th
|
||||
td {
|
||||
line-height: 135%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #E1E1E1;
|
||||
background-image: linear-gradient( 180deg, #EBEBEB, #E1E1E1 );
|
||||
border: 1px solid #B3B3B3;
|
||||
border-radius: .25rem;
|
||||
box-shadow: none;
|
||||
color: #000;
|
||||
content: "\2b";
|
||||
font-family: FontAwesome;
|
||||
font-size: 1em;
|
||||
font-style: normal;
|
||||
height: 1em;
|
||||
left: 35%;
|
||||
padding: .5rem;
|
||||
width: 1em;
|
||||
}
|
||||
th {
|
||||
background-color: #E2E8E8;
|
||||
}
|
||||
|
||||
&.dataTable {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
&.dt-orderable-asc span.dt-column-order,
|
||||
&.dt-orderable-desc span.dt-column-order,
|
||||
&.dt-ordering-asc span.dt-column-order,
|
||||
&.dt-ordering-desc span.dt-column-order {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 40%;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-ordering-asc span.dt-column-order::before,
|
||||
&.dt-orderable-desc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
display: block;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 1rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
|
||||
&.dt-ordering-asc span.dt-column-order::before
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
color: #006100;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.dt-orderable-asc span.dt-column-order::before,
|
||||
&.dt-ordering-asc span.dt-column-order::before {
|
||||
content: "\f0d8"; /* fa-cart-up */
|
||||
}
|
||||
|
||||
&.dt-orderable-desc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
content: "\f0d7"; /* fa-cart-down */
|
||||
}
|
||||
|
||||
&.dt-orderable-asc,
|
||||
&.dt-orderable-desc,
|
||||
&.dt-ordering-asc,
|
||||
&.dt-ordering-desc {
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span.dt-column-order::before,
|
||||
span.dt-column-order::after {
|
||||
color: #548300;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
&.dt-orderable-asc,
|
||||
&.dt-orderable-desc {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
outline: 2px solid rgba(0, 0, 0, .05);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.parent {
|
||||
td,
|
||||
th {
|
||||
&.dtr-control {
|
||||
&::before {
|
||||
background-color: #E1E1E1;
|
||||
background-image: linear-gradient( 180deg, #EBEBEB, #E1E1E1 );
|
||||
border: 1px solid #B3B3B3;
|
||||
border-radius: .25rem;
|
||||
box-shadow: none;
|
||||
color: #000;
|
||||
content: "\2d";
|
||||
font-family: FontAwesome;
|
||||
font-size: 1em;
|
||||
font-style: normal;
|
||||
height: 1em;
|
||||
left: 35%;
|
||||
padding: .5rem;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.dt-ordering-asc span.dt-column-order::after,
|
||||
&.dt-ordering-desc span.dt-column-order::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.dt-ordering-asc span.dt-column-order::before,
|
||||
&.dt-ordering-desc span.dt-column-order::after {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
&.sorting_desc_disabled span.dt-column-order::after,
|
||||
&.sorting_asc_disabled span.dt-column-order::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dtr-inline {
|
||||
&.collapsed {
|
||||
& > tbody {
|
||||
& > tr {
|
||||
& > td.child,
|
||||
& > td.dataTables_empty {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& > td.child::before,
|
||||
& > th.child::before,
|
||||
& > td.dataTables_empty::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > td.dtr-control,
|
||||
& > th.dtr-control {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > td.dtr-control::before,
|
||||
& > th.dtr-control::before {
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 20px solid rgba(0, 0, 0, .5);
|
||||
border-right: 0px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
& > td.dtr-control.arrow-right::before,
|
||||
& > th.dtr-control.arrow-right::before {
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 0px solid transparent;
|
||||
border-right: 20px solid rgba(0, 0, 0, .5);
|
||||
border-top: 10px solid transparent;
|
||||
}
|
||||
|
||||
&.dtr-expanded > td.dtr-control::before,
|
||||
&.dtr-expanded > th.dtr-control::before {
|
||||
border-bottom: 0px solid transparent;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 20px solid rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
&.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
|
||||
&.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
|
||||
padding-left: .333em;
|
||||
}
|
||||
|
||||
&.dtr-column {
|
||||
& > tbody {
|
||||
& > tr {
|
||||
& > td.dtr-control,
|
||||
& > th.dtr-control,
|
||||
& > td.control,
|
||||
& > th.control {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > td.dtr-control::before,
|
||||
& > th.dtr-control::before,
|
||||
& > td.control::before,
|
||||
& > th.control::before {
|
||||
--bs-btn-padding-x: .75rem;
|
||||
--bs-btn-padding-y: .375rem;
|
||||
--bs-btn-font-family: ;
|
||||
--bs-btn-font-size: 1rem;
|
||||
--bs-btn-font-weight: 400;
|
||||
--bs-btn-line-height: 1.5;
|
||||
--bs-btn-color: var(--bs-body-color);
|
||||
--bs-btn-bg: transparent;
|
||||
--bs-btn-border-width: var(--bs-border-width);
|
||||
--bs-btn-border-color: transparent;
|
||||
--bs-btn-border-radius: var(--bs-border-radius);
|
||||
--bs-btn-hover-border-color: transparent;
|
||||
--bs-btn-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 1px 1px rgba( 0, 0, 0, .075 );
|
||||
--bs-btn-disabled-opacity: .65;
|
||||
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba( var( --bs-btn-focus-shadow-rgb ), .5 );
|
||||
|
||||
background-color: #548300;
|
||||
border: 1px solid #335000;
|
||||
border-radius: var(--bs-btn-border-radius);
|
||||
color: #FFF;
|
||||
content: "+";
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: var(--bs-btn-font-family);
|
||||
font-size: var(--bs-btn-font-size);
|
||||
font-weight: bold;
|
||||
line-height: var(--bs-btn-line-height);
|
||||
margin: 1em;
|
||||
padding: .2rem .7rem;
|
||||
text-align: center;
|
||||
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& > td.dtr-control:hover::before,
|
||||
& > th.dtr-control:hover::before,
|
||||
& > td.control:hover::before,
|
||||
& > th.control:hover::before,
|
||||
& > td.dtr-control:active::before,
|
||||
& > th.dtr-control:active::before,
|
||||
& > td.control:active::before,
|
||||
& > th.control:active::before {
|
||||
background-color: #548300;
|
||||
border-color: #649d00;
|
||||
box-shadow: 0 0 0 1px #619700;
|
||||
}
|
||||
|
||||
& > td.dtr-control.arrow-right::before,
|
||||
& > th.dtr-control.arrow-right::before,
|
||||
& > td.control.arrow-right::before,
|
||||
& > th.control.arrow-right::before {
|
||||
border: 2px solid rgba( 0, 0, 0, .5 );
|
||||
border-bottom: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
|
||||
&.dtr-expanded td.dtr-control::before,
|
||||
&.dtr-expanded th.dtr-control::before,
|
||||
&.dtr-expanded td.control::before,
|
||||
&.dtr-expanded th.control::before {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr.child {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
& > tbody > tr.child:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& > tbody > tr.child ul.dtr-details {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr.child ul.dtr-details > li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
& > tbody > tr.child ul.dtr-details > li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr.child ul.dtr-details > li:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -646,6 +864,12 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
th {
|
||||
background-color: #E2E8E8;
|
||||
}
|
||||
}
|
||||
|
||||
.table_controls {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -685,41 +909,6 @@ table {
|
|||
vertical-align: 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
&.dataTable {
|
||||
thead {
|
||||
.sorting_asc {
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8;
|
||||
padding-right: 19px;
|
||||
}
|
||||
|
||||
.sorting_desc {
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8;
|
||||
padding-right: 19px;
|
||||
}
|
||||
|
||||
.sorting {
|
||||
background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8;
|
||||
padding-right: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nosort,
|
||||
.nosort.sorting_asc,
|
||||
.nosort.sorting_desc,
|
||||
.nosort.sorting,
|
||||
.sorting_disabled {
|
||||
background: #E2E8E8 none;
|
||||
padding-right: 19px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
line-height: 135%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bootstrap Tabs */
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue