Skip to content

Commit cf93129

Browse files
SisIvanovaSisIvanova
authored
refactor(time-picker): bundle styles with component (#16418)
1 parent a0b7ec0 commit cf93129

File tree

15 files changed

+299
-11
lines changed

15 files changed

+299
-11
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,10 @@
109109
label: 'body-1'
110110
));
111111
//@include tabs-typography();
112-
@include time-picker-typography($categories: (
113-
header-hour: 'h4',
114-
selected-time: 'h4'
115-
));
112+
// @include time-picker-typography($categories: (
113+
// header-hour: 'h4',
114+
// selected-time: 'h4'
115+
// ));
116116
//@include stepper-typography();
117117
// @include toast-typography();
118118
@include tooltip-typography();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
//@include tabs-typography($categories: (
115115
// label: 'body-2'
116116
//));
117-
@include time-picker-typography();
117+
// @include time-picker-typography();
118118
//@include stepper-typography();
119119
// @include toast-typography($categories: (
120120
// text: 'caption'

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,10 @@
111111
//)) {
112112
// --ig-subtitle-2-text-transform: uppercase;
113113
//};
114-
@include time-picker-typography($categories: (
115-
header-hour: 'h5',
116-
selected-time: 'h6'
117-
));
114+
// @include time-picker-typography($categories: (
115+
// header-hour: 'h5',
116+
// selected-time: 'h6'
117+
// ));
118118
//@include stepper-typography($categories: (
119119
// title: 'body-2',
120120
// subtitle: 'caption',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
// @include snackbar-typography();
6363
@include switch-typography();
6464
//@include tabs-typography();
65-
@include time-picker-typography();
65+
// @include time-picker-typography();
6666
//@include stepper-typography();
6767
// @include toast-typography();
6868
@include tooltip-typography();

