@rolster/react-components 1.5.5 → 1.5.6
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/cjs/assets/{lib.cjs-49b3766e.css → lib.cjs-1621a5fc.css} +11 -11
- package/dist/es/assets/{lib-49b3766e.css → lib-1621a5fc.css} +11 -11
- package/dist/esm/components/atoms/Button/Button.css +2 -2
- package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +7 -7
- package/dist/esm/components/molecules/PasswordField/PasswordField.css +2 -2
- package/package.json +2 -2
|
@@ -244,9 +244,9 @@
|
|
|
244
244
|
line-height: initial;
|
|
245
245
|
width: auto;
|
|
246
246
|
margin: auto 0rem;
|
|
247
|
-
font-size:
|
|
247
|
+
font-size: var(--button-font-size);
|
|
248
248
|
font-weight: var(--font-weight-bold);
|
|
249
|
-
letter-spacing:
|
|
249
|
+
letter-spacing: var(--button-letter-spacing);
|
|
250
250
|
text-transform: var(--rls-button-label-text-transform);
|
|
251
251
|
}
|
|
252
252
|
.rls-button__label a {
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
user-select: none;
|
|
281
281
|
cursor: default;
|
|
282
282
|
background: transparent;
|
|
283
|
-
color: var(--rls-
|
|
283
|
+
color: var(--rls-action-color);
|
|
284
284
|
}
|
|
285
285
|
.rls-button-action::before {
|
|
286
286
|
position: absolute;
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
visibility: hidden;
|
|
293
293
|
border-radius: 50%;
|
|
294
294
|
transform: scale(0);
|
|
295
|
-
background: var(--rls-
|
|
295
|
+
background: var(--rls-action-ripple-color);
|
|
296
296
|
padding-top: calc(120% - var(--sizing-8));
|
|
297
297
|
padding-left: calc(120% - var(--sizing-8));
|
|
298
298
|
margin-top: calc(-60% + var(--sizing-4));
|
|
@@ -310,12 +310,12 @@
|
|
|
310
310
|
top: 50%;
|
|
311
311
|
left: 50%;
|
|
312
312
|
opacity: 0.24;
|
|
313
|
-
width: var(--rls-
|
|
314
|
-
height: var(--rls-
|
|
315
|
-
margin-top: var(--rls-
|
|
316
|
-
margin-left: var(--rls-
|
|
313
|
+
width: var(--rls-action-ripple-dimension);
|
|
314
|
+
height: var(--rls-action-ripple-dimension);
|
|
315
|
+
margin-top: var(--rls-action-ripple-position);
|
|
316
|
+
margin-left: var(--rls-action-ripple-position);
|
|
317
317
|
border-radius: 50%;
|
|
318
|
-
background: var(--rls-
|
|
318
|
+
background: var(--rls-action-ripple-color);
|
|
319
319
|
transform: scale(0);
|
|
320
320
|
transition: transform 160ms 0ms var(--sharp-curve);
|
|
321
321
|
}
|
|
@@ -1240,8 +1240,8 @@
|
|
|
1240
1240
|
|
|
1241
1241
|
.rls-password-field {
|
|
1242
1242
|
--rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
|
|
1243
|
-
--rls-
|
|
1244
|
-
--rls-
|
|
1243
|
+
--rls-action-ripple-dimension: var(--sizing-32);
|
|
1244
|
+
--rls-action-ripple-position: -1rem;
|
|
1245
1245
|
position: relative;
|
|
1246
1246
|
float: left;
|
|
1247
1247
|
width: 100%;
|
|
@@ -244,9 +244,9 @@
|
|
|
244
244
|
line-height: initial;
|
|
245
245
|
width: auto;
|
|
246
246
|
margin: auto 0rem;
|
|
247
|
-
font-size:
|
|
247
|
+
font-size: var(--button-font-size);
|
|
248
248
|
font-weight: var(--font-weight-bold);
|
|
249
|
-
letter-spacing:
|
|
249
|
+
letter-spacing: var(--button-letter-spacing);
|
|
250
250
|
text-transform: var(--rls-button-label-text-transform);
|
|
251
251
|
}
|
|
252
252
|
.rls-button__label a {
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
user-select: none;
|
|
281
281
|
cursor: default;
|
|
282
282
|
background: transparent;
|
|
283
|
-
color: var(--rls-
|
|
283
|
+
color: var(--rls-action-color);
|
|
284
284
|
}
|
|
285
285
|
.rls-button-action::before {
|
|
286
286
|
position: absolute;
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
visibility: hidden;
|
|
293
293
|
border-radius: 50%;
|
|
294
294
|
transform: scale(0);
|
|
295
|
-
background: var(--rls-
|
|
295
|
+
background: var(--rls-action-ripple-color);
|
|
296
296
|
padding-top: calc(120% - var(--sizing-8));
|
|
297
297
|
padding-left: calc(120% - var(--sizing-8));
|
|
298
298
|
margin-top: calc(-60% + var(--sizing-4));
|
|
@@ -310,12 +310,12 @@
|
|
|
310
310
|
top: 50%;
|
|
311
311
|
left: 50%;
|
|
312
312
|
opacity: 0.24;
|
|
313
|
-
width: var(--rls-
|
|
314
|
-
height: var(--rls-
|
|
315
|
-
margin-top: var(--rls-
|
|
316
|
-
margin-left: var(--rls-
|
|
313
|
+
width: var(--rls-action-ripple-dimension);
|
|
314
|
+
height: var(--rls-action-ripple-dimension);
|
|
315
|
+
margin-top: var(--rls-action-ripple-position);
|
|
316
|
+
margin-left: var(--rls-action-ripple-position);
|
|
317
317
|
border-radius: 50%;
|
|
318
|
-
background: var(--rls-
|
|
318
|
+
background: var(--rls-action-ripple-color);
|
|
319
319
|
transform: scale(0);
|
|
320
320
|
transition: transform 160ms 0ms var(--sharp-curve);
|
|
321
321
|
}
|
|
@@ -1240,8 +1240,8 @@
|
|
|
1240
1240
|
|
|
1241
1241
|
.rls-password-field {
|
|
1242
1242
|
--rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
|
|
1243
|
-
--rls-
|
|
1244
|
-
--rls-
|
|
1243
|
+
--rls-action-ripple-dimension: var(--sizing-32);
|
|
1244
|
+
--rls-action-ripple-position: -1rem;
|
|
1245
1245
|
position: relative;
|
|
1246
1246
|
float: left;
|
|
1247
1247
|
width: 100%;
|
|
@@ -109,9 +109,9 @@
|
|
|
109
109
|
line-height: initial;
|
|
110
110
|
width: auto;
|
|
111
111
|
margin: auto 0rem;
|
|
112
|
-
font-size:
|
|
112
|
+
font-size: var(--button-font-size);
|
|
113
113
|
font-weight: var(--font-weight-bold);
|
|
114
|
-
letter-spacing:
|
|
114
|
+
letter-spacing: var(--button-letter-spacing);
|
|
115
115
|
text-transform: var(--rls-button-label-text-transform);
|
|
116
116
|
}
|
|
117
117
|
.rls-button__label a {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
user-select: none;
|
|
12
12
|
cursor: default;
|
|
13
13
|
background: transparent;
|
|
14
|
-
color: var(--rls-
|
|
14
|
+
color: var(--rls-action-color);
|
|
15
15
|
}
|
|
16
16
|
.rls-button-action::before {
|
|
17
17
|
position: absolute;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
visibility: hidden;
|
|
24
24
|
border-radius: 50%;
|
|
25
25
|
transform: scale(0);
|
|
26
|
-
background: var(--rls-
|
|
26
|
+
background: var(--rls-action-ripple-color);
|
|
27
27
|
padding-top: calc(120% - var(--sizing-8));
|
|
28
28
|
padding-left: calc(120% - var(--sizing-8));
|
|
29
29
|
margin-top: calc(-60% + var(--sizing-4));
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
top: 50%;
|
|
42
42
|
left: 50%;
|
|
43
43
|
opacity: 0.24;
|
|
44
|
-
width: var(--rls-
|
|
45
|
-
height: var(--rls-
|
|
46
|
-
margin-top: var(--rls-
|
|
47
|
-
margin-left: var(--rls-
|
|
44
|
+
width: var(--rls-action-ripple-dimension);
|
|
45
|
+
height: var(--rls-action-ripple-dimension);
|
|
46
|
+
margin-top: var(--rls-action-ripple-position);
|
|
47
|
+
margin-left: var(--rls-action-ripple-position);
|
|
48
48
|
border-radius: 50%;
|
|
49
|
-
background: var(--rls-
|
|
49
|
+
background: var(--rls-action-ripple-color);
|
|
50
50
|
transform: scale(0);
|
|
51
51
|
transition: transform 160ms 0ms var(--sharp-curve);
|
|
52
52
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.rls-password-field {
|
|
2
2
|
--rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
|
|
3
|
-
--rls-
|
|
4
|
-
--rls-
|
|
3
|
+
--rls-action-ripple-dimension: var(--sizing-32);
|
|
4
|
+
--rls-action-ripple-position: -1rem;
|
|
5
5
|
position: relative;
|
|
6
6
|
float: left;
|
|
7
7
|
width: 100%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
46
46
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
47
47
|
"@rollup/plugin-typescript": "^11.1.3",
|
|
48
|
-
"@rolster/styles-foundations": "^1.0.
|
|
48
|
+
"@rolster/styles-foundations": "^1.0.9",
|
|
49
49
|
"@rolster/typescript-types": "^4.0.0",
|
|
50
50
|
"@types/node-sass": "^4.11.4",
|
|
51
51
|
"@types/react": "^18.0.28",
|