Skip to content

Commit 11cedce

Browse files
author
MPopov
committed
refactor(tabs): Refactor tabs theme
Closes #3269
1 parent f7d2db9 commit 11cedce

File tree

4 files changed

+216
-28
lines changed

4 files changed

+216
-28
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,17 @@
6262
$button-hover-color: null,
6363
6464
$tab-ripple-color: null,
65-
$button-ripple-color: null
65+
$button-ripple-color: null,
66+
67+
$disable-shadow: true
6668
) {
6769
$name: 'igx-tabs';
6870
$theme: apply-palette(map-get($schema, $name), $palette);
6971

72+
$tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));
73+
7074
@if not($item-text-color) and $item-background {
71-
$item-text-color: text-contrast($item-background);
75+
$item-text-color: rgba(text-contrast($item-background), .54);
7276
}
7377

7478
@if not($item-hover-color) and $item-background {
@@ -83,18 +87,66 @@
8387
$item-active-icon-color: text-contrast($item-active-background);
8488
}
8589

90+
@if not($item-active-icon-color) and $item-background {
91+
$item-active-icon-color: text-contrast($item-background);
92+
}
93+
94+
@if not($indicator-color) and $item-background {
95+
$indicator-color: text-contrast($item-background);
96+
}
97+
8698
@if not($item-active-color) and $item-active-icon-color {
8799
$item-active-color: $item-active-icon-color;
88100
}
89101

102+
103+
// Button
104+
@if not($button-color) and $item-background {
105+
$button-color: text-contrast($item-background);
106+
}
107+
90108
@if not($button-color) and $button-background {
91109
$button-color: text-contrast($button-background);
92110
}
93111

112+
@if not($button-color) and $item-background {
113+
$button-background: rgba(text-contrast($item-background), 0);
114+
}
115+
94116
@if not($button-hover-color) and $button-hover-background {
95117
$button-hover-color: text-contrast($button-hover-background);
96118
}
97119

120+
@if not($button-hover-background) and $item-background {
121+
$button-hover-color: text-contrast($item-background);
122+
}
123+
124+
@if not($button-background) and $item-background {
125+
@if (lightness($item-background) > 50) {
126+
$button-background: rgba(0, 0, 0, 0);
127+
} @else {
128+
$button-background: rgba(255, 255, 255 , .1);
129+
}
130+
}
131+
132+
@if not($button-hover-background) and $item-background {
133+
@if (lightness($item-background) > 50) {
134+
$button-hover-background: rgba(0, 0, 0, .05);
135+
} @else {
136+
$button-hover-background: rgba(255, 255, 255 , .14);
137+
}
138+
}
139+
140+
@if not($button-ripple-color) and $button-background {
141+
@if (lightness($item-background) > 50) {
142+
$button-ripple-color: rgba(0, 0, 0, .4);
143+
} @else {
144+
$button-ripple-color: rgba(255, 255, 255, .4);
145+
}
146+
}
147+
148+
// Button end
149+
98150
@if not($tab-ripple-color) and $item-active-background {
99151
$tab-ripple-color: text-contrast($item-active-background);
100152
}
@@ -103,9 +155,7 @@
103155
$tab-ripple-color: text-contrast($item-background);
104156
}
105157

106-
@if not($button-ripple-color) and $button-background {
107-
$button-ripple-color: text-contrast($button-background);
108-
}
158+
109159

110160
@return extend($theme, (
111161
name: $name,
@@ -124,6 +174,7 @@
124174
button-hover-color:$button-hover-color,
125175
tab-ripple-color: $tab-ripple-color,
126176
button-ripple-color: $button-ripple-color,
177+
tab-area-shadow: $tab-area-shadow,
127178
));
128179
}
129180

