Skip to content

Commit 0e14814

Browse files
simeonoffsimeonoff
committed
Merge branch 'master' into elevation-schemas
2 parents 5629eae + 258aa9b commit 0e14814

File tree

68 files changed

+3468
-960
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+3468
-960
lines changed

‎CHANGELOG.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,36 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 8.1.0
6+
7+
### New Features
8+
- `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
9+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
10+
- You are allowed to customize tab items with labels, icons and even templates.
11+
- `IgxTabs` now supports an `igx-tab-item` declaration mode. When in this mode, groups declarations are not accepted and tab items' content is not rendered.
12+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
13+
- You are allowed to customize tab items with labels, icons and even templates.
14+
- `IgxGrid`
15+
- `IgxColumnGroup`
16+
- Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
17+
518
## 8.0.2
19+
- `igx-list-theme` now have some new parameters for styling.
20+
- $item-background-hover - Change The list item hover background
21+
- $item-text-color-hover - Change The list item hover text color.
22+
23+
- $item-subtitle-color - Change The list item subtitle color.
24+
- $item-subtitle-color-hover - Change The list item hover subtitle color.
25+
- $item-subtitle-color-active - Change The active list item subtitle color.
26+
27+
- $item-action-color - Change The list item actions color.
28+
- $item-action-color-hover - Change The list item hover actions color.
29+
- $item-action-color-active - Change The active list item actions color.
30+
31+
- $item-thumbnail-color - Change The list item thumbnail color.
32+
- $item-thumbnail-color-hover - Change The list item hover thumbnail color.
33+
- $item-thumbnail-color-active - Change The active list item thumbnail color.
34+
635
- **Behavioral Change** default min column width is changed according the grid display density property:
736
- for `DisplayDensity.comfortable` defaultMinWidth is `80px`;
837
- for `DisplayDensity.cosy` defaultMinWidth is `64px`;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
overflow: hidden;
132132
padding: $item-padding;
133133
-webkit-tap-highlight-color: transparent;
134+
outline: 0;
134135
}
135136

136137
%igx-bottom-nav-menu-item--disabled {

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,18 @@
5656
}
5757
}
5858

59+
@include e(thumb, $m: hovered) {
60+
.dot {
61+
@extend %igx-thumb-dot--active !optional;
62+
}
63+
}
64+
65+
@include e(thumb, $m: pressed) {
66+
.dot {
67+
@extend %igx-thumb-dot--pressed !optional;
68+
}
69+
}
70+
5971
@include m(disabled) {
6072
@extend %igx-slider-display !optional;
6173

@@ -77,6 +89,7 @@
7789
@each $t in $thumbs {
7890
@include e(thumb-#{$t}) {
7991
@extend %igx-thumb-display !optional;
92+
@extend %igx-thumb--disabled !optional;
8093

8194
.label {
8295
@extend %igx-thumb-label !optional;

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss‎

Lines changed: 112 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -75,23 +75,22 @@
7575
$slider-track-height: 2px;
7676

7777
// Slider Thumb
78-
$slider-thumb-width: 14px;
78+
$slider-thumb-width: 40px;
7979
$slider-thumb-height: $slider-thumb-width;
8080
$slider-thumb-radius: $slider-thumb-width / 2;
8181

8282
// Slider Label
83-
$slider-label-width: 28px;
83+
$slider-label-width: 36px;
8484
$slider-label-height: $slider-label-width;
8585
$slider-label-radius: $slider-label-width / 2;
86-
$slider-label-font-size: rem(11px);
86+
$slider-label-font-size: rem(12px);
8787
$slider-label-font-weight: 600;
88-
$slider-label-padding: 0 2px;
89-
$slider-background--start: #fff;
88+
$slider-label-padding: 0 rem(2px);
9089

9190
%igx-slider-display {
9291
display: flex;
9392
position: relative;
94-
height: $slider-height;
93+
height: rem($slider-height);
9594
align-items: center;
9695
}
9796

@@ -106,9 +105,9 @@
106105
%igx-slider-track {
107106
position: absolute;
108107
width: 100%;
109-
height: $slider-track-height;
108+
height: rem($slider-track-height);
110109
background: --var($theme, 'base-track-color');
111-
transition: background .2s ease;
110+
transition: background .2s $ease-out-quad;
112111
}
113112

114113
%igx-slider-track--disabled {
@@ -118,10 +117,10 @@
118117
%igx-slider-track-ticks {
119118
position: absolute;
120119
width: 100%;
121-
height: $slider-track-height;
122-
background-size: 100% $slider-track-height;
120+
height: rem($slider-track-height);
121+
background-size: 100% em($slider-track-height);
123122
opacity: .85;
124-
transition: opacity .2s ease;
123+
transition: opacity .2s $ease-out-quad;
125124
z-index: 1;
126125
}
127126

@@ -143,89 +142,146 @@
143142
}
144143

145144
%igx-thumb-display {
146-
display: flex;
147145
position: absolute;
146+
display: flex;
148147
justify-content: center;
149-
flex-flow: row nowrap;
150-
width: $slider-thumb-width;
151-
height: $slider-thumb-height;
152-
margin-left: -$slider-thumb-width / 2;
153-
top: -$slider-thumb-height / 2;
148+
align-items: center;
149+
flex-direction: column;
154150
outline: none;
151+
top: -#{rem($slider-thumb-radius)};
152+
margin-left: -#{rem($slider-thumb-radius)};
153+
154+
&:focus %igx-thumb-dot::after {
155+
opacity: .18;
156+
/* 32 / 40 */
157+
transform: scale(.8);
158+
}
159+
}
160+
161+
%igx-thumb--disabled {
162+
&:hover %igx-thumb-label {
163+
opacity: 0;
164+
}
155165
}
156166

157167
%igx-thumb-label {
168+
position: absolute;
158169
display: flex;
159-
position: relative;
160170
align-items: center;
161171
justify-content: center;
162172
flex: 0 0 auto;
163-
min-width: $slider-label-width;
164-
height: $slider-label-height;
173+
top: -#{rem($slider-thumb-height - 6px)};
174+
pointer-events: none;
175+
min-width: rem($slider-label-width);
176+
height: rem($slider-label-height);
165177
padding: $slider-label-padding;
166-
border-radius: $slider-label-radius;
167-
top: -36px;
178+
border-radius: rem($slider-label-radius);
179+
margin: 0 auto;
168180
font-size: $slider-label-font-size;
169181
font-weight: $slider-label-font-weight;
170-
line-height: $slider-label-font-size;
182+
line-height: 1;
171183
color: --var($theme, 'label-text-color');
172184
background: --var($theme, 'label-background-color');
173-
opacity: .5;
174-
transform: scale(0);
185+
opacity: 0;
175186
border-color: --var($theme, 'label-background-color') transparent transparent;
176-
transform-origin: 50% 150% 0;
177-
transition: transform .2s ease-out;
187+
transition: opacity .1s $ease-out-quad;
178188
z-index: -1;
179189

180190
&::after {
181191
content: '';
182192
position: absolute;
193+
top: 0;
183194
left: 50%;
184-
width: 0;
185-
height: 0;
186-
transform: translateX(-50%);
187-
border-left: 10px solid;
188-
border-right: 10px solid;
189-
border-top: 12px solid;
190-
border-color: inherit;
191-
top: 24px;
195+
margin-left: -#{$slider-label-radius};
196+
width: rem($slider-label-width);
197+
height: $slider-label-height;
198+
border-radius: 0 $slider-label-radius $slider-label-radius;
199+
background: inherit;
200+
transform: rotate(-135deg);
192201
z-index: -1;
193202
}
203+
204+
&::before {
205+
content: '';
206+
position: absolute;
207+
top: rem(40px);
208+
left: calc(50% - 1px);
209+
border-left: 1px solid;
210+
border-right: 1px solid;
211+
border-top: rem(14px) solid;
212+
border-color: inherit;
213+
}
194214
}
195215

196216
%igx-thumb-dot {
197-
position: absolute;
217+
position: relative;
198218
left: 0;
199-
width: inherit;
200-
height: inherit;
201-
border-radius: $slider-thumb-radius;
202-
background: --var($theme, 'thumb-color');
203-
transform: scale(1);
204-
transform-origin: 50% 50% 0;
205-
opacity: 1;
206-
transition: transform .2s ease-out;
219+
padding: rem(20px);
220+
221+
&:hover::after {
222+
opacity: .12;
223+
/* 32 / 40 */
224+
transform: scale(.8);
225+
}
226+
227+
&::before {
228+
position: absolute;
229+
content: '';
230+
width: rem(12px);
231+
height: rem(12px);
232+
left: #{rem($slider-thumb-radius) - rem(6px)};
233+
top: #{rem($slider-thumb-radius) - rem(6px)};
234+
background: --var($theme, 'thumb-color');
235+
transform: rotate(45deg);
236+
transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad;
237+
border-radius: rem($slider-thumb-radius);
238+
}
239+
240+
&::after {
241+
position: absolute;
242+
content: '';
243+
width: rem($slider-thumb-width);
244+
height: rem($slider-thumb-height);
245+
background: --var($theme, 'thumb-color');
246+
top: 0;
247+
left: 0;
248+
opacity: 0;
249+
transform: scale(0);
250+
transform-origin: center center;
251+
transition: transform .1s $ease-out-quad, opacity .1s $ease-out-quad;
252+
border-radius: 50%;
253+
}
207254
}
208255

209256
%igx-thumb-dot--disabled {
210-
background: --var($theme, 'disabled-thumb-color');
211-
transform: scale(.9);
212-
border: 2px solid transparent;
257+
pointer-events: none;
258+
259+
&::before {
260+
background: --var($theme, 'disabled-thumb-color');
261+
border-radius: rem($slider-thumb-radius);
262+
}
263+
264+
&::after {
265+
transform: scale(0);
266+
}
213267
}
214268

215269
%igx-thumb-dot--active {
216-
opacity: 0;
217-
transform: scale(0);
270+
&::before {
271+
border-radius: 0 $slider-thumb-radius $slider-thumb-radius;
272+
}
218273
}
219274

220-
%igx-thumb-label--active {
221-
opacity: .85;
222-
transform: scale(1.2);
275+
%igx-thumb-dot--pressed {
276+
&::after {
277+
opacity: .24 !important;
278+
/* 48 / 40 */
279+
transform: scale(1.2) !important;
280+
}
223281
}
224282

225-
%igx-thumb-dot--start,
226-
%igx-thumb-label--start {
227-
background: $slider-background--start;
228-
border-color: $slider-background--start transparent transparent;
283+
%igx-thumb-label--active {
284+
opacity: 1;
229285
}
230286

231287
%igx-thumb--active {

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_slider.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ $_light-slider: extend(
3232

3333

3434
label-background-color: (
35-
igx-color: ('secondary', 500)
35+
igx-color: ('secondary', 500),
36+
hexrgba: ()
3637
),
3738

3839
label-text-color: (
@@ -45,7 +46,8 @@ $_light-slider: extend(
4546
),
4647

4748
base-track-color: (
48-
igx-color: ('grays', 500)
49+
igx-color: ('secondary', 500),
50+
rgba: .24
4951
),
5052

5153
disabled-base-track-color: (

0 commit comments

Comments
 (0)