@rescui/card 0.6.8 → 0.7.1

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 +5 -1
  2. package/lib/card.js +7 -10
  3. package/lib/card.p.module.css.js +21 -19
  4. package/lib/index.css +122 -129
  5. package/package.json +6 -6
package/lib/card.d.ts CHANGED
@@ -30,6 +30,10 @@ export declare type CardProps = {
30
30
  * @default false
31
31
  * */
32
32
  hasGlowHover?: CardGlowHover;
33
+ /** Disable border for all cases except isClickable without glow-hover
34
+ * @default false
35
+ * */
36
+ disableBorder?: boolean;
33
37
  };
34
38
  export declare type CardImgType = {
35
39
  /**
@@ -45,5 +49,5 @@ export declare type CardImgType = {
45
49
  * */
46
50
  disableFullWidth?: boolean;
47
51
  };
48
- export declare const cardCn: ({ isClickable, theme, mode, paddings, borderRadius, hasGlowHover }?: CardProps) => string;
52
+ export declare const cardCn: ({ isClickable, theme, mode, paddings, borderRadius, hasGlowHover, disableBorder }?: CardProps) => string;
49
53
  export declare const cardImageCn: ({ cardImageType, disableFixedHeight, disableFullWidth }: CardImgType) => string;
package/lib/card.js CHANGED
@@ -23,10 +23,10 @@ var BORDER_RADIUS_STYLES = {
23
23
  var CARD_IMAGE_STYLES = {
24
24
  cardImageImg: styles.cardImageImg,
25
25
  cardImageDiv: styles.cardImageDiv
26
- };
26
+ }; // eslint-disable-next-line complexity
27
27
 
