skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 11f001bfa8.
This commit is contained in:
Jeremy Elbourn
2016-11-12 14:27:47 -08:00
committed by GitHub
parent 2674736348
commit 009046fbd5
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/theming-your-components.md
+4 -4
View File
@@ -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) {
@@ -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';
@@ -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';
docs/theming.md
+3 -3
View File
@@ -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.
@@ -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