Skip to content

Commit ece65d0

Browse files
nodexninjanodexninja
committed
Initial commit
0 parents  commit ece65d0

File tree

4 files changed

+114
-0
lines changed

4 files changed

+114
-0
lines changed

‎LeonSans-Medium.otf

65.9 KB
Binary file not shown.

‎index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vue</title>
7+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/vue-touch-ripple@3.0.0/dist/vue-touch-ripple.js"></script>
9+
<link href="https://cdn.jsdelivr.net/npm/vue-touch-ripple@3.0.0/dist/vue-touch-ripple.css" rel="stylesheet">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div id="vueapp">
14+
<touch-ripple :speed="1.5" color="#0064ff" class="btn">
15+
<button class="">Text</button>
16+
</touch-ripple>
17+
<touch-ripple :speed="1.5" class="btn">
18+
<button class="black">Black</button>
19+
</touch-ripple>
20+
<touch-ripple :speed="1.5" color="#fff" class="btn">
21+
<button class="contained">Contained</button>
22+
</touch-ripple>
23+
<cbtn itemprop="Component"></cbtn>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎script.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Vue Ripple Components
2+
Vue.use(VueTouchRipple, {
3+
speed: 1,
4+
color: '#000',
5+
opacity: 0.2
6+
})
7+
Vue.component('cbtn', {
8+
props: ['itemprop'],
9+
template: '<touch-ripple :speed="1.5" color="#fff" class="btn"><button class="contained">{{itemprop}}</button></touch-ripple>'
10+
})
11+
new Vue({
12+
el: '#vueapp',
13+
data: {
14+
// Can be used as inner html component
15+
},
16+
})

‎style.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@font-face {
2+
font-family: 'Leon' ;
3+
src: url('LeonSans-Medium.otf');
4+
}
5+
:root {
6+
--primary: #0064ff;
7+
--secondary: #2084ff;
8+
--trans: #0064ff22;
9+
--blue: #0064ff;
10+
--red: #ff0032;
11+
--yellow: #ffc800;
12+
--green: #00b428;
13+
--light: white;
14+
--dark: black;
15+
--dark-trans: #00000022;
16+
}
17+
html {
18+
scroll-behavior: smooth;
19+
}
20+
body {
21+
margin: 0;
22+
padding: 0;
23+
font-family: 'Leon' !important;
24+
font-size: 1vw;
25+
transition: 0.5s;
26+
}
27+
button {
28+
margin: 0;
29+
background: transparent;
30+
border-radius: 0.3vw;
31+
padding: 1vw 2vw;
32+
border: none;
33+
color: var(--primary);
34+
font-family: 'Leon';
35+
font-size: 1vw;
36+
transition: 0.5s;
37+
}
38+
button:hover {
39+
background: var(--trans);
40+
}
41+
button:focus {
42+
outline: none;
43+
background: var(--trans);
44+
}
45+
.black {
46+
background: transparent;
47+
color: var(--dark);
48+
}
49+
.black:hover {
50+
background: var(--dark-trans);
51+
}
52+
.black:focus {
53+
background: var(--dark-trans);
54+
}
55+
.contained {
56+
background: var(--primary);
57+
border-radius: 0.3vw;
58+
padding: 1vw 2vw;
59+
border: none;
60+
color: var(--light);
61+
}
62+
.contained:hover {
63+
background: var(--secondary);
64+
}
65+
.contained:focus {
66+
background: var(--secondary);
67+
}
68+
.btn {
69+
border-radius: 0.3vw;
70+
overflow: hidden;
71+
}

0 commit comments

Comments
 (0)