Skip to content

Commit 1161402

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into mtsvyatkova/fix-12953
2 parents 4010fa0 + ffd8be1 commit 1161402

39 files changed

+843
-1460
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@
6464
@mixin action-strip($theme) {
6565
@include css-vars($theme);
6666

67-
$padding: (
68-
comfortable: 0 rem(24px),
69-
cosy: 0 rem(16px),
70-
compact: 0 rem(12px)
67+
$padding-inline: (
68+
comfortable: rem(24px),
69+
cosy: rem(16px),
70+
compact: rem(12px)
7171
);
7272

7373
$variant: map.get($theme, variant);
@@ -84,7 +84,8 @@
8484
inset-inline-start: 0;
8585
background: var-get($theme, 'background');
8686
color: inherit;
87-
padding: map.get($padding, 'comfortable');
87+
padding-inline: pad-inline(map.get($padding-inline, 'compact'), map.get($padding-inline, 'cosy'), map.get($padding-inline, 'comfortable'));
88+
padding-block: 0;
8889
z-index: 9999;
8990
}
9091

@@ -101,14 +102,9 @@
101102
}
102103
}
103104

104-
%igx-action-strip--cosy {
105-
@extend %action-icons-density;
106-
padding: map.get($padding, 'cosy');
107-
}
108-
105+
%igx-action-strip--cosy,
109106
%igx-action-strip--compact {
110107
@extend %action-icons-density;
111-
padding: map.get($padding, 'compact');
112108
}
113109

114110
%igx-action-strip__editing-actions,

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
66
@mixin component {
77
@include b(igx-avatar) {
8+
@include sizable();
89
// Register the component in the component registry
910
$this: bem--selector-to-string(&);
11+
1012
@include register-component(
1113
$name: string.slice($this, 2, -1),
1214
$deps: (
@@ -41,15 +43,7 @@
4143
}
4244

4345
@include m(initials) {
44-
@extend %igx-avatar-initials--small !optional;
45-
}
46-
47-
@include mx(medium, initials) {
48-
@extend %igx-avatar-initials--medium !optional;
49-
}
50-
51-
@include mx(large, initials) {
52-
@extend %igx-avatar-initials--large !optional;
46+
@extend %igx-avatar--initials !optional;
5347
}
5448
}
5549
}

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
/// @param {Color} $color [null] - The text color used of the avatar.
1616
/// @param {Color} $background [null] - The background color used of the avatar.
1717
/// @param {number} $border-radius [null] - The border-radius used of the avatar.
18-
/// @param {number} $size [null] - The size of the avatar.
1918
/// @requires $light-schema
2019
///
2120
/// @example scss Change the background and icon colors in icon avatars
@@ -27,7 +26,6 @@
2726
$background: null,
2827
$color: null,
2928
$border-radius: null,
30-
$size: null,
3129
) {
3230
$name: 'igx-avatar';
3331
$avatar-schema: ();
@@ -53,20 +51,13 @@
5351
background: $background,
5452
color: $color,
5553
border-radius: $border-radius,
56-
size: $size
5754
));
5855
}
5956

6057
/// @param {Map} $theme - The theme used to style the component.
6158
@mixin avatar($theme) {
6259
@include css-vars($theme);
6360

64-
$variant: map.get($theme, variant);
65-
$size: map.get($theme, 'size');
66-
$small-size: rem(40px);
67-
$medium-size: rem(64px);
68-
$large-size: rem(88px);
69-
7061
$variant: map.get($theme, variant);
7162
$bootstrap-theme: $variant == 'bootstrap';
7263

@@ -87,6 +78,8 @@
8778
}
8879

