mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:28:32 +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
143 lines
2.8 KiB
SCSS
143 lines
2.8 KiB
SCSS
.#{$ns}Crud {
|
||
position: relative;
|
||
|
||
&.is-loading > &-body {
|
||
// 弹框中，blur 效果变成白班，先去掉。
|
||
// -webkit-filter: blur(5px);
|
||
// filter: blur(5px);
|
||
}
|
||
|
||
&-selection {
|
||
margin-bottom: var(--gap-base);
|
||
}
|
||
|
||
&-selectionLabel {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
margin-top: var(--gap-xs);
|
||
}
|
||
|
||
&-value {
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
user-select: none;
|
||
line-height: calc(
|
||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
|
||
);
|
||
display: inline-block;
|
||
font-size: var(--Form-selectValue-fontSize);
|
||
color: var(--Form-selectValue-color);
|
||
background: var(--Form-selectValue-bg);
|
||
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||
border-radius: 2px;
|
||
margin-right: var(--gap-xs);
|
||
margin-top: var(--gap-xs);
|
||
|
||
&:hover {
|
||
background: var(--Form-selectValue-onHover-bg);
|
||
}
|
||
|
||
&.is-disabled {
|
||
pointer-events: none;
|
||
opacity: var(--Button-onDisabled-opacity);
|
||
}
|
||
}
|
||
|
||
&-valueIcon {
|
||
cursor: pointer;
|
||
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||
padding: 1px 5px;
|
||
|
||
&:hover {
|
||
background: var(--Form-selectValue-onHover-bg);
|
||
}
|
||
}
|
||
|
||
&-valueLabel {
|
||
padding: 0 var(--gap-xs);
|
||
}
|
||
|
||
&-selectionClear {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin-left: var(--gap-xs);
|
||
margin-top: var(--gap-xs);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
&-toolbar-item {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
margin-top: var(--Crud-toolbar-gap);
|
||
line-height: var(--Crud-toolbar-lineHeight);
|
||
height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
&--left {
|
||
float: left;
|
||
}
|
||
|
||
&--right {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&-actions {
|
||
> * + .#{$ns}Button,
|
||
> * + .#{$ns}ButtonGroup,
|
||
> * + .#{$ns}ButtonToolbar {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
|
||
&-statistics {
|
||
line-height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
&-pageSwitch {
|
||
.#{$ns}Select {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
|
||
&-pager {
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
.#{$ns}Crud {
|
||
&-toolbar {
|
||
margin-left: calc(var(--Crud-toolbar-gap) * -1);
|
||
margin-top: calc(var(--Crud-toolbar-gap) * -1);
|
||
flex-basis: 0;
|
||
flex-grow: 1;
|
||
@include clearfix();
|
||
}
|
||
|
||
&-toolbar-item {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
line-height: var(--Crud-toolbar-lineHeight);
|
||
height: var(--Crud-toolbar-height);
|
||
vertical-align: middle;
|
||
|
||
&--left {
|
||
float: left;
|
||
}
|
||
|
||
&--right {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&-actions {
|
||
> .#{$ns}Button + .#{$ns}Button {
|
||
margin-left: var(--Crud-toolbar-gap);
|
||
}
|
||
}
|
||
}
|
||
}
|