Improve list-demo in dark-theme

angular · Feb 14, 2017 · fb05c11 · fb05c11
1 parent a3b9f8d
commit fb05c11
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
@@ -3,7 +3,7 @@ <h1>md-list demo</h1>
 
 <button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
 
-<div class="demo">
+<div class="list-demo">
   <div>
     <h2>Normal lists</h2>
 

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
@@ -1,5 +1,4 @@
-
-.demo {
+.list-demo {
   display: flex;
   flex-flow: row wrap;
 
@@ -9,20 +8,32 @@
     margin: 20px 20px 0 0;
 
   }
+
   h2 {
     margin-top: 20px;
   }
+}
+
+/* Theme for the list-item demo elements. */
+@mixin demo-list-item-theme($dark: false) {
+  $base-color: if($dark, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
 
-  .mat-icon {
-    color: rgba(0, 0, 0, 0.12);
+  .list-demo .mat-icon {
+    color: rgba($base-color, 0.12);
   }
 
-  .mat-list-icon {
+  .list-demo .mat-list-icon {
     color: white;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba($base-color, 0.3);
+  }
+
+  .list-demo .demo-secondary-text {
+    color: rgba($base-color, 0.54);
   }
 }
 
-.demo-secondary-text {
-  color: rgba(0, 0, 0, 0.54);
+@include demo-list-item-theme(false);
+
+.demo-dark-theme {
+  @include demo-list-item-theme(true)
 }
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
   moduleId: module.id,
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrls: ['list-demo.css'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ListDemo {
   items: string[] = [