source.html
4.3 KB
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
<div id="source-code" class="hide">
<div class="bg"></div>
<div class="box shadow">
<a title="Close" class="top-button"><i class="fa fa-times"></i></a>
<div id="code-button" class="hide code">
<h2>Buttons</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<style>
#colored-button .btn { color: #fff; }
#colored-button a,
#colored-button a:hover { background: #01BCFF; }
#colored-button button,
#colored-button button:hover { background: #1bb556; }
#colored-button input,
#colored-button input:hover { background: #ff4f0f; }
</style>
<p class="text-center">
<a class="flat-buttons">Button A</a>
<button class="flat-buttons">Button B</button>
<input class="flat-buttons" type="submit" value="Button C">
</p>
<p id="colored-button" class="text-center">
<a class="btn float-buttons">Button A</a>
<button class="btn float-button-light">Button B</button>
<input class="btn float-buttons" type="submit" value="Button C">
</p>
<script type="text/javascript">
Waves.attach('.flat-buttons', ['waves-button']);
Waves.attach('.float-buttons', ['waves-button', 'waves-float']);
Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);
</script>
{{/code}}
</div>
</div>
<div id="code-icon" class="hide code">
<h2>Icons</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<style>
#colored-icon i { color: #fff; }
#colored-icon i:nth-child(1) { background: #ff6400; }
#colored-icon i:nth-child(2) { background: #d54f38; }
#colored-icon i:nth-child(3) { background: #eb4d7e; }
#colored-icon i:nth-child(4) { background: #d138c8; }
#colored-icon i:nth-child(5) { background: #bd73ff; }
#colored-icon i:nth-child(6) { background: #0074d6; }
</style>
<p class="text-center">
<i class="fa fa-bars flat-icon"></i>
<i class="fa fa-bookmark flat-icon"></i>
<i class="fa fa-calendar flat-icon"></i>
<i class="fa fa-envelope flat-icon"></i>
<i class="fa fa-exclamation flat-icon"></i>
<i class="fa fa-folder flat-icon"></i>
</p>
<p id="colored-icon" class="text-center">
<i class="fa fa-bars float-icon"></i>
<i class="fa fa-bookmark float-icon-light"></i>
<i class="fa fa-calendar float-icon"></i>
<i class="fa fa-envelope float-icon-light"></i>
<i class="fa fa-exclamation float-icon"></i>
<i class="fa fa-folder float-icon-light"></i>
</p>
<script type="text/javascript">
Waves.attach('.flat-icon', ['waves-circle']);
Waves.attach('.float-icon', ['waves-circle', 'waves-float']);
Waves.attach('.float-icon-light', ['waves-circle', 'waves-float', 'waves-light']);
</script>
{{/code}}
</div>
</div>
<div id="code-other" class="hide code">
<h2>DIVs & Images</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<div class="boxes flat-box">Flat Box</div>
<div class="boxes float-box">Float Box</div>
<div class="clear"></div>
<p class="text-center">
<img class="waves-image" src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
</p>
<script type="text/javascript">
Waves.attach('.flat-box', ['waves-block']);
Waves.attach('.float-box', ['waves-block', 'waves-float']);
Waves.attach('.waves-image');
</script>
{{/code}}
</div>
</div>
<div id="code-action" class="hide code">
<h2>Action/Event</h2>
<div class="wrapper">
{{#code class="lang-markup"}}
<style>
#snarl-demo {
background:#04d654;
color: #fff;
}
</style>
<p class="text-center">
<button id="snarl-demo">Click Me!</button>
</p>
<script type="text/javascript">
Waves.attach('#snarl-demo', ['waves-button', 'waves-float']);
Snarl.setDefaultOptions({
timeout: 5000
});
$('#snarl-demo').click(function() {
Snarl.addNotification({
title: 'Snarl Notification',
text: 'You clicked the Waves button!'
});
});
</script>
{{/code}}
</div>
</div>
</div>
</div>