@@ -139,16 +190,13 @@
139190
/// @requires --var
140191
@mixin igx-tabs($theme) {
141192
@include igx-root-css-vars($theme);
193+
$item-min-width: 90px;
142194

143-
$item-min-width-small-res: 74px;
144-
$item-min-width: 160px;
145-
146-
$item-max-width: 264px;
147-
$item-padding: 0 rem(24px);
195+
$item-padding: 0 rem(16px);
148196
$tabs-height: rem(48px);
149-
$tabs-height-icon: rem(77px);
197+
$tabs-height-icon: rem(72px);
150198
$tabs-animation-function: cubic-bezier(.35, 0, .25, 1);
151-
$icon-label-space: rem(10px);
199+
$icon-label-space: rem(12px);
152200

153201
$tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color'));
154202
$button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color'));
@@ -163,11 +211,7 @@
163211
align-items: center;
164212
overflow: hidden;
165213
background: --var($theme, 'item-background');
166-
}
167-
168-
// ITEM WRAPPER
169-
%igx-tabs__content-fixed {
170-
min-width: $item-max-width
214+
box-shadow: --var($theme, 'tab-area-shadow');
171215
}
172216

173217
%igx-tabs__content-fixed,
@@ -201,10 +245,6 @@
201245
justify-content: center;
202246
align-items: center;
203247
min-width: $item-min-width;
204-
@media only screen and (max-width: 600px) {
205-
min-width: $item-min-width-small-res;
206-
}
207-
max-width: $item-max-width;
208248
height: $tabs-height;
209249
// Flex basis & shrink are Needed for IE11
210250
flex-basis: auto;
@@ -213,7 +253,7 @@
213253
overflow: hidden;
214254
cursor: pointer;
215255
position: relative;
216-
transition: background .3s $tabs-animation-function;
256+
transition: all .3s $tabs-animation-function;
217257
user-select: none;
218258
background: --var($theme, 'item-background');
219259
color: --var($theme, 'item-text-color');
@@ -284,9 +324,6 @@
284324
transform: translateX(0);
285325
height: 2px;
286326
min-width: $item-min-width;
287-
@media only screen and (max-width: 600px) {
288-
min-width: $item-min-width-small-res;
289-
}
290327
background: --var($theme, 'indicator-color');
291328
transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;
292329
}

‎src/app/tabs/tabs.sample.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
width: 100%;
88
padding: 20px;
99
min-width: 250px;
10+
margin-bottom: 30px;
1011
}
1112

1213
.items-wrapper__item-small {
@@ -24,7 +25,12 @@
2425
}
2526

2627
.my-tab-content {
27-
padding: 0 15px;
28+
padding: 15px;
29+
}
30+
31+
.my-tab-content h3 {
32+
font-size: 20px;
33+
font-weight: 900;
2834
}
2935

