/* ==================
|
按钮
|
==================== */
|
@import './var.scss';
|
|
|
.gungho-btn {
|
position: relative;
|
border: 0px;
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
line-height: 1;
|
text-align: center;
|
text-decoration: none;
|
overflow: visible;
|
border-radius: 0;
|
transform: translate(0px, 0px);
|
}
|
|
.gungho-btn::after {
|
display: none;
|
}
|
|
.gungho-btn:not([class*="bg-"]) {
|
background-color: transparent;
|
}
|
|
.gungho-btn[class*="line"] {
|
background-color: transparent;
|
}
|
|
.gungho-btn[class*="line"]::after {
|
content: " ";
|
display: block;
|
width: 200%;
|
height: 200%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
border: 1rpx solid currentColor;
|
transform: scale(0.5);
|
transform-origin: 0 0;
|
box-sizing: border-box;
|
border-radius: $gungho-radius;
|
z-index: 1;
|
pointer-events: none;
|
}
|
|
.gungho-btn[class*="lines"]::after {
|
border: 6rpx solid currentColor;
|
}
|
|
.gungho-btn[class*="bg-"]::after {
|
display: none;
|
}
|
|
.gungho-btn .gungho-btn-icon {
|
border-radius: 500px;
|
padding: 0;
|
margin-right:6rpx;
|
font-size: inherit;
|
}
|
|
|
.gungho-btn.button-hover {
|
transform: translate(1rpx, 1rpx);
|
}
|
|
.block {
|
display: block;
|
}
|
|
.gungho-btn.block {
|
display: flex;
|
width: 100%;
|
}
|
|
.gungho-btn[disabled] {
|
opacity: 0.6;
|
}
|
|
@mixin set-button($type) {
|
@if $type == none {
|
.gungho-btn {
|
padding: 0 map-get($gungho-padding, $type);
|
font-size: map-get($gungho-font-sizes, $type);
|
height: map-get($gungho-height, $type);
|
}
|
.gungho-btn.gungho-icon {
|
width: map-get($gungho-height, $type);
|
height: map-get($gungho-height, $type);
|
}
|
} @else {
|
.gungho-btn.#{$type} {
|
padding: 0 map-get($gungho-padding, $type);
|
font-size: map-get($gungho-font-sizes, $type);
|
height: map-get($gungho-height, $type);
|
}
|
.gungho-btn.gungho-icon.#{$type} {
|
width: map-get($gungho-font-sizes, $type);
|
height: map-get($gungho-font-sizes, $type);
|
}
|
}
|
}
|
|
@each $type in $gungho-sizes {
|
@include set-button($type);
|
}
|
