css-zero 0.0.12 → 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 +4 -4
- data/README.md +42 -8
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/resources.yml +0 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +7 -0
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
|
|
4
|
+
data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
|
@@ -145,7 +178,7 @@ 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/
|
|
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
184
|
<summary>Show me the code</summary>
|
|
@@ -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-
|
|
196
|
+
<%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
|
|
163
197
|
<span>With icon</span>
|
|
164
198
|
</button>
|
|
165
199
|
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -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 {
|