I'm trying to change the color of a scrollbar-thumb in my SCSS file.
I tried using the scrollbar-color, but only using webkit is working.
// NOT WORK
.demo {
scrollbar-thumb: #0f0f0f;
}
// WORK
.demo{
//....
&::-webkit-scrollbar-thumb {
background-color: #0f0f0f;
}
}
I understood that webkit is working only with some browsers, so I want to make it as general as possible, so whatever browser the user uses, it'll show the new color.
Thanks all
Related
The glyphicon is misaligned and is not behaving properly in Firefox whereas it looks perfect in Chrome and Safari. To solve this, I am trying to write a rule which would just apply if it is a Mozilla's browser.
Is there any way to detect a browser in SCSS by using directives like #if. Something like following:
#if $browser === mozilla {
//apply this CSS
.pull-right.glyphicon.glyphicon-chevron-right {
top: -13px;
line-height: 0.5 !important;
}
Do we have any simple way to detect? I tried using the #moz-document url-prefix() which isn't working in SCSS.
A similar question was asked here but there is no correct solution to the problem.
Any help or guidance is greatly appreciated. Thank you.
Managed to get scss to compile when the prefix rule was used a mixin, but not otherwise:
#mixin firefox-only {
#at-root {
#-moz-document url-prefix() {
& {
#content;
}
}
}
}
then
#include firefox-only {
prop: val;
}
I used the following to fix an issue I had with text-indent on Firefox being applied for double the width.
select {
text-indent: calc(50% - 16px);
#supports (-moz-appearance:none) {
text-indent: calc(25% - 8px);
}
}
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I'm using JavaFX, and in my CSS I have
.button:hover{
-fx-background-color: red;
}
Which works. But when I try to use another property,
.button:onMousePressed {
-fx-background-color: red;
}
Or onMouseEntered (which I expected to be the same behavior as hover), nothing happens. Is there something fundamentally different about how these work?
Those simply aren't valid CSS pseudoclasses for a button. You are probably looking for
.button:armed {
/* ... */
}
The valid pseudoclasses are listed in the CSS documentation
The problem that I've got is quite simple. I want to use a css class name that has been previously defined as a mixin.
I'm currently using Bootstrap, which has defined a mixin called "placeholder", and because of backwards compatibility we're planning to use the jQuery placeholder plugin to support placeholders for IE 9. The problem is that this plugin adds the css class "placeholder" to the DOM element.
How do I define the css class "placeholder" in my LESS file without executing the mixin previously defined in Bootstrap?
This should not be a problem. This is bootstrap's placeholder mixin
// Placeholder text
.placeholder(#color: #input-color-placeholder) {
&:-moz-placeholder { color: #color; } // Firefox 4-18
&::-moz-placeholder { color: #color; // Firefox 19+
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: #color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: #color; } // Safari and Chrome
}
This is not a mixin class, as it has parenthesis after it. Therfore it will not output anything unless it is referenced. To use this I would need to do something like this.
.input {
.placeholder;
}
Therefore this will not interfere with any .placeholder class you may have.
.placeholder {
color: red;
}
The two should happily co-exist and you should not get any problems.
Edit: see comments
The solution was to use multi class selector to overcome the issue.
Example
.input.placeholder {
color: red;
}
How can we know if any website is using Sass and Compass for CSS?
That's a though one, but I would take a look at the CSS files, IF the developers forgot about changing the output, you'll be able to spot the file names and line numbers of the source files.
If not, look for uncommon patterns in the CSS output, for instance SASS makes nesting very easy to do, so a selector could look like this in the CSS (you would never hand-write this long selectors)
div#wrapper div#container ul#myId li a { color: blue; }
div#wrapper div#container ul#myId li.sass a { color: red; }
But would be look like this in SASS source file (no repetition, easy to getaway with)
div#wrapper {
div#container {
ul#myId {
li {
a { color: blue; }
&.sass {
a { color: red; }
}
}
}
}
}
Also, look for lengthy class combinations, those come from using the #extend directive, that would look like this:
.button, .button1, .button-submit, .button-add-to-cart, .button-signup, .button-register {
display: inline-block;
}
Another good idea is to look in the source of CSS3 generated buttons, usually developers only care for Firefox, Safari, Chrome and IE, but a SASS generated output will be REALLY verbose with a lot of vendor prefixes, including ones for Opera.
Good luck!
if the developer forgot to compile for production or minify the .css, than you should still be able to see the automatically inserted comments that point back to the original source, like:
/* line 22, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
.selector {
bla: 123;
}
or
/* line 5, sass/large/_common.scss */
.selector {
bla: 123;
}