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
115 lines
2.4 KiB
SCSS
115 lines
2.4 KiB
SCSS
.#{$ns}ButtonGroup {
|
||
position: relative;
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
|
||
> .#{$ns}Button {
|
||
position: relative;
|
||
flex: 0 1 auto;
|
||
}
|
||
|
||
> .#{$ns}Button {
|
||
@include hover {
|
||
z-index: 1;
|
||
}
|
||
|
||
&:focus,
|
||
&:active,
|
||
&.active,
|
||
&.is-active {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.#{$ns}Button + .#{$ns}Button,
|
||
.#{$ns}Button + .#{$ns}ButtonGroup,
|
||
.#{$ns}ButtonGroup + .#{$ns}Button,
|
||
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
|
||
margin-left: calc(var(--Button-borderWidth) * -1);
|
||
}
|
||
|
||
&--block {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonToolbar {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.#{$ns}ButtonGroup {
|
||
margin-left: px2rem(5px);
|
||
margin-top: px2rem(5px);
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroup {
|
||
> .#{$ns}Button:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
// cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
|
||
.#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active {
|
||
color: var(--ButtonGroup--primary-isActive-color);
|
||
background: var(--ButtonGroup--primary-isActive-bg);
|
||
}
|
||
|
||
> .#{$ns}Button:not(:last-child),
|
||
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
> .#{$ns}Button:not(:first-child),
|
||
> .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroup--vertical {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
|
||
.#{$ns}Button,
|
||
.#{$ns}ButtonGroup {
|
||
width: 100%;
|
||
}
|
||
|
||
> .#{$ns}Button + .#{$ns}Button,
|
||
> .#{$ns}Button + .#{$ns}ButtonGroup,
|
||
> .#{$ns}ButtonGroup + .#{$ns}Button,
|
||
> .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
|
||
margin-top: calc(var(--Button-borderWidth) * -1);
|
||
margin-left: 0;
|
||
}
|
||
|
||
> .#{$ns}Button:not(:last-child),
|
||
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
> .#{$ns}Button:not(:first-child),
|
||
> .#{$ns}ButtonGroup:not(:first-child) > .btn {
|
||
border-top-left-radius: 0;
|
||
border-top-right-radius: 0;
|
||
}
|
||
}
|
||
|
||
.#{$ns}ButtonGroupControl {
|
||
display: inline-block;
|
||
|
||
> .#{$ns}ButtonGroup--sm {
|
||
margin-top: calc((var(--Form-input-height) - var(--Button--sm-height)) / 2);
|
||
}
|
||
|
||
> .#{$ns}ButtonGroup--xs {
|
||
margin-top: calc((var(--Form-input-height) - var(--Button--xs-height)) / 2);
|
||
}
|
||
}
|