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:
Fabio Pliger
2022-06-24 18:30:07 -05:00
committed by GitHub
parent d25e754beb
commit fcaa57307f
19 changed files with 501 additions and 4691 deletions

View File

@@ -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);