Skip to content

Commit c349d62

Browse files
adrianptrvadrianptrv
committed
chore(samples): format code
1 parent 19acc1c commit c349d62

16 files changed

Lines changed: 183 additions & 163 deletions

File tree

‎src/app/data-display/chip/chip-styling/chip-styling.component.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,14 @@ igx-chip {
3434
--focus-background: #4682af;
3535
}
3636

37-
igx-icon {
38-
--size: 0.75rem;
39-
}
40-
4137
// Sass theme approach
4238

4339
// $custom-chip-theme: chip-theme(
44-
// $background: #cd201f,
45-
// $text-color: #fff,
46-
// $hover-background: #cd201f,
47-
// $focus-background: #9f1717,
40+
// $background: #cd201f,
41+
// $text-color: #fff,
42+
// $hover-background: #cd201f,
43+
// $focus-background: #9f1717,
44+
// $border-radius: rem(5px)
4845
// );
4946

5047
// @include css-vars($custom-chip-theme)

‎src/app/data-display/chip/chip-styling/layout.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1+
@use "igniteui-angular/theming" as *;
2+
13
:host {
24
::ng-deep {
35
.igx-chip__item {
4-
height: 1.25rem;
5-
font-size: 0.75rem;
6+
height: rem(20px);
7+
font-size: rem(12px);
68
}
79
}
810
}
911

1012
igx-chip {
11-
margin-right: 0.5rem;
12-
margin-top: 1.25rem;
13+
margin-right: rem(8px);
14+
margin-top: rem(20px);
1315
}
1416

1517
igx-chips-area {
16-
margin-left: 1.25rem;
18+
margin-left: rem(20px);
19+
}
20+
21+
igx-icon {
22+
--size: #{rem(12px)};
1723
}

‎src/app/data-entries/buttons/buttons-style/buttons-style.component.scss‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -197,30 +197,20 @@ $list: (
197197
--active-background: transparent;
198198
}
199199

200-
.button-sample button {
201-
--ig-size: var(--ig-size-medium);
202-
padding: 0px rem(7px);
203-
min-width: unset;
204-
}
205-
206-
.button-sample .igx-button {
207-
--ig-font-family: 'alibaba-sans', sans-serif;
208-
}
209-
210200
// Sass theme approach
211201

212202
// $custom-button-theme: button-theme(
213-
// $background: #f9f0ff,
214-
// $foreground: #722ed1,
215-
// $border-color: #722ed1,
216-
// $hover-background: #efdbff,
217-
// $hover-foreground: #9254de,
218-
// $hover-border-color: #9254de,
219-
// $active-border-color: #531dab,
220-
// $active-foreground: #531dab,
221-
// $focus-visible-background: #f9f0ff,
203+
// $background: #f9f0ff,
204+
// $foreground: #722ed1,
205+
// $border-color: #722ed1,
206+
// $hover-background: #efdbff,
207+
// $hover-foreground: #9254de,
208+
// $hover-border-color: #9254de,
209+
// $active-border-color: #531dab,
210+
// $active-foreground: #531dab,
211+
// $focus-visible-background: #f9f0ff,
222212
// );
223213

224214
// .button-sample {
225-
// @include css-vars($custom-button-theme)
215+
// @include css-vars($custom-button-theme)
226216
// }

‎src/app/data-entries/buttons/buttons-style/layout.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
[class^=buttons-sample] {
1616
display: flex;
17-
margin: 1rem 0.5rem 0.5rem 1rem;
17+
margin: 1rem rem(8px) rem(8px) 1rem;
1818
}
1919

