!3626 feat(#I66EV5): use css variable on Switch component

* chore: Switch 组件样式变量化

src/BootstrapBlazor/Components/Switch/Switch.css

@@ -1,66 +1,81 @@
 .switch {
+    --bb-switch-padding: 7px 0;
+    --bb-switch-border-color: #dcdfe6;
+    --bb-switch-bg: #dcdfe6;
+    --bb-switch-border-radius: 10px;
+    --bb-switch-bar-width: 16px;
+    --bb-switch-bar-height: 16px;
+    --bb-switch-bar-bg-color: #fff;
+    --bb-switch-bar-radius: 50%;
+    --bb-switch-bar-top: 1px;
+    --bb-switch-bar-off: 1px;
+    --bb-switch-bar-on: 1px;
+    --bb-switch-inner-text-font-size: 80%;
+    --bb-switch-inner-on-text-left: 7px;
+    --bb-switch-inner-on-text-color: #fff;
+    --bb-switch-inner-off-text-left: 20px;
+    --bb-switch-inner-off-text-color: #606266;
+    --bb-switch-disabled-opacity: var(--bb-disabled-opactiy);
+    --bb-switch-label-margin-left: 10px;
     display: inline-flex;
     align-items: center;
     width: 100%;
-    --bb-switch-padding: 7px 0;
     padding: var(--bb-switch-padding);
 }
 
+    .switch.disabled {
+        opacity: var(--bb-switch-disabled-opacity);
+    }
+
     .switch .switch-core {
         margin: 0;
         display: inline-block;
         position: relative;
-        border: 1px solid #dcdfe6;
+        border: 1px solid var(--bb-switch-border-color);
         outline: none;
-        border-radius: 10px;
+        border-radius: var(--bb-switch-border-radius);
         box-sizing: border-box;
-        background: #dcdfe6;
+        background: var(--bb-switch-bg);
         cursor: pointer;
-        transition: border-color .3s,background-color .3s;
+        transition: border-color .3s, background-color .3s;
         vertical-align: middle;
     }
 
         .switch .switch-core:after {
             content: "";
             position: absolute;
-            top: 1px;
-            left: 1px;
-            border-radius: 50%;
+            top: var(--bb-switch-bar-top);
+            border-radius: var(--bb-switch-bar-radius);
             transition: all .3s;
-            width: 16px;
-            height: 16px;
-            background-color: #fff;
+            width: var(--bb-switch-bar-width);
+            height: var(--bb-switch-bar-height);
+            background-color: var(--bb-switch-bar-bg-color);
         }
 
         .switch .switch-core:before {
             content: attr(data-inner-text);
             position: absolute;
-            top: 1px;
-            left: calc(100% - 17px);
+            top: var(--bb-switch-bar-top);
+            left: var(--bb-switch-inner-off-text-left);
             transition: all .3s;
-            font-size: 80%;
-            color: #606266;
+            font-size: var(--bb-switch-inner-text-font-size);
+            color: var(--bb-switch-inner-off-text-color);
         }
 
-    .switch.is-checked .switch-core:after {
-        left: 100%;
-        margin-left: -17px;
+    .switch.is-checked .switch-core:before {
+        left: var(--bb-switch-inner-on-text-left);
+        color: var(--bb-switch-inner-on-text-color);
     }
 
-    .switch.is-checked .switch-core:before {
-        left: 5px;
-        color: #fff;
+    .switch:not(.is-checked) .switch-core:after {
+        left: var(--bb-switch-bar-off);
+    }
+
+    .switch.is-checked .switch-core:after {
+        right: var(--bb-switch-bar-on);
     }
 
     .switch .switch-label {
-        margin-left: 10px;
+        margin-left: var(--bb-switch-label-margin-left);
         cursor: pointer;
     }
-
-    .switch.disabled {
-        opacity: 0.6;
-    }
-
-    .switch .switch-inner-text {
-        font-size: 80%;
-    }