automated_uniapp/uni_modules/cool-ui/static/css/button.scss

141 lines
2.1 KiB
SCSS
Raw Normal View History

2025-01-09 16:16:11 +08:00
// Mixins
@mixin button-color($type, $color) {
&.cl-button--#{$type} {
background-color: $color;
border-color: $color;
.cl-button__text,
.cl-button__icon,
.cl-loading {
color: #fff;
}
&.is-plain {
background-color: #fff;
.cl-button__text,
.cl-button__icon {
color: rgba($color, 0.8);
}
&.is-border {
border-color: rgba($color, 0.8);
}
}
&[disabled],
&.is-disabled {
background-color: $color;
}
&.button-hover {
&:not(.is-loading) {
background-color: rgba($color, 0.8);
&.is-plain {
.cl-button__text,
.cl-button__icon {
color: #fff;
}
}
}
}
}
}
// Styles
.cl-button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
white-space: nowrap;
margin: 0;
background-color: #fff;
overflow: visible;
vertical-align: middle;
font-size: $cl-font-size;
border-radius: $cl-button-radius;
height: $cl-height;
padding: $cl-button-padding;
&__text {
line-height: 1;
letter-spacing: 1rpx;
}
&__icon {
display: flex;
align-items: center;
height: 100%;
line-height: 1;
margin-right: 10rpx;
image {
height: 50rpx;
width: 50rpx;
}
}
&::after {
display: none;
border-width: 0;
}
&.button-hover {
background-color: #f6f7fa;
}
&--large {
height: 80rpx;
padding: 0rpx 38rpx;
font-size: 30rpx;
}
&--small {
font-size: 24rpx;
height: 48rpx;
padding: 0rpx 22rpx;
border-radius: 8rpx;
}
&.is-border {
border: $cl-border-width solid $cl-border-color;
}
&.is-round {
border-radius: $cl-height !important;
}
&.is-loading {
opacity: 0.5;
.cl-loading {
margin-right: 12rpx;
}
}
&.is-fill {
width: 100%;
}
&.is-disabled {
opacity: 0.5;
}
&.is-bold {
font-weight: bold;
}
// Colors
@include button-color(primary, $cl-color-primary);
@include button-color(success, $cl-color-success);
@include button-color(error, $cl-color-error);
@include button-color(warning, $cl-color-warning);
@include button-color(info, $cl-color-info);
}
// Adjacent selectors
.cl-button + .cl-button,
cl-button + cl-button {
margin-left: 20rpx;
}