-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upgraded angular & material modules to latest (#90)
* upgraded angular & material modules to latest * router updated to latest * breaking change to include only @angular/material package in package.json * changed @angular2-material/* to @angular/material * fixed rollup.js file * added require-dir, merge2 and upgraded gulp-typescript * fixed rollup build for platform deployment using ts2.0, material new package and webpack changes * added example for snackbar * update(app scss): remove color overrides * update(theme): main & example themes * update(themes): docs for new themes * update(theme): docs text padding * update(material-components): grid-list headers & footers * abstracted scss from app.component.scss and moved to styles.scss (global file) * added dialog examples * update(styles): comments & moved divider to app.component.scss * update(app scss): Shadow DOM divider styles
- Loading branch information
1 parent
0a272b0
commit 790278d
Showing
22 changed files
with
416 additions
and
410 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,172 +1,10 @@ | ||
| /* Variables */ | ||
| $md-primary: #F57C00; | ||
| $md-primary-opacity: rgba(245, 124, 0, 0.12); | ||
| $md-accent: #0288D1; | ||
| $md-accent-opacity: rgba(2, 136, 209, 0.12); | ||
| $md-warn: #C62828; | ||
| // Applies Shadow DOM styles to the root app component | ||
|
|
||
| /* :host /deep/ lets shadowdom style child elements */ | ||
| // :host /deep/ lets you travel down the Shadow DOM tree to change web component styles | ||
| :host /deep/ { | ||
| md-toolbar, | ||
| [md-raised-button], | ||
| [md-fab], | ||
| [md-mini-fab] { | ||
| &.md-primary { | ||
| background-color: $md-primary; | ||
| } | ||
| &.md-accent { | ||
| background-color: $md-accent; | ||
| } | ||
| } | ||
| [md-fab], | ||
| [md-mini-fab], | ||
| .md-radio-checked .md-radio-inner-circle, | ||
| .md-checkbox-checked .md-checkbox-background { | ||
| background-color: $md-accent; | ||
| } | ||
| .md-radio-checked { | ||
| .md-radio-outer-circle { | ||
| border-color: $md-accent; | ||
| } | ||
| } | ||
| [md-button], | ||
| [md-icon-button] { | ||
| &.md-primary { | ||
| color: $md-primary; | ||
| } | ||
| &.md-accent { | ||
| color: $md-accent; | ||
| } | ||
| } | ||
| [md-button]:hover { | ||
| &.md-primary::after { | ||
| background-color: $md-primary-opacity; | ||
| } | ||
| &.md-accent::after{ | ||
| background-color: $md-accent-opacity; | ||
| } | ||
| } | ||
| .md-radio-focused, | ||
| .md-checkbox-focused { | ||
| .md-ink-ripple { | ||
| background-color: $md-accent-opacity; | ||
| } | ||
| } | ||
| .md-input-placeholder.md-focused { | ||
| color: $md-primary !important; | ||
| } | ||
| .md-progress-bar-fill::after { | ||
| background-color: $md-primary !important; | ||
| } | ||
| .md-input-underline .md-input-ripple { | ||
| background-color: $md-primary !important; | ||
| &.md-accent { | ||
| background-color: $md-accent !important; | ||
| } | ||
| &.md-warn { | ||
| background-color: $md-warn !important; | ||
| } | ||
| } | ||
| .md-progress-bar-buffer { | ||
| background-color: lighten($md-primary, 40%) !important; | ||
| } | ||
| md-progress-bar[color='accent'] { | ||
| .md-progress-bar-fill::after, | ||
| .md-input-underline .md-input-ripple { | ||
| background-color: $md-accent !important; | ||
| } | ||
| .md-progress-bar-buffer { | ||
| background-color: lighten($md-accent, 40%) !important; | ||
| } | ||
| } | ||
| md-progress-bar[color='warn'] { | ||
| .md-progress-bar-fill::after, | ||
| .md-input-underline .md-input-ripple { | ||
| background-color: $md-warn !important; | ||
| } | ||
| .md-progress-bar-buffer { | ||
| background-color: lighten($md-warn, 40%) !important; | ||
| } | ||
| } | ||
| md-progress-circle, | ||
| md-spinner { | ||
| path { | ||
| stroke: $md-primary !important; | ||
| } | ||
| &[color='accent'] { | ||
| path { | ||
| stroke: $md-accent !important; | ||
| } | ||
| } | ||
| &[color='warn'] { | ||
| path { | ||
| stroke: $md-warn !important; | ||
| } | ||
| } | ||
| } | ||
| md-ink-bar { | ||
| background-color: $md-primary !important; | ||
| } | ||
| .md-tab-label:focus { | ||
| background-color: $md-primary-opacity !important; | ||
| } | ||
| md-slide-toggle { | ||
| &.md-checked { | ||
| .md-slide-toggle-thumb { | ||
| background-color: $md-accent !important; | ||
| } | ||
| .md-slide-toggle-bar { | ||
| background-color: $md-accent-opacity !important; | ||
| } | ||
| } | ||
| &.md-slide-toggle-focused { | ||
| .md-ink-ripple { | ||
| background-color: $md-accent-opacity !important; | ||
| } | ||
| } | ||
| } | ||
| .md-slider-thumb::after { | ||
| background-color: $md-accent; | ||
| border-color: $md-accent; | ||
| } | ||
| .md-slider-track-fill { | ||
| background-color: $md-accent; | ||
| } | ||
| md-nav-list { | ||
| [md-list-item].active { | ||
| md-icon[md-list-avatar] { | ||
| background-color: $md-accent; | ||
| color: white; | ||
| } | ||
| md-icon[md-list-icon] { | ||
| color: $md-accent; | ||
| } | ||
| } | ||
| } | ||
| a[md-icon-button] { | ||
| line-height: 36px; | ||
| } | ||
| .md-tab-label { | ||
| flex-grow: 1; | ||
| } | ||
| /* md-hint styles were missing from material2 */ | ||
| md-hint { | ||
| position: absolute; | ||
| font-size: 75%; | ||
| bottom: -0.5em; | ||
|
|
||
| &.md-right { | ||
| right: 0; | ||
| } | ||
|
|
||
| [dir='rtl'] & { | ||
| right: 0; | ||
| left: auto; | ||
|
|
||
| &.md-right { | ||
| right: auto; | ||
| left: 0; | ||
| } | ||
| } | ||
| // md-divider has a bug in angular-material that doesn't apply color | ||
| md-divider { | ||
| border-top-color: rgba(black, 0.12); | ||
| } | ||
| } |
Oops, something went wrong.