css-zero 0.0.18 → 0.0.20

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e0160a1de6cec67785d5c12b68ab51a020dddf109aab5e76bb1dc1c15ca4c5d3
4
- data.tar.gz: 60d34a2b612a22f5c8adfbe759a570ed507afaabd9192d3a5d34393384b49d9a
3
+ metadata.gz: 8fdf533ce57fa9f3755bdc671350e5ae78c5fe0d036818eb67a0e4bc53381ce9
4
+ data.tar.gz: 8cc157fa3247ebf822da055a72c29d5af3c6c2ae32d498789112cbf9abe0bf19
5
5
  SHA512:
6
- metadata.gz: df8b92602ece5cc374d5fd806a07c54a20c889de3e078e2c1f1322df0cf3eca85e6e10c6a9115d794fdf6aaa538c967e911cebfa1c6588af881f9faf48b161e1
7
- data.tar.gz: 4bdfaf4732cf6d971d1fc28de2dc60e7c4bc7af3f128097573e61a1104d59e474a8f344d09731d4a523e40c2a9485c07671d62d17d128817bca37b0b221ec1f8
6
+ metadata.gz: 3a5d85f4aeea75765eba29e2e8cbe36e8f8d095260e9418b563af814887b312792f59303fe93f264bb9dc618b460c108cad8a968a8174c6528a99e61f5558fa1
7
+ data.tar.gz: 9a12fa3ce63f9301a79d23a72a0c2a443607b7b6e617ae65fc6e01519de6f911fe50c2588fc42ad8f450ca77a68f3ae99eb078209a82d5839ee8e32c68391841
data/README.md CHANGED
@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
19
19
  Add only the components you need. (Optional)
20
20
 
21
21
  ```
22
- bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
22
+ bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress prose switch table
23
23
  ```
24
24
 
25
25
  ### Requirements
@@ -1,36 +1,164 @@
1
1
  /****************************************************************
2
2
  * Animation
3
3
  * Variables for animating elements with CSS animations.
4
- * animation: var(--animate-pulse);
4
+ * animation: var(--animate-fade-in) forwards;
5
5
  *****************************************************************/
6
6
 
7
7
  :root {
8
- --animate-spin: spin 1s linear infinite;
9
- --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
10
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
11
- --animate-bounce: bounce 1s infinite;
8
+ --animate-fade-in: fade-in .5s cubic-bezier(.25, 0, .3, 1);
9
+ --animate-fade-in-bloom: fade-in-bloom 2s cubic-bezier(.25, 0, .3, 1);
10
+ --animate-fade-out: fade-out .5s cubic-bezier(.25, 0, .3, 1);
11
+ --animate-fade-out-bloom: fade-out-bloom 2s cubic-bezier(.25, 0, .3, 1);
12
+ --animate-scale-up: scale-up .5s cubic-bezier(.25, 0, .3, 1);
13
+ --animate-scale-down: scale-down .5s cubic-bezier(.25, 0, .3, 1);
14
+ --animate-slide-out-up: slide-out-up .5s cubic-bezier(.25, 0, .3, 1);
15
+ --animate-slide-out-down: slide-out-down .5s cubic-bezier(.25, 0, .3, 1);
16
+ --animate-slide-out-right: slide-out-right .5s cubic-bezier(.25, 0, .3, 1);
17
+ --animate-slide-out-left: slide-out-left .5s cubic-bezier(.25, 0, .3, 1);
18
+ --animate-slide-in-up: slide-in-up .5s cubic-bezier(.25, 0, .3, 1);
19
+ --animate-slide-in-down: slide-in-down .5s cubic-bezier(.25, 0, .3, 1);
20
+ --animate-slide-in-right: slide-in-right .5s cubic-bezier(.25, 0, .3, 1);
21
+ --animate-slide-in-left: slide-in-left .5s cubic-bezier(.25, 0, .3, 1);
22
+ --animate-shake-x: shake-x .75s cubic-bezier(0, 0, 0, 1);
23
+ --animate-shake-y: shake-y .75s cubic-bezier(0, 0, 0, 1);
24
+ --animate-shake-z: shake-z 1s cubic-bezier(0, 0, 0, 1);
25
+ --animate-spin: spin 2s linear infinite;
26
+ --animate-ping: ping 5s cubic-bezier(0, 0, .3, 1) infinite;
27
+ --animate-blink: blink 1s cubic-bezier(0, 0, .3, 1) infinite;
28
+ --animate-float: float 3s cubic-bezier(0, 0, 0, 1) infinite;
29
+ --animate-bounce: bounce 2s cubic-bezier(.5, -.3, .1, 1.5) infinite;
30
+ --animate-pulse: pulse 2s cubic-bezier(0, 0, .3, 1) infinite;
31
+ }
32
+
33
+ @keyframes fade-in {
34
+ to { opacity: 1 }
35
+ }
36
+
37
+ @keyframes fade-in-bloom {
38
+ 0% { opacity: 0; filter: brightness(1) blur(20px) }
39
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
40
+ 100% { opacity: 1; filter: brightness(1) blur(0) }
41
+ }
42
+
43
+ @keyframes fade-out {
44
+ to { opacity: 0 }
45
+ }
46
+
47
+ @keyframes fade-out-bloom {
48
+ 100% { opacity: 0; filter: brightness(1) blur(20px) }
49
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
50
+ 0% { opacity: 1; filter: brightness(1) blur(0) }
51
+ }
52
+ @keyframes scale-up {
53
+ to { transform: scale(1.25) }
54
+ }
55
+
56
+ @keyframes scale-down {
57
+ to { transform: scale(.75) }
58
+ }
59
+
60
+ @keyframes slide-out-up {
61
+ to { transform: translateY(-100%) }
62
+ }
63
+
64
+ @keyframes slide-out-down {
65
+ to { transform: translateY(100%) }
66
+ }
67
+
68
+ @keyframes slide-out-right {
69
+ to { transform: translateX(100%) }
70
+ }
71
+
72
+ @keyframes slide-out-left {
73
+ to { transform: translateX(-100%) }
74
+ }
75
+
76
+ @keyframes slide-in-up {
77
+ from { transform: translateY(100%) }
78
+ }
79
+
80
+ @keyframes slide-in-down {
81
+ from { transform: translateY(-100%) }
82
+ }
83
+
84
+ @keyframes slide-in-right {
85
+ from { transform: translateX(-100%) }
86
+ }
87
+
88
+ @keyframes slide-in-left {
89
+ from { transform: translateX(100%) }
90
+ }
91
+
92
+ @keyframes shake-x {
93
+ 0%, 100% { transform: translateX(0%) }
94
+ 20% { transform: translateX(-5%) }
95
+ 40% { transform: translateX(5%) }
96
+ 60% { transform: translateX(-5%) }
97
+ 80% { transform: translateX(5%) }
98
+ }
99
+
100
+ @keyframes shake-y {
101
+ 0%, 100% { transform: translateY(0%) }
102
+ 20% { transform: translateY(-5%) }
103
+ 40% { transform: translateY(5%) }
104
+ 60% { transform: translateY(-5%) }
105
+ 80% { transform: translateY(5%) }
106
+ }
107
+
108
+ @keyframes shake-z {
109
+ 0%, 100% { transform: rotate(0deg) }
110
+ 20% { transform: rotate(-2deg) }
111
+ 40% { transform: rotate(2deg) }
112
+ 60% { transform: rotate(-2deg) }
113
+ 80% { transform: rotate(2deg) }
12
114
  }
13
115
 
14
116
  @keyframes spin {
15
- to { transform: rotate(360deg); }
117
+ to { transform: rotate(1turn) }
16
118
  }
17
119
 
