Skip to content

Commit f24e874

Browse files
CGWebDev2003CGWebDev2003
authored
Merge pull request #12 from CGWebDev2003/main
[2.3.0]
2 parents 87dc643 + b3a037b commit f24e874

File tree

9 files changed

+357
-11
lines changed

9 files changed

+357
-11
lines changed

‎CHANGELOG.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,27 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
66

77
## [Released]
88

9+
## [2.3.0] - 2023-06-17
10+
11+
### Added
12+
13+
- Added snippets for Neptune Animations
14+
15+
## [2.2.0] - 2023-06-08
16+
17+
### Added
18+
19+
- Default Input
20+
- Password input
21+
- Search Bar
22+
- Select Input
23+
- PIN Input
24+
- Email Input
25+
- Phone Input
26+
- URL Input
27+
- Checkbox
28+
- Radio Button
29+
930
## [2.1.0] - 2023-06-08
1031

1132
## Changed

‎neptunecss-snippets-2.2.0.vsix

29.9 KB
Binary file not shown.

‎neptunecss-snippets-2.3.0.vsix

32.2 KB
Binary file not shown.

‎package.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"publisher": "NeptuneCSS",
55
"icon": "icon.png",
66
"description": "VS Code snippets for Neptune CSS",
7-
"version": "2.1.0",
7+
"version": "2.3.0",
88
"scripts": {
99
"package": "C:/Users/colin/AppData/Roaming/npm/vsce package"
1010
},
@@ -28,6 +28,14 @@
2828
},
2929
"contributes": {
3030
"snippets": [
31+
{
32+
"language": "html",
33+
"path": "./snippets/animations/import.code-snippets"
34+
},
35+
{
36+
"language": "javascript",
37+
"path": "./snippets/animations/animations.code-snippets"
38+
},
3139
{
3240
"language": "html",
3341
"path": "./snippets/html/import.code-snippets"

‎snippets/animations/animations.code-snippets

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"New Neptune Animations Instance": {
3+
"scope": "javascript",
4+
"prefix": "nep-anim-instance",
5+
"body": "const ${1: neptuneAnimate} = new NeptuneAnimate(${2: myElement}, \"${3: nep-pulse}\");",
6+
"description": "Create a new instance of the NeaptuneAnimate class"
7+
},
8+
"Start Neptune Animation": {
9+
"scope": "javascript",
10+
"prefix": "nep-start-anim",
11+
"body": "${1: neptuneAnimate}.startAnimation();",
12+
"description": "Start Neptune Animation"
13+
}
14+
}

‎snippets/animations/import.code-snippets

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"Neptune Animations CSS CDN": {
3+
"scope": "html",
4+
"prefix": "nep-anim-css-cdn",
5+
"body": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${1: latest}/neptune-animations.min.css\">",
6+
"description": "Insert CSS CDN for Neptune Animations"
7+
},
8+
"Neptune Animations JS CDN": {
9+
"scope": "html",
10+
"prefix": "nep-anim-js-cdn",
11+
"body": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${1: latest}/neptune-animations.min.js\">",
12+
"description": "Insert JS CDN for Neptune Animations"
13+
},
14+
"Neptune Animations Quickstart": {
15+
"scope": "html",
16+
"prefix": "nep-anim-quick",
17+
"body": [
18+
"<!DOCTYPE html>",
19+
"<html lang=\"en\">",
20+
" <head>",
21+
" <meta charset=\"UTF-8\">",
22+
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
23+
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
24+
"",
25+
" <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss@${1: latest}/neptune.min.css\">",
26+
" <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${2: latest}/neptune-animations.min.css\">",
27+
"",
28+
" <title>${3: Example Page}</title>",
29+
" </head>",
30+
" <body>",
31+
" ${5: <!-- Your Content -->}",
32+
"",
33+
" <script src=\"https://cdn.jsdelivr.net/npm/neptunecss-js@${3: latest}/neptune.min.js\"></script>",
34+
" <script src=\"https://cdn.jsdelivr.net/npm/neptunecss-animations@${4: latest}/neptune-animations.min.js\"></script>",
35+
" </body>",
36+
"</html>"
37+
],
38+
"description": "Insert CSS CDN for Neptune Animations"
39+
},
40+
}

‎snippets/html/inputs.code-snippets

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
{
2+
"Neptune button information": {
3+
"scope": "html",
4+
"prefix": "neptune-input",
5+
"body": [
6+
"<div class=\"input-box\">",
7+
" <label class=\"text-m\" for=\"default-input\">Input:</label>",
8+
" <div class=\"input-field\">",
9+
" <span class=\"input-icon\">",
10+
" ${1:Your Icon}",
11+
" </span>",
12+
" <input type=\"text\" name=\"default-input\" id=\"default-input\" placeholder=\"Default input\">",
13+
" </div>",
14+
" <span class=\"text-s input-validation\">",
15+
" ${2:Validation text}",
16+
" </span>",
17+
"</div>"
18+
],
19+
"description": "Information button"
20+
},
21+
"Neptune password input": {
22+
"scope": "html",
23+
"prefix": "neptune-pw-input",
24+
"body": [
25+
"<div class=\"input-box password-input-box\">",
26+
" <label class=\"text-m\" for=\"password-input\">Password:</label>",
27+
" <div class=\"input-field password-input-field\">",
28+
" <span class=\"input-icon\">",
29+
" ${1:Your Icon}",
30+
" </span>",
31+
" <input type=\"password\" name=\"password-input\" id=\"password-input\" placeholder=\"Password\">",
32+
" <button class=\"show-password-button\" id=\"show-password-button\" onclick=\"showPassword()\">",
33+
" <span class=\"button-icon\" id=\"show-password-button-icon\">",
34+
" ${2:Your Icon}",
35+
" </span>",
36+
" </button",
37+
" </div>",
38+
" <span class=\"text-s input-validation\">",
39+
" ${3:Validation Message}",
40+
" </span>",
41+
"</div>",
42+
],
43+
"description": "Password input"
44+
},
45+
"Neptune search bar": {
46+
"scope": "html",
47+
"prefix": "neptune-search-bar",
48+
"body": [
49+
"<div class=\"searchbar-box\">",
50+
" <input type=\"text\" class=\"searchbar\" name=\"searchbar\" id=\"mySearchbar\" placeholder=\"Search\">",
51+
" <button class=\"search-button\">",
52+
" <span class=\"button-icon\">",
53+
" ${1:Your Icon}",
54+
" </span>",
55+
" </button>",
56+
"</div>",
57+
],
58+
"description": "Search Bar"
59+
},
60+
"Neptune select input": {
61+
"scope": "html",
62+
"prefix": "neptune-select",
63+
"body": [
64+
"<div class=\"select-box\" id=\"mySelect\">",
65+
" <span class=\"text-l\">Select</span>",
66+
" <select class=\"hidden-select\">",
67+
" <option value=\"null\">Select</option>",
68+
" <option value=\"1\">Value 1</option>",
69+
" <option value=\"2\">Value 2</option>",
70+
" <option value=\"3\">Value 3</option>",
71+
" </select>",
72+
"</div>",
73+
],
74+
"description": "Select Input"
75+
},
76+
"Neptune pin input": {
77+
"scope": "html",
78+
"prefix": "neptune-pin-input",
79+
"body": [
80+
"<div class=\"digit-box\">",
81+
" <div class=\"digit-field-group\">",
82+
" <input type=\"number\" class=\"digit-field\" name=\"digit1\" id=\"digit1\">",
83+
" <input type=\"number\" class=\"digit-field\" name=\"digit2\" id=\"digit2\">",
84+
" <input type=\"number\" class=\"digit-field\" name=\"digit3\" id=\"digit3\">",
85+
" <input type=\"number\" class=\"digit-field\" name=\"digit4\" id=\"digit4\">",
86+
" </div>",
87+
" <button type=\"submit\" class=\"button-m submit-button button-primary\" id=\"submit-digits-button\" name=\"auth-button\">",
88+
" <span class=\"button-icon\">",
89+
" ${1:Your Icon}",
90+
" </span>",
91+
" <span class\"button-text\">",
92+
" Authenticate",
93+
" </span>",
94+
" </button",
95+
"</div>",
96+
],
97+
"description": "PIN Input"
98+
},
99+
"Neptune email input": {
100+
"scope": "html",
101+
"prefix": "neptune-email-input",
102+
"body": [
103+
"<div class=\"input-box email-box\">",
104+
" <label class=\"text-m\" for=\"email-input\">Email:</label>",
105+
" <div class=\"input-field\">",
106+
" <span class=\"input-icon\">",
107+
" ${1:Your Icon}",
108+
" </span>",
109+
" <input type=\"email\" inputmode=\"email\" name=\"email-input\" id=\"email-input\" placeholder=\"mail@example.com\">",
110+
" </div",
111+
" <span class=\"text-s input-validation\">",
112+
" ${2:Validation Message}",
113+
" </span>",
114+
"</div>",
115+
],
116+
"description": "Email input"
117+
},
118+
"Neptune phone input": {
119+
"scope": "html",
120+
"prefix": "neptune-phone-input",
121+
"body": [
122+
"<div class=\"input-box phone-box\">",
123+
" <label class=\"text-m\" for=\"phone-input\">Email:</label>",
124+
" <div class=\"input-field\">",
125+
" <span class=\"input-icon\">",
126+
" ${1:Your Icon}",
127+
" </span>",
128+
" <input type=\"tel\" inputmode=\"tel\" name=\"phone-input\" id=\"phone-input\" placeholder=\"+01 234 56789\">",
129+
" </div",
130+
" <span class=\"text-s input-validation\">",
131+
" ${2:Validation Message}",
132+
" </span>",
133+
"</div>",
134+
],
135+
"description": "Phone input"
136+
},
137+
"Neptune url input": {
138+
"scope": "html",
139+
"prefix": "neptune-url-input",
140+
"body": [
141+
"<div class=\"input-box url-box\">",
142+
" <label class=\"text-m\" for=\"url-input\">URL:</label>",
143+
" <div class=\"input-field\">",
144+
" <span class=\"input-icon\">",
145+
" ${1:Your Icon}",
146+
" </span>",
147+
" <input type=\"url\" inputmode=\"url\" name=\"url-input\" id=\"url-input\" placeholder=\"https://yourdomain.com\">",
148+
" </div",
149+
" <span class=\"text-s input-validation\">",
150+
" ${2:Validation Message}",
151+
" </span>",
152+
"</div>",
153+
],
154+
"description": "URL input"
155+
},
156+
"Neptune checkbox": {
157+
"scope": "html",
158+
"prefix": "neptune-checkbox",
159+
"body": [
160+
"<div class=\"input-box checkbox-box\">",
161+
" <input type=\"checkbox\" class=\"checkbox checkbox-${2:Style}\" name=\"default-checkbox\" id=\"default-checkbox\">",
162+
" <label class=\"checkbox-label\" for=\"default-checkbox\" id=\"default-checkbox-label\">",
163+
" ${2:Checkbox Text}",
164+
" </label>",
165+
"</div",
166+
],
167+
"description": "Checkbox"
168+
},
169+
"Neptune radio button": {
170+
"scope": "html",
171+
"prefix": "neptune-radio-button",
172+
"body": [
173+
"<div class=\"input-box radio-box\">",
174+
" <input type=\"radio\" class=\"radio-button radio-button-${1:Style}\" name=\"radio-button-primary\" id=\"radio-button-primary\">",
175+
" <label for=\"radio-button-${1:Style}\" class=\"radio-button-label\">",
176+
" ${2:Label Text}",
177+
" </label>",
178+
"</div>",
179+
],
180+
"description": "Radio Button"
181+
}
182+
}

‎test.html

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<!-- Import example style -->
9-
<link rel="stylesheet" href="/examamples/example_style.min.css">
10-
11-
<!-- Import neptune ui -->
12-
<link rel="stylesheet" href="/neptune.css">
13-
14-
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
15-
<title>Title | Neptune examples</title>
7+
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss@ latest/neptune.min.css">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neptunecss-animations@ latest/neptune-animations.min.css">
10+
11+
<title> Example Page</title>
1612
</head>
1713
<body>
18-
Content
14+
<!-- Your Content -->
15+
16+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-js@ Example Page/neptune.min.js"></script>
17+
<script src="https://cdn.jsdelivr.net/npm/neptunecss-animations@ latest/neptune-animations.min.js"></script>
1918
</body>
2019
</html>

0 commit comments

Comments
 (0)