From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/assets/styles/btn.scss | 124 ++++++++++++++++++++--------------------
1 files changed, 62 insertions(+), 62 deletions(-)
diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss
index 3590d8d..a1d854a 100644
--- a/src/assets/styles/btn.scss
+++ b/src/assets/styles/btn.scss
@@ -1,99 +1,99 @@
@import './variables.module.scss';
@mixin colorBtn($color) {
- background: $color;
+ background: $color;
- &:hover {
- color: $color;
+ &:hover {
+ color: $color;
- &:before,
- &:after {
- background: $color;
- }
- }
+ &:before,
+ &:after {
+ background: $color;
+ }
+ }
}
.blue-btn {
- @include colorBtn($blue)
+ @include colorBtn($blue);
}
.light-blue-btn {
- @include colorBtn($light-blue)
+ @include colorBtn($light-blue);
}
.red-btn {
- @include colorBtn($red)
+ @include colorBtn($red);
}
.pink-btn {
- @include colorBtn($pink)
+ @include colorBtn($pink);
}
.green-btn {
- @include colorBtn($green)
+ @include colorBtn($green);
}
.tiffany-btn {
- @include colorBtn($tiffany)
+ @include colorBtn($tiffany);
}
.yellow-btn {
- @include colorBtn($yellow)
+ @include colorBtn($yellow);
}
.pan-btn {
- font-size: 14px;
- color: #fff;
- padding: 14px 36px;
- border-radius: 8px;
- border: none;
- outline: none;
- transition: 600ms ease all;
- position: relative;
- display: inline-block;
+ font-size: 14px;
+ color: #fff;
+ padding: 14px 36px;
+ border-radius: 8px;
+ border: none;
+ outline: none;
+ transition: 600ms ease all;
+ position: relative;
+ display: inline-block;
- &:hover {
- background: #fff;
+ &:hover {
+ background: #fff;
- &:before,
- &:after {
- width: 100%;
- transition: 600ms ease all;
- }
- }
+ &:before,
+ &:after {
+ width: 100%;
+ transition: 600ms ease all;
+ }
+ }
- &:before,
- &:after {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- height: 2px;
- width: 0;
- transition: 400ms ease all;
- }
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 2px;
+ width: 0;
+ transition: 400ms ease all;
+ }
- &::after {
- right: inherit;
- top: inherit;
- left: 0;
- bottom: 0;
- }
+ &::after {
+ right: inherit;
+ top: inherit;
+ left: 0;
+ bottom: 0;
+ }
}
.custom-button {
- display: inline-block;
- line-height: 1;
- white-space: nowrap;
- cursor: pointer;
- background: #fff;
- color: #fff;
- -webkit-appearance: none;
- text-align: center;
- box-sizing: border-box;
- outline: 0;
- margin: 0;
- padding: 10px 15px;
- font-size: 14px;
- border-radius: 4px;
+ display: inline-block;
+ line-height: 1;
+ white-space: nowrap;
+ cursor: pointer;
+ background: #fff;
+ color: #fff;
+ -webkit-appearance: none;
+ text-align: center;
+ box-sizing: border-box;
+ outline: 0;
+ margin: 0;
+ padding: 10px 15px;
+ font-size: 14px;
+ border-radius: 4px;
}
--
Gitblit v1.9.3