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 […]

By Morpheus
Published
Categorized as android, angular, css, ionic-framework, sass Tagged , , , ,

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
Published
Categorized as angular, angular-material, sass Tagged , ,

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

By Damith Asanka
Published
Categorized as angular, css, html, primeng, sass Tagged , , , ,

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
Published
Categorized as angular, css, ngx-pagination, sass Tagged , , ,

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
Published
Categorized as angular, sass, webpack Tagged , ,

How 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
Published
Categorized as angular, ng-class, sass, typescript Tagged , , ,

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
Published
Categorized as angular, sass, webstorm Tagged , ,

develop 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
Published
Categorized as angular, css, css-selectors, html, sass Tagged , , , ,

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
Published
Categorized as angular, css, sass Tagged , ,

Rotate 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; } } […]

By Marcel Sauter
Published
Categorized as angular, css, html, sass Tagged , , ,
1 2 3 53

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq