Skip to content

Commit 6c590b7

Browse files
inikolovainikolova
committed
fix(card): avatar inside card should adheres to the avatar component's sizing options
1 parent 0c3a700 commit 6c590b7

12 files changed

Lines changed: 19 additions & 43 deletions

File tree

‎packages/bootstrap/scss/card/_variables.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,9 @@ $kendo-card-subtitle-text: k-color(subtle) !default;
152152
/// The maximum width of the Card image.
153153
/// @group card
154154
$kendo-card-img-max-width: 100px !default;
155-
/// The size of the Avatar in the Card.
156-
/// @group card
157-
$kendo-card-avatar-size: 45px !default;
158155
/// The spacing between the Avatar and the text in the Card.
159156
/// @group card
160-
$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
157+
$kendo-card-avatar-spacing: k-spacing(2) !default;
161158

162159
/// The horizontal padding of the Card actions.
163160
/// @group card
@@ -245,7 +242,6 @@ $kendo-card-theme-colors: (
245242
$kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
246243
$kendo-card-subtitle-text: $kendo-card-subtitle-text,
247244
$kendo-card-img-max-width: $kendo-card-img-max-width,
248-
$kendo-card-avatar-size: $kendo-card-avatar-size,
249245
$kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
250246
$kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
251247
$kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

‎packages/bootstrap/scss/orgchart/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
129129
$kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
130130
/// The min height of the OrgChart Card body title wrap.
131131
/// @group orgchart
132-
$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
132+
$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
133133

134134
/// The size of the OrgChart connecting line.
135135
/// @group orgchart

‎packages/classic/scss/card/_variables.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,12 +150,9 @@ $kendo-card-subtitle-text: k-color(subtle) !default;
150150
/// The maximum width of the Card image.
151151
/// @group card
152152
$kendo-card-img-max-width: 100px !default;
153-
/// The size of the Avatar in the Card.
154-
/// @group card
155-
$kendo-card-avatar-size: 45px !default;
156153
/// The spacing between the Avatar and the text in the Card.
157154
/// @group card
158-
$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
155+
$kendo-card-avatar-spacing: k-spacing(2) !default;
159156

160157
/// The horizontal padding of the Card actions.
161158
/// @group card
@@ -245,7 +242,6 @@ $kendo-card-theme-colors: (
245242
$kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
246243
$kendo-card-subtitle-text: $kendo-card-subtitle-text,
247244
$kendo-card-img-max-width: $kendo-card-img-max-width,
248-
$kendo-card-avatar-size: $kendo-card-avatar-size,
249245
$kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
250246
$kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
251247
$kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

‎packages/classic/scss/orgchart/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
129129
$kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
130130
/// The min height of the OrgChart Card body title wrap.
131131
/// @group orgchart
132-
$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
132+
$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
133133

134134
/// The size of the OrgChart connecting line.
135135
/// @group orgchart

‎packages/core/scss/components/card/_layout.scss‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,13 @@
4040
*::after {
4141
box-sizing: border-box;
4242
}
43-
44-
// Card avatar
45-
.k-card-avatar,
46-
.k-avatar {
47-
margin-inline-end: $kendo-card-avatar-spacing;
48-
width: $kendo-card-avatar-size;
49-
height: $kendo-card-avatar-size;
50-
flex-basis: $kendo-card-avatar-size;
51-
}
5243
}
44+
// Card avatar
45+
.k-card-avatar,
46+
.k-card .k-avatar {
47+
margin-inline-end: $kendo-card-avatar-spacing;
48+
}
49+
5350
.k-card > .k-card-inner {
5451
@include border-radius( $kendo-card-inner-border-radius );
5552
display: flex;

‎packages/core/scss/components/card/_variables.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ $kendo-card-subtitle-letter-spacing: null !default;
5757
$kendo-card-subtitle-text: null !default;
5858

5959
$kendo-card-img-max-width: null !default;
60-
$kendo-card-avatar-size: null !default;
6160
$kendo-card-avatar-spacing: null !default;
6261

6362
$kendo-card-actions-padding-x: null !default;

‎packages/default/scss/card/_variables.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ $kendo-card-focus-bg: null !default;
5353
$kendo-card-focus-text: null !default;
5454
/// The border color of the focused Card.
5555
/// @group card
56-
$kendo-card-focus-border: rgba( black, .15 ) !default;
56+
$kendo-card-focus-border: k-color(border-alt) !default;
5757

5858
// TODO: double-check: the default theme is not supposed to elevate the Card on focus
5959

@@ -89,10 +89,10 @@ $kendo-card-body-padding-y: k-spacing(4) !default;
8989

9090
/// The horizontal padding of the Card footer.
9191
/// @group card
92-
$kendo-card-footer-padding-x: $kendo-card-padding-x !default;
92+
$kendo-card-footer-padding-x: k-spacing(2) !default;
9393
/// The vertical padding of the Card footer.
9494
/// @group card
95-
$kendo-card-footer-padding-y: $kendo-card-padding-y !default;
95+
$kendo-card-footer-padding-y: k-spacing(2) !default;
9696
/// The top border width of the Card footer.
9797
/// @group card
9898
$kendo-card-footer-border-width: 1px !default;
@@ -150,12 +150,9 @@ $kendo-card-subtitle-text: k-color(subtle) !default;
150150
/// The maximum width of the Card image.
151151
/// @group card
152152
$kendo-card-img-max-width: 100px !default;
153-
/// The size of the Avatar in the Card.
154-
/// @group card
155-
$kendo-card-avatar-size: 45px !default;
156153
/// The spacing between the Avatar and the text in the Card.
157154
/// @group card
158-
$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
155+
$kendo-card-avatar-spacing: k-spacing(2) !default;
159156

160157
/// The horizontal padding of the Card actions.
161158
/// @group card
@@ -243,7 +240,6 @@ $kendo-card-theme-colors: (
243240
$kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
244241
$kendo-card-subtitle-text: $kendo-card-subtitle-text,
245242
$kendo-card-img-max-width: $kendo-card-img-max-width,
246-
$kendo-card-avatar-size: $kendo-card-avatar-size,
247243
$kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
248244
$kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
249245
$kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

‎packages/default/scss/orgchart/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
127127
$kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
128128
/// The min height of the OrgChart Card body title wrap.
129129
/// @group orgchart
130-
$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
130+
$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
131131

132132
/// The size of the OrgChart connecting line.
133133
/// @group orgchart

‎packages/fluent/scss/card/_variables.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -145,12 +145,9 @@ $kendo-card-subtitle-text: var( --kendo-card-subtitle-text, k-color(subtle) ) !d
145145
/// The maximum width of the Card image.
146146
/// @group card
147147
$kendo-card-img-max-width: 100px !default;
148-
/// The size of the Avatar in the Card.
149-
/// @group card
150-
$kendo-card-avatar-size: 3rem !default;
151148
/// The spacing between the Avatar and the text in the Card.
152149
/// @group card
153-
$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
150+
$kendo-card-avatar-spacing: k-spacing(2) !default;
154151

155152
/// The horizontal padding of the Card actions.
156153
/// @group card
@@ -233,7 +230,6 @@ $kendo-card-theme-colors: (
233230
$kendo-card-subtitle-line-height: $kendo-card-subtitle-line-height,
234231
$kendo-card-subtitle-text: $kendo-card-subtitle-text,
235232
$kendo-card-img-max-width: $kendo-card-img-max-width,
236-
$kendo-card-avatar-size: $kendo-card-avatar-size,
237233
$kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
238234
$kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
239235
$kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

‎packages/fluent/scss/orgchart/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ $kendo-orgchart-card-body-border-color: var( --kendo-orgchart-card-body-border-c
136136
$kendo-orgchart-card-body-vbox-margin-x: var( --kendo-orgchart-card-body-vbox-margin-x, calc( #{$kendo-orgchart-spacer} - #{k-spacing(2)} ) ) !default;
137137
/// The min height of the OrgChart Card body title wrap.
138138
/// @group orgchart
139-
$kendo-orgchart-card-body-vbox-min-height: var( --kendo-orgchart-card-body-vbox-min-height, #{$kendo-card-avatar-size} ) !default;
139+
$kendo-orgchart-card-body-vbox-min-height: var( --kendo-orgchart-card-body-vbox-min-height, 3em ) !default;
140140

141141
/// The size of the OrgChart connecting line.
142142
/// @group orgchart

0 commit comments

Comments
 (0)