amis/scss/components/form/_form.scss
吴多益 33686a375e
SCSS 基于 CSS custom properties 重构,支持通过配置来控制展现风格 (#1190)
* 使用自定义 css 属性初步,支持大部分组件的展现

* button 大部分可以看了

* cxd 和 dark 大部分正常

* 修复一些细节样式错误;补充 css 变量的文档

* 修复几个脚本发现的错误

* 完善一下注释

* 修复一些样式不一致问题

* 修复可能存在的 css xss

* 恢复 font-variant 功能

* 修复绝大部分 @if 相关的问题

* 恢复之前的注释

* 修复小错误,并将所有 background-color 改成 background,这样就能设置渐变色

* 修复 button group 在 cxd 下不一致问题

* 缩小查看配置和复制配置的宽度,留出更多空间

* 修复一些潜在的错误

* 恢复 utilities 中 label 背景色的设置

* 修复错误的 css 变量

* 补充 IE11 Variables Polyfill
2020-12-21 10:08:40 +08:00

351 lines
7.4 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.#{$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);
}