Skip to content

Commit

Permalink
refactor(tabs): Refactor tabs theme
Browse files Browse the repository at this point in the history 
Closes #3269
  • Loading branch information
MPopov committed Dec 10, 2018
1 parent f7d2db9 commit 11cedce
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 28 deletions.
87 changes: 62 additions & 25 deletions projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,17 @@
$button-hover-color: null,
$tab-ripple-color: null,
$button-ripple-color: null
$button-ripple-color: null,
$disable-shadow: true
) {
$name: 'igx-tabs';
$theme: apply-palette(map-get($schema, $name), $palette);

$tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));

@if not($item-text-color) and $item-background {
$item-text-color: text-contrast($item-background);
$item-text-color: rgba(text-contrast($item-background), .54);
}

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

@if not($item-active-icon-color) and $item-background {
$item-active-icon-color: text-contrast($item-background);
}

@if not($indicator-color) and $item-background {
$indicator-color: text-contrast($item-background);
}

@if not($item-active-color) and $item-active-icon-color {
$item-active-color: $item-active-icon-color;
}


// Button
@if not($button-color) and $item-background {
$button-color: text-contrast($item-background);
}

@if not($button-color) and $button-background {
$button-color: text-contrast($button-background);
}

@if not($button-color) and $item-background {
$button-background: rgba(text-contrast($item-background), 0);
}

@if not($button-hover-color) and $button-hover-background {
$button-hover-color: text-contrast($button-hover-background);
}

@if not($button-hover-background) and $item-background {
$button-hover-color: text-contrast($item-background);
}

@if not($button-background) and $item-background {
@if (lightness($item-background) > 50) {
$button-background: rgba(0, 0, 0, 0);
} @else {
$button-background: rgba(255, 255, 255 , .1);
}
}

@if not($button-hover-background) and $item-background {
@if (lightness($item-background) > 50) {
$button-hover-background: rgba(0, 0, 0, .05);
} @else {
$button-hover-background: rgba(255, 255, 255 , .14);
}
}

@if not($button-ripple-color) and $button-background {
@if (lightness($item-background) > 50) {
$button-ripple-color: rgba(0, 0, 0, .4);
} @else {
$button-ripple-color: rgba(255, 255, 255, .4);
}
}

// Button end

@if not($tab-ripple-color) and $item-active-background {
$tab-ripple-color: text-contrast($item-active-background);
}
Expand All @@ -103,9 +155,7 @@
$tab-ripple-color: text-contrast($item-background);
}

@if not($button-ripple-color) and $button-background {
$button-ripple-color: text-contrast($button-background);
}


@return extend($theme, (
name: $name,
Expand All @@ -124,6 +174,7 @@
button-hover-color:$button-hover-color,
tab-ripple-color: $tab-ripple-color,
button-ripple-color: $button-ripple-color,
tab-area-shadow: $tab-area-shadow,
));
}

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

$item-min-width-small-res: 74px;
$item-min-width: 160px;

$item-max-width: 264px;
$item-padding: 0 rem(24px);
$item-padding: 0 rem(16px);
$tabs-height: rem(48px);
$tabs-height-icon: rem(77px);
$tabs-height-icon: rem(72px);
$tabs-animation-function: cubic-bezier(.35, 0, .25, 1);
$icon-label-space: rem(10px);
$icon-label-space: rem(12px);

$tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color'));
$button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color'));
Expand All @@ -163,11 +211,7 @@
align-items: center;
overflow: hidden;
background: --var($theme, 'item-background');
}

// ITEM WRAPPER
%igx-tabs__content-fixed {
min-width: $item-max-width
box-shadow: --var($theme, 'tab-area-shadow');
}

%igx-tabs__content-fixed,
Expand Down Expand Up @@ -201,10 +245,6 @@
justify-content: center;
align-items: center;
min-width: $item-min-width;
@media only screen and (max-width: 600px) {
min-width: $item-min-width-small-res;
}
max-width: $item-max-width;
height: $tabs-height;
// Flex basis & shrink are Needed for IE11
flex-basis: auto;
Expand All @@ -213,7 +253,7 @@
overflow: hidden;
cursor: pointer;
position: relative;
transition: background .3s $tabs-animation-function;
transition: all .3s $tabs-animation-function;
user-select: none;
background: --var($theme, 'item-background');
color: --var($theme, 'item-text-color');
Expand Down Expand Up @@ -284,9 +324,6 @@
transform: translateX(0);
height: 2px;
min-width: $item-min-width;
@media only screen and (max-width: 600px) {
min-width: $item-min-width-small-res;
}
background: --var($theme, 'indicator-color');
transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;
}
Expand Down
8 changes: 7 additions & 1 deletion src/app/tabs/tabs.sample.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
width: 100%;
padding: 20px;
min-width: 250px;
margin-bottom: 30px;
}