2020
.button-sample {
@@ -32,6 +32,16 @@
3232
[igxbutton] {
3333
--ig-button-font-weight: 400;
3434
--ig-button-text-transform: capitalize;
35-
min-height: 1.5rem;
35+
min-height: rem(24px);
3636
outline: rem(1px) solid #fff;
37+
}
38+
39+
.button-sample button {
40+
--ig-size: var(--ig-size-medium);
41+
padding: 0px rem(7px);
42+
min-width: unset;
43+
}
44+
45+
.button-sample .igx-button {
46+
--ig-font-family: 'alibaba-sans', sans-serif;
3747
}

‎src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,24 @@ igx-checkbox {
1010
--fill-color-hover: #e3f0ff;
1111
--label-color: #131e29;
1212
--focus-outline-color: #0032a5;
13-
--border-radius: 0.25rem;
14-
--ig-font-family: Arial, Helvetica, sans-serif;
15-
--ig-subtitle-1-font-size: 0.875rem;
13+
--border-radius: #{rem(4px)};
1614
}
1715

1816
igx-checkbox:hover {
1917
--empty-fill-color: #e3f0ff;
2018
}
2119

22-
#checkbox-1.igx-checkbox--focused:after {
23-
inset: 0.5rem -0.25rem 0.5rem 0.5rem;
24-
border-radius: 0.5rem;
25-
}
26-
2720
// Sass theme approach
2821

2922
// $custom-checkbox-theme: checkbox-theme(
30-
// $tick-color: #0064d9,
31-
// $tick-color-hover: #e3f0ff,
32-
// $fill-color: transparent,
33-
// $fill-color-hover: #e3f0ff,
34-
// $label-color: #131e29,
35-
// $focus-outline-color: #0032a5,
36-
// $empty-color: #131e29,
37-
// $border-radius: 0.25rem,
23+
// $tick-color: #0064d9,
24+
// $tick-color-hover: #e3f0ff,
25+
// $fill-color: transparent,
26+
// $fill-color-hover: #e3f0ff,
27+
// $label-color: #131e29,
28+
// $focus-outline-color: #0032a5,
29+
// $empty-color: #131e29,
30+
// $border-radius: rem(4px),
3831
// );
3932

4033
// @include css-vars($custom-checkbox-theme)

‎src/app/data-entries/checkbox/checkbox-styling/layout.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@include checkbox(checkbox-theme($schema: $_checkbox-schema));
99
@include checkbox.component();
1010

11-
// Note: This is not the standard approach for styling the component.
12-
// We're using it here solely to mirror the UI5 sample.
11+
// Note: This is not the standard approach for styling the component.
12+
// We're using it here solely to mirror the UI5 sample.
13+
1314
.igx-checkbox--checked .igx-checkbox__composite-wrapper .igx-checkbox__composite {
1415
border-color: var(--empty-color);
1516
}
1617

1718
.igx-checkbox__composite {
18-
min-width: 1.125rem;
19-
height: 1.125rem;
19+
min-width: rem(18px);
20+
height: rem(18px);
2021
}
2122

2223
.igx-checkbox--checked:hover .igx-checkbox__composite-wrapper .igx-checkbox__composite {
@@ -30,6 +31,14 @@
3031
}
3132

3233
igx-checkbox {
34+
--ig-font-family: Arial, Helvetica, sans-serif;
35+
--ig-subtitle-1-font-size: #{rem(14px)};
36+
3337
display: flex;
34-
margin: 1.25rem 0 0 1.25rem;
35-
}
38+
margin: rem(18px) 0 0 rem(18px);
39+
}
40+
41+
#checkbox-1.igx-checkbox--focused:after {
42+
inset: rem(8px) rem(-4px) rem(8px) rem(8px);
43+
border-radius: rem(8px);
44+
}

