forked from ashvin777/framework7.angular
-
Notifications
You must be signed in to change notification settings - Fork 0
/
color-themes.html
executable file
·53 lines (52 loc) · 2.7 KB
/
color-themes.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
<div data-page="color-themes" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
<div class="center">Color Themes</div>
<div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p>Framework7 comes with 20 default Material color themes set and two layout color themes (default and dark):</p>
</div>
<div class="content-block-title">Choose Layout Theme</div>
<div class="content-block">
<div class="row">
<div data-layout="" class="col-50 ks-layout-theme ks-layout-default active"></div>
<div data-theme="dark" class="col-50 ks-layout-theme ks-layout-dark"></div>
</div>
</div>
<div class="content-block-title">Choose Color Theme</div>
<div class="content-block">
<div class="row">
<div data-theme="red" class="col-20 ks-color-theme bg-red"></div>
<div data-theme="pink" class="col-20 ks-color-theme bg-pink"></div>
<div data-theme="purple" class="col-20 ks-color-theme bg-purple"></div>
<div data-theme="deeppurple" class="col-20 ks-color-theme bg-deeppurple"></div>
<div data-theme="indigo" class="col-20 ks-color-theme bg-indigo"></div>
</div>
<div class="row">
<div data-theme="blue" class="col-20 ks-color-theme bg-blue"></div>
<div data-theme="lightblue" class="col-20 ks-color-theme bg-lightblue"></div>
<div data-theme="cyan" class="col-20 ks-color-theme bg-cyan"></div>
<div data-theme="teal" class="col-20 ks-color-theme bg-teal"></div>
<div data-theme="green" class="col-20 ks-color-theme bg-green"></div>
</div>
<div class="row">
<div data-theme="lightgreen" class="col-20 ks-color-theme bg-lightgreen"></div>
<div data-theme="lime" class="col-20 ks-color-theme bg-lime"></div>
<div data-theme="yellow" class="col-20 ks-color-theme bg-yellow"></div>
<div data-theme="amber" class="col-20 ks-color-theme bg-amber"></div>
<div data-theme="orange" class="col-20 ks-color-theme bg-orange"></div>
</div>
<div class="row">
<div data-theme="deeporange" class="col-20 ks-color-theme bg-deeporange"></div>
<div data-theme="brown" class="col-20 ks-color-theme bg-brown"></div>
<div data-theme="gray" class="col-20 ks-color-theme bg-gray"></div>
<div data-theme="bluegray" class="col-20 ks-color-theme bg-bluegray"></div>
<div data-theme="black" class="col-20 ks-color-theme bg-black"></div>
</div>
</div>
</div>
</div>