Fix cascading shadow/ring bug, ensure default ring color
This commit is contained in:
parent
5e50367172
commit
e40079a457
8 changed files with 78 additions and 1727 deletions
|
|
@ -3,6 +3,15 @@ import nameClass from '../util/nameClass'
|
|||
|
||||
export default function () {
|
||||
return function ({ addUtilities, theme, variants }) {
|
||||
addUtilities(
|
||||
{
|
||||
'*': {
|
||||
'--tw-shadow': '0 0 #0000',
|
||||
},
|
||||
},
|
||||
{ respectImportant: false }
|
||||
)
|
||||
|
||||
const utilities = _.fromPairs(
|
||||
_.map(theme('boxShadow'), (value, modifier) => {
|
||||
return [
|
||||
|
|
|
|||
|
|
@ -16,15 +16,25 @@ export default function () {
|
|||
return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
|
||||
})(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
|
||||
|
||||
addUtilities(
|
||||
{
|
||||
'*': {
|
||||
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-ring-offset-width': '0px',
|
||||
'--tw-ring-offset-color': '#fff',
|
||||
'--tw-ring-color': ringColorDefault,
|
||||
'--tw-ring-offset-shadow': '0 0 #0000',
|
||||
'--tw-ring-shadow': '0 0 #0000',
|
||||
},
|
||||
},
|
||||
{ respectImportant: false }
|
||||
)
|
||||
|
||||
const utilities = _.fromPairs(
|
||||
_.map(theme('ringWidth'), (value, modifier) => {
|
||||
return [
|
||||
nameClass('ring', modifier),
|
||||
{
|
||||
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
|
||||
'--tw-ring-offset-width': '0px',
|
||||
'--tw-ring-offset-color': '#fff',
|
||||
'--tw-ring-color': ringColorDefault,
|
||||
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
|
||||
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
|
||||
'box-shadow': [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue