By Morpheus
PublishedCategorized as android, angular, css, ionic-framework, sass
Questions tagged sass
Explore the latest questions and answers asked by our top developers.
ionic ion-button color attribute not working in android
When i run my app in ios it works fine, but when i run it in android it does not. The buttons and other elements appling the color attribute seem not to work in android. I have tried removing the attribute and they appear, but i need them to follow this style. I have also […]
How can I Switch one Angular Material palette for another per URL?
I’m serving one Angular App on several different URL’s and I want to style them differently. What’s an elegant way to switch one Angular Material palette for another per URL? In my SASS: $landing-page-accent: mat.define-palette($mat-makeThisDynamic); Source: Angular Material Quesions
By Chris Nelson
PublishedCategorized as angular, angular-material, sass
How to change primeng Panel Menu style using scss
I want to change my panel menu color to black. here is my HTML code. <p-panelMenu styleClass="font-bold bg-transparent text-white text-xs flex-1 border-none m-0" [model]="items"></p-panelMenu> Source: Angular Questions
Change color of arrow down inside select
I’m currently using ngx paginator and I want to override CSS styles to use white color so I try: HTML <div class="paginator__footer-select col col-md-3 offset-md-1 "> <mat-form-field appearance="outline"> <mat-label class="paginator__footer-perPage">Per page</mat-label> <select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </mat-form-field> </div> SCSS .paginator__footer { padding-top: 42px; &-select{ font-size: 12px; […]
By jesus
PublishedCategorized as angular, css, ngx-pagination, sass
How to work with SCSS variables and Mixins in Angular component.scss?
We all know that Angular has component-specific SCSS file for styling which is really a good thing. We mostly write our common/global styles in styles.scss file or any other file which is imported into styles.scss file. Suppose we have variables.scss and mixins.scss file. These files contain variables and mixins. whenever we need to use them […]
By Anwarul Islam
PublishedHow to change color text when using ngClass inside *ngFor
I want to change color of text when using ngClass. I have the JSON like below but I have a lot of data: items: [ { itemId: "22222", category: ‘A’, total: 100 }, { itemId: "666666", category: ‘A’, total: 80 }, { itemId: "555", category: ‘B’, total: 50 } ] I create on .scss &.is-green […]
By lona bin
PublishedCategorized as angular, ng-class, sass, typescript
How to get suggestions for SCSS generated class names in WebStorm?
I am using scss for my angular project. I have found that I can do something like this. The scss would generate many classes for me use like .font-size-8, .font-size-10, .font-weight-200, .font-weight-500 etc… Which is a lifesaver because I don’t have manually write all the classes. But, I can’t get the class names as suggestions […]
By Anup K Tarafder
Publisheddevelop dynamic team hierarchies tree using css
li { list-style: none; } .level-3-wrapper { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; list-style: none; margin: 0 auto; } h3.level-3.rectangle { background: #F2F2F2; border: 0.5px solid #828282; border-radius: 100px; position: relative; width: 245px; height: 64px; margin-top: 0rem; } .rectangle { position: relative; /* padding: 20px; */ font-size: 18px; } .level3-image { position: […]
By akshay Tiwari
PublishedCategorized as angular, css, css-selectors, html, sass
Image scroll within div
I’m trying to achieve the following scrolling effect from the Rocket.Chat homepage. See effect here Site: https://rocket.chat/ The issue is that I can’t seem to make the image move like they have in the site. Does somebody have any idea why? Or can pass an example? My component.html <section class="community py-5"> <div class="container"> <div class="content […]
By Roberto de Le n
PublishedRotate container with child elements
I’m trying to reconstruct this sidenav_example This is my html and SCSS: HTML: <div class="sidenav-container"> <div class="sidenav-item" *ngFor="let sidenavItem of sidenav"> <span>{{ sidenavItem.text }}</span> <img [src]="sidenavItem.img" /> </div> </div> SCSS: .sidenav-container { position: absolute; .sidenav-item { align-items: flex-start; transform: rotate(270deg); display: flex; img { width: 5px; height: auto; } span { font-size: 2.5pt; } } […]
