rasyahroel/it_security_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to Metronic 9.07 and Tailwind 3.4.13

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package.json
View File

@ -9,25 +9,25 @@
"@rollup/plugin-inject": "^5.0.5", "@rollup/plugin-inject": "^5.0.5",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
"postcss": "^8.4.45",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6", "prettier-plugin-tailwindcss": "^0.6.6",
"sass": "^1.77.6", "sass": "^1.77.6",
"tailwindcss": "^3.4.11", "vite": "5.4.6",
"vite": "^5.0" "postcss": "^8.4.47",
"tailwindcss": "^3.4.13"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"jquery": "^3.7.1", "apexcharts": "^3.54.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",
"axios": "^1.7.7", "axios": "^1.7.7",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"esri-leaflet": "^3.0.12", "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"
} }
} }

2
postcss.config.js
View File

@ -3,4 +3,4 @@ export default {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, 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;

2
resources/metronic/core/components/menu/menu.ts
View File

@ -36,7 +36,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
} }
protected _click(element: HTMLElement, event: Event): void { protected _click(element: HTMLElement, event: Event): void {
if (element.hasAttribute('href') && element.getAttribute('href') !== '#') { if (element.hasAttribute('href') && element.getAttribute('href') === '#') {
return; return;
} }

16
resources/metronic/core/components/sticky/sticky.ts
View File

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

1
resources/metronic/core/components/sticky/types.ts
View File

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

8
resources/metronic/core/components/tooltip/tooltip.ts
View File

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

3
resources/metronic/core/helpers/dom.ts
View File

@ -356,6 +356,9 @@ const KTDom = {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
callback(); callback();
}); });
document.addEventListener("livewire:navigated", () => {
callback();
});
} else { } else {
callback(); callback();
} }

65
resources/metronic/core/plugins/components/card.js
View File

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

22
resources/metronic/core/plugins/components/menu.js
View File

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

6
resources/metronic/core/plugins/components/modal.js
View File

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

190
resources/metronic/core/plugins/components/switch.js
View File

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

92
resources/metronic/core/plugins/components/table.js
View File

@ -22,10 +22,6 @@ export default plugin(({addComponents, theme}) => {
}, },
'thead, tfoot': { 'thead, tfoot': {
'td, th': { '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)', 'background-color': 'var(--tw-table-head-background-color)',
'color': 'var(--tw-gray-600)', 'color': 'var(--tw-gray-600)',
'font-weight': theme('fontWeight.medium'), 'font-weight': theme('fontWeight.medium'),
@ -48,10 +44,6 @@ export default plugin(({addComponents, theme}) => {
'vertical-align': 'inherit', 'vertical-align': 'inherit',
'tr': { 'tr': {
'td, th': { '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'),
'border-bottom': 'var(--tw-table-border)' 'border-bottom': 'var(--tw-table-border)'
}, },
'&:last-child': { '&:last-child': {
@ -64,6 +56,90 @@ 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 // Border
addComponents({ addComponents({
'.table-border': { '.table-border': {

14
resources/metronic/core/plugins/plugin.js
View File

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

890
tailwind.config.js
View File

File diff suppressed because it is too large Load Diff