I have a <mat-tree> component where styling for dependant <mat-tree-node>'s introduces a special background color for mouse hovering:
mat-tree-node {
// ...
&:hover {
background: $hoverColor;
}
}
In the tree, some elements may be selected by the user. In order to highlight them visually, a special class is applied to <mat-tree-node> as [class.highlight]="isHighlighted(node)" and the class is defined as follows:
highlight {
background-color: $selectColor;
}
My problem arises when a node is selected and hovered at the same time. I want the selectedColor to take priority but the node gets hoverColor background when hovered. I changed the definition to this:
mat-tree-node.highlight {
background-color: $selectColor;
&:hover {
background-color: $selectColor;
}
}
Google Chrome developer console started to show the class higher in the stack as now it has +1 point of selectivity, but when hovering, the hoverColor is still being applied to the background, and even !important does not help.
Why does not it obey the new definition and how to fix it?
Try this:
mat-tree-node.highlight {
background-color: $selectColor;
}
may-tree-node:not(.highlight):hover {
background-color: $hoverColor;
}
Related
When the background is red, onclick of grid cell I would like the background to turn grey but the text to remain red, yellow, green etc. How do I do that?
#mixin hoverable-row($bg-color, $highlight-color: $gray-c5, $hover-color: null) {
&:not(.p-highlight) {
background-color: $bg-color;
&:hover {
#if ($hover-color) {
background-color: $hover-color;
}
#else {
background-color: rgba($bg-color, 0.6);
}
}
}
}
tr.p-element.p-selectable-row {
&.row-bg-default {
#include hoverable-row($default-background, $hover-color: $default-highlight);
}
&.row-bg-red {
#include hoverable-row($red-background);
}
&.row-bg-green {
#include hoverable-row($green-background);
color: inherit;
}
&.row-bg-yellow {
#include hoverable-row($yellow-background);
color: inherit;
}
}
Well, it's possible but you'll have to do some CSS magic. I haven't seen any of your HTML build up, but I suggest looking into the :focus and the :focus-within CSS suffixes.
:focus is a pseudo-class that is added once the user has i.e. clicked on an element. The problem here, is that this pseudo-class is originally exclusively available to form-elements. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
:focus-within on the other hand, is a pseudo-class added to any element containing a focused element. And thus can be used in conjunction with any parent element. More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
Furthermore, a workaround to be able to set focus to any element is the tabindex attribute which you can add to basically any element. tabindex will notify the browser that, whenever a user presses 'Tab' on the keyboard, the focus of the page will be set to whatever that element is, e.g. <tr>. But, whenever an element can be focused on by tabindex, the browser will allow the element to be clicked and focused as well.
So if we combine this knowledge, you should be able to achieve what you're trying to manifest by adding tabindex as an attribute to your <tr> and/or <td> and extending your tr.p-element.p-selectable-row as such:
tr.p-element.p-selectable-row {
&.row-bg-default {
#include hoverable-row($default-background, $hover-color: $default-highlight);
}
&.row-bg-red {
#include hoverable-row($red-background);
}
&.row-bg-green {
#include hoverable-row($green-background);
color: inherit;
}
&.row-bg-yellow {
#include hoverable-row($yellow-background);
color: inherit;
}
// add this:
&:focus, &:focus-within{
background:grey;
}
}
I've found a similar question which received a similar response here: https://stackoverflow.com/a/50492334/11787139
I'm trying to change Button text color in a highlighted state on iOS using css.
Even though I can change the text color, it seems like some sort of opacity or other styling is also being applied and I can't figure out what it is or how to override it.
This is how the Button looks in a default state:
And this is how it looks in the highlighted state:
My code:
.facebookBtn {
background-color: #3b5998;
color: #fff;
&:highlighted {
color: #fff;
background-color: darken(#3b5998, 5%);
}
}
I can tell that the color parameter is working because if I change it to #000 it works (ofc it is not black either, rather some sort of transparent black).
I've tried applying opacity: 1; but it didn't help. It works as it should on Android though.
Any suggestions?
You can create a new button class that extends Button that will not get the default highlighted/tapped styling in iOS:
import { isIOS, Button } from '#nativescript/core';
export class PlainButton extends Button {
createNativeView() {
if (isIOS) {
return UIButton.buttonWithType(0);
}
return super.createNativeView();
}
}
To register this as a global component in nativescript-vue, you can do:
Vue.registerElement("PlainButton", () => PlainButton);
Hi I have this current CSS for fullCalendar (v 1.6.4):
.full-calendar .fc-content .fc-event-container .fc-event {
background: #ef6262!important;
border-color: #eb3d3d!important;
color: #fff!important;
border-radius: 0;
}
When I add a new Class to an event (based on some programming calculations) I do this:
event.className = 'paused-event';
calendar.fullCalendar('updateEvent', event);
My paused-event CSS is this:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB;
}
The background color changes correctly, the border stays the same as the default CSS.
Expectancy:
The event color AND border should change when the paused-event class is present.
The !importants are overriding the latest class properties. You could try to add !important to .paused-event properties as well, but the best would be to avoid any !importants and simply override by impacting with a deeper selector (although it's weird the background does change considering the important):
.class1 vs div.class1.class2 (deeper one)
Anyways, if you simply need to solve that and fast you can try:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB !important;
}
If I would like to format an element that has a given class, sometimes (very rare) I use:
.beigeButton[class~="enabledButton"] {
}
What if I want to give properties to an element only when it does NOT contain the given string?
This does not work:
.beigeButton[class!="enabledButton"] {
}
How can I do that?
Use :not:
.beigeButton:not(.enabledButton)
In general you would style the basic button and overwrite the style with additional classes, somehow like this:
.beigeButton {
background-color: beige;
cursor: pointer;
}
.beigeButton.disabled {
background-color: grey;
cursor: not-allowed;
}
.beigeButton.enabled {
background-color: green; //or just keep the basic color
}
you could also define a more general 'disabled class' which can be applied to any other Element this way:
.disabled {
background-color: red;
pointer: not-allowed;
}
A button with the class 'disabled' will get a grey background, though the rule .beigeButton.disabled is more specific as the general .disabled rule.
Any other element (or if the more specific rule doesn't exist or apply) will get a red background-color.
edit:
To answer your initial question, you can style the other way round too, like marcinjuraszek already described:
.beigeButton:not(.enabled) {
background-color: grey;
cursor: not-allowed;
}
Note: check browser compatibilty here
Hope this helps :)
I would like to have a property reference its "self", I am not sure how to do this in LESS. Heck I am having a hard time crafting the wording of the question. Basically I would like to accomplish the following:
a:visited {
color: lighten(color, 10%);
}
Where a's color could vary based on its container div.
So I might have the following selectors:
div#blue-text a {
color: #00F;
}
div#black-text a {
color: #000;
}
Once I visit the links, I should have a lighter blue and gray link texts respectively.
Note: this is a very simple scenario, but I have much more complicated needs, and if there is a clean way to do this, then I would be a happy camper.
Basically, since you're going to set the parent's color in LESS as well, you would store the color in a variable and reference it.
Here is an example:
#column1Color: #aaaaaa;
#column2Color: #bbbbbb;
#column3Color: #cccccc;
.columns {
// set the color of the first column
.column:nth-child(1) {
background-color: #column1Color;
a {
color: lighten(#column1Color, 10%);
}
}
// set the color of the second column
.column:nth-child(2) {
background-color: #column2Color;
a {
color: lighten(#column2Color, 10%);
}
}
// set the color of the third column
.column:nth-child(3) {
background-color: #column3Color;
a {
color: lighten(#column3Color, 10%);
}
}
}
LESS would not know what the color of the hyperlink is unless you "told" it. Same goes for the browser, it would not know the color unless it executes all the linked CSS files.
So, what you need (if I understood you correctly) can not be achieved the way you're thinking about it.