mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
341 lines
7.1 KiB
SCSS
341 lines
7.1 KiB
SCSS
.#{$ns}Button {
|
|
display: inline-block;
|
|
font-weight: $Button-fontWeight;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
background-color: transparent;
|
|
border: $Button-borderWidth solid transparent;
|
|
transition: $Button-transition;
|
|
white-space: nowrap;
|
|
|
|
@if $Button-mimWidth !=auto {
|
|
min-width: $Button-mimWidth;
|
|
}
|
|
|
|
@include button-size(
|
|
$Button-paddingY,
|
|
$Button-paddingX,
|
|
$Button-fontSize,
|
|
$Button-lineHeight,
|
|
$Button-borderRadius,
|
|
$Button-height
|
|
);
|
|
|
|
@include hover-focus {
|
|
color: $text-color;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
outline: 0;
|
|
box-shadow: $Button-onFocus-boxShadow;
|
|
}
|
|
|
|
&.is-disabled,
|
|
&:disabled {
|
|
opacity: $Button-onDisabled-opacity;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
border-color: $Button-onDisabled-borderColor;
|
|
|
|
@if variable-exists(Button-onDisabled-bg) {
|
|
background-color: $Button-onDisabled-bg !important;
|
|
}
|
|
|
|
@if variable-exists(Button-onDisabled-color) {
|
|
color: $Button-onDisabled-color !important;
|
|
}
|
|
|
|
&.is-active,
|
|
&:active {
|
|
@if variable-exists(Button-onDisabledActive-bg) {
|
|
background-color: $Button-onDisabledActive-bg !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:disabled):not(.is-disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:not(:disabled):not(.is-disabled):active,
|
|
&:not(:disabled):not(.is-disabled).is-active {
|
|
box-shadow: $Button-onActive-boxShadow;
|
|
|
|
&:focus {
|
|
box-shadow: $Button-onActive-boxShadow;
|
|
}
|
|
}
|
|
|
|
> .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(
|
|
$Button--primary-bg,
|
|
$Button--primary-border,
|
|
$Button--primary-color,
|
|
$Button--primary-onHover-bg,
|
|
$Button--primary-onHover-border,
|
|
$Button--primary-onHover-color,
|
|
$Button--primary-onActive-bg,
|
|
$Button--primary-onActive-border,
|
|
$Button--primary-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--secondary {
|
|
@include button-variant(
|
|
$Button--secondary-bg,
|
|
$Button--secondary-border,
|
|
$Button--secondary-color,
|
|
$Button--secondary-onHover-bg,
|
|
$Button--secondary-onHover-border,
|
|
$Button--secondary-onHover-color,
|
|
$Button--secondary-onActive-bg,
|
|
$Button--secondary-onActive-border,
|
|
$Button--secondary-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--success {
|
|
@include button-variant(
|
|
$Button--success-bg,
|
|
$Button--success-border,
|
|
$Button--success-color,
|
|
$Button--success-onHover-bg,
|
|
$Button--success-onHover-border,
|
|
$Button--success-onHover-color,
|
|
$Button--success-onActive-bg,
|
|
$Button--success-onActive-border,
|
|
$Button--success-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--info {
|
|
@include button-variant(
|
|
$Button--info-bg,
|
|
$Button--info-border,
|
|
$Button--info-color,
|
|
$Button--info-onHover-bg,
|
|
$Button--info-onHover-border,
|
|
$Button--info-onHover-color,
|
|
$Button--info-onActive-bg,
|
|
$Button--info-onActive-border,
|
|
$Button--info-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--warning {
|
|
@include button-variant(
|
|
$Button--warning-bg,
|
|
$Button--warning-border,
|
|
$Button--warning-color,
|
|
$Button--warning-onHover-bg,
|
|
$Button--warning-onHover-border,
|
|
$Button--warning-onHover-color,
|
|
$Button--warning-onActive-bg,
|
|
$Button--warning-onActive-border,
|
|
$Button--warning-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--danger {
|
|
@include button-variant(
|
|
$Button--danger-bg,
|
|
$Button--danger-border,
|
|
$Button--danger-color,
|
|
$Button--danger-onHover-bg,
|
|
$Button--danger-onHover-border,
|
|
$Button--danger-onHover-color,
|
|
$Button--danger-onActive-bg,
|
|
$Button--danger-onActive-border,
|
|
$Button--danger-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--light {
|
|
@include button-variant(
|
|
$Button--light-bg,
|
|
$Button--light-border,
|
|
$Button--light-color,
|
|
$Button--light-onHover-bg,
|
|
$Button--light-onHover-border,
|
|
$Button--light-onHover-color,
|
|
$Button--light-onActive-bg,
|
|
$Button--light-onActive-border,
|
|
$Button--light-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--dark {
|
|
@include button-variant(
|
|
$Button--dark-bg,
|
|
$Button--dark-border,
|
|
$Button--dark-color,
|
|
$Button--dark-onHover-bg,
|
|
$Button--dark-onHover-border,
|
|
$Button--dark-onHover-color,
|
|
$Button--dark-onActive-bg,
|
|
$Button--dark-onActive-border,
|
|
$Button--dark-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--default {
|
|
@include button-variant(
|
|
$Button--default-bg,
|
|
$Button--default-border,
|
|
$Button--default-color,
|
|
$Button--default-onHover-bg,
|
|
$Button--default-onHover-border,
|
|
$Button--default-onHover-color,
|
|
$Button--default-onActive-bg,
|
|
$Button--default-onActive-border,
|
|
$Button--default-onActive-color
|
|
);
|
|
}
|
|
|
|
.#{$ns}Button--xs {
|
|
@include button-size(
|
|
$Button--xs-paddingY,
|
|
$Button--xs-paddingX,
|
|
$Button--xs-fontSize,
|
|
$Button--xs-lineHeight,
|
|
$Button--sm-borderRadius,
|
|
$Button--xs-height
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: $Button--xs-height * $Button--iconOnly-minWidthRate;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--sm {
|
|
@include button-size(
|
|
$Button--sm-paddingY,
|
|
$Button--sm-paddingX,
|
|
$Button--sm-fontSize,
|
|
$Button--sm-lineHeight,
|
|
$Button--sm-borderRadius,
|
|
$Button--sm-height
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: $Button--sm-height * $Button--iconOnly-minWidthRate;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--md {
|
|
@include button-size(
|
|
$Button--md-paddingY,
|
|
$Button--md-paddingX,
|
|
$Button--md-fontSize,
|
|
$Button--md-lineHeight,
|
|
$Button-borderRadius,
|
|
$Button--md-height
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: $Button--md-height * $Button--iconOnly-minWidthRate;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--lg {
|
|
@include button-size(
|
|
$Button--lg-paddingY,
|
|
$Button--lg-paddingX,
|
|
$Button--lg-fontSize,
|
|
$Button--lg-lineHeight,
|
|
$Button--lg-borderRadius,
|
|
$Button--lg-height
|
|
);
|
|
|
|
&.#{$ns}Button--iconOnly {
|
|
min-width: $Button--lg-height * $Button--iconOnly-minWidthRate;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--iconOnly {
|
|
min-width: $Button-height * $Button--iconOnly-minWidthRate;
|
|
|
|
&:not(.#{$ns}Button--link) {
|
|
> .fa,
|
|
> .iconfont {
|
|
font-size: $fontSizeMd;
|
|
}
|
|
|
|
> .iconfont {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--link {
|
|
width: auto;
|
|
min-width: auto;
|
|
font-weight: $fontWeightNormal;
|
|
color: $Button--link-color;
|
|
text-decoration: $link-decoration;
|
|
border: none;
|
|
|
|
@include hover-focus {
|
|
color: $Button--link-onHover-color;
|
|
text-decoration: $link-onHover-decoration;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled,
|
|
&.is-disabled {
|
|
color: $text--muted-color;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Button--block {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
+ .#{$ns}Button--block {
|
|
margin-top: $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 {
|
|
display: inline-block !important;
|
|
}
|