feat(tab): add headerPlacement, textColor, indicatorColor & alignTabs

A-l-y-l-e · Dec 9, 2018 · a8ff27f · a8ff27f
1 parent 3543ce6
commit a8ff27f
Show file tree

Hide file tree

Showing 4 changed files with 265 additions and 71 deletions.
diff --git a/src/lib/tabs/tabs.clasess.service.ts b/src/lib/tabs/tabs.clasess.service.ts
@@ -1,20 +1,33 @@
 import { Injectable } from '@angular/core';
-import { LyTheme2 } from '@alyle/ui';
+import { LyTheme2, ThemeVariables } from '@alyle/ui';
 
-const tabsStyles = {
+const tabsStyles = (theme: ThemeVariables) => ({
   root: {
     display: 'block'
   },
+  container: {
+    display: 'flex'
+  },
   tab: {
     position: 'relative',
     display: 'inline-flex'
   },
+  /** Tab content */
+  contentContainer: {
+    overflow: 'hidden',
+    flexGrow: 1
+  },
+  /** Tab header */
   tabsLabels: {
     display: 'flex',
-    position: 'relative',
-    flexGrow: 1
+    position: 'relative'
   },
   label: {
+    '-webkit-tap-highlight-color': 'transparent',
+    '-webkit-appearance': 'none',
+    backgroundColor: 'transparent',
+    userSelect: 'none',
+    border: 0,
     minWidth: '72px',
     padding: '0 24px',
     cursor: 'pointer',
@@ -23,30 +36,45 @@ const tabsStyles = {
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.pxToRem(theme.typography.fontSize),
+    letterSpacing: '0.02857em',
+    color: 'currentColor',
+    outline: 'none',
+    width: '100%',
+    fontWeight: 500,
+    opacity: .7,
+    [theme.getBreakpoint('XSmall')]: {
+      padding: '0 8px'
+    }
+  },
+  tabLabelActive: {
+    opacity: 1
   },
   tabContents: {
     display: 'flex',
     transition: '450ms cubic-bezier(.1, 1, 0.5, 1)',
-    willChange: 'transform'
+    willChange: 'transform',
+    height: '100%'
   },
   tabContent: {
     width: '100%',
+    height: '100%',
     flexShrink: 0,
     position: 'relative'
   },
   tabsIndicator: {
     position: 'absolute',
-    transition: '450ms cubic-bezier(.1, 1, 0.5, 1)',
-    bottom: 0,
     height: '2px',
-    left: 0,
+    transition: '450ms cubic-bezier(.1, 1, 0.5, 1)',
     background: 'currentColor'
   },
   tabsIndicatorForServer: {
-    width: '100%'
+    position: 'absolute',
+    background: 'currentColor'
   }
-};
+});
 
 @Injectable({
   providedIn: 'root'

diff --git a/src/lib/tabs/tabs.directive.html b/src/lib/tabs/tabs.directive.html
@@ -1,11 +1,15 @@
-<div [withClass]="classes.tabsLabels">
-  <ng-content></ng-content>
-  <span #tabsIndicator></span>
-</div>
-<div [withClass]="classes.tabContents" #tabContents>
-  <ng-template ngFor let-item [ngForOf]="tabsList" let-x="index">
-    <div [withClass]="classes.tabContent">
-      <ng-template [ngTransclude]="loadTemplate(item, x)"></ng-template>
+<div [className]="classes.container">
+  <div [className]="classes.tabsLabels" #tabs>
+    <ng-content></ng-content>
+    <span #tabsIndicator></span>
+  </div>
+  <div [className]="classes.contentContainer">
+    <div [className]="classes.tabContents" #tabContents>
+      <ng-template ngFor let-item [ngForOf]="tabsList" let-x="index">
+        <div [className]="classes.tabContent">
+          <ng-template [ngTransclude]="loadTemplate(item, x)"></ng-template>
+        </div>
+      </ng-template>
     </div>
-  </ng-template>
+  </div>
 </div>