sass - Apply CSS without particlular child column -
i need small support here.you can see that
.row1 { .col * { padding: 10px 10px 5px 5px; }
here applies child col
elements.but need remove <ion-fab>
column. in other words, should not applied column
<ion-col col-6> <ion-fab center middle> <button ion-fab mini><ion-icon name="add"></ion-icon></button> </ion-fab> </ion-col>`
can tell me how that?
.html
<ion-grid no-padding> <ion-row class="row1"> <ion-col col-6 *ngfor="let d of data"> <playlist [data]="d"></playlist> </ion-col> <ion-col col-6> <ion-fab center middle> <button ion-fab mini><ion-icon name="add"></ion-icon></button> </ion-fab> </ion-col> </ion-row> </ion-grid>
.scss
.content { ion-grid { height: 40%; } .row1 { .col * { padding: 10px 10px 5px 5px; } flex: 1; } img { width: 100%; height: 100%; } }
renderd content on browser:
<ion-grid class="grid" no-padding=""> <ion-row class="row1 row"> <!--bindings={ "ng-reflect-ng-for-of": "[object object],[object object" }--><ion-col class="col" col-6=""> <playlist ng-reflect-data="[object object]"><div class="playlist"> <span>just added</span> <img src="./assets/images/img1.jpg" alt="just added"> </div></playlist> </ion-col><ion-col class="col" col-6=""> <playlist ng-reflect-data="[object object]"><div class="playlist"> <span>my favorites</span> <img src="./assets/images/img2.jpg" alt="my favorites"> </div></playlist> </ion-col><ion-col class="col" col-6=""> <playlist ng-reflect-data="[object object]"><div class="playlist"> <span>presentation 1</span> <img src="./assets/images/img3.jpg" alt="presentation 1"> </div></playlist> </ion-col> <ion-col class="col" col-6=""> <ion-fab center="" middle=""> <button ion-fab="" mini="" class="fab fab-md"><ion-icon class="fab-close-icon icon icon-md ion-md-close" name="close" role="img" aria-label="close" ng-reflect-name="close"></ion-icon><span class="button-inner"><ion-icon name="add" role="img" class="icon icon-md ion-md-add" aria-label="add" ng-reflect-name="add"></ion-icon></span><div class="button-effect"></div></button> </ion-fab> </ion-col> </ion-row> </ion-grid>
rendered image:
the simplest seems me make ion-col
element have ion-fab
inside have additional class name, no-pad
, , change selector to:
.col:not(.no-pad)
Comments
Post a Comment