I'm new to Tailwind. I'm currently extending the list of components/utilities with a lot of similary purposed classes:
/* components.css / utilities.css (doesn't matter in this context) */
.pt-section {
#apply pt-16 lg:pt-20;
}
.mt-section {
#apply mt-16 lg:mt-20;
}
.-mt-section {
#apply -mt-16 lg:-mt-20;
}
.top-section {
#apply top-16 lg:top-20;
}
.-top-section {
#apply -top-16 lg:-top-20;
}
/*
Also: pb-section, mb-section, -mb-section bottom-section, -bottom-section, gap-section...
*/
The purpose of this utils is to be able to quickly make e.g. grid gap "same width as the section margin-bottom height" – pretty usable stuff.
I see that it would be much nicer to define a single responsive value in the config. I already do that for non-responsive constants describing body and header heights:
// tailwind.config.js
theme: {
extend: {
spacing: {
"13": "3.25rem",
"18": "4.5rem",
"header": "5rem",
"header-1": "calc(5rem - 1px)",
"body": "calc(100vh - 5rem)",
"sectionT": ??? should be responsive !!!
"sectionB": ??? should be responsive !!!
}
}
},
In this way TW would auto-derive all that I need. I would get mt-sectionT, gap-sectionB etc. classes automatically.
Is there a way to declare custom responsive (breakpoint-depending) values in the tailwind.config.js? Without writing a custom plugin, I mean.
It sounds like a common case, yet I can't find the answer in the docs (checked https://tailwindcss.com/docs/theme#customizing-the-default-theme and other pages) or on StackOverflow.
Hi i am extending the heading block using the filter hooks functions. so i am using the "blocks.registerBlockType" to add additional attributes. i am using the "editor.BlockEdit" to have my inspactor controls and update the attributes values. and i use the "blocks.getSaveContent.extraProps" to save the added attributes on the front end.
and indeed all attributes pass to the front side. but, the issue is that while editing none of the changes are reflected in the full site editor. the attributes are changing but it does not displayed inside the full site editor.
for example: this is a function that change the margin top attribute:
const updateMTDvalue = (newDTval) => {
setAttributes({ marginTop: (newDTval === undefined ? '' : newDTval) });
}
and as i said the new values does pass to the save function and works on the front end. but in the full site editor....nothing.
so i thought maybe i should add styles in the edit function like so:
if (attributes.desktopTop && attributes.desktopTop != undefined && attributes.desktopTop != '') {
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit
};
}
as you can see i also try to hard code display and even a css custom property, as well as the attribute values. none of it pass the the element.
but when i have tried this:
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit,
typography: {
fontSize: '3rem'
},
spacing: {
margin: {
top: fullTopM
}
}
};
the spacing and typography does work on the element inside the full site editor.
any idea why? why the update function itself, that update the attribute, does not change the element in the editor? and how can i add the styles to the element in the editor?
NOTICE i am talking about the full site editor, not the posts and pages editor.
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
I am using FluentUI drop-down control and can't find a way to customize the on-hover styles. I want to change the on-hover color to blue from grey. I tried following but it didn't seem to work.
Any help would be highly appreciated.
const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItems: {
selectors: {
'& .dropdownItem-168:hover': {
backgroundColor: '#0067B8',
color: 'white',
},
},
};
.dropdownItem-168 is the class for drop-down items.
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
You don't address the generated css class names (e.g. dropdownItem-168) directly in your IStyle configuration objects. Rather, you target them based upon the IDropdownStyle property that isolates the styles used in different "entry points" of the component. Based on the docs, it looks like "dropdownItems" (plural) is the entry point for styling the container for all drop down items, not the styling entry point for the items within the container individually. try something like:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItem: { // note: singular "dropdownItem"
selectors: {
":hover" : {
backgroundColor: "#0067B8",
color: "white",
}
}
}
};
In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.
It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}
Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use