@snack-uikit/card 0.12.3 → 0.12.4-preview-86dac340.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 (3) hide show
  1. package/dist/components/Card/styles.module.css +21 -16
  2. package/package.json +3 -3
  3. package/src/components/Card/styles.module.scss +25 -18
package/dist/components/Card/styles.module.css CHANGED
@@ -25,6 +25,8 @@
25
25
  border-width:var(--border-width-card-container, 1px);
26
26
  position:relative;
27
27
  overflow:hidden;
28
+ display:flex;
29
+ flex-direction:column;
28
30
  box-sizing:border-box;
29
31
  margin:0;
30
32
  padding:0;
@@ -62,6 +64,22 @@
62
64
  .card:focus-within .functionBadgeWrapper{
63
65
  display:block;
64
66
  }
67
+ .card[data-disabled]{
68
+ outline-width:var(--border-state-focus-s-border-width, 2px);
69
+ outline-style:var(--border-state-focus-s-border-style, solid);
70
+ outline-color:var(--border-state-focus-s-border-color, );
71
+ cursor:not-allowed;
72
+ background-color:var(--sys-neutral-background, #f1f2f6);
73
+ outline-color:var(--sys-neutral-decor-default, #dfe2ec);
74
+ outline-width:var(--border-width-card-container, 1px);
75
+ }
76
+ .card[data-disabled] .check{
77
+ color:var(--sys-neutral-on-accent, #ffffff);
78
+ background-color:var(--sys-neutral-text-disabled, #b3b6bf);
79
+ }
80
+ .card[data-disabled] *{
81
+ cursor:not-allowed;
82
+ }
65
83
  .card[data-pointer] *{
66
84
  cursor:pointer;
67
85
  }
@@ -113,22 +131,6 @@
113
131
  .card[data-pointer]:hover{
114
132
  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
115
133
  }
116
- .card[data-disabled]{
117
- outline-width:var(--border-state-focus-s-border-width, 2px);
118
- outline-style:var(--border-state-focus-s-border-style, solid);
119
- outline-color:var(--border-state-focus-s-border-color, );
120
- cursor:not-allowed;
121
- background-color:var(--sys-neutral-background, #f1f2f6);
122
- outline-color:var(--sys-neutral-decor-default, #dfe2ec);
123
- outline-width:var(--border-width-card-container, 1px);
124
- }
125
- .card[data-disabled] .check{
126
- color:var(--sys-neutral-on-accent, #ffffff);
127
- background-color:var(--sys-neutral-text-disabled, #b3b6bf);
128
- }
129
- .card[data-disabled] *{
130
- cursor:not-allowed;
131
- }
132
134
 
133
135
  .anchor{
134
136
  position:absolute;
@@ -142,6 +144,8 @@
142
144
 
143
145
  .body{
144
146
  display:block;
147
+ flex-grow:1;
148
+ flex-shrink:1;
145
149
  width:100%;
146
150
  color:var(--sys-neutral-text-support, #656771);
147
151
  text-align:initial;
@@ -155,6 +159,7 @@
155
159
  justify-content:flex-start;
156
160
  box-sizing:border-box;
157
161
  max-width:100%;
162
+ height:100%;
158
163
  }
159
164
  .content[data-size=s]{
160
165
  padding:var(--space-card-padding-container-s, 8px);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.12.3",
7
+ "version": "0.12.4-preview-86dac340.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,11 +37,11 @@
37
37
  "@snack-uikit/icons": "0.20.1",
38
38
  "@snack-uikit/list": "0.10.0",
39
39
  "@snack-uikit/promo-tag": "0.4.1",
40
- "@snack-uikit/tag": "0.8.2",
40
+ "@snack-uikit/tag": "0.8.3-preview-86dac340.0",
41
41
  "@snack-uikit/truncate-string": "0.4.12",
42
42
  "@snack-uikit/typography": "0.6.1",
43
43
  "@snack-uikit/utils": "3.2.0",
44
44
  "classnames": "2.3.2"
45
45
  },
46
- "gitHead": "54deda57938e456f02898d842aeaca66c01e44f4"
46
+ "gitHead": "80e44337bb89c080ebfdefb1bd31e74469d1da2e"
47
47
  }
package/src/components/Card/styles.module.scss CHANGED
@@ -34,6 +34,8 @@ $sizes: 's', 'm', 'l';
34
34
  position: relative;
35
35
 
36
36
  overflow: hidden;
37
+ display: flex;
38
+ flex-direction: column;
37
39
 
38
40
  box-sizing: border-box;
39
41
  margin: 0;
@@ -84,6 +86,24 @@ $sizes: 's', 'm', 'l';
84
86
  }
85
87
  }
86
88
 
89
+ &[data-disabled] {
90
+ @include outline-var($container-focused-s);
91
+
92
+ cursor: not-allowed;
93
+ background-color: $sys-neutral-background;
94
+ outline-color: $sys-neutral-decor-default;
95
+ outline-width: $border-width-card-container;
96
+
97
+ .check {
98
+ color: $sys-neutral-on-accent;
99
+ background-color: $sys-neutral-text-disabled;
100
+ }
101
+
102
+ * {
103
+ cursor: not-allowed;
104
+ }
105
+ }
106
+
87
107
  &[data-pointer] {
88
108
  * {
89
109
  cursor: pointer;
@@ -147,24 +167,6 @@ $sizes: 's', 'm', 'l';
147
167
  box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
148
168
  }
149
169
  }
150
-
151
- &[data-disabled] {
152
- @include outline-var($container-focused-s);
153
-
154
- cursor: not-allowed;
155
- background-color: $sys-neutral-background;
156
- outline-color: $sys-neutral-decor-default;
157
- outline-width: $border-width-card-container;
158
-
159
- .check {
160
- color: $sys-neutral-on-accent;
161
- background-color: $sys-neutral-text-disabled;
162
- }
163
-
164
- * {
165
- cursor: not-allowed;
166
- }
167
- }
168
170
  }
169
171
 
170
172
  .anchor {
@@ -180,7 +182,11 @@ $sizes: 's', 'm', 'l';
180
182
 
181
183
  .body {
182
184
  display: block;
185
+ flex-grow: 1;
186
+ flex-shrink: 1;
187
+
183
188
  width: 100%;
189
+
184
190
  color: $sys-neutral-text-support;
185
191
  text-align: initial;
186
192
  }
@@ -195,6 +201,7 @@ $sizes: 's', 'm', 'l';
195
201
 
196
202
  box-sizing: border-box;
197
203
  max-width: 100%;
204
+ height: 100%;
198
205
 
199
206
  @each $size in $sizes {
200
207
  &[data-size='#{$size}'] {