chore(card): update styles

A-l-y-l-e · Aug 16, 2018 · b1f62e6 · b1f62e6
1 parent bd931e9
commit b1f62e6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 38 deletions.
diff --git a/src/lib/card/card.directive.ts b/src/lib/card/card.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, Renderer2, ElementRef, Input, OnInit } from '@angular/core';
 import { LyTheme2, shadowBuilder, defaultEntry, toBoolean } from '@alyle/ui';
-import { LyCardClasses } from './card.service';
+import { LyCardService } from './card.service';
 
 const DEFAULT_ELEVATION = 2;
 const DEFAULT_ASPECT_RATIO = '16:9';
@@ -23,14 +23,14 @@ export class LyCard implements OnInit {
   }
 
   constructor(
-    private classes: LyCardClasses,
+    private cardService: LyCardService,
     private styler: LyTheme2,
     private el: ElementRef,
     private renderer: Renderer2
   ) { }
 
   ngOnInit() {
-    this.renderer.addClass(this.el.nativeElement, this.classes.card);
+    this.renderer.addClass(this.el.nativeElement, this.cardService.classes.root);
     if (this.elevation === void 0) {
       this.elevation = DEFAULT_ELEVATION;
     }
@@ -59,11 +59,11 @@ export class LyCardContent implements OnInit {
   constructor(
     private el: ElementRef,
     private renderer: Renderer2,
-    private classes: LyCardClasses
+    private cardService: LyCardService
   ) { }
 
   ngOnInit() {
-    this.renderer.addClass(this.el.nativeElement, this.classes.cardContent);
+    this.renderer.addClass(this.el.nativeElement, this.cardService.classes.content);
   }
 }
 
@@ -75,13 +75,13 @@ export class LyCardActions implements OnInit {
   constructor(
     private el: ElementRef,
     private renderer: Renderer2,
-    private classes: LyCardClasses
+    private cardService: LyCardService
   ) { }
   ngOnInit() {
-    this.renderer.addClass(this.el.nativeElement, this.classes.cardActions);
+    this.renderer.addClass(this.el.nativeElement, this.cardService.classes.actions);
     if (!toBoolean(this.disableActionSpacing)) {
       this.el.nativeElement.childNodes.forEach(element => {
-        this.renderer.addClass(element, this.classes.cardActionsItem);
+        this.renderer.addClass(element, this.cardService.classes.actionsItem);
       });
     }
   }

diff --git a/src/lib/card/card.service.ts b/src/lib/card/card.service.ts
@@ -1,36 +1,35 @@
 import { Injectable } from '@angular/core';
 import { LyTheme2 } from '@alyle/ui';
 
+const styles = {
+  root: {
+    display: 'block',
+    overflow: 'hidden'
+  },
+  content: {
+    display: 'block',
+    padding: '16px 24px'
+  },
+  actions: {
+    display: 'block',
+    padding: '8px 12px'
+  },
+  actionsItem: {
+    margin: '0 4px'
+  }
+};
+
 @Injectable({ providedIn: 'root' })
-export class LyCardClasses {
-  card = this.theme.setUpStyleSecondary(
-    'k-card',
-    () => (
-      `display:block;` +
-      `overflow: hidden;`
-    )
-  );
-  cardContent = this.theme.setUpStyleSecondary(
-    'k-card-content',
-    () => (
-      `display:block;` +
-      `padding:16px 24px;`
-    )
-  );
-  cardActions = this.theme.setUpStyleSecondary(
-    'k-card-actions',
-    () => (
-      `display: block;` +
-      `padding: 8px 12px;`
-    )
-  );
-  cardActionsItem = this.theme.setUpStyleSecondary(
-    'k-card-actions-item',
-    () => (
-      `margin: 0 4px;`
-    )
-  );
+export class LyCardService {
+  classes: {
+    root: string,
+    content: string,
+    actions: string,
+    actionsItem: string,
+  };
   constructor(
-    private theme: LyTheme2
-  ) { }
+    theme: LyTheme2
+  ) {
+    this.classes = theme.addStyleSheet(styles, 'lyCard');
+  }
 }