1 @use './src/styles/vendor/variables' as vv;
2 @use './src/styles/defaults/mixins';
4 @mixin row-details-icon {
6 font-family: 'ForkAwesome', sans-serif;
13 // after bootstrap 8.0 the details table started to
14 // have an issue where the columns keep expanding to
16 // https://github.com/ceph/ceph/pull/40618#pullrequestreview-629010639
17 // making the max-width to 99.9% solves the issue as a temporary fix
18 // until we get a conclusive fix, this needs to be kept.
22 border-left: 1px solid vv.$datatable-divider-color;
23 display: inline-block;
27 vertical-align: middle;
31 border-left: 1px solid vv.$datatable-divider-color;
40 .dataTables_length > input {
47 background-color: vv.$gray-100;
48 border: 1px solid vv.$gray-400;
53 .cd-datatable-actions {
62 border-left: 1px solid vv.$datatable-divider-color;
74 .input-group.dataTables_paginate {
90 ::ng-deep cd-table .cd-datatable {
91 border: 1px solid vv.$gray-400;
93 max-width: none !important;
104 background-color: vv.$primary;
107 background-color: vv.$primary;
116 animation: progress-loading 3s linear infinite;
117 background-color: vv.$primary;
129 background-clip: padding-box;
130 background-color: vv.$gray-100;
131 background-image: linear-gradient(to bottom, vv.$gray-100 0, vv.$gray-200 100%);
132 background-repeat: repeat-x;
133 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
140 .datatable-header-cell {
141 @include mixins.table-cell;
146 .datatable-header-cell-label {
148 font-family: ForkAwesome;
154 vertical-align: baseline;
160 .datatable-header-cell-label::after {
165 &.sort-asc .datatable-header-cell-label::after {
169 &.sort-desc .datatable-header-cell-label::after {
185 background-color: lighten(vv.$primary, 45%);
193 .datatable-body-row {
194 &.clickable:hover .datatable-row-group {
195 background-color: lighten(vv.$primary, 45%);
196 transition-duration: 0.3s;
197 transition-property: background;
198 transition-timing-function: linear;
201 &.datatable-row-even {
202 background-color: vv.$white;
205 &.datatable-row-odd {
206 background-color: vv.$gray-100;
211 background-color: lighten(vv.$primary, 35%);
214 .datatable-body-cell {
215 @include mixins.table-cell;
221 .datatable-body-cell-label {
228 .datatable-row-detail {
229 border-bottom: 2px solid vv.$gray-400;
230 overflow-y: visible !important;
234 .expand-collapse-icon {
240 text-decoration: none;
244 .expand-collapse-icon-right::before {
245 @include row-details-icon;
249 .expand-collapse-icon-down::before {
250 @include row-details-icon;
260 padding-left: 0.3rem;
265 .cd-datatable-checkbox {
270 @keyframes progress-loading {