unigrid.css 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -101
- package/dist/dropdown.js +36 -36
- package/dist/scrollspy.js +57 -57
- package/dist/tabs.js +30 -30
- package/dist/unigrid.css +4608 -4501
- package/dist/unigrid.js +173 -124
- package/dist/unigrid.min.css +1 -1
- package/dist/unigrid.min.js +1 -1
- package/package.json +70 -41
- package/src/js/dropdown.js +49 -49
- package/src/js/index.js +20 -19
- package/src/js/modal.js +81 -0
- package/src/js/scrollspy.js +87 -87
- package/src/js/tabs.js +58 -58
- package/src/scss/_accordion.scss +123 -123
- package/src/scss/_broadside.scss +125 -125
- package/src/scss/_buttons.scss +241 -241
- package/src/scss/_card.scss +168 -168
- package/src/scss/_components.scss +140 -140
- package/src/scss/_container.scss +53 -53
- package/src/scss/_dropdown.scss +178 -178
- package/src/scss/_footer.scss +147 -147
- package/src/scss/_formats.scss +64 -64
- package/src/scss/_forms.scss +192 -192
- package/src/scss/_grid.scss +114 -114
- package/src/scss/_header.scss +169 -169
- package/src/scss/_hero.scss +262 -262
- package/src/scss/_mixins.scss +120 -120
- package/src/scss/_modal.scss +158 -0
- package/src/scss/_modules.scss +238 -238
- package/src/scss/_navbar.scss +341 -341
- package/src/scss/_pagination.scss +160 -160
- package/src/scss/_prose.scss +393 -393
- package/src/scss/_reset.scss +82 -82
- package/src/scss/_scrollspy.scss +62 -62
- package/src/scss/_section.scss +91 -91
- package/src/scss/_sidebar.scss +147 -147
- package/src/scss/_table.scss +122 -122
- package/src/scss/_tabs.scss +178 -178
- package/src/scss/_typography.scss +105 -105
- package/src/scss/_utilities.scss +79 -79
- package/src/scss/_variables.scss +183 -183
- package/src/scss/unigrid.scss +50 -49
- package/dist/index.js +0 -5
package/src/scss/_sidebar.scss
CHANGED
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
// ==========================================================================
|
|
2
|
-
// Unigrid CSS Framework — Sidebar Layout (BEM)
|
|
3
|
-
//
|
|
4
|
-
// Flexible sidebar + main content layout. Sidebar width configurable
|
|
5
|
-
// via CSS custom property --ug-sidebar-width.
|
|
6
|
-
//
|
|
7
|
-
// Block: .ug-sidebar-layout
|
|
8
|
-
// Elements: __sidebar, __main
|
|
9
|
-
// Modifiers: --right, --sticky, --bordered
|
|
10
|
-
// __sidebar--collapse (hidden on mobile)
|
|
11
|
-
//
|
|
12
|
-
// Usage:
|
|
13
|
-
// <div class="ug-sidebar-layout" style="--ug-sidebar-width: 20rem">
|
|
14
|
-
// <aside class="ug-sidebar-layout__sidebar">...</aside>
|
|
15
|
-
// <main class="ug-sidebar-layout__main">...</main>
|
|
16
|
-
// </div>
|
|
17
|
-
// ==========================================================================
|
|
18
|
-
|
|
19
|
-
@use "variables" as *;
|
|
20
|
-
@use "mixins" as *;
|
|
21
|
-
|
|
22
|
-
.ug-sidebar-layout {
|
|
23
|
-
--ug-sidebar-width: calc(var(--ug-leading) * 12);
|
|
24
|
-
display: flex;
|
|
25
|
-
width: 100%;
|
|
26
|
-
min-height: 0;
|
|
27
|
-
|
|
28
|
-
// ---- Sidebar ----
|
|
29
|
-
&__sidebar {
|
|
30
|
-
width: var(--ug-sidebar-width);
|
|
31
|
-
flex-shrink: 0;
|
|
32
|
-
padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
|
|
33
|
-
|
|
34
|
-
// Collapse on mobile by default
|
|
35
|
-
@include ug-breakpoint-down("md") {
|
|
36
|
-
display: none;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// ---- Main Content ----
|
|
41
|
-
&__main {
|
|
42
|
-
flex: 1;
|
|
43
|
-
min-width: 0;
|
|
44
|
-
padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// ==============================
|
|
48
|
-
// Modifiers
|
|
49
|
-
// ==============================
|
|
50
|
-
|
|
51
|
-
// Sidebar on the right
|
|
52
|
-
&--right {
|
|
53
|
-
flex-direction: row-reverse;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// Sticky sidebar
|
|
57
|
-
&--sticky {
|
|
58
|
-
.ug-sidebar-layout__sidebar {
|
|
59
|
-
position: sticky;
|
|
60
|
-
top: 0;
|
|
61
|
-
align-self: flex-start;
|
|
62
|
-
max-height: 100vh;
|
|
63
|
-
overflow-y: auto;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// Bordered separator
|
|
68
|
-
&--bordered {
|
|
69
|
-
.ug-sidebar-layout__sidebar {
|
|
70
|
-
border-right: 1px solid $ug-light-gray;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&.ug-sidebar-layout--right .ug-sidebar-layout__sidebar {
|
|
74
|
-
border-right: none;
|
|
75
|
-
border-left: 1px solid $ug-light-gray;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// ==============================
|
|
80
|
-
// Sidebar element modifiers
|
|
81
|
-
// ==============================
|
|
82
|
-
|
|
83
|
-
// Show sidebar on mobile (override default collapse)
|
|
84
|
-
&__sidebar--visible {
|
|
85
|
-
@include ug-breakpoint-down("md") {
|
|
86
|
-
display: block;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// ==============================
|
|
91
|
-
// Sidebar Navigation (optional)
|
|
92
|
-
// ==============================
|
|
93
|
-
|
|
94
|
-
&__nav {
|
|
95
|
-
list-style: none;
|
|
96
|
-
margin: 0;
|
|
97
|
-
padding: 0;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&__nav-item {
|
|
101
|
-
display: block;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
&__nav-link {
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
padding: calc(var(--ug-leading) * 0.5) 0;
|
|
108
|
-
@include ug-font-size("sm");
|
|
109
|
-
@include ug-rhythm-line-height(1);
|
|
110
|
-
color: $ug-dark-gray;
|
|
111
|
-
text-decoration: none;
|
|
112
|
-
border-bottom: 1px solid $ug-light-gray;
|
|
113
|
-
transition: color 0.15s;
|
|
114
|
-
|
|
115
|
-
&:hover {
|
|
116
|
-
color: $ug-black;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
&--active {
|
|
120
|
-
@include ug-font-weight("bold");
|
|
121
|
-
color: $ug-black;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// ==============================
|
|
126
|
-
// Responsive
|
|
127
|
-
// ==============================
|
|
128
|
-
|
|
129
|
-
@include ug-breakpoint-down("md") {
|
|
130
|
-
flex-direction: column;
|
|
131
|
-
|
|
132
|
-
&__main {
|
|
133
|
-
padding: var(--ug-leading);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
&--right {
|
|
137
|
-
flex-direction: column;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
// Remove border on mobile
|
|
141
|
-
&--bordered .ug-sidebar-layout__sidebar {
|
|
142
|
-
border-right: none;
|
|
143
|
-
border-left: none;
|
|
144
|
-
border-bottom: 1px solid $ug-light-gray;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
1
|
+
// ==========================================================================
|
|
2
|
+
// Unigrid CSS Framework — Sidebar Layout (BEM)
|
|
3
|
+
//
|
|
4
|
+
// Flexible sidebar + main content layout. Sidebar width configurable
|
|
5
|
+
// via CSS custom property --ug-sidebar-width.
|
|
6
|
+
//
|
|
7
|
+
// Block: .ug-sidebar-layout
|
|
8
|
+
// Elements: __sidebar, __main
|
|
9
|
+
// Modifiers: --right, --sticky, --bordered
|
|
10
|
+
// __sidebar--collapse (hidden on mobile)
|
|
11
|
+
//
|
|
12
|
+
// Usage:
|
|
13
|
+
// <div class="ug-sidebar-layout" style="--ug-sidebar-width: 20rem">
|
|
14
|
+
// <aside class="ug-sidebar-layout__sidebar">...</aside>
|
|
15
|
+
// <main class="ug-sidebar-layout__main">...</main>
|
|
16
|
+
// </div>
|
|
17
|
+
// ==========================================================================
|
|
18
|
+
|
|
19
|
+
@use "variables" as *;
|
|
20
|
+
@use "mixins" as *;
|
|
21
|
+
|
|
22
|
+
.ug-sidebar-layout {
|
|
23
|
+
--ug-sidebar-width: calc(var(--ug-leading) * 12);
|
|
24
|
+
display: flex;
|
|
25
|
+
width: 100%;
|
|
26
|
+
min-height: 0;
|
|
27
|
+
|
|
28
|
+
// ---- Sidebar ----
|
|
29
|
+
&__sidebar {
|
|
30
|
+
width: var(--ug-sidebar-width);
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
|
|
33
|
+
|
|
34
|
+
// Collapse on mobile by default
|
|
35
|
+
@include ug-breakpoint-down("md") {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// ---- Main Content ----
|
|
41
|
+
&__main {
|
|
42
|
+
flex: 1;
|
|
43
|
+
min-width: 0;
|
|
44
|
+
padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// ==============================
|
|
48
|
+
// Modifiers
|
|
49
|
+
// ==============================
|
|
50
|
+
|
|
51
|
+
// Sidebar on the right
|
|
52
|
+
&--right {
|
|
53
|
+
flex-direction: row-reverse;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Sticky sidebar
|
|
57
|
+
&--sticky {
|
|
58
|
+
.ug-sidebar-layout__sidebar {
|
|
59
|
+
position: sticky;
|
|
60
|
+
top: 0;
|
|
61
|
+
align-self: flex-start;
|
|
62
|
+
max-height: 100vh;
|
|
63
|
+
overflow-y: auto;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Bordered separator
|
|
68
|
+
&--bordered {
|
|
69
|
+
.ug-sidebar-layout__sidebar {
|
|
70
|
+
border-right: 1px solid $ug-light-gray;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.ug-sidebar-layout--right .ug-sidebar-layout__sidebar {
|
|
74
|
+
border-right: none;
|
|
75
|
+
border-left: 1px solid $ug-light-gray;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// ==============================
|
|
80
|
+
// Sidebar element modifiers
|
|
81
|
+
// ==============================
|
|
82
|
+
|
|
83
|
+
// Show sidebar on mobile (override default collapse)
|
|
84
|
+
&__sidebar--visible {
|
|
85
|
+
@include ug-breakpoint-down("md") {
|
|
86
|
+
display: block;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// ==============================
|
|
91
|
+
// Sidebar Navigation (optional)
|
|
92
|
+
// ==============================
|
|
93
|
+
|
|
94
|
+
&__nav {
|
|
95
|
+
list-style: none;
|
|
96
|
+
margin: 0;
|
|
97
|
+
padding: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__nav-item {
|
|
101
|
+
display: block;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__nav-link {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
padding: calc(var(--ug-leading) * 0.5) 0;
|
|
108
|
+
@include ug-font-size("sm");
|
|
109
|
+
@include ug-rhythm-line-height(1);
|
|
110
|
+
color: $ug-dark-gray;
|
|
111
|
+
text-decoration: none;
|
|
112
|
+
border-bottom: 1px solid $ug-light-gray;
|
|
113
|
+
transition: color 0.15s;
|
|
114
|
+
|
|
115
|
+
&:hover {
|
|
116
|
+
color: $ug-black;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--active {
|
|
120
|
+
@include ug-font-weight("bold");
|
|
121
|
+
color: $ug-black;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// ==============================
|
|
126
|
+
// Responsive
|
|
127
|
+
// ==============================
|
|
128
|
+
|
|
129
|
+
@include ug-breakpoint-down("md") {
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
|
|
132
|
+
&__main {
|
|
133
|
+
padding: var(--ug-leading);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&--right {
|
|
137
|
+
flex-direction: column;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Remove border on mobile
|
|
141
|
+
&--bordered .ug-sidebar-layout__sidebar {
|
|
142
|
+
border-right: none;
|
|
143
|
+
border-left: none;
|
|
144
|
+
border-bottom: 1px solid $ug-light-gray;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
package/src/scss/_table.scss
CHANGED
|
@@ -1,122 +1,122 @@
|
|
|
1
|
-
// ==========================================================================
|
|
2
|
-
// Unigrid CSS Framework — Table (BEM)
|
|
3
|
-
//
|
|
4
|
-
// Block: .ug-table
|
|
5
|
-
// Elements: __header, __row, __cell
|
|
6
|
-
// Modifiers: --striped, --bordered, --compact, --dark, --hover
|
|
7
|
-
// ==========================================================================
|
|
8
|
-
|
|
9
|
-
@use "variables" as *;
|
|
10
|
-
@use "mixins" as *;
|
|
11
|
-
|
|
12
|
-
.ug-table {
|
|
13
|
-
width: 100%;
|
|
14
|
-
border-collapse: collapse;
|
|
15
|
-
border-spacing: 0;
|
|
16
|
-
@include ug-rhythm-margin-bottom(1);
|
|
17
|
-
|
|
18
|
-
font-feature-settings: 'tnum' 1;
|
|
19
|
-
|
|
20
|
-
// ---- Header ----
|
|
21
|
-
th {
|
|
22
|
-
@include ug-font-size("sm");
|
|
23
|
-
@include ug-font-weight("bold");
|
|
24
|
-
@include ug-rhythm-line-height(1);
|
|
25
|
-
text-align: left;
|
|
26
|
-
text-transform: uppercase;
|
|
27
|
-
letter-spacing: 0.05em;
|
|
28
|
-
color: $ug-medium-gray;
|
|
29
|
-
padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
|
|
30
|
-
border-bottom: 2px solid $ug-black;
|
|
31
|
-
vertical-align: bottom;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// ---- Cells ----
|
|
35
|
-
td {
|
|
36
|
-
@include ug-font-size("base");
|
|
37
|
-
@include ug-rhythm-line-height(1);
|
|
38
|
-
text-align: left;
|
|
39
|
-
padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
|
|
40
|
-
border-bottom: 1px solid $ug-light-gray;
|
|
41
|
-
vertical-align: top;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// ---- Caption ----
|
|
45
|
-
caption {
|
|
46
|
-
@include ug-font-size("sm");
|
|
47
|
-
@include ug-rhythm-line-height(1);
|
|
48
|
-
@include ug-rhythm-margin-bottom(0.5);
|
|
49
|
-
color: $ug-medium-gray;
|
|
50
|
-
text-align: left;
|
|
51
|
-
caption-side: top;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// ==============================
|
|
55
|
-
// Modifiers
|
|
56
|
-
// ==============================
|
|
57
|
-
|
|
58
|
-
// Striped rows
|
|
59
|
-
&--striped {
|
|
60
|
-
tbody tr:nth-child(even) {
|
|
61
|
-
background-color: $ug-warm-gray;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// All borders
|
|
66
|
-
&--bordered {
|
|
67
|
-
th,
|
|
68
|
-
td {
|
|
69
|
-
border: 1px solid $ug-light-gray;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
th {
|
|
73
|
-
border-bottom-width: 2px;
|
|
74
|
-
border-bottom-color: $ug-black;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Compact: less padding
|
|
79
|
-
&--compact {
|
|
80
|
-
th,
|
|
81
|
-
td {
|
|
82
|
-
@include ug-font-size("sm");
|
|
83
|
-
padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
// Dark header
|
|
88
|
-
&--dark {
|
|
89
|
-
th {
|
|
90
|
-
background-color: $ug-black;
|
|
91
|
-
color: $ug-white;
|
|
92
|
-
border-bottom-color: $ug-black;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// Row hover
|
|
97
|
-
&--hover {
|
|
98
|
-
tbody tr {
|
|
99
|
-
transition: background-color 0.1s;
|
|
100
|
-
|
|
101
|
-
&:hover {
|
|
102
|
-
background-color: $ug-warm-gray;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// ==============================
|
|
108
|
-
// Responsive wrapper
|
|
109
|
-
// ==============================
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Horizontally scrollable table on small screens
|
|
113
|
-
.ug-table-responsive {
|
|
114
|
-
width: 100%;
|
|
115
|
-
overflow-x: auto;
|
|
116
|
-
-webkit-overflow-scrolling: touch;
|
|
117
|
-
@include ug-rhythm-margin-bottom(1);
|
|
118
|
-
|
|
119
|
-
.ug-table {
|
|
120
|
-
margin-bottom: 0;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
1
|
+
// ==========================================================================
|
|
2
|
+
// Unigrid CSS Framework — Table (BEM)
|
|
3
|
+
//
|
|
4
|
+
// Block: .ug-table
|
|
5
|
+
// Elements: __header, __row, __cell
|
|
6
|
+
// Modifiers: --striped, --bordered, --compact, --dark, --hover
|
|
7
|
+
// ==========================================================================
|
|
8
|
+
|
|
9
|
+
@use "variables" as *;
|
|
10
|
+
@use "mixins" as *;
|
|
11
|
+
|
|
12
|
+
.ug-table {
|
|
13
|
+
width: 100%;
|
|
14
|
+
border-collapse: collapse;
|
|
15
|
+
border-spacing: 0;
|
|
16
|
+
@include ug-rhythm-margin-bottom(1);
|
|
17
|
+
|
|
18
|
+
font-feature-settings: 'tnum' 1;
|
|
19
|
+
|
|
20
|
+
// ---- Header ----
|
|
21
|
+
th {
|
|
22
|
+
@include ug-font-size("sm");
|
|
23
|
+
@include ug-font-weight("bold");
|
|
24
|
+
@include ug-rhythm-line-height(1);
|
|
25
|
+
text-align: left;
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
letter-spacing: 0.05em;
|
|
28
|
+
color: $ug-medium-gray;
|
|
29
|
+
padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
|
|
30
|
+
border-bottom: 2px solid $ug-black;
|
|
31
|
+
vertical-align: bottom;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// ---- Cells ----
|
|
35
|
+
td {
|
|
36
|
+
@include ug-font-size("base");
|
|
37
|
+
@include ug-rhythm-line-height(1);
|
|
38
|
+
text-align: left;
|
|
39
|
+
padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
|
|
40
|
+
border-bottom: 1px solid $ug-light-gray;
|
|
41
|
+
vertical-align: top;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// ---- Caption ----
|
|
45
|
+
caption {
|
|
46
|
+
@include ug-font-size("sm");
|
|
47
|
+
@include ug-rhythm-line-height(1);
|
|
48
|
+
@include ug-rhythm-margin-bottom(0.5);
|
|
49
|
+
color: $ug-medium-gray;
|
|
50
|
+
text-align: left;
|
|
51
|
+
caption-side: top;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// ==============================
|
|
55
|
+
// Modifiers
|
|
56
|
+
// ==============================
|
|
57
|
+
|
|
58
|
+
// Striped rows
|
|
59
|
+
&--striped {
|
|
60
|
+
tbody tr:nth-child(even) {
|
|
61
|
+
background-color: $ug-warm-gray;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// All borders
|
|
66
|
+
&--bordered {
|
|
67
|
+
th,
|
|
68
|
+
td {
|
|
69
|
+
border: 1px solid $ug-light-gray;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
th {
|
|
73
|
+
border-bottom-width: 2px;
|
|
74
|
+
border-bottom-color: $ug-black;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Compact: less padding
|
|
79
|
+
&--compact {
|
|
80
|
+
th,
|
|
81
|
+
td {
|
|
82
|
+
@include ug-font-size("sm");
|
|
83
|
+
padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Dark header
|
|
88
|
+
&--dark {
|
|
89
|
+
th {
|
|
90
|
+
background-color: $ug-black;
|
|
91
|
+
color: $ug-white;
|
|
92
|
+
border-bottom-color: $ug-black;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Row hover
|
|
97
|
+
&--hover {
|
|
98
|
+
tbody tr {
|
|
99
|
+
transition: background-color 0.1s;
|
|
100
|
+
|
|
101
|
+
&:hover {
|
|
102
|
+
background-color: $ug-warm-gray;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// ==============================
|
|
108
|
+
// Responsive wrapper
|
|
109
|
+
// ==============================
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Horizontally scrollable table on small screens
|
|
113
|
+
.ug-table-responsive {
|
|
114
|
+
width: 100%;
|
|
115
|
+
overflow-x: auto;
|
|
116
|
+
-webkit-overflow-scrolling: touch;
|
|
117
|
+
@include ug-rhythm-margin-bottom(1);
|
|
118
|
+
|
|
119
|
+
.ug-table {
|
|
120
|
+
margin-bottom: 0;
|
|
121
|
+
}
|
|
122
|
+
}
|