mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-21 19:25:35 -05:00
See you later tailwind (#452)
* start removing tailwind and rebuilding some css * add css to pybox and add class to repl * set output component visibility * replace tailwind class with single component class * add styles to css * replace classes on button * replace classes on input * replace classes in title * replace classes on list * replace classes * add new style file * add list element style * remove tailwind classes from todo example * revert link on examples files * remove tailwind config files * remove commented old code * add missing ;
This commit is contained in:
@@ -18,7 +18,7 @@ export class PyBox extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
const mainDiv = document.createElement('div');
|
||||
addClasses(mainDiv, ['flex', 'mx-8']);
|
||||
addClasses(mainDiv, ['py-box']);
|
||||
|
||||
// Hack: for some reason when moving children, the editor box duplicates children
|
||||
// meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>
|
||||
@@ -44,17 +44,20 @@ export class PyBox extends HTMLElement {
|
||||
|
||||
// now we need to set widths
|
||||
this.widths = [];
|
||||
|
||||
if (this.hasAttribute('widths')) {
|
||||
for (const w of this.getAttribute('widths').split(';')) {
|
||||
this.widths.push(`w-${w}`);
|
||||
if (w.includes('/')) this.widths.push(w.split('/')[0])
|
||||
else this.widths.push(w)
|
||||
}
|
||||
} else {
|
||||
this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]];
|
||||
this.widths = Array(mainDiv.children.length).fill('1 1 0')
|
||||
}
|
||||
|
||||
this.widths.forEach((width, index) => {
|
||||
const node: ChildNode = mainDiv.childNodes[index];
|
||||
addClasses(node as HTMLElement, [width, 'mx-1']);
|
||||
(<HTMLElement>node).style.flex = width;
|
||||
addClasses((<HTMLElement>node), ['py-box-child']);
|
||||
});
|
||||
|
||||
this.appendChild(mainDiv);
|
||||
|
||||
Reference in New Issue
Block a user