css-zero 0.0.10 → 0.0.12
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +300 -102
- data/app/assets/stylesheets/_reset.css +1 -1
- data/app/assets/stylesheets/colors.css +0 -26
- data/app/assets/stylesheets/transform.css +32 -40
- data/app/assets/stylesheets/transition.css +2 -7
- data/app/assets/stylesheets/zutilities.css +43 -9
- data/lib/css-zero.rb +3 -6
- data/lib/css_zero/engine.rb +4 -0
- data/lib/css_zero/version.rb +1 -3
- data/lib/generators/css_zero/add/USAGE +8 -0
- data/lib/generators/css_zero/add/add_generator.rb +28 -0
- data/lib/generators/css_zero/add/resources.yml +28 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/images/x.svg +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +44 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +18 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css +59 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +30 -0
- data/{app/assets/stylesheets/buttons.css → lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css} +32 -14
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +6 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +64 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +51 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css +45 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +41 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +27 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js +17 -0
- data/lib/generators/css_zero/install/USAGE +5 -0
- data/lib/generators/css_zero/install/install_generator.rb +9 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +46 -0
- metadata +26 -5
- data/app/assets/stylesheets/dialog.css +0 -33
- data/app/assets/stylesheets/inputs.css +0 -54
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 945da122c69f2e0e60107ec644977720638f884d8df7090b4c1d32a4f4c960d9
|
|
4
|
+
data.tar.gz: 28777cbfd808aaafe8a3401c34d987fc989b4ae13580361682414341f87b1e32
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e426c0ab8a1dd0223bc6a789720bb82c1ae41f3041371618dd647433e0b052dcd7f00ef28a0881837c7dc2c20d0e590fef18df35281dc6b0bd8c7431388b7ddd
|
|
7
|
+
data.tar.gz: 42efd1be6dea0b6493e501c637b2b8c3a07ad68af08a95cc5086ca2a3580b34d6d81354a1be861503d70eac1f62c19a6608b20e9dc4002443a6c6860ee72cb7f
|
data/README.md
CHANGED
|
@@ -4,47 +4,29 @@ 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
|
+
Add this gem to your project.
|
|
14
|
+
|
|
7
15
|
```
|
|
8
16
|
bundle add css-zero
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<details>
|
|
14
|
-
<summary>Click here to see how</summary>
|
|
19
|
+
Add the base.css file to your application.
|
|
15
20
|
|
|
16
|
-
```html+erb
|
|
17
|
-
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
|
|
18
21
|
```
|
|
19
|
-
|
|
22
|
+
bin/rails generate css_zero:install
|
|
23
|
+
```
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
Add only the components you need. (Optional)
|
|
22
26
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```css
|
|
27
|
-
*= require _reset
|
|
28
|
-
*= require animations
|
|
29
|
-
*= require base
|
|
30
|
-
*= require borders
|
|
31
|
-
*= require buttons
|
|
32
|
-
*= require colors
|
|
33
|
-
*= require dialog
|
|
34
|
-
*= require effects
|
|
35
|
-
*= require filters
|
|
36
|
-
*= require grid
|
|
37
|
-
*= require inputs
|
|
38
|
-
*= require separators
|
|
39
|
-
*= require sizes
|
|
40
|
-
*= require transform
|
|
41
|
-
*= require transition
|
|
42
|
-
*= require typography
|
|
43
|
-
*= require_tree .
|
|
44
|
-
*= require_self
|
|
45
|
-
*= require zutilities
|
|
46
|
-
```
|
|
47
|
-
</details>
|
|
27
|
+
```
|
|
28
|
+
bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
|
|
29
|
+
```
|
|
48
30
|
|
|
49
31
|
## Usage
|
|
50
32
|
|
|
@@ -53,130 +35,346 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
|
|
|
53
35
|
Write most page content using utility classes.
|
|
54
36
|
</h1>
|
|
55
37
|
|
|
56
|
-
<div class="component">
|
|
57
|
-
|
|
38
|
+
<div class="custom-component">
|
|
39
|
+
Create components using CSS variables.
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="card">
|
|
43
|
+
Optionally, copy pre-built components into your application.
|
|
58
44
|
</div>
|
|
59
45
|
```
|
|
60
46
|
|
|
61
47
|
```css
|
|
62
|
-
.component {
|
|
48
|
+
.custom-component {
|
|
63
49
|
background-color: var(--red-500);
|
|
64
50
|
border-radius: var(--rounded);
|
|
65
|
-
|
|
51
|
+
block-size: var(--size-4);
|
|
66
52
|
}
|
|
67
53
|
```
|
|
68
54
|
|
|
69
|
-
Check the [CSS files](app/assets/stylesheets) in the repository
|
|
55
|
+
Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
|
|
70
56
|
|
|
71
|
-
##
|
|
57
|
+
## Components
|
|
72
58
|
|
|
73
|
-
|
|
59
|
+
### Accordion
|
|
60
|
+
|
|
61
|
+
<img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
|
|
62
|
+
|
|
63
|
+
<details>
|
|
64
|
+
<summary>Show me the code</summary>
|
|
74
65
|
|
|
75
66
|
```html
|
|
76
|
-
<div class="
|
|
77
|
-
<
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
</
|
|
67
|
+
<div class="accordion">
|
|
68
|
+
<details name="my_accordion">
|
|
69
|
+
<summary>Is it accessible?</summary>
|
|
70
|
+
<p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
|
|
71
|
+
</details>
|
|
72
|
+
<details name="my_accordion">
|
|
73
|
+
<summary>Is it styled?</summary>
|
|
74
|
+
<p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
|
|
75
|
+
</details>
|
|
76
|
+
<details name="my_accordion">
|
|
77
|
+
<summary>Is it animated?</summary>
|
|
78
|
+
<p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
|
|
79
|
+
</details>
|
|
80
|
+
</div>
|
|
81
|
+
```
|
|
82
|
+
</details>
|
|
81
83
|
|
|
82
|
-
|
|
83
|
-
<label for="date_field" class="text-sm font-medium">Date picker</label>
|
|
84
|
-
<input type="date" id="date_field" class="input">
|
|
85
|
-
</div>
|
|
84
|
+
### Alert
|
|
86
85
|
|
|
87
|
-
|
|
88
|
-
<label for="file_field" class="text-sm font-medium">File</label>
|
|
89
|
-
<input type="file" id="file_field" class="input">
|
|
90
|
-
</div>
|
|
86
|
+
<img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
|
|
91
87
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<select id="age_range_Field" class="input">
|
|
95
|
-
<option value="0-13">0-13</option>
|
|
96
|
-
<option value="14-17">14-17</option>
|
|
97
|
-
</select>
|
|
98
|
-
</div>
|
|
88
|
+
<details>
|
|
89
|
+
<summary>Show me the code</summary>
|
|
99
90
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
91
|
+
```html+erb
|
|
92
|
+
<div class="alert alert--negative flex items-start gap">
|
|
93
|
+
<%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>
|
|
94
|
+
<div class="flex flex-col">
|
|
95
|
+
<h1 class="font-medium leading-none mbe-1">Error</h1>
|
|
96
|
+
<p class="text-sm">Your session has expired. Please log in again.</p>
|
|
103
97
|
</div>
|
|
98
|
+
</div>
|
|
99
|
+
```
|
|
100
|
+
</details>
|
|
104
101
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
102
|
+
### Alert Dialog
|
|
103
|
+
|
|
104
|
+
<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
|
|
105
|
+
|
|
106
|
+
<details>
|
|
107
|
+
<summary>Show me the code</summary>
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<div>
|
|
111
|
+
<dialog id="my_alert_dialog" class="alert-dialog">
|
|
112
|
+
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
|
113
|
+
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
|
114
|
+
|
|
115
|
+
<div class="flex justify-end gap-sm mbs-4">
|
|
116
|
+
<form method="dialog"><button class="btn btn--outline">Cancel</button></form>
|
|
117
|
+
<button class="btn btn--primary">Continue</button>
|
|
118
|
+
</div>
|
|
119
|
+
</dialog>
|
|
120
|
+
|
|
121
|
+
<button class="btn" data-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
|
|
122
|
+
Show alert dialog
|
|
123
|
+
</button>
|
|
109
124
|
</div>
|
|
110
125
|
```
|
|
126
|
+
</details>
|
|
127
|
+
|
|
128
|
+
### Badge
|
|
111
129
|
|
|
112
|
-
|
|
130
|
+
<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
|
|
113
131
|
|
|
114
|
-
<
|
|
132
|
+
<details>
|
|
133
|
+
<summary>Show me the code</summary>
|
|
115
134
|
|
|
116
135
|
```html
|
|
117
|
-
<div class="flex justify-
|
|
136
|
+
<div class="flex justify-start gap">
|
|
137
|
+
<div class="badge">Badge</div>
|
|
138
|
+
<div class="badge badge--secondary">Secondary</div>
|
|
139
|
+
<div class="badge badge--outline">Outline</div>
|
|
140
|
+
<div class="badge badge--positive">Positive</div>
|
|
141
|
+
<div class="badge badge--negative">Negative</div>
|
|
142
|
+
</div>
|
|
143
|
+
```
|
|
144
|
+
</details>
|
|
145
|
+
|
|
146
|
+
### Button
|
|
147
|
+
|
|
148
|
+
<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/0c2ee625-9e6b-4f9c-8437-8d6751e4e508">
|
|
149
|
+
|
|
150
|
+
<details>
|
|
151
|
+
<summary>Show me the code</summary>
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<div class="flex flex-wrap items-center gap" aria-busy>
|
|
118
155
|
<button class="btn">Primary</button>
|
|
119
156
|
<button class="btn btn--secondary">Secondary</button>
|
|
120
157
|
<button class="btn btn--outline">Outline</button>
|
|
121
158
|
<button class="btn btn--plain">Plain</button>
|
|
122
|
-
<button class="btn btn--positive">Positive</button>
|
|
123
159
|
<button class="btn btn--negative">Negative</button>
|
|
124
160
|
|
|
125
161
|
<button class="btn">
|
|
126
|
-
<%= image_tag "
|
|
162
|
+
<%= image_tag "circle-alert.svg", role: "presentation", size: 16 %>
|
|
127
163
|
<span>With icon</span>
|
|
128
164
|
</button>
|
|
165
|
+
|
|
166
|
+
<button class="btn btn--loading" disabled>
|
|
167
|
+
<span>Please wait</span>
|
|
168
|
+
</button>
|
|
129
169
|
</div>
|
|
130
170
|
```
|
|
171
|
+
</details>
|
|
131
172
|
|
|
132
|
-
|
|
173
|
+
### Card
|
|
133
174
|
|
|
134
|
-
<img width="
|
|
175
|
+
<img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
|
|
176
|
+
|
|
177
|
+
<details>
|
|
178
|
+
<summary>Show me the code</summary>
|
|
135
179
|
|
|
136
180
|
```html
|
|
137
|
-
<
|
|
138
|
-
<
|
|
139
|
-
|
|
181
|
+
<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
|
|
182
|
+
<div class="flex flex-col gap-sm">
|
|
183
|
+
<h1 class="text-2xl font-semibold leading-none">Create project</h1>
|
|
184
|
+
<p class="text-sm text-subtle">Deploy your new project in one-click.</p>
|
|
185
|
+
</div>
|
|
140
186
|
|
|
141
|
-
<div class="flex
|
|
142
|
-
<
|
|
143
|
-
|
|
187
|
+
<div class="flex flex-col gap">
|
|
188
|
+
<div class="flex flex-col gap-sm">
|
|
189
|
+
<label for="name" class="text-sm font-medium">Name</label>
|
|
190
|
+
<input type="text" id="name" placeholder="Name of your project" class="input">
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="flex flex-col gap-sm">
|
|
194
|
+
<label for="framework" class="text-sm font-medium">Framework</label>
|
|
195
|
+
<select id="framework" class="input">
|
|
196
|
+
<option value="">Select</option>
|
|
197
|
+
<option value="rails">Ruby on Rails</option>
|
|
198
|
+
<option value="laravel">Laravel</option>
|
|
199
|
+
<option value="next">Next</option>
|
|
200
|
+
</select>
|
|
201
|
+
</div>
|
|
144
202
|
</div>
|
|
145
|
-
</dialog>
|
|
146
203
|
|
|
147
|
-
<
|
|
204
|
+
<div class="flex justify-between">
|
|
205
|
+
<button class="btn btn--outline">Cancel</button>
|
|
206
|
+
<button class="btn">Destroy</button>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
148
209
|
```
|
|
210
|
+
</details>
|
|
149
211
|
|
|
150
|
-
|
|
212
|
+
### Dialog
|
|
151
213
|
|
|
152
|
-
|
|
214
|
+
<img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
|
|
153
215
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
216
|
+
<details>
|
|
217
|
+
<summary>Show me the code</summary>
|
|
218
|
+
|
|
219
|
+
```html
|
|
220
|
+
<artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
|
|
221
|
+
<div>
|
|
222
|
+
<dialog id="my_dialog" class="dialog" style="max-inline-size: 430px;" popover>
|
|
223
|
+
<button class="btn btn--plain p-0 dialog__close" popovertarget="my_dialog" popovertargetaction="hide">
|
|
224
|
+
<%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
|
|
225
|
+
<span class="sr-only">Close</span>
|
|
226
|
+
</button>
|
|
227
|
+
|
|
228
|
+
<div class="flex flex-col gap">
|
|
229
|
+
<div class="flex flex-col gap-sm">
|
|
230
|
+
<h1 class="text-lg leading-none font-semibold">Edit profile</h1>
|
|
231
|
+
<p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="flex flex-col mb-4 gap">
|
|
235
|
+
<div class="grid grid-cols-4 items-center gap">
|
|
236
|
+
<label for="name" class="text-sm font-medium text-end">Name</label>
|
|
237
|
+
<input type="text" id="name" value="Lázaro Nixon" class="input col-span-3">
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="grid grid-cols-4 items-center gap">
|
|
241
|
+
<label for="username" class="text-sm font-medium text-end">Username</label>
|
|
242
|
+
<input type="text" id="username" value="@lazaronixon" class="input col-span-3">
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="flex items-center justify-end">
|
|
247
|
+
<input type="submit" value= "Save changes" class="btn"/>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</dialog>
|
|
251
|
+
|
|
252
|
+
<button class="btn" popovertarget="my_dialog">
|
|
253
|
+
Show dialog
|
|
254
|
+
</button>
|
|
255
|
+
</div>
|
|
162
256
|
```
|
|
257
|
+
</details>
|
|
163
258
|
|
|
164
|
-
###
|
|
259
|
+
### Input
|
|
165
260
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
261
|
+
<img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
|
|
262
|
+
|
|
263
|
+
<details>
|
|
264
|
+
<summary>Show me the code</summary>
|
|
265
|
+
|
|
266
|
+
```html+erb
|
|
267
|
+
<%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
|
|
268
|
+
<div class="flex flex-col gap-sm">
|
|
269
|
+
<%= form.label :name, class: "text-sm font-medium" %>
|
|
270
|
+
<%= form.text_field :name, class: "input" %>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<div class="flex flex-col gap-sm">
|
|
274
|
+
<%= form.label :pick_a_date, class: "text-sm font-medium" %>
|
|
275
|
+
<%= form.date_field :pick_a_date, class: "input" %>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div class="flex flex-col gap-sm">
|
|
279
|
+
<%= form.label :age_range, class: "text-sm font-medium" %>
|
|
280
|
+
<%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<div class="flex flex-col gap-sm">
|
|
284
|
+
<%= form.label :comment, class: "text-sm font-medium" %>
|
|
285
|
+
<%= form.text_area :comment, rows: 3, class: "input" %>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<div class="flex items-center gap-sm">
|
|
289
|
+
<%= form.check_box :status, class: "checkbox" %>
|
|
290
|
+
<%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
|
|
291
|
+
</div>
|
|
292
|
+
<% end %>
|
|
293
|
+
```
|
|
294
|
+
</details>
|
|
295
|
+
|
|
296
|
+
### Progress
|
|
297
|
+
|
|
298
|
+
<img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
|
|
299
|
+
|
|
300
|
+
<details>
|
|
301
|
+
<summary>Show me the code</summary>
|
|
302
|
+
|
|
303
|
+
```html
|
|
304
|
+
<label>
|
|
305
|
+
<span class="sr-only">Loading progress</span>
|
|
306
|
+
<progress value="75" max="100" class="progress"></progress>
|
|
307
|
+
</label>
|
|
308
|
+
```
|
|
309
|
+
</details>
|
|
310
|
+
|
|
311
|
+
### Switch
|
|
312
|
+
|
|
313
|
+
<img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
|
|
314
|
+
|
|
315
|
+
<details>
|
|
316
|
+
<summary>Show me the code</summary>
|
|
317
|
+
|
|
318
|
+
```html+erb
|
|
319
|
+
<div class="flex items-center gap-sm">
|
|
320
|
+
<input type="checkbox" class="switch">
|
|
321
|
+
<label for="status" class="text-sm font-medium">Airplane Mode</label>
|
|
322
|
+
</div>
|
|
171
323
|
```
|
|
324
|
+
</details>
|
|
325
|
+
|
|
326
|
+
### Table
|
|
172
327
|
|
|
173
|
-
|
|
328
|
+
<img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
|
|
329
|
+
|
|
330
|
+
<details>
|
|
331
|
+
<summary>Show me the code</summary>
|
|
174
332
|
|
|
175
333
|
```html
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
334
|
+
<table class="table">
|
|
335
|
+
<thead>
|
|
336
|
+
<tr>
|
|
337
|
+
<th>Invoice</th>
|
|
338
|
+
<th>Status</th>
|
|
339
|
+
<th>Method</th>
|
|
340
|
+
<th class="text-end">Amount</th>
|
|
341
|
+
</tr>
|
|
342
|
+
</thead>
|
|
343
|
+
<tbody>
|
|
344
|
+
<tr>
|
|
345
|
+
<th>INV001</th>
|
|
346
|
+
<td>Paid</td>
|
|
347
|
+
<td>Credit Card</td>
|
|
348
|
+
<td class="text-end">$250.00</td>
|
|
349
|
+
</tr>
|
|
350
|
+
<tr>
|
|
351
|
+
<th>INV002</th>
|
|
352
|
+
<td>Pending</td>
|
|
353
|
+
<td>PayPal</td>
|
|
354
|
+
<td class="text-end">$150.00</td>
|
|
355
|
+
</tr>
|
|
356
|
+
<tr>
|
|
357
|
+
<th>INV003</th>
|
|
358
|
+
<td>Unpaid</td>
|
|
359
|
+
<td>Transfer</td>
|
|
360
|
+
<td class="text-end">$350.00</td>
|
|
361
|
+
</tr>
|
|
362
|
+
<tr>
|
|
363
|
+
<th>INV004</th>
|
|
364
|
+
<td>Paid</td>
|
|
365
|
+
<td>Credit Card</td>
|
|
366
|
+
<td class="text-end">$450.00</td>
|
|
367
|
+
</tr>
|
|
368
|
+
</tbody>
|
|
369
|
+
<tfoot>
|
|
370
|
+
<tr>
|
|
371
|
+
<td colspan="3">Paid</td>
|
|
372
|
+
<td class="text-end">$2,500.00</td>
|
|
373
|
+
</tr>
|
|
374
|
+
</tfoot>
|
|
375
|
+
</table>
|
|
179
376
|
```
|
|
377
|
+
</details>
|
|
180
378
|
|
|
181
379
|
## Development
|
|
182
380
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
/* Named color values */
|
|
3
2
|
--slate-50: #f8fafc;
|
|
4
3
|
--slate-100: #f1f5f9;
|
|
5
4
|
--slate-200: #e2e8f0;
|
|
@@ -263,29 +262,4 @@
|
|
|
263
262
|
--rose-800: #9f1239;
|
|
264
263
|
--rose-900: #881337;
|
|
265
264
|
--rose-950: #4c0519;
|
|
266
|
-
|
|
267
|
-
color-scheme: light dark;
|
|
268
|
-
|
|
269
|
-
/* Abstractions */
|
|
270
|
-
--color-bg: light-dark(white, var(--zinc-950));
|
|
271
|
-
--color-text: light-dark(var(--zinc-950), var(--zinc-50));
|
|
272
|
-
--color-text-reversed: light-dark(var(--zinc-50), var(--zinc-950));
|
|
273
|
-
--color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
|
|
274
|
-
--color-selected: light-dark(var(--zinc-400), var(--zinc-300));
|
|
275
|
-
--color-border: light-dark(var(--zinc-200), var(--zinc-800));
|
|
276
|
-
|
|
277
|
-
/* Accent colors */
|
|
278
|
-
--color-primary: light-dark(var(--zinc-900), var(--zinc-50));
|
|
279
|
-
--color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
|
|
280
|
-
--color-negative: light-dark(var(--red-600), var(--red-900));
|
|
281
|
-
--color-positive: light-dark(var(--green-600), var(--green-900));
|
|
282
|
-
|
|
283
|
-
/* Filtered color values */
|
|
284
|
-
--color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
|
|
285
|
-
--color-filter-text-reversed: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
|
|
286
|
-
|
|
287
|
-
@media (prefers-color-scheme: dark) {
|
|
288
|
-
--color-filter-text: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
|
|
289
|
-
--color-filter-text-reversed: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
|
|
290
|
-
}
|
|
291
265
|
}
|
|
@@ -2,56 +2,48 @@
|
|
|
2
2
|
/****************************************************************
|
|
3
3
|
* Scale
|
|
4
4
|
* Variables for scaling elements with transform.
|
|
5
|
-
* transform:
|
|
5
|
+
* transform: scale(--scale-100);
|
|
6
6
|
*****************************************************************/
|
|
7
|
-
--scale-
|
|
8
|
-
--scale-
|
|
9
|
-
--scale-
|
|
10
|
-
--scale-
|
|
11
|
-
--scale-
|
|
12
|
-
--scale-
|
|
13
|
-
--scale-
|
|
14
|
-
--scale-
|
|
15
|
-
--scale-
|
|
16
|
-
--scale-150: 1.50;
|
|
7
|
+
--scale-50: scale(0.50);
|
|
8
|
+
--scale-75: scale(0.75);
|
|
9
|
+
--scale-90: scale(0.90);
|
|
10
|
+
--scale-95: scale(0.95);
|
|
11
|
+
--scale-100: scale(1);
|
|
12
|
+
--scale-105: scale(1.05);
|
|
13
|
+
--scale-110: scale(1.10);
|
|
14
|
+
--scale-125: scale(1.25);
|
|
15
|
+
--scale-150: scale(1.50);
|
|
17
16
|
|
|
18
17
|
/****************************************************************
|
|
19
18
|
* Rotate
|
|
20
19
|
* Variables for rotating elements with transform.
|
|
21
20
|
* transform: var(--rotate-45);
|
|
22
21
|
*****************************************************************/
|
|
23
|
-
--rotate-0: 0deg;
|
|
24
|
-
--rotate-1: 1deg;
|
|
25
|
-
--rotate-2: 2deg;
|
|
26
|
-
--rotate-3: 3deg;
|
|
27
|
-
--rotate-6: 6deg;
|
|
28
|
-
--rotate-12: 12deg;
|
|
29
|
-
--rotate-45: 45deg;
|
|
30
|
-
--rotate-90: 90deg;
|
|
31
|
-
--rotate-180: 180deg;
|
|
32
|
-
|
|
33
|
-
/****************************************************************
|
|
34
|
-
* Translate
|
|
35
|
-
* Variables for translating elements with transform.
|
|
36
|
-
* transform: var(--translate-1-2);
|
|
37
|
-
*****************************************************************/
|
|
38
|
-
--translate-1-2: 50%;
|
|
39
|
-
--translate-1-3: 33.333333%;
|
|
40
|
-
--translate-2-3: 66.666667%;
|
|
41
|
-
--translate-1-4: 25%;
|
|
42
|
-
--translate-2-4: 50%;
|
|
43
|
-
--translate-3-4: 75%;
|
|
44
|
-
--translate-full: 100%;
|
|
22
|
+
--rotate-0: rotate(0deg);
|
|
23
|
+
--rotate-1: rotate(1deg);
|
|
24
|
+
--rotate-2: rotate(2deg);
|
|
25
|
+
--rotate-3: rotate(3deg);
|
|
26
|
+
--rotate-6: rotate(6deg);
|
|
27
|
+
--rotate-12: rotate(12deg);
|
|
28
|
+
--rotate-45: rotate(45deg);
|
|
29
|
+
--rotate-90: rotate(90deg);
|
|
30
|
+
--rotate-180: rotate(180deg);
|
|
45
31
|
|
|
46
32
|
/****************************************************************
|
|
47
33
|
* Skew
|
|
48
34
|
* Varibles for skewing elements with transform.
|
|
49
|
-
* transform: var(--skew-3);
|
|
35
|
+
* transform: var(--skew-x-3);
|
|
50
36
|
*****************************************************************/
|
|
51
|
-
--skew-0: 0deg;
|
|
52
|
-
--skew-
|
|
53
|
-
--skew-
|
|
54
|
-
--skew-
|
|
55
|
-
--skew-
|
|
56
|
-
--skew-
|
|
37
|
+
--skew-x-0: skewX(0deg);
|
|
38
|
+
--skew-y-0: skewY(0deg);
|
|
39
|
+
--skew-x-1: skewX(1deg);
|
|
40
|
+
--skew-y-1: skewY(1deg);
|
|
41
|
+
--skew-x-2: skewX(2deg);
|
|
42
|
+
--skew-y-2: skewY(2deg);
|
|
43
|
+
--skew-x-3: skewX(3deg);
|
|
44
|
+
--skew-y-3: skewY(3deg);
|
|
45
|
+
--skew-x-6: skewX(6deg);
|
|
46
|
+
--skew-y-6: skewY(6deg);
|
|
47
|
+
--skew-x-12: skewX(12deg);
|
|
48
|
+
--skew-y-12: skewY(12deg);
|
|
57
49
|
}
|
|
@@ -4,13 +4,8 @@
|
|
|
4
4
|
* Variables for controlling which CSS properties transition.
|
|
5
5
|
* transition-property: var(--transition);
|
|
6
6
|
*****************************************************************/
|
|
7
|
-
--transition-
|
|
8
|
-
--transition-
|
|
9
|
-
--transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
|
|
10
|
-
--transition-colors: background-color, border-color, color, fill, stroke;
|
|
11
|
-
--transition-opacity: opacity;
|
|
12
|
-
--transition-shadow: box-shadow;
|
|
13
|
-
--transition-transform: transform;
|
|
7
|
+
--transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
|
|
8
|
+
--transition-colors: background-color, border-color, color, fill, stroke;
|
|
14
9
|
|
|
15
10
|
/****************************************************************
|
|
16
11
|
* Transition Timing
|