Skip to content

Commit 7d5252c

Browse files
SisIvanovaSisIvanova
committed
refactor(input-group): design updates
1 parent b2ec51b commit 7d5252c

File tree

4 files changed

+93
-75
lines changed

4 files changed

+93
-75
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
'material': pad-inline(rem(4px), rem(8px), rem(16px)),
1414
'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
1515
'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
16-
'indigo': pad-inline(rem(12px))
16+
'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
1717
), $variant);
1818

1919
$search-input-block-padding: map.get((
@@ -73,6 +73,16 @@
7373
igx-input-group {
7474
--theme: #{if($variant == 'indigo', 'indigo', 'material')};
7575
--ig-size: #{if($variant == 'indigo', 2, 1)};
76+
77+
@if $variant == 'bootstrap' or $variant == 'indigo' {
78+
input {
79+
height: rem(28px);
80+
}
81+
} @else if $variant == 'fluent' {
82+
input {
83+
height: rem(32px);
84+
}
85+
}
7686
}
7787
}
7888

@@ -151,6 +161,18 @@
151161
%igx-combo__search {
152162
--igx-input-group-input-suffix-background: transparent;
153163
--igx-input-group-input-suffix-background--focused: transparent;
164+
165+
.igx-input-group__bundle::after {
166+
border-block-end-color: var(--border-color);
167+
}
168+
169+
.igx-input-group__bundle:hover::after {
170+
border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
171+
}
172+
173+
.igx-input-group--focused .igx-input-group__bundle::after {
174+
border-block-end-color: var(--focused-bottom-line-color);
175+
}
154176
}
155177
}
156178

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,18 @@
5757
}
5858

5959
/// Adds typography styles for the igx-date-range-picker component.
60-
/// Uses the 'subtitle-1'
60+
/// Uses the 'caption'
6161
/// categories from the typographic scale.
6262
/// @group typography
63-
/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
63+
/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
6464
@mixin date-range-typography(
6565
$categories: (
66-
label: 'subtitle-1',
66+
label: 'caption',
6767
)
6868
) {
6969
$label: map.get($categories, 'label');
7070

71-
%igx-date-range__label {
71+
%igx-date-range-picker__label {
7272
@include type-style($label);
7373
}
7474
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 63 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,13 @@
1616
$indigo-theme: $variant == 'indigo';
1717
$fluent-theme: $variant == 'fluent';
1818
$bootstrap-theme: $variant == 'bootstrap';
19-
$NOT-material-theme: $variant != 'material';
20-
$NOT-indigo-theme: $variant != 'indigo';
21-
$NOT-fluent-theme: $variant != 'fluent';
22-
$NOT-bootstrap-theme: $variant != 'bootstrap';
2319

2420
$required-symbol: '*';
2521
$required-symbol-margin: rem(2px);
2622

27-
// This creates an inverse relationship
28-
// between the value of the base scale size and
29-
// the sizing of all inner elements.
30-
// i.e. the bigger the scale size,
31-
// the smaller the padding of the inner items.
32-
$base-scale-size: (
33-
'comfortable': 16px,
34-
'cosy': 19px,
35-
'compact': 22px
36-
);
37-
3823
$bootstrap-inline-padding: (
39-
'comfortable': rem(16px),
40-
'cosy': rem(12px),
24+
'comfortable': rem(14px),
25+
'cosy': rem(10px),
4126
'compact': rem(8px)
4227
);
4328

@@ -50,12 +35,6 @@
5035
$input-top-padding: rem(20px);
5136
$input-bottom-padding: rem(6px);
5237

53-
$bundle-padding-top: (
54-
'comfortable': rem(18px, map.get($base-scale-size, 'comfortable')),
55-
'cosy': rem(18px, map.get($base-scale-size, 'cosy')),
56-
'compact': rem(18px, map.get($base-scale-size, 'compact')),
57-
);
58-
5938
$hint-spacing-block: map.get((
6039
'material': rem(4px),
6140
'fluent': rem(5px),
@@ -64,7 +43,7 @@
6443
), $variant);
6544

6645
$hint-spacing-inline: map.get((
67-
'material': sizable(rem(14px), rem(16px), rem(18px)),
46+
'material': sizable(rem(12px), rem(14px), rem(16px)),
6847
'fluent': 0,
6948
'bootstrap': 0,
7049
'indigo': 0,
@@ -77,6 +56,23 @@
7756
'indigo': rem(15px),
7857
), $variant);
7958

59+
$material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
60+
$material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
61+
62+
$textarea-top-padding: map.get((
63+
'material': rem(0px),
64+
'fluent': sizable(rem(6px), rem(10px), rem(14px)),
65+
'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
66+
'indigo': sizable(rem(4px), rem(6px), rem(8px)),
67+
), $variant);
68+
69+
$textarea-font: map.get((
70+
'material': 'var(--ig-subtitle-1-line-height)',
71+
'fluent': 'var(--ig-body-2-line-height)',
72+
'bootstrap': 'var(--ig-body-1-line-height)',
73+
'indigo': 'var(--ig-body-2-line-height)',
74+
), $variant);
75+
8076
// Base Start
8177
%form-group-prefix--upload {
8278
padding: 0;
@@ -115,7 +111,7 @@
115111
} @else if $indigo-theme {
116112
padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
117113
} @else {
118-
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
114+
padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
119115
}
120116
}
121117
}
@@ -149,7 +145,7 @@
149145
@include sizable();
150146
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
151147
--input-size: var(--component-size);
152-
--input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
148+
--input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
153149

