Skip to content

Commit 2344085

Browse files
brandyscarneybrandyscarney
committed
test(themes): add basic, color and typography tests
1 parent 229e09c commit 2344085

File tree

3 files changed

+718
-0
lines changed

3 files changed

+718
-0
lines changed

‎core/src/themes/test/basic/index.html‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Themes - Basic</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
14+
15+
<link id="palette" rel="stylesheet" />
16+
17+
<style>
18+
.grid {
19+
display: flex;
20+
flex-wrap: wrap;
21+
justify-content: center;
22+
gap: 20px;
23+
margin: 40px 0;
24+
}
25+
26+
.column {
27+
min-width: 400px;
28+
}
29+
30+
h2 {
31+
margin: 0;
32+
}
33+
34+
[class^="ion-scaling-"],
35+
[class^="ion-spacing-"],
36+
[class^="ion-radii-"],
37+
[class^="ion-border-width-"] {
38+
margin: 10px;
39+
}
40+
41+
[class^="ion-scaling-"] {
42+
background: #ededed;
43+
}
44+
45+
[class^="ion-spacing-"] {
46+
background: #e0ee99;
47+
}
48+
49+
.spacing-inner {
50+
background: #ededed;
51+
}
52+
53+
[class^="ion-radii-"] {
54+
border-width: 2px;
55+
}
56+
57+
[class^="ion-radii-"],
58+
[class^="ion-border-width-"] {
59+
display: inline-flex;
60+
align-items: center;
61+
justify-content: center;
62+
border-style: solid;
63+
border-color: #ddd;
64+
height: 100px;
65+
width: 100px;
66+
}
67+
68+
/* Scaling */
69+
.ion-scaling-0 {
70+
height: var(--ion-scaling-0);
71+
}
72+
.ion-scaling-100 {
73+
height: var(--ion-scaling-100);
74+
}
75+
.ion-scaling-150 {
76+
height: var(--ion-scaling-150);
77+
}
78+
.ion-scaling-200 {
79+
height: var(--ion-scaling-200);
80+
}
81+
.ion-scaling-250 {
82+
height: var(--ion-scaling-250);
83+
}
84+
.ion-scaling-300 {
85+
height: var(--ion-scaling-300);
86+
}
87+
.ion-scaling-350 {
88+
height: var(--ion-scaling-350);
89+
}
90+
.ion-scaling-400 {
91+
height: var(--ion-scaling-400);
92+
}
93+
.ion-scaling-450 {
94+
height: var(--ion-scaling-450);
95+
}
96+
.ion-scaling-500 {
97+
height: var(--ion-scaling-500);
98+
}
99+
.ion-scaling-550 {
100+
height: var(--ion-scaling-550);
101+
}
102+
.ion-scaling-600 {
103+
height: var(--ion-scaling-600);
104+
}
105+
.ion-scaling-650 {
106+
height: var(--ion-scaling-650);
107+
}
108+
.ion-scaling-700 {
109+
height: var(--ion-scaling-700);
110+
}
111+
.ion-scaling-750 {
112+
height: var(--ion-scaling-750);
113+
}
114+
.ion-scaling-800 {
115+
height: var(--ion-scaling-800);
116+
}
117+
.ion-scaling-850 {
118+
height: var(--ion-scaling-850);
119+
}
120+
.ion-scaling-900 {
121+
height: var(--ion-scaling-900);
122+
}
123+
124+
/* Spacing */
125+
.ion-spacing-none {
126+
padding: var(--ion-spacing-none);
127+
}
128+
.ion-spacing-xxs {
129+
padding: var(--ion-spacing-xxs);
130+
}
131+
.ion-spacing-xs {
132+
padding: var(--ion-spacing-xs);
133+
}
134+
.ion-spacing-sm {
135+
padding: var(--ion-spacing-sm);
136+
}
137+
.ion-spacing-md {
138+
padding: var(--ion-spacing-md);
139+
}
140+
.ion-spacing-lg {
141+
padding: var(--ion-spacing-lg);
142+
}
143+
.ion-spacing-xl {
144+
padding: var(--ion-spacing-xl);
145+
}
146+
.ion-spacing-xxl {
147+
padding: var(--ion-spacing-xxl);
148+
}
149+
150+
/* Radii */
151+
.ion-radii-none {
152+
border-radius: var(--ion-radii-none);
153+
}
154+
.ion-radii-xxs {
155+
border-radius: var(--ion-radii-xxs);
156+
}
157+
.ion-radii-xs {
158+
border-radius: var(--ion-radii-xs);
159+
}
160+
.ion-radii-sm {
161+
border-radius: var(--ion-radii-sm);
162+
}
163+
.ion-radii-md {
164+
border-radius: var(--ion-radii-md);
165+
}
166+
.ion-radii-lg {
167+
border-radius: var(--ion-radii-lg);
168+
}
169+
.ion-radii-xl {
170+
border-radius: var(--ion-radii-xl);
171+
}
172+
.ion-radii-xxl {
173+
border-radius: var(--ion-radii-xxl);
174+
}
175+
176+
/* Border Width */
177+
.ion-border-width-none {
178+
border-width: var(--ion-border-width-none);
179+
}
180+
.ion-border-width-xxs {
181+
border-width: var(--ion-border-width-xxs);
182+
}
183+
.ion-border-width-xs {
184+
border-width: var(--ion-border-width-xs);
185+
}
186+
.ion-border-width-sm {
187+
border-width: var(--ion-border-width-sm);
188+
}
189+
.ion-border-width-md {
190+
border-width: var(--ion-border-width-md);
191+
}
192+
.ion-border-width-lg {
193+
border-width: var(--ion-border-width-lg);
194+
}
195+
.ion-border-width-xl {
196+
border-width: var(--ion-border-width-xl);
197+
}
198+
.ion-border-width-xxl {
199+
border-width: var(--ion-border-width-xxl);
200+
}
201+
</style>
202+
</head>
203+
204+
<body>
205+
<ion-app>
206+
<ion-header>
207+
<ion-toolbar>
208+
<ion-title>Themes - Basic</ion-title>
209+
</ion-toolbar>
210+
</ion-header>
211+
212+
<ion-content id="content" class="ion-text-center">
213+
<div class="grid">
214+
<div class="column">
215+
<h2>Scaling</h2>
216+
<div class="ion-scaling-0"></div>
217+
<div class="ion-scaling-100"></div>
218+
<div class="ion-scaling-150"></div>
219+
<div class="ion-scaling-200"></div>
220+
<div class="ion-scaling-250"></div>
221+
<div class="ion-scaling-300"></div>
222+
<div class="ion-scaling-350"></div>
223+
<div class="ion-scaling-400"></div>
224+
<div class="ion-scaling-450"></div>
225+
<div class="ion-scaling-500"></div>
226+
<div class="ion-scaling-550"></div>
227+
<div class="ion-scaling-600"></div>
228+
<div class="ion-scaling-650"></div>
229+
<div class="ion-scaling-700"></div>
230+
<div class="ion-scaling-750"></div>
231+
<div class="ion-scaling-800"></div>
232+
<div class="ion-scaling-850"></div>
233+
<div class="ion-scaling-900"></div>
234+
</div>
235+
<div class="column">
236+
<h2>Spacing</h2>
237+
<div class="ion-spacing-none">
238+
<div class="spacing-inner">none</div>
239+
</div>
240+
<div class="ion-spacing-xxs">
241+
<div class="spacing-inner">xxs</div>
242+
</div>
243+
<div class="ion-spacing-xs">
244+
<div class="spacing-inner">xs</div>
245+
</div>
246+
<div class="ion-spacing-sm">
247+
<div class="spacing-inner">sm</div>
248+
</div>
249+
<div class="ion-spacing-md">
250+
<div class="spacing-inner">md</div>
251+
</div>
252+
<div class="ion-spacing-lg">
253+
<div class="spacing-inner">lg</div>
254+
</div>
255+
<div class="ion-spacing-xl">
256+
<div class="spacing-inner">xl</div>
257+
</div>
258+
<div class="ion-spacing-xxl">
259+
<div class="spacing-inner">xxl</div>
260+
</div>
261+
</div>
262+
<div class="column">
263+
<h2>Radii</h2>
264+
<div class="ion-radii-none">none</div>
265+
<div class="ion-radii-xxs">xxs</div>
266+
<div class="ion-radii-xs">xs</div>
267+
<div class="ion-radii-sm">sm</div>
268+
<div class="ion-radii-md">md</div>
269+
<div class="ion-radii-lg">lg</div>
270+
<div class="ion-radii-xl">xl</div>
271+
<div class="ion-radii-xxl">xxl</div>
272+
</div>
273+
<div class="column">
274+
<h2>Border Width</h2>
275+
<div class="ion-border-width-none">none</div>
276+
<div class="ion-border-width-xxs">xxs</div>
277+
<div class="ion-border-width-xs">xs</div>
278+
<div class="ion-border-width-sm">sm</div>
279+
<div class="ion-border-width-md">md</div>
280+
<div class="ion-border-width-lg">lg</div>
281+
<div class="ion-border-width-xl">xl</div>
282+
<div class="ion-border-width-xxl">xxl</div>
283+
</div>
284+
</div>
285+
</div>
286+
</ion-app>
287+
</body>
288+
</html>

0 commit comments

Comments
 (0)