Corban-Lee
45322df5b6
Some checks failed
Build and Push Docker Image / build (push) Failing after 7m14s
214 lines
4.1 KiB
SCSS
214 lines
4.1 KiB
SCSS
|
|
// Table Search Bar
|
|
.table-search-group {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.25rem;
|
|
color: var(--bs-body-color);
|
|
background-color: var(--bs-body-bg);
|
|
overflow: hidden;
|
|
|
|
|
|
.table-search-label {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.375rem 0.75rem;
|
|
padding-right: 0;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
border: none;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
.table-search-input {
|
|
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
padding: 0.375rem 0.75rem;
|
|
appearance: none;
|
|
width: 1%;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
border: none;
|
|
border-radius: 0;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
background-clip: padding-box;
|
|
|
|
// Disable bootstrap's focus highlights
|
|
&:focus {
|
|
|
|
outline: 0;
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Badge popover
|
|
.table-badge-popover .popover-body {
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 1rem 0.5rem 0.5rem 1rem;
|
|
max-width: 200px;
|
|
|
|
}
|
|
|
|
// Table Button Controls
|
|
|
|
.table-button-controls > div {
|
|
|
|
margin-left: 1rem;
|
|
|
|
&:first-of-type { margin-left: 0 !important; }
|
|
|
|
@include media-breakpoint-down(md) { margin-left: 0.25rem; }
|
|
|
|
}
|
|
|
|
|
|
// Table
|
|
.table {
|
|
|
|
td, th { vertical-align: middle; }
|
|
th { text-wrap: nowrap; }
|
|
|
|
// Top & bottom border colours
|
|
border-color: var(--bs-border-color);
|
|
tr:first-child > *,
|
|
tr:last-child > * {
|
|
border-color: inherit !important;
|
|
}
|
|
|
|
// Selected rows
|
|
tr.selected {
|
|
|
|
> * {
|
|
|
|
color: var(--bs-body-color) !important;
|
|
box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
color: var(--bs-link-color) !important;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
thead { }
|
|
tbody { }
|
|
tfoot { }
|
|
|
|
// Custom column sizes
|
|
@mixin col-styles($min-width: null, $max-width: null) {
|
|
|
|
$max-width: if($max-width == null, $min-width, $max-width);
|
|
|
|
min-width: $min-width;
|
|
max-width: $max-width;
|
|
text-overflow: ellipsis;
|
|
text-wrap: nowrap;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
$col-check: 53px;
|
|
$col-label: 350px;
|
|
$col-url: 420px;
|
|
$col-date: 150px;
|
|
$col-switch: 100px;
|
|
$col-icon: 120px;
|
|
|
|
.col {
|
|
|
|
&-name { @include col-styles($col-label); }
|
|
&-url { @include col-styles($col-url, $col-url * 2); }
|
|
&-date { @include col-styles($col-date); }
|
|
&-checkbox { @include col-styles($col-check); }
|
|
&-switch { @include col-styles($col-switch); }
|
|
&-icon { text-align: center; @include col-styles($col-icon); }
|
|
&-icon-wide { text-align: center; @include col-styles($col-icon, $col-icon + 30px) }
|
|
&-hex {
|
|
text-align: center;
|
|
@include col-styles($col-icon);
|
|
|
|
.col-hex-icon {
|
|
margin: 0 auto;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// .table {
|
|
|
|
// // color: var(--bs-body-color);
|
|
|
|
// // // Empty table
|
|
// // .dt-empty {
|
|
|
|
// // padding: 2rem 0;
|
|
// // border-bottom: none;
|
|
|
|
// // }
|
|
|
|
// // Top & bottom border colour
|
|
// &.dataTable > thead > tr > th,
|
|
// &.dataTable > thead > tr > td {
|
|
|
|
// border-bottom: 1px solid var(--bs-border-color);
|
|
|
|
// }
|
|
|
|
// .dt-container.dt-empty-footer tbody > tr:last-child > * {
|
|
|
|
// border-bottom: 1px solid var(--bs-border-color);
|
|
|
|
// }
|
|
|
|
// // tr:hover > .dt-empty {
|
|
|
|
// // box-shadow: none !important;
|
|
|
|
// // }
|
|
|
|
// // tbody {
|
|
|
|
// // tr.selected > * {
|
|
|
|
// // color: var(--bs-body-color);
|
|
// // box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9);
|
|
|
|
// // }
|
|
|
|
// // }
|
|
|
|
// }
|
|
|