amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_json-schema.scss
2023-10-07 19:42:30 +08:00

156 lines
3.0 KiB
SCSS

.#{$ns}JSONSchemaMember {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--gap-sm);
&-key {
min-width: 80px;
max-width: 150px;
flex: 1;
& > span {
display: flex;
background: var(--Form-input-bg);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
border-radius: var(--Form-input-borderRadius);
// height: var(--Form-input-height);
line-height: var(--Form-input-lineHeight);
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
font-size: var(--Form-input-fontSize);
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
color: var(--Form-input-color);
}
&.is-mobile {
& > span {
border-radius: 0;
border: none;
border-bottom: var(--Form-input-borderWidth) solid
var(--Form-input-borderColor);
}
.#{$ns}InputBox {
height: 100%;
line-height: 1;
> .#{$ns}InputBox-caret {
svg {
top: 0.125em;
}
}
}
}
}
&-value {
flex: 1;
margin-left: auto;
display: flex;
gap: var(--gap-sm);
> a {
display: inline-block;
}
> div {
flex: 1;
flex-wrap: nowrap;
}
}
& + & {
margin-top: var(--gap-sm);
}
}
.#{$ns}JSONSchemaObject {
&-caret {
display: inline-block;
height: px2rem(24px);
text-align: center;
line-height: px2rem(24px);
vertical-align: middle;
cursor: pointer;
transform: rotate(0deg);
transition: transform var(--animation-duration);
color: var(--icon-color);
margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
transform: rotate(90deg);
> svg {
width: 10px;
height: 10px;
top: 0;
}
}
&-caret.is-collapsed {
transform: rotate(0deg);
}
&.is-expanded {
position: relative;
margin-left: px2rem(20px);
&:before {
width: 1px;
content: '';
display: block;
position: absolute;
top: 30px;
bottom: 10px;
left: -33px;
border-left: dashed 1px var(--icon-color);
}
& .#{$ns}JSONSchemaMember {
position: relative;
}
& .#{$ns}JSONSchemaMember:before {
height: 1px;
content: '';
display: block;
position: absolute;
top: 17px;
width: 25px;
left: -33px;
border-top: dashed 1px var(--icon-color);
}
& .#{$ns}JSONSchemaMember:first-child:before {
left: -20px;
width: 12px;
}
& > button {
position: relative;
&:before {
height: 1px;
content: '';
display: block;
position: absolute;
top: 10px;
width: 25px;
left: -33px;
border-top: dashed 1px var(--icon-color);
}
}
}
&.is-mobile {
.#{$ns}Number {
border-radius: 0;
position: relative;
&::before {
@include hairline-bottom(var(--Form-input-borderColor));
}
}
}
}