-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (189 loc) · 7.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link rel="stylesheet" href="dist/css/ltr.css">
</head>
<body>
<div class="text-sm header">
<input id="toggle-bidi-mode" type="button" class="button link text-sm" value="Toggle bidi mode" >
</div>
<div class="container p-b-40px">
<div class="banner text-xl">
Grid
</div>
<div class="row m-b-10px">
<div class="col col-1-1 box bg-maroon t-a-c l-h-50px">
100% width; irrespective of device width in css pixel
</div>
<div class="col col-1-2 col-sm-1-2 box bg-orange t-a-c l-h-50px">
50% width; scales to 100% for small device
</div>
<div class="col col-1-2 col-sm-1-2 box bg-red t-a-c l-h-50px">
50% width; scales to 100% for small device
</div>
<div class="col col-1-3 col-sm-1-3 col-md-1-3 box bg-aqua t-a-c l-h-50px">
33.33 width; scales to 100% for medium and small device
</div>
<div class="col col-1-3 col-sm-1-3 col-md-1-3 box bg-teal t-a-c l-h-50px">
33.33 width; scales to 100% for medium and small device
</div>
<div class="col col-1-3 col-sm-1-3 col-md-1-3 box bg-blue t-a-c l-h-50px">
33.33 width; scales to 100% for medium and small device
</div>
<div class="col col-1-3 col-sm-1-3 col-md-1-3 box bg-fuchsia t-a-c l-h-50px">
33.33 width; scales to 100% for medium and small device
</div>
<div class="col col-2-3 col-sm-2-3 col-md-2-3 box bg-silver t-a-c l-h-50px">
66.66 width; scales to 100% for medium and small device
</div>
</div>
<div class="banner text-xl">
Button (100% width)
</div>
<div class="row m-b-10px">
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Primary Button" class="button button-primary w-100">
<input type="button" value="Primary Button disabled" class="button button-primary w-100" disabled>
</div>
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Secondary Button" class="button button-secondary w-100">
<input type="button" value="Secondary Button disabled" class="button button-secondary w-100" disabled>
</div>
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Cancel Button" class="button button-cancel w-100">
<input type="button" value="Cancel Button disabled" class="button button-cancel w-100" disabled>
</div>
</div>
<div class="banner text-xl">
Button (Auto width)
</div>
<div class="row m-b-10px">
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Primary Button" class="button button-primary">
<input type="button" value="Primary Button disabled" class="button button-primary" disabled>
</div>
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Secondary Button" class="button button-secondary">
<input type="button" value="Secondary Button disabled" class="button button-secondary" disabled>
</div>
<div class="col col-1-3 col-sm-1-3">
<input type="button" value="Cancel Button" class="button button-cancel">
<input type="button" value="Cancel Button disabled" class="button button-cancel" disabled>
</div>
</div>
<div class="row m-b-10px">
<div class="col col-1-1">
<input type="button" value="Button as link" class="button link h-a w-a p-0">
</div>
</div>
<div class="banner text-xl">
Text
</div>
<div class="row m-b-10px">
<div class="col col-1-1">
<div class="text-xl">Extra large text</div>
<div class="text-lg">Large text</div>
<div class="text-md">Medium text</div>
<div class="text-sm">Small text</div>
</div>
</div>
<div class="banner text-xl">
Input field and drop down
</div>
<div class="row m-b-10px">
<div class="col col-1-4 col-sm-1-4">
<input type="text" class="input-field" placeholder="Lorem ipsum">
</div>
<div class="col col-1-4 col-sm-1-4">
<input type="text" class="input-field" placeholder="Lorem ipsum" value="Disabled" disabled>
</div>
<div class="col col-1-4 col-sm-1-4">
<select class="drop-down">
<option>Please choose</option>
<option>Afganistan</option>
</select>
</div>
<div class="col col-1-4 col-sm-1-4">
<select class="drop-down" disabled>
<option>Disabled</option>
<option>Lorem Ipsum</option>
</select>
</div>
</div>
<div class="banner text-xl">
Error messages
</div>
<div class="row m-b-10px">
<div class="col col-1-4 col-sm-1-4">
<div class="error-message">
Lorem ipsum
</div>
</div>
</div>
<div class="banner text-xl">
Equal spaced
</div>
<div class="row m-b-10px">
<div class="col col-1-2 col-sm-1-2">
<div class="equal-spaced">
floxinoxinihilipilification
</div>
</div>
<div class="col col-1-2col-sm-1-2">
<!--
width for the field should be maxlength * width of the font + maxlength + 1 * letter-spacing
in this case it would be
10 * 11 + (10 + 1) * 4 = 154px
-->
<input type="text" class="input-field equal-spaced" placeholder="__________" maxlength="10" style="width:154px">
</div>
</div>
<div class="banner text-xl">
Card & Capsule
</div>
<div class="row m-b-10px">
<div class="col col-1-4 col-sm-1-4">
<div class="card">
floxinoxinihilipilification
</div>
</div>
<div class="col col-1-4 col-sm-1-4 t-a-c">
<div class="capsule bg-aqua">
floxinoxinihilipilification
</div>
</div>
</div>
<div class="banner text-xl">
Modal
</div>
<div class="row m-b-10px">
<div class="col col-1-1">
<input id="show-modal" type="button" value="Show modal" class="button link h-a w-a p-0">
</div>
</div>
</div>
<div class="modal hide">
<div class="modal-content p-a v-a-m">
<div class="modal-header">
<h1 class="text-lg"> Lorem ipsum</h1>
<input id="hide-modal" class="button modal-close-button" type="button" value="X" aria-label="close">
</div>
<div class="modal-body m-t-12px">
Lorem ipsum dolor sit amet, vidit reque et usu, est te enim discere efficiantur. Id mei legere fabellas necessitatibus. Quod dolores maiestatis mea no, consul senserit in pro, omnis facilisi interpretaris quo et. Liber tollit noster quo no.
Vis ferri invidunt no, melius feugiat delicatissimi ea eum. Ius modus perfecto eu, ei malis etiam detraxit vel. Porro dignissim no vix, voluptua consequat ad vis. Eum nostro maiorum ut, mel in dicat debet. Ea brute posse epicurei vis, ne pri graeco integre.
</div>
</div>
</div>
<div class="text-sm p-f footer">
Developed with ♡ and
<a href="https://github.com/sarbbottam/sheer" class="link">Sheer</a>
</div>
<script src="src/js/toggle-bidi-mode.js"></script>
<script src="src/js/modal.js"></script>
</body>
</html>