From 9667a06dbf30fca84501c452d540c3eac6b1b44c Mon Sep 17 00:00:00 2001 From: twerske Date: Tue, 3 Nov 2020 10:17:33 -0800 Subject: [PATCH] docs(material-experimental/mdc-theming): readmes correct import paths for mdc-component scss add readme for angular-material-mdc-theme --- src/material-experimental/README.md | 12 ++++++------ src/material-experimental/mdc-autocomplete/README.md | 2 +- src/material-experimental/mdc-checkbox/README.md | 2 +- src/material-experimental/mdc-menu/README.md | 2 +- src/material-experimental/mdc-paginator/README.md | 2 +- src/material-experimental/mdc-progress-bar/README.md | 2 +- .../mdc-progress-spinner/README.md | 2 +- src/material-experimental/mdc-select/README.md | 2 +- src/material-experimental/mdc-slide-toggle/README.md | 2 +- src/material-experimental/mdc-tabs/README.md | 2 +- 10 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/material-experimental/README.md b/src/material-experimental/README.md index 8a936b0b67f4..cf40fae63223 100644 --- a/src/material-experimental/README.md +++ b/src/material-experimental/README.md @@ -48,12 +48,12 @@ the checkbox: ``` 5. Add the theme and typography mixins to your Sass. These align with the normal Angular Material -mixins except that they are suffixed with `-mdc`. There is currently no pre-built CSS option for -the experimental components. For example, using the checkbox: +mixins except that they are suffixed with `-mdc`. Some experimental components may not yet +be included in the pre-built CSS mixin and will need to be explicitly included. ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-checkbox'; + @import '~@angular/material-experimental/mdc-theming/all-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); @@ -63,7 +63,7 @@ the experimental components. For example, using the checkbox: accent: $my-accent ) )); - - @include mat-mdc-checkbox-theme($my-theme); - @include mat-mdc-checkbox-typography(); + + @include angular-material-mdc-theme($my-theme); + @include angular-material-mdc-typography(); ``` diff --git a/src/material-experimental/mdc-autocomplete/README.md b/src/material-experimental/mdc-autocomplete/README.md index 3bc3ab60171f..6df609c35423 100644 --- a/src/material-experimental/mdc-autocomplete/README.md +++ b/src/material-experimental/mdc-autocomplete/README.md @@ -58,7 +58,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-autocomplete'; + @import '~@angular/material-experimental/mdc-autocomplete/autocomplete-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-checkbox/README.md b/src/material-experimental/mdc-checkbox/README.md index ac29199ba0d8..689bbdc5dccf 100644 --- a/src/material-experimental/mdc-checkbox/README.md +++ b/src/material-experimental/mdc-checkbox/README.md @@ -54,7 +54,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-checkbox'; + @import '~@angular/material-experimental/mdc-checkbox/checkbox-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-menu/README.md b/src/material-experimental/mdc-menu/README.md index 5b2116d5d8dc..ed12348eba53 100644 --- a/src/material-experimental/mdc-menu/README.md +++ b/src/material-experimental/mdc-menu/README.md @@ -58,7 +58,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-menu'; + @import '~@angular/material-experimental/mdc-menu/menu-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-paginator/README.md b/src/material-experimental/mdc-paginator/README.md index 61d95bd14fbc..f953dd01ad8e 100644 --- a/src/material-experimental/mdc-paginator/README.md +++ b/src/material-experimental/mdc-paginator/README.md @@ -54,7 +54,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-paginator'; + @import '~@angular/material-experimental/mdc-paginator/paginator-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-progress-bar/README.md b/src/material-experimental/mdc-progress-bar/README.md index fdc6b044d6e6..7f231ac4eb10 100644 --- a/src/material-experimental/mdc-progress-bar/README.md +++ b/src/material-experimental/mdc-progress-bar/README.md @@ -55,7 +55,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-progress-bar'; + @import '~@angular/material-experimental/mdc-progress-bar/progress-bar-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-progress-spinner/README.md b/src/material-experimental/mdc-progress-spinner/README.md index 3c70c4e81c91..16e8e0b8de62 100644 --- a/src/material-experimental/mdc-progress-spinner/README.md +++ b/src/material-experimental/mdc-progress-spinner/README.md @@ -55,7 +55,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-progress-spinner'; + @import '~@angular/material-experimental/mdc-progress-spinner/progress-spinner-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-select/README.md b/src/material-experimental/mdc-select/README.md index 307796efc524..7352b71bfe47 100644 --- a/src/material-experimental/mdc-select/README.md +++ b/src/material-experimental/mdc-select/README.md @@ -62,7 +62,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-select'; + @import '~@angular/material-experimental/mdc-select/select-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-slide-toggle/README.md b/src/material-experimental/mdc-slide-toggle/README.md index 618e0add0c47..c86c746ae889 100644 --- a/src/material-experimental/mdc-slide-toggle/README.md +++ b/src/material-experimental/mdc-slide-toggle/README.md @@ -54,7 +54,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-slide-toggle'; + @import '~@angular/material-experimental/mdc-slide-toggle/slide-toggle-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400); diff --git a/src/material-experimental/mdc-tabs/README.md b/src/material-experimental/mdc-tabs/README.md index 2d06dbf27831..b83e2029c534 100644 --- a/src/material-experimental/mdc-tabs/README.md +++ b/src/material-experimental/mdc-tabs/README.md @@ -58,7 +58,7 @@ component by following these steps: ```scss @import '~@angular/material/theming'; - @import '~@angular/material-experimental/mdc-tabs'; + @import '~@angular/material-experimental/mdc-tabs/tabs-theme'; $my-primary: mat-palette($mat-indigo); $my-accent: mat-palette($mat-pink, A200, A100, A400);