I'm using grunt-svgstore to merge SVG files. There's an option available called 'cleanup' (https://github.com/FWeinb/grunt-svgstore#optionscleanup) that should:
Clean up all inline style definitions that may jeopardise later
stylesheet-based colouring (fill).
However, mine doesn't seem to work. The rest of it runs fine, I get the prefix and the viewBox and the file is created. It's just the cleanup that doesn't seem to work. Have I got the syntax wrong here (from my Gruntfile.js)?
svgstore: {
options: {
prefix: 'icon-',
cleanup: true,
svg: {
viewBox: '0 0 32 32',
class: 'is-hidden'
}
},
default: {
files: {
'svg/svg-sprite.svg': ['svg/*.svg']
}
}
}
It looks as though you can provide the 'cleanup' option with an array off attributes instead of just true or false. You can add the fill attribute here in the array as well as style attribute if you wanted to.
options: {
cleanup: ['fill', 'style']
}
Hope this helps for future reference.
I was actually going down the wrong path with the question, but I'll leave it up for reference to anyone who runs into the same problem.
The plugin actually works perfectly as intended, which is to remove all inline styles:
<path style="fill:#000000:">
What it doesn't do is remove styles that are applied just using
<path fill="#000000">
The IcoMoon app that I was using to download my SVG icons colours the icons using the latter, and so the plugin won't remove those. Unfortunately, I had to go through each SVG individually and remove that fill="#000000".
Related
I am using variables in CSS/SCSS. I want to set a background (using an SVG file), but it is re-loading every time I navigate or perform some other action.
My -Variables.scss file:
:root {
--backgroundTheme: url('triangle-dark.svg') no-repeat;
}
$variables: (
--backgroundTheme: var(--backgroundTheme)
);
My styles.scss file:
#import "~assets/_variable";
body:before {
background-size: cover;
background: var(--backgroundTheme);
}
How can I avoid multiple times loading of this file?
PS: This is an Angular 8 project.
I had the same problem recently. It was caused by the inspector - "Disable cache" was enabled:
You just need to uncheck it and it will stop making new requests.
To use the image multiple times in the DOM with only one request from the CSS you should use the content property of your pseudo element target to render the image:
body::before {
content: var(--backgroundTheme, 'alt text');
}
Although you'll probably need another approach in handling the image. It might not work for you.
I have two possible idea, not sure if they works for you but it's an easy check:
If you can, don't use css variables, use scss instead. My general approach is to have a settings.scss file and import it whenever needed in the other files. It's a personal preference, I find it easier to manage like that.
It could as well be something wrong in the backend, are the caching headers set right? You can check that in Chrome itself, by clicking on tringle-dark.svg, Headers tab, then Response Headers.
I need to get some colour values out of a DB and use them in my CSS so that each customer has a colour branded version of my React.js application, but I'm not sure how.
I have other elements of branding such as logos, slogans and terminology which I'm pulling out of the DB, storing as a JSON file, and referencing around the site, which works fine, but the problem is the colours which I need to use in my stylesheet as I need to use the pseudo classes that CSS offer.
I've found this postcss-import-json package which claims to do this, but I can't seem to get it to work as intended.
So far I've...
Imported the package...
npm install --save-dev postcss-import-json
Created a JSON file called 'masterConfig.json'
Imported the above file into my main stylesheet using the name i've called my colour (primary)...
:root { #import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
Added the above colour name to my list of colours...
:root {primary: primary}
I've also tried this with the -- prefix by changing to #import-json... (primary as primary prefix --)
...and added it in my code where it is to be used...
style={{background: "var(--primary)"}}
^^^ with and without the prefix
Am I doing something wrong?
I've noticed in the example it uses the $ symbol, so can this only be used with SCSS?
Any help with this, or any other way to achieve this would be great, thanks!
So, I was quite surprised that I didn't already know how to do this, it seems so trivial and doesn't need any additional package.
To change a CSS varibale from JavaScript code, simply target the root element as you normally would, and set the property!
CSS
Create a variable (I'm using a fallback colour)
:root {--primary: #123456;}
JavaScript
I'm using React, and set this is my App.js componentDidMount function so it's global to my app. I've hard-coded the colour, but this can be pulled from the DB.
componentDidMount() {
const root = document.documentElement;
root.style.setProperty('--primary', '#CCCC00');
}
BooYaa!
There appears to be two was to access the variable you've defined, I've done it in two separate ways and you can implement whichever makes your code neater!
Referencing the variable inline:
CSS
:root {
--testcolor: red;
}
HTML
<div style="background:var(--testcolor)">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/
Accessing the variable through a class:
CSS
:root {
--testcolor: red;
}
.exampleClass {
background: var(--testcolor);
}
HTML
<div class="exampleClass">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/1/
I've built a table with react-table and want to use the react-select component as as filtering component. All is up and running except that the dropdown from the react-select component gets hidden by the table.
I've been working quite a long time on this issue. With styling the react-select to look nice within the filter row.
The issue is that I cannot find any other way to override the CSS rules for
.ReactTable .rt-th,.ReactTable .rt-td
which appears to control the row with all filter. This css has the rule of overflow:hidden; and changing it to overflow:visible; resolves my issue.
Hardcoding the changes in this file is of course not the "right way to do it" since I might get trouble elsewhere.
Things I've tried:
Passing styles={{overflow:visible}} to my filterComponent. This results in a strange style='Object object' and my style is not read.
Passing getProps:()=>{style:{overflow:'visible'}}. Have tried some other methods then getProps but with no luck.
Any other ideas or suggestions?
Solution
The prop getTheadFilterThProps was missing in the documentation. The property was found by searching within the react-table folder and check if there where any props that were missing in the documentation.
<ReactTable
getTheadFilterThProps={(state, rowInfo, column) => {
return {
style: {
overflow: 'visible',
}
};
}}
Ok, the answare was quite simple when finding the right props. I ended up searchin for getTheadFilterTrProps in the installation folder of react-table. Then I found that there were some more Props available.
I endend up adding
<React
getTheadFilterThProps={(state, rowInfo, column) => {
return {
style: {
overflow: 'visible',
}
};
}}
I wanted to create a complete background running app that only shows up in the system-tray and doesn't have any "window" as such. I tried setting the "window" attribute to false, but that doesn't work. Is there any way to create a completely background daemon-style application using node-webkit?
Additionally place a tray to truly reflect a background app:
https://github.com/rogerwang/node-webkit/wiki/Tray
Simply use this package.json
{
"window": {
"show": false
}
}
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..