in my app.css file, I have got a class for header and components color value.
I am using css not sass or scss.
.header-class {
color: #1100aa !important;
}
and I want to change the color in theme setting in my frontend dialog.
How can I do this?
Define a ui for the panel, see https://docs.sencha.com/extjs/7.0.0-CE/modern/ext.Panel.html .css_mixin-panel-ui
#include panel-ui(
$ui: 'dialog',
$header-font-weight: normal,
$header-padding: 5px 7px,
$header-min-height: 46px,
$header-min-height-big: 46px,
$header-background-color: #3a3a3a,
$header-padding-big: 0 10px 0 0,
)
Related
I have multiple components in react project and What I'm trying to do is set all the text on the page to white .
This is the index.css file :
:root {
color: white !important;
}
But it's not working so How can I set every text rendered on the page to white ?
*{
color: white !important;
}
Try this one.
I want to use the primary color from the ant design theme. I believe the less tag is: #primary-color . How do I use this value for a custom div that I want the border color to match? Also this is with an app made by create-react-app.
I want to be able to do something like:
border: '2px solid #fff' // Instead of white, it uses the theme's primary color
In the very top of your .less file import Ant Design styles: #import '~antd/dist/antd.less';
And then you can use any antd color variable:
#import '~antd/dist/antd.less';
.box {
border: 2px solid #primary-color;
}
I want border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.24); to be applied to every border used in my website. I tried overriding the theme in Material UI , but I am not sure how to modify the boxShadow in the theme and make it default so that I do not have to apply it for every single element in the website
For instance, there is a label (without textfield!):
Ext.create('Ext.form.Label', {
id: "lb1",
height: 20,
html: "Title"
cls: 'cls1'
})
How can I change the background color dynamically without a CSS?
There are couple of ways to achieve that, but all of them use manipulate CSS.
1. Change css class on label
CSS classes
.cls1 {
background-color: #fff;
}
.cls2 {
background-color: #ccc;
}
ExtJS
label.removeCls('cls1');
label.addCls('cls2');
2. Change style on DOM Element
label.getEl().setStyle('background', '#CCC');
Good Luck!
Having tried just about everything Im at a loss how to change the color of splitter bars using SASS for Ext JS 4.2.2 - they always appear as a white bar.
Say I have a hbox or vbox layout with two flex items and a splitter, the bar created by the splitter to allow the components to be resized proportionately to one another is always white- is there anyway this can be changed through a SASS config?
Many thanks!
/resources/themes/stylesheets/ext4/default/util/_splitter.scss indicates that it doesn't use a variable
#mixin extjs-splitter {
.#{$prefix}splitter {
.#{$prefix}collapse-el {
position: absolute;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat !important;
}
}
}
You'll have to override it in CSS, or create your own theme.
CSS
.x-splitter-vertical {
background-color: #abc;
}