mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
33686a375e
* 使用自定义 css 属性初步,支持大部分组件的展现 * button 大部分可以看了 * cxd 和 dark 大部分正常 * 修复一些细节样式错误;补充 css 变量的文档 * 修复几个脚本发现的错误 * 完善一下注释 * 修复一些样式不一致问题 * 修复可能存在的 css xss * 恢复 font-variant 功能 * 修复绝大部分 @if 相关的问题 * 恢复之前的注释 * 修复小错误,并将所有 background-color 改成 background,这样就能设置渐变色 * 修复 button group 在 cxd 下不一致问题 * 缩小查看配置和复制配置的宽度,留出更多空间 * 修复一些潜在的错误 * 恢复 utilities 中 label 背景色的设置 * 修复错误的 css 变量 * 补充 IE11 Variables Polyfill
351 lines
7.4 KiB
SCSS
351 lines
7.4 KiB
SCSS
.#{$ns}Form {
|
||
font-size: var(--Form-fontSize);
|
||
position: relative;
|
||
|
||
&--quickEdit .#{$ns}Form-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&--inline {
|
||
> .#{$ns}PlainField {
|
||
display: inline-block;
|
||
padding-top: var(--Form-input-paddingY);
|
||
// padding-bottom: var(--Form-input-paddingY);
|
||
}
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-static {
|
||
min-height: var(--Form-input-height);
|
||
padding-top: var(--Form-label-paddingTop);
|
||
padding-bottom: var(--Form-label-paddingTop);
|
||
margin-bottom: 0;
|
||
|
||
.#{$ns}Form-item--inline > .#{$ns}Form-value > & {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-label {
|
||
font-weight: var(--fontWeightNormal);
|
||
margin-bottom: px2rem(5px);
|
||
position: relative;
|
||
|
||
> span {
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-star {
|
||
color: var(--danger);
|
||
font-size: var(--fontSizeXs);
|
||
line-height: 1;
|
||
}
|
||
|
||
.#{$ns}Form-feedback {
|
||
color: var(--danger);
|
||
margin: var(--Form-input-marginBottom) 0 0;
|
||
padding-left: var(--gap-base);
|
||
font-size: var(--fontSizeSm);
|
||
}
|
||
|
||
.#{$ns}Form-description {
|
||
display: block;
|
||
color: var(--Form-description-color);
|
||
margin: var(--Form-input-marginBottom) 0 0;
|
||
font-size: var(--Form-description-fontSize);
|
||
}
|
||
|
||
.#{$ns}Form-hint {
|
||
display: inline-block;
|
||
margin-left: var(--gap-sm);
|
||
padding-top: var(--Form-input-paddingY);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.#{$ns}Form-item {
|
||
margin-bottom: var(--Form-item-gap);
|
||
|
||
.#{$ns}Grid-form > &:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.#{$ns}Form--inline > &--inline {
|
||
&:last-child {
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-remark {
|
||
padding-top: var(--Form-label-paddingTop);
|
||
vertical-align: top;
|
||
}
|
||
|
||
&--inline {
|
||
margin-bottom: calc(var(--Form-item-gap) / 2);
|
||
margin-right: calc(var(--Form-item-gap) / 2);
|
||
}
|
||
|
||
&--horizontal {
|
||
> .#{$ns}Form-label {
|
||
text-align: var(--Form--horizontal-label-align);
|
||
white-space: var(--Form--horizontal-label-whiteSpace);
|
||
}
|
||
}
|
||
|
||
&--normal {
|
||
> .#{$ns}Form-label {
|
||
display: block;
|
||
|
||
.#{$ns}Form-star {
|
||
position: absolute;
|
||
left: px2rem(-6px);
|
||
top: px2rem(3px);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.is-error > .#{$ns}Form-label {
|
||
color: var(--danger);
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-placeholder {
|
||
color: var(--Form-input-placeholderColor);
|
||
}
|
||
|
||
.#{$ns}Form-caption {
|
||
display: inline-block;
|
||
line-height: var(--Form-input-height);
|
||
height: var(--Form-input-height);
|
||
margin-left: px2rem(10px);
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
.#{$ns}Form-label {
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.#{$ns}Form-control--sizeXs {
|
||
// min-width: var(--Form-control-widthXs);
|
||
// width: auto;
|
||
min-width: var(--Form-control-widthXs);
|
||
max-width: 100%;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
// 非常难受,number 类型的 input 不能设置size
|
||
&.#{$ns}NumberControl {
|
||
width: var(--Form-control-widthXs);
|
||
}
|
||
|
||
&.#{$ns}TextareaControl {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-control--sizeSm {
|
||
min-width: var(--Form-control-widthSm);
|
||
max-width: 100%;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
// 非常难受,number 类型的 input 不能设置size
|
||
&.#{$ns}NumberControl {
|
||
width: var(--Form-control-widthSm);
|
||
}
|
||
|
||
&.#{$ns}TextareaControl {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-control--sizeMd {
|
||
min-width: var(--Form-control-widthMd);
|
||
max-width: 100%;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
&.#{$ns}TextareaControl {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-control--sizeLg {
|
||
min-width: var(--Form-control-widthLg);
|
||
max-width: 100%;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
// 非常难受,number 类型的 input 不能设置size
|
||
&.#{$ns}NumberControl {
|
||
width: var(--Form-control-widthLg);
|
||
}
|
||
|
||
&.#{$ns}TextareaControl {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-item {
|
||
&--horizontal {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
|
||
margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
|
||
|
||
> * {
|
||
padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
|
||
padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
|
||
}
|
||
|
||
> .#{$ns}Form-label,
|
||
> .#{$ns}Form-value {
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
max-width: 100%;
|
||
width: 0;
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--xs,
|
||
.#{$ns}Form-itemColumn--sm,
|
||
.#{$ns}Form-itemColumn--normal,
|
||
.#{$ns}Form-itemColumn--auto,
|
||
.#{$ns}Form-itemColumn--md,
|
||
.#{$ns}Form-itemColumn--lg {
|
||
flex-grow: unset;
|
||
flex-basis: unset;
|
||
}
|
||
|
||
> .#{$ns}Form-label {
|
||
padding-top: var(--Form-label-paddingTop);
|
||
margin-bottom: 0;
|
||
|
||
.#{$ns}Form-star {
|
||
position: absolute;
|
||
left: px2rem(-6px);
|
||
top: px2rem(3px);
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--xs {
|
||
width: var(--Form--horizontal-label-widthXs);
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--sm {
|
||
width: var(--Form--horizontal-label-widthSm);
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--normal {
|
||
width: var(--Form--horizontal-label-widthBase);
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--md {
|
||
width: var(--Form--horizontal-label-widthMd);
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--lg {
|
||
width: var(--Form--horizontal-label-widthLg);
|
||
}
|
||
|
||
.#{$ns}Form-itemColumn--auto {
|
||
width: auto;
|
||
}
|
||
|
||
@for $i from (1) through $Form--horizontal-columns {
|
||
.#{$ns}Form-itemColumn--#{$i} {
|
||
flex: 0 0 percentage($i / $Form--horizontal-columns);
|
||
max-width: percentage($i / $Form--horizontal-columns);
|
||
min-height: 1px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&--inline {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
.#{$ns}TextControl {
|
||
width: var(--Form-control-widthBase);
|
||
}
|
||
|
||
> .#{$ns}Form-label {
|
||
padding-top: var(--Form-label-paddingTop);
|
||
margin-bottom: 0;
|
||
margin-right: calc(var(--Form-item-gap) / 2);
|
||
|
||
.#{$ns}Form-star {
|
||
position: static;
|
||
}
|
||
}
|
||
|
||
> .#{$ns}Form-value {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
> .#{$ns}Form-control {
|
||
vertical-align: top;
|
||
display: inline-block;
|
||
}
|
||
|
||
> .#{$ns}Form-control.#{$ns}InputGroup {
|
||
display: inline-flex;
|
||
}
|
||
|
||
> .#{$ns}TextControl--withAddOn {
|
||
display: inline-flex;
|
||
min-width: var(--Form-control-widthMd);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
margin-left: calc(var(--Form-row-gutterWidth) / -2);
|
||
margin-right: calc(var(--Form-row-gutterWidth) / -2);
|
||
align-items: flex-start;
|
||
|
||
> * {
|
||
padding-left: calc(var(--Form-row-gutterWidth) / 2);
|
||
padding-right: calc(var(--Form-row-gutterWidth) / 2);
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form-col {
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
flex-shrink: 1;
|
||
}
|
||
|
||
.#{$ns}Form-rowInner {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
> .#{$ns}Form-label {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
padding-top: var(--Form-label-paddingTop);
|
||
padding-right: var(--Form-row-gutterWidth);
|
||
}
|
||
|
||
> .#{$ns}Form-control {
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
|
||
// &:not(.#{$ns}Form-control--withSize) {
|
||
// width: var(--Form-control-widthBase);
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.#{$ns}Form--quickEdit {
|
||
min-width: var(--Form-control-widthSm);
|
||
}
|