3036
.design-1 .my-tab-content {

‎src/app/tabs/tabs.sample.html‎

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,101 @@ <h3>Tab 7 Content</h3>
9898
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
9999
</div>
100100
</igx-tabs-group>
101+
<igx-tabs-group label="Tab 8 Lorem ipsum dolor sit" icon="folder">
102+
<div class="my-tab-content">
103+
<h3>Second Tab</h3>
104+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
105+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
106+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
107+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
108+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
109+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
110+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
111+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
112+
</div>
113+
</igx-tabs-group>
114+
<igx-tabs-group label="Tab 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="folder">
115+
<div class="my-tab-content">
116+
<h3>Tab 4 Content</h3>
117+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
118+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
119+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
120+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
121+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
122+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
123+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
124+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
125+
</div>
126+
</igx-tabs-group>
127+
<igx-tabs-group label="Tab 10" icon="folder">
128+
<div class="my-tab-content">
129+
<h3>Tab 7 Content</h3>
130+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
131+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
132+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
133+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
134+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
135+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
136+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
137+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
138+
</div>
139+
</igx-tabs-group>
140+
<igx-tabs-group label="Tab 11 Lorem ipsum dolor sit" icon="folder">
141+
<div class="my-tab-content">
142+
<h3>Second Tab</h3>
143+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
144+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
145+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
146+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
147+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
148+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
149+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
150+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
151+
</div>
152+
</igx-tabs-group>
153+
<igx-tabs-group label="Tab 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="folder">
154+
<div class="my-tab-content">
155+
<h3>Tab 4 Content</h3>
156+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
157+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
158+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
159+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
160+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
161+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
162+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
163+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
164+
</div>
165+
</igx-tabs-group>
166+
<igx-tabs-group label="Tab 13" icon="folder">
167+
<div class="my-tab-content">
168+
<h3>Tab 7 Content</h3>
169+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
170+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
171+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
172+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
173+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
174+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
175+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
176+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
177+
</div>
178+
</igx-tabs-group>
179+
<igx-tabs-group label="Tab 14 Lorem ipsum dolor sit" icon="folder">
180+
<div class="my-tab-content">
181+
<h3>Second Tab</h3>
182+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
183+
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
184+
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
185+
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
186+
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
187+
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
188+
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
189+
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
190+
</div>
191+
</igx-tabs-group>
101192
</igx-tabs>
102193
</div>
103194
<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
104-
<h3 class="sample-title">Tabs with the same width (no scroll)</h3>
195+
<h3 class="sample-title">Same size tabs</h3>
105196
<igx-navbar title="Contacts" actionButtonIcon="menu">
106197
<igx-icon>search</igx-icon>
107198
<igx-icon>more_vert</igx-icon>
@@ -152,7 +243,7 @@ <h3 class="sample-title">Tabs with the same width (no scroll)</h3>
152243
</igx-tabs>
153244
</div>
154245
<div class="items-wrapper__item items-wrapper__item-small">
155-
<h3 class="sample-title">Tabs with the same width (with scroll)</h3>
246+
<h3 class="sample-title">Same size tabs (with scroll)</h3>
156247
<igx-tabs tabsType="fixed">
157248
<igx-tabs-group label="Tab 1" icon="folder">
158249
<div class="my-tab-content">
@@ -202,6 +293,54 @@ <h3>Notes</h3>
202293
vulputate in quis nisl.</p>
203294
</div>
204295
</igx-tabs-group>
296+
<igx-tabs-group label="Tab 5" icon="folder">
297+
<div class="my-tab-content">
298+
<h3>Notes</h3>
299+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
300+
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
301+
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
302+
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
303+
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
304+
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
305+
vulputate in quis nisl.</p>
306+
</div>
307+
</igx-tabs-group>
308+
<igx-tabs-group label="Tab 6" icon="folder">
309+
<div class="my-tab-content">
310+
<h3>Notes</h3>
311+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
312+
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
313+
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
314+
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
315+
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
316+
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
317+
vulputate in quis nisl.</p>
318+
</div>
319+
</igx-tabs-group>
320+
<igx-tabs-group label="Tab 7 Lorem ipsum dolor sit amet," icon="folder">
321+
<div class="my-tab-content">
322+
<h3>Notes</h3>
323+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
324+
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
325+
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
326+
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
327+
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
328+
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
329+
vulputate in quis nisl.</p>
330+
</div>
331+
</igx-tabs-group>
332+
<igx-tabs-group label="Tab 8" icon="folder">
333+
<div class="my-tab-content">
334+
<h3>Notes</h3>
335+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
336+
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
337+
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
338+
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
339+
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
340+
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
341+
vulputate in quis nisl.</p>
342+
</div>
343+
</igx-tabs-group>
205344
</igx-tabs>
206345
</div>
207346
<div class="items-wrapper__item items-wrapper__item-small">

‎src/styles/igniteui-theme.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,10 @@
3636
.igniteui-logo__rocket {
3737
fill: rgba(white, .38);
3838
}
39+
40+
$my-tabs-theme: igx-tabs-theme(
41+
$item-background: #000
42+
);
43+
44+
@include igx-tabs($my-tabs-theme);
3945
}

0 commit comments

Comments
 (0)