From 89bbca60df911d292da6294b5b90c0176fa6eb17 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Thu, 15 Mar 2018 09:40:42 +0800
Subject: [PATCH]  * add checkboxs advance style.

---
 docs/part/control-checkbox.md   |  46 ++++++++++++++
 src/less/controls/checkbox.less | 106 +++++++++++++++++++++++++++-----
 2 files changed, 138 insertions(+), 14 deletions(-)

diff --git a/docs/part/control-checkbox.md b/docs/part/control-checkbox.md
index 22119583..dade4a5a 100644
--- a/docs/part/control-checkbox.md
+++ b/docs/part/control-checkbox.md
@@ -207,3 +207,49 @@ filter: duoxuanhedanxuankuang dxhdx radio
   <input disabled type="radio" name="radioOptionsExample"> 被禁用的单选框
 </label>
 ```
+
+## 高级外观
+
+高级外观的多选和单选框使用自定义的外观代替原生外观，在所有浏览器都具有一致的体验。
+
+<example>
+<div class="checkbox-primary"><input type="checkbox" id="primaryCheckbox1"><label for="primaryCheckbox1">未选中</label></div>
+<div class="checkbox-primary"><input type="checkbox" checked="checked" id="primaryCheckbox2"><label for="primaryCheckbox2">选中</label></div>
+<div class="checkbox-primary"><input type="checkbox" checked="checked" disabled="disabled" id="primaryCheckbox3"><label for="primaryCheckbox3">禁用</label></div>
+</example>
+
+```html
+<div class="checkbox-primary"><input type="checkbox" id="primaryCheckbox1"><label for="primaryCheckbox1">未选中</label></div>
+<div class="checkbox-primary"><input type="checkbox" checked="checked" id="primaryCheckbox2"><label for="primaryCheckbox2">选中</label></div>
+<div class="checkbox-primary"><input type="checkbox" checked="checked" disabled="disabled" id="primaryCheckbox3"><label for="primaryCheckbox3">禁用</label></div>
+```
+
+<example>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" id="primaryradio1"><label for="primaryradio1">选项一</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio2"><label for="primaryradio2">选项二</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio3"><label for="primaryradio3">选项三</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" disabled="disabled" id="primaryradio4"><label for="primaryradio4">禁用</label></div>
+</example>
+
+```html
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" id="primaryradio1"><label for="primaryradio1">选项一</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio2"><label for="primaryradio2">选项二</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio3"><label for="primaryradio3">选项三</label></div>
+<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" disabled="disabled" id="primaryradio4"><label for="primaryradio4">禁用</label></div>
+```
+
+高级外观还可以不使用 `<input>` 元素，在此种情况下，为 `.checkbox-primary` 或 `.radio-primary` 添加 `.checked` 类标记为选中状态，用户无法通过点击来切换选中状态，但可以通过程序手动添加或移除 `.checked` 来更改选中状态。
+
+<example>
+<div class="checkbox-primary"><label>未选中</label></div>
+<div class="checkbox-primary checked"><label>选中</label></div>
+<div class="radio-primary"><label>未选中</label></div>
+<div class="radio-primary checked"><label>选中</label></div>
+</example>
+
+```html
+<div class="checkbox-primary"><label>未选中</label></div>
+<div class="checkbox-primary checked"><label>选中</label></div>
+<div class="radio-primary"><label>未选中</label></div>
+<div class="radio-primary checked"><label>选中</label></div>
+```
diff --git a/src/less/controls/checkbox.less b/src/less/controls/checkbox.less
index 8f8c45c8..e7b32e46 100644
--- a/src/less/controls/checkbox.less
+++ b/src/less/controls/checkbox.less
@@ -1,10 +1,24 @@
-.checkbox-primary {
-  display: inline-block;
+.checkbox-primary,
+.radio-primary {
+  display: block;
   position: relative;
 
+  > input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    margin: 0;
+    z-index: 3;
+    width: 20px;
+  }
+
   > label {
     padding-left: 25px;
     cursor: pointer;
+    font-weight: normal;
 
     &:before,
     &:after {
@@ -40,19 +54,83 @@
     }
   }
 
-  &.checked {
-    > label {
-      &:after {
-        border-color: @color-primary;
-        border-width: 4px;
-        background-color: @color-primary;
-      }
+  > input:checked + label,
+  &.checked > label {
+    &:after {
+      border-color: @color-primary;
+      border-width: 4px;
+      background-color: @color-primary;
+    }
+
+    &:before {
+      color: white;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  > input:focus + label {
+    &:after {
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-primary;
+      border-color: @color-primary;
+    }
+  }
+
+  &.disabled > label,
+  input:disabled + label {
+    &:after {
+      background-color: #e5e5e5;
+      border-color: #bbb;
+    }
+  }
+
+  &.checked.disabled > label,
+  input:disabled:checked + label {
+    &:after {
+      background-color: #bbb;
+    }
+  }
+}
 
-      &:before {
-        color: white;
-        opacity: 1;
-        transform: scale(1);
-      }
+.radio-primary {
+  > label {
+    &:after {
+      border-radius: 50%;
+    }
+
+    &:before {
+      content: ' ';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      border: none;
+      top: 7px;
+      left: 5px;
+    }
+  }
+
+  > input:checked + label,
+  &.checked > label {
+    &:after {
+      border-color: @color-primary;
+      border-width: 2px;
+      background-color: transparent;
+    }
+
+    &:before {
+      background-color: @color-primary;
+    }
+  }
+
+  &.checked.disabled > label,
+  input:disabled:checked + label {
+    &:after {
+      background-color: transparent;
+      border-color: #bbb;
+    }
+
+    &:before {
+      background-color: #bbb;
     }
   }
 }
-- 
GitLab