Skip to content

Commit eede11d

Browse files
didimmovadidimmova
authored
feat(components): use pad function (#16183)
1 parent 8b3e4ec commit eede11d

File tree

22 files changed

+87
-85
lines changed

22 files changed

+87
-85
lines changed

‎angular.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,8 +307,8 @@
307307
{
308308
"type": "bundle",
309309
"name": "styles",
310-
"maximumWarning": "450kb",
311-
"maximumError": "480kb"
310+
"maximumWarning": "480kb",
311+
"maximumError": "490kb"
312312
},
313313
{
314314
"type": "anyComponentStyle",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454

5555
%igx-badge-value {
5656
white-space: nowrap;
57-
padding-inline: rem(4px);
57+
padding-inline: pad-inline(rem(4px));
5858
}
5959

6060
%igx-badge--success {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@
3434
justify-content: flex-end;
3535
flex-wrap: wrap;
3636
gap: rem(8px);
37-
padding: rem(16px) rem(8px);
37+
padding: pad-block(rem(16px)) pad-inline(rem(8px));
3838
min-width: rem(320px);
3939
background: var-get($theme, 'banner-background');
4040
box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
4141
border-radius: var-get($theme, 'border-radius');
4242

4343
@if $variant == 'indigo' {
4444
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
45-
padding: rem(16px);
45+
padding: pad(rem(16px));
4646
}
4747

4848
igc-icon,
@@ -79,7 +79,7 @@
7979
@if $variant == 'indigo' {
8080
gap: rem(8px);
8181
} @else {
82-
padding: 0 rem(8px);
82+
padding: 0 pad-inline(rem(8px));
8383
}
8484
}
8585

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
$menu-height: rem(56px);
1313
$item-min-width: rem(80px);
1414
$item-max-width: rem(168px);
15-
$item-padding: 0 rem(12px, 16px);
15+
$item-padding: 0 pad-inline(rem(12px, 16px));
1616

1717
%igx-bottom-nav-panel {
1818
display: block;
@@ -115,7 +115,7 @@
115115
color: var-get($theme, 'icon-color');
116116

117117
@if $variant != 'indigo' {
118-
padding: 0 rem(8px);
118+
padding: 0 pad-inline(rem(8px));
119119
height: rem(24px);
120120
transform: translateZ(0);
121121
transition: transform .15s $in-out-quad;

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@
4242
), $variant);
4343

4444
$header-padding: map.get((
45-
'material': rem(16px) rem(24px),
46-
'fluent': rem(16px),
47-
'bootstrap': rem(16px),
48-
'indigo': rem(16px),
45+
'material': pad-block(rem(16px)) pad-inline(rem(24px)),
46+
'fluent': pad(rem(16px)),
47+
'bootstrap': pad(rem(16px)),
48+
'indigo': pad(rem(16px)),
4949
), $variant);
5050

5151
$arrow-gap: map.get((
@@ -57,8 +57,8 @@
5757

5858
$date-view-row-gap: rem(4px);
5959

60-
$cal-row-padding: rem(8px);
61-
$cal-row-margin: rem(2px) 0;
60+
$cal-row-padding: pad(rem(8px));
61+
$cal-row-margin: pad-block(rem(2px)) 0;
6262

6363
%parent-container {
6464
color: var-get($theme, 'content-foreground');
@@ -134,29 +134,29 @@
134134

135135
@if $bootstrap-theme {
136136
%days-view {
137-
padding-block-end: rem(16px);
137+
padding-block-end: pad-block(rem(16px));
138138
padding-block-start: 0;
139139
padding-inline: 0;
140140
}
141141

142142
%days-view + %days-view {
143143
%days-view-row {
144-
padding-inline-start: rem(22px);
144+
padding-inline-start: pad-inline(rem(22px));
145145
}
146146
}
147147

148148
%days-view:first-child,
149149
%days-view:nth-child(even) {
150150
%days-view-row {
151-
padding-inline-end: rem(22px);
151+
padding-inline-end: pad-inline(rem(22px));
152152
}
153153
}
154154

155155

156156
%days-view:last-child,
157157
%days-view:first-child:only-child {
158158
%days-view-row {
159-
padding-inline-end: rem(12px);
159+
padding-inline-end: pad-inline(rem(12px));
160160
}
161161
}
162162

@@ -185,7 +185,7 @@
185185
}
186186

187187
%days-view:last-child {
188-
padding-inline-end: pad-block(rem(12px));
188+
padding-inline-end: pad-inline(rem(12px));
189189
}
190190
}
191191
}
@@ -273,7 +273,7 @@
273273
display: flex;
274274

275275
@if $bootstrap-theme {
276-
padding-block-end: rem(8px);
276+
padding-block-end: pad-block(rem(8px));
277277
} @else {
278278
margin: 0;
279279
}
@@ -362,7 +362,7 @@
362362
gap: rem(24px);
363363
position: relative;
364364
height: if($variant == 'indigo', rem(50px), rem(56px));
365-
padding-inline: if($variant == 'material', rem(24px), rem(16px));
365+
padding-inline: pad-inline(if($variant == 'material', rem(24px), rem(16px)));
366366
color: var-get($theme, 'picker-foreground');
367367
background: var-get($theme, 'picker-background');
368368

@@ -416,7 +416,7 @@
416416
cursor: pointer;
417417

418418
@if $variant == 'indigo' {
419-
padding: rem(5px);
419+
padding: pad(rem(5px));
420420
}
421421

422422
@if $bootstrap-theme {

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$variant: map.get($theme, '_meta', 'theme');
1111
$not-material-theme: $variant != 'material';
1212

13-
$card-heading-padding: rem(16px, 16px);
13+
$card-heading-padding: pad(rem(16px, 16px));
1414

1515
$card-tgroup-margin: 0 em(16px);
1616

@@ -125,7 +125,7 @@
125125
%igx-card-content {
126126
display: block;
127127
width: 100%;
128-
padding: rem(16px);
128+
padding: pad(rem(16px));
129129
color: var-get($theme, 'content-text-color');
130130
overflow: auto;
131131
}
@@ -150,10 +150,10 @@
150150

151151
%igx-card-actions {
152152
$card-actions-padding: map.get((
153-
'material': rem(8px) rem(16px),
154-
'fluent': rem(8px) rem(16px),
155-
'bootstrap': rem(16px),
156-
'indigo': rem(16px),
153+
'material': pad-block(rem(8px)) pad-inline(rem(16px)),
154+
'fluent': pad-block(rem(8px)) pad-inline(rem(16px)),
155+
'bootstrap': pad(rem(16px)),
156+
'indigo': pad(rem(16px)),
157157
), $variant);
158158

159159

@@ -181,17 +181,17 @@
181181

182182
@if $variant == 'bootstrap' {
183183
%igx-card-content {
184-
padding-block-end: rem(24px);
184+
padding-block-end: pad-block(rem(24px));
185185
}
186186
}
187187

188188
@if $variant == 'indigo' {
189189
%igx-card-content {
190-
padding-block-end: rem(8px);
190+
padding-block-end: pad-block(rem(8px));
191191
}
192192

193193
%igx-card-content:last-child {
194-
padding-block-end: rem(16px);
194+
padding-block-end: pad-block(rem(16px));
195195
}
196196

197197
%igx-card-header {
@@ -200,7 +200,7 @@
200200

201201
%igx-card-header:last-child,
202202
%igx-card-header:first-child {
203-
padding-block-end: rem(16px);
203+
padding-block-end: pad-block(rem(16px));
204204
}
205205
}
206206

‎projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
justify-content: center;
161161
align-items: center;
162162
margin: rem(16px) 0;
163-
padding: rem(4px) rem(6px);
163+
padding: pad-block(rem(4px)) pad-inline(rem(6px));
164164
gap: rem(8px);
165165
list-style: none;
166166
z-index: 10;
@@ -176,7 +176,7 @@
176176

177177
@if $variant == 'indigo' {
178178
gap: rem(4px);
179-
padding: rem(6px);
179+
padding: pad(rem(6px));
180180
}
181181
}
182182

@@ -207,7 +207,7 @@
207207
}
208208

209209
@if $variant == 'indigo' {
210-
padding: rem(4px) rem(6px);
210+
padding: pad-block(rem(4px)) pad-inline(rem(6px));
211211
min-width: rem(28px);
212212
}
213213
}
@@ -444,13 +444,13 @@
444444
transform: translateY(-50%);
445445
margin-block: 0;
446446
margin-inline-end: rem(29px);
447-
padding: rem(6px) rem(4px);
447+
padding: pad-block(rem(6px)) pad-inline(rem(4px));
448448
bottom: unset;
449449
}
450450

451451
%igx-carousel-label-indicator {
452452
margin-inline-end: rem(16px);
453-
padding: rem(4px) rem(6px);
453+
padding: pad-block(rem(4px)) pad-inline(rem(6px));
454454
}
455455

456456
%igx-carousel-indicators--start {
@@ -463,12 +463,12 @@
463463
@if $variant == 'indigo' {
464464
%igx-carousel-indicators {
465465
margin-inline-end: rem(16px);
466-
padding: rem(6px);
466+
padding: pad(rem(6px));
467467
}
468468

469469

470470
%igx-carousel-label-indicator {
471-
padding: rem(4px) rem(6px);
471+
padding: pad-block(rem(4px)) pad-inline(rem(6px));
472472
margin-inline-end: rem(16px);
473473
}
474474

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
height: $size;
100100

101101
@if $variant == 'material' {
102-
padding: rem(20px);
102+
padding: pad(rem(20px));
103103
}
104104

105105
//ripple color

‎projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
width: 100%;
4343

4444
@if $variant == 'indigo' {
45-
padding: rem(4px);
45+
padding: pad(rem(4px));
4646
gap: rem(8px);
4747
}
4848

@@ -107,10 +107,12 @@
107107
justify-content: center;
108108
text-align: center;
109109
height: var-get($theme, 'size');
110-
padding-inline: sizable(
111-
map.get($chip-padding, 'compact'),
112-
map.get($chip-padding, 'cosy'),
113-
map.get($chip-padding, 'comfortable')
110+
padding-inline: pad-inline(
111+
sizable(
112+
map.get($chip-padding, 'compact'),
113+
map.get($chip-padding, 'cosy'),
114+
map.get($chip-padding, 'comfortable')
115+
)
114116
);
115117

116118
gap: sizable(rem(3px), rem(6px), rem(8px));

‎projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
display: flex;
6767
align-items: center;
6868
justify-content: flex-end;
69-
padding: rem(8px);
69+
padding: pad(rem(8px));
7070
}
7171

7272
%date-picker__actions {
@@ -79,9 +79,9 @@
7979
justify-content: flex-end;
8080

8181
@if $variant == 'indigo' {
82-
padding: rem(8px) rem(16px);
82+
padding: pad-block(rem(8px)) pad-inline(rem(16px));
8383
} @else {
84-
padding: rem(8px);
84+
padding: pad(rem(8px));
8585
}
8686

8787
gap: rem(8px);

0 commit comments

Comments
 (0)