.items-wrapper__item-small {
Expand All @@ -24,7 +25,12 @@
}

.my-tab-content {
padding: 0 15px;
padding: 15px;
}

.my-tab-content h3 {
font-size: 20px;
font-weight: 900;
}

.design-1 .my-tab-content {
Expand Down
143 changes: 141 additions & 2 deletions src/app/tabs/tabs.sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,101 @@ <h3>Tab 7 Content</h3>
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 8 Lorem ipsum dolor sit" icon="folder">
<div class="my-tab-content">
<h3>Second Tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="folder">
<div class="my-tab-content">
<h3>Tab 4 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 10" icon="folder">
<div class="my-tab-content">
<h3>Tab 7 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 11 Lorem ipsum dolor sit" icon="folder">
<div class="my-tab-content">
<h3>Second Tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="folder">
<div class="my-tab-content">
<h3>Tab 4 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 13" icon="folder">
<div class="my-tab-content">
<h3>Tab 7 Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 14 Lorem ipsum dolor sit" icon="folder">
<div class="my-tab-content">
<h3>Second Tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio. Praesent ante
lectus, porta a eleifend vel, sodales eu nisl. Vivamus sit amet purus eu lectus cursus rhoncus
quis non ex. Cras ac nulla sed arcu finibus volutpat. Vivamus risus ipsum, pharetra a augue nec,
euismod fringilla odio. Integer id velit rutrum, accumsan ante a, semper nunc. Phasellus ultrices
tincidunt imperdiet. Nullam vulputate mauris diam. Nullam elementum, libero vel varius fermentum,
lorem ex bibendum nulla, pretium lacinia erat nibh vel massa. In hendrerit, sapien ac mollis
iaculis, dolor tellus malesuada sem, a accumsan lectus nisl facilisis leo. Curabitur consequat
sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
</div>
</igx-tabs-group>
</igx-tabs>
</div>
<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
<h3 class="sample-title">Tabs with the same width (no scroll)</h3>
<h3 class="sample-title">Same size tabs</h3>
<igx-navbar title="Contacts" actionButtonIcon="menu">
<igx-icon>search</igx-icon>
<igx-icon>more_vert</igx-icon>
Expand Down Expand Up @@ -152,7 +243,7 @@ <h3 class="sample-title">Tabs with the same width (no scroll)</h3>
</igx-tabs>
</div>
<div class="items-wrapper__item items-wrapper__item-small">
<h3 class="sample-title">Tabs with the same width (with scroll)</h3>
<h3 class="sample-title">Same size tabs (with scroll)</h3>
<igx-tabs tabsType="fixed">
<igx-tabs-group label="Tab 1" icon="folder">
<div class="my-tab-content">
Expand Down Expand Up @@ -202,6 +293,54 @@ <h3>Notes</h3>
vulputate in quis nisl.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 5" icon="folder">
<div class="my-tab-content">
<h3>Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
vulputate in quis nisl.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 6" icon="folder">
<div class="my-tab-content">
<h3>Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
vulputate in quis nisl.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 7 Lorem ipsum dolor sit amet," icon="folder">
<div class="my-tab-content">
<h3>Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
vulputate in quis nisl.</p>
</div>
</igx-tabs-group>
<igx-tabs-group label="Tab 8" icon="folder">
<div class="my-tab-content">
<h3>Notes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec
consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum urna
arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. Donec efficitur
purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus a magna euismod
volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a arcu sollicitudin finibus.
Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. Mauris vel quam at velit venenatis
vulputate in quis nisl.</p>
</div>
</igx-tabs-group>
</igx-tabs>
</div>
<div class="items-wrapper__item items-wrapper__item-small">
Expand Down
6 changes: 6 additions & 0 deletions src/styles/igniteui-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,10 @@
.igniteui-logo__rocket {
fill: rgba(white, .38);
}

$my-tabs-theme: igx-tabs-theme(
$item-background: #000
);

@include igx-tabs($my-tabs-theme);
}

0 comments on commit 11cedce

Please sign in to comment.