search

EladBezalel / material2-start

Quick Starter Repository for Angular Material 2
214 stars 72 forks source link

deprecated /deep/ #28

Open nueko opened 6 years ago

nueko commented 6 years ago

I think we should remove the shadow-piercing for clarify https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

EladBezalel commented 6 years ago

sgtm

nueko commented 6 years ago

what about this?

/**
* styles.css
**/
...
mat-list-item mat-icon > svg {
  border-radius: 50%
}

/**
* app.component.css
**/

:host {
  display: flex;
  flex: 1;
}

mat-sidenav {
  width: 320px;
}

.content {
  padding: 12px;
}
/* removed
/deep/ mat-icon.avatar
*/
mat-list-item mat-icon {
  overflow: hidden;
  width: 64px;
  height: 64px;
/*  border-radius: 50%; */
  margin: 12px;
}

.fab-bottom-right {
  position: fixed;
 /*add z-index*/
  z-index: 10;
  right: 16px;
  bottom: 16px;
}

/* we don't need this as it makes the sidenav not fill the height by 100% and looks like floating
/deep/ .mat-list-item-content {
  height: auto !important;
}
 */