Skip to content

Revert "docs(theming): correct import paths (#1807)" #1844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 12, 2016
Merged

Revert "docs(theming): correct import paths (#1807)" #1844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/theming-your-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss

```sass
// Import all the tools needed to customize the theme and extract parts of it
@import '~@angular/material/src/lib/core/theming/all-theme';
@import '~@angular/material/core/theming/all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin candy-carousel-theme($theme) {
Expand All @@ -33,7 +33,7 @@ Now you just have have to call the `@mixin` function to apply the theme:

```sass
// Import a pre-built theme
@import '~@angular/material/src/lib/core/theming/prebuilt/deep-purple-amber';
@import '~@angular/material/core/theming/prebuilt/deep-purple-amber';
// Import your custom input theme file so you can call the custom-input-theme function
@import 'app/candy-carousel/candy-carousel-theme.scss';

Expand All @@ -53,11 +53,11 @@ Styles that are affected by the theme should be placed in a separated theming fi


## Using colors from a pallete
You can consume the theming functions from the `@angular/material/src/lib/core/theming/theming` and Material pallete vars from `@angular/material/src/lib/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example:
You can consume the theming functions from the `@angular/material/core/theming/theming` and Material pallete vars from `@angular/material/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example:

```scss
// Import theming functions
@import '~@angular/material/src/lib/core/theming/theming';
@import '~@angular/material/core/theming/theming';
// Import your custom theme
@import 'src/unicorn-app-theme.scss';

Expand Down
6 changes: 3 additions & 3 deletions docs/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ You can include a theme file directly into your application from
If you're using Angular CLI, this is as simple as including one line
in your `style.css` file:
```css
@import '~@angular/material/src/lib/core/theming/prebuilt/deeppurple-amber.css';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
```

Alternatively, you can just reference the file directly. This would look something like
```html
<link href="node_modules/@angular/material/src/lib/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
```
The actual path will depend on your server setup.

Expand All @@ -46,7 +46,7 @@ When you want more customization than a pre-built theme offers, you can create y
A theme file is a simple Sass file that defines your palettes and passes them to mixins that output
the corresponding styles. A typical theme file will look something like this:
```scss
@import '~@angular/material/src/lib/core/theming/all-theme';
@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
Expand Down