‎src/app/data-entries/input-group/input-group-styling/input-group-styling.component.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ igx-input-group {
1919
// Sass theme approach
2020

2121
// $custom-input-group: input-group-theme(
22-
// $border-color: #0f62fe,
23-
// $idle-bottom-line-color: #8d8d8d,
24-
// $hover-bottom-line-color: #8d8d8d,
25-
// $hover-placeholder-color: var(--ig-gray-700),
26-
// $idle-secondary-color: var(--ig-gray-700),
27-
// $focused-secondary-color: var(--ig-gray-700),
28-
// $size: #{rem(40px)},
29-
// $box-border-radius: 0,
30-
// $box-background-hover: var(--ig-gray-100),
31-
// $placeholder-color: var(--ig-gray-600)
22+
// $border-color: #0f62fe,
23+
// $idle-bottom-line-color: #8d8d8d,
24+
// $hover-bottom-line-color: #8d8d8d,
25+
// $hover-placeholder-color: var(--ig-gray-700),
26+
// $idle-secondary-color: var(--ig-gray-700),
27+
// $focused-secondary-color: var(--ig-gray-700),
28+
// $size: rem(40px),
29+
// $box-border-radius: 0,
30+
// $box-background-hover: var(--ig-gray-100),
31+
// $placeholder-color: var(--ig-gray-600)
3232
// );
3333

3434
// @include css-vars($custom-input-group);

‎src/app/data-entries/input-group/input-group-styling/layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,5 @@ igx-input-group {
4545

4646
.sample-column {
4747
max-width: rem(300px);
48-
margin-top: 1.5rem;
48+
margin-top: rem(24px);
4949
}

‎src/app/data-entries/radio/radio-styling-sample/layout.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,20 @@
1010

1111
// Note: This is not the standard approach for styling the component.
1212
// We're using it here solely to mirror the UI5 sample.
13+
1314
.igx-radio--checked .igx-radio__composite::after {
1415
--fill-color: #556b81;
1516
}
1617

1718
.igx-radio__composite::after,
1819
.igx-radio__composite::before,
1920
.igx-radio__composite {
20-
width: 1.125rem;
21-
height: 1.125rem;
21+
width: rem(18px);
22+
height: rem(18px);
2223
}
2324

2425
.igx-radio__composite {
25-
min-width: 1.125rem;
26+
min-width: rem(18px);
2627
}
2728

2829
.igx-radio__ripple {
@@ -35,8 +36,18 @@ igx-radio + igx-radio {
3536
margin-top: 1rem;
3637
}
3738

39+
igx-radio {
40+
--ig-subtitle-1-font-size: #{rem(14px)};
41+
--ig-font-family: Arial,Helvetica,sans-serif;
42+
}
43+
3844
.radio-wrapper {
3945
display: flex;
4046
flex-flow: column nowrap;
4147
padding: 1rem;
48+
}
49+
50+
.igx-radio--focused::after {
51+
inset: rem(1px) rem(-4px) rem(1px) rem(-2px);
52+
border-radius: rem(8px);
4253
}

‎src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ igx-radio {
88
--label-color: #131e29;
99
--fill-color: #0064d9;
1010
--focus-outline-color: #0032a5;
11-
--ig-subtitle-1-font-size: #{rem(14px)};
12-
--ig-font-family: Arial,Helvetica,sans-serif;
1311
}
1412

1513
igx-radio:hover {
@@ -18,20 +16,15 @@ igx-radio:hover {
1816
--hover-color: transparent;
1917
}
2018

21-
.igx-radio--focused::after {
22-
inset: rem(1px) rem(-4px) rem(1px) rem(-2px);
23-
border-radius: rem(8px);
24-
}
25-
2619
// Sass theme approach
2720

2821
// $custom-radio-theme: radio-theme(
29-
// $empty-color: #556b81,
30-
// $label-color: #131e29,
31-
// $fill-color: #0064d9,
32-
// $focus-outline-color: #0032a5,
33-
// $fill-color-hover: #0064d9,
34-
// $hover-color: transparent
22+
// $empty-color: #556b81,
23+
// $label-color: #131e29,
24+
// $fill-color: #0064d9,
25+
// $focus-outline-color: #0032a5,
26+
// $fill-color-hover: #0064d9,
27+
// $hover-color: transparent
3528
// );
3629

37-
// @include css-vars($custom-radio-theme);
30+
// @include css-vars($custom-radio-theme);

0 commit comments

Comments
 (0)