Update to Metronic 9.07 and Tailwind 3.4.13

This commit is contained in:
Daeng Deni Mardaeni 2024-10-19 15:34:15 +07:00
parent 8e4784c6ce
commit c8e9062676
15 changed files with 973 additions and 863 deletions

View File

@ -9,25 +9,25 @@
"@rollup/plugin-inject": "^5.0.5",
"autoprefixer": "^10.4.20",
"laravel-vite-plugin": "^1.0",
"postcss": "^8.4.45",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"sass": "^1.77.6",
"tailwindcss": "^3.4.11",
"vite": "^5.0"
"vite": "5.4.6",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"jquery": "^3.7.1",
"mini-svg-data-uri": "^1.4.4",
"notie": "^4.3.1",
"sweetalert2": "^11.12.4",
"toastr": "^2.1.4",
"tom-select": "^2.3.1",
"apexcharts": "^3.53.0",
"apexcharts": "^3.54.1",
"axios": "^1.7.7",
"clipboard": "^2.0.11",
"esri-leaflet": "^3.0.12",
"esri-leaflet-geocoder": "^3.1.4"
"esri-leaflet-geocoder": "^3.1.5",
"jquery": "^3.7.1",
"mini-svg-data-uri": "^1.4.4",
"notie": "^4.3.1",
"sweetalert2": "^11.14.3",
"toastr": "^2.1.4",
"tom-select": "^2.3.1"
}
}

View File

@ -1,6 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

9
prettier.config.js Normal file
View File

@ -0,0 +1,9 @@
const config = {
useTabs: true,
tabWidth: 2,
singleQuote: true,
bracketSameLine: true,
arrowParens: 'always',
};
module.exports = config;

View File

@ -36,7 +36,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
}
protected _click(element: HTMLElement, event: Event): void {
if (element.hasAttribute('href') && element.getAttribute('href') !== '#') {
if (element.hasAttribute('href') && element.getAttribute('href') === '#') {
return;
}
@ -872,7 +872,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
return KTData.get(subElement, 'menu') as KTMenu;
}
}
return null;
}
@ -1149,7 +1149,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
if (menu !== null) {
if (target.tagName == 'a' || target.hasAttribute('href')) {
menu.dismiss(target);
}
}
return menu.link(target, event);
}
}

View File

@ -10,6 +10,7 @@ import { KTStickyInterface, KTStickyConfigInterface } from './types';
export class KTSticky extends KTComponent implements KTStickyInterface {
protected override _name: string = 'sticky';
protected override _defaultConfig: KTStickyConfigInterface = {
target: 'body',
name: '',
class: '',
top: '',
@ -23,6 +24,8 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
activate: '',
};
protected override _config: KTStickyConfigInterface = this._defaultConfig;
protected _targetElement: HTMLElement | Document | null = null;
protected _attributeRoot: string;
protected _eventTriggerState: boolean;
protected _lastScrollTop: number;
@ -45,11 +48,20 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
this._eventTriggerState = true;
this._lastScrollTop = 0;
const targetElement = this._getTarget() === 'body' ? document : KTDom.getElement(this._getTarget());
if (!targetElement) return;
this._targetElement = targetElement;
this._handlers();
this._process();
this._update();
}
private _getTarget(): string {
return (this._element.getAttribute('data-sticky-target') as string || this._getOption('target') as string);
}
protected _handlers(): void {
window.addEventListener('resize', () => {
let timer;
@ -63,7 +75,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
);
});
window.addEventListener('scroll', () => {
this._targetElement.addEventListener('scroll', () => {
this._process();
});
}
@ -77,7 +89,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
return;
}
const st = KTDom.getScrollTop();
const st = this._getTarget() === 'body' ? KTDom.getScrollTop() : (this._targetElement as HTMLElement).scrollTop;
const release = (this._releaseElement && KTDom.isPartiallyInViewport(this._releaseElement));
// Release on reverse scroll mode

