Skip to content

Commit abe209d

Browse files
adrianptrvadrianptrv
committed
feat(samples): add new calendar and input styling samples
1 parent 93edff8 commit abe209d

7 files changed

Lines changed: 382 additions & 50 deletions

File tree

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

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
<article class="sample-column">
2-
<igx-input-group type="box">
3-
<igx-prefix>+359</igx-prefix>
4-
<label igxLabel for="phone">Phone</label>
5-
<input type="tel" igxInput name="phone" />
6-
<igx-suffix>
7-
<igx-icon>phone</igx-icon>
8-
</igx-suffix>
9-
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
2+
<igx-input-group>
3+
<label igxLabel for="textField">Label text</label>
4+
<input placeholder="Placeholder text" type="text" igxInput name="textField" />
5+
<igx-hint position="start">Helper text</igx-hint>
106
</igx-input-group>
11-
12-
<igx-input-group type="border">
13-
<igx-prefix>+359</igx-prefix>
14-
<label igxLabel for="phone">Phone</label>
15-
<input type="tel" igxInput name="phone" />
16-
<igx-suffix>
17-
<igx-icon>phone</igx-icon>
18-
</igx-suffix>
19-
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
20-
</igx-input-group>
21-
</article>
7+
</article>

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

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
11
@use "layout.scss";
22
@use "igniteui-angular/theming" as *;
33

