@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.
@@ -244,9 +244,9 @@
244
244
  line-height: initial;
245
245
  width: auto;
246
246
  margin: auto 0rem;
247
- font-size: 0.825rem;
247
+ font-size: var(--button-font-size);
248
248
  font-weight: var(--font-weight-bold);
249
- letter-spacing: 0.825px;
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-buttonaction-color);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension);
314
- height: var(--rls-buttonaction-ripple-dimension);
315
- margin-top: var(--rls-buttonaction-ripple-position);
316
- margin-left: var(--rls-buttonaction-ripple-position);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension: var(--sizing-32);
1244
- --rls-buttonaction-ripple-position: -1rem;
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: 0.825rem;
247
+ font-size: var(--button-font-size);
248
248
  font-weight: var(--font-weight-bold);
249
- letter-spacing: 0.825px;
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-buttonaction-color);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension);
314
- height: var(--rls-buttonaction-ripple-dimension);
315
- margin-top: var(--rls-buttonaction-ripple-position);
316
- margin-left: var(--rls-buttonaction-ripple-position);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension: var(--sizing-32);
1244
- --rls-buttonaction-ripple-position: -1rem;
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: 0.825rem;
112
+ font-size: var(--button-font-size);
113
113
  font-weight: var(--font-weight-bold);
114
- letter-spacing: 0.825px;
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-buttonaction-color);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension);
45
- height: var(--rls-buttonaction-ripple-dimension);
46
- margin-top: var(--rls-buttonaction-ripple-position);
47
- margin-left: var(--rls-buttonaction-ripple-position);
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-buttonaction-ripple-color);
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-buttonaction-ripple-dimension: var(--sizing-32);
4
- --rls-buttonaction-ripple-position: -1rem;
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.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.1",
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",