Material misc and media
parent
1506492bee
commit
21ae03bfce
|
@ -31,6 +31,7 @@ const theme = ({ dt }) => `
|
||||||
.p-carousel-prev-button,
|
.p-carousel-prev-button,
|
||||||
.p-carousel-next-button {
|
.p-carousel-next-button {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-carousel-indicator-list {
|
.p-carousel-indicator-list {
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
||||||
style: 'none',
|
style: 'none',
|
||||||
color: 'unset',
|
color: 'unset',
|
||||||
offset: '0',
|
offset: '0',
|
||||||
shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)'
|
shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)'
|
||||||
},
|
},
|
||||||
disabledOpacity: '0.38',
|
disabledOpacity: '0.38',
|
||||||
iconSize: '1rem',
|
iconSize: '1rem',
|
||||||
|
|
|
@ -7,18 +7,18 @@ export default {
|
||||||
},
|
},
|
||||||
indicatorList: {
|
indicatorList: {
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
gap: '0.5rem'
|
gap: '1rem'
|
||||||
},
|
},
|
||||||
indicator: {
|
indicator: {
|
||||||
width: '2rem',
|
width: '1.25rem',
|
||||||
height: '0.5rem',
|
height: '1.25rem',
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '50%',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '0',
|
||||||
style: '{focus.ring.style}',
|
style: 'none',
|
||||||
color: '{focus.ring.color}',
|
color: 'unset',
|
||||||
offset: '{focus.ring.offset}',
|
offset: '0',
|
||||||
shadow: '{focus.ring.shadow}'
|
shadow: 'none'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
|
@ -36,5 +36,22 @@ export default {
|
||||||
activeBackground: '{primary.color}'
|
activeBackground: '{primary.color}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
style: ({ dt }) => `
|
||||||
|
.p-carousel-indicator-button:hover {
|
||||||
|
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-carousel-indicator-button:focus-visible {
|
||||||
|
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-indicator-active .p-carousel-indicator-button:hover {
|
||||||
|
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 92%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-carousel-indicator-active .p-carousel-indicator-button:focus-visible {
|
||||||
|
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 84%);
|
||||||
|
}
|
||||||
|
`
|
||||||
};
|
};
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
root: {
|
root: {
|
||||||
background: '{surface.800}',
|
background: '{surface.700}',
|
||||||
color: '{surface.0}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
|
|
|
@ -35,7 +35,7 @@ export default {
|
||||||
},
|
},
|
||||||
thumbnailNavButton: {
|
thumbnailNavButton: {
|
||||||
size: '2rem',
|
size: '2rem',
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '50%',
|
||||||
gutter: '0.5rem',
|
gutter: '0.5rem',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
width: '{focus.ring.width}',
|
width: '{focus.ring.width}',
|
||||||
|
|
|
@ -2,7 +2,7 @@ export default {
|
||||||
root: {
|
root: {
|
||||||
background: '{content.border.color}',
|
background: '{content.border.color}',
|
||||||
borderRadius: '{content.border.radius}',
|
borderRadius: '{content.border.radius}',
|
||||||
height: '1.25rem'
|
height: '1rem'
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
background: '{primary.color}'
|
background: '{primary.color}'
|
||||||
|
|
|
@ -13,28 +13,28 @@ export default {
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
primary: {
|
primary: {
|
||||||
background: '{primary.100}',
|
background: '{primary.color}',
|
||||||
color: '{primary.700}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.100}',
|
background: '{surface.100}',
|
||||||
color: '{surface.600}'
|
color: '{surface.600}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: '{green.100}',
|
background: '{green.500}',
|
||||||
color: '{green.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: '{sky.100}',
|
background: '{sky.500}',
|
||||||
color: '{sky.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: '{orange.100}',
|
background: '{orange.500}',
|
||||||
color: '{orange.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: '{red.100}',
|
background: '{red.500}',
|
||||||
color: '{red.700}'
|
color: '{surface.0}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.950}',
|
background: '{surface.950}',
|
||||||
|
@ -43,28 +43,28 @@ export default {
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
primary: {
|
primary: {
|
||||||
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
|
background: '{primary.color}',
|
||||||
color: '{primary.300}'
|
color: '{primary.contrast.color}'
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
background: '{surface.800}',
|
background: '{surface.800}',
|
||||||
color: '{surface.300}'
|
color: '{surface.300}'
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
background: '{green.400}',
|
||||||
color: '{green.300}'
|
color: '{green.950}'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
|
background: '{sky.400}',
|
||||||
color: '{sky.300}'
|
color: '{sky.950}'
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
|
background: '{orange.400}',
|
||||||
color: '{orange.300}'
|
color: '{orange.950}'
|
||||||
},
|
},
|
||||||
danger: {
|
danger: {
|
||||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
background: '{red.400}',
|
||||||
color: '{red.300}'
|
color: '{red.950}'
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
background: '{surface.0}',
|
background: '{surface.0}',
|
||||||
|
|
Loading…
Reference in New Issue