Why doesn't it work?
i wanna change theme or active menu something like that...
Try to convert your "dark" class into styles.dark and maybe not need to be nasted selector.
.wrapper {
...code;
}
.dark {
background-color:black;
}
It looks like you’re setting ‘isDark’ to be equal to the variable ’prev’ however ‘prev’ isn’t specified in your code anywhere try this instead.
onClick{() => setIsDark(!isDark)}
Also what Manfre said, your conditional class is a global use of ‘dark’ as a class, you need to specify as ‘{styles.dark}’
Related
I have this class:
.currency-flag-clp:before {
background-image: url('~currency-flags/dist/square-flags/clp.svg');
}
I want to add that class dynamically to an html element, so I need to add a class like:
.currency-flag-XXXXX:before {
background-image: url('~currency-flags/dist/square-flags/XXXXX.svg');
}
Is there a way with sass to do that? I don't want to define 270 class per value, I just want to create the class depending on my data.
As you want to set an individual class on the element it seems you have access to your currency data when building the page. In that case there may be an alternative more simple approach without SASS.
(1) ALTERNATIVE (NON SASS) SOLUTION - maybe a simpler approach
(a) Write a css variable 'actual-currency-flag-url' for your actual flag-image to a style block in the head of your file based on the actual user setting/currency.
(b) Then use that variable to build the url-path in css.
// add to <head> of page:
// based on your data maybe you can do it by php
// note: don't use slashes when building url(...)
<style>
:root {
--actual-currency-url: url(url-path/flag-[actualCurrency].jpg);
}
</style>
// change class off html element
// from <div class="currency-flag-XXXXX"> to:
<div class="currency-flag">
// now you can do in your separate stylesheet file:
.currency-flag:before {
background-image: var(--actual-currency-url);
}
Writing the style direct to the element is less elegant but works as well of course.
(2) POSSIBLE SASS SOLUTION - building 270 classes in SASS using a mixin
(a) Based on your data: generate a simple suffix-list and use it to build a SASS map with the suffixes of your flags.
(b) Use #each to build all 270 classes at once
// example code in SASS:
$flag-suffixes: (
USD,
AUD,
EUR,
//...
);
#each $suffix in $flag-suffixes {
.currency-flag-#{$suffix}:before {
background-image: url('~currency-flags/dist/square-flags/#{$suffix}.svg');
}
}
I'm looking for a way to change the view schema/tags used by CKE5 while trying not to reimplement everything. So basically the question is what is the best way to change for example the <strong> element to <b> in the editor.
My current solution is to change the *editing.js file, and the base plugin file to include the modified Editing plugin instead of the original. This works nicely, however, I'm wondering if there is a way to reduce the number of lines of code needed to accomplish this task.
So my solution currently looks like this:
newbold.js:
static get requires() {
return [ NewBoldEditing, BoldUI ];
}
and newboldediting.js:
editor.conversion.attributeToElement({
model: 'bold',
view: 'b'
});
Is there a better way of doing this (that preferably wouldn't involve reimplementing this many classes)?
You could provide only a very simple plugin that overwrites the default bold attribute conversion.
class BoldToB extends Plugin {
init() {
this.editor.conversion.attributeToElement( {
model: 'bold',
view: 'b',
converterPriority: 'high'
} );
}
}
Here's a fiddle for you to test: https://jsfiddle.net/u3zyw67v/
Note that in the fiddle I don't have access to Plugin class so I had to add constructor(). You don't need to do that if you extend Plugin class.
I'm wondering how to add a rule to the dataProcessor like it was possible in the old htmlarea.
In my case I want to add a fixed class to the "ul"-tag.
I tried something like that (tried to adapt the js configuration from ckeditor)
editor:
config:
format_p:
- { element : 'p', attributes : { 'class' : 'ul' }}
...but it does not work.
I did it now via TypoScript like this:
### Set default class for ul from rte
lib.parseFunc_RTE {
externalBlocks := addToList(ul)
externalBlocks {
ul.stripNL = 1
ul.callRecursive = 1
ul.callRecursive.tagStdWrap.HTMLparser = 1
ul.callRecursive.tagStdWrap.HTMLparser.tags.ul {
fixAttrib.class.default = ul
}
}
}
It does basically what I want, BUT still I think this is not optimal. The class is not stored in the DataBase, so if you need to export the content for some reason you will loose this class. And you can not style it in the BE RTE-field (at least not without providing some extra hack css)
So I'm still interested if there is a proper way of doing it in the ckeditor-config.
How can I nest the following in SASS?
.class {
// First styles
}
a.class:visited {
// Second styles
}
I can nest the :visited pseudo class with this, but im not sure how to add the link element?
.class {
// First styles
&:visited {
// Second styles
}
}
I don’t know why you’d want that, adding the a probably just adds unnecesary specificity. If you really need that there’s probably a design flaw somewhere else.
That said, you can make it work using interpolation around the &. However that doesn’t really give you the expected result so you need #at-root as well to make it work.
.class {
// some styles...
#at-root a#{&}:visited {
// ...more styles!
}
}
I don’t think this is the best way of solving your problem though. Using Sass should result in easier maintainable code.
So, I'm fairly new to Three20, but so far the benefits have outweighed the pains in my ass that it's taken to get things working.
I'm using some TTStyledTextLabels, and I need to use a particular font for links. I've overridden TTDefaultStyleSheet and added a new style, like so:
- (TTStyle*)futuraStyle {
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLink next:nil];
}
I can use tags to apply this style to normal text, but it doesn't seem to affect links.
I found that if I add the style class directly to the links, as in
link!
then the links do appear in the proper font. However, they are then no longer tappable! WTF?
Got it!
set the name in the link with a double dash and than the link style will be called with the UIConstrolState parameter, and all will work fine:
- (TTStyle*)futuraStyle:(UIControlState)state{
if(state==UIControlStateNormal){
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLink next:nil];
}else{
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLinkHiglighted next:nil];
}
}
and in your text:
link!