8980
%igx-avatar-display {
81+
--size: #{sizable(#{rem(40px)}, #{rem(64px)}, #{rem(88px)})};
82+
9083
position: relative;
9184
display: inline-flex;
9285
justify-content: center;
@@ -98,6 +91,8 @@
9891
border-radius: var-get($theme, 'border-radius');
9992
outline-style: none;
10093
flex-shrink: 0;
94+
width: var(--size);
95+
height: var(--size);
10196

10297
&::after {
10398
box-shadow: none;
@@ -135,41 +130,22 @@
135130

136131
%igx-avatar--initials {
137132
text-transform: uppercase;
133+
font-size: calc(var(--size) / 2);
134+
line-height: calc(var(--size) / 2);
138135
}
139136

137+
%igx-avatar--small,
140138
%igx-avatar-initials--small {
141-
--size: #{$size or $small-size};
142-
font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);
143-
line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);
139+
--component-size: var(--ig-size, var(--ig-size-small));
144140
}
145141

142+
%igx-avatar--medium,
146143
%igx-avatar-initials--medium {
147-
--size: #{$size or $medium-size};
148-
font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);
149-
line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);
144+
--component-size: var(--ig-size, var(--ig-size-medium));
150145
}
151146

147+
%igx-avatar--large,
152148
%igx-avatar-initials--large {
153-
--size: #{$size or $large-size};
154-
font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);
155-
line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);
156-
}
157-
158-
%igx-avatar--small {
159-
--size: #{$size or $small-size};
160-
width: var-get(('size': $size or $small-size), 'size');
161-
height: var-get(('size': $size or $small-size), 'size');
162-
}
163-
164-
%igx-avatar--medium {
165-
--size: #{$size or $medium-size};
166-
width: var-get(('size': $size or $medium-size), 'size');
167-
height: var-get(('size': $size or $medium-size), 'size');
168-
}
169-
170-
%igx-avatar--large {
171-
--size: #{$size or $large-size};
172-
width: var-get(('size': $size or $large-size), 'size');
173-
height: var-get(('size': $size or $large-size), 'size');
149+
--component-size: var(--ig-size, var(--ig-size-large));
174150
}
175151
}

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@
1919
@extend %igx-badge-value !optional;
2020
}
2121

22-
@include m(default) {
23-
@extend %igx-badge--default !optional;
24-
}
25-
2622
@include m(info) {
2723
@extend %igx-badge--info !optional;
2824
}

