Prevent designer components to be changed
Cagatay Civici
parent
afe9dc82e0
commit
16a2727b58
|
|
@ -12,7 +12,7 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
[type='color']::-webkit-color-swatch {
|
||||
border-radius: 4px;
|
||||
width: 24px;
|
||||
|
|
@ -20,8 +20,166 @@
|
|||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend:hover {
|
||||
.p-fieldset-toggleable>.p-fieldset-legend:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.p-drawer {
|
||||
background: light-dark(var(--p-surface-0), var(--p-surface-900));
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
color: light-dark(#09090b, #ffffff);
|
||||
box-shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
|
||||
.p-fieldset {
|
||||
background: transparent;
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
padding: 0 1.125rem 1.125rem 1.125rem;
|
||||
|
||||
.p-fieldset-legend {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-fieldset-legend-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.p-fieldset-toggle-button {
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
border-radius: 4px;
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.p-fieldset-toggle-icon {
|
||||
color: inherit;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.p-fieldset-toggleable {
|
||||
>.p-fieldset-legend:hover {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
||||
.p-fieldset-toggle-icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-fieldset-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabs {
|
||||
.p-tablist-tab-list {
|
||||
background: transparent;
|
||||
border-style: solid;
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
|
||||
.p-tab {
|
||||
background: transparent;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
color: light-dark(var(--p-surface-500), var(--p-surface-400));
|
||||
padding: 1rem 1.125rem;
|
||||
font-weight: 600;
|
||||
transition: none;
|
||||
margin: 0 0 -1px 0;
|
||||
}
|
||||
|
||||
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: light-dark(var(--p-surface-700), var(--p-surface-0));
|
||||
}
|
||||
|
||||
.p-tab-active {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: light-dark(#09090b, #ffffff);
|
||||
}
|
||||
|
||||
.p-tablist-active-bar {
|
||||
inset-block-end: -1px;
|
||||
height: 1px;
|
||||
background: light-dark(#09090b, #ffffff);
|
||||
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
|
||||
}
|
||||
|
||||
.p-tabpanels {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0.875rem 0 1.125rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion {
|
||||
.p-accordionpanel {
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
}
|
||||
|
||||
.p-accordionheader {
|
||||
padding: 1.125rem;
|
||||
color: light-dark(var(--p-surface-500), var(--p-surface-400));
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-color: unset;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-accordionpanel:first-child>.p-accordionheader {
|
||||
border-width: 0;
|
||||
border-start-start-radius: 4px;
|
||||
border-start-end-radius: 4px;
|
||||
}
|
||||
|
||||
.p-accordionpanel:last-child>.p-accordionheader {
|
||||
border-end-start-radius: 4px;
|
||||
border-end-end-radius: 4px;
|
||||
}
|
||||
|
||||
.p-accordionpanel:last-child.p-accordionpanel-active>.p-accordionheader {
|
||||
border-end-start-radius: 4px;
|
||||
border-end-end-radius: 4px;
|
||||
}
|
||||
|
||||
.p-accordionheader-toggle-icon {
|
||||
color: light-dark(var(--p-surface-500), var(--p-surface-400));
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
|
||||
background: transparent;
|
||||
color: light-dark(var(--p-surface-700), var(--p-surface-0));
|
||||
}
|
||||
|
||||
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
|
||||
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader:hover .p-accordionheader-toggle-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.p-accordioncontent-content {
|
||||
border-width: 0;
|
||||
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0 1.125rem 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
|
||||
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
|
||||
<template #container="{ closeCallback }">
|
||||
<div class="flex items-center justify-between p-5">
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -209,38 +209,6 @@ export default {
|
|||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
drawerTokens() {
|
||||
return {
|
||||
root: {
|
||||
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
header: {
|
||||
padding: '1.25rem'
|
||||
},
|
||||
title: {
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: '600'
|
||||
},
|
||||
content: {
|
||||
padding: '0 1.25rem 1.25rem 1.25rem'
|
||||
},
|
||||
footer: {
|
||||
padding: '1.25rem'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '#09090b'
|
||||
},
|
||||
dark: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred" :dt="tabsTokens">
|
||||
<Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred">
|
||||
<TabList>
|
||||
<Tab value="0">Primitive</Tab>
|
||||
<Tab value="1">Semantic</Tab>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<Tab value="3">Custom</Tab>
|
||||
<Tab value="4" class="ml-auto">Settings</Tab>
|
||||
</TabList>
|
||||
<TabPanels class="!px-0">
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<div>
|
||||
<form @keydown="onKeyDown" class="flex flex-col gap-3">
|
||||
|
|
@ -105,98 +105,6 @@ export default {
|
|||
const directives = this.$appState.designer.theme.preset.directives;
|
||||
|
||||
return components[this.$route.name] != null || directives[this.$route.name];
|
||||
},
|
||||
tabsTokens() {
|
||||
return {
|
||||
root: {
|
||||
transitionDuration: '0.2s'
|
||||
},
|
||||
tablist: {
|
||||
borderWidth: '0 0 1px 0',
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
tab: {
|
||||
background: 'transparent',
|
||||
hoverBackground: 'transparent',
|
||||
activeBackground: 'transparent',
|
||||
borderWidth: '0 0 1px 0',
|
||||
padding: '1rem 1.125rem',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 -1px 0',
|
||||
gap: '0.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
tabpanel: {
|
||||
background: 'transparent',
|
||||
color: 'inherit',
|
||||
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
navButton: {
|
||||
background: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
width: '2.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
activeBar: {
|
||||
height: '1px',
|
||||
bottom: '-1px'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
tablist: {
|
||||
borderColor: '{surface.200}'
|
||||
},
|
||||
tab: {
|
||||
borderColor: '{surface.200}',
|
||||
hoverBorderColor: '{surface.200}',
|
||||
activeBorderColor: '#09090b',
|
||||
color: '#71717a',
|
||||
hoverColor: '#09090b',
|
||||
activeColor: '#09090b'
|
||||
},
|
||||
activeBar: {
|
||||
background: '#09090b'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
tablist: {
|
||||
borderColor: '{surface.700}'
|
||||
},
|
||||
tab: {
|
||||
borderColor: '{surface.700}',
|
||||
hoverBorderColor: '{surface.700}',
|
||||
activeBorderColor: '#ffffff',
|
||||
color: '#a1a1aa',
|
||||
hoverColor: '#ffffff',
|
||||
activeColor: '#ffffff'
|
||||
},
|
||||
activeBar: {
|
||||
background: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue