mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +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
361 lines
8.1 KiB
SCSS
361 lines
8.1 KiB
SCSS
.#{$ns}Button {
|
|
display: inline-block;
|
|
font-weight: var(--Button-fontWeight);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background: transparent;
|
|
border: var(--Button-borderWidth) solid transparent;
|
|
transition: var(--Button-transition);
|
|
white-space: nowrap;
|
|
min-width: var(--Button-mimWidth);
|
|
|
|
&:active,
|
|
&.is-active {
|
|
box-shadow: var(--Button-onActive-boxShadow);
|
|
|
|
&:focus {
|
|
box-shadow: var(--Button-onActive-boxShadow);
|
|
}
|
|
}
|
|
|
|
@include button-size(
|
|
var(--Button-paddingY),
|
|
var(--Button-paddingX),
|
|
var(--Button-fontSize),
|
|
var(--Button-lineHeight),
|
|
var(--Button-borderRadius),
|
|
var(--Button-height)
|
|
);
|
|
|
|
@include hover-focus {
|
|
// color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
outline: 0;
|
|
box-shadow: var(--Button-onFocus-boxShadow);
|
|
}
|
|
|
|
&.is-disabled,
|
|
&:disabled {
|
|
opacity: var(--Button-onDisabled-opacity);
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
border-color: var(--Button-onDisabled-borderColor);
|
|
|
|
@if variable-exists(Button-onDisabled-bg) {
|
|
background: $Button-onDisabled-bg;
|
|
}
|
|
|
|
@if variable-exists(Button-onDisabled-color) {
|
|
color: $Button-onDisabled-color !important;
|
|
}
|
|
|
|
&.is-active,
|
|
&:active {
|
|
@if variable-exists(Button-onDisabledActive-bg) {
|
|
background: $Button-onDisabledActive-bg !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:disabled):not(.is-disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
> .pull-left,
|
|
> .pull-right {
|
|
line-height: inherit;
|
|
}
|
|
|
|
> .fa,
|
|
> .iconfont,
|
|
> .glyphicon {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
a.#{$ns}Button.is-disabled,
|
|
fieldset:disabled a.#{$ns}Button {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.#{$ns}Button--primary {
|
|
@include button-variant(
|
|
var(--Button--primary-bg),
|
|
var(--Button--primary-border),
|
|
var(--Button--primary-color),
|
|
var(--Button--primary-onHover-bg),
|
|
var(--Button--primary-onHover-border),
|
|
var(--Button--primary-onHover-color),
|
|
var(--Button--primary-onActive-bg),
|
|
var(--Button--primary-onActive-border),
|
|
var(--Button--primary-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--secondary {
|
|
@include button-variant(
|
|
var(--Button--secondary-bg),
|
|
var(--Button--secondary-border),
|
|
var(--Button--secondary-color),
|
|
var(--Button--secondary-onHover-bg),
|
|
var(--Button--secondary-onHover-border),
|
|
var(--Button--secondary-onHover-color),
|
|
var(--Button--secondary-onActive-bg),
|
|
var(--Button--secondary-onActive-border),
|
|
var(--Button--secondary-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--success {
|
|
@include button-variant(
|
|
var(--Button--success-bg),
|
|
var(--Button--success-border),
|
|
var(--Button--success-color),
|
|
var(--Button--success-onHover-bg),
|
|
var(--Button--success-onHover-border),
|
|
var(--Button--success-onHover-color),
|
|
var(--Button--success-onActive-bg),
|
|
var(--Button--success-onActive-border),
|
|
var(--Button--success-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--info {
|
|
@include button-variant(
|
|
var(--Button--info-bg),
|
|
var(--Button--info-border),
|
|
var(--Button--info-color),
|
|
var(--Button--info-onHover-bg),
|
|
var(--Button--info-onHover-border),
|
|
var(--Button--info-onHover-color),
|
|
var(--Button--info-onActive-bg),
|
|
var(--Button--info-onActive-border),
|
|
var(--Button--info-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--warning {
|
|
@include button-variant(
|
|
var(--Button--warning-bg),
|
|
var(--Button--warning-border),
|
|
var(--Button--warning-color),
|
|
var(--Button--warning-onHover-bg),
|
|
var(--Button--warning-onHover-border),
|
|
var(--Button--warning-onHover-color),
|
|
var(--Button--warning-onActive-bg),
|
|
var(--Button--warning-onActive-border),
|
|
var(--Button--warning-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--danger {
|
|
@include button-variant(
|
|
var(--Button--danger-bg),
|
|
var(--Button--danger-border),
|
|
var(--Button--danger-color),
|
|
var(--Button--danger-onHover-bg),
|
|
var(--Button--danger-onHover-border),
|
|
var(--Button--danger-onHover-color),
|
|
var(--Button--danger-onActive-bg),
|
|
var(--Button--danger-onActive-border),
|
|
var(--Button--danger-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--light {
|
|
@include button-variant(
|
|
var(--Button--light-bg),
|
|
var(--Button--light-border),
|
|
var(--Button--light-color),
|
|
var(--Button--light-onHover-bg),
|
|
var(--Button--light-onHover-border),
|
|
var(--Button--light-onHover-color),
|
|
var(--Button--light-onActive-bg),
|
|
var(--Button--light-onActive-border),
|
|
var(--Button--light-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--dark {
|
|
@include button-variant(
|
|
var(--Button--dark-bg),
|
|
var(--Button--dark-border),
|
|
var(--Button--dark-color),
|
|
var(--Button--dark-onHover-bg),
|
|
var(--Button--dark-onHover-border),
|
|
var(--Button--dark-onHover-color),
|
|
var(--Button--dark-onActive-bg),
|
|
var(--Button--dark-onActive-border),
|
|
var(--Button--dark-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--default {
|
|
@include button-variant(
|
|
var(--Button--default-bg),
|
|
var(--Button--default-border),
|
|
var(--Button--default-color),
|
|
var(--Button--default-onHover-bg),
|
|
var(--Button--default-onHover-border),
|
|
var(--Button--default-onHover-color),
|
|
var(--Button--default-onActive-bg),
|
|
var(--Button--default-onActive-border),
|
|
var(--Button--default-onActive-color)
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--xs {
|
|
@include button-size(
|
|
var(--Button--xs-paddingY),
|
|
var(--Button--xs-paddingX),
|
|
var(--Button--xs-fontSize),
|
|
var(--Button--xs-lineHeight),
|
|
var(--Button--sm-borderRadius),
|
|
var(--Button--xs-height)
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: calc(
|
|
var(--Button--xs-height) * var(--Button--iconOnly-minWidthRate)
|
|
);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--sm {
|
|
@include button-size(
|
|
var(--Button--sm-paddingY),
|
|
var(--Button--sm-paddingX),
|
|
var(--Button--sm-fontSize),
|
|
var(--Button--sm-lineHeight),
|
|
var(--Button--sm-borderRadius),
|
|
var(--Button--sm-height)
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: calc(
|
|
var(--Button--sm-height) * var(--Button--iconOnly-minWidthRate)
|
|
);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--md {
|
|
@include button-size(
|
|
var(--Button--md-paddingY),
|
|
var(--Button--md-paddingX),
|
|
var(--Button--md-fontSize),
|
|
var(--Button--md-lineHeight),
|
|
var(--Button-borderRadius),
|
|
var(--Button--md-height)
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: calc(
|
|
var(--Button--md-height) * var(--Button--iconOnly-minWidthRate)
|
|
);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--lg {
|
|
@include button-size(
|
|
var(--Button--lg-paddingY),
|
|
var(--Button--lg-paddingX),
|
|
var(--Button--lg-fontSize),
|
|
var(--Button--lg-lineHeight),
|
|
var(--Button--lg-borderRadius),
|
|
var(--Button--lg-height)
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: calc(
|
|
var(--Button--lg-height) * var(--Button--iconOnly-minWidthRate)
|
|
);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--iconOnly {
|
|
min-width: calc(var(--Button-height) * var(--Button--iconOnly-minWidthRate));
|
|
|
|
&:not(.#{$ns}Button--link) {
|
|
> svg.icon {
|
|
width: px2rem(14px);
|
|
height: px2rem(14px);
|
|
top: px2rem(2px);
|
|
}
|
|
|
|
> .fa,
|
|
> .iconfont {
|
|
font-size: var(--fontSizeMd);
|
|
}
|
|
|
|
> .iconfont {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--link {
|
|
width: auto;
|
|
min-width: auto;
|
|
font-weight: var(--fontWeightNormal);
|
|
color: var(--Button--link-color);
|
|
text-decoration: var(--link-decoration);
|
|
border: none;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: auto;
|
|
|
|
@include hover-focus {
|
|
color: var(--Button--link-onHover-color);
|
|
text-decoration: var(--link-onHover-decoration);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled,
|
|
&.is-disabled {
|
|
color: var(--text--muted-color);
|
|
pointer-events: none;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--block {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
+ .#{$ns}Button--block {
|
|
margin-top: var(--gap-base);
|
|
}
|
|
}
|
|
|
|
input[type='submit'],
|
|
input[type='reset'],
|
|
input[type='button'] {
|
|
&.#{$ns}Button--block {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.#{$ns}ButtonToolbar {
|
|
margin-left: px2rem(-5px);
|
|
margin-top: px2rem(-5px);
|
|
|
|
> .#{$ns}Button {
|
|
margin-left: px2rem(5px);
|
|
margin-top: px2rem(5px);
|
|
}
|
|
|
|
> .#{$ns}Button--disabled-wrap > .#{$ns}Button {
|
|
margin-left: px2rem(5px);
|
|
margin-top: px2rem(5px);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--disabled-wrap {
|
|
display: inline-block !important;
|
|
}
|