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;
}
Related
We are using a class on the html-element to determine whether the user is in dark or light mode of the app.
<html class="dark-mode"></html>
This class is added using Renderer2 in a service that detects the selected setting of the user. This works fine so far.
Now, we have to adjust all the components to look good in the dark mode as well. But the problem is Angular's ViewEncapsulation.
What we thought would come in handy, is to simply update the SCSS of the component:
.headline {
color: black;
.dark-mode & {
color: white;
}
}
Or in plain CSS:
.headline {
color: black;
}
.dark-mode .headline {
color: white;
}
Now this doesn't work, because the class .dark-mode seems to be encapsulated, as expected.
How can we solve this problem?
:host-context provides access to css classes above the :host. By using :host-context you are able to check if any of the parents of the host have a specific css class and apply styling:
:host-context(.dark-mode) h2 {
color: white;
}
Documentation: https://angular.io/guide/component-styles#host-context
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
Are there any tools to compile CSS custom properties declared at not :root rule? I want following code with custom properties
.dark {
--bg-color: black;
--fg-color: white;
}
.light {
--bg-color: white;
--fg-color: black;
}
.foo {
background: var(--bg-color);
display: block;
}
.bar {
color: var(--fg-color);
display: inline;
}
be compiled to their non-custom-prop equivalents like that
.light .foo, .light.foo {
background: white;
}
.dark .foo, .dark.foo {
background: black;
}
.light .bar, .light.bar {
color: black;
}
.dark .bar, .dark.bar {
color: white;
}
.foo {
display: block;
}
.bar {
display: inline;
}
The goal is to
switch color schemes by switching dark/light class on root DOM element
use valid css syntax (no sass less)
keep rules code compact
It's actually not safe to do that. I can tell you because I tried so hard to make a safe transformation.
But I failed.
https://github.com/postcss/postcss-custom-properties/issues/1
Ideal solution. Your example is valid CSS and can be used in many browsers (not in IE, Edge (but is in development) and Opera Mini as of writing this answer, 2017-03-27, other major browsers are fine).
Suboptimal solution. Some CSS can be transpiled to achieve better browser support. The solution I found does not support variables on non-:root elements, however. There are also other objections against transpiling of 'future' CSS into 'current' CSS. To the best of my knowledge, you will have to implement your own transpiler (or postcss plugin) if you want to transpile custom properties not on the :root element, but be warned that that is hard in general. Now you don't need the general part, so it is possible. Just does, to the best of my knowledge, not exist yet.
Preprocessing solution. Of course, you don't need a general implementation of custom properties. You have different themes that have their own values for the same set of properties and that's it. Thus, a separate stylesheet can be created as a preprocessing step using any CSS preprocessor.
Now you say the following,
use valid css syntax (no sass less)
but I am going to show this anyway, because I believe that it is a valid solution to your problem. It is definitely the only one I know that actually works if you want to/need to support IE, Edge and/or older versions of other major browsers (Firefox < 31, Chrome < 49, Safari < 9.1, Opera < 36)
You could do this using SASS for example, to do the transpiling on the server side.
// define styles, use variables throughout them
// your entire style definition goes into this mixin
#mixin myStyles($fg-color, $bg-color) {
.foo {
display: block;
background: $bg-color;
}
.bar {
display: inline;
color: $fg-color;
}
}
// define themes, that set variables for the above styles
// use named arguments for clarity
.dark {
#include myStyles(
$fg-color: white,
$bg-color: black
);
}
.light {
#include myStyles(
$fg-color: black,
$bg-color: white
);
}
This compiles to the following.
.dark .foo {
display: block;
background: black;
}
.dark .bar {
display: inline;
color: white;
}
.light .foo {
display: block;
background: white;
}
.light .bar {
display: inline;
color: black;
}
This is not exactly what you want to obtain, but very close. Realistically, I think this is the closest you will get to obtaining your desired output. I know you want to
keep rules code compact
but what you are saying there (I think) is that you want to split out custom properties from their rules to save on number of rules, which is not something any preprocessor I know supports.
You can organize your source SASS in separate files to keep an overview easily. You can even set up a build system that generates a separate stylesheet for every theme you have. It is then possible to have your users select an alternative stylesheet. Browsers have some support for this, but switching using JavaScript is also definitely possible in the latter case. Simply set all stylesheets to be disabled except for the selected one. Here is an example.
I have a contact form with several controls and i am unable to set the color of the name that appears in the control prior to a user typing in their details. I attempted to use color however this changes the color of the value the user inputs.
/* Contact Form */
input[type="text"]#name {
color: #000000;
background-color : #ffffff;
}
You need to style the placeholder. It's different across browsers currently.
Here is Bootstrap's mixin for it - you can see what the generated CSS will look like.
.placeholder(#color: #input-color-placeholder) {
&::-moz-placeholder { color: #color; // Firefox
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
}
input[type="text"]#name{}
It is refering the input which has type text and has id="name". Please update it.
I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.
I am trying to create color palette in CSS that will be used through out my application.
For example:
.blue { color: #434544; }
.green { color: #G99933; }
I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:
.editor { background-color: #434544 }
I want to reference back to the .blue style instead of defining it here again. How can I do that?
UPDATE
I found the perfect solution for my question:
Chirpy -> http://chirpy.codeplex.com/
There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.
Here's what it looks like using (scss-flavored) SASS:
$blue: #434544;
$green: #G99933;
.blue { color: $blue; }
.green { color: $green; }
.editor { background-color: $blue }