Skip to content

Commit f9ced5d

Browse files
CGWebDev2003CGWebDev2003
committed
[2.2.0] - Added input snippets for HTML
1 parent 44042e7 commit f9ced5d

File tree

3 files changed

+198
-1
lines changed

3 files changed

+198
-1
lines changed

‎CHANGELOG.md‎

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

77
## [Released]
88

9+
## [2.2.0] - 2023-06-08
10+
11+
### Added
12+
13+
- Default Input
14+
- Password input
15+
- Search Bar
16+
- Select Input
17+
- PIN Input
18+
- Email Input
19+
- Phone Input
20+
- URL Input
21+
- Checkbox
22+
- Radio Button
23+
924
## [2.1.0] - 2023-06-08
1025

1126
## Changed

‎package.json‎

Lines changed: 1 addition & 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.2.0",
88
"scripts": {
99
"package": "C:/Users/colin/AppData/Roaming/npm/vsce package"
1010
},

‎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=\"[email protected]\">",
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+
}

0 commit comments

Comments
 (0)