Skip to content

Commit e7f792e

Browse files
reitermbreitermb
authored
Merge pull request #5552 from raft-tech/KC-Refit-Dec2025
KC navigation refit, search, PIA tweaks, centralized feedback reports
2 parents c503e8e + 9def24c commit e7f792e

38 files changed

+5574
-3955
lines changed

‎product-updates/css/uswds3.css‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,64 @@
99
margin:1.25rem 0;
1010
text-align:left;
1111
}
12+
.usa-in-page-nav-container{
13+
align-items: flex-start;
14+
display: flex;
15+
}
1216
.usa-table thead th, .usa-prose > table thead th{
1317
background-clip:padding-box;
1418
color:#1b1b1b;
1519
font-weight:700;
1620
line-height:1.3;
1721
}
22+
.search-pill {
23+
background-color: white; border-radius: 100px; padding: 8px; position: relative; border-color: #005ea2; color: #005ea2; font-weight: bold; margin-top: 8px; margin-right: 8px; box-shadow: none; cursor: pointer;
24+
}
25+
.on-this-page {
26+
position: fixed;
27+
right: 0;
28+
top: 8em;
29+
width: 17%;
30+
height: 100vh;
31+
overflow-y: auto;
32+
padding: 2rem;
33+
}
34+
@media (max-width: 86em) {
35+
.on-this-page {
36+
display: none;
37+
}
38+
}
39+
40+
41+
.on-this-page ul {
42+
list-style: none;
43+
margin: 0;
44+
padding: 0;
45+
}
46+
47+
.on-this-page li {
48+
margin: 0.5rem 0;
49+
}
50+
51+
.on-this-page a {
52+
text-decoration: none;
53+
color: #333;
54+
transition: color 0.2s ease;
55+
}
56+
57+
.on-this-page a.active {
58+
color: #0078d4; /* Microsoft blue */
59+
font-weight: bold;
60+
position: relative;
61+
}
62+
63+
.on-this-page a.active::before {
64+
content: "•";
65+
position: absolute;
66+
left: -1rem;
67+
color: #0078d4;
68+
}
69+
1870
.usa-table thead th, .usa-prose > table thead th,
1971
.usa-table thead td,
2072
.usa-prose > table thead td{
@@ -32,6 +84,13 @@
3284
font-weight:normal;
3385
padding:0.5rem 1rem;
3486
}
87+
.releaseHr {
88+
border: none;
89+
height: 1px;
90+
background: #000;
91+
margin-top: 32px;
92+
background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
93+
}
3594
.usa-table caption, .usa-prose > table caption{
3695
font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
3796
font-size:1rem;
@@ -3907,10 +3966,11 @@ dfn{
39073966

39083967
@media all and (max-width: 63.99em){
39093968
.usa-logo{
3910-
flex:1 1 0%;
3969+
/*flex:1 1 0%;*/
39113970
font-size:0.93rem;
39123971
line-height:0.9;
39133972
margin-left:1rem;
3973+
width: 100%;
39143974
}
39153975
}
39163976
@media all and (min-width: 64em){

‎product-updates/img/data-files/2-search-component-deprecated.png‎

113 KB
Loading

‎product-updates/img/data-files/2-search-component.png‎

28.2 KB
Loading

‎product-updates/img/feedback-reports/download.png‎

193 KB
Loading

‎product-updates/img/feedback-reports/email.jpg‎

89.6 KB
Loading

‎product-updates/img/feedback-reports/feedback-available.png‎

104 KB
Loading

‎product-updates/img/feedback-reports/feedback-reports-tab.png‎

196 KB
Loading

‎product-updates/img/logo-img.png‎

211 KB
Loading

‎product-updates/knowledge-center/Reference TANF & SSP WPR & TL Feedback Reports.xlsx‎

630 KB
Binary file not shown.

‎product-updates/knowledge-center/Skeleton.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>SVG Icon with Shimmer Overlay</title>
6+
<style>
7+
.icon-container {
8+
position: relative;
9+
width: 48px;
10+
height: 48px;
11+
margin: 20px;
12+
}
13+
14+
.icon-container svg {
15+
width: 100%;
16+
height: 100%;
17+
display: block;
18+
fill: #ccc;
19+
}
20+
21+
.skeleton-text-block {
22+
max-width: 400px;
23+
margin: 20px auto;
24+
}
25+
26+
.skeleton-line {
27+
height: 12px;
28+
margin: 8px 0;
29+
border-radius: 4px;
30+
background: linear-gradient(
31+
-90deg,
32+
#e0e0e0 25%,
33+
#f0f0f0 50%,
34+
#e0e0e0 75%
35+
);
36+
background-size: 200% 100%;
37+
animation: shimmer 4.4s infinite;
38+
}
39+
40+
.skeleton-line.sm {
41+
width: 30%;
42+
}
43+
44+
.skeleton-line.md {
45+
width: 60%;
46+
}
47+
48+
.skeleton-line.lg {
49+
width: 90%;
50+
}
51+
52+
@keyframes shimmer {
53+
0% {
54+
background-position: -200% 0;
55+
}
56+
100% {
57+
background-position: 200% 0;
58+
}
59+
}
60+
61+
62+
.shimmer-overlay {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
width: 100%;
67+
height: 100%;
68+
border-radius: 8px;
69+
background: linear-gradient(
70+
90deg,
71+
rgba(255,255,255,0) 0%,
72+
rgba(255,255,255,0.6) 50%,
73+
rgba(255,255,255,0) 100%
74+
);
75+
background-size: 200% 100%;
76+
animation: shimmer 4.5s infinite;
77+
pointer-events: none; /* allows clicks to pass through */
78+
}
79+
80+
@keyframes shimmer {
81+
0% {
82+
background-position: -200% 0;
83+
}
84+
100% {
85+
background-position: 200% 0;
86+
}
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
<table border="1" cellpadding="6" cellspacing="0">
92+
<thead>
93+
<tr>
94+
<th>Date & Time</th>
95+
<th>Item</th>
96+
<th>Month</th>
97+
<th>Status</th>
98+
<th>Status</th>
99+
<th>Final Status</th>
100+
<th>Error Report</th>
101+
</tr>
102+
</thead>
103+
<tbody>
104+
<tr>
105+
<td rowspan="3">11/14/2021 at 12:00 AM<br>by Horace Slughorn</td>
106+
<td rowspan="3"><a href="#">ADS.ET2JFP1.TS58</a></td>
107+
<td><div class="skeleton-line md"></div></td>
108+
<td> <div class="skeleton-line md"></div>
109+
</td>
110+
<td><div class="skeleton-line md"></div></td>
111+
<td rowspan="3"><div class="skeleton-line md"></div></td>
112+
<td rowspan="3"><a href="#"><div class="skeleton-line lg"></div></a></td>
113+
</tr>
114+
<tr>
115+
<td><div class="skeleton-line md"></div></td>
116+
<td><div class="skeleton-line md"></div></td>
117+
<td><div class="skeleton-line md"></div></td>
118+
</tr>
119+
<tr>
120+
<td><div class="skeleton-line md"></div></td>
121+
<td><div class="skeleton-line md"></div></td>
122+
<td><div class="skeleton-line md"></div></td>
123+
</tr>
124+
</tbody>
125+
</table>
126+
<div class="icon-container">
127+
<!-- Example download SVG icon -->
128+
<svg viewBox="0 0 24 24">
129+
<path d="M5 20h14v-2H5v2zm7-18l-5.5 5.5h4v6h3v-6h4L12 2z"/>
130+
</svg>
131+
<div class="shimmer-overlay"></div>
132+
</div>
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)