Add break-before, break-inside and break-after utilities (#5530)
* Add `break-before` utilities * Add `break-inside` utilities * Add `break-after` utilities * Add `break-before/inside/after` utilities to basic usage test * Remove `break-before` and `break-after` utilities that have no browser support * Rename `break-inside: avoid-column` utility to `break-inside-avoid-column`
This commit is contained in:
parent
f2bc50accf
commit
744249d631
3 changed files with 45 additions and 0 deletions
|
|
@ -813,6 +813,41 @@ export let appearance = ({ addUtilities }) => {
|
|||
|
||||
export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
|
||||
|
||||
export let breakBefore = ({ addUtilities }) => {
|
||||
addUtilities({
|
||||
'.break-before-auto': { 'break-before': 'auto' },
|
||||
'.break-before-avoid': { 'break-before': 'avoid' },
|
||||
'.break-before-all': { 'break-before': 'all' },
|
||||
'.break-before-avoid-page': { 'break-before': 'avoid-page' },
|
||||
'.break-before-page': { 'break-before': 'page' },
|
||||
'.break-before-left': { 'break-before': 'left' },
|
||||
'.break-before-right': { 'break-before': 'right' },
|
||||
'.break-before-column': { 'break-before': 'column' },
|
||||
})
|
||||
}
|
||||
|
||||
export let breakInside = ({ addUtilities }) => {
|
||||
addUtilities({
|
||||
'.break-inside-auto': { 'break-inside': 'auto' },
|
||||
'.break-inside-avoid': { 'break-inside': 'avoid' },
|
||||
'.break-inside-avoid-page': { 'break-inside': 'avoid-page' },
|
||||
'.break-inside-avoid-column': { 'break-inside': 'avoid-column' },
|
||||
})
|
||||
}
|
||||
|
||||
export let breakAfter = ({ addUtilities }) => {
|
||||
addUtilities({
|
||||
'.break-after-auto': { 'break-after': 'auto' },
|
||||
'.break-after-avoid': { 'break-after': 'avoid' },
|
||||
'.break-after-all': { 'break-after': 'all' },
|
||||
'.break-after-avoid-page': { 'break-after': 'avoid-page' },
|
||||
'.break-after-page': { 'break-after': 'page' },
|
||||
'.break-after-left': { 'break-after': 'left' },
|
||||
'.break-after-right': { 'break-after': 'right' },
|
||||
'.break-after-column': { 'break-after': 'column' },
|
||||
})
|
||||
}
|
||||
|
||||
export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
|
||||
['auto-cols', ['gridAutoColumns']],
|
||||
])
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue