@rescui/card 0.5.2 → 0.6.0

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 (7) hide show
  1. package/lib/card.d.ts +29 -8
  2. package/lib/card.js +3 -2
  3. package/lib/card.module.pcss.js +20 -19
  4. package/lib/hooks.d.ts +1 -1
  5. package/lib/hooks.js +3 -2
  6. package/lib/index.css +131 -109
  7. package/package.json +7 -7
package/lib/card.d.ts CHANGED
@@ -6,23 +6,44 @@ export declare type CardBorderRadius = 0 | 8 | 16 | 24;
6
6
  export declare type CardGlowHover = boolean;
7
7
  export declare type CardImageType = 'cardImageImg' | 'cardImageDiv';
8
8
  export declare type CardProps = {
9
- /** Card clickable property */
9
+ /** Card clickable property
10
+ * @default false
11
+ * */
10
12
  isClickable?: CardIsClickable;
11
- /** Appearance theme */
13
+ /** Appearance theme
14
+ * @default light
15
+ * */
12
16
  theme?: CardTheme;
13
- /** Appearance mode */
17
+ /** Appearance mode
18
+ * @default classic
19
+ * */
14
20
  mode?: CardMode;
15
- /** Appearance paddings */
21
+ /** Appearance paddings
22
+ * @default 24
23
+ * */
16
24
  paddings?: CardPaddings;
17
- /** Card borders style */
25
+ /** Card borders style
26
+ * @default 8
27
+ * */
18
28
  borderRadius?: CardBorderRadius;
19
- /** Card has glowHover */
29
+ /** Card has glowHover effect provided by `useGlowHover` hook
30
+ * @default false
31
+ * */
20
32
  hasGlowHover?: CardGlowHover;
21
33
  };
22
34
  export declare type CardImgType = {
35
+ /**
36
+ * @default cardImageDiv
37
+ * */
23
38
  cardImageType?: CardImageType;
24
- /** Disable predefined image height, if you use this prop you should manually equalize image heights between cards on one row/group */
39
+ /** Disable predefined image height, if you use this prop you should manually equalize image heights between cards on one row/group
40
+ * @default false
41
+ * */
25
42
  disableFixedHeight?: boolean;
43
+ /** Disable image stretching to the card width. Applied only to the `cardImageImg` card image type.
44
+ * @default false
45
+ * */
46
+ disableFullWidth?: boolean;
26
47
  };
27
48
  export declare const cardCn: ({ isClickable, theme, mode, paddings, borderRadius, hasGlowHover }?: CardProps) => string;
28
- export declare const cardImageCn: ({ cardImageType, disableFixedHeight }: CardImgType) => string;
49
+ export declare const cardImageCn: ({ cardImageType, disableFixedHeight, disableFullWidth }: CardImgType) => string;
package/lib/card.js CHANGED
@@ -52,9 +52,10 @@ var cardImageCn = function cardImageCn(_ref2) {
52
52
  var _CARD_IMAGE_STYLES$ca;
53
53
 
54
54
  var cardImageType = _ref2.cardImageType,
55
- disableFixedHeight = _ref2.disableFixedHeight;
55
+ disableFixedHeight = _ref2.disableFixedHeight,
56
+ disableFullWidth = _ref2.disableFullWidth;
56
57
  var cardImgExtraStyles = (_CARD_IMAGE_STYLES$ca = CARD_IMAGE_STYLES[cardImageType]) !== null && _CARD_IMAGE_STYLES$ca !== void 0 ? _CARD_IMAGE_STYLES$ca : CARD_IMAGE_STYLES.cardImageDiv;
57
- return cn(styles.cardImage, cardImgExtraStyles, !disableFixedHeight && styles.fixedImageHeight);
58
+ return cn(styles.cardImage, cardImgExtraStyles, !disableFixedHeight && styles.fixedImageHeight, !disableFullWidth && styles.fullImageWidth);
58
59
  };
59
60
 
60
61
  export { cardCn, cardImageCn };
package/lib/card.module.pcss.js CHANGED
@@ -1,21 +1,22 @@
1
1
  var styles = {
2
- "card": "_card_xcqspy_6",
3
- "themeLight": "_themeLight_xcqspy_26",
4
- "themeDark": "_themeDark_xcqspy_32",
5
- "cardPlain": "_cardPlain_xcqspy_37",
6
- "modeClassic": "_modeClassic_xcqspy_37",
7
- "modeRock": "_modeRock_xcqspy_38",
8
- "paddings16": "_paddings16_xcqspy_157",
9
- "paddings24": "_paddings24_xcqspy_161",
10
- "paddings32": "_paddings32_xcqspy_165",
11
- "glowHover": "_glowHover_xcqspy_91",
12
- "bordersRadius0": "_bordersRadius0_xcqspy_169",
13
- "bordersRadius8": "_bordersRadius8_xcqspy_173",
14
- "bordersRadius16": "_bordersRadius16_xcqspy_177",
15
- "bordersRadius24": "_bordersRadius24_xcqspy_181",
16
- "cardImage": "_cardImage_xcqspy_185",
17
- "cardImageImg": "_cardImageImg_xcqspy_191",
18
- "cardImageDiv": "_cardImageDiv_xcqspy_229",
19
- "fixedImageHeight": "_fixedImageHeight_xcqspy_263"
2
+ "card": "_card_1dn5yub_6",
3
+ "themeLight": "_themeLight_1dn5yub_30",
4
+ "themeDark": "_themeDark_1dn5yub_37",
5
+ "cardPlain": "_cardPlain_1dn5yub_43",
6
+ "modeClassic": "_modeClassic_1dn5yub_43",
7
+ "modeRock": "_modeRock_1dn5yub_44",
8
+ "paddings16": "_paddings16_1dn5yub_163",
9
+ "paddings24": "_paddings24_1dn5yub_167",
10
+ "paddings32": "_paddings32_1dn5yub_171",
11
+ "glowHover": "_glowHover_1dn5yub_97",
12
+ "bordersRadius0": "_bordersRadius0_1dn5yub_175",
13
+ "bordersRadius8": "_bordersRadius8_1dn5yub_179",
14
+ "bordersRadius16": "_bordersRadius16_1dn5yub_183",
15
+ "bordersRadius24": "_bordersRadius24_1dn5yub_187",
16
+ "cardImage": "_cardImage_1dn5yub_191",
17
+ "cardImageImg": "_cardImageImg_1dn5yub_199",
18
+ "cardImageDiv": "_cardImageDiv_1dn5yub_232",
19
+ "fixedImageHeight": "_fixedImageHeight_1dn5yub_267",
20
+ "fullImageWidth": "_fullImageWidth_1dn5yub_284"
20
21
  };
21
- export default styles;
22
+ export { styles as default };
package/lib/hooks.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { CardProps } from './card';
2
- export declare const useCardCn: () => (cardCnOptions: CardProps) => string;
2
+ export declare const useCardCn: () => (cardCnOptions?: CardProps) => string;
package/lib/hooks.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.object.to-string.js";
1
2
  import "core-js/modules/web.dom-collections.for-each.js";
2
3
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
3
4
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -6,9 +7,9 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
6
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
8
9
 
9
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
10
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
10
11
 
11
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
12
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
12
13
 
13
14
  import { useTheme } from '@rescui/ui-contexts';
14
15
  import { cardCn } from './card.js';
