421 lines
11 KiB
SCSS
421 lines
11 KiB
SCSS
@import '@/uni_modules/lime-style/index.scss';
|
|
/* #ifdef uniVersion >= 4.75 */
|
|
$use-css-var: true;
|
|
/* #endif */
|
|
|
|
$button: #{$prefix}-button;
|
|
|
|
$button-gap: create-var(button-gap, 4px);
|
|
$button-border-width: create-var(button-border-width, 0.71px);
|
|
$button-border-radius: create-var(button-border-radius, $border-radius-sm);
|
|
$button-solid-text-color: create-var(button-solid-text-color, white);
|
|
$button-disabled-opacity: create-var(button-disabled-opacity, 0.6);
|
|
|
|
$button-default-type-map:(
|
|
solid-color: create-var(button-default-solid-text-color, white),
|
|
color: create-var(button-default-color, $gray-14),
|
|
hover-color: create-var(button-default-hover-color, rgba(0,0,0,1)),
|
|
light: create-var(button-default-light-color, $gray-2),
|
|
light-hover: create-var(button-default-light-hover-color, $gray-3),
|
|
border-color: create-var(button-default-border-color, $gray-5)
|
|
);
|
|
|
|
$button-primary-type-map:(
|
|
solid-color: create-var(button-primary-solid-text-color, white),
|
|
color: create-var(button-primary-color, $primary-color),
|
|
hover-color: create-var(button-primary-hover-color, $primary-color-7),
|
|
light: create-var(button-primary-light-color, $primary-color-1),
|
|
light-hover: create-var(button-primary-light-hover-color, $primary-color-2),
|
|
border-color: create-var(button-primary-border-color, $primary-color)
|
|
);
|
|
|
|
$button-danger-type-map:(
|
|
solid-color: create-var(button-dangert-solid-text-color, white),
|
|
color: create-var(button-danger-color, $error-color),
|
|
hover-color: create-var(button-danger-hover-color, $error-color-7),
|
|
light: create-var(button-danger-light-color, $error-color-1),
|
|
light-hover: create-var(button-danger-light-hover-color, $error-color-3),
|
|
border-color: create-var(button-danger-border-color, $error-color)
|
|
);
|
|
|
|
$button-warning-type-map:(
|
|
solid-color: create-var(button-warning-solid-text-color, white),
|
|
color: create-var(button-warning-color, $warning-color),
|
|
hover-color: create-var(button-warning-hover-color, $warning-color-7),
|
|
light: create-var(button-warning-light-color, $warning-color-1),
|
|
light-hover: create-var(button-warning-light-hover-color, $warning-color-2),
|
|
border-color: create-var(button-warning-border-color, $warning-color)
|
|
);
|
|
|
|
$button-success-type-map:(
|
|
solid-color: create-var(button-success-solid-text-color, white),
|
|
color: create-var(button-success-color, $success-color),
|
|
hover-color: create-var(button-success-hover-color, $success-color-7),
|
|
light: create-var(button-success-light-color, $success-color-1),
|
|
light-hover: create-var(button-success-light-hover-color, $success-color-2),
|
|
border-color: create-var(button-success-border-color, $success-color)
|
|
);
|
|
|
|
$button-info-type-map:(
|
|
solid-color: create-var(button-info-solid-text-color, white),
|
|
color: create-var(button-info-color, $info-color),
|
|
hover-color: create-var(button-info-hover-color, $info-color-7),
|
|
light: create-var(button-info-light-color, $info-color-2),
|
|
light-hover: create-var(button-info-light-hover-color, $info-color-3),
|
|
border-color: create-var(button-info-border-color, $info-color)
|
|
);
|
|
|
|
|
|
$button-type-map:(
|
|
default: $button-default-type-map,
|
|
primary: $button-primary-type-map,
|
|
danger: $button-danger-type-map,
|
|
warning: $button-warning-type-map,
|
|
success: $button-success-type-map,
|
|
info: $button-info-type-map,
|
|
);
|
|
|
|
|
|
$button-icon-size-map:(
|
|
mini: create-var(button-icon-size, 32rpx),
|
|
small: create-var(button-icon-size, 36rpx),
|
|
medium: create-var(button-icon-size, 36rpx),
|
|
large: create-var(button-icon-size, 48rpx),
|
|
);
|
|
|
|
$button-font-size-map:(
|
|
mini: create-var(button-font-size, $font-size-sm),
|
|
small: create-var(button-font-size, $font-size),
|
|
medium: create-var(button-font-size, $font-size-md),
|
|
large: create-var(button-font-size, $font-size-md),
|
|
);
|
|
|
|
// $button-padding-map:(
|
|
// mini: create-var(button-padding, 0 $spacer-xs),
|
|
// small: create-var(button-padding,0 $spacer-sm),
|
|
// medium: create-var(button-padding, 0 $spacer),
|
|
// large: create-var(button-padding, 0 $spacer-md),
|
|
// );
|
|
|
|
$button-padding-x-map:(
|
|
mini: create-var(button-padding-x, $spacer-xs),
|
|
small: create-var(button-padding-x, $spacer-sm),
|
|
medium: create-var(button-padding-x, $spacer),
|
|
large: create-var(button-padding-x, $spacer-md),
|
|
);
|
|
|
|
$button-padding-y-map:(
|
|
mini: create-var(button-padding-y, 0),
|
|
small: create-var(button-padding-y, 0),
|
|
medium: create-var(button-padding-y, 0),
|
|
large: create-var(button-padding-y, 0),
|
|
);
|
|
|
|
|
|
|
|
$button-height-map:(
|
|
mini: create-var(button-mini-height, 56rpx),
|
|
small: create-var(button-small-height, 64rpx),
|
|
medium: create-var(button-medium-height, 80rpx),
|
|
large: create-var(button-large-height, 96rpx),
|
|
);
|
|
|
|
@mixin button-size($size) {
|
|
$iconSize: map-get($button-icon-size-map, $size);
|
|
$fontSize: map-get($button-font-size-map, $size);
|
|
// $padding: map-get($button-padding-map, $size);
|
|
$paddingX: map-get($button-padding-x-map, $size);
|
|
$paddingY: map-get($button-padding-y-map, $size);
|
|
$height: map-get($button-height-map, $size);
|
|
|
|
.#{$button}--#{$size} {
|
|
// padding: $padding;
|
|
@include padding($paddingY $paddingX);
|
|
height: $height;
|
|
|
|
/* #ifndef UNI-APP-X */
|
|
font-size: $fontSize;
|
|
--l-loading-size: #{$iconSize};
|
|
/* #endif */
|
|
|
|
/* #ifdef UNI-APP-X */
|
|
.#{$button} {
|
|
&__content {
|
|
font-size: $fontSize;
|
|
// line-height: 1;
|
|
}
|
|
// &__icon {
|
|
// font-size: $iconSize;
|
|
// }
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&__loading {
|
|
--l-loading-size: #{$iconSize};
|
|
font-size: $iconSize;
|
|
}
|
|
/* #endif */
|
|
}
|
|
/* #endif */
|
|
|
|
&.#{$button} {
|
|
&--square,&--circle {
|
|
width: $height;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@mixin button-type($type) {
|
|
$type-map: map-get($button-type-map, $type);
|
|
|
|
$color: map-get($type-map, color);
|
|
$solid-color: map-get($type-map, solid-color);
|
|
$hoverColor: map-get($type-map, hover-color);
|
|
$borderColor: map-get($type-map, border-color);
|
|
$lightColor: map-get($type-map, light);
|
|
$lightHoverColor: map-get($type-map, light-hover);
|
|
|
|
.#{$button}--hover {
|
|
&.#{$button}--#{$type} {
|
|
background-color: $lightColor;
|
|
&.#{$button}--solid {
|
|
background-color: $hoverColor;
|
|
}
|
|
&.#{$button}--light {
|
|
background-color: $lightHoverColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
.#{$button}--#{$type} {
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
color: $color;
|
|
&:not(.#{$button}--solid) {
|
|
--l-loading-color: #{$color};
|
|
}
|
|
/* #endif */
|
|
.#{$button} {
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&__content {
|
|
color: $color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
|
|
|
|
|
|
&.#{$button}--solid {
|
|
background-color: $color;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
color: $solid-color;
|
|
--l-loading-color: #{$solid-color};
|
|
&:after {
|
|
border-color: transparent;
|
|
}
|
|
/* #endif */
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
// border-style: solid;
|
|
.#{$button} {
|
|
&__content {
|
|
color: $solid-color;
|
|
}
|
|
&__icon {
|
|
color: $solid-color;
|
|
}
|
|
&__loading {
|
|
// color: $button-solid-text-color;
|
|
}
|
|
}
|
|
/* #endif*/
|
|
}
|
|
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&.#{$button}--outline {
|
|
border-color: $borderColor;
|
|
}
|
|
&.#{$button}--dashed {
|
|
border-color: $borderColor;
|
|
}
|
|
/* #endif */
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&.#{$button}--outline {
|
|
&:after {
|
|
border-color: $borderColor;
|
|
}
|
|
}
|
|
&.#{$button}--dashed {
|
|
&:after {
|
|
border-color: $borderColor;
|
|
}
|
|
}
|
|
/* #endif */
|
|
&.#{$button}--light {
|
|
background-color: $lightColor;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&:after {
|
|
border-color: transparent;
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
&.#{$button}--ghost {
|
|
background-color: transparent;
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
border-color: $borderColor;
|
|
/* #endif */
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&:after {
|
|
border-color: $borderColor;
|
|
}
|
|
/* #endif */
|
|
}
|
|
}
|
|
}
|
|
|
|
@include button-size(mini);
|
|
@include button-size(small);
|
|
@include button-size(medium);
|
|
@include button-size(large);
|
|
|
|
|
|
@include button-type(default);
|
|
@include button-type(primary);
|
|
@include button-type(danger);
|
|
@include button-type(info);
|
|
@include button-type(warning);
|
|
@include button-type(success);
|
|
|
|
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY || MP-WEIXIN */
|
|
#{$button} {
|
|
&[data-block]{
|
|
width:100%;
|
|
display: flex;
|
|
margin-right: 0!important;
|
|
.#{$button} {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
/* #endif */
|
|
.#{$button} {
|
|
opacity: 1; // uniapp x IOS必须存在
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
display: inline-flex;
|
|
white-space: nowrap;
|
|
font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
|
vertical-align: top;
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
/* #endif */
|
|
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
// css var 不支持过渡？
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
transition-duration: 200ms;
|
|
/* #endif */
|
|
// background-color ios 无法恢复
|
|
transition-property:opacity,border-color,width,height;
|
|
|
|
// border-radius: $button-border-radius;
|
|
@include border-radius($button-border-radius);
|
|
|
|
|
|
&__button {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
// border-width: $button-border-width;
|
|
// border-color: transparent;
|
|
//,&--loading
|
|
&.#{$button}--disabled {
|
|
opacity: $button-disabled-opacity;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
cursor: no-drop;
|
|
/* #endif */
|
|
}
|
|
|
|
&--block {
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
// border-style: solid;
|
|
/* #endif*/
|
|
width: 100%;
|
|
align-self: auto
|
|
}
|
|
// &--solid {
|
|
// /* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
// color: $button-solid-text-color;
|
|
// --l-loading-color: #{$button-solid-text-color};
|
|
// /* #endif*/
|
|
// /* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
// // border-style: solid;
|
|
// .#{$button} {
|
|
// &__content {
|
|
// color: $button-solid-text-color;
|
|
// }
|
|
// &__icon {
|
|
// color: $button-solid-text-color;
|
|
// }
|
|
// &__loading {
|
|
// // color: $button-solid-text-color;
|
|
// }
|
|
// }
|
|
// /* #endif*/
|
|
// }
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&--outline {
|
|
border-style: solid;
|
|
border-width: $button-border-width;
|
|
}
|
|
&--dashed {
|
|
border-style: dashed;
|
|
border-width: $button-border-width;
|
|
}
|
|
/* #endif*/
|
|
&__loading,&__icon{
|
|
align-self: center;
|
|
}
|
|
&--round,&--circle {
|
|
border-radius: 999px;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
--l-button-border-radius: 999px
|
|
/* #endif*/
|
|
}
|
|
/* #ifdef UNI-APP-X */
|
|
.gap {
|
|
margin-left: $button-gap;
|
|
}
|
|
/* #endif*/
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY || MP-WEIXIN */
|
|
&::after {
|
|
border-radius: calc($button-border-radius * 2);
|
|
border-color: var(--l-button-border-color);
|
|
}
|
|
&--text {
|
|
&::after {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
view+&__content:not(:empty),
|
|
l-button+&__content:not(:empty),
|
|
l-icon+&__content:not(:empty),
|
|
&__loading+&__content:not(:empty),
|
|
&__icon+&__content:not(:empty) {
|
|
margin-left: $button-gap;
|
|
}
|
|
/* #endif*/
|
|
}
|
|
|