Update to Metronic 9.07 and Tailwind 3.4.13
This commit is contained in:
parent
8e4784c6ce
commit
c8e9062676
22
package.json
22
package.json
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
9
prettier.config.js
Normal file
9
prettier.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
const config = {
|
||||
useTabs: true,
|
||||
tabWidth: 2,
|
||||
singleQuote: true,
|
||||
bracketSameLine: true,
|
||||
arrowParens: 'always',
|
||||
};
|
||||
|
||||
module.exports = config;
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -1,4 +1,5 @@
|
||||
export interface KTStickyConfigInterface {
|
||||
target: string,
|
||||
name: string,
|
||||
class: string,
|
||||
zindex: string,
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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')
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
@ -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': {
|
||||
|
@ -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}`)}`;
|
||||
});
|
||||
}
|
||||
]);
|
||||
});
|
@ -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': {
|
||||
|
@ -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',
|
||||
|
1292
tailwind.config.js
1292
tailwind.config.js
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user