‎projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -86,29 +86,27 @@
8686
@mixin badge($theme) {
8787
@include css-vars($theme);
8888

89-
$badge-width: rem(22px);
90-
$badge-height: $badge-width;
91-
92-
$badge-font-size: rem(11px);
9389
$badge-font-weight: normal;
9490

95-
$badge-icon-font-size: rem(12px);
96-
9791
$badge-value-padding: rem(4px);
9892
$border-type: solid;
9993

10094
%igx-badge-display {
95+
--size: #{rem(22px)};
96+
--font-size: calc(var(--size) / 2);
97+
--icon-font-size: #{rem(12px)};
98+
10199
display: flex;
102100
justify-content: center;
103101
align-items: center;
104-
min-width: $badge-width;
105-
height: $badge-height;
106-
font-size: $badge-font-size;
102+
min-width: var(--size);
103+
min-height: var(--size);
104+
font-size: var(--font-size);
107105
font-weight: $badge-font-weight;
108106
color: var-get($theme, 'text-color');
109107
line-height: 1;
110108
background: var-get($theme, 'background-color');
111-
border-radius: 50%;
109+
border-radius: calc(var(--size) / 2);
112110
box-shadow: var-get($theme, 'shadow');
113111
border-width: var-get($theme, 'border-width');
114112
border-color: var-get($theme, 'border-color');
@@ -119,9 +117,9 @@
119117
display: inline-flex;
120118
justify-content: center;
121119
align-items: center;
122-
width: var(--igx-icon-size, #{$badge-width - rem(2px)});
123-
height: var(--igx-icon-size, #{$badge-width - rem(2px)});
124-
font-size: var(--igx-icon-size, #{$badge-icon-font-size});
120+
width: var(--igx-icon-size, #{var(--size) - rem(2px)});
121+
height: var(--igx-icon-size, #{var(--size) - rem(2px)});
122+
font-size: var(--igx-icon-size, #{var(--icon-font-size)});
125123
font-weight: $badge-font-weight;
126124
color: var-get($theme, 'icon-color');
127125
}

‎projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
}
1010

1111
@include b(igx-banner) {
12+
@include sizable();
13+
// Register the component in the component registry
1214
$this: bem--selector-to-string(&);
1315
@include register-component(
1416
$name: string.slice($this, 2, -1),
@@ -46,12 +48,10 @@
4648
}
4749

4850
@include m(cosy) {
49-
@extend %igx-banner !optional;
5051
@extend %igx-banner--cosy !optional
51-
}
52+
}
5253

5354
@include m(compact) {
54-
@extend %igx-banner !optional;
5555
@extend %igx-banner--compact !optional;
5656
}
5757
}

‎projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
$banner-illustration-color: null
3232
) {
3333
$name: 'igx-banner';
34-
$selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact';
34+
$selector: 'igx-banner, .igx-banner';
3535
$banner-schema: ();
3636

3737
@if map.has-key($schema, $name) {
@@ -61,11 +61,8 @@
6161
@include css-vars($theme);
6262
$variant: map.get($theme, 'variant');
6363

64-
$banner-padding: (
65-
comfortable: rem(8px),
66-
cosy: rem(8px),
67-
compact: rem(8px)
68-
);
64+
$padding: rem(8px);
65+
$padding-inline-start: calc(#{$padding} * 2);
6966

7067
%igx-banner-host {
7168
igx-expansion-panel-body {
@@ -86,17 +83,28 @@
8683
}
8784

8885
%igx-banner {
86+
--component-size: var(--ig-size, var(--ig-size-large));
87+
8988
display: flex;
9089
justify-content: flex-end;
9190
flex-wrap: wrap;
92-
grid-gap: rem(8px);
93-
padding-inline-start: calc(#{map.get($banner-padding, 'comfortable') * 2});
94-
padding-inline-end: map.get($banner-padding, 'comfortable');
95-
padding-block-start: map.get($banner-padding, 'comfortable');
96-
padding-block-end: map.get($banner-padding, 'comfortable');
91+
gap: rem(8px);
92+
93+
padding-inline-start: pad-inline($padding-inline-start, $padding-inline-start, $padding-inline-start);
94+
padding-inline-end: pad-inline($padding, $padding, $padding);
95+
padding-block-start: pad-block($padding, $padding, $padding);
96+
padding-block-end: pad-block($padding, $padding, $padding);
9797
background: var-get($theme, 'banner-background');
9898
}
9999

100+
%igx-banner--cosy {
101+
--component-size: var(--ig-size, var(--ig-size-medium));
102+
}
103+
104+
%igx-banner--compact {
105+
--component-size: var(--ig-size, var(--ig-size-small));
106+
}
107+
100108
%igx-banner__illustration {
101109
justify-content: center;
102110
width: rem(40px);
@@ -124,19 +132,6 @@
124132
}
125133
}
126134

127-
%igx-banner--cosy {
128-
padding-inline-start: calc(#{map.get($banner-padding, 'cosy') * 2});
129-
padding-inline-end: map.get($banner-padding, 'cosy');
130-
padding-block-start: map.get($banner-padding, 'cosy');
131-
padding-block-end: map.get($banner-padding, 'cosy');
132-
}
133-
134-
%igx-banner--compact {
135-
padding-inline-start: calc(#{map.get($banner-padding, 'compact') * 2});
136-
padding-inline-end: map.get($banner-padding, 'compact');
137-
padding-block-start: map.get($banner-padding, 'compact');
138-
padding-block-end: map.get($banner-padding, 'compact');
139-
}
140135

141136
%igx-banner__message {
142137
min-width: rem(150px);

‎projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
66
@mixin component {
77
@include b(igx-button) {
8+
@include sizable();
89
$this: bem--selector-to-string(&);
910
@include register-component(
1011
$name: string.slice($this, 2, -1),

0 commit comments

Comments
 (0)