From ca56ebbf6ba83d11ae2dc919a3143e85d4f6a397 Mon Sep 17 00:00:00 2001 From: mmalerba Date: Thu, 23 Feb 2017 13:32:46 -0800 Subject: [PATCH] Revert "update: add button to toggle theme in demo-app" (#3271) --- src/demo-app/button/button-demo.scss | 1 + src/demo-app/demo-app/demo-app-theme.scss | 16 ----- src/demo-app/demo-app/demo-app.html | 77 +++++++++++------------ src/demo-app/demo-app/demo-app.scss | 6 +- src/demo-app/demo-app/demo-app.ts | 6 +- src/demo-app/index.html | 1 + src/demo-app/list/list-demo.html | 2 +- src/demo-app/list/list-demo.scss | 27 +++----- src/demo-app/list/list-demo.ts | 3 +- src/demo-app/radio/radio-demo.scss | 1 + src/demo-app/tabs/tabs-demo.scss | 6 ++ tools/gulp/constants.ts | 4 -- tools/gulp/task_helpers.ts | 7 +-- tools/gulp/tasks/aot.ts | 2 +- tools/gulp/tasks/development.ts | 2 +- 15 files changed, 61 insertions(+), 100 deletions(-) delete mode 100644 src/demo-app/demo-app/demo-app-theme.scss diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss index d577ca66b0e5..9cb6349e0ef8 100644 --- a/src/demo-app/button/button-demo.scss +++ b/src/demo-app/button/button-demo.scss @@ -8,6 +8,7 @@ section { display: flex; align-items: center; + background-color: #f7f7f7; margin: 8px; } diff --git a/src/demo-app/demo-app/demo-app-theme.scss b/src/demo-app/demo-app/demo-app-theme.scss deleted file mode 100644 index 335c4fc30f8f..000000000000 --- a/src/demo-app/demo-app/demo-app-theme.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '@angular/material/core/theming/all-theme'; - -// Include core material styles. -@include mat-core(); - -$primary: mat-palette($mat-indigo); -$accent: mat-palette($mat-pink); - -$light-theme: mat-light-theme($primary, $accent); -$dark-theme: mat-dark-theme($primary, $accent); - -@include angular-material-theme($light-theme); - -.demo-dark-theme { - @include angular-material-theme($dark-theme); -} diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index 05059fbead36..fe1fab9478cc 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -1,46 +1,41 @@ - -
- - - - - {{navItem.name}} - + + + + + {{navItem.name}} + -
+
- - Baseline - - - - -
- - + +
+ + +
+

Angular Material Demos

+ + -
-

Angular Material Demos

- - - - -
- - -
-
+ + +
+
- -
+
+ diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss index e9aa59c35ba1..ee4512261ed3 100644 --- a/src/demo-app/demo-app/demo-app.scss +++ b/src/demo-app/demo-app/demo-app.scss @@ -31,6 +31,7 @@ body { .demo-toolbar { display: flex; + justify-content: space-between; width: 100%; } } @@ -40,11 +41,6 @@ body { } } -// Fills remaining flex space. -.demo-flex-fill { - flex: 1 1 auto; -} - // stretch to screen size in fullscreen mode .demo-content { width: 100%; diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index fa47fcb43c7a..746a18056915 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -15,14 +15,10 @@ export class Home {} selector: 'demo-app', providers: [], templateUrl: 'demo-app.html', - styleUrls: ['demo-app.css', 'demo-app-theme.css'], + styleUrls: ['demo-app.css'], encapsulation: ViewEncapsulation.None, }) export class DemoApp { - - /** Whether the demo-app should use a dark theme or not. */ - isDarkTheme: boolean = false; - navItems = [ {name: 'Autocomplete', route: 'autocomplete'}, {name: 'Button', route: 'button'}, diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 574095f01c79..3099472c8633 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -8,6 +8,7 @@ + diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index 312cce6f7d53..5cb977fb51e9 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -3,7 +3,7 @@

md-list demo

-
+

