css-zero 0.0.11 → 0.0.13

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4876a943502a072ea16fdf3b98641d336fcd3a284993d6a52ece9570bff8ef31
4
- data.tar.gz: 660128733f0131cc9b6e6a57f82b6fe17bd6a4b0dc8b5cb1517a7c401f89b583
3
+ metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
4
+ data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
5
5
  SHA512:
6
- metadata.gz: ac3b0c1bcc189e57e7bc36f39effc2214c081c6541be194a387eec2d17f5ce5eca27942bf10b0a0d46dbca2ee785e619270806fa8e6fc040ee0f74676dc047be
7
- data.tar.gz: f5024cc9427dc53deb71772a641498eb44e01d32303acb4707851c9694312bb24e7a11e89a62c1050e3cea1682de2c47f7a54e4d8b48ef9439f59b7645a8c8f8
6
+ metadata.gz: f6c36eb3cc7eb625ee8ed8255bac1aaa409e30ae6202a3e1e6683df5f3be36c74f052d011ba49ed7fda0a1d91dc5fea3ef24aa15392e9ccf0b7c3b1431280dcb
7
+ data.tar.gz: 52f6d8133c48e4b9e6fd0e6c57f844a7121a516d6cbef6fefac54a0db69759cf42224d9963431eabb05158d802b6a4f1271d869abf056988d034b9bced5d2120
data/README.md CHANGED
@@ -4,12 +4,6 @@ An opinionated CSS starter kit for your application. You can think of it like a
4
4
 
5
5
  ## Installation
6
6
 
