bottom-sheet/index.html at master · hwindo/bottom-sheet · GitHub

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
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app">
		<div class="header">
			<h1>Bottom-Sheet</h1>
			<button id="country-select-button">Bottom ?</button>
		</div>
		<!-- bottom sheet -->
		<div id="country-selector" class="c-bottom-sheet c-bottom-sheet--list">
			<div class="c-bottom-sheet__scrim"></div>
			<div class="c-bottom-sheet__sheet">

				<div class="c-bottom-sheet__handle">
					<span></span>
					<span></span>
				</div>

				<ul class="c-bottom-sheet__list">
					<li class="c-bottom-sheet__item active">
						<a class="c-bottom-sheet__link" href="/" class="d-flex justify-content-between">Indonesia
							<i class="c-bottom-sheet__tick gi gi-tick"></i>
						</a>
					</li>
					<li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">Singapore</a></li>
					<li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">India</a></li>
					<li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">Thailand</a></li>
					<li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">Vietnam</a></li>
				</ul>

			</div>
			<div class="c-bottom-sheet__container">

			</div>
		</div>

		<script src="main.js">
		</script>
</body>

</html>