mirror of
				https://github.com/JKorf/CryptoExchange.Net
				synced 2025-11-04 12:28:06 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			186 lines
		
	
	
		
			3.5 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			186 lines
		
	
	
		
			3.5 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
//
 | 
						|
// Basic Bootstrap table
 | 
						|
//
 | 
						|
 | 
						|
.table {
 | 
						|
  width: 100%;
 | 
						|
  margin-bottom: $spacer;
 | 
						|
  color: $table-color;
 | 
						|
  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;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
 | 
						|
//
 | 
						|
// Condensed table w/ half padding
 | 
						|
//
 | 
						|
 | 
						|
.table-sm {
 | 
						|
  th,
 | 
						|
  td {
 | 
						|
    padding: $table-cell-padding-sm;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
 | 
						|
// Border versions
 | 
						|
//
 | 
						|
// Add or remove 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;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
.table-borderless {
 | 
						|
  th,
 | 
						|
  td,
 | 
						|
  thead th,
 | 
						|
  tbody + tbody {
 | 
						|
    border: 0;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
// Zebra-striping
 | 
						|
//
 | 
						|
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
 | 
						|
 | 
						|
.table-striped {
 | 
						|
  tbody tr:nth-of-type(#{$table-striped-order}) {
 | 
						|
    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() {
 | 
						|
      color: $table-hover-color;
 | 
						|
      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, $table-bg-level), theme-color-level($color, $table-border-level));
 | 
						|
}
 | 
						|
 | 
						|
@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(#{$table-striped-order}) {
 | 
						|
      background-color: $table-dark-accent-bg;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  &.table-hover {
 | 
						|
    tbody tr {
 | 
						|
      @include hover() {
 | 
						|
        color: $table-dark-hover-color;
 | 
						|
        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;
 | 
						|
 | 
						|
        // Prevent double border on horizontal scroll due to use of `display: block;`
 | 
						|
        > .table-bordered {
 | 
						|
          border: 0;
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 |