@trenoxxious/n-components 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +9 -17
- package/package.json +30 -27
- package/src/index.css +12 -5
package/index.html
CHANGED
|
@@ -17,15 +17,13 @@
|
|
|
17
17
|
</h1>
|
|
18
18
|
<p>Light-weight web components for use with vanilla HTML, JS and CSS.</p>
|
|
19
19
|
</header>
|
|
20
|
-
<p class="sec">You want some buttons? We have some cool buttons.</p>
|
|
20
|
+
<p class="sec">You want some buttons? We have some cool, customizable buttons.</p>
|
|
21
21
|
<div class="components-grid">
|
|
22
22
|
<div class="component-card">
|
|
23
23
|
<div class="component-header">
|
|
24
24
|
<h3>Base Buttons</h3>
|
|
25
|
-
<div class="w-full"
|
|
26
|
-
|
|
27
|
-
<n-button variant="info">More Info</n-button>
|
|
28
|
-
</div>
|
|
25
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">variant=</span><span class="html-green">"info"</span>><pre>More Info</pre></<span class="html-red">n-button</span>></div>
|
|
26
|
+
<n-button variant="info">More Info</n-button>
|
|
29
27
|
</div>
|
|
30
28
|
<div class="button-grid">
|
|
31
29
|
<n-button variant="normal">Normal</n-button>
|
|
@@ -37,10 +35,8 @@
|
|
|
37
35
|
<div class="component-card">
|
|
38
36
|
<div class="component-header">
|
|
39
37
|
<h3>Thin Buttons</h3>
|
|
40
|
-
<div class="w-full"
|
|
41
|
-
|
|
42
|
-
<n-button variant="warning" thin>A warning!</n-button>
|
|
43
|
-
</div>
|
|
38
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">variant=</span><span class="html-green">"warning"</span> <span class="html-orange">thin</span>><pre>A warning!</pre></<span class="html-red">n-button</span>></div>
|
|
39
|
+
<n-button variant="warning" thin>A warning!</n-button>
|
|
44
40
|
</div>
|
|
45
41
|
<div class="button-grid">
|
|
46
42
|
<n-button variant="normal" thin>Thin</n-button>
|
|
@@ -52,10 +48,8 @@
|
|
|
52
48
|
<div class="component-card">
|
|
53
49
|
<div class="component-header">
|
|
54
50
|
<h3>Thick Buttons</h3>
|
|
55
|
-
<div class="w-full"
|
|
56
|
-
|
|
57
|
-
<n-button thick>Play</n-button>
|
|
58
|
-
</div>
|
|
51
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">thick</span>><pre>Play</pre></<span class="html-red">n-button</span>></div>
|
|
52
|
+
<n-button thick>Play</n-button>
|
|
59
53
|
</div>
|
|
60
54
|
<div class="button-grid">
|
|
61
55
|
<n-button variant="normal" thick>Thick</n-button>
|
|
@@ -67,10 +61,8 @@
|
|
|
67
61
|
<div class="component-card">
|
|
68
62
|
<div class="component-header">
|
|
69
63
|
<h3>Outlined Buttons, w/ Dark Mode</h3>
|
|
70
|
-
<div class="w-full"
|
|
71
|
-
|
|
72
|
-
<n-button outlineOnly dark thin>Go!</n-button>
|
|
73
|
-
</div>
|
|
64
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">outlineOnly dark thin</span>><pre>Go!</pre></<span class="html-red">n-button</span>></div>
|
|
65
|
+
<n-button outlineOnly dark thin>Go!</n-button>
|
|
74
66
|
</div>
|
|
75
67
|
<div class="button-grid">
|
|
76
68
|
<n-button variant="normal" outlineOnly dark>Outlined</n-button>
|
package/package.json
CHANGED
|
@@ -1,28 +1,31 @@
|
|
|
1
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
|
-
|
|
2
|
+
"name": "@trenoxxious/n-components",
|
|
3
|
+
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
|
+
"private": false,
|
|
5
|
+
"version": "1.0.2",
|
|
6
|
+
"repository": "github:Trenoxxious/n-components",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"web-components",
|
|
9
|
+
"lit-element"
|
|
10
|
+
],
|
|
11
|
+
"type": "module",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./dist/index.js",
|
|
14
|
+
"./n-button": "./dist/components/n-button.js"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"dev": "vite",
|
|
18
|
+
"build": "tsc && vite build",
|
|
19
|
+
"preview": "vite preview"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"lit": "^3.3.1"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"typescript": "~5.9.3",
|
|
26
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
27
|
+
},
|
|
28
|
+
"overrides": {
|
|
29
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/src/index.css
CHANGED
|
@@ -122,17 +122,24 @@ header p {
|
|
|
122
122
|
|
|
123
123
|
.code {
|
|
124
124
|
text-wrap: nowrap;
|
|
125
|
+
text-align: left;
|
|
125
126
|
overflow-x: auto;
|
|
126
|
-
display: inline
|
|
127
|
+
display: inline;
|
|
127
128
|
justify-content: flex-start;
|
|
128
129
|
align-items: center;
|
|
129
130
|
padding: 5px 5px 0 5px;
|
|
130
131
|
background: rgba(255, 255, 255, 0.05);
|
|
131
|
-
border-radius:
|
|
132
|
+
border-radius: 4px;
|
|
132
133
|
font-size: 1rem;
|
|
133
|
-
height:
|
|
134
|
+
height: 100px;
|
|
134
135
|
color: rgba(194, 194, 194, 1);
|
|
135
136
|
font-weight: 500;
|
|
137
|
+
border: 1px dotted rgba(255, 255, 255, 0.25);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
pre {
|
|
141
|
+
text-align: left;
|
|
142
|
+
margin-left: 25px;
|
|
136
143
|
}
|
|
137
144
|
|
|
138
145
|
.code span {
|
|
@@ -140,11 +147,11 @@ header p {
|
|
|
140
147
|
}
|
|
141
148
|
|
|
142
149
|
.html-red {
|
|
143
|
-
color: rgba(
|
|
150
|
+
color: rgba(255, 84, 84, 1);
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
.html-orange {
|
|
147
|
-
color: rgba(
|
|
154
|
+
color: rgba(255, 158, 79, 1);
|
|
148
155
|
}
|
|
149
156
|
|
|
150
157
|
.html-green {
|