diff options
Diffstat (limited to 'src/assets/styles/bmc/_sila/_tables.scss')
-rw-r--r-- | src/assets/styles/bmc/_sila/_tables.scss | 59 |
1 files changed, 38 insertions, 21 deletions
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index e8b5a832..d73bfdde 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -3,16 +3,18 @@ z-index: $zindex-dropdown; td { - border-top: 1px solid gray("300"); - border-bottom: 1px solid gray("300"); + border-top: 1px solid $gray-10; + border-right: 1px solid $gray-10; + border-bottom-width: 0px; &:first-of-type { - border-left: 1px solid gray("300"); + border-right: 1px solid $gray-10; } &:last-of-type { - border-right: 1px solid gray("300"); + border-left: 1px solid $gray-10; + border-right-width: 0px; } vertical-align: middle; - + font-size: 0.875rem; // Table action buttons .btn-link { width: 40px; @@ -26,19 +28,30 @@ // thead-light added for specificity .thead-light th { + background-color: $surface-secondary; vertical-align: middle; - border-top: 1px solid gray("300"); - border-bottom: 1px solid gray("300"); + border-top-width: 0px; + border-bottom: 1px solid $gray-10; + border-right: 1px solid $gray-10; &:first-of-type { - border-left: 1px solid gray("300"); + border-right: 1px solid $gray-10; } &:last-of-type { - border-right: 1px solid gray("300"); + border-left: 1px solid $gray-10; + border-right-width: 0px; } - color: theme-color("dark"); + text-transform: uppercase; + color: $text-primary; &:focus { outline: none; } + & > div { + font-size: 0.875rem !important; + } + } + + .custom-switch { + width: 100%; } .status-icon svg { @@ -56,21 +69,24 @@ } .b-table-details { - background-color: theme-color("light"); + border-top: 1px solid rgba(26,62,91,.3); + background-color: inherit; td { - padding-left: calc(50px + (#{$table-cell-padding} * 2)); - padding-right: calc(50px + (#{$table-cell-padding} * 2)); + padding-left: $table-cell-padding; + padding-right: $table-cell-padding; } dl { margin: 0; } dt { + font-size: 0.75rem !important; float: left; clear: left; margin-right: $spacer / 2; } dd { - line-height: 1.2 + font-size: 0.75rem !important; + line-height: 1.5 } } @@ -78,12 +94,13 @@ width: 50px; .btn { padding: 0; - width: 50px; + width: 40px; } svg { fill: theme-color("dark"); } } + .b-table-sort-icon-left { background-position: left calc(1.5rem / 2) center !important; padding-left: calc(1.2rem + 0.65em) !important; @@ -104,12 +121,12 @@ // Table stacked style for small screen only @include media-breakpoint-down(xs) { .b-table-stacked-sm { - border: 1px solid gray("300"); + border: 1px solid $gray-10; tr { &:not(:first-child) > td[aria-colindex='1'] { - border-top: 1px solid gray("300"); + border-top: 1px solid $gray-10; padding-top: 0.625rem; } @@ -157,15 +174,15 @@ .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { &::before { text-align: left; - padding-left: $spacer /2; + padding-left: $spacer / 2; } > div { padding-left: 1rem; } } +} - .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { - border-top-width: 1px; - } +.table-responsive, .table-responsive-md { + margin-top: 0.5rem; } |