ehscan-react-components 0.1.10 → 0.1.11
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/dist/style/button.css +31 -118
- package/package.json +1 -1
package/dist/style/button.css
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
|
-
/* EHSCAN Base Button */
|
|
1
|
+
/* EHSCAN Base Button - Refactored */
|
|
2
2
|
.ext-btn {
|
|
3
|
+
/* Core variables with fallbacks */
|
|
4
|
+
/* --btn-bg: #007aff;
|
|
5
|
+
--btn-color: #fff;
|
|
6
|
+
--btn-radius: 18px;
|
|
7
|
+
--btn-padding: 0.5rem;
|
|
8
|
+
--btn-width: fit-content;
|
|
9
|
+
--btn-height: auto;
|
|
10
|
+
--btn-font-size: 1rem;
|
|
11
|
+
--btn-font-weight: 500;
|
|
12
|
+
--btn-transition: all 0.2s ease;
|
|
13
|
+
--btn-line-height: 1.5;
|
|
14
|
+
--btn-gap: 0.5rem;
|
|
15
|
+
--ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
|
|
16
|
+
--ripple-effect-bck: rgb(0 0 0 / 15%); */
|
|
17
|
+
|
|
3
18
|
display: inline-flex;
|
|
4
19
|
align-items: center;
|
|
5
20
|
justify-content: center;
|
|
6
|
-
gap: 0.5rem;
|
|
21
|
+
gap: var(--btn-gap, 0.5rem);
|
|
7
22
|
font-family: inherit;
|
|
8
23
|
font-size: var(--btn-font-size, 1rem);
|
|
9
24
|
font-weight: var(--btn-font-weight, 500);
|
|
@@ -11,7 +26,7 @@
|
|
|
11
26
|
background-color: var(--btn-bg, #007aff);
|
|
12
27
|
border: none;
|
|
13
28
|
border-radius: var(--btn-radius, 18px);
|
|
14
|
-
padding: var(--btn-padding
|
|
29
|
+
padding: var(--btn-padding, 0.5rem);
|
|
15
30
|
width: var(--btn-width, fit-content);
|
|
16
31
|
height: var(--btn-height, auto);
|
|
17
32
|
cursor: pointer;
|
|
@@ -41,54 +56,39 @@
|
|
|
41
56
|
transform: scale(0.97);
|
|
42
57
|
}
|
|
43
58
|
|
|
44
|
-
/* Sizes */
|
|
45
|
-
.ext-btn--sm {
|
|
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);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.ext-btn--md {
|
|
51
|
-
padding: var(--btn-padding-y-md, 0.5rem) var(--btn-padding-x-md, 1rem);
|
|
52
|
-
font-size: var(--btn-font-size-md, 1rem);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.ext-btn--lg {
|
|
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);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
59
|
/* Variants */
|
|
61
60
|
.ext-btn--primary {
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
--btn-bg: #007aff;
|
|
62
|
+
--btn-color: #fff;
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
.ext-btn--secondary {
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
--btn-bg: #e5e5ea;
|
|
67
|
+
--btn-color: #111;
|
|
69
68
|
}
|
|
70
69
|
|
|
71
70
|
.ext-btn--outline {
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
--btn-bg: transparent;
|
|
72
|
+
--btn-color: #007aff;
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
.ext-btn--ghost {
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
--btn-bg: transparent;
|
|
77
|
+
--btn-color: #007aff;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.ext-btn--danger {
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
--btn-bg: #ff3b30;
|
|
82
|
+
--btn-color: #fff;
|
|
84
83
|
}
|
|
85
84
|
|
|
85
|
+
/* Loading state */
|
|
86
86
|
.ext-btn--loading {
|
|
87
87
|
pointer-events: none;
|
|
88
88
|
opacity: 0.8;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
/*
|
|
91
|
+
/* Icon and label wrappers */
|
|
92
92
|
.ext-btn-icon {
|
|
93
93
|
display: flex;
|
|
94
94
|
align-items: center;
|
|
@@ -101,30 +101,7 @@
|
|
|
101
101
|
white-space: nowrap;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
/*
|
|
105
|
-
.closeBtn {
|
|
106
|
-
width: var(--btn-width-close, 35px);
|
|
107
|
-
height: var(--btn-height-close, 35px);
|
|
108
|
-
padding: 0;
|
|
109
|
-
background-color: var(--btn-bg-close, lightgray);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.saveBtn {
|
|
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);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.trashBtn {
|
|
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);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/* Ripple Effect */
|
|
104
|
+
/* Ripple effect */
|
|
128
105
|
._ripple {
|
|
129
106
|
font-weight: var(--btn-font-weight, 500);
|
|
130
107
|
box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
|
|
@@ -147,73 +124,9 @@
|
|
|
147
124
|
will-change: transform, opacity;
|
|
148
125
|
}
|
|
149
126
|
|
|
150
|
-
@media (hover: hover) and (pointer: fine) {
|
|
151
|
-
._ripple {
|
|
152
|
-
cursor: pointer;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
127
|
@keyframes ripple-animation {
|
|
157
128
|
to {
|
|
158
129
|
transform: scale(4);
|
|
159
130
|
opacity: 0;
|
|
160
131
|
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/* Loader */
|
|
164
|
-
.lds-ripple,
|
|
165
|
-
.lds-ripple div {
|
|
166
|
-
box-sizing: border-box;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.lds-ripple {
|
|
170
|
-
position: absolute;
|
|
171
|
-
top: 50%;
|
|
172
|
-
left: 50%;
|
|
173
|
-
transform: translate(-50%, -50%);
|
|
174
|
-
height: var(--image-sync-wh, 100%);
|
|
175
|
-
width: var(--image-sync-wh, 100%);
|
|
176
|
-
z-index: 9999;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.lds-ripple div {
|
|
180
|
-
position: absolute;
|
|
181
|
-
border: var(--bw, 5px) solid white;
|
|
182
|
-
opacity: 1;
|
|
183
|
-
border-radius: 50%;
|
|
184
|
-
animation: lds-ripple 1s cubic-bezier(0, 0.4, 0.8, 1) infinite;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.lds-ripple div:nth-child(2) {
|
|
188
|
-
animation-delay: -0.5s;
|
|
189
|
-
border: var(--bw, 5px) solid whitesmoke;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
@keyframes lds-ripple {
|
|
193
|
-
0% {
|
|
194
|
-
top: 50%;
|
|
195
|
-
left: 50%;
|
|
196
|
-
width: 8%;
|
|
197
|
-
height: 8%;
|
|
198
|
-
opacity: 0.2;
|
|
199
|
-
transform: translate(-50%, -50%);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
5% {
|
|
203
|
-
top: 50%;
|
|
204
|
-
left: 50%;
|
|
205
|
-
width: 8%;
|
|
206
|
-
height: 8%;
|
|
207
|
-
opacity: 1;
|
|
208
|
-
transform: translate(-50%, -50%);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
100% {
|
|
212
|
-
top: 50%;
|
|
213
|
-
left: 50%;
|
|
214
|
-
width: var(--image-sync-wh, 100%);
|
|
215
|
-
height: var(--image-sync-wh, 100%);
|
|
216
|
-
opacity: 0.2;
|
|
217
|
-
transform: translate(-50%, -50%);
|
|
218
|
-
}
|
|
219
132
|
}
|