28
28
  var cardCn = function cardCn() {
29
- var _THEME_STYLES$theme, _MODE_STYLES$mode, _PADDINGS_STYLES$padd, _BORDER_RADIUS_STYLES;
29
+ var _THEME_STYLES$theme, _MODE_STYLES$mode, _PADDINGS_STYLES$padd, _BORDER_RADIUS_STYLES, _cn;
30
30
 
31
31
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
32
32
  isClickable = _ref.isClickable,
@@ -34,18 +34,15 @@ var cardCn = function cardCn() {
34
34
  mode = _ref.mode,
35
35
  paddings = _ref.paddings,
36
36
  borderRadius = _ref.borderRadius,
37
- hasGlowHover = _ref.hasGlowHover;
38
-
39
- var isClickableClass = _defineProperty({}, styles.cardPlain, !isClickable);
37
+ hasGlowHover = _ref.hasGlowHover,
38
+ disableBorder = _ref.disableBorder;
40
39
 
41
40
  var themeClass = (_THEME_STYLES$theme = THEME_STYLES[theme]) !== null && _THEME_STYLES$theme !== void 0 ? _THEME_STYLES$theme : THEME_STYLES.light;
42
41
  var modeClass = (_MODE_STYLES$mode = MODE_STYLES[mode]) !== null && _MODE_STYLES$mode !== void 0 ? _MODE_STYLES$mode : MODE_STYLES.classic;
43
42
  var paddingsClass = (_PADDINGS_STYLES$padd = PADDINGS_STYLES[paddings]) !== null && _PADDINGS_STYLES$padd !== void 0 ? _PADDINGS_STYLES$padd : PADDINGS_STYLES[24];
44
- var bordersClass = (_BORDER_RADIUS_STYLES = BORDER_RADIUS_STYLES[borderRadius]) !== null && _BORDER_RADIUS_STYLES !== void 0 ? _BORDER_RADIUS_STYLES : BORDER_RADIUS_STYLES[8];
45
-
46
- var glowHoverStyles = _defineProperty({}, styles.glowHover, hasGlowHover);
47
-
48
- return cn(styles.card, isClickableClass, themeClass, modeClass, paddingsClass, bordersClass, glowHoverStyles);
43
+ var borderRadiusClass = (_BORDER_RADIUS_STYLES = BORDER_RADIUS_STYLES[borderRadius]) !== null && _BORDER_RADIUS_STYLES !== void 0 ? _BORDER_RADIUS_STYLES : BORDER_RADIUS_STYLES[8];
44
+ var showBorderStatesClass = isClickable && (!disableBorder || !hasGlowHover);
45
+ return cn(styles.card, themeClass, modeClass, paddingsClass, borderRadiusClass, (_cn = {}, _defineProperty(_cn, styles.cardPlain, !isClickable), _defineProperty(_cn, styles.glowHover, hasGlowHover), _defineProperty(_cn, styles.withStaticBorder, !disableBorder), _defineProperty(_cn, styles.withStatesBorder, showBorderStatesClass), _cn));
49
46
  };
50
47
 
51
48
  var cardImageCn = function cardImageCn(_ref2) {
package/lib/card.p.module.css.js CHANGED
@@ -1,22 +1,24 @@
1
1
  var styles = {
2
- "card": "_card_1eg7jku_6",
3
- "themeLight": "_themeLight_1eg7jku_34",
4
- "themeDark": "_themeDark_1eg7jku_41",
5
- "cardPlain": "_cardPlain_1eg7jku_47",
6
- "modeClassic": "_modeClassic_1eg7jku_47",
7
- "modeRock": "_modeRock_1eg7jku_48",
8
- "paddings16": "_paddings16_1eg7jku_167",
9
- "paddings24": "_paddings24_1eg7jku_171",
10
- "paddings32": "_paddings32_1eg7jku_175",
11
- "glowHover": "_glowHover_1eg7jku_101",
12
- "bordersRadius0": "_bordersRadius0_1eg7jku_179",
13
- "bordersRadius8": "_bordersRadius8_1eg7jku_183",
14
- "bordersRadius16": "_bordersRadius16_1eg7jku_187",
15
- "bordersRadius24": "_bordersRadius24_1eg7jku_191",
16
- "cardImage": "_cardImage_1eg7jku_195",
17
- "cardImageImg": "_cardImageImg_1eg7jku_203",
18
- "cardImageDiv": "_cardImageDiv_1eg7jku_236",
19
- "fixedImageHeight": "_fixedImageHeight_1eg7jku_271",
20
- "fullImageWidth": "_fullImageWidth_1eg7jku_288"
2
+ "card": "_card_up7s65_6",
3
+ "themeLight": "_themeLight_up7s65_40",
4
+ "withStaticBorder": "_withStaticBorder_up7s65_43",
5
+ "themeDark": "_themeDark_up7s65_49",
6
+ "cardPlain": "_cardPlain_up7s65_59",
7
+ "modeClassic": "_modeClassic_up7s65_59",
8
+ "modeRock": "_modeRock_up7s65_60",
9
+ "paddings16": "_paddings16_up7s65_197",
10
+ "paddings24": "_paddings24_up7s65_201",
11
+ "paddings32": "_paddings32_up7s65_205",
12
+ "withStatesBorder": "_withStatesBorder_up7s65_81",
13
+ "glowHover": "_glowHover_up7s65_120",
14
+ "bordersRadius0": "_bordersRadius0_up7s65_209",
15
+ "bordersRadius8": "_bordersRadius8_up7s65_213",
16
+ "bordersRadius16": "_bordersRadius16_up7s65_217",
17
+ "bordersRadius24": "_bordersRadius24_up7s65_221",
18
+ "cardImage": "_cardImage_up7s65_225",
19
+ "cardImageImg": "_cardImageImg_up7s65_233",
20
+ "cardImageDiv": "_cardImageDiv_up7s65_266",
21
+ "fixedImageHeight": "_fixedImageHeight_up7s65_301",
22
+ "fullImageWidth": "_fullImageWidth_up7s65_318"
21
23
  };
22
24
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,5 +1,9 @@
1
- ._card_1eg7jku_6{
1
+ ._card_up7s65_6{
2
2
  overflow:hidden;
3
+ -webkit-appearance:none;
4
+ -moz-appearance:none;
5
+ appearance:none;
6
+ text-align:inherit;
3
7
 
4
8
  -webkit-box-sizing:border-box;
5
9
 
@@ -18,74 +22,74 @@
18
22
  transition:color 100ms, background-color 100ms, border-color 100ms;
19
23
  -webkit-mask-image:-webkit-radial-gradient(white, black);
20
24
  }
21
- a._card_1eg7jku_6{
25
+ ._card_up7s65_6:focus-visible{
26
+ outline:none;
27
+ }
28
+ a._card_up7s65_6{
22
29
  display:block;
23
30
 
24
31
  text-decoration:none;
25
32
  }
26
- a._card_1eg7jku_6:hover{
33
+ a._card_up7s65_6:hover{
27
34
  text-decoration:none;
28
35
  }
29
- ._themeLight_1eg7jku_34{
30
- border-color:rgba(25,25,28,0.2);
31
- border-color:var(--card-border-color, rgba(25,25,28,0.2));
32
-
36
+ ._themeLight_up7s65_40{
37
+ border-color:transparent;
38
+ border-color:var(--rs-card-border-color, transparent);
33
39
  background-color:#FFFFFF;
34
-
35
- background-color:var(--card-background-color, #FFFFFF);
40
+ background-color:var(--rs-card-background-color, #FFFFFF);
36
41
  }
37
- ._themeDark_1eg7jku_41{
38
- border-color:rgba(255,255,255,0.2);
39
- border-color:var(--card-border-color, rgba(255,255,255,0.2));
42
+ ._themeLight_up7s65_40._withStaticBorder_up7s65_43{
43
+ border-color:rgba(25,25,28,0.2);
44
+ border-color:var(--rs-card-border-color, rgba(25,25,28,0.2));
45
+ }
46
+ ._themeDark_up7s65_49{
47
+ border-color:transparent;
48
+ border-color:var(--rs-card-border-color, transparent);
40
49
 
41
50
  background-color:#303033;
42
51
 
43
- background-color:var(--card-background-color, #303033);
52
+ background-color:var(--rs-card-background-color, #303033);
44
53
  }
45
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47,
46
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48{
54
+ ._themeDark_up7s65_49._withStaticBorder_up7s65_43{
55
+ border-color:rgba(255,255,255,0.2);
56
+ border-color:var(--rs-card-border-color, rgba(255,255,255,0.2));
57
+ }
58
+ ._cardPlain_up7s65_59._modeClassic_up7s65_59,
59
+ ._cardPlain_up7s65_59._modeRock_up7s65_60{
47
60
  cursor:default;
48
61
  }
49
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34{
50
- --card-border-color:rgba(25,25,28,0.2);
51
- }
52
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:hover,
53
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:focus,
54
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active,
55
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:hover,
56
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:focus,
57
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active{
58
- --card-border-color:rgba(25,25,28,0.2);
59
- }
60
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41{
61
- --card-border-color:rgba(255,255,255,0.2);
62
- }
63
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:hover,
64
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:focus,
65
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active,
66
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:hover,
67
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:focus,
68
- ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active{
69
- --card-border-color:rgba(255,255,255,0.2);
70
- }
71
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active, ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active{
62
+ ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeLight_up7s65_40:active, ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeDark_up7s65_49:active, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeLight_up7s65_40:active, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeDark_up7s65_49:active{
72
63
  border-width:1px;
73
64
  }
74
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active._paddings16_1eg7jku_167, ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active._paddings16_1eg7jku_167, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active._paddings16_1eg7jku_167, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active._paddings16_1eg7jku_167{
65
+ ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeLight_up7s65_40:active._paddings16_up7s65_197, ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeDark_up7s65_49:active._paddings16_up7s65_197, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeLight_up7s65_40:active._paddings16_up7s65_197, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeDark_up7s65_49:active._paddings16_up7s65_197{
75
66
  padding:16px;
76
67
  }
77
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active._paddings24_1eg7jku_171, ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active._paddings24_1eg7jku_171, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active._paddings24_1eg7jku_171, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active._paddings24_1eg7jku_171{
68
+ ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeLight_up7s65_40:active._paddings24_up7s65_201, ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeDark_up7s65_49:active._paddings24_up7s65_201, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeLight_up7s65_40:active._paddings24_up7s65_201, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeDark_up7s65_49:active._paddings24_up7s65_201{
78
69
  padding:24px;
79
70
  }
80
- ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active._paddings32_1eg7jku_175, ._cardPlain_1eg7jku_47._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active._paddings32_1eg7jku_175, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active._paddings32_1eg7jku_175, ._cardPlain_1eg7jku_47._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active._paddings32_1eg7jku_175{
71
+ ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeLight_up7s65_40:active._paddings32_up7s65_205, ._cardPlain_up7s65_59._modeClassic_up7s65_59._themeDark_up7s65_49:active._paddings32_up7s65_205, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeLight_up7s65_40:active._paddings32_up7s65_205, ._cardPlain_up7s65_59._modeRock_up7s65_60._themeDark_up7s65_49:active._paddings32_up7s65_205{
81
72
  padding:32px;
82
73
  }
83
- ._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:hover,
84
- ._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:focus,
85
- ._modeClassic_1eg7jku_47._themeLight_1eg7jku_34:active{
86
- --card-border-color:#19191C;
74
+ ._cardPlain_up7s65_59._withStaticBorder_up7s65_43._themeLight_up7s65_40{
75
+ --rs-card-border-color:rgba(25,25,28,0.2);
76
+ }
77
+ ._cardPlain_up7s65_59._withStaticBorder_up7s65_43._themeDark_up7s65_49{
78
+ --rs-card-border-color:rgba(255,255,255,0.2);
79
+ }
80
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:hover,
81
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:focus[data-focus-method='key'],
82
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:focus-visible
83
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:active{
84
+ --rs-card-border-color:rgba(25,25,28,0.2);
85
+ }
86
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:hover,
87
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:focus[data-focus-method='key'],
88
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:focus-visible
89
+ ._cardPlain_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:active{
90
+ --rs-card-border-color:rgba(255,255,255,0.2);
87
91
  }
88
- ._modeClassic_1eg7jku_47._themeDark_1eg7jku_41{
92
+ ._modeClassic_up7s65_59._themeDark_up7s65_49{
89
93
  --rs-typography-color-hard:#FFFFFF;
90
94
  --rs-typography-color-average:rgba(255,255,255,0.7);
91
95
  --rs-typography-color-pale:rgba(255,255,255,0.5);
@@ -99,61 +103,46 @@ a._card_1eg7jku_6:hover{
99
103
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
100
104
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
101
105
  }
102
- ._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:hover,
103
- ._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:focus,
104
- ._modeClassic_1eg7jku_47._themeDark_1eg7jku_41:active{
105
- --card-border-color:#FFFFFF;
106
- }
107
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:hover,
108
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:focus,
109
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:active{
110
- --card-border-color:rgba(25,25,28,0.2);
111
- }
112
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:active{
113
- border-width:1px;
114
- }
115
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:active._paddings16_1eg7jku_167{
116
- padding:16px;
117
- }
118
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:active._paddings24_1eg7jku_171{
119
- padding:24px;
120
- }
121
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeLight_1eg7jku_34:active._paddings32_1eg7jku_175{
122
- padding:32px;
123
- }
124
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:hover,
125
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:focus,
126
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:active{
127
- --card-border-color:rgba(255,255,255,0.2);
128
- }
129
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:active{
130
- border-width:1px;
131
- }
132
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:active._paddings16_1eg7jku_167{
133
- padding:16px;
134
- }
135
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:active._paddings24_1eg7jku_171{
136
- padding:24px;
137
- }
138
- ._modeClassic_1eg7jku_47._glowHover_1eg7jku_101._themeDark_1eg7jku_41:active._paddings32_1eg7jku_175{
139
- padding:32px;
140
- }
141
- ._modeClassic_1eg7jku_47:active{
106
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:hover,
107
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:focus[data-focus-method='key'],
108
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:focus-visible,
109
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40:active{
110
+ --rs-card-border-color:#19191C;
111
+ }
112
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40._glowHover_up7s65_120:hover,
113
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40._glowHover_up7s65_120:focus[data-focus-method='key'],
114
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40._glowHover_up7s65_120:focus-visible,
115
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeLight_up7s65_40._glowHover_up7s65_120:active{
116
+ --rs-card-border-color:rgba(25,25,28,0.2);
117
+ }
118
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:hover,
119
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:focus[data-focus-method='key'],
120
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:focus-visible,
121
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49:active{
122
+ --rs-card-border-color:#FFFFFF;
123
+ }
124
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49._glowHover_up7s65_120:hover,
125
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49._glowHover_up7s65_120:focus[data-focus-method='key'],
126
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49._glowHover_up7s65_120:focus-visible,
127
+ ._modeClassic_up7s65_59._withStatesBorder_up7s65_81._themeDark_up7s65_49._glowHover_up7s65_120:active{
128
+ --rs-card-border-color:rgba(255,255,255,0.2);
129
+ }
130
+ ._modeClassic_up7s65_59:active{
142
131
  border-width:2px;
143
132
  }
144
- ._modeClassic_1eg7jku_47:active._paddings16_1eg7jku_167{
133
+ ._modeClassic_up7s65_59:active._paddings16_up7s65_197{
145
134
  padding:15px;
146
135
  }
147
- ._modeClassic_1eg7jku_47:active._paddings24_1eg7jku_171{
136
+ ._modeClassic_up7s65_59:active._paddings24_up7s65_201{
148
137
  padding:23px;
149
138
  }
150
- ._modeClassic_1eg7jku_47:active._paddings32_1eg7jku_175{
139
+ ._modeClassic_up7s65_59:active._paddings32_up7s65_205{
151
140
  padding:31px;
152
141
  }
153
- ._modeRock_1eg7jku_48._themeLight_1eg7jku_34:hover,
154
- ._modeRock_1eg7jku_48._themeLight_1eg7jku_34:focus{
155
- --card-border-color:rgba(25,25,28,0.2);
156
- --card-background-color:#19191C;
142
+ ._modeRock_up7s65_60._themeLight_up7s65_40:hover,
143
+ ._modeRock_up7s65_60._themeLight_up7s65_40:focus[data-focus-method='key'],
144
+ ._modeRock_up7s65_60._themeLight_up7s65_40:focus-visible{
145
+ --rs-card-background-color:#19191C;
157
146
  --rs-typography-color-hard:#FFFFFF;
158
147
  --rs-typography-color-average:rgba(255,255,255,0.7);
159
148
  --rs-typography-color-pale:rgba(255,255,255,0.5);
@@ -167,7 +156,10 @@ a._card_1eg7jku_6:hover{
167
156
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
168
157
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
169
158
  }
170
- ._modeRock_1eg7jku_48._themeLight_1eg7jku_34:active{
159
+ ._modeRock_up7s65_60._themeLight_up7s65_40:hover._withStatesBorder_up7s65_81, ._modeRock_up7s65_60._themeLight_up7s65_40:focus[data-focus-method='key']._withStatesBorder_up7s65_81, ._modeRock_up7s65_60._themeLight_up7s65_40:focus-visible._withStatesBorder_up7s65_81{
160
+ --rs-card-border-color:rgba(25,25,28,0.2);
161
+ }
162
+ ._modeRock_up7s65_60._themeLight_up7s65_40:active{
171
163
  background-color:#303033;
172
164
  --rs-typography-color-hard:#FFFFFF;
173
165
  --rs-typography-color-average:rgba(255,255,255,0.7);
@@ -182,7 +174,7 @@ a._card_1eg7jku_6:hover{
182
174
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
183
175
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
184
176
  }
185
- ._modeRock_1eg7jku_48._themeDark_1eg7jku_41{
177
+ ._modeRock_up7s65_60._themeDark_up7s65_49{
186
178
  --rs-typography-color-hard:#FFFFFF;
187
179
  --rs-typography-color-average:rgba(255,255,255,0.7);
188
180
  --rs-typography-color-pale:rgba(255,255,255,0.5);
@@ -196,9 +188,10 @@ a._card_1eg7jku_6:hover{
196
188
  --rs-rock-button-disabled-text-color:rgba(255,255,255,0.5);
197
189
  --rs-rock-button-disabled-bg-color:rgba(255,255,255,0.2);
198
190
  }
199
- ._modeRock_1eg7jku_48._themeDark_1eg7jku_41:hover,
200
- ._modeRock_1eg7jku_48._themeDark_1eg7jku_41:focus{
201
- --card-background-color:#FFFFFF;
191
+ ._modeRock_up7s65_60._themeDark_up7s65_49:hover,
192
+ ._modeRock_up7s65_60._themeDark_up7s65_49:focus[data-focus-method='key'],
193
+ ._modeRock_up7s65_60._themeDark_up7s65_49:focus-visible{
194
+ --rs-card-background-color:#FFFFFF;
202
195
  --rs-typography-color-hard:#19191C;
203
196
  --rs-typography-color-average:rgba(25,25,28,0.7);
204
197
  --rs-typography-color-pale:rgba(25,25,28,0.5);
@@ -212,8 +205,8 @@ a._card_1eg7jku_6:hover{
212
205
  --rs-rock-button-disabled-text-color:rgba(25,25,28,0.5);
213
206
  --rs-rock-button-disabled-bg-color:rgba(25,25,28,0.2);
214
207
  }
215
- ._modeRock_1eg7jku_48._themeDark_1eg7jku_41:active{
216
- --card-background-color:#F4F4F4;
208
+ ._modeRock_up7s65_60._themeDark_up7s65_49:active{
209
+ --rs-card-background-color:#F4F4F4;
217
210
  --rs-typography-color-hard:#19191C;
218
211
  --rs-typography-color-average:rgba(25,25,28,0.7);
219
212
  --rs-typography-color-pale:rgba(25,25,28,0.5);
@@ -227,28 +220,28 @@ a._card_1eg7jku_6:hover{
227
220
  --rs-rock-button-disabled-text-color:rgba(25,25,28,0.5);
228
221
  --rs-rock-button-disabled-bg-color:rgba(25,25,28,0.2);
229
222
  }
230
- ._paddings16_1eg7jku_167{
223
+ ._paddings16_up7s65_197{
231
224
  padding:16px;
232
225
  }
233
- ._paddings24_1eg7jku_171{
226
+ ._paddings24_up7s65_201{
234
227
  padding:24px;
235
228
  }
236
- ._paddings32_1eg7jku_175{
229
+ ._paddings32_up7s65_205{
237
230
  padding:32px;
238
231
  }
239
- ._bordersRadius0_1eg7jku_179{
232
+ ._bordersRadius0_up7s65_209{
240
233
  --rs-card-border-radius:0;
241
234
  }
242
- ._bordersRadius8_1eg7jku_183{
235
+ ._bordersRadius8_up7s65_213{
243
236
  --rs-card-border-radius:8px;
244
237
  }
245
- ._bordersRadius16_1eg7jku_187{
238
+ ._bordersRadius16_up7s65_217{
246
239
  --rs-card-border-radius:16px;
247
240
  }
248
- ._bordersRadius24_1eg7jku_191{
241
+ ._bordersRadius24_up7s65_221{
249
242
  --rs-card-border-radius:24px;
250
243
  }
251
- ._cardImage_1eg7jku_195{
244
+ ._cardImage_up7s65_225{
252
245
  position:relative;
253
246
 
254
247
  overflow:hidden;
@@ -257,7 +250,7 @@ a._card_1eg7jku_6:hover{
257
250
 
258
251
  box-sizing:border-box;
259
252
  }
260
- ._cardImageImg_1eg7jku_203{
253
+ ._cardImageImg_up7s65_233{
261
254
  display:-webkit-box;
262
255
  display:-ms-flexbox;
263
256
  display:flex;
@@ -268,22 +261,22 @@ a._card_1eg7jku_6:hover{
268
261
  -ms-flex-align:center;
269
262
  align-items:center;
270
263
  }
271
- ._paddings16_1eg7jku_167 ._cardImageImg_1eg7jku_203{
264
+ ._paddings16_up7s65_197 ._cardImageImg_up7s65_233{
272
265
  top:-16px;
273
266
  left:-16px;
274
267
  width:calc(100% + 32px);
275
268
  }
276
- ._paddings24_1eg7jku_171 ._cardImageImg_1eg7jku_203{
269
+ ._paddings24_up7s65_201 ._cardImageImg_up7s65_233{
277
270
  top:-24px;
278
271
  left:-24px;
279
272
  width:calc(100% + 48px);
280
273
  }
281
- ._paddings32_1eg7jku_175 ._cardImageImg_1eg7jku_203{
274
+ ._paddings32_up7s65_205 ._cardImageImg_up7s65_233{
282
275
  top:-32px;
283
276
  left:-32px;
284
277
  width:calc(100% + 64px);
285
278
  }
286
- ._cardImageImg_1eg7jku_203 img{
279
+ ._cardImageImg_up7s65_233 img{
287
280
  max-height:100%;
288
281
  max-width:100%;
289
282
  -webkit-transition:-webkit-transform .2s;
@@ -293,15 +286,15 @@ a._card_1eg7jku_6:hover{
293
286
  -webkit-transform:scale(1);
294
287
  transform:scale(1);
295
288
  }
296
- ._card_1eg7jku_6:hover ._cardImageImg_1eg7jku_203 img{
289
+ ._card_up7s65_6:hover ._cardImageImg_up7s65_233 img{
297
290
  -webkit-transform:scale(1.1);
298
291
  transform:scale(1.1);
299
292
  }
300
- ._card_1eg7jku_6._cardPlain_1eg7jku_47:hover ._cardImageImg_1eg7jku_203 img{
293
+ ._card_up7s65_6._cardPlain_up7s65_59:hover ._cardImageImg_up7s65_233 img{
301
294
  -webkit-transform:none;
302
295
  transform:none;
303
296
  }
304
- ._cardImageDiv_1eg7jku_236{
297
+ ._cardImageDiv_up7s65_266{
305
298
  display:-webkit-box;
306
299
  display:-ms-flexbox;
307
300
  display:flex;
@@ -323,55 +316,55 @@ a._card_1eg7jku_6:hover{
323
316
 
324
317
  transition:background-size .2s;
325
318
  }
326
- ._paddings16_1eg7jku_167 ._cardImageDiv_1eg7jku_236{
319
+ ._paddings16_up7s65_197 ._cardImageDiv_up7s65_266{
327
320
  top:-16px;
328
321
  left:-16px;
329
322
  padding:16px;
330
323
  width:calc(100% + 32px);
331
324
  }
332
- ._card_1eg7jku_6:active ._paddings16_1eg7jku_167 ._cardImageDiv_1eg7jku_236{
325
+ ._card_up7s65_6:active ._paddings16_up7s65_197 ._cardImageDiv_up7s65_266{
333
326
  padding:calc(16px - 1);
334
327
  }
335
- ._paddings24_1eg7jku_171 ._cardImageDiv_1eg7jku_236{
328
+ ._paddings24_up7s65_201 ._cardImageDiv_up7s65_266{
336
329
  top:-24px;
337
330
  left:-24px;
338
331
  padding:24px;
339
332
  width:calc(100% + 48px);
340
333
  }
341
- ._card_1eg7jku_6:active ._paddings24_1eg7jku_171 ._cardImageDiv_1eg7jku_236{
334
+ ._card_up7s65_6:active ._paddings24_up7s65_201 ._cardImageDiv_up7s65_266{
342
335
  padding:calc(24px - 1);
343
336
  }
344
- ._paddings32_1eg7jku_175 ._cardImageDiv_1eg7jku_236{
337
+ ._paddings32_up7s65_205 ._cardImageDiv_up7s65_266{
345
338
  top:-32px;
346
339
  left:-32px;
347
340
  padding:32px;
348
341
  width:calc(100% + 64px);
349
342
  }
350
- ._card_1eg7jku_6:active ._paddings32_1eg7jku_175 ._cardImageDiv_1eg7jku_236{
343
+ ._card_up7s65_6:active ._paddings32_up7s65_205 ._cardImageDiv_up7s65_266{
351
344
  padding:calc(32px - 1);
352
345
  }
353
- ._card_1eg7jku_6:hover ._cardImageDiv_1eg7jku_236{
346
+ ._card_up7s65_6:hover ._cardImageDiv_up7s65_266{
354
347
  background-size:110% 110%;
355
348
  }
356
- ._card_1eg7jku_6._cardPlain_1eg7jku_47:hover ._cardImageDiv_1eg7jku_236{
349
+ ._card_up7s65_6._cardPlain_up7s65_59:hover ._cardImageDiv_up7s65_266{
357
350
  background-size:100% 100%;
358
351
  }
359
- ._fixedImageHeight_1eg7jku_271 img{
352
+ ._fixedImageHeight_up7s65_301 img{
360
353
  height:100%;
361
354
  }
362
- ._paddings16_1eg7jku_167 ._fixedImageHeight_1eg7jku_271{
355
+ ._paddings16_up7s65_197 ._fixedImageHeight_up7s65_301{
363
356
  height:204px;
364
357
  max-height:204px;
365
358
  }
366
- ._paddings24_1eg7jku_171 ._fixedImageHeight_1eg7jku_271{
359
+ ._paddings24_up7s65_201 ._fixedImageHeight_up7s65_301{
367
360
  height:212px;
368
361
  max-height:212px;
369
362
  }
370
- ._paddings32_1eg7jku_175 ._fixedImageHeight_1eg7jku_271{
363
+ ._paddings32_up7s65_205 ._fixedImageHeight_up7s65_301{
371
364
  height:220px;
372
365
  max-height:220px;
373
366
  }
374
- ._fullImageWidth_1eg7jku_288 img{
367
+ ._fullImageWidth_up7s65_318 img{
375
368
  width:100%;
376
369
  }
377
370
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/card",
3
- "version": "0.6.8",
3
+ "version": "0.7.1",
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.7.4",
28
- "@rescui/colors": "^0.1.4",
27
+ "@rescui/button": "^0.8.0",
28
+ "@rescui/colors": "^0.1.5",
29
29
  "@rescui/postcss-preset-library": "^0.1.0",
30
30
  "@rescui/scripts": "^0.1.7",
31
- "@rescui/typography": "^0.8.2",
32
- "@rescui/visual-regression": "^0.0.3"
31
+ "@rescui/typography": "^0.8.3",
32
+ "@rescui/visual-regression": "^0.0.4"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "rescui-scripts build"
36
36
  },
37
- "gitHead": "399d5bcaf892b517a4b5d8108d509ed6549629f2"
37
+ "gitHead": "0aff4c2dbeda999f17acac6d77eb38864c28cc04"
38
38
  }