154150
position: relative;
155151
display: block;
@@ -869,7 +865,7 @@
869865

870866
@if $variant == 'material' {
871867
overflow: hidden;
872-
min-width: pad(rem(10px), rem(12px), rem(14px));
868+
min-width: pad(rem(8px), rem(10px), rem(12px));
873869
}
874870
}
875871

@@ -1227,7 +1223,7 @@
12271223
%form-group-textarea-label:not(%textarea-group-label--focused) {
12281224
@include type-style('subtitle-1');
12291225

1230-
top: calc($input-top-padding - #{rem(3px)});
1226+
top: calc(#{$material-box-top-padding} - #{rem(3px)});
12311227
transform: translateY(0);
12321228
margin-bottom: auto;
12331229
}
@@ -1244,13 +1240,9 @@
12441240
}
12451241

12461242
%form-group-textarea-group-bundle {
1247-
// 3 lines * 22px + 8px bottom padding + 8px top padding
1248-
--textarea-size: #{sizable(
1249-
rem(82px, map.get($base-scale-size, 'compact')),
1250-
rem(82px, map.get($base-scale-size, 'cosy')),
1251-
rem(82px, map.get($base-scale-size, 'comfortable'))
1252-
)};
1253-
min-height: var(--textarea-size) !important;
1243+
// 3 lines of text + top padding
1244+
--textarea-height: calc((#{$textarea-font} * 3) + #{$textarea-top-padding});
1245+
min-height: var(--textarea-height) !important;
12541246
height: auto !important;
12551247

12561248
%form-group-label {
@@ -1260,25 +1252,25 @@
12601252

12611253
@if $material-theme {
12621254
%form-group-textarea-label {
1263-
top: calc($input-top-padding - #{rem(1px)});
1255+
top: calc(#{$material-box-top-padding} - #{rem(1px)});
12641256
margin-block-end: auto;
12651257
}
12661258

12671259
%textarea-group--outlined {
12681260
%form-group-textarea-label {
1269-
top: calc($input-top-padding - #{rem(3px)});
1261+
top: calc(#{$material-border-top-padding} - #{rem(3px)});
12701262
}
12711263
}
12721264

12731265
%textarea-group--box {
12741266
%form-group-textarea-label {
1275-
top: calc($input-top-padding - #{rem(2px)});
1267+
top: calc(#{$material-box-top-padding} - #{rem(2px)});
12761268
}
12771269
}
12781270

12791271
%textarea-group-label--focused {
12801272
transform: translateY(0);
1281-
top: calc(#{$input-top-padding} / 4);
1273+
top: calc(#{$material-box-top-padding} / 4);
12821274
}
12831275

12841276
%textarea-group-label--filled--border,
@@ -1336,7 +1328,7 @@
13361328
overflow: hidden;
13371329
text-overflow: ellipsis;
13381330

1339-
&:not([type='date']) {
1331+
&:not(%form-group-textarea, [type='date']) {
13401332
line-height: 0 !important; /* Reset typography */
13411333
}
13421334

@@ -1450,29 +1442,18 @@
14501442
}
14511443

14521444
%form-group-textarea {
1453-
--textarea-size: #{sizable(
1454-
rem(82px, map.get($base-scale-size, 'compact')),
1455-
rem(82px, map.get($base-scale-size, 'cosy')),
1456-
rem(82px, map.get($base-scale-size, 'comfortable'))
1457-
)};
1445+
--textarea-height: calc((#{$textarea-font} * 3) + #{$textarea-top-padding});
14581446

1459-
min-height: var(--textarea-size);
1447+
min-height: var(--textarea-height);
14601448
height: auto;
14611449
resize: vertical;
14621450
overflow: hidden;
1451+
z-index: 1;
14631452

14641453
@if $material-theme {
14651454
padding: 0;
1466-
inset-block-start: rem(-3px);
1467-
}
1468-
1469-
// resets typography styles
1470-
line-height: normal !important;
1471-
1472-
z-index: 1;
1473-
1474-
&:not([type='*']) {
1475-
line-height: normal !important; /* resets typography styles */
1455+
// to be fixed
1456+
inset-block-start: rem(-2px);
14761457
}
14771458
}
14781459

@@ -1485,7 +1466,13 @@
14851466
}
14861467

14871468
@if $material-theme {
1488-
padding-block-start: $input-top-padding;
1469+
padding-block-start: #{$material-box-top-padding};
1470+
}
1471+
}
1472+
1473+
%textarea-group--outlined {
1474+
%form-group-textarea-group-bundle-main {
1475+
padding-block-start: #{$material-border-top-padding};
14891476
}
14901477
}
14911478

@@ -1643,7 +1630,6 @@
16431630
display: grid;
16441631
grid-auto-rows: minmax($hint-min-size, auto);
16451632
padding-inline: pad-inline($hint-spacing-inline);
1646-
16471633
justify-content: space-between;
16481634

16491635
> * {
@@ -1670,18 +1656,19 @@
16701656
}
16711657

16721658
%form-group-helper-item {
1673-
display: flex;
1659+
@include line-clamp(2, true, true);
1660+
16741661
align-items: center;
16751662
position: relative;
16761663
}
16771664

1678-
%form-group-helper-item--start {
1679-
justify-content: flex-start;
1680-
}
1665+
// %form-group-helper-item--start {
1666+
// justify-content: flex-start;
1667+
// }
16811668

1682-
%form-group-helper-item--end {
1683-
justify-content: flex-end;
1684-
}
1669+
// %form-group-helper-item--end {
1670+
// justify-content: flex-end;
1671+
// }
16851672

16861673
%form-group-helper-item--start,
16871674
%form-group-helper-item--end {
@@ -1710,7 +1697,9 @@
17101697
[igxPrefix],
17111698
igx-suffix,
17121699
[igxSuffix] {
1713-
padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
1700+
&:not(:empty) {
1701+
padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
1702+
}
17141703
}
17151704
}
17161705

@@ -2014,13 +2003,14 @@
20142003
}
20152004

20162005
%indigo-textarea {
2017-
padding-block: rem(6px);
2006+
padding-block: $textarea-top-padding 0;
20182007
padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
20192008
inset-block-end: rem(2px);
20202009
}
20212010

20222011
%fluent-textarea {
2023-
padding: rem(8px);
2012+
padding-inline: pad-inline(rem(8px));
2013+
padding-block: $textarea-top-padding 0;
20242014
}
20252015

20262016
%fluent-input-disabled {
@@ -2113,7 +2103,7 @@
21132103
%form-group-prefix-fluent-search,
21142104
%form-group-suffix-fluent-search {
21152105
&:not(:empty) {
2116-
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
2106+
padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
21172107
}
21182108
}
21192109

@@ -2299,6 +2289,10 @@
22992289
map.get($bootstrap-inline-padding, 'cosy'),
23002290
map.get($bootstrap-inline-padding, 'comfortable')
23012291
);
2292+
2293+
&:is(textarea) {
2294+
padding-block: $textarea-top-padding 0;
2295+
}
23022296
}
23032297

23042298
// The :not selector is needed otherwise bootstrap will override the %autofill-background-fix

‎projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@
5959
));
6060
@include chip-typography();
6161
@include column-actions-typography();
62-
@include date-range-typography();
62+
@include date-range-typography($categories: (
63+
label: 'body-1',
64+
));
6365
@include dialog-typography($categories: (
6466
title: 'h5',
6567
content: 'body-1'

0 commit comments

Comments
 (0)