I have two different angular 6 components each with it own page. On each page there is a different list of mat-cards with different mat-card-content background color
although I change the color using the following code both pages have the same color (green), any suggestion how to customize the background color ?
list1.component.scss:
::ng-deep .mat-card-content {
background-color: white
}
list2.component.scss:
::ng-deep .mat-card-content {
background-color: green
}
tried with !important; without any change
Without the :host selector, the style is not encapsulated within the component's scope, so CSS rules apply: last one wins. Try:
list1.component.scss:
:host {
::ng-deep .mat-card-content {
background-color: white
}
}
list2.component.scss:
:host{
::ng-deep .mat-card-content {
background-color: green
}
}
Related
I am not an expert with styling and encapsulation.
Need help with fixing style issue. Style used in a component is overriding the global style.
i am using primeng tabview component in component A for eg:
ComponentA.html:
<p-tabView styleClass="tab-view"></p-tabview>
ComponentA.scss:
.p-tabview {
padding: 0rem;
li.p-highlight span {
font-weight: $semibold-font-weight;
}
}
But this padding is applied to all primeng tabview setting in global style
Component B:
<p-tabView class="tab-view-scheduler"></p-tabview>
global style scss:
.p-tabview {
#media screen and (min-width: $tablet-break) {
padding: 0 4rem 2rem; //this is getting overridden
font-size: $desktop-small-font-size;
}
}
Using the clr-header when the responsive elements appear, is there a way to change the colour?
I am using the clr-header with a custom background colour which is light and so the icons do not show clearly against this.
I have tried modifying the .header-overflow-trigger background-color css value but I assume it isn't global as it has no effect.
The header overflow trigger has a span inside that handles the display of the hamburger lines. You'll need ::ng-deep pseudo selector to cross over into the component.
::ng-deep .header-hamburger-trigger > span,
::ng-deep .header-hamburger-trigger > span::before,
::ng-deep .header-hamburger-trigger > span::after {
background-color: red;
}
Questions: I'm able to change background color of cells but not of the header. Can I change the background color as well as font color of the header in Handsontable?
Add style tag in head of document. This will affect all HOT grids on the page.
Still researching how to make different grids display with different styling.
.handsontable table thead th{
background-color: green;
color:white;
font-weight:bold;
font-size:12px;
}
You could use jquery or css for this. For example, apply a background color to all the span.colHeader:
.handsontable span.colHeader {
text-color: #B2B2FF; /* pink ish */
background-color: #FF7878; /* red */
}
Or even easier, handsontable allows HTML for col headers so as an option, you can supply an array of the headers with HTML:
hot = new Handsontable(container, {
data: items,
startRows: 1,
colHeaders: ['<label id="header1" style="background-color: blue">I'm the first header"</label>', '<label id="header2" style="background-color: red">I'm the second header"</label>']
}
)
test this css to change handsontable header color
.handsontable th {color: #f5ffa5 !important; background: #78DEFF !important; }
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!