18
120
  @keyframes ping {
19
- 75%, 100% { transform: scale(2); opacity: 0; }
121
+ 90%, 100% {
122
+ transform: scale(2);
123
+ opacity: 0;
124
+ }
20
125
  }
21
126
 
22
- @keyframes pulse {
23
- 50% { opacity: 0.5; }
127
+ @keyframes blink {
128
+ 0%, 100% {
129
+ opacity: 1
130
+ }
131
+ 50% {
132
+ opacity: .5
133
+ }
134
+ }
135
+
136
+ @keyframes float {
137
+ 50% { transform: translateY(-25%) }
24
138
  }
25
139
 
26
140
  @keyframes bounce {
27
- 0%, 100% {
28
- transform: translateY(-25%);
29
- animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
30
- }
141
+ 25% { transform: translateY(-20%) }
142
+ 40% { transform: translateY(-3%) }
143
+ 0%, 60%, 100% { transform: translateY(0) }
144
+ }
31
145
 
32
- 50% {
33
- transform: none;
34
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
146
+ @keyframes pulse {
147
+ 50% { transform: scale(.9,.9) }
148
+ }
149
+
150
+ @media (prefers-color-scheme: dark) {
151
+ @keyframes fade-in-bloom {
152
+ 0% { opacity: 0; filter: brightness(1) blur(20px) }
153
+ 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
154
+ 100% { opacity: 1; filter: brightness(1) blur(0) }
35
155
  }
36
156
  }
157
+
158
+ @media (prefers-color-scheme: dark) {
159
+ @keyframes fade-out-bloom {
160
+ 100% { opacity: 0; filter: brightness(1) blur(20px) }
161
+ 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
162
+ 0% { opacity: 1; filter: brightness(1) blur(0) }
163
+ }
164
+ }
@@ -4,7 +4,6 @@
4
4
  * Variables for controlling the box shadow of an element.
5
5
  * box-shadow: var(--shadow);
6
6
  ****************************************************************/
7
- --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
8
7
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
9
8
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
10
9
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -17,6 +17,10 @@
17
17
  --text-7xl: 4.5rem; /* 72px */
18
18
  --text-8xl: 6rem; /* 96px */
19
19
  --text-9xl: 8rem; /* 128px */
20
+ --text-sm-responsive: clamp(0.75rem, 2cqi, 1rem);
21
+ --text-base-responsive: clamp(1rem, 2.5cqi, 1.5rem);
22
+ --text-lg-responsive: clamp(1.25rem, 4cqi, 1.875rem);
23
+ --text-lg-responsive: clamp(1.875rem, 5cqi, 3rem);
20
24
 
21
25
  /****************************************************************
22
26
  * Font Weight
@@ -31,6 +31,9 @@
31
31
  /****************************************************************
32
32
  * Text
33
33
  *****************************************************************/
34
+ .antialiased { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
35
+ .subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
36
+
34
37
  .font-normal { font-weight: var(--font-normal); }
35
38
  .font-medium { font-weight: var(--font-medium); }
36
39
  .font-semibold { font-weight: var(--font-semibold); }
@@ -82,6 +85,11 @@
82
85
  .text-8xl { font-size: var(--text-8xl); }
83
86
  .text-9xl { font-size: var(--text-9xl); }
84
87
 
88
+ .text-sm-responsive { font-size: var(--text-sm-responsive); }
89
+ .text-base-responsive { font-size: var(--text-base-responsive); }
90
+ .text-lg-responsive { font-size: var(--text-lg-responsive); }
91
+ .text-xl-responsive { font-size: var(--text-xl-responsive); }
92
+
85
93
  /****************************************************************
86
94
  * Background
87
95
  *****************************************************************/
@@ -130,13 +138,13 @@
130
138
  * Shadow
131
139
  *****************************************************************/
132
140
  .shadow-none { box-shadow: none; }
133
- .shadow-xs { box-shadow: var(--shadow-xs); }
134
141
  .shadow-sm { box-shadow: var(--shadow-sm); }
135
142
  .shadow { box-shadow: var(--shadow); }
136
143
  .shadow-md { box-shadow: var(--shadow-md); }
137
144
  .shadow-lg { box-shadow: var(--shadow-lg); }
138
145
  .shadow-xl { box-shadow: var(--shadow-xl); }
139
146
  .shadow-2xl { box-shadow: var(--shadow-2xl); }
147
+ .shadow-inner { box-shadow: var(--shadow-inner); }
140
148
 
141
149
  /****************************************************************
142
150
  * Layout
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.18"
2
+ VERSION = "0.0.20"
3
3
  end
@@ -2,7 +2,7 @@ Description:
2
2
  This will add components into your project.
3
3
 
4
4
  Components:
5
- accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress switch table
5
+ accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress prose switch table
6
6
 
7
7
  Example:
8
8
  bin/rails generate css_zero:add [components...]
@@ -31,6 +31,8 @@ pagination:
31
31
  - app/assets/images/ellipsis.svg
32
32
  progress:
33
33
  - app/assets/stylesheets/progress.css
34
+ prose:
35
+ - app/assets/stylesheets/prose.css
34
36
  switch:
35
37
  - app/assets/stylesheets/switch.css
36
38
  table:
@@ -23,7 +23,7 @@
23
23
  padding-block: var(--size-4);
24
24
 
25
25
  &:focus-visible {
26
- outline: var(--border-2) solid var(--color-border-dark);
26
+ outline: var(--border-2) solid var(--color-primary);
27
27
  outline-offset: var(--border-2);
28
28
  }
29
29
 
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  &:focus-visible {
23
- outline: var(--border-2) solid var(--color-border-dark);
23
+ outline: var(--border-2) solid var(--color-primary);
24
24
  outline-offset: var(--border-2);
25
25
  }
26
26
 
@@ -2,5 +2,5 @@
2
2
  border-radius: var(--rounded-lg);
3
3
  border-width: var(--border);
4
4
  padding: var(--size-6);
5
- shadow: var(--shadow-sm);
5
+ box-shadow: var(--shadow-sm);
6
6
  }
@@ -4,7 +4,6 @@
4
4
  border-color: var(--color-border);
5
5
  border-radius: var(--rounded-md);
6
6
  border-width: var(--border);
7
- box-shadow: var(--shadow-xs);
8
7
  font-size: var(--text-sm);
9
8
  inline-size: var(--size-full);
10
9
  padding: var(--size-2) var(--size-3);
@@ -58,7 +57,7 @@
58
57
  :is(.input, .range, .checkbox, .radio) {
59
58
  /* Keyboard navigation */
60
59
  &:focus-visible {
61
- outline: var(--border-2) solid var(--color-border-dark);
60
+ outline: var(--border-2) solid var(--color-primary);
62
61
  outline-offset: var(--border-2);
63
62
  }
64
63
 
@@ -28,6 +28,6 @@
28
28
  }
29
29
 
30
30
  a:not([aria-disabled]):hover {
31
- background-color: var(--color-secondary);
31
+ background-color: var(--color-border-light);
32
32
  }
33
33
  }
@@ -1,5 +1,5 @@
1
1
  .progress {
2
- --track: var(--color-secondary);
2
+ --track: var(--color-border-light);
3
3
  --progress: var(--color-primary);
4
4
 
5
5
  background-color: var(--track);
@@ -0,0 +1,130 @@
1
+ :where(.prose) {
2
+ :is(h1, h2, h3, h4, h5, h6) {
3
+ font-weight: 800;
4
+ hyphens: auto;
5
+ letter-spacing: -0.02ch;
6
+ line-height: 1.1;
7
+ margin-block: 0.65em;
8
+ overflow-wrap: break-word;
9
+ text-wrap: balance;
10
+ }
11
+
12
+ h1 {
13
+ font-size: 2em;
14
+ }
15
+
16
+ h2 {
17
+ font-size: 1.5em;
18
+ }
19
+
20
+ h3 {
21
+ font-size: 1.17em;
22
+ }
23
+
24
+ h4 {
25
+ font-size: 1em;
26
+ }
27
+
28
+ h5 {
29
+ font-size: 0.83em;
30
+ }
31
+
32
+ h6 {
33
+ font-size: 0.67em;
34
+ }
35
+
36
+ :is(ul, ol, menu) {
37
+ list-style: revert;
38
+ padding-inline-start: revert;
39
+ }
40
+
41
+ :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
42
+ margin-block: 0.65lh;
43
+ overflow-wrap: break-word;
44
+ text-wrap: pretty;
45
+ }
46
+
47
+ hr {
48
+ border-color: var(--color-border-dark);
49
+ border-style: var(--border-style, solid) none none;
50
+ margin: 2lh auto;
51
+ }
52
+
53
+ :is(b, strong) {
54
+ font-weight: 700;
55
+ }
56
+
57
+ :is(pre, code) {
58
+ background-color: var(--color-border-light);
59
+ border: 1px solid var(--color-border);
60
+ border-radius: 0.3em;
61
+ font-family: var(--font-monospace-code);
62
+ font-size: 0.85em;
63
+ }
64
+
65
+ code {
66
+ padding: 0.1em 0.3em;
67
+ white-space: pre-wrap;
68
+ }
69
+
70
+ pre {
71
+ border-radius: 0.5em;
72
+ padding: 0.5lh 2ch;
73
+ }
74
+
75
+ pre code {
76
+ background-color: transparent;
77
+ border: 0;
78
+ font-size: 1em;
79
+ padding: 0;
80
+ }
81
+
82
+ p {
83
+ hyphens: auto;
84
+ letter-spacing: -0.005ch;
85
+ }
86
+
87
+ blockquote {
88
+ font-style: italic;
89
+ margin: 0 3ch;
90
+ }
91
+
92
+ blockquote p {
93
+ hyphens: none;
94
+ }
95
+
96
+ table {
97
+ border: 1px solid var(--color-border-dark);
98
+ border-collapse: collapse;
99
+ margin: 1lh 0;
100
+ }
101
+
102
+ th {
103
+ font-weight: 700;
104
+ }
105
+
106
+ :is(th, td) {
107
+ border: 1px solid var(--color-border-dark);
108
+ padding: 0.2lh 1ch;
109
+ text-align: start;
110
+ }
111
+
112
+ th {
113
+ border-block-end-width: 3px;
114
+ }
115
+
116
+ del {
117
+ background-color: hsl(from var(--color-negative) h s l / .1);
118
+ color: var(--color-negative);
119
+ }
120
+
121
+ ins {
122
+ background-color: hsl(from var(--color-positive) h s l / .1);
123
+ color: var(--color-positive);
124
+ }
125
+
126
+ a {
127
+ text-decoration: underline;
128
+ text-decoration-skip-ink: auto;
129
+ }
130
+ }
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  &:focus-visible {
33
- outline: var(--border-2) solid var(--color-border-dark);
33
+ outline: var(--border-2) solid var(--color-primary);
34
34
  outline-offset: var(--border-2);
35
35
  }
36
36
 
@@ -29,7 +29,7 @@
29
29
  --color-text-subtle: var(--zinc-400);
30
30
  --color-border-light: var(--zinc-800);
31
31
  --color-border: var(--zinc-800);
32
- --color-border-dark: var(--zinc-300);
32
+ --color-border-dark: var(--zinc-600);
33
33
 
34
34
  /* Accent colors */
35
35
  --color-primary: var(--zinc-50);
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.18
4
+ version: 0.0.20
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-07-14 00:00:00.000000000 Z
11
+ date: 2024-07-17 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -56,6 +56,7 @@ files:
56
56
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
57
57
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
58
58
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
59
+ - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
59
60
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
60
61
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
61
62
  - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js