‎projects/igniteui-angular/src/lib/time-picker/themes/_base.scss‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
@use 'sass:map';
2+
@use 'igniteui-theming/sass/bem' as *;
3+
@use 'igniteui-theming/sass/themes' as *;
4+
@use 'igniteui-theming/sass/typography' as *;
5+
@use 'styles/themes/standalone' as *;
6+
@use './light/tokens' as *;
7+
8+
$theme: $material;
9+
10+
@include layer(base) {
11+
@include b(igx-time-picker) {
12+
@include sizable();
13+
14+
--component-size: var(--ig-size, #{var-get($theme, 'default-size')});
15+
16+
display: flex;
17+
flex-flow: column nowrap;
18+
border-radius: var-get($theme, 'border-radius');
19+
box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'),
20+
var-get($theme, 'modal-elevation');
21+
background: var-get($theme, 'background-color');
22+
overflow: hidden;
23+
min-width: fit-content;
24+
25+
igx-divider {
26+
--igx-divider-color: #{var-get($theme, 'divider-color')};
27+
}
28+
29+
@include e(header) {
30+
display: flex;
31+
flex-direction: column;
32+
background: var-get($theme, 'header-background');
33+
padding: rem(16px);
34+
}
35+
36+
@include e(header-hour) {
37+
@include type-style(h4);
38+
39+
display: flex;
40+
color: var-get($theme, 'header-hour-text-color');
41+
margin: 0;
42+
43+
[dir='rtl'] & {
44+
flex-direction: row-reverse;
45+
justify-content: flex-end;
46+
}
47+
}
48+
49+
@include e(main) {
50+
flex: 1 1 auto;
51+
}
52+
53+
@include e(column) {
54+
width: rem(64px);
55+
padding: 0;
56+
cursor: pointer;
57+
display: flex;
58+
flex-flow: column nowrap;
59+
justify-content: space-between;
60+
align-items: center;
61+
color: var-get($theme, 'text-color');
62+
overflow: hidden;
63+
gap: rem(4px);
64+
65+
&:focus,
66+
&:active {
67+
outline: none;
68+
}
69+
}
70+
71+
@include e(item) {
72+
width: rem(46px);
73+
padding: pad-block(rem(5px)) pad-inline(rem(10px));
74+
border-radius: var-get($theme, 'active-item-border-radius');
75+
height: var-get($theme, 'time-item-size');
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
font-size: sizable(var(--ig-body-2-font-size), var(--ig-body-2-font-size), var(--ig-body-1-font-size));
80+
font-weight: sizable(var(--ig-body-2-font-weight), var(--ig-body-2-font-weight), var(--ig-body-1-font-weight));
81+
font-style: sizable(var(--ig-body-2-font-style), var(--ig-body-2-font-style), var(--ig-body-1-font-style));
82+
line-height: sizable(var(--ig-body-2-line-height), var(--ig-body-2-line-height), var(--ig-body-1-line-height));
83+
letter-spacing: sizable(var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-1-letter-spacing));
84+
text-transform: sizable(var(--ig-body-2-text-transform), var(--ig-body-2-text-transform), var(--ig-body-1-text-transform));
85+
86+
&:focus,
87+
&:active {
88+
outline: none;
89+
}
90+
91+
&:hover {
92+
color: var-get($theme, 'hover-text-color');
93+
}
94+
}
95+
96+
@include e(item, $m: selected) {
97+
@include type-style(h5);
98+
99+
margin: 0;
100+
color: var-get($theme, 'selected-text-color');
101+
}
102+
103+
@include e(item, $m: active) {
104+
color: var-get($theme, 'active-item-foreground');
105+
background: var-get($theme, 'active-item-background');
106+
107+
&:hover,
108+
&:focus {
109+
color: var-get($theme, 'active-item-foreground');
110+
}
111+
}
112+
113+
@include e(item, $m: disabled) {
114+
color: var-get($theme, 'disabled-text-color');
115+
background: var-get($theme, 'disabled-item-background');
116+
pointer-events: none;
117+
}
118+
119+
@include e(hourList) {
120+
text-align: end;
121+
122+
[dir='rtl'] & {
123+
order: 2;
124+
}
125+
}
126+
127+
@include e(minuteList) {
128+
text-align: center;
129+
130+
[dir='rtl'] & {
131+
order: 1;
132+
}
133+
}
134+
135+
@include e(secondsList) {
136+
text-align: center;
137+
}
138+
139+
@include e(ampmList) {
140+
[dir='rtl'] & {
141+
order: 3;
142+
}
143+
}
144+
145+
@include e(body) {
146+
display: flex;
147+
min-width: sizable(rem(290px), rem(314px), rem(360px));
148+
padding-block: rem(16px);
149+
justify-content: center;
150+
}
151+
152+
@include e(buttons) {
153+
display: flex;
154+
min-height: sizable(rem(40px), rem(44px), rem(48px));
155+
justify-content: flex-end;
156+
align-items: center;
157+
padding: rem(8px);
158+
gap: rem(8px);
159+
}
160+
161+
@include m(dropdown) {
162+
min-width: sizable(rem(290px), rem(314px), rem(360px));
163+
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'),
164+
var-get($theme, 'dropdown-elevation');
165+
166+
@include e(body) {
167+
min-width: auto;
168+
}
169+
}
170+
171+
@include m(vertical) {
172+
@include e(main) {
173+
display: flex;
174+
flex-grow: 1;
175+
}
176+
177+
@include e(header) {
178+
min-width: rem(168px);
179+
}
180+
181+
@include e(body) {
182+
flex-grow: 1;
183+
}
184+
185+
@include e(buttons) {
186+
align-items: flex-end;
187+
}
188+
}
189+
}
190+
}

‎projects/igniteui-angular/src/lib/time-picker/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-time-picker, $tokens, dark);

‎projects/igniteui-angular/src/lib/time-picker/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/time-picker' as *;
3+
4+
$material: digest-schema($dark-material-time-picker);
5+
$bootstrap: digest-schema($dark-bootstrap-time-picker);
6+
$fluent: digest-schema($dark-fluent-time-picker);
7+
$indigo: digest-schema($dark-indigo-time-picker);

‎projects/igniteui-angular/src/lib/time-picker/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-time-picker, $tokens, light);

‎projects/igniteui-angular/src/lib/time-picker/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/time-picker' as *;
3+
4+
$base: digest-schema($light-time-picker);
5+
$material: digest-schema($material-time-picker);
6+
$bootstrap: digest-schema($bootstrap-time-picker);
7+
$fluent: digest-schema($fluent-time-picker);
8+
$indigo: digest-schema($indigo-time-picker);

‎projects/igniteui-angular/src/lib/time-picker/themes/shared/_bootstrap.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/typography' as *;
3+
@use 'styles/themes/standalone' as *;
4+
5+
@include themed-block(igx-time-picker, bootstrap) {
6+
@include e(item, $m: selected) {
7+
@include type-style(h4);
8+
9+
margin: 0;
10+
}
11+
}

0 commit comments

Comments
 (0)