home/aissorg/public_html/scss/bootstrap/_tables.scss 0000644 00000007026 15116240546 0016754 0 ustar 00 //
// Basic Bootstrap table
//
.table {
width: 100%;
max-width: 100%;
margin-bottom: $spacer;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th,
td {
padding: $table-cell-padding;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
}
thead th {
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
.table {
background-color: $body-bg;
}
}
//
// Condensed table w/ half padding
//
.table-sm {
th,
td {
padding: $table-cell-padding-sm;
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: $table-border-width solid $table-border-color;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-accent-bg;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover {
background-color: $table-hover-bg;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, -9));
}
@include table-row-variant(active, $table-active-bg);
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
th {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
}
.thead-light {
th {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
}
}
.table-dark {
color: $table-dark-color;
background-color: $table-dark-bg;
th,
td,
thead th {
border-color: $table-dark-border-color;
}
&.table-bordered {
border: 0;
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover {
background-color: $table-dark-hover-bg;
}
}
}
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {
border: 0;
}
}
}
}
}
home/aissorg/public_html/scss/custom-styles/components/_tables.scss 0000644 00000003471 15116250235 0021753 0 ustar 00 /*
*
* Tables custom
*/
$table-head-padding: 13px 24px;
$table-cell-padding: 23px 24px;
$table-condensed-cell-padding: 5px;
$table-bg: $white;
$table-bg-accent: $gray-100;
$table-bg-hover: $primary;
$table-bg-active: $table-bg-hover;
$table-border-color: $gray-200;
.table {
width: 100%;
max-width: 100%;
text-align: left;
background: $table-bg;
border-collapse: collapse;
th,
td {
color: $gray-700;
vertical-align: middle;
}
th {
padding: $table-head-padding;
border-top: 0;
font-size: $font-size-base;
font-weight: $font-weight-base;
}
thead th {
border-bottom: 1px solid $gray-300;
}
td {
padding: $table-cell-padding;
}
tbody tr:first-child {
td {
border-top: 0;
}
}
tr td {
border-bottom: 1px solid $table-border-color;
}
tfoot {
td {
font-weight: 700;
}
}
}
* + .table-responsive { margin-top: 30px; }
@include media-breakpoint-up(md) {
* + .table-responsive { margin-top: 40px; }
}
//
// Custom
//
.table-hover {
tbody tr {
transition: .55s;
&:hover {
background: $table-bg-accent;
}
}
}
.table-job-positions {
th,
td{
white-space: nowrap;
}
td:first-child {
width: 8%;
padding-right: 6px;
text-align: center;
}
.position {
color: $primary;
}
time {
display: block;
white-space: nowrap;
}
@include media-breakpoint-down(xs) {
th, td {
padding-left: 12px;
padding-right: 12px;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
.table-responsive + .button-lg { margin-top: 30px; }
@include media-breakpoint-up(xl) {
.table-responsive + .button-lg { margin-top: 40px; }
}
@include media-breakpoint-up(xxl) {
.table-responsive + .button-lg { margin-top: 55px; }
}