style_connection($connect) {
if $connect==true {
{block}
}
}
+style_connection($bs-normalize)
#import "normalize"
I made mixin, which checks for a variable and then imports the file. But there's a problem - importing file runs first, then there is a check for the presence of a variable. I want if the variable is not defined, the importing file will not run.
I want if the variable is not defined, the importing file will not run.
Well, as I can see, your code works exactly like this.
I've made some examples:
style_connection($connect) {
if $connect==true {
{block}
}
}
+style_connection(true) {
#import "test"
}
test.styl
body
color red
And:
style_connection($connect) {
if $connect==true {
{block}
}
}
+style_connection($undef-var) {
#import "test"
}
The first example yields to:
body {
color: #f00;
}
The second outputs an empty file (doesn't import anything).
Related
I need some help. I'm new to React and I'm trying to translate app with ReactIntl and FormattedMessage. My question is: "Can I translate content of css pseudo element ::before, that is located in my App.css file?" And if it's possible, how? :-)
.btnAdd::before {
content: "Add";
}
Thanks!
A great way is to use html's lang attribute!
Like this:
html[lang="en"] .btnAdd:before {
content: 'Add';
}
html[lang="pl"] .btnAdd:before {
content: 'Dodaj';
}
html[lang="it"] .btnAdd:before {
content: 'Aggiungi';
}
So I am learning on how to work with Gutenberg, and a lot of these tutorials are showing their code in .jsx I believe. I've done a lot of looking up but am unsure if I'm doing this right.
I've tried using a TypeScript file, and when I paste the React code within there, it asks if I'd like to switch to a React file format. I say yes, and it creates a .jsx file, which compiles to a .js file.
However, the code I paste, within WordPress gives me an error:
Invalid regular expression: missing /
I'm not sure if I'm setting the files up right, or if there's something else I'm doing wrong. I pasted my code below
.JSX
const { registerBlockType } = wp.blocks;
registerBlockType('base-theme/tile-block', {
title: "Tile Block",
icon: 'welcome-write-blog',
category: 'common',
edit() {
return (
<div>Only the editor will show this</div>
);
},
save() {
return (
<div>Only the front end will show this</div>
);
}
});
.JS Compiled
var registerBlockType = wp.blocks.registerBlockType;
registerBlockType('base-theme/tile-block', {
title: "Tile Block",
icon: 'welcome-write-blog',
category: 'common',
edit: function () {
return Only;
the;
editor;
will;
show;
this < /div>;
}
});
save();
{
return Only;
the;
front;
end;
will;
show;
this < /div>;
;
}
;
I am using polymer v1.9.1 and testing on Chrome.
I have a custom element containing a <paper-input>, and I want its text color to depend on some other property. This color is determined by the custom properties --paper-input-container-input-color or --primary-text-color, so I set a class-dependent value for those:
#input { --primary-text-color: red; }
#input.green { --primary-text-color: green; }
<paper-input id='input' class$='[[_getClasses(checked)]]'></paper-input>
_getClasses: function(checked) { return checked ? '':'green'; }
The text is always red, I guess because of this limitation in the shim (which I guess my browser must be using). So I add a call to updateStyles:
_getClasses: function(checked) {
this.async(function() {
this.$.input.updateStyles();
});
return checked ? '':'green'; }
}
Now it works correctly after checked first changes, but the initial state is incorrect (ie if checked is initially false, it is initially red but should be green). I tried adding another async(updateStyles()) to ready but no luck (yet if I call input.updateStyles() from the javascript console it corrects itself). How can I work around this?
Complete example: http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/
I've updated the plunk with the fix.
I've updated styles in attached callback instead of ready.
_getClasses: function(checked) {
return checked ? '' : 'green';
},
attached: function() {
this.updateStyles();
}
When I change the inline style of a component depending on the state, I get this error.
Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated.
In my render function, I'm calling this function before the return, to check a property.
this._isGameOver();
_isGameOver:
_isGameOver()
{
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
So where and how do I use this clone? The documentation doesn't give any solid examples.
Sean
No need for cloneElement in your example, simply return a new style object instead of mutating the existing one.
_isGameOver() {
if (this.props.gameOver === false) {
return {
well: { background: '#f5f5f5' },
h1: { color: '#32936F' }
}
}
else return {
well: { background: 'red' },
h1: { color: 'white' }
}
}
Then you can merge the new styles with the old styles wherever you need using something like Object.assign
var newStyle = this._isGameOver()
return <h1 style={Object.assign({}, style.h1, newStyle.h1)} />
I'm guessing that you're defining that style object outside of your component (perhaps importing it?). So wherever you're going to modify that style you need to make a clone of it.
I always import as baseStyles (to indicate it shouldn't be mutated) and use lodash.cloneDeep() (because cloning deep objects is fiddly to do yourself).
So your function becomes
import cloneDeep from 'lodash/cloneDeep';
import baseStyle from '../blah/yourStyle.js';
_isGameOver()
{
const style = cloneDeep(baseStyle);
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
You could also do something like:
const wellStyle = {
...style.well,
background: '$f5f5f5',
}
and then pass wellStyle to your component rather than style.well.
It might not suit your situation, but I only change styles inside the actual render method. It keeps everything in the one place (cloning your import in more than one place won't work).
This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}