I'm attempting to set the text highlight colors in my project that uses TailwindCSS. This can be done fairly easily using the "selection" modifier that Tailwind provides. This works fine except when I try to set different colors for dark mode. I can't figure out what I'm doing wrong but I can't find anything online regarding how to correctly use the "dark" and "selection" modifiers in conjunction.
I tried the following syntax in attempt to get it to work correctly:
<html className="selection:bg-blue selection:text-purple dark:selection:bg-pink dark:selection:text-blue">
However, this only picks up the selection:bg-blue selection:text-purple styles and not the dark mode selection styles (dark:selection:bg-pink dark:selection:text-blue) when dark mode is activated.
Any thoughts on what I'm doing wrong? Thanks in advance.
Edit:
The colors do exist in my tailwind config:
I figured this out. I wasn't thinking and realized what I was doing wrong was putting the selection classes on the HTML tag. The HTML tag is where the dark mode class gets applied and due to this, the selection class wasn't a descendant of the .dark mode class. To fix it, I moved the selection classes to the body tag.
Related
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
I want to change the colour of the thumb of the Switch component to green instead of the standard black.
According to the documentation "You can customize the look and feel of a switch using styles, either directly in the theme.res file or in CSS." and "The thumb will be rendered using Switch's Style.getFgColor(). It will use the selected style, when in the "on" position, the unselected style when in the "off" position,"
https://www.codenameone.com/javadoc/com/codename1/components/Switch.html
I have tried adding a "Switch" style to the theme.res file. In the theme preview I see my changes. When I run the app in the simulator, there is no change.
I also tried changing the style in code:
swPrdp.setUIID("Switch");
I still get the standard black thumb.
I also tried:
swPrdp.getAllStyles().setBgColor(0xcccccc, true);
swPrdp.getSelectedStyle().setFgColor( 0x59925A, true);
with and without the second argument (true). Still no change.
I am trying to keep the app size to a minimum, so I don't want to go the route of specifying images.
Where am I going wrong?
This should work in the theme too and works for me in the style object (which is easier to write here:
Form hi = new Form("Switch", BoxLayout.y());
Switch s = new Switch();
s.getAllStyles().setFgColor(0xff0000);
s.getAllStyles().setBgColor(0xff);
hi.add(s);
hi.show();
I am trying to implement a finite number of colors (like square icons) on the Draftail editor itself. What will be the best way to approach this?
It should be similar to how Microsoft Word displays the font color or something along those lines.
Thanks in advance.
I'm not sure if it's the best approach but here is what I came up with:
https://gist.github.com/benoitvogel/46022124d46de03ed2078603fb24ca97
This defines a new inline style which encloses the selected text between <span class="mycustomclass"></span> (change feature_name according to the CSS class you want to use).
Then, you just have to define the corresponding .mycustomstyle CSS class in your frontend as usual:
.mycustomstyle {
color: purple;
}
You can also modify control['style'] to change the way this style will be displayed in the editor.
You will get 1 icon/label per CSS class, so it's not really like in Word as you won't get a proper selector. I haven't tried it myself, but according to Wagtail docs icon can reference SVG, so you might be able to display color squares instead of labels.
Hope it fits your needs.
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
This question is specific to Adobe CQ5, so ExtJS answers by themselves won't be that helpful.
I have a custom text component with a menu option to change the background color. We're referencing a colorfield component in our dialog.xml, and so far everything works. The color menu appears with the default set of colors in the palette and can be clicked. So far so good.
I would now like to customize the palette and only show a select set of colors specific to our client. How do I achieve this?
Here's the relevant dialog.xml snippet so far:
<bgcolor
jcr:primaryType="cq:Widget"
fieldLabel="Background color"
name="./bgColor"
showHexValue="true"
xtype="colorfield"/>
For future reference, you could probably get by creating a custom ColorField to call a custom ColorMenu which sets a custom ColorPalette. If ColorField had configurable options, these would probably be mentioned in the Ext docs or found in the JS file itself in /libs/cq/ui/widgets/..
Found it on dev.day.com - http://dev.day.com/content/kb/home/cq5/Development/HowToCreateCustomClientLib.html
Simply put, override the ExtJS widget with your own. Not ideal but it'll do.