From 11cedce3c4a8836afade3e770c34b83bf0045354 Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 10 Dec 2018 14:47:00 +0200 Subject: [PATCH] refactor(tabs): Refactor tabs theme Closes #3269 --- .../styles/components/tabs/_tabs-theme.scss | 87 ++++++++--- src/app/tabs/tabs.sample.css | 8 +- src/app/tabs/tabs.sample.html | 143 +++++++++++++++++- src/styles/igniteui-theme.scss | 6 + 4 files changed, 216 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 217c4ba1462..1814cb34411 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -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 { @@ -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); } @@ -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, @@ -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, )); } @@ -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')); @@ -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, @@ -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; @@ -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'); @@ -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; } diff --git a/src/app/tabs/tabs.sample.css b/src/app/tabs/tabs.sample.css index 529f07823ac..5e6557085a9 100644 --- a/src/app/tabs/tabs.sample.css +++ b/src/app/tabs/tabs.sample.css @@ -7,6 +7,7 @@ width: 100%; padding: 20px; min-width: 250px; + margin-bottom: 30px; } .items-wrapper__item-small { @@ -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 { diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html index ecabe214684..8dfb51ea22e 100644 --- a/src/app/tabs/tabs.sample.html +++ b/src/app/tabs/tabs.sample.html @@ -98,10 +98,101 @@

Tab 7 Content

sit amet nulla at consequat. Duis volutpat tristique luctus.

+ +
+

Second Tab

+

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.

+
+ + +
+

Tab 4 Content

+

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.

+
+ + +
+

Tab 7 Content

+

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.

+
+ + +
+

Second Tab

+

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.

+
+ + +
+

Tab 4 Content

+

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.

+
+ + +
+

Tab 7 Content

+

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.

+
+ + +
+

Second Tab

+

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.

+
+
-

Tabs with the same width (no scroll)

+

Same size tabs

search more_vert @@ -152,7 +243,7 @@

Tabs with the same width (no scroll)

-

Tabs with the same width (with scroll)

+

Same size tabs (with scroll)

@@ -202,6 +293,54 @@

Notes

vulputate in quis nisl.

 + +
+

Notes

+

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.

+
+ + +
+

Notes

+

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.

+
+ + +
+

Notes

+

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.

+
+ + +
+

Notes

+

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.

+
+
diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss index c491c2c390f..a2d7a48f8c7 100644 --- a/src/styles/igniteui-theme.scss +++ b/src/styles/igniteui-theme.scss @@ -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); }