css-zero 0.0.7 → 0.0.9

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: 2543882ee28f358c8e32084ce02eb912b3c52d07cf3d71c3f8f02bf622d4d036
4
- data.tar.gz: c7d87cc7daecaf84976ed9079eef1af562583125bfbf43ab85eb270343fba589
3
+ metadata.gz: e1f5501303185bf9a119ea52aaaf5cbc03cef023cb3cd3fc2f3f884239d130e5
4
+ data.tar.gz: 49ca85bd7206b421c6ea37b5ad672beeaa0824843d3d4e9c7c97077d8044c75d
5
5
  SHA512:
6
- metadata.gz: 5876999cd7a670a39f0fd96cca3c36bde45bf8e753af5c324a5a501b776a8e5cf4191f90843971b716829fb762c3b8837f255ce372f6feee59b583b2a88a16dd
7
- data.tar.gz: b3a44196688b7145ccaa3ae738f124b0334c9511e70198c674d3353852b10eb0a43061d4506ec0175eb15d73532a63b28daa9d78a9e083cfefe2ab4572a65d46
6
+ metadata.gz: 7a5bd42832b1db0e2be98bea5421743311af95e1252f62a4b71497bee8e487172b914fe999b9dfecf507d267d4f4b8fb2292c4d18f967341550bb235acfa61ee
7
+ data.tar.gz: 99d987f57ca8c09000ac836ed175c6ad288af18d50b8a54fc8eff06523f7fb354e71208fcc40e6a4c99c12cb7932564698746124805639b69830bc602537514e
data/README.md CHANGED
@@ -26,12 +26,16 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
26
26
  ```css
27
27
  *= require _reset
28
28
  *= require animations
29
+ *= require base
29
30
  *= require borders
30
31
  *= require buttons
31
32
  *= require colors
33
+ *= require dialog
32
34
  *= require effects
33
35
  *= require filters
34
36
  *= require grid
37
+ *= require inputs
38
+ *= require separators
35
39
  *= require sizes
36
40
  *= require transform
37
41
  *= require transition
@@ -64,38 +68,80 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
64
68
 
65
69
  Check the [CSS files](app/assets/stylesheets) in the repository for reference.
66
70
 
71
+ ## Inputs
72
+
73
+ <img width="469" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/987201b3-2583-43af-b1f2-db6af1eabbaa">
74
+
75
+ ```html+erb
76
+ <div class="flex flex-col w-full gap" style="max-inline-size: 24rem;">
77
+ <div class="flex flex-col grow gap-small">
78
+ <label for="name_field" class="text-sm font-medium">Full name</label>
79
+ <input type="text" id="name_field" class="input">
80
+ </div>
81
+
82
+ <div class="flex flex-col grow gap-small">
83
+ <label for="file_field" class="text-sm font-medium">File</label>
84
+ <input type="file" id="file_field" class="input">
85
+ </div>
86
+
87
+ <div class="flex flex-col grow gap-small">
88
+ <label for="age_range_Field" class="text-sm font-medium">Age Range</label>
89
+ <select id="age_range_Field" class="input">
90
+ <option value="0-13">0-13</option>
91
+ <option value="14-17">14-17</option>
92
+ </select>
93
+ </div>
94
+
95
+ <div class="flex flex-col grow gap-small">
96
+ <label for="comment_field" class="text-sm font-medium">Comment</label>
97
+ <textarea id="comment_field" class="input"></textarea>
98
+ </div>
99
+
100
+ <div class="flex items-center gap-small">
101
+ <input type="checkbox" id="terms">
102
+ <label for="terms" class="text-sm font-medium">Accept terms and conditions</label>
103
+ </div>
104
+ </div>
105
+ ```
106
+
67
107
  ## Buttons
68
108
 
69
- <img width="1010" alt="Buttons Light" src="https://github.com/lazaronixon/css-zero/assets/2651240/df0870ae-86e5-43c4-98c5-86946a467f0c">
109
+ <img width="779" alt="Buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ea0bdafe-7bd9-46a4-a87c-b11dd0836707">
70
110
 
71
111
  ```html+erb
72
112
  <div class="flex items-center gap">
