I want to apply a background color but not bold the paper-item when its selected. I notice the weight property does not do anything ...
paper-item {
--paper-item-selected-weight: normal; /* its still bold */
--paper-item-selected: {
background: #3f9c35; /* no issues here */
}
}
The HTML
<paper-menu selected="0">
<paper-item>TEST</paper-item>
The same happens if I use paper-icon-item
Related
In my jQuery v3 / Bootstrap v4.1.2 application, I use chosen.jquery (Version 1.8.7) and I did not find how to set color of placeholder text of of Chosen selection input with styles like:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #c2c200 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #c2c200 !important;
opacity: 1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #c2c200 !important;
opacity: 1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: ##c2c200 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #c2c200 !important;
}
::placeholder { /* Most modern browsers support this now. */
color: ##c2c200 !important;
}
And I init it with code:
$(".chosen_select_box").chosen({
disable_search_threshold: 10,
allow_single_deselect: true,
no_results_text: "Nothing found!",
});
You can look at it this fiddle:
http://jsfiddle.net/1Lpdk79r/3/
But it does not work for chosen input. How to fix it?
If you view the source of your fiddle, you can see that the Chosen plugin generates a text input from your select, and adds the placeholder text as the input value. It also styles that input. So you just need to override the Chosen styling with your own.
This will do, to change text colour:
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
color: #c2c200;
}
Here's an updated version of your fiddle showing the result.
I utilised the BEM method and my <div> is showing the css from the Block and Modifier, but not the Element
i.e. the css for c-banner(block) and --warning(modifier) is appearing but not __icon(element).
I know that the color of the modifier is appearing because I tried changing it to another color and it appears on the UI.
Eg:
Currently:
&--warning {
color: #D9822B
}
Edited:
&--warning {
color: black
}
Once changed, the icon of --warning will show up with a black color on the UI.
However, the padding-right of __icon doesn't ever get applied.
c-banner {
/* Block CSS Properties */
&__icon {
padding-right: 12px;
&--warning { /* Used for warning purposes */
color: #D9822B;
}
&--primary { /* Used for general information */
color: #137CBD;
}
&--success { /* Used for verified access */
color: #0F9960;
}
&--danger { /* Used as a hard stop */
color: #DB3737;
}
}
}
I'm genuinely perplexed as to why the padding-right of __icon does not get applied but the color of --warning is
All you are missing is:
.c-banner ..... the dot before the classname
Also, for padding to work they have to be inside --warning because you are chaining to form the full selector and there is no selector that ends with __icon
You can style material-icons if you want to affect multiple:
.c-banner {
.material-icons { padding-right: 12px; }
/* can also do [class*="__icon"] but may be less predictable */
&__icon {
/* rest of the scss */
}
}
Beginner question. I have this code, which works fine
/* Start attribute labels bold */
.custom-attributes .attribute-label {
font-weight: bold;
}
/*End attribute labels bold */
/* Start attribute value color */
.custom-attributes .attribute-value {
color: red;
}
/* End attribute value color */
Now, I'd like to filter the .custom-attributes .attribute-label and look for the value 1, then print all the .custom-attributes .attribute-value to this label green. So basically
I hope this is understandable... How can I do this?
This is for a wordpress website to customise the output on the website.
The SASS documentation states:
Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed.
That seems not to be always true.
/* what an ugly declaration */
body
color: green
will be compiled to:
/* what an ugly declaration */
body {
color: green; }
but if I put the comment after a property:
body
color: green /* what an ugly color */
it will be removed:
body {
color: green; }
Can I change this behaviour?
Try adding /*! your comment code */ in your comment.
Example:
body{
color: green; /*! What an Ugly color */
}
This should help you.
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}