summaryrefslogtreecommitdiff
path: root/src/assets/styles/bmc/_sila/custom/_tables.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/assets/styles/bmc/_sila/custom/_tables.scss')
-rw-r--r--src/assets/styles/bmc/_sila/custom/_tables.scss409
1 files changed, 409 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/custom/_tables.scss b/src/assets/styles/bmc/_sila/custom/_tables.scss
new file mode 100644
index 00000000..23baf757
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/custom/_tables.scss
@@ -0,0 +1,409 @@
+.table {
+ position: relative;
+ z-index: $zindex-dropdown;
+ border-radius: 10px;
+
+ td {
+ vertical-align: middle;
+
+ // Table action buttons
+ .btn-link {
+ height: 20px;
+ border-radius: 2px;
+ padding: 4px !important;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ // thead-light added for specificity
+ .thead-light th {
+ text-align: left !important;
+ vertical-align: middle;
+ border-bottom: 1px solid gray("300");
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .status-icon svg {
+ width: 1.2rem;
+ height: auto;
+ }
+
+ .b-table-has-details {
+ td {
+ border-bottom: none;
+ }
+ .table-row-expand svg {
+ transform: rotate(180deg);
+ }
+ }
+
+ .b-table-details {
+ background-color: theme-color("light");
+ td {
+ padding: 0px 16px 16px 16px;
+ }
+ dl {
+ margin: 0;
+ }
+ dt {
+ float: left;
+ clear: left;
+ margin-right: $spacer / 2;
+ }
+ dd {
+ line-height: 1.2
+ }
+ }
+
+ .table-row-expand {
+ width: 50px;
+ .btn {
+ padding: 0;
+ width: 27px;
+ }
+ }
+ .b-table-sort-icon-left {
+ padding-left: calc(1.2rem + 0.65em) !important;
+ &:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+ }
+ &:hover {
+ background-color: theme-color-dark('light');
+ }
+ }
+}
+
+.b-table-sticky-header td {
+ border-top: none;
+}
+
+// Table stacked style for small screen only
+@include media-breakpoint-down(xs) {
+ .b-table-stacked-sm {
+ border: 1px solid gray("300");
+
+ tr {
+
+ &:not(:first-child) > td[aria-colindex='1'] {
+ padding-top: 0.625rem;
+ }
+
+ &:not(.b-table-empty-row) {
+ position: relative; // Restrict background color to get zebra striping for the row
+
+ &::before,
+ &::after {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ z-index: -1;
+ }
+
+ &:before {
+ content: '';
+ background-color: gray("200");
+ width: 40%;
+ border-right: 1px solid gray("300");
+ }
+
+ &:after {
+ content: '';
+ right: 0;
+ width: 60%;
+ }
+
+ &:nth-child(even)::after {
+ background-color: gray("100"); // Zebra striping for the row
+ }
+ }
+
+ td {
+ border: 0;
+ padding: 0.75rem;
+ text-align: left !important;
+
+ &:last-of-type {
+ border-right: 0;
+ }
+ }
+ }
+ }
+
+ .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+ &::before {
+ text-align: left;
+ padding-left: $spacer /2;
+ }
+
+ > div {
+ padding-left: 1rem;
+ }
+ }
+}
+
+.b-table-details > td {
+ padding: 0px !important;
+}
+
+.indicators-Critical {
+ color: $indicators-errors !important;
+}
+
+.indicators-Warning {
+ color: $indicators-warning !important;
+}
+
+.indicators-OK {
+ color: $indicators-succes !important;
+}
+
+.bootstrap-table__section {
+ position: relative;
+ margin: 16px 2rem 24px 2rem;
+ width: 90%;
+}
+// 1 //
+.bootstrap-table {
+ border-top: none !important;
+ border: 1px solid rgba(26, 62, 91, 0.1);
+ background-color: $faint-secondary-primary-5;
+}
+
+// style for rounded tables
+// add style for page ID
+#page-inventory table,
+#page-system-network table,
+#page-network table,
+#page-bmc-settings table,
+#page-memory-specification table,
+#page-processors table,
+// add style for class
+#main-content .table-rounded {
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(26, 62, 91, 0.3);
+ background-color: none;
+
+ tr {
+ border-radius: 10px 10px 0 0;
+ -webkit-border-radius: 10px 10px 0 0;
+ -moz-border-radius: 10px 10px 0 0;
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: $text-primary;
+ &:hover {
+ background-color: $faint-secondary-primary-2-hover;
+ }
+ &.b-table-details:hover {
+ background-color: transparent;
+ }
+ }
+
+ th {
+ border-top: none;
+ border-bottom: none;
+ text-transform: uppercase;
+ border-left: 1px solid rgba(26, 62, 91, 0.3);
+ background-color: $faint-secondary-primary-10 !important;
+ color: $text-primary !important;
+ &:first-child {
+ border-left: none;
+ border-radius: 10px 0 0 0;
+ }
+ &:last-child {
+ border-right: none;
+ border-radius: 0 10px 0 0;
+ }
+ }
+
+ td {
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: $text-secondary;
+ }
+}
+.table-network__icon {
+ max-width: 20%;
+ margin: 0 5px 0 auto !important;
+}
+
+// stripes table //
+#main-content .table-stripes {
+ border-top: none !important;
+ border: 1px solid rgba(26, 62, 91, 0.1);
+ background-color: $faint-secondary-primary-5;
+ tr:nth-of-type(even) {
+ background-color: rgb(255 255 255);
+ }
+ th {
+ border-top: none;
+ display: none;
+ &:first-child {
+ border-top: none;
+ }
+ &:last-child {
+ border-top: none;
+ }
+ }
+
+ td {
+ border-top: 1px solid rgba(26, 62, 91, 0.1);
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: $text-secondary;
+ &:first-child {
+ width: 70%;
+ }
+ &:first-child {
+ border-right: 1px solid rgba(26, 62, 91, 0.1);
+ }
+ .col > .custom-switch {
+ padding-top: 5px;
+ margin: -10px 0 0 auto;
+ }
+ }
+}
+
+// table accessory //
+#main-content .table-accessory,
+#main-content .table-firmware {
+
+ th {
+ // padding: 10px 5px !important;
+ background-color: transparent !important;
+ color: $text-primary !important;
+ border-top: none !important;
+ border-bottom: 1px solid $faint-secondary-primary-10;
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ }
+
+ td {
+ padding: 5px !important;
+ border-top: none !important;
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: $text-secondary;
+ }
+}
+#main-content .table-accessory{
+ th {
+ padding: 10px 5px !important;
+ }
+}
+.bootstrap-table__section
+ .table.b-table
+ > thead
+ > tr
+ > [aria-sort='ascending'] {
+ background-image: url('~@/assets/images/_sila/event-logs/sort-icon-rotate.svg');
+}
+
+.bootstrap-table__section
+ .table.b-table
+ > thead
+ > tr
+ > [aria-sort='descending'],
+.table.b-table > thead > tr > [aria-sort='none'] {
+ background-image: url('~@/assets/images/_sila/event-logs/sort-icon.svg');
+}
+
+// table analytical //
+#main-content .table-analytical {
+ border: 1px solid rgba(26, 62, 91, 0.3);
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ tr {
+ border-top: none !important;
+ border-radius: 0 0 0 0;
+ -webkit-border-radius: 0 0 0 0;
+ -moz-border-radius: 0 0 0 0;
+ &:hover {
+ background-color: $faint-secondary-primary-2-hover;
+ }
+ &.b-table-details:hover {
+ background-color: transparent;
+ }
+ }
+
+ th {
+ border-top: none !important;
+ border-bottom: 1px solid rgba(26, 62, 91, 0.3) !important;
+ background-color: $white !important;
+ color: $text-primary !important;
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ text-transform: uppercase;
+ color: $text-primary;
+ &:first-child {
+ border-radius: 4px 0 0 0;
+ -webkit-border-radius: 4px 0 0 0;
+ -moz-border-radius: 4px 0 0 0;
+ }
+ &:last-child {
+ border-radius: 0 4px 0 0;
+ -webkit-border-radius: 0 4px 0 0;
+ -moz-border-radius: 0 4px 0 0;
+ }
+ }
+
+ td {
+ border-top: none !important;
+ padding: 10px !important;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ // font styles
+ font-family: 'Inter', sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: $text-secondary;
+ }
+}
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-26 18:04:30 +0300