"Update Tailwind configs and table plugin styles.
Refactor configuration in `tailwind.config.js`, altering the color palette and modifying content paths. Revamp table component styles in plugins to enhance structure, padding, and borders, while improving sorting icons for usability and clarity."
This commit is contained in:
parent
001cb273be
commit
907ece6514
@ -1,230 +1,269 @@
|
|||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import plugin from 'tailwindcss/plugin';
|
import plugin from "tailwindcss/plugin";
|
||||||
import svgToDataUri from 'mini-svg-data-uri';
|
import svgToDataUri from "mini-svg-data-uri";
|
||||||
|
|
||||||
export default plugin(({addComponents, theme}) => {
|
export default plugin(({ addComponents, theme }) => {
|
||||||
// Base
|
// Base
|
||||||
addComponents({
|
addComponents({
|
||||||
'.table': {
|
".table": {
|
||||||
'width': '100%',
|
width: "100%",
|
||||||
'caption-side': 'bottom',
|
"caption-side": "bottom",
|
||||||
'border-collapse': 'collapse',
|
"border-collapse": "collapse",
|
||||||
'vertical-align': 'middle',
|
"vertical-align": "middle",
|
||||||
'text-align': 'left',
|
"text-align": "left",
|
||||||
'color': 'var(--tw-gray-700)',
|
color: "var(--tw-gray-700)",
|
||||||
'font-weight': theme('fontWeight.medium'),
|
"font-weight": theme("fontWeight.medium"),
|
||||||
'font-size': theme('fontSize.sm'),
|
"font-size": theme("fontSize.sm"),
|
||||||
'line-height': theme('fontSize.sm.1.lineHeight'),
|
"line-height": theme("fontSize.sm.1.lineHeight"),
|
||||||
'th, td': {
|
"th, td": {
|
||||||
'input[type="checkbox"]': {
|
'input[type="checkbox"]': {
|
||||||
'vertical-align': 'inherit'
|
"vertical-align": "inherit",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
'thead, tfoot': {
|
"thead, tfoot": {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'background-color': 'var(--tw-table-head-background-color)',
|
"background-color": "var(--tw-gray-100)",
|
||||||
'color': 'var(--tw-gray-600)',
|
color: "var(--tw-gray-800)",
|
||||||
'font-weight': theme('fontWeight.medium'),
|
"font-weight": theme("fontWeight.bolder"),
|
||||||
'font-size': theme('fontSize.2sm'),
|
"font-size": theme("fontSize.2sm"),
|
||||||
'line-height': theme('fontSize.2sm.1.lineHeight'),
|
"line-height": theme("fontSize.2sm.1.lineHeight"),
|
||||||
'vertical-align': 'middle'
|
"vertical-align": "middle",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'thead': {
|
thead: {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'border-bottom': 'var(--tw-table-border)'
|
"border-bottom": "var(--tw-table-border)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'tfoot': {
|
tfoot: {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'border-top': 'var(--tw-table-border)'
|
"border-top": "var(--tw-table-border)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'tbody': {
|
tbody: {
|
||||||
'vertical-align': 'inherit',
|
"vertical-align": "inherit",
|
||||||
'tr': {
|
tr: {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'border-bottom': 'var(--tw-table-border)'
|
"border-bottom": "var(--tw-table-border)",
|
||||||
},
|
},
|
||||||
'&:last-child': {
|
"&:last-child": {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'border-bottom': '0',
|
"border-bottom": "0",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
addComponents({
|
addComponents({
|
||||||
'.table': {
|
".table": {
|
||||||
'thead, tfoot': {
|
"thead, tfoot": {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'padding-left': theme('custom.components.table.px.DEFAULT'),
|
"padding-left": theme("custom.components.table.px.DEFAULT"),
|
||||||
'padding-right': theme('custom.components.table.px.DEFAULT'),
|
"padding-right": theme(
|
||||||
'padding-top': theme('custom.components.table.py.DEFAULT.head'),
|
"custom.components.table.px.DEFAULT",
|
||||||
'padding-bottom': theme('custom.components.table.py.DEFAULT.head')
|
),
|
||||||
},
|
"padding-top": theme(
|
||||||
},
|
"custom.components.table.py.DEFAULT.head",
|
||||||
'tbody': {
|
),
|
||||||
'tr': {
|
"padding-bottom": theme(
|
||||||
'td, th': {
|
"custom.components.table.py.DEFAULT.head",
|
||||||
'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')
|
tbody: {
|
||||||
}
|
tr: {
|
||||||
}
|
"td, th": {
|
||||||
}
|
"padding-left": theme(
|
||||||
},
|
"custom.components.table.px.DEFAULT",
|
||||||
'.table-xs': {
|
),
|
||||||
'thead, tfoot': {
|
"padding-right": theme(
|
||||||
'td, th': {
|
"custom.components.table.px.DEFAULT",
|
||||||
'padding-left': theme('custom.components.table.px.xs'),
|
),
|
||||||
'padding-right': theme('custom.components.table.px.xs'),
|
"padding-top": theme(
|
||||||
'padding-top': theme('custom.components.table.py.xs.head'),
|
"custom.components.table.py.DEFAULT.body",
|
||||||
'padding-bottom': theme('custom.components.table.py.xs.head')
|
),
|
||||||
},
|
"padding-bottom": theme(
|
||||||
},
|
"custom.components.table.py.DEFAULT.body",
|
||||||
'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'),
|
".table-xs": {
|
||||||
'padding-bottom': theme('custom.components.table.py.xs.body')
|
"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"),
|
||||||
'.table-sm': {
|
"padding-bottom": theme(
|
||||||
'thead, tfoot': {
|
"custom.components.table.py.xs.head",
|
||||||
'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'),
|
tbody: {
|
||||||
'padding-bottom': theme('custom.components.table.py.sm.head')
|
tr: {
|
||||||
},
|
"td, th": {
|
||||||
},
|
"padding-left": theme("custom.components.table.px.xs"),
|
||||||
'tbody': {
|
"padding-right": theme("custom.components.table.px.xs"),
|
||||||
'tr': {
|
"padding-top": theme(
|
||||||
'td, th': {
|
"custom.components.table.py.xs.body",
|
||||||
'padding-left': theme('custom.components.table.px.sm'),
|
),
|
||||||
'padding-right': theme('custom.components.table.px.sm'),
|
"padding-bottom": theme(
|
||||||
'padding-top': theme('custom.components.table.py.sm.body'),
|
"custom.components.table.py.xs.body",
|
||||||
'padding-bottom': theme('custom.components.table.py.sm.body')
|
),
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
'.table-lg': {
|
".table-sm": {
|
||||||
'thead, tfoot': {
|
"thead, tfoot": {
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'padding-left': theme('custom.components.table.px.lg'),
|
"padding-left": theme("custom.components.table.px.sm"),
|
||||||
'padding-right': theme('custom.components.table.px.lg'),
|
"padding-right": theme("custom.components.table.px.sm"),
|
||||||
'padding-top': theme('custom.components.table.py.lg.head'),
|
"padding-top": theme("custom.components.table.py.sm.head"),
|
||||||
'padding-bottom': theme('custom.components.table.py.lg.head')
|
"padding-bottom": theme(
|
||||||
},
|
"custom.components.table.py.sm.head",
|
||||||
},
|
),
|
||||||
'tbody': {
|
},
|
||||||
'tr': {
|
},
|
||||||
'td, th': {
|
tbody: {
|
||||||
'padding-left': theme('custom.components.table.px.lg'),
|
tr: {
|
||||||
'padding-right': theme('custom.components.table.px.lg'),
|
"td, th": {
|
||||||
'padding-top': theme('custom.components.table.py.lg.body'),
|
"padding-left": theme("custom.components.table.px.sm"),
|
||||||
'padding-bottom': theme('custom.components.table.py.lg.body')
|
"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": {
|
||||||
'border': 'var(--tw-table-border)',
|
border: "var(--tw-table-border)",
|
||||||
'td, th': {
|
"td, th": {
|
||||||
'border-right': 'var(--tw-table-border)',
|
"border-right": "var(--tw-table-border)",
|
||||||
'&:last-child': {
|
"&:last-child": {
|
||||||
'border-right': '0'
|
"border-right": "0",
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
tbody: {
|
||||||
'.table-border-l': {
|
tr: {
|
||||||
'border-left': 'var(--tw-table-border)'
|
"&:nth-of-type(even)": {
|
||||||
},
|
"background-color":
|
||||||
'.table-border-r': {
|
"var(--tw-table-striped-background-color, var(--tw-table-head-background-color))",
|
||||||
'border-right': 'var(--tw-table-border)'
|
},
|
||||||
},
|
},
|
||||||
'.table-border-t': {
|
},
|
||||||
'border-top': 'var(--tw-table-border)'
|
},
|
||||||
},
|
".table-border-l": {
|
||||||
'.table-border-b': {
|
"border-left": "var(--tw-table-border)",
|
||||||
'border-bottom': 'var(--tw-table-border)'
|
},
|
||||||
}
|
".table-border-r": {
|
||||||
});
|
"border-right": "var(--tw-table-border)",
|
||||||
|
},
|
||||||
// Sort
|
".table-border-t": {
|
||||||
addComponents({
|
"border-top": "var(--tw-table-border)",
|
||||||
'.sort': {
|
},
|
||||||
'display': 'inline-flex',
|
".table-border-b": {
|
||||||
'align-items': 'center',
|
"border-bottom": "var(--tw-table-border)",
|
||||||
'gap': '0.35rem',
|
},
|
||||||
'cursor': 'pointer',
|
});
|
||||||
'line-height': '1'
|
|
||||||
},
|
|
||||||
'.sort-icon': {
|
|
||||||
'display': 'inline-flex',
|
|
||||||
'flex-direction': 'column',
|
|
||||||
'justify-content': 'center',
|
|
||||||
'align-items': 'center',
|
|
||||||
'height': '0.875rem',
|
|
||||||
'width': '0.875rem',
|
|
||||||
'gap': '0.125rem',
|
|
||||||
'line-height': '1',
|
|
||||||
'&:before': {
|
|
||||||
'display': 'inline-block',
|
|
||||||
'content': '""',
|
|
||||||
'height': '0.25rem',
|
|
||||||
'width': '0.438rem',
|
|
||||||
'background-repeat': 'no-repeat',
|
|
||||||
'background-position': `center`,
|
|
||||||
'background-size': 'cover',
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.600')}"/></svg>`)}")`
|
|
||||||
},
|
|
||||||
'&:after': {
|
|
||||||
'display': 'inline-block',
|
|
||||||
'content': '""',
|
|
||||||
'height': '0.25rem',
|
|
||||||
'width': '0.438rem',
|
|
||||||
'background-repeat': 'no-repeat',
|
|
||||||
'background-position': `center`,
|
|
||||||
'background-size': 'cover',
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.600')}"/></svg>`)}")`
|
|
||||||
},
|
|
||||||
'.asc > &': {
|
|
||||||
'&:before': {
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.700')}"/></svg>`)}")`
|
|
||||||
},
|
|
||||||
'&:after': {
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.400')}"/></svg>`)}")`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'.desc > &': {
|
|
||||||
'&:before': {
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme('base.colors.gray.light.400')}"/></svg>`)}")`
|
|
||||||
},
|
|
||||||
'&:after': {
|
|
||||||
'background-image': `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme('base.colors.gray.light.700')}"/></svg>`)}")`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'.sort-label': {
|
|
||||||
'display': 'inline-flex',
|
|
||||||
'align-items': 'center',
|
|
||||||
'gap': '0.35rem'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// Sort
|
||||||
|
addComponents({
|
||||||
|
".sort": {
|
||||||
|
display: "inline-flex",
|
||||||
|
"align-items": "center",
|
||||||
|
gap: "0.35rem",
|
||||||
|
cursor: "pointer",
|
||||||
|
"line-height": "1",
|
||||||
|
},
|
||||||
|
".sort-icon": {
|
||||||
|
display: "inline-flex",
|
||||||
|
"flex-direction": "column",
|
||||||
|
"justify-content": "center",
|
||||||
|
"align-items": "center",
|
||||||
|
height: "0.875rem",
|
||||||
|
width: "0.875rem",
|
||||||
|
gap: "0.125rem",
|
||||||
|
"line-height": "1",
|
||||||
|
"&:before": {
|
||||||
|
display: "inline-block",
|
||||||
|
content: '""',
|
||||||
|
height: "0.25rem",
|
||||||
|
width: "0.438rem",
|
||||||
|
"background-repeat": "no-repeat",
|
||||||
|
"background-position": `center`,
|
||||||
|
"background-size": "cover",
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme("base.colors.gray.light.600")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
"&:after": {
|
||||||
|
display: "inline-block",
|
||||||
|
content: '""',
|
||||||
|
height: "0.25rem",
|
||||||
|
width: "0.438rem",
|
||||||
|
"background-repeat": "no-repeat",
|
||||||
|
"background-position": `center`,
|
||||||
|
"background-size": "cover",
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme("base.colors.gray.light.600")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
".asc > &": {
|
||||||
|
"&:before": {
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme("base.colors.gray.light.700")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
"&:after": {
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme("base.colors.gray.light.400")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
".desc > &": {
|
||||||
|
"&:before": {
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z" fill="${theme("base.colors.gray.light.400")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
"&:after": {
|
||||||
|
"background-image": `url("${svgToDataUri(`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z" fill="${theme("base.colors.gray.light.700")}"/></svg>`)}")`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
".sort-label": {
|
||||||
|
display: "inline-flex",
|
||||||
|
"align-items": "center",
|
||||||
|
gap: "0.35rem",
|
||||||
|
},
|
||||||
|
});
|
||||||
});
|
});
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<div
|
<div
|
||||||
class="sidebar dark:bg-coal-600 bg-light border-r border-r-gray-400 dark:border-r-coal-100 fixed top-0 bottom-0 z-20 hidden lg:flex flex-col items-stretch shrink-0 h-full"
|
class="sidebar dark:bg-coal-600 bg-light border-r border-r-gray-200 dark:border-r-coal-100 fixed top-0 bottom-0 z-20 hidden lg:flex flex-col items-stretch shrink-0 h-full"
|
||||||
data-drawer="true" data-drawer-class="drawer drawer-start top-0 bottom-0" data-drawer-enable="true|lg:false"
|
data-drawer="true" data-drawer-class="drawer drawer-start top-0 bottom-0" data-drawer-enable="true|lg:false"
|
||||||
id="sidebar">
|
id="sidebar">
|
||||||
<div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
|
<div class="sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
|
||||||
@ -117,7 +117,7 @@
|
|||||||
@else
|
@else
|
||||||
<div class="menu-item {{ request()->routeIs($menu->path.'.*') ? 'active' : '' }}">
|
<div class="menu-item {{ request()->routeIs($menu->path.'.*') ? 'active' : '' }}">
|
||||||
<a class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" href="{{ $menu->path ? route($menu->path.'.index') : '' }}">
|
<a class="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]" href="{{ $menu->path ? route($menu->path.'.index') : '' }}">
|
||||||
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
|
<span class="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px] menu-item-active:text-primary menu-link-hover:!text-primary">
|
||||||
<i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i>
|
<i class="{{ $menu->icon ?? 'ki-filled ki-element-11 text-lg' }}"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
|
<span class="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: [
|
content: ["./resources/**/*.{blade.php,js,vue,tsx}", "./Modules/**/*.php"],
|
||||||
"./resources/**/*.{blade.php,js,vue,tsx}",
|
|
||||||
"./Modules/**/*.php",
|
|
||||||
],
|
|
||||||
safelist: [
|
safelist: [
|
||||||
"metronic",
|
"metronic",
|
||||||
"hidden",
|
"hidden",
|
||||||
@ -27,7 +24,7 @@ export default {
|
|||||||
400: "#C4CADA",
|
400: "#C4CADA",
|
||||||
500: "#99A1B7",
|
500: "#99A1B7",
|
||||||
600: "#78829D",
|
600: "#78829D",
|
||||||
700: "#4B5675",
|
700: "#252F4A",
|
||||||
800: "#252F4A",
|
800: "#252F4A",
|
||||||
900: "#071437",
|
900: "#071437",
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user