@aokiapp/rjsf-mantine-corporate
Version:
Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme
132 lines (121 loc) • 3.31 kB
CSS
.ObjectFieldTemplate-module_legend__IbPd- {
padding: 4px;
flex-wrap: nowrap;
& svg {
transition: transform 200ms ease;
}
/* if the element next to this has the attribute aria-hidden... */
&:has(+ .ObjectFieldTemplate-module_collapse__eHQwy[aria-hidden='true']) svg {
transform: rotate(180deg);
}
}
.ObjectFieldTemplate-module_root__nhEwa {
border-radius: 8px;
padding: 8px;
user-select: none;
width: 100%;
border: 1px solid transparent;
& .armt-template-objectfield-item {
display: flex;
flex-direction: column;
gap: 1rem;
}
& .ObjectFieldTemplate-module_root__nhEwa {
border-color: var(--mantine-color-gray-3);
box-shadow: var(--mantine-shadow-md);
& .ObjectFieldTemplate-module_root__nhEwa:not(:focus-within) {
border-color: transparent;
box-shadow: none;
}
}
background-color: #fff;
transition:
background-color 200ms ease,
margin 200ms ease,
box-shadow 200ms ease;
&:has(> .ObjectFieldTemplate-module_collapse__eHQwy[aria-hidden='true']) {
background-color: #f2f2f2;
border: none;
box-shadow: none;
margin-top: -0.3rem;
margin-bottom: -0.3rem;
&.ObjectFieldTemplate-module_error__YwCZw {
border: var(--mantine-color-red-6) 1px solid ;
}
}
}
/** add required pill to required fields that is rendered by rjsf */
.requiredHacks-module_requiredPill__z-ipz {
&::after {
content: '必須';
display: inline-block;
font-size: 0.7rem;
background-color: #f35129;
color: white;
padding: 0.1em 0.5em;
border-radius: 0.5em;
}
}
/**
* add required pill to required fields that is rendered by mantine
* it is not possible to replace the label or element itself
* so we add a virtual pill with the pseudo element, it's a hack
*/
.mantine-InputWrapper-required {
color: transparent ;
&::after {
content: '必須';
display: inline-block;
font-size: 0.7rem;
background-color: #f35129;
color: white;
padding: 0.1em 0.5em;
border-radius: 0.5em;
}
}
.ArrayFieldTemplate-module_dragHandle__MJudU {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
width: 32px;
height: 32px;
}
.ArrayFieldTemplate-module_dropToAction__v-4A6 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100%;
gap: 0.5rem;
flex-grow: 1;
border-radius: var(--mantine-radius-sm);
padding: 4px;
border: 1px solid transparent;
opacity: 0.5;
.ArrayFieldTemplate-module_dtaIcon__Vb4xG {
display: flex;
align-items: center;
justify-content: center;
}
.ArrayFieldTemplate-module_dtaLabel__B2ToG {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
&.ArrayFieldTemplate-module_dtaDraggingOver__kNBnH {
opacity: 1;
}
}
.ArrayFieldTemplate-module_dropToCopy__wteEu {
color: var(--mantine-color-blue-6);
border-color: var(--mantine-color-blue-6);
background-color: var(--mantine-color-blue-0);
}
.ArrayFieldTemplate-module_dropToRemove__zgYqz {
color: var(--mantine-color-red-6);
border-color: var(--mantine-color-red-6);
background-color: var(--mantine-color-red-0);
}