Skip to content

Commit a2e5c3c

Browse files
authored
Replace Fomantic reset module with our own (#24948)
Replace the `reset` module with a modern version based on [modern-normalize](https://github.com/sindresorhus/modern-normalize). The only things I removed from that module are the `font-family` rules we don't need. Otherwise, it's similar to Fomantic's reset, but with the legacy IE stuff removed. I documented every change done to the module. Also this introduces a new `--tab-size` variable but it has no real effect on code yet.
1 parent 1fa50f3 commit a2e5c3c

File tree

5 files changed

+246
-422
lines changed

5 files changed

+246
-422
lines changed

web_src/css/base.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
--border-radius: 0.28571429rem;
1717
--opacity-disabled: 0.55;
1818
--height-loading: 16rem;
19+
--tab-size: 4;
1920
/* base colors */
2021
--color-primary: #4183c4;
2122
--color-primary-contrast: #ffffff;
@@ -230,6 +231,7 @@ h6 {
230231
body {
231232
color: var(--color-text);
232233
background-color: var(--color-body);
234+
tab-size: var(--tab-size);
233235
overflow-y: auto;
234236
display: flex;
235237
flex-direction: column;

web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "./modules/normalize.css";
12
@import "./modules/animations.css";
23
@import "./modules/tippy.css";
34
@import "./modules/modal.css";

web_src/css/modules/normalize.css

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
/*
2+
This is copy of modern-normalize with these changes done:
3+
4+
- Remove html font-family, we set our own
5+
- Remove html tab-size, we set our own
6+
- Remove b,strong font-weight, we set our own
7+
- Remove b,code,samp,pre font-size, we set our own
8+
*/
9+
10+
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
11+
12+
/*
13+
Document
14+
========
15+
*/
16+
17+
/**
18+
Use a better box model (opinionated).
19+
*/
20+
21+
*,
22+
::before,
23+
::after {
24+
box-sizing: border-box;
25+
}
26+
27+
html {
28+
line-height: 1.15; /* 1. Correct the line height in all browsers. */
29+
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
30+
}
31+
32+
/*
33+
Sections
34+
========
35+
*/
36+
37+
body {
38+
margin: 0; /* Remove the margin in all browsers. */
39+
}
40+
41+
/*
42+
Grouping content
43+
================
44+
*/
45+
46+
/**
47+
1. Add the correct height in Firefox.
48+
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
49+
*/
50+
51+
hr {
52+
height: 0; /* 1 */
53+
color: inherit; /* 2 */
54+
}
55+
56+
/*
57+
Text-level semantics
58+
====================
59+
*/
60+
61+
/**
62+
Add the correct text decoration in Chrome, Edge, and Safari.
63+
*/
64+
65+
abbr[title] {
66+
text-decoration: underline dotted;
67+
}
68+
69+
/**
70+
Add the correct font size in all browsers.
71+
*/
72+
73+
small {
74+
font-size: 80%;
75+
}
76+
77+
/**
78+
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
79+
*/
80+
81+
sub,
82+
sup {
83+
font-size: 75%;
84+
line-height: 0;
85+
position: relative;
86+
vertical-align: baseline;
87+
}
88+
89+
sub {
90+
bottom: -0.25em;
91+
}
92+
93+
sup {
94+
top: -0.5em;
95+
}
96+
97+
/*
98+
Tabular data
99+
============
100+
*/
101+
102+
/**
103+
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
104+
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
105+
*/
106+
107+
table {
108+
text-indent: 0; /* 1 */
109+
border-color: inherit; /* 2 */
110+
}
111+
112+
/*
113+
Forms
114+
=====
115+
*/
116+
117+
/**
118+
1. Change the font styles in all browsers.
119+
2. Remove the margin in Firefox and Safari.
120+
*/
121+
122+
button,
123+
input,
124+
optgroup,
125+
select,
126+
textarea {
127+
font-family: inherit; /* 1 */
128+
font-size: 100%; /* 1 */
129+
line-height: 1.15; /* 1 */
130+
margin: 0; /* 2 */
131+
}
132+
133+
/**
134+
Remove the inheritance of text transform in Edge and Firefox.
135+
*/
136+
137+
button,
138+
select {
139+
text-transform: none;
140+
}
141+
142+
/**
143+
Correct the inability to style clickable types in iOS and Safari.
144+
*/
145+
146+
button,
147+
[type='button'],
148+
[type='reset'],
149+
[type='submit'] {
150+
-webkit-appearance: button;
151+
}
152+
153+
/**
154+
Remove the inner border and padding in Firefox.
155+
*/
156+
157+
::-moz-focus-inner {
158+
border-style: none;
159+
padding: 0;
160+
}
161+
162+
/**
163+
Restore the focus styles unset by the previous rule.
164+
*/
165+
166+
:-moz-focusring {
167+
outline: 1px dotted ButtonText;
168+
}
169+
170+
/**
171+
Remove the additional ':invalid' styles in Firefox.
172+
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
173+
*/
174+
175+
:-moz-ui-invalid {
176+
box-shadow: none;
177+
}
178+
179+
/**
180+
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
181+
*/
182+
183+
legend {
184+
padding: 0;
185+
}
186+
187+
/**
188+
Add the correct vertical alignment in Chrome and Firefox.
189+
*/
190+
191+
progress {
192+
vertical-align: baseline;
193+
}
194+
195+
/**
196+
Correct the cursor style of increment and decrement buttons in Safari.
197+
*/
198+
199+
::-webkit-inner-spin-button,
200+
::-webkit-outer-spin-button {
201+
height: auto;
202+
}
203+
204+
/**
205+
1. Correct the odd appearance in Chrome and Safari.
206+
2. Correct the outline style in Safari.
207+
*/
208+
209+
[type='search'] {
210+
-webkit-appearance: textfield; /* 1 */
211+
outline-offset: -2px; /* 2 */
212+
}
213+
214+
/**
215+
Remove the inner padding in Chrome and Safari on macOS.
216+
*/
217+
218+
::-webkit-search-decoration {
219+
-webkit-appearance: none;
220+
}
221+
222+
/**
223+
1. Correct the inability to style clickable types in iOS and Safari.
224+
2. Change font properties to 'inherit' in Safari.
225+
*/
226+
227+
::-webkit-file-upload-button {
228+
-webkit-appearance: button; /* 1 */
229+
font: inherit; /* 2 */
230+
}
231+
232+
/*
233+
Interactive
234+
===========
235+
*/
236+
237+
/*
238+
Add the correct display in Chrome and Safari.
239+
*/
240+
241+
summary {
242+
display: list-item;
243+
}

0 commit comments

Comments
 (0)