73
- <button class="btn btn--primary">Primary button</button>
74
- <button class="btn">Outline button</button>
113
+ <button class="btn">Primary button</button>
114
+ <button class="btn btn--outline">Outline button</button>
75
115
  <button class="btn btn--plain">Plain button</button>
76
- <button class="btn" disabled>Disabled button</button>
77
116
 
78
- <button class="btn btn--primary">
79
- <%= image_tag "plus.svg", class: "invert" %> <span>Icon Button</span>
117
+ <button class="btn">
118
+ <%= image_tag "plus.svg", role: "presentation", size: 20 %>
119
+ <span>Icon button</span>
80
120
  </button>
81
121
 
82
- <button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
83
- Colored button
84
- </button>
85
-
86
- <button class="btn btn--small">
87
- Button small
122
+ <button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
123
+ Custom button
88
124
  </button>
89
125
  </div>
90
126
  ```
91
127
 
92
- ## Inputs
128
+ ## Dialog
93
129
 
94
- Soon...
130
+ <img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
95
131
 
96
- ## Dialog
132
+ ```html+erb
133
+ <dialog id="my_modal" class="dialog">
134
+ <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
135
+ <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>
136
+
137
+ <div class="flex gap-small justify-end mbs-4">
138
+ <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
139
+ <button class="btn">Continue</button>
140
+ </div>
141
+ </dialog>
97
142
 
98
- Soon...
143
+ <button class="btn" onClick="my_modal.showModal();">Show modal</button>
144
+ ```
99
145
 
100
146
  ## Customization
101
147
 
@@ -104,7 +150,6 @@ Soon...
104
150
  ```css
