feat(Button): add active style (#7415)

* style: 增加按钮按下样式

* style: 更新 active 样式

Author: ArgoZhang

src/BootstrapBlazor/wwwroot/css/motronic.min.css

@@ -1,4 +1,4 @@
-:root, [data-bs-theme='light'] {
+:root, [data-bs-theme='light'] {
     --bs-gray: #7E8299;
     --bs-gray-dark: #3F4254;
     --bs-gray-100: #F5F8FA;
@@ -128,7 +128,7 @@
     --bs-btn-disabled-bg: var(--bs-primary);
     --bs-btn-disabled-border-color: var(--bs-primary);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #0589d3;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -143,7 +143,7 @@
     --bs-btn-disabled-bg: var(--bs-secondary);
     --bs-btn-disabled-border-color: var(--bs-secondary);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #aeaebc;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -154,7 +154,7 @@
     --bs-btn-disabled-bg: var(--bs-success);
     --bs-btn-disabled-border-color: var(--bs-success);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #3aab6d;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -169,7 +169,7 @@
     --bs-btn-disabled-bg: var(--bs-info);
     --bs-btn-disabled-border-color: var(--bs-info);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #612ad6;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -184,7 +184,7 @@
     --bs-btn-disabled-bg: var(--bs-warning);
     --bs-btn-disabled-border-color: var(--bs-warning);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #ddae08;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -195,7 +195,7 @@
     --bs-btn-disabled-bg: var(--bs-danger);
     --bs-btn-disabled-border-color: var(--bs-danger);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #c41540;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -206,7 +206,7 @@
     --bs-btn-disabled-bg: var(--bs-dark);
     --bs-btn-disabled-border-color: var(--bs-dark);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #212641;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -218,7 +218,7 @@
     --bs-btn-bg: var(--bs-light);
     --bs-btn-border-color: var(--bs-light);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #b6babf;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -235,7 +235,7 @@
     --bs-btn-disabled-color: var(--bs-btn-color);
     --bs-btn-disabled-border-color: var(--bs-btn-color);
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #0589d3;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -246,7 +246,7 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #aeaebc;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -257,7 +257,7 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #3aab6d;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -269,7 +269,8 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #612ad6;
+    --bs-btn-active-color: var(--bs-btn-hover-color);
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -280,7 +281,7 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #ddae08;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -291,7 +292,7 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #c41540;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -302,7 +303,7 @@
     --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
+    --bs-btn-active-bg: #212641;
     --bs-btn-active-border-color: var(--bs-btn-hover-bg);
 }
 
@@ -314,7 +315,8 @@
     --bs-btn-disabled-color: var(--bs-btn-border-color);
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
     --bs-btn-active-bg: var(--bs-btn-hover-bg);
-    --bs-btn-active-border-color: var(--bs-btn-hover-bg);
+    --bs-btn-active-border-color: var(--bs-btn-border-color);
+    --bs-btn-hover-border-color: var(--bs-btn-border-color);
 }
 
 .btn-outline-light {
@@ -325,6 +327,7 @@
     --bs-btn-disabled-border-color: var(--bs-btn-border-color);
     --bs-btn-hover-border-color: #B5B5C3;
     --bs-btn-active-border-color: #B5B5C3;
+    --bs-btn-active-color: #564e4e;
 }
 
 .modal-backdrop {