ehscan-react-components 0.1.8 → 0.1.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.
- package/README.md +66 -0
- package/dist/Button.js +1 -1
- package/dist/style/style/button.css +56 -71
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,71 @@
|
|
|
1
1
|
# ehscan-react-components
|
|
2
2
|
|
|
3
|
+
# Styling
|
|
4
|
+
|
|
5
|
+
## Base Button Variables
|
|
6
|
+
|
|
7
|
+
| Variable | Default/Fallback |
|
|
8
|
+
| --------------------- | ----------------------------------------- |
|
|
9
|
+
| `--btn-bg` | `#007aff` |
|
|
10
|
+
| `--btn-color` | `#fff` |
|
|
11
|
+
| `--btn-radius` | `18px` |
|
|
12
|
+
| `--btn-padding-y` | `0.5rem` |
|
|
13
|
+
| `--btn-padding-x` | `1rem` |
|
|
14
|
+
| `--btn-width` | `fit-content` |
|
|
15
|
+
| `--btn-height` | `auto` |
|
|
16
|
+
| `--btn-font-size` | `1rem` |
|
|
17
|
+
| `--btn-font-weight` | `500` |
|
|
18
|
+
| `--btn-transition` | `all 0.2s ease` |
|
|
19
|
+
| `--btn-line-height` | `1.5` |
|
|
20
|
+
| `--ripple-box-shadow` | `rgb(100 100 111 / 20%) 0px 7px 29px 0px` |
|
|
21
|
+
| `--ripple-effect-bck` | `rgb(0 0 0 / 15%)` |
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Size-specific overrides
|
|
25
|
+
|
|
26
|
+
| Variable | Size | Default/Fallback |
|
|
27
|
+
| -------------------- | ---- | ---------------- |
|
|
28
|
+
| `--btn-padding-y-sm` | sm | `0.25rem` |
|
|
29
|
+
| `--btn-padding-x-sm` | sm | `0.75rem` |
|
|
30
|
+
| `--btn-font-size-sm` | sm | `0.85rem` |
|
|
31
|
+
| `--btn-padding-y-md` | md | `0.5rem` |
|
|
32
|
+
| `--btn-padding-x-md` | md | `1rem` |
|
|
33
|
+
| `--btn-font-size-md` | md | `1rem` |
|
|
34
|
+
| `--btn-padding-y-lg` | lg | `0.75rem` |
|
|
35
|
+
| `--btn-padding-x-lg` | lg | `1.5rem` |
|
|
36
|
+
| `--btn-font-size-lg` | lg | `1.1rem` |
|
|
37
|
+
|
|
38
|
+
### Variant-specific variables
|
|
39
|
+
|
|
40
|
+
| Variable | Variant | Default/Fallback |
|
|
41
|
+
| ----------------------- | --------- | ---------------- |
|
|
42
|
+
| `--btn-bg-primary` | primary | `#007aff` |
|
|
43
|
+
| `--btn-color-primary` | primary | `#fff` |
|
|
44
|
+
| `--btn-bg-secondary` | secondary | `#e5e5ea` |
|
|
45
|
+
| `--btn-color-secondary` | secondary | `#111` |
|
|
46
|
+
| `--btn-bg-outline` | outline | `transparent` |
|
|
47
|
+
| `--btn-color-outline` | outline | `#007aff` |
|
|
48
|
+
| `--btn-bg-ghost` | ghost | `transparent` |
|
|
49
|
+
| `--btn-color-ghost` | ghost | `#007aff` |
|
|
50
|
+
| `--btn-bg-danger` | danger | `#ff3b30` |
|
|
51
|
+
| `--btn-color-danger` | danger | `#fff` |
|
|
52
|
+
|
|
53
|
+
### Specific Button Types
|
|
54
|
+
|
|
55
|
+
| Variable | Type | Default/Fallback |
|
|
56
|
+
| ----------------------- | -------- | ---------------- |
|
|
57
|
+
| `--btn-width-close` | closeBtn | `35px` |
|
|
58
|
+
| `--btn-height-close` | closeBtn | `35px` |
|
|
59
|
+
| `--btn-bg-close` | closeBtn | `lightgray` |
|
|
60
|
+
| `--btn-height-save` | saveBtn | `35px` |
|
|
61
|
+
| `--btn-padding-x-save` | saveBtn | `30px` |
|
|
62
|
+
| `--btn-bg-save` | saveBtn | `#007aff` |
|
|
63
|
+
| `--btn-height-trash` | trashBtn | `35px` |
|
|
64
|
+
| `--btn-padding-x-trash` | trashBtn | `10px` |
|
|
65
|
+
| `--btn-radius-trash` | trashBtn | `4px` |
|
|
66
|
+
| `--btn-bg-trash` | trashBtn | `lightgray` |
|
|
67
|
+
|
|
68
|
+
|
|
3
69
|
----
|
|
4
70
|
# Changelog
|
|
5
71
|
|
package/dist/Button.js
CHANGED
|
@@ -15,5 +15,5 @@ export const Button = ({ index, text, selected, addClass, notimeout, size = 'md'
|
|
|
15
15
|
click === null || click === void 0 ? void 0 : click(event);
|
|
16
16
|
}, 200);
|
|
17
17
|
}, [notimeout, click, handleRipple]);
|
|
18
|
-
return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn
|
|
18
|
+
return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : 'ext-btn--primary'}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
|
|
19
19
|
};
|
|
@@ -1,42 +1,29 @@
|
|
|
1
1
|
/* EHSCAN Base Button */
|
|
2
2
|
.ext-btn {
|
|
3
|
-
/* Button default variables */
|
|
4
|
-
--btn-bg: #007aff;
|
|
5
|
-
--btn-color: #fff;
|
|
6
|
-
--btn-radius: 18px;
|
|
7
|
-
--btn-padding-y: 0.5rem;
|
|
8
|
-
--btn-padding-x: 1rem;
|
|
9
|
-
--btn-width: fit-content;
|
|
10
|
-
--btn-height: auto;
|
|
11
|
-
--btn-font-size: 1rem;
|
|
12
|
-
--btn-font-weight: 500;
|
|
13
|
-
--btn-transition: all 0.2s ease;
|
|
14
|
-
--btn-line-height: 1.5;
|
|
15
|
-
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
16
|
-
--ripple-effect-bck: rgb(0 0 0 / 15%);
|
|
17
3
|
display: inline-flex;
|
|
18
4
|
align-items: center;
|
|
19
5
|
justify-content: center;
|
|
20
6
|
gap: 0.5rem;
|
|
21
7
|
font-family: inherit;
|
|
22
|
-
font-size: var(--btn-font-size);
|
|
23
|
-
font-weight: var(--btn-font-weight);
|
|
24
|
-
color: var(--btn-color);
|
|
25
|
-
background-color: var(--btn-bg);
|
|
8
|
+
font-size: var(--btn-font-size, 1rem);
|
|
9
|
+
font-weight: var(--btn-font-weight, 500);
|
|
10
|
+
color: var(--btn-color, #fff);
|
|
11
|
+
background-color: var(--btn-bg, #007aff);
|
|
26
12
|
border: none;
|
|
27
|
-
border-radius: var(--btn-radius);
|
|
28
|
-
padding: var(--btn-padding-y) var(--btn-padding-x);
|
|
29
|
-
width: var(--btn-width);
|
|
30
|
-
height: var(--btn-height);
|
|
13
|
+
border-radius: var(--btn-radius, 18px);
|
|
14
|
+
padding: var(--btn-padding-y, 0.5rem) var(--btn-padding-x, 1rem);
|
|
15
|
+
width: var(--btn-width, fit-content);
|
|
16
|
+
height: var(--btn-height, auto);
|
|
31
17
|
cursor: pointer;
|
|
32
|
-
transition: var(--btn-transition);
|
|
18
|
+
transition: var(--btn-transition, all 0.2s ease);
|
|
33
19
|
text-align: center;
|
|
34
20
|
text-decoration: none;
|
|
35
21
|
user-select: none;
|
|
22
|
+
line-height: var(--btn-line-height, 1.5);
|
|
36
23
|
}
|
|
37
24
|
|
|
38
25
|
.ext-btn:focus-visible {
|
|
39
|
-
outline: 2px solid #007aff;
|
|
26
|
+
outline: 2px solid var(--btn-bg, #007aff);
|
|
40
27
|
outline-offset: 2px;
|
|
41
28
|
}
|
|
42
29
|
|
|
@@ -54,47 +41,46 @@
|
|
|
54
41
|
transform: scale(0.97);
|
|
55
42
|
}
|
|
56
43
|
|
|
44
|
+
/* Sizes */
|
|
57
45
|
.ext-btn--sm {
|
|
58
|
-
--btn-padding-y
|
|
59
|
-
--btn-
|
|
60
|
-
--btn-font-size: 0.85rem;
|
|
46
|
+
padding: var(--btn-padding-y-sm, 0.25rem) var(--btn-padding-x-sm, 0.75rem);
|
|
47
|
+
font-size: var(--btn-font-size-sm, 0.85rem);
|
|
61
48
|
}
|
|
62
49
|
|
|
63
50
|
.ext-btn--md {
|
|
64
|
-
--btn-padding-y
|
|
65
|
-
--btn-
|
|
66
|
-
--btn-font-size: 1rem;
|
|
51
|
+
padding: var(--btn-padding-y-md, 0.5rem) var(--btn-padding-x-md, 1rem);
|
|
52
|
+
font-size: var(--btn-font-size-md, 1rem);
|
|
67
53
|
}
|
|
68
54
|
|
|
69
55
|
.ext-btn--lg {
|
|
70
|
-
--btn-padding-y
|
|
71
|
-
--btn-
|
|
72
|
-
--btn-font-size: 1.1rem;
|
|
56
|
+
padding: var(--btn-padding-y-lg, 0.75rem) var(--btn-padding-x-lg, 1.5rem);
|
|
57
|
+
font-size: var(--btn-font-size-lg, 1.1rem);
|
|
73
58
|
}
|
|
74
59
|
|
|
60
|
+
/* Variants */
|
|
75
61
|
.ext-btn--primary {
|
|
76
|
-
--btn-
|
|
77
|
-
|
|
62
|
+
color: var(--btn-color-primary, #fff);
|
|
63
|
+
background-color: var(--btn-bg-primary, #007aff);
|
|
78
64
|
}
|
|
79
65
|
|
|
80
66
|
.ext-btn--secondary {
|
|
81
|
-
--btn-
|
|
82
|
-
|
|
67
|
+
color: var(--btn-color-secondary, #111);
|
|
68
|
+
background-color: var(--btn-bg-secondary, #e5e5ea);
|
|
83
69
|
}
|
|
84
70
|
|
|
85
71
|
.ext-btn--outline {
|
|
86
|
-
--btn-
|
|
87
|
-
|
|
72
|
+
color: var(--btn-color-outline, #007aff);
|
|
73
|
+
background-color: var(--btn-bg-outline, transparent);
|
|
88
74
|
}
|
|
89
75
|
|
|
90
76
|
.ext-btn--ghost {
|
|
91
|
-
--btn-
|
|
92
|
-
|
|
77
|
+
color: var(--btn-color-ghost, #007aff);
|
|
78
|
+
background-color: var(--btn-bg-ghost, transparent);
|
|
93
79
|
}
|
|
94
80
|
|
|
95
81
|
.ext-btn--danger {
|
|
96
|
-
--btn-
|
|
97
|
-
|
|
82
|
+
color: var(--btn-color-danger, #fff);
|
|
83
|
+
background-color: var(--btn-bg-danger, #ff3b30);
|
|
98
84
|
}
|
|
99
85
|
|
|
100
86
|
.ext-btn--loading {
|
|
@@ -102,6 +88,7 @@
|
|
|
102
88
|
opacity: 0.8;
|
|
103
89
|
}
|
|
104
90
|
|
|
91
|
+
/* Icons and labels */
|
|
105
92
|
.ext-btn-icon {
|
|
106
93
|
display: flex;
|
|
107
94
|
align-items: center;
|
|
@@ -114,43 +101,43 @@
|
|
|
114
101
|
white-space: nowrap;
|
|
115
102
|
}
|
|
116
103
|
|
|
117
|
-
/*
|
|
104
|
+
/* Specific buttons */
|
|
118
105
|
.closeBtn {
|
|
119
|
-
--btn-width
|
|
120
|
-
--btn-height
|
|
106
|
+
width: var(--btn-width-close, 35px);
|
|
107
|
+
height: var(--btn-height-close, 35px);
|
|
121
108
|
padding: 0;
|
|
122
|
-
--btn-bg
|
|
109
|
+
background-color: var(--btn-bg-close, lightgray);
|
|
123
110
|
}
|
|
124
111
|
|
|
125
112
|
.saveBtn {
|
|
126
|
-
--btn-height
|
|
127
|
-
--btn-padding-x
|
|
128
|
-
--btn-
|
|
113
|
+
height: var(--btn-height-save, 35px);
|
|
114
|
+
padding-left: var(--btn-padding-x-save, 30px);
|
|
115
|
+
padding-right: var(--btn-padding-x-save, 30px);
|
|
116
|
+
background-color: var(--btn-bg-save, #007aff);
|
|
129
117
|
}
|
|
130
118
|
|
|
131
119
|
.trashBtn {
|
|
132
|
-
--btn-height
|
|
133
|
-
--btn-padding-x
|
|
134
|
-
--btn-
|
|
135
|
-
--btn-
|
|
120
|
+
height: var(--btn-height-trash, 35px);
|
|
121
|
+
padding-left: var(--btn-padding-x-trash, 10px);
|
|
122
|
+
padding-right: var(--btn-padding-x-trash, 10px);
|
|
123
|
+
border-radius: var(--btn-radius-trash, 4px);
|
|
124
|
+
background-color: var(--btn-bg-trash, lightgray);
|
|
136
125
|
}
|
|
137
126
|
|
|
138
127
|
/* Ripple Effect */
|
|
139
128
|
._ripple {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
box-shadow: var(--ripple-box-shadow);
|
|
129
|
+
font-weight: var(--btn-font-weight, 500);
|
|
130
|
+
box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
|
|
143
131
|
position: relative;
|
|
144
132
|
overflow: hidden;
|
|
145
|
-
-webkit-user-select: none;
|
|
146
|
-
user-select: none;
|
|
147
133
|
display: flex;
|
|
148
134
|
align-items: center;
|
|
149
135
|
justify-content: center;
|
|
136
|
+
user-select: none;
|
|
150
137
|
}
|
|
151
138
|
|
|
152
139
|
.ripple {
|
|
153
|
-
background: var(--ripple-effect-bck);
|
|
140
|
+
background: var(--ripple-effect-bck, rgb(0 0 0 / 15%));
|
|
154
141
|
position: absolute;
|
|
155
142
|
border-radius: 50%;
|
|
156
143
|
transform: scale(0);
|
|
@@ -166,7 +153,6 @@
|
|
|
166
153
|
}
|
|
167
154
|
}
|
|
168
155
|
|
|
169
|
-
|
|
170
156
|
@keyframes ripple-animation {
|
|
171
157
|
to {
|
|
172
158
|
transform: scale(4);
|
|
@@ -174,26 +160,25 @@
|
|
|
174
160
|
}
|
|
175
161
|
}
|
|
176
162
|
|
|
163
|
+
/* Loader */
|
|
177
164
|
.lds-ripple,
|
|
178
165
|
.lds-ripple div {
|
|
179
166
|
box-sizing: border-box;
|
|
180
167
|
}
|
|
181
168
|
|
|
182
169
|
.lds-ripple {
|
|
183
|
-
--image-sync-wh: 100%;
|
|
184
|
-
--bw: 5px;
|
|
185
170
|
position: absolute;
|
|
186
171
|
top: 50%;
|
|
187
172
|
left: 50%;
|
|
188
173
|
transform: translate(-50%, -50%);
|
|
189
|
-
height: var(--image-sync-wh);
|
|
190
|
-
width: var(--image-sync-wh);
|
|
174
|
+
height: var(--image-sync-wh, 100%);
|
|
175
|
+
width: var(--image-sync-wh, 100%);
|
|
191
176
|
z-index: 9999;
|
|
192
177
|
}
|
|
193
178
|
|
|
194
179
|
.lds-ripple div {
|
|
195
180
|
position: absolute;
|
|
196
|
-
border: var(--bw) solid white;
|
|
181
|
+
border: var(--bw, 5px) solid white;
|
|
197
182
|
opacity: 1;
|
|
198
183
|
border-radius: 50%;
|
|
199
184
|
animation: lds-ripple 1s cubic-bezier(0, 0.4, 0.8, 1) infinite;
|
|
@@ -201,7 +186,7 @@
|
|
|
201
186
|
|
|
202
187
|
.lds-ripple div:nth-child(2) {
|
|
203
188
|
animation-delay: -0.5s;
|
|
204
|
-
border: var(--bw) solid whitesmoke;
|
|
189
|
+
border: var(--bw, 5px) solid whitesmoke;
|
|
205
190
|
}
|
|
206
191
|
|
|
207
192
|
@keyframes lds-ripple {
|
|
@@ -210,7 +195,7 @@
|
|
|
210
195
|
left: 50%;
|
|
211
196
|
width: 8%;
|
|
212
197
|
height: 8%;
|
|
213
|
-
opacity: .2;
|
|
198
|
+
opacity: 0.2;
|
|
214
199
|
transform: translate(-50%, -50%);
|
|
215
200
|
}
|
|
216
201
|
|
|
@@ -226,9 +211,9 @@
|
|
|
226
211
|
100% {
|
|
227
212
|
top: 50%;
|
|
228
213
|
left: 50%;
|
|
229
|
-
width: var(--image-sync-wh);
|
|
230
|
-
height: var(--image-sync-wh);
|
|
231
|
-
opacity: .2;
|
|
214
|
+
width: var(--image-sync-wh, 100%);
|
|
215
|
+
height: var(--image-sync-wh, 100%);
|
|
216
|
+
opacity: 0.2;
|
|
232
217
|
transform: translate(-50%, -50%);
|
|
233
218
|
}
|
|
234
219
|
}
|