How do you use the css equivalent of background url() in Stylus? background url(image.png) doesnt seem to be working.
Related
Is it possible to use styles from the Material-UI theme in a .css or .module.css file? For instance, I want to be able to do something like this:
.barChart {
fill: theme.pallete.primary.main
}
I'm using the d3 SVG component to create a bar chart and I need the fill value for each bar to be based on the colors from the theme. So eventually, my goal is to do something like this:
g.selectAll('rect')
.data(this.props.data)
.classed("barChart", true)
...
For some reason, using makeStyle classes does not work with d3. For such a simple task, I've been searching for hours and could not find a solution.
My CN1 app features a FloatingActionButton. I need to change its background color. My styles are all defined in CSS. So this one is :
FAB {
background-color: #80ccc4;
}
And if I create the FAB like FloatingActionButton.createFAB(FontImage.MATERIAL_POWER_SETTINGS_NEW, "FAB"); it results in a FloatingActionButton with an added "hyphen" on top of it :
On the contrary if I create the FAB without providing a style and then programmatically set the background color like fab.getAllStyles().setBgColor(0x80ccc4); then I get the expected FAB :
So what should I set in the css file to remove this unwanted "hyphen" ?
Any help appreciated!
You are styling FAB and not FloatingActionButton which is the right UIID for that. If you used setUIID that might be problematic on a FAB as the content is set later.
The reason this is happening is a bit of a problem with CSS. We get the background color of the FAB from the RoundBorder but transparency should be 0 for the icon in the center.
Unfortunately in CSS you can't express both a background color and 0 background transparency. I don't think this is solvable in the CSS so I'll add a special case to the FloatingActionButton that should workaround this.
For example, this is my BEM style stylus code:
.example
background yellow
.block
background black
&--modify1
background red
&--modify2
background blue
If I want to use .example as classname of my component, I know this code:
<Component classname={style.example}>
But what if I want to use .block--modify1 classname ? What should I do ?
You may use some helpers like https://www.npmjs.com/package/bem-cn
or even try bem-react-core library which does this job automatically.
Angular Material Documentation for theming states the following to extend an existing palette for custom theming-
var neonRedMap = $mdThemingProvider.extendPalette('red', {
'500': '#ff0000',
'contrastDefaultColor': 'dark'
});
In this, if i want to specify which color i want as the contrast using
'contrastLightColors': ['800']
is it possible? Doesn't seem to be working at all. Just defaults to black on giving contrastDefaultColor.
Is defining a whole new custom palette for this the only option?
I can't exactly use color css property since there are icons also that need to take that color. All those icons are web components (Angular 1.5x) so i want a centralised control over the colors.
What should i do?
I need to change the color of the titlebar to white color . What is the steps to be done Without using sass. I should be able to do that without theming in sencha touch.
Here is the style which you have to add in your css file.
.x-toolbar-dark {
background-color: white !important;
background-image: none !important;
}
By adding this style, you are simply overriding the sencha titlebar's default styling and now color of titlebar will become white.
NB: I would prefer you to use SASS if possible. Comment here if you need to change your sass file. Thank you.