Normal lists

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index 950dc9869007..bcf8a770c381 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -1,4 +1,5 @@ -.list-demo { + +.demo { display: flex; flex-flow: row wrap; @@ -8,32 +9,20 @@ 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, white, black); - .list-demo .mat-icon { - color: rgba($base-color, 0.12); + .mat-icon { + color: rgba(0, 0, 0, 0.12); } - .list-demo .mat-list-icon { + .mat-list-icon { color: white; - background: rgba($base-color, 0.3); - } - - .list-demo .demo-secondary-text { - color: rgba($base-color, 0.54); + background: rgba(0, 0, 0, 0.3); } } -@include demo-list-item-theme(false); - -.demo-dark-theme { - @include demo-list-item-theme(true); +.demo-secondary-text { + color: rgba(0, 0, 0, 0.54); } diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts index be402e9c5ec6..73ed3ceee7b6 100644 --- a/src/demo-app/list/list-demo.ts +++ b/src/demo-app/list/list-demo.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {Component} from '@angular/core'; @Component({ @@ -6,7 +6,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; selector: 'list-demo', templateUrl: 'list-demo.html', styleUrls: ['list-demo.css'], - encapsulation: ViewEncapsulation.None }) export class ListDemo { items: string[] = [ diff --git a/src/demo-app/radio/radio-demo.scss b/src/demo-app/radio/radio-demo.scss index ee738628af6a..9a37d4da430a 100644 --- a/src/demo-app/radio/radio-demo.scss +++ b/src/demo-app/radio/radio-demo.scss @@ -4,6 +4,7 @@ } .demo-section { + background-color: #f7f7f7; margin: 8px; padding: 16px; diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss index f1ade3b04fcd..d10e259e7e5e 100644 --- a/src/demo-app/tabs/tabs-demo.scss +++ b/src/demo-app/tabs/tabs-demo.scss @@ -1,6 +1,9 @@ .demo-nav-bar { border: 1px solid #e0e0e0; margin-bottom: 40px; + .mat-tab-nav-bar { + background: #f9f9f9; + } sunny-routed-content, rainy-routed-content, foggy-routed-content { @@ -12,6 +15,9 @@ .demo-tab-group { border: 1px solid #e0e0e0; margin-bottom: 40px; + .mat-tab-header { + background: #f9f9f9; + } .mat-tab-body-content { padding: 12px; } diff --git a/tools/gulp/constants.ts b/tools/gulp/constants.ts index 925a17e9a033..b2811415da31 100644 --- a/tools/gulp/constants.ts +++ b/tools/gulp/constants.ts @@ -17,10 +17,6 @@ export const SASS_AUTOPREFIXER_OPTIONS = { cascade: false, }; -export const SASS_PREPROCESSOR_OPTIONS = { - includePaths: [DIST_ROOT] -}; - export const HTML_MINIFIER_OPTIONS = { collapseWhitespace: true, removeComments: true, diff --git a/tools/gulp/task_helpers.ts b/tools/gulp/task_helpers.ts index d4a46412ed71..68f9f8e24b79 100644 --- a/tools/gulp/task_helpers.ts +++ b/tools/gulp/task_helpers.ts @@ -2,10 +2,7 @@ import * as child_process from 'child_process'; import * as fs from 'fs'; import * as gulp from 'gulp'; import * as path from 'path'; -import { - NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS, - SASS_PREPROCESSOR_OPTIONS -} from './constants'; +import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants'; /** Those imports lack typings. */ @@ -47,7 +44,7 @@ export function sassBuildTask(dest: string, root: string) { return () => { return gulp.src(_globify(root, '**/*.scss')) .pipe(gulpSourcemaps.init()) - .pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError)) + .pipe(gulpSass().on('error', gulpSass.logError)) .pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS)) .pipe(gulpSourcemaps.write('.')) .pipe(gulp.dest(dest)); diff --git a/tools/gulp/tasks/aot.ts b/tools/gulp/tasks/aot.ts index 334524eac4b8..073535532435 100644 --- a/tools/gulp/tasks/aot.ts +++ b/tools/gulp/tasks/aot.ts @@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']); */ task('aot:prepare', sequenceTask( 'clean', - ['build:components:release', 'aot:copy', ':build:components:ngc']) + ['aot:copy', 'build:components:release', ':build:components:ngc']) ); /** Builds the demo-app with the Angular compiler to verify that all components work. */ diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index 2da68e739b4a..846d4eecd257 100644 --- a/tools/gulp/tasks/development.ts +++ b/tools/gulp/tasks/development.ts @@ -20,7 +20,7 @@ task(':watch:devapp', () => { task(':build:devapp:vendor', vendorTask()); task(':build:devapp:ts', tsBuildTask(appDir)); -task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir)); +task(':build:devapp:scss', sassBuildTask(outDir, appDir)); task(':build:devapp:assets', copyTask(appDir, outDir)); task('build:devapp', buildAppTask('devapp'));