package/lib/index.css CHANGED
@@ -1,78 +1,88 @@
1
- ._card_xcqspy_6{
1
+ ._card_1dn5yub_6{
2
2
  overflow:hidden;
3
- cursor:pointer;
4
- min-height:0;
3
+
5
4
  -webkit-box-sizing:border-box;
5
+
6
6
  box-sizing:border-box;
7
- -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
8
- transition:color 100ms, background-color 100ms, border-color 100ms;
7
+ min-height:0;
9
8
 
10
9
  border-width:1px;
11
10
  border-style:solid;
12
11
  border-radius:0;
13
12
  border-radius:var(--rs-card-border-radius, 0);
13
+
14
+ cursor:pointer;
15
+
16
+ -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
17
+
18
+ transition:color 100ms, background-color 100ms, border-color 100ms;
14
19
  -webkit-mask-image:-webkit-radial-gradient(white, black);
15
20
  }
16
- a._card_xcqspy_6{
21
+ a._card_1dn5yub_6{
17
22
  display:block;
23
+
18
24
  text-decoration:none;
19
25
  }
20
- ._themeLight_xcqspy_26{
26
+ ._themeLight_1dn5yub_30{
21
27
  border-color:rgba(25,25,28,0.2);
22
28
  border-color:var(--card-border-color, rgba(25,25,28,0.2));
29
+
23
30
  background-color:#FFFFFF;
31
+
24
32
  background-color:var(--card-background-color, #FFFFFF);
25
33
  }
26
- ._themeDark_xcqspy_32{
34
+ ._themeDark_1dn5yub_37{
27
35
  border-color:rgba(255,255,255,0.2);
28
36
  border-color:var(--card-border-color, rgba(255,255,255,0.2));
37
+
29
38
  background-color:#303033;
39
+
30
40
  background-color:var(--card-background-color, #303033);
31
41
  }
32
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37,
33
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38{
42
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43,
43
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44{
34
44
  cursor:default;
35
45
  }
36
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26{
46
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30{
37
47
  --card-border-color:rgba(25,25,28,0.2);
38
48
  }
39
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:hover,
40
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:focus,
41
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:active,
42
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:hover,
43
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:focus,
44
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:active{
49
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:hover,
50
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:focus,
51
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active,
52
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:hover,
53
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:focus,
54
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active{
45
55
  --card-border-color:rgba(25,25,28,0.2);
46
56
  }
47
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32{
57
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37{
48
58
  --card-border-color:rgba(255,255,255,0.2);
49
59
  }
50
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:hover,
51
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:focus,
52
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:active,
53
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:hover,
54
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:focus,
55
- ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:active{
60
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:hover,
61
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:focus,
62
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active,
63
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:hover,
64
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:focus,
65
+ ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active{
56
66
  --card-border-color:rgba(255,255,255,0.2);
57
67
  }
58
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:active, ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:active, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:active, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:active{
68
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active, ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active{
59
69
  border-width:1px;
60
70
  }
61
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:active._paddings16_xcqspy_157, ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:active._paddings16_xcqspy_157, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:active._paddings16_xcqspy_157, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:active._paddings16_xcqspy_157{
71
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active._paddings16_1dn5yub_163, ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active._paddings16_1dn5yub_163, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active._paddings16_1dn5yub_163, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active._paddings16_1dn5yub_163{
62
72
  padding:16px;
63
73
  }
64
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:active._paddings24_xcqspy_161, ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:active._paddings24_xcqspy_161, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:active._paddings24_xcqspy_161, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:active._paddings24_xcqspy_161{
74
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active._paddings24_1dn5yub_167, ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active._paddings24_1dn5yub_167, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active._paddings24_1dn5yub_167, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active._paddings24_1dn5yub_167{
65
75
  padding:24px;
66
76
  }
67
- ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeLight_xcqspy_26:active._paddings32_xcqspy_165, ._cardPlain_xcqspy_37._modeClassic_xcqspy_37._themeDark_xcqspy_32:active._paddings32_xcqspy_165, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeLight_xcqspy_26:active._paddings32_xcqspy_165, ._cardPlain_xcqspy_37._modeRock_xcqspy_38._themeDark_xcqspy_32:active._paddings32_xcqspy_165{
77
+ ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active._paddings32_1dn5yub_171, ._cardPlain_1dn5yub_43._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active._paddings32_1dn5yub_171, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active._paddings32_1dn5yub_171, ._cardPlain_1dn5yub_43._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active._paddings32_1dn5yub_171{
68
78
  padding:32px;
69
79
  }
70
- ._modeClassic_xcqspy_37._themeLight_xcqspy_26:hover,
71
- ._modeClassic_xcqspy_37._themeLight_xcqspy_26:focus,
72
- ._modeClassic_xcqspy_37._themeLight_xcqspy_26:active{
80
+ ._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:hover,
81
+ ._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:focus,
82
+ ._modeClassic_1dn5yub_43._themeLight_1dn5yub_30:active{
73
83
  --card-border-color:#19191C;
74
84
  }
75
- ._modeClassic_xcqspy_37._themeDark_xcqspy_32{
85
+ ._modeClassic_1dn5yub_43._themeDark_1dn5yub_37{
76
86
  --rs-typography-color-hard:#FFFFFF;
77
87
  --rs-typography-color-average:rgba(255,255,255,0.7);
78
88
  --rs-typography-color-pale:rgba(255,255,255,0.5);
@@ -86,59 +96,59 @@ a._card_xcqspy_6{
86
96
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
87
97
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
88
98
  }
89
- ._modeClassic_xcqspy_37._themeDark_xcqspy_32:hover,
90
- ._modeClassic_xcqspy_37._themeDark_xcqspy_32:focus,
91
- ._modeClassic_xcqspy_37._themeDark_xcqspy_32:active{
99
+ ._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:hover,
100
+ ._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:focus,
101
+ ._modeClassic_1dn5yub_43._themeDark_1dn5yub_37:active{
92
102
  --card-border-color:#FFFFFF;
93
103
  }
94
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:hover,
95
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:focus,
96
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:active{
104
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:hover,
105
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:focus,
106
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:active{
97
107
  --card-border-color:rgba(25,25,28,0.2);
98
108
  }
99
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:active{
109
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:active{
100
110
  border-width:1px;
101
111
  }
102
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:active._paddings16_xcqspy_157{
112
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:active._paddings16_1dn5yub_163{
103
113
  padding:16px;
104
114
  }
105
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:active._paddings24_xcqspy_161{
115
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:active._paddings24_1dn5yub_167{
106
116
  padding:24px;
107
117
  }
108
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeLight_xcqspy_26:active._paddings32_xcqspy_165{
118
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeLight_1dn5yub_30:active._paddings32_1dn5yub_171{
109
119
  padding:32px;
110
120
  }
111
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:hover,
112
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:focus,
113
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:active{
121
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:hover,
122
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:focus,
123
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:active{
114
124
  --card-border-color:rgba(255,255,255,0.2);
115
125
  }
116
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:active{
126
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:active{
117
127
  border-width:1px;
118
128
  }
119
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:active._paddings16_xcqspy_157{
129
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:active._paddings16_1dn5yub_163{
120
130
  padding:16px;
121
131
  }
122
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:active._paddings24_xcqspy_161{
132
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:active._paddings24_1dn5yub_167{
123
133
  padding:24px;
124
134
  }
125
- ._modeClassic_xcqspy_37._glowHover_xcqspy_91._themeDark_xcqspy_32:active._paddings32_xcqspy_165{
135
+ ._modeClassic_1dn5yub_43._glowHover_1dn5yub_97._themeDark_1dn5yub_37:active._paddings32_1dn5yub_171{
126
136
  padding:32px;
127
137
  }
128
- ._modeClassic_xcqspy_37:active{
138
+ ._modeClassic_1dn5yub_43:active{
129
139
  border-width:2px;
130
140
  }
131
- ._modeClassic_xcqspy_37:active._paddings16_xcqspy_157{
141
+ ._modeClassic_1dn5yub_43:active._paddings16_1dn5yub_163{
132
142
  padding:15px;
133
143
  }
134
- ._modeClassic_xcqspy_37:active._paddings24_xcqspy_161{
144
+ ._modeClassic_1dn5yub_43:active._paddings24_1dn5yub_167{
135
145
  padding:23px;
136
146
  }
137
- ._modeClassic_xcqspy_37:active._paddings32_xcqspy_165{
147
+ ._modeClassic_1dn5yub_43:active._paddings32_1dn5yub_171{
138
148
  padding:31px;
139
149
  }
140
- ._modeRock_xcqspy_38._themeLight_xcqspy_26:hover,
141
- ._modeRock_xcqspy_38._themeLight_xcqspy_26:focus{
150
+ ._modeRock_1dn5yub_44._themeLight_1dn5yub_30:hover,
151
+ ._modeRock_1dn5yub_44._themeLight_1dn5yub_30:focus{
142
152
  --card-border-color:rgba(25,25,28,0.2);
143
153
  --card-background-color:#19191C;
144
154
  --rs-typography-color-hard:#FFFFFF;
@@ -154,7 +164,7 @@ a._card_xcqspy_6{
154
164
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
155
165
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
156
166
  }
157
- ._modeRock_xcqspy_38._themeLight_xcqspy_26:active{
167
+ ._modeRock_1dn5yub_44._themeLight_1dn5yub_30:active{
158
168
  background-color:#303033;
159
169
  --rs-typography-color-hard:#FFFFFF;
160
170
  --rs-typography-color-average:rgba(255,255,255,0.7);
@@ -169,7 +179,7 @@ a._card_xcqspy_6{
169
179
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
170
180
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
171
181
  }
172
- ._modeRock_xcqspy_38._themeDark_xcqspy_32{
182
+ ._modeRock_1dn5yub_44._themeDark_1dn5yub_37{
173
183
  --rs-typography-color-hard:#FFFFFF;
174
184
  --rs-typography-color-average:rgba(255,255,255,0.7);
175
185
  --rs-typography-color-pale:rgba(255,255,255,0.5);
@@ -183,8 +193,8 @@ a._card_xcqspy_6{
183
193
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
184
194
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
185
195
  }
186
- ._modeRock_xcqspy_38._themeDark_xcqspy_32:hover,
187
- ._modeRock_xcqspy_38._themeDark_xcqspy_32:focus{
196
+ ._modeRock_1dn5yub_44._themeDark_1dn5yub_37:hover,
197
+ ._modeRock_1dn5yub_44._themeDark_1dn5yub_37:focus{
188
198
  --card-background-color:#FFFFFF;
189
199
  --rs-typography-color-hard:#19191C;
190
200
  --rs-typography-color-average:rgba(25,25,28,0.7);
@@ -199,7 +209,7 @@ a._card_xcqspy_6{
199
209
  --rs-rock-button-disabled-text-color:rgba(25,25,28,0.5);
200
210
  --rs-rock-button-disabled-bg-color:rgba(25,25,28,0.2);
201
211
  }
202
- ._modeRock_xcqspy_38._themeDark_xcqspy_32:active{
212
+ ._modeRock_1dn5yub_44._themeDark_1dn5yub_37:active{
203
213
  --card-background-color:#F4F4F4;
204
214
  --rs-typography-color-hard:#19191C;
205
215
  --rs-typography-color-average:rgba(25,25,28,0.7);
@@ -214,77 +224,81 @@ a._card_xcqspy_6{
214
224
  --rs-rock-button-disabled-text-color:rgba(25,25,28,0.5);
215
225
  --rs-rock-button-disabled-bg-color:rgba(25,25,28,0.2);
216
226
  }
217
- ._paddings16_xcqspy_157{
227
+ ._paddings16_1dn5yub_163{
218
228
  padding:16px;
219
229
  }
220
- ._paddings24_xcqspy_161{
230
+ ._paddings24_1dn5yub_167{
221
231
  padding:24px;
222
232
  }
223
- ._paddings32_xcqspy_165{
233
+ ._paddings32_1dn5yub_171{
224
234
  padding:32px;
225
235
  }
226
- ._bordersRadius0_xcqspy_169{
236
+ ._bordersRadius0_1dn5yub_175{
227
237
  --rs-card-border-radius:0;
228
238
  }
229
- ._bordersRadius8_xcqspy_173{
239
+ ._bordersRadius8_1dn5yub_179{
230
240
  --rs-card-border-radius:8px;
231
241
  }
232
- ._bordersRadius16_xcqspy_177{
242
+ ._bordersRadius16_1dn5yub_183{
233
243
  --rs-card-border-radius:16px;
234
244
  }
235
- ._bordersRadius24_xcqspy_181{
245
+ ._bordersRadius24_1dn5yub_187{
236
246
  --rs-card-border-radius:24px;
237
247
  }
238
- ._cardImage_xcqspy_185{
239
- -webkit-box-sizing:border-box;
240
- box-sizing:border-box;
248
+ ._cardImage_1dn5yub_191{
241
249
  position:relative;
250
+
242
251
  overflow:hidden;
252
+
253
+ -webkit-box-sizing:border-box;
254
+
255
+ box-sizing:border-box;
243
256
  }
244
- ._cardImageImg_xcqspy_191{
245
- display:block;
246
- -webkit-transition:-webkit-transform .2s;
247
- transition:-webkit-transform .2s;
248
- transition:transform .2s;
249
- transition:transform .2s, -webkit-transform .2s;
250
- -webkit-transform:scaleX(1);
251
- transform:scaleX(1);
257
+ ._cardImageImg_1dn5yub_199{
258
+ display:-webkit-box;
259
+ display:-ms-flexbox;
260
+ display:flex;
261
+ -webkit-box-pack:center;
262
+ -ms-flex-pack:center;
263
+ justify-content:center;
264
+ -webkit-box-align:center;
265
+ -ms-flex-align:center;
266
+ align-items:center;
252
267
  }
253
- ._paddings16_xcqspy_157 ._cardImageImg_xcqspy_191{
268
+ ._paddings16_1dn5yub_163 ._cardImageImg_1dn5yub_199{
254
269
  top:-16px;
255
270
  left:-16px;
256
271
  width:calc(100% + 32px);
257
272
  }
258
- ._paddings24_xcqspy_161 ._cardImageImg_xcqspy_191{
273
+ ._paddings24_1dn5yub_167 ._cardImageImg_1dn5yub_199{
259
274
  top:-24px;
260
275
  left:-24px;
261
276
  width:calc(100% + 48px);
262
277
  }
263
- ._paddings32_xcqspy_165 ._cardImageImg_xcqspy_191{
278
+ ._paddings32_1dn5yub_171 ._cardImageImg_1dn5yub_199{
264
279
  top:-32px;
265
280
  left:-32px;
266
281
  width:calc(100% + 64px);
267
282
  }
268
- ._bordersRadius8_xcqspy_173 ._cardImageImg_xcqspy_191 img{
269
- overflow:hidden;
270
- border-radius:8px;
271
- }
272
- ._card_xcqspy_6:hover ._cardImageImg_xcqspy_191{
283
+ ._cardImageImg_1dn5yub_199 img{
284
+ max-height:100%;
285
+ max-width:100%;
273
286
  -webkit-transition:-webkit-transform .2s;
274
287
  transition:-webkit-transform .2s;
275
288
  transition:transform .2s;
276
289
  transition:transform .2s, -webkit-transform .2s;
277
- -webkit-transform:scaleX(1.1);
278
- transform:scaleX(1.1);
290
+ -webkit-transform:scale(1);
291
+ transform:scale(1);
279
292
  }
280
- ._card_xcqspy_6:hover ._cardImageImg_xcqspy_191 img{
281
- border-radius:8px;
282
- }
283
- ._card_xcqspy_6._cardPlain_xcqspy_37:hover ._cardImageImg_xcqspy_191{
293
+ ._card_1dn5yub_6:hover ._cardImageImg_1dn5yub_199 img{
294
+ -webkit-transform:scale(1.1);
295
+ transform:scale(1.1);
296
+ }
297
+ ._card_1dn5yub_6._cardPlain_1dn5yub_43:hover ._cardImageImg_1dn5yub_199 img{
284
298
  -webkit-transform:none;
285
299
  transform:none;
286
300
  }
287
- ._cardImageDiv_xcqspy_229{
301
+ ._cardImageDiv_1dn5yub_232{
288
302
  display:-webkit-box;
289
303
  display:-ms-flexbox;
290
304
  display:flex;
@@ -300,55 +314,63 @@ a._card_xcqspy_6{
300
314
  background-color:transparent;
301
315
  background-repeat:no-repeat;
302
316
  background-position:center;
303
- background-size:auto 100%;
317
+ background-size:100% 100%;
318
+
319
+ -webkit-transition:background-size .2s;
320
+
321
+ transition:background-size .2s;
304
322
  }
305
- ._paddings16_xcqspy_157 ._cardImageDiv_xcqspy_229{
323
+ ._paddings16_1dn5yub_163 ._cardImageDiv_1dn5yub_232{
306
324
  top:-16px;
307
325
  left:-16px;
308
326
  padding:16px;
309
327
  width:calc(100% + 32px);
310
328
  }
311
- ._card_xcqspy_6:active ._paddings16_xcqspy_157 ._cardImageDiv_xcqspy_229{
329
+ ._card_1dn5yub_6:active ._paddings16_1dn5yub_163 ._cardImageDiv_1dn5yub_232{
312
330
  padding:calc(16px - 1);
313
331
  }
314
- ._paddings24_xcqspy_161 ._cardImageDiv_xcqspy_229{
332
+ ._paddings24_1dn5yub_167 ._cardImageDiv_1dn5yub_232{
315
333
  top:-24px;
316
334
  left:-24px;
317
335
  padding:24px;
318
336
  width:calc(100% + 48px);
319
337
  }
320
- ._card_xcqspy_6:active ._paddings24_xcqspy_161 ._cardImageDiv_xcqspy_229{
338
+ ._card_1dn5yub_6:active ._paddings24_1dn5yub_167 ._cardImageDiv_1dn5yub_232{
321
339
  padding:calc(24px - 1);
322
340
  }
323
- ._paddings32_xcqspy_165 ._cardImageDiv_xcqspy_229{
341
+ ._paddings32_1dn5yub_171 ._cardImageDiv_1dn5yub_232{
324
342
  top:-32px;
325
343
  left:-32px;
326
344
  padding:32px;
327
345
  width:calc(100% + 64px);
328
346
  }
329
- ._card_xcqspy_6:active ._paddings32_xcqspy_165 ._cardImageDiv_xcqspy_229{
347
+ ._card_1dn5yub_6:active ._paddings32_1dn5yub_171 ._cardImageDiv_1dn5yub_232{
330
348
  padding:calc(32px - 1);
331
349
  }
332
- ._card_xcqspy_6:hover ._cardImageDiv_xcqspy_229{
333
- background-size:auto 110%;
334
- -webkit-transition:background-size .2s;
335
- transition:background-size .2s;
350
+ ._card_1dn5yub_6:hover ._cardImageDiv_1dn5yub_232{
351
+ background-size:110% 110%;
336
352
  }
337
- ._card_xcqspy_6._cardPlain_xcqspy_37:hover ._cardImageDiv_xcqspy_229{
338
- background-size:auto 100%;
353
+ ._card_1dn5yub_6._cardPlain_1dn5yub_43:hover ._cardImageDiv_1dn5yub_232{
354
+ background-size:100% 100%;
339
355
  }
340
- ._paddings16_xcqspy_157 ._fixedImageHeight_xcqspy_263{
356
+ ._fixedImageHeight_1dn5yub_267 img{
357
+ height:100%;
358
+ }
359
+ ._paddings16_1dn5yub_163 ._fixedImageHeight_1dn5yub_267{
341
360
  height:204px;
342
361
  max-height:204px;
343
362
  }
344
- ._paddings24_xcqspy_161 ._fixedImageHeight_xcqspy_263{
363
+ ._paddings24_1dn5yub_167 ._fixedImageHeight_1dn5yub_267{
345
364
  height:212px;
346
365
  max-height:212px;
347
366
  }
348
- ._paddings32_xcqspy_165 ._fixedImageHeight_xcqspy_263{
367
+ ._paddings32_1dn5yub_171 ._fixedImageHeight_1dn5yub_267{
349
368
  height:220px;
350
369
  max-height:220px;
351
370
  }
371
+ ._fullImageWidth_1dn5yub_284 img{
372
+ width:100%;
373
+ }
352
374
 
353
375
 
354
376
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/card",
3
- "version": "0.5.2",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.ts",
@@ -24,15 +24,15 @@
24
24
  },
25
25
  "devDependencies": {
26
26
  "@jetbrains/logos": "^1.4.16",
27
- "@rescui/button": "^0.6.3",
28
- "@rescui/colors": "^0.1.0",
29
- "@rescui/postcss-preset-library": "^0.0.4",
30
- "@rescui/scripts": "^0.1.4",
31
- "@rescui/typography": "^0.7.0",
27
+ "@rescui/button": "^0.6.6",
28
+ "@rescui/colors": "^0.1.1",
29
+ "@rescui/postcss-preset-library": "^0.0.5",
30
+ "@rescui/scripts": "^0.1.5",
31
+ "@rescui/typography": "^0.7.2",
32
32
  "@rescui/visual-regression": "^0.0.1"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "rescui-scripts build"
36
36
  },
37
- "gitHead": "b9d865165f162732befa0868ea1325d064313d9e"
37
+ "gitHead": "67f695b72d13fd8445542c48f096b65656fdd7d9"
38
38
  }