View File

@ -1,4 +1,5 @@
export interface KTStickyConfigInterface {
target: string,
name: string,
class: string,
zindex: string,

View File

@ -79,12 +79,12 @@ export class KTTooltip extends KTComponent implements KTTooltipInterface {
}
protected _show(): void {
if (this._isOpen) return;
if (this._timeout) {
clearTimeout(this._timeout);
}
if (this._isOpen) return;
this._timeout = setTimeout(() => {
const payload = { cancel: false };
this._fireEvent('show', payload);
@ -120,12 +120,12 @@ export class KTTooltip extends KTComponent implements KTTooltipInterface {
}
protected _hide(): void {
if (!this._isOpen) return;
if (this._timeout) {
clearTimeout(this._timeout);
}
if (!this._isOpen) return;
this._timeout = setTimeout(() => {
const payload = { cancel: false };
this._fireEvent('hide', payload);

View File

@ -32,7 +32,7 @@ const KTDom = {
hasClass(element: HTMLElement, className: string): boolean {
// Split classNames string into an array of individual class names
const classes = className.split(' ');
// Loop through each class name
for (const className of classes) {
// Check if the element has the current class name
@ -41,7 +41,7 @@ const KTDom = {
return false;
}
}
// Return true if all classes are present
return true;
},
@ -154,7 +154,7 @@ const KTDom = {
const result: Array<HTMLElement> = [];
const l = element.childNodes.length;
let i = 0;
let i = 0;
for (i = 0; i < l; i++) {
if (element.childNodes[i].nodeType == 1 && (element.childNodes[i] as HTMLElement).matches(selector)) {
@ -221,7 +221,7 @@ const KTDom = {
},
reflow(element: HTMLElement): void {
element.offsetHeight;
element.offsetHeight;
},
insertAfter(element: HTMLElement, referenceNode: HTMLElement) {
@ -338,7 +338,7 @@ const KTDom = {
}
prefix = KTUtils.camelCase(prefix);
const attributes: { [key: string]: KTOptionType } = {};
const keys = Object.keys(element.dataset).filter((key) => key.startsWith(prefix));
@ -356,6 +356,9 @@ const KTDom = {
document.addEventListener('DOMContentLoaded', () => {
callback();
});
document.addEventListener("livewire:navigated", () => {
callback();
});
} else {
callback();
}

View File

@ -1,25 +1,24 @@
/* eslint-disable max-len */
import plugin from 'tailwindcss/plugin';
export default plugin(({addComponents, theme}) => {
export default plugin(({ addComponents, theme }) => {
// Base
addComponents({
'.card': {
'display': 'flex',
display: 'flex',
'flex-direction': 'column',
'box-shadow': 'var(--tw-card-box-shadow)',
'background-color': 'var(--tw-card-background-color)',
'border-radius': theme('custom.components.common.borderRadius.card'),
'border': 'var(--tw-card-border)',
'box-shadow': 'var(--tw-card-box-shadow)',
'background-color': 'var(--tw-card-background-color)',
'border-radius': theme('custom.components.common.borderRadius.card'),
border: 'var(--tw-card-border)'
},
'.card-title': {
'font-size': theme('fontSize.base'),
'line-height': theme('fontSize.base.1.lineHeight'),
'font-weight': theme('fontWeight.semibold'),
'color': 'var(--tw-gray-900)',
color: 'var(--tw-gray-900)'
},
'.card-header': {
'display': 'flex',
display: 'flex',
'min-height': '56px',
'align-items': 'center',
'justify-content': 'space-between',
@ -27,37 +26,37 @@ export default plugin(({addComponents, theme}) => {
'padding-left': theme('custom.components.card.px'),
'padding-right': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.header'),
'padding-bottom': theme('custom.components.card.py.header'),
'padding-bottom': theme('custom.components.card.py.header')
},
'.card-body': {
'flex-grow': '1',
'padding-left': theme('custom.components.card.px'),
'padding-right': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.body'),
'padding-bottom': theme('custom.components.card.py.body'),
'padding-bottom': theme('custom.components.card.py.body')
},
'.card-footer': {
'display': 'flex',
display: 'flex',
'align-items': 'center',
'justify-content': 'space-between',
'border-top': 'var(--tw-card-border)',
'padding-left': theme('custom.components.card.px'),
'padding-right': theme('custom.components.card.px'),
'padding-top': theme('custom.components.card.py.footer'),
'padding-bottom': theme('custom.components.card.py.footer'),
'padding-bottom': theme('custom.components.card.py.footer')
},
'.card-table': {
'table': {
table: {
'th:first-child, td:first-child': {
'padding-left': theme('custom.components.card.px'),
'padding-left': theme('custom.components.card.px')
},
'th:last-child, td:last-child': {
'padding-right': theme('custom.components.card.px'),
'padding-right': theme('custom.components.card.px')
},
'&.table-border': {
'border': '0'
border: '0'
}
}
}
},
'.card-group': {
'padding-left': theme('custom.components.card.px'),
@ -66,33 +65,33 @@ export default plugin(({addComponents, theme}) => {
'padding-bottom': theme('custom.components.card.py.group'),
'border-bottom': 'var(--tw-card-border)',
'&:last-child': {
'border-bottom': '0',
},
'border-bottom': '0'
},
'& + .card-footer': {
'border-top': '0',
'border-top': '0'
}
}
});
});
// Border radius
addComponents({
'.table': {
'th:first-child': {
'border-top-left-radius': theme('custom.components.common.borderRadius.card'),
'border-top-left-radius': theme('custom.components.common.borderRadius.card')
},
'th:last-child': {
'border-top-right-radius': theme('custom.components.common.borderRadius.card'),
}
'border-top-right-radius': theme('custom.components.common.borderRadius.card')
}
},
'.card-header + .card-body, .card-header + .card-table': {
'table': {
table: {
'th:first-child, th:last-child': {
'border-radius': '0'
}
}
}
}
});
// Grid
addComponents({
'.card-grid': {
@ -101,15 +100,21 @@ export default plugin(({addComponents, theme}) => {
'padding-right': theme('custom.components.card.grid.px')
},
'.card-body': {
'padding': '0',
'table': {
'border': '0',
padding: '0',
'.table': {
border: '0',
'th:first-child, td:first-child': {
'padding-left': theme('custom.components.card.grid.px')
'padding-left': theme('custom.components.card.grid.px'),
'&.table-cell-center': {
'padding-right': theme('custom.components.card.grid.px')
}
},
'th:last-child, td:last-child': {
'padding-right': theme('custom.components.card.grid.px')
}
'padding-right': theme('custom.components.card.grid.px'),
'&.table-cell-center': {
'padding-left': theme('custom.components.card.grid.px')
}
}
}
}
}
@ -118,7 +123,7 @@ export default plugin(({addComponents, theme}) => {
// Utilities
addComponents({
'.card-border': {
'border': 'var(--tw-card-border)'
border: 'var(--tw-card-border)'
},
'.card-rounded': {
'border-radius': theme('custom.components.common.borderRadius.card'),
@ -129,23 +134,23 @@ export default plugin(({addComponents, theme}) => {
},
'.card-rounded-b': {
'border-bottom-left-radius': theme('custom.components.common.borderRadius.card'),
'border-bottom-right-radius': theme('custom.components.common.borderRadius.card'),
'border-bottom-right-radius': theme('custom.components.common.borderRadius.card')
},
'.card-rounded-bl': {
'border-bottom-left-radius': theme('custom.components.common.borderRadius.card'),
'border-bottom-left-radius': theme('custom.components.common.borderRadius.card')
},
'.card-rounded-br': {
'border-bottom-right-radius': theme('custom.components.common.borderRadius.card'),
'border-bottom-right-radius': theme('custom.components.common.borderRadius.card')
},
'.card-rounded-t': {
'border-top-left-radius': theme('custom.components.common.borderRadius.card'),
'border-top-right-radius': theme('custom.components.common.borderRadius.card'),
'border-top-right-radius': theme('custom.components.common.borderRadius.card')
},
'.card-rounded-tl': {
'border-top-left-radius': theme('custom.components.common.borderRadius.card'),
'border-top-left-radius': theme('custom.components.common.borderRadius.card')
},
'.card-rounded-tr': {
'border-top-right-radius': theme('custom.components.common.borderRadius.card'),
'border-top-right-radius': theme('custom.components.common.borderRadius.card')
}
});
});
});
});

View File

@ -18,7 +18,7 @@ export default plugin(({addComponents, theme}) => {
'.menu-default': {
'padding-top': theme('spacing')['2.5'],
'padding-bottom': theme('spacing')['2.5'],
'.menu-link': {
'.menu-link, .menu-label': {
'margin-left': theme('spacing')['2.5'],
'margin-right': theme('spacing')['2.5'],
'padding': theme('spacing')['2.5'],
@ -53,13 +53,13 @@ export default plugin(({addComponents, theme}) => {
'margin-bottom': theme('spacing')['2.5']
},
'.menu-accordion:not(.menu-no-indent)': {
'.menu-item > .menu-link': {
'.menu-item > .menu-link, .menu-item > .menu-label': {
'margin-left': theme('spacing')['5'],
},
'.menu-item > .menu-accordion .menu-item > .menu-link': {
'.menu-item > .menu-accordion .menu-item > .menu-link, .menu-item > .menu-accordion .menu-item > .menu-label': {
'margin-left': theme('spacing')['8'],
},
'.menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-link': {
'.menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-link, .menu-item > .menu-accordion .menu-item > .menu-accordion .menu-item > .menu-label': {
'margin-left': theme('spacing')['11'],
}
},
@ -67,7 +67,7 @@ export default plugin(({addComponents, theme}) => {
'.menu-fit': {
'padding-top': '0',
'padding-bottom': '0',
'.menu-link': {
'.menu-link, .menu-label': {
'margin-left': '0',
'margin-right': '0',
}
@ -75,7 +75,7 @@ export default plugin(({addComponents, theme}) => {
'.menu-space': {
'padding-top': theme('spacing')['2.5'],
'padding-bottom': theme('spacing')['2.5'],
'.menu-link': {
'.menu-link, .menu-label': {
'margin-left': theme('spacing')['2.5'],
'margin-right': theme('spacing')['2.5'],
}
@ -95,7 +95,7 @@ export default plugin(({addComponents, theme}) => {
'.menu-arrow i': {
'color': 'var(--tw-gray-500)'
},
'.menu-link:hover': {
'.menu-link:hover, .menu-label:hover': {
'.menu-title': {
'color': 'var(--tw-gray-900)'
},
@ -104,7 +104,7 @@ export default plugin(({addComponents, theme}) => {
}
},
'&.active, &.show, &.here, &.focus': {
'> .menu-link': {
'> .menu-link, > .menu-label': {
'.menu-title': {
'color': 'var(--tw-gray-900)'
},
@ -114,21 +114,21 @@ export default plugin(({addComponents, theme}) => {
}
},
'&.active, &.here': {
'> .menu-link': {
'> .menu-link, > .menu-label': {
'background-color': 'var(--tw-gray-100)',
'.dark &': {
'background-color': 'var(--tw-coal-300)',
}
}
},
'& > .menu-link:hover': {
'& > .menu-link:hover, & > .menu-label:hover': {
'background-color': 'var(--tw-gray-100)',
'.dark &': {
'background-color': 'var(--tw-coal-300)',
}
},
'&.disabled': {
'> .menu-link': {
'> .menu-link, > .menu-label': {
'opacity': '0.5'
}
}

View File

@ -27,7 +27,8 @@ export default plugin(({addComponents, theme}) => {
'box-shadow': 'var(--tw-modal-box-shadow)',
'background-color': 'var(--tw-modal-background-color)',
'display': 'flex',
'flex-direction': 'column'
'flex-direction': 'column',
'outline': 'none'
},
'.modal-header': {
@ -52,7 +53,8 @@ export default plugin(({addComponents, theme}) => {
'padding-left': theme('spacing')['5'],
'padding-right': theme('spacing')['5'],
'padding-top': theme('spacing')['2.5'],
'padding-bottom': theme('spacing')['2.5']
'padding-bottom': theme('spacing')['2.5'],
'outline': 'none'
},
'.modal-footer': {

View File

@ -1,120 +1,116 @@
/* eslint-disable max-len */
import plugin from "tailwindcss/plugin";
import plugin from 'tailwindcss/plugin';
export default plugin(({ addVariant, addComponents, theme, e }) => {
addComponents({
".switch": {
display: "flex",
"align-items": "center",
gap: theme("spacing")["2.5"],
cursor: "pointer",
"input[type=checkbox],input[type=radio]": {
display: "flex",
appearance: "none",
"background-color": "var(--tw-gray-300)",
position: "relative",
cursor: "pointer",
"flex-shrink": "0",
height: theme("custom.components.switch.DEFAULT.height"),
width: theme("custom.components.switch.DEFAULT.width"),
"border-radius": theme(
"custom.components.switch.DEFAULT.height",
),
transition: "all .15s ease-in-out",
"&:before": {
display: "flex",
position: "absolute",
content: '""',
height: "1rem",
width: "1rem",
"border-radius": "100%",
"background-color": "var(--tw-light)",
left: "0.25rem",
top: "50%",
transform: "translateY(-50%)",
filter: "drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.03))",
transition: "all .15s ease-in-out",
},
'&:checked, &[aria-checked="true"]': {
"background-color": "var(--tw-primary)",
transition: "all .15s ease-in-out",
"&:before": {
"background-color": "#ffffff",
transition: "all .15s ease-in-out",
left: "calc(100% - 0.25rem)",
transform: "translate(-100%, -50%)",
filter: "none",
},
},
"&:disabled": {
"background-color": "var(--tw-gray-100)",
border: "1px solid var(--tw-gray-300)",
cursor: "not-allowed",
opacity: "0.5",
"&:before": {
"background-color": "var(--tw-gray-300)",
},
'&:checked, &[aria-checked="true"]': {
"background-color": "var(--tw-primary-clarity)",
border: "0",
"&:before": {
"background-color": "var(--tw-light)",
},
},
},
},
".switch-label": {
color: "var(--tw-gray-700)",
"font-size": theme("fontSize.sm"),
"font-weight": theme("fontWeight.medium"),
"line-height": theme("lineHeight.4"),
},
"input[type=checkbox] + .switch-label,input[type=radio] + .switch-label":
{
color: "var(--tw-gray-800)",
},
"&:has(input[type=checkbox]:disabled),&:has(input[type=radio]:disabled)":
{
".switch-label": {
color: "var(--tw-gray-500)",
},
},
},
".switch-sm": {
"input[type=checkbox],input[type=radio]": {
height: theme("custom.components.switch.sm.height"),
width: theme("custom.components.switch.sm.width"),
"border-radius": theme("custom.components.switch.sm.height"),
"&:before": {
height: "0.75rem",
width: "0.75rem",
},
},
".switch-label": {
"font-size": theme("fontSize.2sm"),
},
},
".switch-lg": {
"input[type=checkbox],input[type=radio]": {
height: theme("custom.components.switch.lg.height"),
width: theme("custom.components.switch.lg.width"),
"border-radius": theme("custom.components.switch.lg.height"),
"&:before": {
height: "1.25rem",
width: "1.25rem",
},
},
".switch-label": {
"font-size": theme("fontSize.md"),
},
},
});
export default plugin(({addVariant, addComponents, theme, e}) => {
addComponents({
'.switch': {
'display': 'flex',
'align-items': 'center',
'gap': theme('spacing')['2.5'],
'cursor': 'pointer',
'input[type=checkbox]': {
'display': 'flex',
'appearance': 'none',
'background-color': 'var(--tw-gray-300)',
'position': 'relative',
'cursor': 'pointer',
'flex-shrink': '0',
'height': theme('custom.components.switch.DEFAULT.height'),
'width': theme('custom.components.switch.DEFAULT.width'),
'border-radius': theme('custom.components.switch.DEFAULT.height'),
'transition': 'all .15s ease-in-out',
'&:before': {
'display': 'flex',
'position': 'absolute',
'content': '""',
'height': '1rem',
'width': '1rem',
'border-radius': '100%',
'background-color': 'var(--tw-light)',
'left': '0.25rem',
'top': '50%',
'transform': 'translateY(-50%)',
'filter': 'drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.03))',
'transition': 'all .15s ease-in-out'
},
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary)',
'transition': 'all .15s ease-in-out',
'&:before': {
'background-color': '#ffffff',
'transition': 'all .15s ease-in-out',
'left': 'calc(100% - 0.25rem)',
'transform': 'translate(-100%, -50%)',
'filter': 'none'
}
},
'&:disabled': {
'background-color': 'var(--tw-gray-100)',
'border': '1px solid var(--tw-gray-300)',
'cursor': 'not-allowed',
'opacity': '0.5',
'&:before': {
'background-color': 'var(--tw-gray-300)'
},
'&:checked, &[aria-checked="true"]': {
'background-color': 'var(--tw-primary-clarity)',
'border': '0',
'&:before': {
'background-color': 'var(--tw-light)'
}
}
}
},
'.switch-label': {
'color': 'var(--tw-gray-700)',
'font-size': theme('fontSize.sm'),
'font-weight': theme('fontWeight.medium'),
'line-height': theme('lineHeight.4')
},
'input[type=checkbox] + .switch-label': {
'color': 'var(--tw-gray-800)',
},
'&:has(input[type=checkbox]:disabled)': {
'.switch-label': {
'color': 'var(--tw-gray-500)'
}
}
},
'.switch-sm': {
'input[type=checkbox]': {
'height': theme('custom.components.switch.sm.height'),
'width': theme('custom.components.switch.sm.width'),
'border-radius': theme('custom.components.switch.sm.height'),
'&:before': {
'height': '0.75rem',
'width': '0.75rem',
}
},
'.switch-label': {
'font-size': theme('fontSize.2sm'),
}
},
'.switch-lg': {
'input[type=checkbox]': {
'height': theme('custom.components.switch.lg.height'),
'width': theme('custom.components.switch.lg.width'),
'border-radius': theme('custom.components.switch.lg.height'),
'&:before': {
'height': '1.25rem',
'width': '1.25rem',
}
},
'.switch-label': {
'font-size': theme('fontSize.md'),
}
}
});
addVariant("switch-on", [
({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.switch:has(:checked) .${e(`switch-on${separator}${className}`)}`;
});
},
]);
});
addVariant('switch-on', [
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.switch:has([type="checkbox"]:checked) .${e(`switch-on${separator}${className}`)}`;
});
}
]);
});

View File

@ -22,10 +22,6 @@ export default plugin(({addComponents, theme}) => {
},
'thead, tfoot': {
'td, th': {
'padding-left': theme('custom.components.table.px'),
'padding-right': theme('custom.components.table.px'),
'padding-top': theme('custom.components.table.py.head'),
'padding-bottom': theme('custom.components.table.py.head'),
'background-color': 'var(--tw-table-head-background-color)',
'color': 'var(--tw-gray-600)',
'font-weight': theme('fontWeight.medium'),
@ -47,11 +43,7 @@ export default plugin(({addComponents, theme}) => {
'tbody': {
'vertical-align': 'inherit',
'tr': {
'td, th': {
'padding-left': theme('custom.components.table.px'),
'padding-right': theme('custom.components.table.px'),
'padding-top': theme('custom.components.table.py.body'),
'padding-bottom': theme('custom.components.table.py.body'),
'td, th': {
'border-bottom': 'var(--tw-table-border)'
},
'&:last-child': {
@ -62,8 +54,92 @@ export default plugin(({addComponents, theme}) => {
}
}
}
});
});
// Sizes
addComponents({
'.table': {
'thead, tfoot': {
'td, th': {
'padding-left': theme('custom.components.table.px.DEFAULT'),
'padding-right': theme('custom.components.table.px.DEFAULT'),
'padding-top': theme('custom.components.table.py.DEFAULT.head'),
'padding-bottom': theme('custom.components.table.py.DEFAULT.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-left': theme('custom.components.table.px.DEFAULT'),
'padding-right': theme('custom.components.table.px.DEFAULT'),
'padding-top': theme('custom.components.table.py.DEFAULT.body'),
'padding-bottom': theme('custom.components.table.py.DEFAULT.body')
}
}
}
},
'.table-xs': {
'thead, tfoot': {
'td, th': {
'padding-left': theme('custom.components.table.px.xs'),
'padding-right': theme('custom.components.table.px.xs'),
'padding-top': theme('custom.components.table.py.xs.head'),
'padding-bottom': theme('custom.components.table.py.xs.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-left': theme('custom.components.table.px.xs'),
'padding-right': theme('custom.components.table.px.xs'),
'padding-top': theme('custom.components.table.py.xs.body'),
'padding-bottom': theme('custom.components.table.py.xs.body')
}
}
}
},
'.table-sm': {
'thead, tfoot': {
'td, th': {
'padding-left': theme('custom.components.table.px.sm'),
'padding-right': theme('custom.components.table.px.sm'),
'padding-top': theme('custom.components.table.py.sm.head'),
'padding-bottom': theme('custom.components.table.py.sm.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-left': theme('custom.components.table.px.sm'),
'padding-right': theme('custom.components.table.px.sm'),
'padding-top': theme('custom.components.table.py.sm.body'),
'padding-bottom': theme('custom.components.table.py.sm.body')
}
}
}
},
'.table-lg': {
'thead, tfoot': {
'td, th': {
'padding-left': theme('custom.components.table.px.lg'),
'padding-right': theme('custom.components.table.px.lg'),
'padding-top': theme('custom.components.table.py.lg.head'),
'padding-bottom': theme('custom.components.table.py.lg.head')
},
},
'tbody': {
'tr': {
'td, th': {
'padding-left': theme('custom.components.table.px.lg'),
'padding-right': theme('custom.components.table.px.lg'),
'padding-top': theme('custom.components.table.py.lg.body'),
'padding-bottom': theme('custom.components.table.py.lg.body')
}
}
}
}
});
// Border
addComponents({
'.table-border': {

View File

@ -15,24 +15,12 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
'display': 'flex',
'flex-direction': 'column'
},
'.menu-link': {
'.menu-link, .menu-label, .menu-toggle': {
'cursor': 'pointer',
'display': 'flex',
'align-items': 'center',
'flex-grow': '1',
},
'.menu-label': {
'display': 'flex',
'align-items': 'center',
'flex-grow': '1',
'line-height': '1',
},
'.menu-toggle': {
'display': 'flex',
'align-items': 'center',
'flex-grow': '1',
'line-height': '1',
},
'.menu-title': {
'display': 'flex',
'align-items': 'center',

File diff suppressed because it is too large Load Diff