7
- Is recommended to use [Propshaft](https://github.com/rails/propshaft), make sure to load all the CSS files in your `layout.html.erb`.
8
-
9
- ```html+erb
10
- <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
11
- ```
12
-
13
7
  Add this gem to your project.
14
8
 
15
9
  ```
@@ -28,6 +22,45 @@ Add only the components you need. (Optional)
28
22
  bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
29
23
  ```
30
24
 
25
+ ### Requirements
26
+
27
+ If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
28
+
29
+ <details>
30
+ <summary>Click here to see how</summary>
31
+
32
+ ```html+erb
33
+ <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
34
+ ```
35
+ </details>
36
+
37
+ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
38
+
39
+ <details>
40
+ <summary>Click here to see how</summary>
41
+
42
+ ```
43
+ /*
44
+ *= require _reset
45
+ *= require animations
46
+ *= require borders
47
+ *= require colors
48
+ *= require effects
49
+ *= require filters
50
+ *= require grid
51
+ *= require sizes
52
+ *= require transform
53
+ *= require transition
54
+ *= require typography
55
+ *= require_tree .
56
+ *= require_self
57
+ *= require zutilities
58
+ */
59
+ ```
60
+ </details>
61
+
62
+ Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
63
+
31
64
  ## Usage
32
65
 
33
66
  ```html
@@ -61,7 +94,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
61
94
  <img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
62
95
 
63
96
  <details>
64
- <summary>Show me the code!</summary>
97
+ <summary>Show me the code</summary>
65
98
 
66
99
  ```html
67
100
  <div class="accordion">
@@ -86,7 +119,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
86
119
  <img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
87
120
 
88
121
  <details>
89
- <summary>Show me the code!</summary>
122
+ <summary>Show me the code</summary>
90
123
 
91
124
  ```html+erb
92
125
  <div class="alert alert--negative flex items-start gap">
@@ -104,7 +137,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
104
137
  <img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
105
138
 
106
139
  <details>
107
- <summary>Show me the code!</summary>
140
+ <summary>Show me the code</summary>
108
141
 
109
142
  ```html
110
143
  <div>
@@ -130,7 +163,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
130
163
  <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
131
164
 
132
165
  <details>
133
- <summary>Show me the code!</summary>
166
+ <summary>Show me the code</summary>
134
167
 
135
168
  ```html
136
169
  <div class="flex justify-start gap">
@@ -145,10 +178,10 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
145
178
 
146
179
  ### Button
147
180
 
148
- <img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/0c2ee625-9e6b-4f9c-8437-8d6751e4e508">
181
+ <img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
149
182
 
150
183
  <details>
151
- <summary>Show me the code!</summary>
184
+ <summary>Show me the code</summary>
152
185
 
153
186
  ```html
154
187
  <div class="flex flex-wrap items-center gap" aria-busy>
@@ -156,10 +189,11 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
156
189
  <button class="btn btn--secondary">Secondary</button>
157
190
  <button class="btn btn--outline">Outline</button>
158
191
  <button class="btn btn--plain">Plain</button>
192
+ <button class="btn btn--positive">Positive</button>
159
193
  <button class="btn btn--negative">Negative</button>
160
194
 
161
195
  <button class="btn">
162
- <%= image_tag "circle-alert.svg", role: "presentation", size: 16 %>
196
+ <%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
163
197
  <span>With icon</span>
164
198
  </button>
165
199
 
@@ -175,7 +209,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
175
209
  <img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
176
210
 
177
211
  <details>
178
- <summary>Show me the code!</summary>
212
+ <summary>Show me the code</summary>
179
213
 
180
214
  ```html
181
215
  <div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
@@ -214,7 +248,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
214
248
  <img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
215
249
 
216
250
  <details>
217
- <summary>Show me the code!</summary>
251
+ <summary>Show me the code</summary>
218
252
 
219
253
  ```html
220
254
  <artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
@@ -261,7 +295,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
261
295
  <img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
262
296
 
263
297
  <details>
264
- <summary>Show me the code!</summary>
298
+ <summary>Show me the code</summary>
265
299
 
266
300
  ```html+erb
267
301
  <%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
@@ -298,7 +332,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
298
332
  <img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
299
333
 
300
334
  <details>
301
- <summary>Show me the code!</summary>
335
+ <summary>Show me the code</summary>
302
336
 
303
337
  ```html
304
338
  <label>
@@ -313,7 +347,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
313
347
  <img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
314
348
 
315
349
  <details>
316
- <summary>Show me the code!</summary>
350
+ <summary>Show me the code</summary>
317
351
 
318
352
  ```html+erb
319
353
  <div class="flex items-center gap-sm">
@@ -328,7 +362,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
328
362
  <img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
329
363
 
330
364
  <details>
331
- <summary>Show me the code!</summary>
365
+ <summary>Show me the code</summary>
332
366
 
333
367
  ```html
334
368
  <table class="table">
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.11"
2
+ VERSION = "0.0.13"
3
3
  end
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
@@ -11,6 +11,12 @@
11
11
  }
12
12
  }
13
13
 
14
+ .alert--positive {
15
+ --alert-border-color: var(--color-positive);
16
+ --alert-color: var(--color-positive);
17
+ --alert-icon-color: var(--color-filter-positive);
18
+ }
19
+
14
20
  .alert--negative {
15
21
  --alert-border-color: var(--color-negative);
16
22
  --alert-color: var(--color-negative);
@@ -49,9 +49,16 @@
49
49
  --btn-icon-color: var(--color-filter-text);
50
50
  }
51
51
 
52
+ .btn--positive {
53
+ --btn-background: var(--color-positive);
54
+ --btn-color: white;
55
+ --btn-icon-color: var(--color-filter-positive);
56
+ }
57
+
52
58
  .btn--negative {
53
59
  --btn-background: var(--color-negative);
54
60
  --btn-color: white;
61
+ --btn-icon-color: var(--color-filter-negative);
55
62
  }
56
63
 
57
64
  .btn--loading {
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.11
4
+ version: 0.0.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon
@@ -37,6 +37,7 @@ files:
37
37
  - lib/generators/css_zero/add/add_generator.rb
38
38
  - lib/generators/css_zero/add/resources.yml
39
39
  - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
40
+ - lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
40
41
  - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
41
42
  - lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
42
43
  - lib/generators/css_zero/add/templates/app/assets/images/x.svg