UNPKG

3.15 kBSCSSView Raw
1@use '../internal' as *;
2
3$generate-utility: should-generate-classes($TABLE);
4
5@if $generate-utility {
6 /* TABLE */
7
8 .table-container {
9 overflow: auto;
10 overflow-y: hidden;
11 max-width: 100%;
12 }
13
14 .table {
15 margin-bottom: 1.5rem;
16 width: 100%;
17 border-collapse: collapse; /* Allows us to set 0 margin in table cells */
18 border-spacing: 0;
19 text-align: center; /* Text center by default */
20
21 td,
22 th {
23 border: 1px solid transparentize(fill('gray', '300'), 0.5);
24 border-width: 0 0 1px;
25 padding: 0.75rem;
26 vertical-align: top;
27 text-align: inherit;
28 margin: 0;
29 }
30
31 tr {
32 transition: all 0.3s;
33
34 &.selected {
35 /* Style a selected row */
36 background-color: $cirrus-primary;
37 color: #fff;
38 }
39 }
40
41 .table caption {
42 padding-top: 0.75rem;
43 padding-bottom: 0.75rem;
44 color: fill('gray', '300');
45 text-align: left;
46 caption-side: bottom;
47 }
48
49 tr:not(.selected):hover,
50 &.striped tbody tr:not(.selected):nth-child(even):hover {
51 background-color: transparentize(fill('gray', '300'), 0.85);
52 }
53
54 /* Thicker border for table header */
55 thead th,
56 thead {
57 border-bottom: 2px solid transparentize(fill('gray', '300'), 0.5);
58 }
59
60 thead th,
61 tfoot th {
62 padding: 1rem;
63 }
64
65 tfoot th {
66 border-top: 2px solid transparentize(fill('gray', '300'), 0.5);
67 border-bottom: none;
68 }
69
70 /* CUSTOM STYLES */
71 /* All borders */
72 &.bordered {
73 thead th,
74 thead {
75 border-bottom: 1px solid transparentize(fill('gray', '300'), 0.5);
76 }
77
78 td,
79 th {
80 border: 1px solid rgba(219, 219, 219, 0.5);
81 }
82
83 thead td,
84 thead {
85 border-width: 1px;
86 }
87 }
88
89 /* Striped table */
90 &.striped tbody tr:nth-child(even) {
91 background-color: rgba(0, 0, 0, 0.05);
92 }
93
94 /* Decrease padding */
95 &.small td,
96 &.small th {
97 padding: 0.25rem 0.75rem;
98 }
99
100 /* Fixed title table */
101 &.fixed-head thead {
102 position: relative;
103 display: block;
104 }
105
106 &.fixed-head tbody {
107 min-height: 200px; /* Set the height you want */
108 display: block; /* Needed */
109 overflow: auto; /* Shows scrollbars */
110 }
111
112 &.fixed-head tr {
113 display: table;
114 width: 100%; /* Forces row to span container */
115 }
116
117 /* Borderless Table (for inner cells) */
118 &.borderless thead th,
119 &.borderless th,
120 &.borderless td {
121 border: none;
122 }
123 }
124}