optimized-react-component-library-xyz123 1.2.3 → 2.0.0

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/css/mobileView.css +1 -0
  3. package/src/css/questions.css +5 -0
  4. package/src/css/styles.css +120 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "1.2.3",
3
+ "version": "2.0.0",
4
4
  "description": "A modern React component library using TypeScript with React 19 support.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
package/src/css/mobileView.css CHANGED
@@ -120,6 +120,7 @@
120
120
  margin: 0.4rem 0;
121
121
  }
122
122
 
123
+ section,
123
124
  .pts-form-step-header {
124
125
  margin-left: 0;
125
126
  margin-right: 0;
package/src/css/questions.css CHANGED
@@ -1,3 +1,8 @@
1
+ fieldset {
2
+ border: none;
3
+ padding: 0;
4
+ margin: 0;
5
+ }
1
6
 
2
7
  .pts-root-question {
3
8
  display: flex;
package/src/css/styles.css CHANGED
@@ -15,6 +15,89 @@
15
15
  --background-third: #414141;
16
16
  }
17
17
 
18
+ body {
19
+ color: var(--text);
20
+ }
21
+
22
+ body,
23
+ #root {
24
+ min-height: 100vh;
25
+ margin: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ html {
31
+ font-size: 62.5%; /* 1rem = 10px */
32
+ }
33
+
34
+ body {
35
+ font-family: Arial;
36
+ font-size: 1.6rem;
37
+ font-weight: 400;
38
+ background-color: var(--background);
39
+ display: flex;
40
+ flex-direction: column;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ body a {
45
+ text-decoration: underline;
46
+ text-underline-offset: 0.35rem;
47
+ line-height: 2rem;
48
+ display: inline-flex;
49
+ align-items: center;
50
+ color: var(--action);
51
+ }
52
+
53
+ body a:hover {
54
+ text-decoration: underline 0.2rem;
55
+ }
56
+
57
+ #root {
58
+ display: flex;
59
+ flex-direction: column;
60
+ width: 100%;
61
+ margin: 0;
62
+ }
63
+
64
+ main {
65
+ flex: 1;
66
+ }
67
+
68
+ #main-content:focus:focus-visible,
69
+ h1:focus:focus-visible,
70
+ h2:focus:focus-visible,
71
+ #pts-form-id-error-summary:focus:focus-visible,
72
+ #pts-error-summary:focus:focus-visible {
73
+ outline: none !important;
74
+ border: none;
75
+ }
76
+
77
+ h1,
78
+ h2,
79
+ h3 {
80
+ margin: 0;
81
+ margin-bottom: 3.6rem;
82
+ }
83
+
84
+ h1 {
85
+ font-size: 2.4rem;
86
+ }
87
+
88
+ h2 {
89
+ font-size: 2rem;
90
+ width: 100%;
91
+ }
92
+
93
+ h3 {
94
+ font-size: 1.6rem;
95
+ }
96
+
97
+ h4 {
98
+ margin: 0;
99
+ font-size: 1.6rem;
100
+ }
18
101
 
19
102
  #main-content {
20
103
  padding-top: 3.6rem;
@@ -25,6 +108,43 @@
25
108
  width: 100%;
26
109
  }
27
110
 
111
+ section {
112
+ display: flex;
113
+ flex-direction: column;
114
+ background-color: var(--main);
115
+ padding: 3.6rem;
116
+ margin: 1.6rem 0.8rem;
117
+ border-radius: 0.4rem;
118
+ margin-left: 0.8rem;
119
+ margin-right: 0.8rem;
120
+ margin-top: 1.6rem;
121
+ }
122
+ /* ?? Make changes in html ?? ----
123
+ .pts-button{
124
+ background-color: var(--action);
125
+ border: 2px solid var(--action);
126
+ color: var(--main);
127
+ padding: 8px 20px;
128
+ border-radius: 8px;
129
+ font-size: 16px;
130
+ cursor: pointer;
131
+ margin-left: 1.6rem;
132
+ }
133
+
134
+ .pts-button:focus,
135
+ .pts-button:hover{
136
+ background-color: var(--main);
137
+ border: 2px solid var(--action);
138
+ color: var(--action);
139
+ transition: 0.2s;
140
+ }
141
+ --- ?? Make changes in html ?? */
142
+
143
+ p[aria-live='assertive']:empty {
144
+ margin: 0;
145
+ padding: 0;
146
+ }
147
+
28
148
  .pts-root-categoryDescription {
29
149
  margin-top: 0px;
30
150
  }
@@ -717,6 +837,3 @@ input:focus-visible:-webkit-autofill {
717
837
  white-space: nowrap;
718
838
  border: 0;
719
839
  }
720
-
721
-
722
-