@rescui/card 0.10.12-RUI-226-Update-card-cn-541cc33a.71 → 0.10.12-RUI-226-Update-card-cn-ba9c8d6c.74

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 (5) hide show
  1. package/lib/card.d.ts +10 -1
  2. package/lib/card.js +3 -2
  3. package/lib/card.p.module.css.js +26 -25
  4. package/lib/index.css +109 -98
  5. package/package.json +5 -5
package/lib/card.d.ts CHANGED
@@ -45,6 +45,15 @@ export declare type CardProps = {
45
45
  * @default false
46
46
  * */
47
47
  disableBorderTransparency?: boolean;
48
+ /**
49
+ * @default false
50
+ * @deprecated Render card borders using legacy `border` CSS property.
51
+ *
52
+ * Use only as a last resort. The reason is that `border` width scales with display scaling, and it's not possible to offset it using padding reliably. [More info](https://stackoverflow.com/questions/46105681/get-wrong-border-width-on-firefox).
53
+ *
54
+ * Customize borders using [CSS vars](/components/card-cn/css/) instead.
55
+ */
56
+ legacyBorder?: boolean;
48
57
  };
49
58
  export declare type CardImgType = {
50
59
  /** Sets a type of image in a card
@@ -62,6 +71,6 @@ export declare type CardImgType = {
62
71
  };
63
72
  export declare const cardLinkCn: () => any;
64
73
  export declare const cardButtonCn: () => any;
65
- export declare const cardCn: ({ isClickable, theme, mode, padding, borderRadius, disableBorder, disableBorderTransparency, paddings, hasGlowHover }?: CardProps) => string;
74
+ export declare const cardCn: ({ isClickable, theme, mode, padding, borderRadius, disableBorder, disableBorderTransparency, paddings, hasGlowHover, legacyBorder }?: CardProps) => string;
66
75
  export declare const cardImageCn: ({ cardImageType, disableFixedHeight, disableFullWidth }: CardImgType) => string;
67
76
  export declare const useCardCn: () => (cardCnOptions?: CardProps) => string;
package/lib/card.js CHANGED
@@ -41,13 +41,14 @@ const cardCn = function () {
41
41
  disableBorder,
42
42
  disableBorderTransparency,
43
43
  paddings,
44
- hasGlowHover
44
+ hasGlowHover,
45
+ legacyBorder
45
46
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
46
47
  const themeClass = THEME_STYLES[theme] ?? '';
47
48
  const modeClass = MODE_STYLES[mode] ?? MODE_STYLES.classic;
48
49
  const paddingClass = PADDING_STYLES[padding ?? paddings] ?? PADDING_STYLES[24];
49
50
  const borderRadiusClass = BORDER_RADIUS_STYLES[borderRadius] ?? BORDER_RADIUS_STYLES[8];
50
- return cn(isClickable ? styles.clickable : styles.tile, themeClass, isClickable ? modeClass : MODE_STYLES.classic, paddingClass, borderRadiusClass, hasGlowHover && styles.hasGlowHover, disableBorder && styles.disableBorder, disableBorderTransparency ? styles.transparentBorderFalse : styles.transparentBorderTrue);
51
+ return cn(isClickable ? styles.clickable : styles.tile, themeClass, isClickable ? modeClass : MODE_STYLES.classic, paddingClass, borderRadiusClass, hasGlowHover && styles.hasGlowHover, disableBorder && styles.disableBorder, disableBorderTransparency ? styles.transparentBorderFalse : styles.transparentBorderTrue, legacyBorder && styles.legacyBorder);
51
52
  };
52
53
 
53
54
  const cardImageCn = _ref => {
package/lib/card.p.module.css.js CHANGED
@@ -1,28 +1,29 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_g3bz94_8",
3
- "themeDark": "_themeDark_g3bz94_11",
4
- "padding0": "_padding0_g3bz94_15",
5
- "padding16": "_padding16_g3bz94_18",
6
- "padding24": "_padding24_g3bz94_21",
7
- "padding32": "_padding32_g3bz94_24",
8
- "borderRadius0": "_borderRadius0_g3bz94_28",
9
- "borderRadius8": "_borderRadius8_g3bz94_31",
10
- "borderRadius16": "_borderRadius16_g3bz94_34",
11
- "borderRadius24": "_borderRadius24_g3bz94_37",
12
- "modeClassic": "_modeClassic_g3bz94_41",
13
- "modeRock": "_modeRock_g3bz94_50",
14
- "transparentBorderTrue": "_transparentBorderTrue_g3bz94_60",
15
- "transparentBorderFalse": "_transparentBorderFalse_g3bz94_63",
16
- "clickable": "_clickable_g3bz94_121",
17
- "disableBorder": "_disableBorder_g3bz94_84",
18
- "hasGlowHover": "_hasGlowHover_g3bz94_88",
19
- "tile": "_tile_g3bz94_253",
20
- "fixedImageHeight": "_fixedImageHeight_g3bz94_321",
21
- "fullImageWidth": "_fullImageWidth_g3bz94_330",
22
- "cardImage": "_cardImage_g3bz94_334",
23
- "cardImageImg": "_cardImageImg_g3bz94_342",
24
- "cardImageDiv": "_cardImageDiv_g3bz94_367",
25
- "innerLink": "_innerLink_g3bz94_392",
26
- "innerButton": "_innerButton_g3bz94_404"
2
+ "themeLight": "_themeLight_7rqyzh_8",
3
+ "themeDark": "_themeDark_7rqyzh_11",
4
+ "padding0": "_padding0_7rqyzh_15",
5
+ "padding16": "_padding16_7rqyzh_18",
6
+ "padding24": "_padding24_7rqyzh_21",
7
+ "padding32": "_padding32_7rqyzh_24",
8
+ "borderRadius0": "_borderRadius0_7rqyzh_28",
9
+ "borderRadius8": "_borderRadius8_7rqyzh_31",
10
+ "borderRadius16": "_borderRadius16_7rqyzh_34",
11
+ "borderRadius24": "_borderRadius24_7rqyzh_37",
12
+ "modeClassic": "_modeClassic_7rqyzh_41",
13
+ "modeRock": "_modeRock_7rqyzh_51",
14
+ "transparentBorderTrue": "_transparentBorderTrue_7rqyzh_60",
15
+ "transparentBorderFalse": "_transparentBorderFalse_7rqyzh_63",
16
+ "clickable": "_clickable_7rqyzh_111",
17
+ "disableBorder": "_disableBorder_7rqyzh_70",
18
+ "hasGlowHover": "_hasGlowHover_7rqyzh_88",
19
+ "legacyBorder": "_legacyBorder_7rqyzh_134",
20
+ "tile": "_tile_7rqyzh_247",
21
+ "fixedImageHeight": "_fixedImageHeight_7rqyzh_325",
22
+ "fullImageWidth": "_fullImageWidth_7rqyzh_334",
23
+ "cardImage": "_cardImage_7rqyzh_338",
24
+ "cardImageImg": "_cardImageImg_7rqyzh_346",
25
+ "cardImageDiv": "_cardImageDiv_7rqyzh_371",
26
+ "innerLink": "_innerLink_7rqyzh_396",
27
+ "innerButton": "_innerButton_7rqyzh_408"
27
28
  };
28
29
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,72 +1,72 @@
1
- ._themeLight_g3bz94_8{
1
+ ._themeLight_7rqyzh_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
4
 
5
- ._themeDark_g3bz94_11{
5
+ ._themeDark_7rqyzh_11{
6
6
  --rs-theme-dark:1;
7
7
  }
8
8
 
9
- ._padding0_g3bz94_15{
9
+ ._padding0_7rqyzh_15{
10
10
  --_rs-card-padding:0px;
11
11
  }
12
12
 
13
- ._padding16_g3bz94_18{
13
+ ._padding16_7rqyzh_18{
14
14
  --_rs-card-padding:16px;
15
15
  }
16
16
 
17
- ._padding24_g3bz94_21{
17
+ ._padding24_7rqyzh_21{
18
18
  --_rs-card-padding:24px;
19
19
  }
20
20
 
21
- ._padding32_g3bz94_24{
21
+ ._padding32_7rqyzh_24{
22
22
  --_rs-card-padding:32px;
23
23
  }
24
24
 
25
- ._borderRadius0_g3bz94_28{
25
+ ._borderRadius0_7rqyzh_28{
26
26
  --_rs-card-border-radius:0px;
27
27
  }
28
28
 
29
- ._borderRadius8_g3bz94_31{
29
+ ._borderRadius8_7rqyzh_31{
30
30
  --_rs-card-border-radius:8px;
31
31
  }
32
32
 
33
- ._borderRadius16_g3bz94_34{
33
+ ._borderRadius16_7rqyzh_34{
34
34
  --_rs-card-border-radius:16px;
35
35
  }
36
36
 
37
- ._borderRadius24_g3bz94_37{
37
+ ._borderRadius24_7rqyzh_37{
38
38
  --_rs-card-border-radius:24px;
39
39
  }
40
40
 
41
- ._modeClassic_g3bz94_41{
41
+ ._modeClassic_7rqyzh_41{
42
42
  --_rs-card-states-theme-flip:0;
43
43
 
44
- --_rs-card-hover-focus-border-width:1px;
45
- --_rs-card-active-border-width:2px;
44
+ --_rs-card-hover-focus-active-border-color:rgb(
45
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
46
+ );
46
47
 
47
48
  --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
48
49
  --_rs-card-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
49
50
  }
50
51
 
51
- ._modeRock_g3bz94_50{
52
+ ._modeRock_7rqyzh_51{
52
53
  --_rs-card-states-theme-flip:1;
53
54
 
54
- --_rs-card-hover-focus-border-width:0px;
55
- --_rs-card-active-border-width:0px;
55
+ --_rs-card-hover-focus-active-border-color:transparent;
56
56
 
57
57
  --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
58
58
  --_rs-card-active-background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
59
59
  }
60
60
 
61
- ._transparentBorderTrue_g3bz94_60{
61
+ ._transparentBorderTrue_7rqyzh_60{
62
62
  --_rs-card-grey-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
63
63
  }
64
64
 
65
- ._transparentBorderFalse_g3bz94_63{
65
+ ._transparentBorderFalse_7rqyzh_63{
66
66
  --_rs-card-grey-border-color:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(210 - var(--_rs-theme-dark-coefficient, 0)*114));
67
67
  }
68
68
 
69
- ._clickable_g3bz94_121{
69
+ ._clickable_7rqyzh_111{
70
70
  --_rs-theme-dark:var(
71
71
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
72
72
  var(--rs-theme-dark, 0)
@@ -74,71 +74,71 @@
74
74
  --_rs-theme-flip:var(--rs-theme-flip, 0);
75
75
  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
76
76
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
77
- --_rs-card-native-base-border-width:1px;
78
- --_rs-card-native-hover-border-width:var(
79
- --_rs-card-hover-focus-border-width
80
- );
81
- --_rs-card-native-hover-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
82
- --_rs-card-native-focus-border-width:var(
83
- --_rs-card-hover-focus-border-width
84
- );
85
- --_rs-card-native-focus-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
86
- --_rs-card-native-active-border-width:var(--_rs-card-active-border-width);
87
- --_rs-card-native-active-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
77
+ --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
88
78
  }
89
79
 
90
- ._clickable_g3bz94_121._disableBorder_g3bz94_84{
91
- --_rs-card-native-base-border-width:0px;
80
+ ._clickable_7rqyzh_111._disableBorder_7rqyzh_70{
81
+ --_rs-card-native-static-border-color:transparent;
92
82
  }
93
83
 
94
- ._clickable_g3bz94_121:is([data-extra-hover-effect], ._hasGlowHover_g3bz94_88){
95
- --_rs-card-native-hover-border-width:1px;
96
- --_rs-card-native-hover-border-color:var(--_rs-card-grey-border-color);
97
-
98
- --_rs-card-native-focus-border-width:1px;
84
+ ._clickable_7rqyzh_111 {
85
+ --_rs-card-native-hover-border-color:var(
86
+ --_rs-card-hover-focus-active-border-color
87
+ );
88
+ --_rs-card-native-active-border-width:2px;
89
+ --_rs-card-native-active-border-color:var(
90
+ --_rs-card-hover-focus-active-border-color
91
+ );
92
+ }
99
93
 
100
- --_rs-card-native-active-border-width:2px;
101
- --_rs-card-native-active-border-color:rgb(
102
- calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
103
- );
94
+ ._clickable_7rqyzh_111:is([data-extra-hover-effect], ._hasGlowHover_7rqyzh_88){
95
+ --_rs-card-native-hover-border-color:var(--_rs-card-grey-border-color);
104
96
  }
105
97
 
106
- ._clickable_g3bz94_121:is([data-extra-hover-effect], ._hasGlowHover_g3bz94_88)[data-extra-active-effect]{
98
+ ._clickable_7rqyzh_111:is([data-extra-hover-effect], ._hasGlowHover_7rqyzh_88)[data-extra-active-effect]{
107
99
  --_rs-card-native-active-border-width:1px;
108
100
  --_rs-card-native-active-border-color:var(--_rs-card-grey-border-color);
109
101
  }
110
102
 
111
- ._clickable_g3bz94_121:is([data-extra-hover-effect], ._hasGlowHover_g3bz94_88)._disableBorder_g3bz94_84{
112
- --_rs-card-native-hover-border-width:0px;
103
+ ._clickable_7rqyzh_111:is([data-extra-hover-effect], ._hasGlowHover_7rqyzh_88)._disableBorder_7rqyzh_70{
113
104
  --_rs-card-native-hover-border-color:transparent;
114
105
 
115
106
  --_rs-card-native-active-border-width:1px;
116
107
  }
117
108
 
118
- ._clickable_g3bz94_121:is([data-extra-hover-effect], ._hasGlowHover_g3bz94_88)._disableBorder_g3bz94_84[data-extra-active-effect]{
119
- --_rs-card-native-active-border-width:0px;
109
+ ._clickable_7rqyzh_111:is([data-extra-hover-effect], ._hasGlowHover_7rqyzh_88)._disableBorder_7rqyzh_70[data-extra-active-effect]{
120
110
  --_rs-card-native-active-border-color:transparent;
121
111
  }
122
112
 
123
- ._clickable_g3bz94_121 {
113
+ ._clickable_7rqyzh_111 {
124
114
 
125
115
  --_rs-card-env-background:var(
126
116
  --rs-card-static-background,
127
117
  rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204))
128
118
  );
129
- --_rs-card-env-border-width:var(
130
- --rs-card-static-border-width,
131
- var(--_rs-card-native-base-border-width)
132
- );
119
+ --_rs-card-env-border-width:var(--rs-card-static-border-width, 1px);
133
120
  --_rs-card-env-border-color:var(
134
121
  --rs-card-static-border-color,
135
- var(--_rs-card-grey-border-color)
122
+ var(--_rs-card-native-static-border-color)
136
123
  );
137
124
  --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
138
125
  --_rs-card-border-radius-final:var(
139
126
  --rs-card-border-radius,
140
127
  var(--_rs-card-border-radius)
141
128
  );
129
+
130
+ --_rs-card-css-padding:var(--_rs-card-padding-final);
131
+ --_rs-card-css-border:none;
132
+ --_rs-card-after-border-display:block;
133
+ }
134
+
135
+ ._clickable_7rqyzh_111._legacyBorder_7rqyzh_134{
136
+ --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
137
+ --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
138
+ --_rs-card-after-border-display:none;
139
+ }
140
+
141
+ ._clickable_7rqyzh_111 {
142
142
  --rs-out-card-padding:var(--_rs-card-padding-final);
143
143
  --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
144
144
  --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -153,9 +153,9 @@
153
153
 
154
154
  box-sizing:border-box;
155
155
  min-height:0;
156
- padding:var(--_rs-card-padding-final);
156
+ padding:var(--_rs-card-css-padding);
157
157
 
158
- border:none;
158
+ border:var(--_rs-card-css-border);
159
159
  border-radius:var(--_rs-card-border-radius-final);
160
160
 
161
161
  cursor:pointer;
@@ -163,20 +163,20 @@
163
163
 
164
164
  background:var(--_rs-card-env-background);
165
165
 
166
- transition:color 100ms, background-color 100ms;
166
+ transition:color 100ms, background-color 100ms, border-color 100ms;
167
167
  -webkit-appearance:none;
168
168
  -moz-appearance:none;
169
169
  appearance:none;
170
170
  }
171
171
 
172
- ._clickable_g3bz94_121::after{
172
+ ._clickable_7rqyzh_111::after{
173
173
  position:absolute;
174
174
  top:0;
175
175
  right:0;
176
176
  bottom:0;
177
177
  left:0;
178
178
 
179
- display:block;
179
+ display:var(--_rs-card-after-border-display);
180
180
 
181
181
  border-radius:inherit;
182
182
 
@@ -188,23 +188,20 @@
188
188
  transition:box-shadow 100ms;
189
189
  }
190
190
 
191
- ._clickable_g3bz94_121,
192
- ._clickable_g3bz94_121:hover{
191
+ ._clickable_7rqyzh_111,
192
+ ._clickable_7rqyzh_111:hover{
193
193
  text-decoration:none;
194
194
  }
195
195
 
196
196
  @media (hover: hover){
197
- ._clickable_g3bz94_121:hover{
197
+ ._clickable_7rqyzh_111:hover{
198
198
  --rs-theme-flip:var(--_rs-card-states-theme-flip);
199
199
 
200
200
  --_rs-card-env-background:var(
201
201
  --rs-card-hover-background,
202
202
  var(--_rs-card-hover-focus-background)
203
203
  );
204
- --_rs-card-env-border-width:var(
205
- --rs-card-hover-border-width,
206
- var(--_rs-card-native-hover-border-width)
207
- );
204
+ --_rs-card-env-border-width:var(--rs-card-hover-border-width, 1px);
208
205
  --_rs-card-env-border-color:var(
209
206
  --rs-card-hover-border-color,
210
207
  var(--_rs-card-native-hover-border-color)
@@ -212,25 +209,22 @@
212
209
  }
213
210
  }
214
211
 
215
- ._clickable_g3bz94_121:focus-visible{
212
+ ._clickable_7rqyzh_111:focus-visible{
216
213
  --rs-theme-flip:var(--_rs-card-states-theme-flip);
217
214
 
218
215
  --_rs-card-env-background:var(
219
216
  --rs-card-focus-background,
220
217
  var(--_rs-card-hover-focus-background)
221
218
  );
222
- --_rs-card-env-border-width:var(
223
- --rs-card-focus-border-width,
224
- var(--_rs-card-native-focus-border-width)
225
- );
219
+ --_rs-card-env-border-width:var(--rs-card-focus-border-width, 1px);
226
220
  --_rs-card-env-border-color:var(
227
221
  --rs-card-focus-border-color,
228
- var(--_rs-card-native-focus-border-color)
222
+ var(--_rs-card-hover-focus-active-border-color)
229
223
  );
230
224
  outline:none;
231
225
  }
232
226
 
233
- ._clickable_g3bz94_121:active{
227
+ ._clickable_7rqyzh_111:active{
234
228
  --rs-theme-flip:var(--_rs-card-states-theme-flip);
235
229
 
236
230
  --_rs-card-env-background:var(
@@ -247,7 +241,7 @@
247
241
  );
248
242
  }
249
243
 
250
- ._tile_g3bz94_253{
244
+ ._tile_7rqyzh_247{
251
245
  --_rs-theme-dark:var(
252
246
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
253
247
  var(--rs-theme-dark, 0)
@@ -255,6 +249,14 @@
255
249
  --_rs-theme-flip:var(--rs-theme-flip, 0);
256
250
  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
257
251
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
252
+ --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
253
+ }
254
+
255
+ ._tile_7rqyzh_247._disableBorder_7rqyzh_70{
256
+ --_rs-card-native-static-border-color:transparent;
257
+ }
258
+
259
+ ._tile_7rqyzh_247 {
258
260
 
259
261
  --_rs-card-env-background:var(
260
262
  --rs-card-static-background,
@@ -263,13 +265,26 @@
263
265
  --_rs-card-env-border-width:var(--rs-card-static-border-width, 1px);
264
266
  --_rs-card-env-border-color:var(
265
267
  --rs-card-static-border-color,
266
- var(--_rs-card-grey-border-color)
268
+ var(--_rs-card-native-static-border-color)
267
269
  );
268
270
  --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
269
271
  --_rs-card-border-radius-final:var(
270
272
  --rs-card-border-radius,
271
273
  var(--_rs-card-border-radius)
272
274
  );
275
+
276
+ --_rs-card-css-padding:var(--_rs-card-padding-final);
277
+ --_rs-card-css-border:none;
278
+ --_rs-card-after-border-display:block;
279
+ }
280
+
281
+ ._tile_7rqyzh_247._legacyBorder_7rqyzh_134{
282
+ --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
283
+ --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
284
+ --_rs-card-after-border-display:none;
285
+ }
286
+
287
+ ._tile_7rqyzh_247 {
273
288
  --rs-out-card-padding:var(--_rs-card-padding-final);
274
289
  --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
275
290
  --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -283,9 +298,9 @@
283
298
 
284
299
  box-sizing:border-box;
285
300
  min-height:0;
286
- padding:var(--_rs-card-padding-final);
301
+ padding:var(--_rs-card-css-padding);
287
302
 
288
- border:none;
303
+ border:var(--_rs-card-css-border);
289
304
  border-radius:var(--_rs-card-border-radius-final);
290
305
 
291
306
  cursor:auto;
@@ -301,14 +316,14 @@
301
316
  appearance:none;
302
317
  }
303
318
 
304
- ._tile_g3bz94_253::after{
319
+ ._tile_7rqyzh_247::after{
305
320
  position:absolute;
306
321
  top:0;
307
322
  right:0;
308
323
  bottom:0;
309
324
  left:0;
310
325
 
311
- display:block;
326
+ display:var(--_rs-card-after-border-display);
312
327
 
313
328
  border-radius:inherit;
314
329
 
@@ -318,24 +333,20 @@
318
333
  box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
319
334
  }
320
335
 
321
- ._tile_g3bz94_253._disableBorder_g3bz94_84::after{
322
- display:none;
323
- }
324
-
325
- ._fixedImageHeight_g3bz94_321{
336
+ ._fixedImageHeight_7rqyzh_325{
326
337
  height:calc(188px + var(--_rs-card-padding-final));
327
338
  max-height:calc(188px + var(--_rs-card-padding-final));
328
339
  }
329
340
 
330
- ._fixedImageHeight_g3bz94_321 img{
341
+ ._fixedImageHeight_7rqyzh_325 img{
331
342
  height:100%;
332
343
  }
333
344
 
334
- ._fullImageWidth_g3bz94_330 img{
345
+ ._fullImageWidth_7rqyzh_334 img{
335
346
  width:100%;
336
347
  }
337
348
 
338
- ._cardImage_g3bz94_334{
349
+ ._cardImage_7rqyzh_338{
339
350
  position:relative;
340
351
 
341
352
  overflow:hidden;
@@ -343,7 +354,7 @@
343
354
  box-sizing:border-box;
344
355
  }
345
356
 
346
- ._cardImageImg_g3bz94_342{
357
+ ._cardImageImg_7rqyzh_346{
347
358
  top:calc(var(--_rs-card-padding-final)*-1);
348
359
  left:calc(var(--_rs-card-padding-final)*-1);
349
360
 
@@ -354,21 +365,21 @@
354
365
  width:calc(100% + var(--_rs-card-padding-final)*2);
355
366
  }
356
367
 
357
- ._cardImageImg_g3bz94_342 img{
368
+ ._cardImageImg_7rqyzh_346 img{
358
369
  max-width:100%;
359
370
  max-height:100%;
360
371
  }
361
372
 
362
- ._clickable_g3bz94_121 ._cardImageImg_g3bz94_342 img{
373
+ ._clickable_7rqyzh_111 ._cardImageImg_7rqyzh_346 img{
363
374
  transition:transform 0.2s;
364
375
  transform:scale(1);
365
376
  }
366
377
 
367
- ._clickable_g3bz94_121:hover ._cardImageImg_g3bz94_342 img{
378
+ ._clickable_7rqyzh_111:hover ._cardImageImg_7rqyzh_346 img{
368
379
  transform:scale(1.1);
369
380
  }
370
381
 
371
- ._cardImageDiv_g3bz94_367{
382
+ ._cardImageDiv_7rqyzh_371{
372
383
  top:calc(var(--_rs-card-padding-final)*-1);
373
384
  left:calc(var(--_rs-card-padding-final)*-1);
374
385
 
@@ -385,16 +396,16 @@
385
396
  background-size:100% 100%;
386
397
  }
387
398
 
388
- ._clickable_g3bz94_121 ._cardImageDiv_g3bz94_367{
399
+ ._clickable_7rqyzh_111 ._cardImageDiv_7rqyzh_371{
389
400
  transition:background-size 0.2s;
390
401
  }
391
402
 
392
- ._clickable_g3bz94_121:hover ._cardImageDiv_g3bz94_367{
403
+ ._clickable_7rqyzh_111:hover ._cardImageDiv_7rqyzh_371{
393
404
  background-size:110% 110%;
394
405
  }
395
406
 
396
407
  @media (hover: hover){
397
- ._clickable_g3bz94_121:hover ._innerLink_g3bz94_392{
408
+ ._clickable_7rqyzh_111:hover ._innerLink_7rqyzh_396{
398
409
  --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
399
410
  --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
400
411
  --_rs-typography-link-border-bottom-color-from-state-hover:var(
@@ -416,14 +427,14 @@
416
427
  }
417
428
  }
418
429
 
419
- ._clickable_g3bz94_121:focus-visible ._innerLink_g3bz94_392{
430
+ ._clickable_7rqyzh_111:focus-visible ._innerLink_7rqyzh_396{
420
431
  --_rs-typography-link-box-shadow-from-state-focus-visible:var(
421
432
  --_rs-color-primary
422
433
  ) 0 0 0 4px;
423
434
  }
424
435
 
425
436
  @media (hover: hover){
426
- ._clickable_g3bz94_121:hover ._innerButton_g3bz94_404{
437
+ ._clickable_7rqyzh_111:hover ._innerButton_7rqyzh_408{
427
438
  --_rs-button-border-inner-color:rgba(
428
439
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
429
440
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -432,7 +443,7 @@
432
443
  }
433
444
  }
434
445
 
435
- ._clickable_g3bz94_121:active ._innerButton_g3bz94_404{
446
+ ._clickable_7rqyzh_111:active ._innerButton_7rqyzh_408{
436
447
  --_rs-button-border-inner-width:2px;
437
448
  --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
438
449
  --_rs-button-background-from-state-active:var(
@@ -440,13 +451,13 @@
440
451
  );
441
452
  }
442
453
 
443
- ._clickable_g3bz94_121:focus-visible ._innerButton_g3bz94_404{
454
+ ._clickable_7rqyzh_111:focus-visible ._innerButton_7rqyzh_408{
444
455
  --_rs-button-box-shadow-from-state-focus-visible:var(
445
456
  --_rs-color-primary-t-dim
446
457
  ) 0 0 0 4px;
447
458
  }
448
459
 
449
- ._clickable_g3bz94_121:active:focus-visible:not(:hover) ._innerButton_g3bz94_404{
460
+ ._clickable_7rqyzh_111:active:focus-visible:not(:hover) ._innerButton_7rqyzh_408{
450
461
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
451
462
  --_rs-button-active-focus-visible-no-hover-background
452
463
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/card",
3
- "version": "0.10.12-RUI-226-Update-card-cn-541cc33a.71+541cc33a",
3
+ "version": "0.10.12-RUI-226-Update-card-cn-ba9c8d6c.74+ba9c8d6c",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.js",
@@ -23,16 +23,16 @@
23
23
  },
24
24
  "devDependencies": {
25
25
  "@jetbrains/logos": "^1.4.16",
26
- "@rescui/button": "0.19.2-RUI-226-Update-card-cn-541cc33a.54+541cc33a",
27
- "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-541cc33a.71+541cc33a",
26
+ "@rescui/button": "0.19.2-RUI-226-Update-card-cn-ba9c8d6c.57+ba9c8d6c",
27
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-ba9c8d6c.74+ba9c8d6c",
28
28
  "@rescui/postcss-preset-library": "0.2.2",
29
29
  "@rescui/scripts": "0.5.0",
30
- "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-541cc33a.71+541cc33a",
30
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-ba9c8d6c.74+ba9c8d6c",
31
31
  "@rescui/visual-regression": "0.1.2"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rescui-scripts build"
35
35
  },
36
36
  "nx": {},
37
- "gitHead": "541cc33abb5528569b3be0dd4a45d70b2a9f3b0a"
37
+ "gitHead": "ba9c8d6cc1c93025711a614bb4063d659a6c4d9e"
38
38
  }