If I use #tailwindcss/forms it will be styled like Unstyled on the following site.
chackbox should look like Simple on the following site.
Currently, when you press down on the checkbox like Unstyled on the site, a border is displayed. I want to eliminate it.
enter link description here
//taiwind.config.js
plugins: [
require('#tailwindcss/custom-forms'),
]
You will have to override the the style for box-shadow which is applied on checkbox and radio:
[type='checkbox']:focus, [type='radio']:focus {
box-shadow: none;
}
Related
I want all users see scrollbars as its in dark mode of chrome;
But some users dont use dark theme in chrome so I set colorSchema:"dark" of parent div style and it looks like pic below;
Why its diffirent from origin dark style? how to use the schema with strong dark?(first pic)
I know there is custom css solution to change scrollbar css. its ok, but I am using reactjs, is it possible to style scroll bar in react component file?
const PARENTDIV: React.CSSProperties = {
backgroundColor: color.quizBackground,
flex: 1,
colorScheme: 'dark',
}
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
I have a row of pivot buttons which I use for my spfx form in a web part. I need to be able to give a grey background when users hover over the control. so at the moment my control looks like this :
So the blue bar changes on select but I want a grey hover over so the users know where to click.
Thanks in advance.
I have written this code to get the style but I cannot add the style into the component:
const styler = {
root: [
{
selectors: {
':hover': {
background: '#2C3539'
}
}
}
]
};
In this codepen you can see how you can pass styles to the correct style areas for Pivot control.
link: [
!rootIsTabs && {
selectors: {
':hover': {
backgroundColor: palette.neutralLighter,
color: palette.neutralDark
},
':active': {
backgroundColor: palette.neutralLight
}
}
}
],
To mention also, is that the styles I demo will be default styles in the next major release (Fabric v7), so you can have this in your code until we have an official release (within a few weeks) and when you have the ability to upgrade you can remove it and have it backed in into the component.
P.S.: the animation is another bonus that comes with this new major release.
I have a dark-blue toolbar, and I need that buttons situated on TitleBar have $button-color: #fff;
and some another color in all other cases, like on the attached image.
What's the right way to do it?
As the buttons located in the title toolbar are a particular case, you should create a separate ui for this kind of button using theme mixins. You extend the default mixin, give it a new name, set the desired parameters
#include extjs-button-small-ui(
$ui: 'titlebarbutton',
$color: #fff
);
#include extjs-button-medium-ui(
$ui: 'titlebarbutton',
$color: #fff
);
#include extjs-button-large-ui(
$ui: 'titlebarbutton',
$color: #fff
);
And then use it in your button configuration like so:
{
xtype: 'button',
ui: 'titlebarbutton',
...
}
OR
As #D.V. suggested in the comments, you can simply use a css rule:
{
xtype: 'button',
cls: 'app-titlebar-button',
...
}
Note that the button is composed of multiple elements, and this class will be applied to the top one, but the color of the text is determined by the inner element with the class of x-btn-inner, so you css rule will look like this:
.app-titlebar-button .x-btn-inner {
color: #fff;
}
How can I control to opacity of a disabled panel with a mask.
I would like to disable to the panel (meaning It will be touchable) and leave its opacity as is.
Thx
You can create your own CSS style sheet that overrides ExtJS's default style sheet for disabled items. In ext-all.css, there are several style configurations for the .x-item-disabled class that you can take a look at. For example, they specify the opacity for toolbar button icons like so:
.x-toolbar .x-item-disabled .x-btn-icon {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
So you'll have to look up what class your panel belongs to and construct a style sheet that includes specification for your particular selectors.
CSS Syntax (Wikipedia)
I would recommend to whoever lands on this post, to create a class for the panel disabled state in your own css file and then configure the panel disabled state class as follows, so you will only affect the desired panel and not the entire application:
In your CSS
.my-disabled-panel {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
And in the panel config...
Ext.create('Ext.panel.Panel', {
[...],
disabledCls: 'my-disabled-panel',
[...]
}