Category : sass

There does not seem to be clear examples of custom storefronts or custom styling/themes for Spartacus. I would like to understand how I implement a custom theme where we have different colours and theme defaults. I cannot find any examples on how to do this correctly with Spartacus. Am I missing anything? Any feedback would ..

Read more

I would like to put these stylesheets inside SASS structure but for same reason doesn’t work,do you have any ideas? Thanks in advance. /* works input:disabled::-webkit-input-placeholder, input:focus::-webkit-input-placeholder { color:red } /* doesn’t work input,textarea { &:disabled { … &::-webkit-input-placeholder { color: red; } } &:focus { …. &::-webkit-input-placeholder { color: red; } } } Source: ..

Read more

I’m, trying to figure out, how to align mat-panel-description Angular Material component description name to right side: <mat-expansion-panel-header> <mat-panel-description class="right-side"> {{ myText }} </mat-panel-description> </mat-expansion-panel-header> here is a the only way which works for me, aligns text to the right, but not enough close to the border: .mat-expansion-panel-header-description { flex-basis: 0; display: flex; justify-content: flex-end; ..

Read more

I have a util scss file for my breakpoints to reuse them through my Angular project: $breakpoints: ( sm: 768px, md: 1024px, lg: 1280px, xl: 1400px ); $bp-sm: get-bp(‘sm’); $bp-md: get-bp(‘md’); $bp-lg: get-bp(‘lg’); $bp-xl: get-bp(‘xl’); @function get-bp($bp) { @if $bp { $bp: map-get($breakpoints, $bp); } @else { @error "Parameter #{$bp} is unknown or empty."; } ..

Read more

I’m trying to figure out, how completely isolate group of components and pages from styles.scss in Angular application, and use different style setting for separated group I’m not able to remove or change styles.scss content on my need, but it is completely destroys my design, and most destructive is @import "assets/styles/set";, which loads everything I ..

Read more

In Angular application, using of Angular Material I’ve changed color for <mat-checkbox>My Checkbox</mat-checkbox> checked background and border like this: ::ng-deep .mat-checkbox .mat-checkbox-frame { border-color: rgb(130, 238, 148); } ::ng-deep .mat-checkbox-checked .mat-checkbox-background { background-color: rgb(251, 255, 0) !important; } but I can’t find the way to do the same with checkbox: <mat-selection-list> <mat-list-option *ngFor="let dt of ..

Read more