UNPKG

@aokiapp/rjsf-mantine-corporate

Version:

Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme

132 lines (121 loc) 3.31 kB
.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 !important; } } } /** 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 !important; &::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); }