concise.css/scss/base/_tables.scss at master · davgit/concise.css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@if $use-tables == true {
  //------------------------------------
  //  TABLES
  //------------------------------------
  table {
    &.table {
      empty-cells: show;
      width: 100%;

      caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
      }

      thead { border-bottom: 2px solid #ededed; }

      th { padding: 12px 15px; }

      td {
        padding: 12px 15px;
        border-top: 1px solid #ededed;
      }
    }


    @if $use-table-styles == true {
      // Background colors
      .bg-light-green { color: $color-green; }

      .bg-light-blue { color: $color-blue; }

      .bg-light-yellow { color: $color-yellow; }

      .bg-light-red { color: $color-red; }


      // Full-width table
      &.table-full,
      &.table.table-full { width: 100%; }


      // Borders
      &.table-border-all, &.table-border-outer { border: 1px solid #ededed; }

      &.table-border-all {
        th,
        td { border-right: 1px solid #ededed; }
      }

      &.table-border-inner {
        th,
        td { border-right: 1px solid #ededed; }
      }


      // Hovers
      &.table-hover-row tr:hover td,
      &.table-hover-cell td:hover { background-color: #f9f9f9; }


      // Striped
      &.table-fill-even tbody tr:nth-child(even),
      &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; }
    }
  }

  @include breakpoint(extra-small) {
    table.table {
      width: auto;

      th, td { padding: 10px 50px 10px 25px; }
    }
  }


  // Responsive tables
  .table-responsive {
    overflow: auto;
    width: 100%;

    table { margin-bottom: 0; }
  }
}