@phantompixeldev/retrocss 2.8.1 → 3.0.0
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/MIGRATION.md +160 -0
- package/README.md +27 -3
- package/dist/retro.css +107 -51
- package/dist/retro.css.map +1 -1
- package/dist/retro.js +106 -220
- package/dist/retro.min.css +1 -1
- package/dist/retro.min.css.map +1 -1
- package/dist/retro.min.js +1 -1
- package/package.json +6 -8
package/MIGRATION.md
CHANGED
|
@@ -1,3 +1,163 @@
|
|
|
1
|
+
# Migrating to RetroCSS 3.0
|
|
2
|
+
|
|
3
|
+
3.0 is a visual release. Nothing was renamed and no class was removed, but two
|
|
4
|
+
changes are visible on every page that consumes the framework, so they are
|
|
5
|
+
called out first.
|
|
6
|
+
|
|
7
|
+
## 1. Body text is 16px
|
|
8
|
+
|
|
9
|
+
`--retro-font-size` moves from `0.875rem` (14px) to `1rem` (16px). The rest of
|
|
10
|
+
the scale is expressed in `rem` against the root, so headings, buttons, badges
|
|
11
|
+
and inputs all move with it.
|
|
12
|
+
|
|
13
|
+
14px is the authentic Win9x metric and 16px is not. The trade was made
|
|
14
|
+
deliberately: the framework is used to build things people read, and 14px is
|
|
15
|
+
below the size at which most people read comfortably. One line puts it back:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
:root { --retro-font-size: 0.875rem; }
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Expect layouts that were tuned to the pixel at 14px to need a little room. If
|
|
22
|
+
you pinned a width in `px` to fit a specific string, it will now clip.
|
|
23
|
+
|
|
24
|
+
## 2. `border-radius: 0` is no longer `!important`
|
|
25
|
+
|
|
26
|
+
The reset was `* { border-radius: 0 !important }`, which meant nothing in a
|
|
27
|
+
consuming application could round a corner — including `.retro-rounded`, which
|
|
28
|
+
had to fight the reset, and `_modal.scss`, which needed its own `!important` to
|
|
29
|
+
get 4px back. The default is still square:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
* { border-radius: 0; }
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
If you were relying on the reset to flatten a third-party widget's corners,
|
|
36
|
+
that widget's own radius now wins, and you will need to zero it yourself.
|
|
37
|
+
|
|
38
|
+
## 3. On-fill text follows the theme
|
|
39
|
+
|
|
40
|
+
If you built a component that pairs a RetroCSS hue fill with white text:
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
/* before */
|
|
44
|
+
.my-chip { background: var(--retro-primary); color: var(--retro-white); }
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
...that pair breaks in dark mode. `--retro-white` inverts to `#3a3a3a` while
|
|
48
|
+
the fill *lightens* to `#4a90e2`, so both move and the contrast collapses —
|
|
49
|
+
this was measuring 3.45:1 on the framework's own active nav items. Use the
|
|
50
|
+
`-fg` token, which is defined as "text on this fill" and is contrast-gated in
|
|
51
|
+
both themes:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
/* after */
|
|
55
|
+
.my-chip { background: var(--retro-primary); color: var(--retro-primary-fg); }
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The `--retro-black` / `--retro-white` pair is still fine *together* — both
|
|
59
|
+
invert, so a black chip with white text simply becomes a white chip with dark
|
|
60
|
+
text.
|
|
61
|
+
|
|
62
|
+
## 4. Tooltips are instant
|
|
63
|
+
|
|
64
|
+
`.retro-tooltip` toggles `display` rather than `opacity` + `visibility`, so the
|
|
65
|
+
0.2s fade is gone. This was not a style choice: a hidden tooltip kept its box in
|
|
66
|
+
the page's scrollable overflow region, so a `.retro-tooltip-right` on a trigger
|
|
67
|
+
near the viewport edge widened the whole page while invisible. Instant tooltips
|
|
68
|
+
are period-correct anyway.
|
|
69
|
+
|
|
70
|
+
If you were animating `.retro-tooltip` yourself, animate a child instead.
|
|
71
|
+
|
|
72
|
+
## Smaller changes
|
|
73
|
+
|
|
74
|
+
- **Nav variants and breadcrumbs wrap.** `.retro-nav-tabbed`,
|
|
75
|
+
`.retro-nav-underlined`, `.retro-nav-buttons` and `.retro-breadcrumbs` were
|
|
76
|
+
single unwrapped flex rows, so a long set of labels pushed the page sideways
|
|
77
|
+
on narrow viewports. They wrap onto a second line now.
|
|
78
|
+
- **`.retro-nav-vertical`** is capped at `max-width: 100%`; it was sized to its
|
|
79
|
+
longest label with `width: max-content`.
|
|
80
|
+
- **`.retro-alert-close`** inherits the alert's own text colour and no longer
|
|
81
|
+
renders at `opacity: 0.7`.
|
|
82
|
+
- **Unfilled `.retro-rating-star`** uses `--retro-text-muted` instead of
|
|
83
|
+
`--retro-border-dark`, which was invisible on the dark chassis.
|
|
84
|
+
- **`.retro-heading-variant`** drops its `letter-spacing`. Uppercase plus
|
|
85
|
+
monospace already carries the emphasis.
|
|
86
|
+
|
|
87
|
+
## Removed
|
|
88
|
+
|
|
89
|
+
Everything here was already dead: unreachable, uninitialised, or compiling to
|
|
90
|
+
nothing. If you were using any of it, it was not doing what its name implied.
|
|
91
|
+
|
|
92
|
+
- **`window.RetroSidebar` / `src/js/sidebar.js`** — 234 lines that were bundled
|
|
93
|
+
but never initialised. Wiring it in would have injected a toggle button and a
|
|
94
|
+
full-screen overlay into every consuming page, hijacked every sidebar link
|
|
95
|
+
with smooth scrolling and `history.pushState`, overwritten whichever link the
|
|
96
|
+
author had marked `.active`, and bound an unthrottled `scroll` listener that
|
|
97
|
+
re-queried `section[id], div[id]` across the whole document on every event.
|
|
98
|
+
That is application logic, not framework logic. The CSS stays —
|
|
99
|
+
`.retro-sidebar`, `.retro-sidebar-toggle` and `.retro-sidebar-overlay` are all
|
|
100
|
+
still styled, so the same UI is a few lines of your own JS.
|
|
101
|
+
- **Eleven `@container` blocks** in `utilities/_container-queries.scss`:
|
|
102
|
+
`.retro-cq-sm`, `-md`, `-lg`, `-xl`, `-wide`, `-tall`, `-landscape`,
|
|
103
|
+
`-portrait`, `-size-sm`, `-size-md`, `-size-lg`. Every one had a comment for a
|
|
104
|
+
body and compiled to nothing. The blocks with real declarations
|
|
105
|
+
(`.retro-cq-hide`, `-show`, `-text-lg`, `-text-xl`, `-flex-row`, `-flex-col`,
|
|
106
|
+
`-p-4`, `-p-6`, `-grid-2`, `-grid-3`) are untouched.
|
|
107
|
+
- **Five Sass mixins**: `retro-border`, `retro-hover`, `retro-active`,
|
|
108
|
+
`retro-transition`, `retro-z-index`. None was called from anywhere in the
|
|
109
|
+
framework. Their values are all reachable directly as custom properties —
|
|
110
|
+
`--retro-border-dark`, `--retro-border-sunken`, `--retro-z-index-modal` and so
|
|
111
|
+
on — which is what the components use. `retro-box-shadow`, `retro-focus`,
|
|
112
|
+
`retro-focus-ring` and `retro-breakpoint` are still here.
|
|
113
|
+
- **Five devDependencies**: `concat-cli`, `copyfiles`, `mkdirp`, `onchange`,
|
|
114
|
+
`uglify-js`. No script, workflow or config invoked any of them.
|
|
115
|
+
|
|
116
|
+
## New
|
|
117
|
+
|
|
118
|
+
- **Sortable tables actually work.** `.retro-table-sortable` had working JS and
|
|
119
|
+
no styles, no markup anywhere in the repo, and no way to reach it from the
|
|
120
|
+
keyboard. Headers are now focusable and respond to Enter and Space, carry
|
|
121
|
+
`aria-sort`, and show a direction indicator. Columns are sniffed as numeric or
|
|
122
|
+
text, or declared:
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<table class="retro-table retro-table-sortable">
|
|
126
|
+
<thead>
|
|
127
|
+
<tr>
|
|
128
|
+
<th>Name</th>
|
|
129
|
+
<th data-sort="number">Size</th>
|
|
130
|
+
<th data-sort="none">Actions</th>
|
|
131
|
+
</tr>
|
|
132
|
+
</thead>
|
|
133
|
+
<tbody>...</tbody>
|
|
134
|
+
</table>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
A cell can carry `data-sort-value` to sort a formatted value ("2 days ago",
|
|
138
|
+
"$1,204.00") by what it means. The numeric sniff is deliberately strict: a
|
|
139
|
+
loose `parseFloat` reads `2023-09-01` as `2023` and `SKU-001` as `-1`, which
|
|
140
|
+
quietly sorts a date column by year and an ID column by the digits after the
|
|
141
|
+
first dash.
|
|
142
|
+
|
|
143
|
+
- **Code blocks get a copy button.** `code-copy.js` was bundled but never
|
|
144
|
+
initialised, so `.retro-code-copy` existed only in the stylesheet. It now runs
|
|
145
|
+
from `RetroCSS.init()`. Outside a secure context, where
|
|
146
|
+
`navigator.clipboard` is undefined, it selects the code and says
|
|
147
|
+
`Press Ctrl+C` rather than failing silently.
|
|
148
|
+
|
|
149
|
+
- **`npm run docs:api`** renders the SassDoc blocks the SCSS has always carried
|
|
150
|
+
to `docs/api/`. `sassdoc` was installed and never wired up.
|
|
151
|
+
|
|
152
|
+
## Verifying your own pages
|
|
153
|
+
|
|
154
|
+
`npm run check:pages` renders every page in the repo in real Chromium, in both
|
|
155
|
+
themes, at 1200/980/760/420/360px, and fails on console errors, horizontal
|
|
156
|
+
overflow, a missing or duplicated `h1`, contrast below AA on any rendered text,
|
|
157
|
+
or an input glyph off-centre. It is worth pointing at your own pages.
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
1
161
|
# Migrating to RetroCSS 2.0
|
|
2
162
|
|
|
3
163
|
2.0 is an accessibility and readability release. Nothing was renamed and no
|
package/README.md
CHANGED
|
@@ -175,9 +175,10 @@ Typography is tokenised the same way: `--retro-font`, `--retro-font-heading`,
|
|
|
175
175
|
default; for a modern heading font, set
|
|
176
176
|
`--retro-font-heading: 'Segoe UI', Tahoma, sans-serif;`.
|
|
177
177
|
|
|
178
|
-
> **Upgrading
|
|
179
|
-
> renamed
|
|
180
|
-
>
|
|
178
|
+
> **Upgrading?** See [MIGRATION.md](MIGRATION.md). No class has ever been
|
|
179
|
+
> renamed, but 3.0 raises the body text to 16px and drops the `!important` from
|
|
180
|
+
> the `border-radius` reset, both of which are visible on every page — each with
|
|
181
|
+
> a one-line override. 2.0 restyled a few things to meet WCAG AA.
|
|
181
182
|
|
|
182
183
|
## Utilities
|
|
183
184
|
|
|
@@ -210,6 +211,13 @@ themes. `npm run check:a11y` compiles the SCSS and asserts it, and fails the
|
|
|
210
211
|
build on a regression — it also catches any `var(--retro-*)` that resolves to
|
|
211
212
|
nothing.
|
|
212
213
|
|
|
214
|
+
That proves the *tokens* are sound. `npm run check:pages` proves the *pages*
|
|
215
|
+
are: it renders every page in the repo in real Chromium, in both themes, at
|
|
216
|
+
1200/980/760/420/360px, and fails on a console error, horizontal overflow, a
|
|
217
|
+
missing or duplicated `<h1>`, any rendered text below AA against the surface
|
|
218
|
+
actually painted behind it, or an input glyph off its field's centre line. Both
|
|
219
|
+
run in CI on every push.
|
|
220
|
+
|
|
213
221
|
Beyond colour:
|
|
214
222
|
|
|
215
223
|
- **Focus rings are `:focus-visible`.** Keyboard and assistive-tech users get a
|
|
@@ -224,6 +232,8 @@ Beyond colour:
|
|
|
224
232
|
Tab all behave. Escape returns focus to the toggle.
|
|
225
233
|
- **`prefers-reduced-motion` is honoured** — every animation and transition is
|
|
226
234
|
neutralised, with the looping text effects switched off outright.
|
|
235
|
+
- **Sortable tables are operable.** `.retro-table-sortable` headers are
|
|
236
|
+
focusable, sort on Enter and Space as well as click, and carry `aria-sort`.
|
|
227
237
|
- **`.retro-sr-only`** labels icon-only controls; `.retro-sr-only-focusable`
|
|
228
238
|
gives you a skip link.
|
|
229
239
|
|
|
@@ -262,6 +272,20 @@ Watch for changes:
|
|
|
262
272
|
npm run watch
|
|
263
273
|
```
|
|
264
274
|
|
|
275
|
+
Run the gates:
|
|
276
|
+
|
|
277
|
+
```bash
|
|
278
|
+
npm run check:a11y && npm run check:pages
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
`check:pages` needs a browser once: `npx playwright install chromium`.
|
|
282
|
+
|
|
283
|
+
Render the SassDoc API reference to `docs/api/`:
|
|
284
|
+
|
|
285
|
+
```bash
|
|
286
|
+
npm run docs:api
|
|
287
|
+
```
|
|
288
|
+
|
|
265
289
|
## License
|
|
266
290
|
|
|
267
291
|
MIT
|
package/dist/retro.css
CHANGED
|
@@ -339,13 +339,13 @@
|
|
|
339
339
|
--retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
340
340
|
--retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
341
341
|
--retro-font-mono: Courier New, Courier, monospace;
|
|
342
|
-
--retro-font-size:
|
|
343
|
-
--retro-font-size-xs: 0.
|
|
344
|
-
--retro-font-size-sm: 0.
|
|
345
|
-
--retro-font-size-lg:
|
|
346
|
-
--retro-font-size-xl: 1.
|
|
347
|
-
--retro-font-size-2xl: 1.
|
|
348
|
-
--retro-font-size-3xl: 1.
|
|
342
|
+
--retro-font-size: 1rem;
|
|
343
|
+
--retro-font-size-xs: 0.75rem;
|
|
344
|
+
--retro-font-size-sm: 0.875rem;
|
|
345
|
+
--retro-font-size-lg: 1.125rem;
|
|
346
|
+
--retro-font-size-xl: 1.25rem;
|
|
347
|
+
--retro-font-size-2xl: 1.5rem;
|
|
348
|
+
--retro-font-size-3xl: 1.875rem;
|
|
349
349
|
--retro-line-height: 1.5;
|
|
350
350
|
--retro-line-height-tight: 1.25;
|
|
351
351
|
--retro-font-weight-normal: 400;
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
box-sizing: border-box;
|
|
629
629
|
margin: 0;
|
|
630
630
|
padding: 0;
|
|
631
|
-
border-radius: 0
|
|
631
|
+
border-radius: 0;
|
|
632
632
|
box-shadow: none;
|
|
633
633
|
transition: none;
|
|
634
634
|
}
|
|
@@ -977,7 +977,6 @@ h5, h6 {
|
|
|
977
977
|
font-size: var(--retro-font-size-2xl);
|
|
978
978
|
font-weight: var(--retro-font-weight-bold);
|
|
979
979
|
text-transform: uppercase;
|
|
980
|
-
letter-spacing: 0.08em;
|
|
981
980
|
padding: 0.5rem 1.2rem;
|
|
982
981
|
margin-bottom: 0.5rem;
|
|
983
982
|
color: var(--retro-text);
|
|
@@ -1040,6 +1039,7 @@ h5, h6 {
|
|
|
1040
1039
|
.retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
|
|
1041
1040
|
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
1042
1041
|
margin-bottom: var(--retro-spacing-md);
|
|
1042
|
+
min-width: 0;
|
|
1043
1043
|
border: 2px solid;
|
|
1044
1044
|
position: relative;
|
|
1045
1045
|
font-family: var(--retro-font-heading);
|
|
@@ -1440,6 +1440,16 @@ h5, h6 {
|
|
|
1440
1440
|
.retro-code .retro-code-copy:active {
|
|
1441
1441
|
box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
|
|
1442
1442
|
}
|
|
1443
|
+
.retro-code .retro-code-copy.retro-code-copy-ok {
|
|
1444
|
+
background: var(--retro-success);
|
|
1445
|
+
color: var(--retro-success-fg);
|
|
1446
|
+
border-color: var(--retro-success-active);
|
|
1447
|
+
}
|
|
1448
|
+
.retro-code .retro-code-copy.retro-code-copy-fail {
|
|
1449
|
+
background: var(--retro-danger);
|
|
1450
|
+
color: var(--retro-danger-fg);
|
|
1451
|
+
border-color: var(--retro-danger-active);
|
|
1452
|
+
}
|
|
1443
1453
|
.retro-code code {
|
|
1444
1454
|
display: block;
|
|
1445
1455
|
padding: 1.2rem;
|
|
@@ -1779,7 +1789,7 @@ h5, h6 {
|
|
|
1779
1789
|
text-shadow: none;
|
|
1780
1790
|
padding: 8px 16px;
|
|
1781
1791
|
font-weight: bold;
|
|
1782
|
-
font-size:
|
|
1792
|
+
font-size: 1rem;
|
|
1783
1793
|
user-select: none;
|
|
1784
1794
|
display: block;
|
|
1785
1795
|
text-align: left;
|
|
@@ -1789,7 +1799,7 @@ h5, h6 {
|
|
|
1789
1799
|
padding: 16px 16px;
|
|
1790
1800
|
background: var(--retro-card-content-bg);
|
|
1791
1801
|
border-top: 2px solid var(--retro-card-content-bg);
|
|
1792
|
-
font-size:
|
|
1802
|
+
font-size: 1rem;
|
|
1793
1803
|
color: var(--retro-card-content-text);
|
|
1794
1804
|
min-height: 2em;
|
|
1795
1805
|
text-align: left;
|
|
@@ -1800,7 +1810,7 @@ h5, h6 {
|
|
|
1800
1810
|
border-top: 2px solid var(--retro-card-footer-bg);
|
|
1801
1811
|
color: var(--retro-card-footer-text);
|
|
1802
1812
|
padding: 8px 16px;
|
|
1803
|
-
font-size: 0.
|
|
1813
|
+
font-size: 0.875rem;
|
|
1804
1814
|
text-align: left;
|
|
1805
1815
|
}
|
|
1806
1816
|
|
|
@@ -1814,7 +1824,7 @@ h5, h6 {
|
|
|
1814
1824
|
|
|
1815
1825
|
.retro-card-compact .retro-card-content {
|
|
1816
1826
|
padding: 4px 8px;
|
|
1817
|
-
font-size: 0.
|
|
1827
|
+
font-size: 0.875rem;
|
|
1818
1828
|
}
|
|
1819
1829
|
|
|
1820
1830
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -2576,7 +2586,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2576
2586
|
min-width: 0;
|
|
2577
2587
|
}
|
|
2578
2588
|
|
|
2579
|
-
.retro-toast-close {
|
|
2589
|
+
.retro-alert-close, .retro-toast-close {
|
|
2580
2590
|
background: none;
|
|
2581
2591
|
border: none;
|
|
2582
2592
|
color: inherit;
|
|
@@ -2584,12 +2594,15 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2584
2594
|
font-weight: bold;
|
|
2585
2595
|
margin-left: auto;
|
|
2586
2596
|
cursor: pointer;
|
|
2587
|
-
opacity:
|
|
2588
|
-
|
|
2597
|
+
opacity: 1;
|
|
2598
|
+
line-height: 1;
|
|
2599
|
+
padding: 0 0.25em;
|
|
2600
|
+
transition: background-color 0.2s;
|
|
2589
2601
|
}
|
|
2590
2602
|
|
|
2591
|
-
.retro-toast-close:hover
|
|
2592
|
-
|
|
2603
|
+
.retro-alert-close:hover, .retro-toast-close:hover,
|
|
2604
|
+
.retro-alert-close:focus-visible, .retro-toast-close:focus-visible {
|
|
2605
|
+
background-color: rgba(var(--retro-shadow-rgb), 0.18);
|
|
2593
2606
|
}
|
|
2594
2607
|
|
|
2595
2608
|
.retro-alert-primary {
|
|
@@ -2735,7 +2748,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2735
2748
|
background-color: var(--retro-table-bg);
|
|
2736
2749
|
color: var(--retro-table-header-text);
|
|
2737
2750
|
font-family: var(--retro-font);
|
|
2738
|
-
font-size:
|
|
2751
|
+
font-size: 1rem;
|
|
2739
2752
|
box-shadow: var(--retro-box-shadow-outset-button);
|
|
2740
2753
|
overflow-x: auto;
|
|
2741
2754
|
margin-bottom: var(--retro-spacing-md);
|
|
@@ -2765,12 +2778,43 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2765
2778
|
.retro-table tbody tr:hover {
|
|
2766
2779
|
background-color: var(--retro-table-striped-bg);
|
|
2767
2780
|
}
|
|
2781
|
+
.retro-table thead th.retro-th-sortable {
|
|
2782
|
+
cursor: pointer;
|
|
2783
|
+
user-select: none;
|
|
2784
|
+
padding-right: calc(var(--retro-spacing-md) + 14px);
|
|
2785
|
+
position: relative;
|
|
2786
|
+
}
|
|
2787
|
+
.retro-table thead th.retro-th-sortable:hover {
|
|
2788
|
+
background-color: var(--retro-primary);
|
|
2789
|
+
color: var(--retro-primary-fg);
|
|
2790
|
+
}
|
|
2791
|
+
.retro-table thead th.retro-th-sortable:focus-visible {
|
|
2792
|
+
outline: 2px solid var(--retro-border-light);
|
|
2793
|
+
outline-offset: -3px;
|
|
2794
|
+
}
|
|
2795
|
+
.retro-table thead th.retro-th-sortable::after {
|
|
2796
|
+
content: "\11 95";
|
|
2797
|
+
position: absolute;
|
|
2798
|
+
right: 6px;
|
|
2799
|
+
top: 50%;
|
|
2800
|
+
transform: translateY(-50%);
|
|
2801
|
+
font-size: var(--retro-font-size-xs);
|
|
2802
|
+
opacity: 0.45;
|
|
2803
|
+
}
|
|
2804
|
+
.retro-table thead th.retro-th-sortable.asc::after {
|
|
2805
|
+
content: "\15 B2";
|
|
2806
|
+
opacity: 1;
|
|
2807
|
+
}
|
|
2808
|
+
.retro-table thead th.retro-th-sortable.desc::after {
|
|
2809
|
+
content: "\15 BC";
|
|
2810
|
+
opacity: 1;
|
|
2811
|
+
}
|
|
2768
2812
|
.retro-table.retro-table-striped tbody tr:nth-child(odd) {
|
|
2769
2813
|
background-color: var(--retro-table-striped-bg);
|
|
2770
2814
|
}
|
|
2771
2815
|
.retro-table.retro-table-striped tbody tr:nth-child(odd):hover {
|
|
2772
2816
|
background-color: var(--retro-primary);
|
|
2773
|
-
color: var(--retro-
|
|
2817
|
+
color: var(--retro-primary-fg);
|
|
2774
2818
|
}
|
|
2775
2819
|
.retro-table.retro-table-bordered {
|
|
2776
2820
|
border: 2px solid var(--retro-border-dark);
|
|
@@ -2808,6 +2852,27 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2808
2852
|
width: 16px;
|
|
2809
2853
|
}
|
|
2810
2854
|
|
|
2855
|
+
/**
|
|
2856
|
+
* @name Responsive Table Wrapper
|
|
2857
|
+
* @group components
|
|
2858
|
+
* @description
|
|
2859
|
+
* Horizontal scroll container for a wide table. `table-responsive.js` wraps
|
|
2860
|
+
* every `.retro-table` in this class — but the styles had been commented out,
|
|
2861
|
+
* so the wrapper was inert and wide tables simply overflowed the page on
|
|
2862
|
+
* narrow viewports.
|
|
2863
|
+
*/
|
|
2864
|
+
.retro-table-responsive {
|
|
2865
|
+
display: block;
|
|
2866
|
+
width: 100%;
|
|
2867
|
+
max-width: 100%;
|
|
2868
|
+
min-width: 0;
|
|
2869
|
+
overflow-x: auto;
|
|
2870
|
+
-webkit-overflow-scrolling: touch;
|
|
2871
|
+
}
|
|
2872
|
+
.retro-table-responsive > .retro-table {
|
|
2873
|
+
margin-bottom: 0;
|
|
2874
|
+
}
|
|
2875
|
+
|
|
2811
2876
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2812
2877
|
/* Main SCSS file that imports all components */
|
|
2813
2878
|
/* Core */
|
|
@@ -3050,7 +3115,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3050
3115
|
}
|
|
3051
3116
|
.retro-nav-item.active, .active.retro-tab {
|
|
3052
3117
|
background: var(--retro-primary);
|
|
3053
|
-
color: var(--retro-
|
|
3118
|
+
color: var(--retro-primary-fg);
|
|
3054
3119
|
text-shadow: 0 1px 2px var(--retro-border-dark), 0 0 2px var(--retro-border-light);
|
|
3055
3120
|
outline: 2px solid var(--retro-border-light);
|
|
3056
3121
|
outline-offset: -2px;
|
|
@@ -3125,6 +3190,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3125
3190
|
display: flex;
|
|
3126
3191
|
flex-direction: column;
|
|
3127
3192
|
width: max-content;
|
|
3193
|
+
max-width: 100%;
|
|
3128
3194
|
border: 2px solid var(--retro-border-dark);
|
|
3129
3195
|
background: var(--retro-light);
|
|
3130
3196
|
padding: 0;
|
|
@@ -3165,11 +3231,11 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3165
3231
|
}
|
|
3166
3232
|
.retro-nav-pills .retro-nav-item:hover, .retro-nav-pills .retro-tab:hover {
|
|
3167
3233
|
background: var(--retro-primary);
|
|
3168
|
-
color: var(--retro-
|
|
3234
|
+
color: var(--retro-primary-fg);
|
|
3169
3235
|
}
|
|
3170
3236
|
.retro-nav-pills .retro-nav-item.active, .retro-nav-pills .active.retro-tab {
|
|
3171
3237
|
background: var(--retro-primary);
|
|
3172
|
-
color: var(--retro-
|
|
3238
|
+
color: var(--retro-primary-fg);
|
|
3173
3239
|
font-weight: bold;
|
|
3174
3240
|
box-shadow: 0 1px 4px rgba(var(--retro-primary-rgb), 0.35) inset;
|
|
3175
3241
|
}
|
|
@@ -3251,6 +3317,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3251
3317
|
|
|
3252
3318
|
.retro-nav-tabbed {
|
|
3253
3319
|
display: flex;
|
|
3320
|
+
flex-wrap: wrap;
|
|
3254
3321
|
padding: 0;
|
|
3255
3322
|
margin: 0 0 -1px 0;
|
|
3256
3323
|
background: transparent;
|
|
@@ -3284,6 +3351,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3284
3351
|
|
|
3285
3352
|
.retro-nav-underlined {
|
|
3286
3353
|
display: flex;
|
|
3354
|
+
flex-wrap: wrap;
|
|
3287
3355
|
padding: 0;
|
|
3288
3356
|
margin: 0;
|
|
3289
3357
|
background: transparent;
|
|
@@ -3326,6 +3394,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3326
3394
|
|
|
3327
3395
|
.retro-nav-buttons {
|
|
3328
3396
|
display: inline-flex;
|
|
3397
|
+
flex-wrap: wrap;
|
|
3329
3398
|
padding: 0;
|
|
3330
3399
|
margin: 0;
|
|
3331
3400
|
background: transparent;
|
|
@@ -3360,7 +3429,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3360
3429
|
}
|
|
3361
3430
|
.retro-nav-buttons .retro-nav-item.active, .retro-nav-buttons .active.retro-tab {
|
|
3362
3431
|
background: var(--retro-primary);
|
|
3363
|
-
color: var(--retro-
|
|
3432
|
+
color: var(--retro-primary-fg);
|
|
3364
3433
|
z-index: 2;
|
|
3365
3434
|
}
|
|
3366
3435
|
|
|
@@ -3796,7 +3865,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3796
3865
|
.retro-pagination .retro-btn.active,
|
|
3797
3866
|
.retro-pagination .retro-btn:active {
|
|
3798
3867
|
background: var(--retro-primary);
|
|
3799
|
-
color: var(--retro-
|
|
3868
|
+
color: var(--retro-primary-fg);
|
|
3800
3869
|
font-weight: bold;
|
|
3801
3870
|
border-color: var(--retro-primary);
|
|
3802
3871
|
}
|
|
@@ -3807,6 +3876,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3807
3876
|
.retro-breadcrumbs {
|
|
3808
3877
|
display: flex;
|
|
3809
3878
|
align-items: center;
|
|
3879
|
+
flex-wrap: wrap;
|
|
3810
3880
|
font-family: var(--retro-font);
|
|
3811
3881
|
font-size: var(--retro-font-size-lg);
|
|
3812
3882
|
background: var(--retro-card-bg);
|
|
@@ -3857,7 +3927,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3857
3927
|
}
|
|
3858
3928
|
.retro-dropdown.open .retro-dropdown-toggle {
|
|
3859
3929
|
background: var(--retro-primary);
|
|
3860
|
-
color: var(--retro-
|
|
3930
|
+
color: var(--retro-primary-fg);
|
|
3861
3931
|
border-color: var(--retro-primary-dark);
|
|
3862
3932
|
}
|
|
3863
3933
|
|
|
@@ -3933,7 +4003,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3933
4003
|
}
|
|
3934
4004
|
.retro-dropdown-item:hover {
|
|
3935
4005
|
background: var(--retro-primary);
|
|
3936
|
-
color: var(--retro-
|
|
4006
|
+
color: var(--retro-primary-fg);
|
|
3937
4007
|
}
|
|
3938
4008
|
.retro-dropdown-item:active {
|
|
3939
4009
|
background: var(--retro-primary-dark);
|
|
@@ -4102,7 +4172,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4102
4172
|
}
|
|
4103
4173
|
.retro-search-suggestion:hover {
|
|
4104
4174
|
background: var(--retro-primary);
|
|
4105
|
-
color: var(--retro-
|
|
4175
|
+
color: var(--retro-primary-fg);
|
|
4106
4176
|
}
|
|
4107
4177
|
|
|
4108
4178
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -4116,7 +4186,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4116
4186
|
|
|
4117
4187
|
.retro-rating-star {
|
|
4118
4188
|
font-size: var(--retro-font-size-3xl);
|
|
4119
|
-
color: var(--retro-
|
|
4189
|
+
color: var(--retro-text-muted);
|
|
4120
4190
|
cursor: pointer;
|
|
4121
4191
|
transition: color 0.2s, text-shadow 0.2s, border 0.2s;
|
|
4122
4192
|
text-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -4251,9 +4321,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4251
4321
|
box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
|
|
4252
4322
|
z-index: 1050;
|
|
4253
4323
|
pointer-events: none;
|
|
4254
|
-
|
|
4255
|
-
visibility: hidden;
|
|
4256
|
-
transition: opacity 0.2s, visibility 0.2s;
|
|
4324
|
+
display: none;
|
|
4257
4325
|
font-family: var(--retro-font);
|
|
4258
4326
|
max-width: 200px;
|
|
4259
4327
|
line-height: 1.4;
|
|
@@ -4268,8 +4336,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4268
4336
|
/* Active state */
|
|
4269
4337
|
}
|
|
4270
4338
|
.retro-tooltip.show {
|
|
4271
|
-
|
|
4272
|
-
visibility: visible;
|
|
4339
|
+
display: block;
|
|
4273
4340
|
}
|
|
4274
4341
|
.retro-tooltip {
|
|
4275
4342
|
/* Positions */
|
|
@@ -4345,7 +4412,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4345
4412
|
}
|
|
4346
4413
|
.retro-tooltip.retro-tooltip-primary {
|
|
4347
4414
|
background: var(--retro-primary);
|
|
4348
|
-
color: var(--retro-
|
|
4415
|
+
color: var(--retro-primary-fg);
|
|
4349
4416
|
}
|
|
4350
4417
|
.retro-tooltip.retro-tooltip-primary.retro-tooltip-top::after {
|
|
4351
4418
|
border-top-color: var(--retro-primary);
|
|
@@ -4361,7 +4428,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4361
4428
|
}
|
|
4362
4429
|
.retro-tooltip.retro-tooltip-success {
|
|
4363
4430
|
background: var(--retro-success);
|
|
4364
|
-
color: var(--retro-
|
|
4431
|
+
color: var(--retro-success-fg);
|
|
4365
4432
|
}
|
|
4366
4433
|
.retro-tooltip.retro-tooltip-success.retro-tooltip-top::after {
|
|
4367
4434
|
border-top-color: var(--retro-success);
|
|
@@ -4393,7 +4460,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4393
4460
|
}
|
|
4394
4461
|
.retro-tooltip.retro-tooltip-danger {
|
|
4395
4462
|
background: var(--retro-danger);
|
|
4396
|
-
color: var(--retro-
|
|
4463
|
+
color: var(--retro-danger-fg);
|
|
4397
4464
|
}
|
|
4398
4465
|
.retro-tooltip.retro-tooltip-danger.retro-tooltip-top::after {
|
|
4399
4466
|
border-top-color: var(--retro-danger);
|
|
@@ -4474,7 +4541,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4474
4541
|
}
|
|
4475
4542
|
.retro-list-hover li:hover, .retro-list-hover li:focus-visible {
|
|
4476
4543
|
background-color: var(--retro-primary);
|
|
4477
|
-
color: var(--retro-
|
|
4544
|
+
color: var(--retro-primary-fg);
|
|
4478
4545
|
box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.06);
|
|
4479
4546
|
outline: none;
|
|
4480
4547
|
}
|
|
@@ -4504,7 +4571,7 @@ ol.retro-list li::before {
|
|
|
4504
4571
|
width: 2em;
|
|
4505
4572
|
height: 2em;
|
|
4506
4573
|
background: var(--retro-primary);
|
|
4507
|
-
color: var(--retro-
|
|
4574
|
+
color: var(--retro-primary-fg);
|
|
4508
4575
|
font-weight: bold;
|
|
4509
4576
|
font-family: inherit;
|
|
4510
4577
|
font-size: 1.1em;
|
|
@@ -4532,7 +4599,7 @@ ol.retro-list li ol.retro-list li::before {
|
|
|
4532
4599
|
height: 1.5em;
|
|
4533
4600
|
font-size: 0.95em;
|
|
4534
4601
|
background: var(--retro-success);
|
|
4535
|
-
color: var(--retro-
|
|
4602
|
+
color: var(--retro-success-fg);
|
|
4536
4603
|
border-radius: 4px;
|
|
4537
4604
|
border: 2px solid var(--retro-border-medium);
|
|
4538
4605
|
top: 0.1em;
|
|
@@ -7633,17 +7700,6 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
7633
7700
|
container-name: retro-container;
|
|
7634
7701
|
}
|
|
7635
7702
|
|
|
7636
|
-
@container retro-container (min-width: 20rem) {}
|
|
7637
|
-
@container retro-container (min-width: 30rem) {}
|
|
7638
|
-
@container retro-container (min-width: 40rem) {}
|
|
7639
|
-
@container retro-container (min-width: 50rem) {}
|
|
7640
|
-
@container retro-container (min-aspect-ratio: 16/9) {}
|
|
7641
|
-
@container retro-container (max-aspect-ratio: 4/3) {}
|
|
7642
|
-
@container retro-container (orientation: landscape) {}
|
|
7643
|
-
@container retro-container (orientation: portrait) {}
|
|
7644
|
-
@container retro-container (min-width: 20rem) and (max-width: 30rem) {}
|
|
7645
|
-
@container retro-container (min-width: 30rem) and (max-width: 40rem) {}
|
|
7646
|
-
@container retro-container (min-width: 40rem) and (max-width: 50rem) {}
|
|
7647
7703
|
@container retro-container (max-width: 20rem) {
|
|
7648
7704
|
.retro-cq-hide {
|
|
7649
7705
|
display: none;
|