Skip to content

Commit 5fa6386

Browse files
kategenglerkategengler
committed
Move styles to be imported by app.js to avoid classic build pipeline (through embroider) that uses a css optimizer that has a bug that strips media queries
See embroider-build/embroider#1358
1 parent 2d96b46 commit 5fa6386

File tree

3 files changed

+358
-355
lines changed

3 files changed

+358
-355
lines changed

‎app/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import loadInitializers from 'ember-load-initializers';
44
import config from 'ember-api-docs/config/environment';
55
import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
66
import 'ember-power-select/styles';
7+
import './assets/styles.css';
78

89
if (macroCondition(isDevelopingApp())) {
910
importSync('./deprecation-workflow');

‎app/assets/styles.css‎

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
/* stylelint-disable no-descending-specificity, selector-class-pattern */
2+
3+
html {
4+
scroll-padding-top: var(--spacing-3);
5+
}
6+
7+
.article-title-wrapper {
8+
display: flex;
9+
justify-content: space-between;
10+
align-items: center;
11+
}
12+
13+
.module-name {
14+
display: inline-flex;
15+
align-items: center;
16+
flex-wrap: wrap;
17+
gap: var(--spacing-1);
18+
margin-bottom: 0;
19+
}
20+
21+
.access {
22+
color: #fff;
23+
background-color: var(--color-gray-600);
24+
padding: 0.25rem var(--spacing-1);
25+
font-size: var(--font-size-md);
26+
border-radius: var(--radius);
27+
vertical-align: middle;
28+
}
29+
30+
main a.edit-icon {
31+
height: 1rem;
32+
width: 16px;
33+
display: inline-block;
34+
background: none;
35+
}
36+
37+
.sidebar-container {
38+
--sidebar-width: min-content;
39+
}
40+
41+
.es-sidebar-content .table-of-contents:first-child {
42+
margin-block-start: 0;
43+
}
44+
45+
.table-of-contents {
46+
list-style-type: none;
47+
padding-left: 0;
48+
font-size: var(--font-size-base);
49+
font-weight: var(--font-weight-3);
50+
}
51+
52+
.sub-table-of-contents {
53+
padding-left: var(--spacing-1);
54+
font-size: var(--font-size-base);
55+
font-weight: var(--font-weight-2);
56+
}
57+
58+
.sub-table-of-contents .sub-table-of-contents {
59+
padding-left: var(--spacing-3);
60+
margin-bottom: 0;
61+
}
62+
63+
.table-of-contents a:link {
64+
background: none;
65+
}
66+
67+
.sub-table-of-contents .toc-item a {
68+
display: block;
69+
padding: var(--spacing-1);
70+
border-radius: var(--radius);
71+
line-height: var(--line-height-xs);
72+
color: var(--color-gray-700);
73+
border-left: 0 solid transparent;
74+
transition: border-width 0.3s;
75+
}
76+
77+
.sub-table-of-contents .toc-item a:hover {
78+
border-left: 4px solid var(--color-gray-400);
79+
border-radius: 0;
80+
}
81+
82+
.sub-table-of-contents .toc-item.selected > a,
83+
.sub-table-of-contents .toc-item > a.active {
84+
border-left: 4px solid var(--color-brand-hc-dark);
85+
border-radius: 0;
86+
}
87+
88+
.table-of-contents li {
89+
margin: 3px 0;
90+
list-style-type: none;
91+
color: var(--color-gray-600);
92+
}
93+
94+
li.toc-heading {
95+
margin-top: var(--spacing-4);
96+
color: var(--color-gray-600);
97+
}
98+
99+
li.toc-heading:first-child {
100+
margin-top: 0;
101+
}
102+
103+
.toc-private-toggle {
104+
display: block;
105+
margin-top: var(--spacing-2);
106+
}
107+
108+
.class-field-description--header {
109+
display: flex;
110+
align-items: center;
111+
flex-wrap: wrap;
112+
column-gap: var(--spacing-1);
113+
}
114+
115+
a.class-field-description--link {
116+
margin-left: 0;
117+
vertical-align: middle;
118+
background: none;
119+
cursor: pointer;
120+
}
121+
122+
a.class-field-description--link svg {
123+
height: 18px;
124+
fill: var(--color-gray-600);
125+
transform: rotate(45deg);
126+
vertical-align: middle;
127+
}
128+
129+
a.class-field-description--link:hover svg {
130+
fill: var(--color-brand);
131+
}
132+
133+
.parameter,
134+
.return {
135+
display: flex;
136+
gap: var(--spacing-1);
137+
}
138+
139+
.parameter dt,
140+
.return dt {
141+
font-weight: bold;
142+
}
143+
144+
dd {
145+
margin: 0;
146+
}
147+
148+
.class-field-description .args {
149+
font-weight: var(--font-weight-2);
150+
}
151+
152+
.parameter-type,
153+
.class-field-description .return-type,
154+
.return .return-type {
155+
font-style: italic;
156+
color: var(--color-gray-600);
157+
}
158+
159+
.on-this-page-wrapper .access-checkbox-list {
160+
display: flex;
161+
flex-direction: column;
162+
}
163+
164+
.on-this-page-wrapper .api-index-filter {
165+
margin-top: var(--spacing-2);
166+
}
167+
168+
.on-this-page-wrapper ul {
169+
margin-top: 0;
170+
}
171+
172+
section.method,
173+
section.property,
174+
section.event {
175+
margin-bottom: var(--spacing-3);
176+
}
177+
178+
.whoops {
179+
display: flex;
180+
justify-content: center;
181+
align-items: center;
182+
padding: var(--spacing-6);
183+
}
184+
185+
.whoops img {
186+
width: 240px;
187+
margin: var(--spacing-2);
188+
}
189+
190+
.search-wrapper {
191+
position: relative;
192+
}
193+
194+
.search-results {
195+
position: absolute;
196+
right: 0;
197+
top: 100%;
198+
width: 25vw;
199+
min-width: 500px;
200+
background-color: white;
201+
color: black;
202+
border-radius: 8px;
203+
margin-top: 10px;
204+
border: 2px solid var(--color-card-border);
205+
overflow-x: auto;
206+
max-height: 70dvh;
207+
z-index: 1;
208+
}
209+
210+
@media (width <= 500px) {
211+
.search-results {
212+
width: 95dvw;
213+
min-width: auto;
214+
max-height: initial;
215+
}
216+
}
217+
218+
.search-results--instructions,
219+
.search-results--no-results,
220+
.search-results--searching,
221+
.search-results--group-header,
222+
.search-results--result {
223+
padding: 8px 16px;
224+
}
225+
226+
.search-results--result {
227+
display: flex;
228+
border-bottom: 1px solid var(--color-card-border);
229+
gap: 10px;
230+
font-size: 14px;
231+
}
232+
233+
.search-results--subcategory-column {
234+
font-weight: bold;
235+
max-width: 33%;
236+
flex-basis: 33%;
237+
overflow-wrap: break-word;
238+
}
239+
240+
.search-results--content {
241+
flex: 1 0 0;
242+
}
243+
244+
.search-results--no-results {
245+
color: var(--color-gray-600);
246+
}
247+
248+
.search-results--group-header {
249+
background-color: var(--color-info);
250+
}
251+
252+
.visually-hidden,
253+
.screen-reader-text {
254+
position: absolute;
255+
width: 1px;
256+
height: 1px;
257+
padding: 0;
258+
margin: -1px;
259+
overflow: hidden;
260+
clip: rect(0, 0, 0, 0);
261+
white-space: nowrap;
262+
border: 0;
263+
}
264+
265+
/* Ember data uses styled elements in markdown blocks that conflict with the
266+
default styles for blockquotes (because of ::before block that has an
267+
absolutely positioned quote mark).
268+
*/
269+
blockquote[style]::before {
270+
all: initial;
271+
}
272+
273+
/* Styles for tables (from markdown)
274+
Should probably be upstreamed to ember-styleguide
275+
*/
276+
table {
277+
text-align: left;
278+
border-collapse: collapse;
279+
}
280+
281+
table tr {
282+
border-bottom: 1px solid var(--color-gray-300);
283+
}
284+
285+
table th,
286+
table td {
287+
padding: var(--spacing-1);
288+
}
289+
290+
/* Taken from guidemaker for search
291+
Should probably move to ember-styleguide
292+
*/
293+
294+
.es-navbar {
295+
max-width: 100%;
296+
}
297+
298+
.search-input {
299+
border-radius: 18px;
300+
border: 2px solid var(--color-card-border);
301+
line-height: 30px;
302+
padding-left: 8px;
303+
width: 100%;
304+
}
305+
306+
.powered-by-algolia {
307+
display: flex;
308+
justify-content: end;
309+
margin: 8px;
310+
}
311+
312+
.powered-by-algolia a {
313+
display: flex;
314+
}
315+
316+
@media (width >= 1008px) {
317+
.navbar-list {
318+
flex-grow: 1;
319+
}
320+
}
321+
322+
/* End taken from guidemaker for search */
323+
324+
@media (width >= 845px) {
325+
.es-header {
326+
padding: 0 var(--spacing-4);
327+
justify-content: start;
328+
}
329+
330+
.es-sidebar {
331+
padding: var(--spacing-4);
332+
background-color: var(--color-gray-200);
333+
}
334+
335+
.content {
336+
margin-top: var(--spacing-4);
337+
}
338+
}
339+
340+
@media (width <= 450px) {
341+
.whoops {
342+
flex-direction: column;
343+
padding: var(--spacing-3);
344+
}
345+
346+
.whoops img {
347+
width: 80%;
348+
margin: var(--spacing-4);
349+
}
350+
351+
.whoops__message {
352+
margin: var(--spacing-2);
353+
text-align: center;
354+
}
355+
}

0 commit comments

Comments
 (0)