blob: af8207fbdb0b97735180b519db4ae6a4aad3f36b (
plain) (
blame)
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
@use '../base'as *;
/* --------------------------------
File#: _1_table
Title: Table
Descr: Data tables used to organize and display information in rows and columns
Usage: codyhouse.co/license
-------------------------------- */
// >>> style affecting all (block + expanded) versions 👇
.table {
position: relative;
z-index: 1;
}
// <<< end style affecting all versions
// >>> block version only (mobile) 👇
.table:not(.table--expanded) {
border-collapse: separate;
border-spacing: 0 var(--space-md); // row gap
margin-top: calc(-2 * var(--space-md)); // set spacing variable = row gap ☝️
.table__header {
// hide table header - but keep it accessible to SR
@include srHide;
}
.table__row {
.table__cell:first-child {
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.table__cell:last-child {
border-radius: 0 0 var(--radius-md) var(--radius-md);
&::after {
// hide border bottom
display: none;
}
}
}
.table__cell {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
text-align: right;
padding: var(--space-md);
background-color: var(--color-bg-light);
&::after {
// border bottom
content: '';
position: absolute;
bottom: 0;
left: var(--space-md);
width: calc(100% - (2 * var(--space-md)));
height: 1px;
background-color: var(--color-contrast-lower);
}
}
.table__label {
// inline labels -> visible when table header is hidden
font-weight: bold;
text-align: left;
color: var(--color-contrast-higher);
margin-right: var(--space-md);
}
}
// <<< end block version
// >>> expanded version only (desktop) 👇 -> show standard rows and cols
.table--expanded {
border-bottom: 1px solid var(--color-contrast-lower); // table border bottom
.table__header {
.table__cell {
// header cell style
position: relative;
z-index: 10;
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-contrast-lower); // header border bottom
font-weight: bold;
color: var(--color-contrast-higher);
}
}
.table__body {
.table__row {
&:nth-child(odd) {
background-color: alpha(var(--color-bg-dark), 0.85);
}
}
}
.table__cell {
padding: var(--space-xxxs);
}
.table__label {
// hide inline labels
display: none;
}
// --header-sticky
.table__header--sticky {
.table__cell {
// header cell style
position: sticky;
top: 0;
}
}
}
// <<< end expanded version
.js {
.table {
opacity: 0; // hide table while it is initialized in JS
}
.table--loaded {
opacity: 1;
}
}
// detect when the table needs to switch from the mobile layout to an expanded one - used in JS
[class*="table--expanded"]::before {
display: none;
}
@each $breakpoint,
$value in $breakpoints {
.table--expanded\@#{$breakpoint}::before {
content: 'collapsed';
@include breakpoint(#{$breakpoint}) {
content: 'expanded';
}
}
}
|