105
151
  :root {
106
152
  --color-bg: white;
107
- --color-bg-surface: var(--zinc-100);
108
153
  --color-text: var(--zinc-950);
109
154
  --color-text-reversed: white;
110
155
  --color-text-subtle: var(--zinc-500);
@@ -124,7 +169,7 @@ Soon...
124
169
  ### Style level
125
170
 
126
171
  ```html
127
- <button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
172
+ <button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
128
173
  Colored button
129
174
  </button>
130
175
  ```
@@ -0,0 +1,4 @@
1
+ html, body {
2
+ background-color: var(--color-bg);
3
+ color: var(--color-text);
4
+ }
@@ -1,22 +1,21 @@
1
1
  .btn {
2
2
  align-items: center;
3
- background-color: var(--btn-background, transparent);
4
- border-radius: var(--btn-border-radius, var(--rounded-lg));
5
- border: 1px solid var(--btn-border-color, var(--color-border));
6
- box-shadow: var(--btn-shadow, var(--shadow-sm));
7
- color: var(--btn-color, var(--color-text));
8
- column-gap: var(--btn-column-gap, var(--size-1));
3
+ background-color: var(--btn-background, var(--color-primary));
4
+ border-radius: var(--btn-border-radius, var(--rounded-md));
5
+ border: 1px solid var(--btn-border-color, transparent);
6
+ color: var(--btn-color, var(--color-text-reversed));
7
+ column-gap: var(--btn-gap, var(--size-2));
9
8
  cursor: pointer;
10
9
  display: inline-flex;
11
10
  font-size: var(--btn-font-size, var(--text-sm));
12
- font-weight: var(--btn-font-weight, var(--font-semibold));
11
+ font-weight: var(--btn-font-weight, var(--font-medium));
13
12
  justify-content: center;
14
- line-height: var(--btn-line-height, var(--leading-6));
15
- padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
13
+ padding: var(--btn-padding, .5rem 1rem);
16
14
  text-align: center;
15
+ white-space: nowrap;
17
16
 
18
- &:hover {
19
- filter: var(--brightness-90);
17
+ img:not([class]) {
18
+ filter: var(--btn-icon-color, var(--color-filter-text-reversed));
20
19
  }
21
20
 
22
21
  &:disabled {
@@ -25,18 +24,23 @@
25
24
  }
26
25
  }
27
26
 
28
- .btn--primary {
29
- --btn-background: var(--color-primary);
30
- --btn-border-color: transparent;
31
- --btn-color: white;
27
+ .btn--outline {
28
+ --btn-background: transparent;
29
+ --btn-border-color: var(--color-border);
30
+ --btn-color: var(--color-text);
31
+ --btn-icon-color: var(--color-filter-text);
32
32
  }
33
33
 
34
34
  .btn--plain {
35
- --btn-border-color: transparent;
36
- --btn-shadow: none;
35
+ --btn-background: transparent;
36
+ --btn-color: var(--color-text);
37
+ --btn-icon-color: var(--color-filter-text);
37
38
  }
38
39
 
39
- .btn--small {
40
- --btn-font-size: var(--text-xs);
41
- --btn-line-height: var(--leading-5);
40
+ .btn--positive {
41
+ --btn-background: var(--color-positive);
42
+ }
43
+
44
+ .btn--negative {
45
+ --btn-background: var(--color-negative);
42
46
  }
@@ -264,28 +264,27 @@
264
264
  --rose-900: #881337;
265
265
  --rose-950: #4c0519;
266
266
 
267
+ color-scheme: light dark;
268
+
267
269
  /* Abstractions */
268
- --color-primary: var(--zinc-900);
269
- --color-bg: white;
270
- --color-bg-surface: var(--zinc-100);
271
- --color-text: var(--zinc-950);
272
- --color-text-reversed: white;
273
- --color-text-subtle: var(--zinc-600);
274
- --color-border: var(--zinc-200);
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-border-light: light-dark(var(--zinc-100), var(--zinc-900));
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-negative: light-dark(var(--red-600), var(--red-900));
280
+ --color-positive: light-dark(var(--green-600), var(--green-900));
275
281
 
276
282
  /* Filtered color values */
277
- --color-filter-black: var(--invert-0);
278
- --color-filter-white: var(--invert);
283
+ --color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
284
+ --color-filter-text-reversed: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
279
285
 
280
- /* Redefine named color values for dark mode */
281
286
  @media (prefers-color-scheme: dark) {
282
- --color-primary: var(--zinc-600);
283
- --color-bg: var(--zinc-900);
284
- --color-bg-surface: var(--zinc-950);
285
- --color-text: white;
286
- --color-text-reversed: var(--zinc-950);
287
- --color-border: rgba(255, 255, 255, 0.15);
288
- --color-filter-black: var(--invert);
289
- --color-filter-white: var(--invert-0);
287
+ --color-filter-text: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
288
+ --color-filter-text-reversed: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
290
289
  }
291
290
  }
@@ -0,0 +1,34 @@
1
+ .dialog {
2
+ background-color: var(--dialog-background, var(--color-bg));
3
+ border: 1px solid var(--dialog-border-color, var(--color-border));
4
+ border-radius: var(--dialog-border-radius, var(--rounded-lg));
5
+ box-shadow: var(--dialog-shadow, var(--shadow-lg));
6
+ color: var(--dialog-color, var(--color-text));
7
+ margin: auto; inline-size: 100%;
8
+ max-inline-size: var(--dialog-size, var(--width-lg));
9
+ padding: var(--dialog-padding, var(--size-6));
10
+
11
+ &::backdrop {
12
+ background-color: var(--dialog-backdrop-background, #000c);
13
+ }
14
+
15
+ /* Setup transition */
16
+ &, &::backdrop {
17
+ opacity: 0; transition: all var(--time-300) allow-discrete;
18
+ }
19
+
20
+ /* Fade in */
21
+ &[open], &[open]::backdrop {
22
+ opacity: 1
23
+ }
24
+
25
+ /* Fade out */
26
+ @starting-style {
27
+ &[open], &[open]::backdrop { opacity: 0; }
28
+ }
29
+
30
+ /* Responsiveness */
31
+ @media (width <= 40rem) {
32
+ border-radius: 0;
33
+ }
34
+ }
@@ -0,0 +1,43 @@
1
+ .input {
2
+ appearance: none;
3
+ background-color: var(--input-background, transparent);
4
+ border-radius: var(--input-border-radius, var(--rounded-md));
5
+ border: 1px solid var(--input-border-color, var(--color-border));
6
+ box-shadow: var(--input-shadow, var(--shadow-xs));
7
+ font-size: var(--input-font-size, var(--text-sm));
8
+ inline-size: 100%;
9
+ padding: var(--input-padding, .5rem .75rem);
10
+
11
+ &::file-selector-button {
12
+ font-weight: var(--font-medium);
13
+ margin-inline-end: var(--size-2);
14
+ }
15
+
16
+ &:is(textarea) {
17
+ field-sizing: content;
18
+ min-block-size: var(--input-lines, 4lh);
19
+ resize: none;
20
+ }
21
+
22
+ &:is(select):not([multiple]) {
23
+ background-image: var(--icon-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(113,113,122)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E"));
24
+ background-position: center right var(--icon-chevron-padding, .75rem);
25
+ background-size: 1rem auto;
26
+ background-repeat: no-repeat;
27
+ }
28
+
29
+ &:disabled {
30
+ cursor: not-allowed;
31
+ opacity: var(--opacity-50);
32
+ }
33
+
34
+ &::placeholder {
35
+ color: var(--color-text-subtle);
36
+ }
37
+ }
38
+
39
+ [type="checkbox"], [type="radio"] {
40
+ accent-color: var(--color-primary);
41
+ height: var(--check-size, var(--size-4));
42
+ width: var(--check-size, var(--size-4));
43
+ }
@@ -0,0 +1,4 @@
1
+ .separator {
2
+ border-block-start: 1px var(--separator-style, solid) var(--separator-color, var(--color-border));
3
+ inline-size: 100%;
4
+ }
@@ -6,23 +6,24 @@
6
6
  .flex-wrap { flex-wrap: wrap; }
7
7
  .inline-flex { display: inline-flex; }
8
8
 
9
- .justify-end { justify-content: end; }
10
9
  .justify-start { justify-content: start; }
11
10
  .justify-center { justify-content: center; }
11
+ .justify-end { justify-content: end; }
12
12
  .justify-between { justify-content: space-between; }
13
13
 
14
- .items-end { align-items: end; }
15
14
  .items-start { align-items: start; }
15
+ .items-end { align-items: end; }
16
16
  .items-center { align-items: center; }
17
17
 
18
18
  .grow { flex-grow: 1; }
19
19
  .shrink-0 { flex-shrink: 0; }
20
20
 
21
- .self-end { align-self: end; }
22
21
  .self-start { align-self: start; }
22
+ .self-end { align-self: end; }
23
23
  .self-center { align-self: center; }
24
24
 
25
25
  .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
26
+ .gap-small { column-gap: 0.5rem; row-gap: 0.5rem; }
26
27
 
27
28
  /****************************************************************
28
29
  * Text
@@ -44,7 +45,8 @@
44
45
  .break-words { word-break: break-word; }
45
46
  .break-all { word-break: break-all; }
46
47
 
47
- .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
48
+ .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
49
+ .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
48
50
 
49
51
  .opacity-75 { opacity: var(--opacity-75); }
50
52
  .opacity-50 { opacity: var(--opacity-50); }
@@ -58,6 +60,8 @@
58
60
 
59
61
  .text-primary { color: var(--color-text); }
60
62
  .text-reversed { color: var(--color-text-reversed); }
63
+ .text-negative { color: var(--color-negative); }
64
+ .text-positive { color: var(--color-positive); }
61
65
  .text-subtle { color: var(--color-text-subtle); }
62
66
 
63
67
  .text-xs { font-size: var(--text-xs); }
@@ -78,24 +82,28 @@
78
82
  * Background
79
83
  *****************************************************************/
80
84
  .bg-main { background-color: var(--color-bg); }
85
+ .bg-black { background-color: var(--color-text); }
81
86
  .bg-white { background-color: var(--color-text-reversed); }
82
- .bg-surface { background-color: var(--color-bg-surface); }
87
+ .bg-shade { background-color: var(--color-border-light); }
83
88
  .bg-transparent { background-color: transparent; }
84
89
 
85
- .invert { filter: var(--invert); }
86
- .colorize-black { filter: var(--color-filter-black); }
87
- .colorize-white { filter: var(--color-filter-white); }
90
+ /****************************************************************
91
+ * SVG colors
92
+ *****************************************************************/
93
+ .colorize-black { filter: var(--color-filter-text); }
94
+ .colorize-white { filter: var(--color-filter-text-reversed); }
88
95
 
89
96
  /****************************************************************
90
97
  * Border
91
98
  *****************************************************************/
99
+ .border-0 { border: 0; }
92
100
  .border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
93
101
  .border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
94
102
  .border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
95
103
  .border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
96
104
  .border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
97
- .border-0 { border: 0; }
98
105
 
106
+ .rounded-none { border-radius: none; }
99
107
  .rounded-sm { border-radius: var(--rounded-sm); }
100
108
  .rounded { border-radius: var(--rounded); }
101
109
  .rounded-md { border-radius: var(--rounded-md); }
@@ -104,11 +112,11 @@
104
112
  .rounded-2xl { border-radius: var(--rounded-2xl); }
105
113
  .rounded-3xl { border-radius: var(--rounded-3xl); }
106
114
  .rounded-full { border-radius: var(--rounded-full); }
107
- .rounded-none { border-radius: none; }
108
115
 
109
116
  /****************************************************************
110
117
  * Shadow
111
118
  *****************************************************************/
119
+ .shadow-none { box-shadow: none; }
112
120
  .shadow-xs { box-shadow: var(--shadow-xs); }
113
121
  .shadow-sm { box-shadow: var(--shadow-sm); }
114
122
  .shadow { box-shadow: var(--shadow); }
@@ -116,7 +124,6 @@
116
124
  .shadow-lg { box-shadow: var(--shadow-lg); }
117
125
  .shadow-xl { box-shadow: var(--shadow-xl); }
118
126
  .shadow-2xl { box-shadow: var(--shadow-2xl); }
119
- .shadow-none { box-shadow: none; }
120
127
 
121
128
  /****************************************************************
122
129
  * Layout
@@ -126,6 +133,7 @@
126
133
  .inline-block { display: inline-block; }
127
134
 
128
135
  .relative { position: relative; }
136
+ .sticky { position: sticky; }
129
137
 
130
138
  .min-w-0 { min-inline-size: 0; }
131
139
  .max-w-full { max-inline-size: 100%; }
@@ -133,7 +141,8 @@
133
141
  .h-full { block-size: 100%; }
134
142
  .w-full { inline-size: 100%; }
135
143
 
136
- .overflow-auto { overflow: auto; }
144
+ .overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
145
+ .overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
137
146
  .overflow-hidden { overflow: hidden; }
138
147
 
139
148
  /****************************************************************
@@ -147,6 +156,7 @@
147
156
  .m-6 { margin: var(--size-6); }
148
157
  .m-8 { margin: var(--size-8); }
149
158
  .m-10 { margin: var(--size-10); }
159
+ .m-auto { margin: auto; }
150
160
 
151
161
  .mb-0 { margin-block: 0; }
152
162
  .mb-0\.5 { margin-block: var(--size-0_5); }
@@ -273,3 +283,16 @@
273
283
  .pie-6 { padding-inline-end: var(--size-6); }
274
284
  .pie-8 { padding-inline-end: var(--size-8); }
275
285
  .pie-10 { padding-inline-end: var(--size-10); }
286
+
287
+ /****************************************************************
288
+ * Accessibility
289
+ *****************************************************************/
290
+ .sr-only {
291
+ position: absolute;
292
+ width: 1px; height: 1px;
293
+ padding: 0; margin: -1px;
294
+ overflow: hidden;
295
+ clip: rect(0, 0, 0, 0);
296
+ white-space: nowrap;
297
+ border-width: 0;
298
+ }
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module CssZero
4
- VERSION = "0.0.7"
4
+ VERSION = "0.0.9"
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.7
4
+ version: 0.0.9
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-06-12 00:00:00.000000000 Z
11
+ date: 2024-06-18 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -20,12 +20,16 @@ files:
20
20
  - Rakefile
21
21
  - app/assets/stylesheets/_reset.css
22
22
  - app/assets/stylesheets/animations.css
23
+ - app/assets/stylesheets/base.css
23
24
  - app/assets/stylesheets/borders.css
24
25
  - app/assets/stylesheets/buttons.css
25
26
  - app/assets/stylesheets/colors.css
27
+ - app/assets/stylesheets/dialog.css
26
28
  - app/assets/stylesheets/effects.css
27
29
  - app/assets/stylesheets/filters.css
28
30
  - app/assets/stylesheets/grid.css
31
+ - app/assets/stylesheets/inputs.css
32
+ - app/assets/stylesheets/separators.css
29
33
  - app/assets/stylesheets/sizes.css
30
34
  - app/assets/stylesheets/transform.css
31
35
  - app/assets/stylesheets/transition.css