4-
.sample-column {
5-
gap: 1rem;
4+
// CSS variables approach
5+
6+
igx-input-group {
7+
--border-color: #0f62fe;
8+
--size: #{rem(40px)};
9+
--idle-bottom-line-color: #8d8d8d;
10+
--hover-bottom-line-color: #8d8d8d;
11+
--hover-placeholder-color: var(--ig-gray-600);
12+
--idle-secondary-color: var(--ig-gray-600);
13+
--focused-secondary-color: var(--ig-gray-700);
14+
--focused-bottom-line-color: #8d8d8d;
15+
--box-background-hover: var(--ig-gray-100);
16+
--helper-text-color: var(--ig-gray-600);
617
}
718

8-
$custom-input-group: input-group-theme(
9-
$border-color: #57a5cd,
10-
$filled-text-color: #288a54,
11-
$focused-text-color: #174f30,
12-
$idle-text-color: #288a54,
13-
$idle-bottom-line-color: #288a54,
14-
$hover-bottom-line-color: #288a54,
15-
$focused-secondary-color: #174f30,
16-
$box-background: #57a5cd
17-
);
19+
// Sass theme approach
1820

19-
@include css-vars($custom-input-group);
21+
// $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)
32+
// );
33+
34+
// @include css-vars($custom-input-group);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Component } from '@angular/core';
2-
import { IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular';
2+
import { IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective, THEME_TOKEN, ThemeToken } from 'igniteui-angular';
33

44
@Component({
55
selector: 'app-input-group-style',
66
templateUrl: 'input-group-styling.component.html',
77
styleUrls: ['input-group-styling.component.scss'],
8-
imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective]
8+
imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxHintDirective],
9+
providers: [{provide: THEME_TOKEN, useFactory: () => new ThemeToken('indigo')}]
910
})
1011
export class InputGroupStyleComponent { }

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

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,49 @@
1-
.sample-column {
2-
max-width: 550px;
1+
@use "igniteui-angular/theming" as *;
2+
@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input;
3+
@use "sass:map";
4+
5+
:host {
6+
::ng-deep {
7+
$_input-schema: map.get($light-indigo-schema, input-group);
8+
@include input-group(input-group-theme($schema: $_input-schema));
9+
@include input.component();
10+
11+
// Note: This is not the standard approach for styling the component.
12+
// We're using it here solely to mirror the Carbon sample.
13+
14+
.igx-input-group__bundle {
15+
background: var(--box-background-hover);
16+
17+
[igxinput].igx-input-group__input {
18+
letter-spacing: rem(0.16px);
19+
padding-block: 0;
20+
padding-inline: rem(12px);
21+
font-size: rem(14px);
22+
}
23+
24+
input::placeholder {
25+
font-size: rem(14px);
26+
font-style: normal;
27+
opacity: 0.7;
28+
font-weight: 300;
29+
font-family: "IBM Plex Sans", sans-serif;
30+
}
31+
}
32+
33+
.igx-input-group--focused .igx-input-group__bundle::after {
34+
border-block-end: 0;
35+
inset: 0;
36+
pointer-events: none;
37+
box-shadow: inset 0 0 0 rem(2px) var(--border-color);
38+
}
39+
}
40+
}
41+
42+
igx-input-group {
43+
--ig-font-family: "IBM Plex Sans", sans-serif;
344
}
45+
46+
.sample-column {
47+
max-width: rem(300px);
48+
margin-top: 1.5rem;
49+
}

‎src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<article class="calendar-wrapper">
2-
<igx-calendar [weekStart]="1"></igx-calendar>
3-
</article>
4-
2+
<igx-calendar [formatOptions]="{weekday: 'short'}" [hasHeader]="false"
3+
[showWeekNumbers]="true" [weekStart]="1"></igx-calendar>
4+
</article>

‎src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.scss‎

Lines changed: 166 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,170 @@
11
@use "layout.scss";
22
@use "igniteui-angular/theming" as *;
33

4-
$custom-calendar-theme: calendar-theme(
5-
$header-background: #ecaa53,
6-
$content-background: #011627,
7-
);
4+
// CSS variables approach
85

9-
@include css-vars($custom-calendar-theme);
6+
:host {
7+
::ng-deep {
8+
.igx-days-view__date--weekend:not(.igx-days-view__date--inactive) {
9+
--date-hover-background: var(--background-hover);
10+
--date-selected-foreground: var(--primary);
11+
--date-selected-background: #FFF;
12+
--date-selected-border-color: var(--primary);
13+
--date-selected-focus-foreground: var(--primary);
14+
--date-selected-focus-background: var(--background-hover);
15+
--date-selected-focus-border-color: var(--primary);
16+
--date-selected-hover-foreground: var(--primary);
17+
--date-selected-hover-background: var(--background-hover);
18+
--date-selected-hover-border-color: var(--primary);
19+
--date-selected-current-hover-background: var(--background-hover);
20+
--date-selected-current-focus-background: var(--background-hover);
21+
--date-selected-current-background: #FFF;
22+
--date-selected-current-border-color: var(--primary);
23+
--date-selected-current-hover-border-color: var(--primary);
24+
--date-current-hover-background: var(--background-hover);
25+
}
26+
}
27+
}
28+
29+
igx-calendar {
30+
--date-focus-background: transparent;
31+
--week-number-background: transparent;
32+
--weekend-color: #131E29;
33+
--weekday-color: #556B82;
34+
--week-number-foreground: #556B82;
35+
--inactive-color: #556B82;
36+
--date-current-border-color: var(--current-border);
37+
--date-current-hover-border-color: var(--current-border);
38+
--date-current-focus-border-color: var(--current-border);
39+
--date-current-hover-background: var(--background-weekend);
40+
--date-selected-current-border-color: var(--current-border);
41+
--date-selected-current-background: #FFF;
42+
--date-selected-current-foreground: var(--primary);
43+
--date-selected-current-focus-border-color: var(--current-border);
44+
--date-selected-current-focus-background: var(--background-weekend);
45+
--date-selected-current-focus-foreground: var(--primary);
46+
--date-selected-current-hover-border-color: var(--current-border);
47+
--date-selected-current-hover-background: var(--background-weekend);
48+
--date-selected-current-hover-foreground: var(--primary);
49+
--date-selected-foreground: var(--primary);
50+
--date-selected-background: #FFF;
51+
--date-selected-border-color: var(--primary);
52+
--date-selected-hover-foreground: var(--primary);
53+
--date-selected-hover-background: var(--background-weekend);
54+
--date-selected-hover-border-color: var(--primary);
55+
--date-selected-focus-foreground: var(--primary);
56+
--date-selected-focus-background: var(--background-weekend);
57+
--date-selected-focus-border-color: var(--primary);
58+
--picker-foreground: var(--primary);
59+
--picker-hover-foreground: var(--primary);
60+
--picker-focus-foreground: var(--primary);
61+
--ym-hover-background: var(--background);
62+
--ym-selected-background: #EDF5FF;
63+
--ym-selected-hover-background: #D9EAFF;
64+
--ym-selected-hover-foreground: var(--primary);
65+
--ym-selected-outline-color: var(--primary);
66+
--ym-selected-hover-outline-color: var(--primary);
67+
--ym-selected-focus-outline-color: var(--primary);
68+
--ym-selected-focus-background: #D9EAFF;
69+
--ym-current-foreground: var(--primary);
70+
--ym-current-background: transparent;
71+
--ym-current-outline-color: transparent;
72+
--ym-current-hover-foreground: var(--primary);
73+
--ym-current-hover-background: var(--background);
74+
--ym-current-outline-hover-color: var(--primary);
75+
--ym-selected-current-foreground: var(--primary);
76+
--ym-selected-current-background: #EDF5FF;
77+
--ym-selected-current-outline-color: var(--primary);
78+
--ym-selected-current-hover-foreground: var(--primary);
79+
--ym-selected-current-hover-background: #D9EAFF;
80+
--ym-selected-current-outline-hover-color: var(--primary);
81+
--ym-selected-current-outline-focus-color: var(--primary);
82+
}
83+
84+
// Sass theme approach
85+
86+
// $custom-calendar-theme-weekend: calendar-theme(
87+
// $date-hover-background: var(--background-hover),
88+
// $date-selected-foreground: var(--primary),
89+
// $date-selected-background: #FFF,
90+
// $date-selected-border-color: var(--primary),
91+
// $date-selected-focus-foreground: var(--primary),
92+
// $date-selected-focus-background: var(--background-hover),
93+
// $date-selected-focus-border-color: var(--primary),
94+
// $date-selected-hover-foreground: var(--primary),
95+
// $date-selected-hover-background: var(--background-hover),
96+
// $date-selected-hover-border-color: var(--primary),
97+
// $date-selected-current-hover-background: var(--background-hover),
98+
// $date-selected-current-focus-background: var(--background-hover),
99+
// $date-selected-current-background: #FFF,
100+
// $date-selected-current-border-color: var(--primary),
101+
// $date-selected-current-hover-border-color: var(--primary),
102+
// $date-current-hover-background: var(--background-hover)
103+
// );
104+
105+
// $custom-calendar-theme: calendar-theme(
106+
// $date-focus-background: transparent,
107+
// $picker-foreground: var(--primary),
108+
// $picker-hover-foreground: var(--primary),
109+
// $picker-focus-foreground: var(--primary),
110+
// $weekday-color: #556B82,
111+
// $weekend-color: #131E29,
112+
// $inactive-color: #556B82,
113+
// $week-number-foreground: #556B82,
114+
// $week-number-background: transparent,
115+
// $ym-selected-current-hover-foreground: var(--primary),
116+
// $ym-selected-current-hover-background: #D9EAFF,
117+
// $ym-hover-background: var(--background),
118+
// $ym-current-foreground: var(--primary),
119+
// $ym-current-background: transparent,
120+
// $ym-current-hover-foreground: var(--primary),
121+
// $ym-current-hover-background: var(--background),
122+
// $ym-selected-current-foreground: var(--primary),
123+
// $ym-selected-current-background: #EDF5FF,
124+
// $ym-selected-background: #EDF5FF,
125+
// $ym-selected-hover-foreground: var(--primary),
126+
// $ym-selected-hover-background: #D9EAFF,
127+
// $ym-current-outline-color: transparent,
128+
// $ym-current-outline-hover-color: var(--primary),
129+
// $ym-selected-outline-color: var(--primary),
130+
// $ym-selected-hover-outline-color: var(--primary),
131+
// $ym-selected-focus-outline-color: var(--primary),
132+
// $ym-selected-current-outline-color: var(--primary),
133+
// $ym-selected-current-outline-hover-color: var(--primary),
134+
// $ym-selected-current-outline-focus-color: var(--primary),
135+
// $date-selected-current-foreground: var(--primary),
136+
// $date-selected-current-background: #FFF,
137+
// $date-selected-current-hover-foreground: var(--primary),
138+
// $date-selected-current-hover-background: var(--background-weekend),
139+
// $date-selected-current-focus-foreground: var(--primary),
140+
// $date-selected-current-focus-background: var(--background-weekend),
141+
// $date-selected-foreground: var(--primary),
142+
// $date-selected-background: #FFF,
143+
// $date-selected-border-color: var(--primary),
144+
// $date-selected-hover-foreground: var(--primary),
145+
// $date-selected-hover-background: var(--background-weekend),
146+
// $date-selected-hover-border-color: var(--primary),
147+
// $date-selected-focus-foreground: var(--primary),
148+
// $date-selected-focus-background: var(--background-weekend),
149+
// $date-selected-focus-border-color: var(--primary),
150+
// $date-current-border-color: var(--current-border),
151+
// $date-current-hover-border-color: var(--current-border),
152+
// $date-current-focus-border-color: var(--current-border),
153+
// $date-selected-current-border-color: var(--current-border),
154+
// $date-selected-current-hover-border-color: var(--current-border),
155+
// $date-selected-current-focus-border-color: var(--current-border),
156+
// $date-current-hover-background: var(--background-weekend),
157+
// $border-radius: 0.5rem,
158+
// );
159+
160+
// :host {
161+
// ::ng-deep {
162+
// .igx-days-view__date--weekend:not(.igx-days-view__date--inactive) {
163+
// @include css-vars($custom-calendar-theme-weekend);
164+
// }
165+
// }
166+
// }
167+
168+
// igx-calendar {
169+
// @include css-vars($custom-calendar-theme);
170+
// }

0 commit comments

Comments
 (0)