Related
I have a project using next.js and tailwind v2.2. When I installed tailwind and imported to _app.tsx, everything was ok and it works in _app.tsx and components which is in components folder. But when I try to use tailwind custom classes in sub folder of components folder, It doesn't work!
For example it works in footer.tsx component but doesn't work in files that are indexComponents (Picture below)
tailwind.confing.js:
// tailwind.config.js
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}','./components/indexComponents/*.{js,ts,jsx,tsx}'] ,
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
// blue-mode
// "color-50": "#eff6ff",
// "color-100": "#dbeafe",
// "color-200": "#bfdbfe",
// "color-300": "#93c5fd",
// "color-400": "#60a5fa",
// "color-500": "#3b82f6",
// "color-600": "#2563eb",
// "color-650": "#086ad8",
// "color-700": "#1d4ed8",
// "color-800": "#1e40af",
// "color-900": "#1e3a8a",
// purple mode
"color-50": "#faf5ff",
"color-100": "#f3e8ff",
"color-200": "#e9d5ff",
"color-300": "#d8b4fe",
"color-400": "#c084fc",
"color-500": "#a855f7",
"color-600": "#9333ea",
"color-650": "#9333ea",
"color-700": "#7e22ce",
"color-800": "#6b21a8",
"color-900": "#581c87"
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1200px",
"2xl": "1200px"
},
container: {
center: true,
padding: "1rem"
},
fontFamily: {
heading: ["Poppins, sans-serif"],
body: ["Montserrat, sans-serif"]
},
boxShadow: {
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
DEFAULT: "0px 2px 4px rgba(148, 163, 184, 0.05), 0px 6px 24px rgba(235, 238, 251, 0.4)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
"3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
none: "none"
},
fontSize: {
xs: ".75rem",
sm: ".875rem",
tiny: ".875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": ["2.25rem", "3.2rem"],
"5xl": ["3rem", "4rem"],
"6xl": ["4rem", "1rem"],
"7xl": ["5rem", "1rem"],
"10xl":"6rem"
},
extend: {
keyframes:{
modalDown:{
'0%,50%':{marginTop:-300},
'50%,100%':{marginTop:0}
}
},
animation:{
modalDown:'modalDown 0.5s linear'
},
width: {
'3/4': '75%',
},
colors: {
white: "#ffffff",
body: "#1e293b",
//blue-mode
// "colorGray-50": "#f8fafc",
// "colorGray-100": "#f1f5f9",
// "colorGray-200": "#e2e8f0",
// "colorGray-300": "#cbd5e1",
// "colorGray-400": "#94a3b8",
// "colorGray-500": "#64748b",
// "colorGray-600": "#475569",
// "colorGray-700": "#334155",
// "colorGray-800": "#1e293b",
// "colorGray-900": "#0f172a",
// "primary": "rgb(96,165,250)",
// //purple mode
"colorGray-50": "#f5f3ff",
"colorGray-100": "#ede9fe",
"colorGray-200": "#ddd6fe",
"colorGray-300": "#cbd5e1",
"colorGray-400": "#a78bfa",
"colorGray-500": "#64748b",
"colorGray-600": "#475569",
"colorGray-700": "#6d28d9",
"colorGray-800": "#5b21b6",
"colorGray-900": "#4c1d95",
"primary":"rgb(96,165,250)",
},
height: {
"128": "32rem"
},
}
},
important: true,
variants: {
extend: {}
},
plugins: []
};
For example I have 'text-color-400' custom class that works in _app.tsx and doesn't work in the components of indexComponents.When I inspect the element don't see anything from globals.css
globals.css:
/*tailwindcss utility classes*/
#tailwind base;
#tailwind components;
#tailwind utilities;
I tried change the purge to:
['./pages/**/*.{js,ts,jsx,tsx}','../public/components/**/*.{js,ts,jsx,tsx}','../public/components/indexComponents/*.{js,ts,jsx,tsx}']
But I have the same problem!
I need to give a custom scroll style in Autocomplete Listbox.
I tried and research it and none of them worked.
My last codes
<Autocomplete
fullWidth
popupIcon={<KeyboardArrowDownIcon />}
id="combo-box-demo"
options={allTableData}
noOptionsText={"Məhsul tapılmadı"}
getOptionLabel={(option) => option.name ?? option}
ListboxProps={{
style: {
maxHeight: "200px",
"&::-webkit-scrollbar": {
width: "20px",
},
},
}}
Yes, you can pass a custom className to ListboxProps of Autocomplete component like this:
ListboxProps={{
className: "myCustomList"
}}
And then add scrollbar-related CSS to this class like this:
.myCustomList::-webkit-scrollbar {
width: 12px;
background-color: #5f6f9c;
}
.myCustomList::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #d62929;
}
You can take a look at this sandbox for a live working example of this solution.
I am trying to put together some basic reactive forms.
The problem we have is that our compliance department is not going to let us go through because all of the contrasts for material form fields are too transparent/light.
I am looking for a way to darken up all of the form fields, outlines, disabled text etc.
I have been trying to make it global by going into my primary stylesheet. However I cannot seem to figure out how to override material in this way.
I have tried the following within the scss:
.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
opacity: 1.0 !important;
}
.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
opacity: 1.0 !important;
}
Or higher in the themes:
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);
$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);
$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );
Neither of these approaches seem to effect the project and components in any way.
Is there a method I can use to darken the contrast of all form fields globally? Without resorting to directives or having to include the same manual css to every component.css ?
Thanks much.
EDIT: I am trying to overcome this very transparent.
You should be able to override most of the mat-form-field rules to meet your requirements. Here are some examples you can add to your top level style sheet for the 'fill' appearance:
.mat-form-field-appearance-fill {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.08);
}
}
.mat-form-field-appearance-fill.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
}
https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss
For appearance="outline"
.mat-form-field-appearance-outline {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.4);
}
}
.mat-form-field-appearance-outline.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.2);
}
}
https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html
I want to change the default border color of an outlined textfield from gray to a darker blue.
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={classes.codeInput}
error={code ? code.length < 10 : false}
/>
This is the codeInputclass:
codeInput: {
marginTop: theme.spacing.unit,
},
I have tried overriding the color via theme, but it does not work:
overrides: {
MuiOutlinedInput: {
root: {
borderColor: "#2b303e"
},
notchedOutline: {
borderRadius: "0",
borderWidth: "2px",
borderColor: "#2b303e"
},
},
}
It is still gray as you can see in the image.
I have identified the following css rules as the problem. With disabling this, everything looks fine. I just don't know how to do this
.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
border-color: rgba(0, 0, 0, 0.23);
}
Create a new css class for example:
// app.css
.blueBorder {
}
Add in the border you want and add !important; to overwrite.
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
Assign it to your component:
// js / react component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={`blueBorder ${classes.codeInput}`}
/>
Update to show error class
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
// Red border to denote error
.blueBorder-error {
border-radius: 0px!important;
border: 2px solid red!important;
}
Use the error class in the components className
condition ? true : false
// js / component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={code.length < 10 ? `blueBorder-error ${classes.codeInput}` : `blueBorder ${classes.codeInput}}
/>
I'm developing a Web App using ExtJS 4.2, and I want the layout to look something like this:
So far, I've implemented the different colors for the Tab Label. I made a css file with the following properties:
.x-tab-first.x-tab-default-top{
background: rgb(0, 169, 180) !important;
}
.x-tab-second.x-tab-default-top{
background: rgb(251, 183, 18) !important;
}
.x-tab-third.x-tab-default-top{
background: rgb(2, 153, 130) !important;
}
And in each of the tab in the tab panel, I assigned the corresponding class as their cls, so the first tab has x-tab-first as its cls, and so on.
But as you can see in the following photo, if I click on "Find us here", the tab contents changes accordingly, but the bar below does not change:
And for the other two tabs, the bar below does not change as well, it just stays as is.
I have tried this:
.x-tab-second-active.x-tab-bar-body{
background: rgb(251, 183, 18) !important;
}
However I am not quite sure where and how to place this code.
I want the bar below the tab titles to follow the color as well.
As per your requirement, you need to add your activeTab cls to tabbar-strip by manually on tabchange event.
In this FIDDLE, I have created a demo using tabpanel. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
CSS part
<style>
.x-my-tabpanel .x-tab-bar {
background: red;
}
.x-my-tabpanel .x-tab-default-top {
border: 0px !important;
box-shadow: 0px 0px 0px;
}
.x-my-tabpanel .x-tab-bar-strip {
top: 23px;
height: 5px !important;
}
.x-tab-first.x-tab-default-top,
.x-tab-first.x-tab-bar-strip {
background: rgb(0, 169, 180);
border-color: rgb(0, 169, 180);
}
.x-tab-second.x-tab-default-top,
.x-tab-second.x-tab-bar-strip {
background: rgb(251, 183, 18);
border-color: rgb(251, 183, 18);
}
.x-tab-third.x-tab-default-top,
.x-tab-third.x-tab-bar-strip {
background: rgb(2, 153, 130);
border-color: rgb(2, 153, 130);
}
.x-my-tabpanel .x-tab .x-tab-inner {
color: #fff;
}
</style>
ExtJS part
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.tab.Panel', {
height: 200,
renderTo: Ext.getBody(),
cls: 'x-my-tabpanel',
activeTab: 0,
defaults: {
padding: 10
},
items: [{
title: 'What to Expect',
html: 'What to Expect'
}, {
title: 'Find us here',
html: 'Find us here'
}, {
title: 'Game Machenics',
html: 'Game Machenics'
}],
listeners: {
/*
* this event will fire on view render
*/
afterrender: function (panel) {
var clsArr = ['first', 'second', 'third'];
panel.query('tab').forEach((item, index) => {
let cls = `x-tab-${clsArr[index]}`;
item.addCls(cls);
item.cls = cls;
});
this.addToStripCls();
},
/*
* this event will fire on tab change
*/
tabchange: function (panel, newtab) {
this.addToStripCls();
}
},
/*
* this function will set active tab cls to strip
* before to adding we need to remove previous cls
*/
addToStripCls: function () {
var strip = Ext.get(this.el.query('.x-tab-bar-strip')[0]),
clsArr = ['first', 'second', 'third']
clsArr.forEach(el => {
if (strip.hasCls(`x-tab-${el}`)) {
strip.removeCls(`x-tab-${el}`);
}
});
strip.addCls(this.activeTab.tab.cls);
}
});
}
});