common css

@@ -39,9 +39,55 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 <button class="button button-large button-round button-solid">大，圆角，实心</button>
 <button class="button button-large button-round button-solid">大，圆角，实心</button>
 
 
 <h2>badge</h2>
 <h2>badge</h2>
+<a style="position:relative"><i class="icon icon-bag"></i><span class="badge badge-tr">1</span></a>
+<a style="position:relative"><i class="icon icon-bag"></i><span class="badge">99</span></a>
+<br>
 一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道
 一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道
 
 
 <h2>checkbox</h2>
 <h2>checkbox</h2>
+
+<div class="checkbox">
+    <input type="checkbox" id="check1">
+    <label class="checkbox" for="check1">初始状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check2" checked>
+    <label class="checkbox" for="check2">选中状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check3" disabled>
+    <label class="checkbox" for="check3">disabled状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check4" disabled checked>
+    <label class="checkbox" for="check4">disabled选中状态</label>
+</div>
+<br>
+<div class="radio">
+    <input type="radio" id="radio1">
+    <label for="radio1">初始状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio2" checked>
+    <label for="radio2" >选中状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio3" disabled>
+    <label for="radio3">disabled状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio4" disabled checked>
+    <label for="radio4">disabled选中状态</label>
+</div>
+<br>
+<div class="switch">
+    <input type="checkbox" id="switch1">
+    <label for="switch1"></label>
+</div>
+
+
+
+
 单选，多选，开关，选中不选中。
 单选，多选，开关，选中不选中。
 纯 CSS 实现，不能依赖 JS，原理参考 http://forsigner.com/magic-check/
 纯 CSS 实现，不能依赖 JS，原理参考 http://forsigner.com/magic-check/
 
 

@@ -54,6 +54,7 @@
     "gulp-postcss": "^6.1.0",
     "gulp-postcss": "^6.1.0",
     "gulp-sourcemaps": "^2.0.0-alpha",
     "gulp-sourcemaps": "^2.0.0-alpha",
     "gulp-util": "^3.0.7",
     "gulp-util": "^3.0.7",
+    "handlebars": "^4.0.5",
     "handlebars-loader": "^1.3.0",
     "handlebars-loader": "^1.3.0",
     "husky": "^0.11.4",
     "husky": "^0.11.4",
     "nodemon": "1.9.2",
     "nodemon": "1.9.2",

+.badge {
+    min-width: 16px;
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-size: 14px;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+
+    background-color: $blue;
+    color: $white;
+}
+
+/* position */
+.badge-tr {
+    position: absolute;
+    top: -5px;
+    right: -11px;
+}

+.checkbox,
+.radio {
+    position: relative;
+    display: inline-block;
+
+    label {
+        padding-left: 33px;
+        &:before {
+            z-index: 8;
+            border: 2px solid $black;
+            content: "";
+        }
+        &:after {
+            position: absolute;
+            top: 6px;
+            left: 12px;
+            z-index: 9;
+            display: none;
+            content: "";
+            width: 8px;
+            height: 16px;
+            transform: rotate(45deg);
+            border: 2px solid $white;
+            border-top: 0;
+            border-left: 0;
+        }
+    }
+
+    label:before,
+    input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+    }
+    input {
+        z-index: 10;
+        opacity: 0;
+    }
+
+    /* when checked */
+    input:checked {
+        ~ label:before {
+            background: $black;
+        }
+        ~ label:after {
+            display: block;
+        }
+    }
+
+    /* when disabled */
+    input:disabled {
+        ~ label {
+            color: #ccc;
+        }
+        ~ label:before {
+            border-color: #e4e4e4;
+        }
+        &:checked {
+            ~ label:before {
+                background-color: #e4e4e4;
+            }
+        }
+    }
+}
+
+.radio {
+    label:before {
+        border-radius: 50%;
+    }
+
+}
+
+.switch {
+    display: inline-block;
+    input {
+        display: none;
+    }
+    label {
+        position: relative;
+        display: block;
+        width: 54px;
+        height: 34px;
+        background-color: $white;
+        border: 1px solid #ddd;
+        border-radius: 99999px;
+        transition: 0.3s;
+
+        &:after {
+            content: "";
+        }
+    }
+}

@@ -6,3 +6,5 @@
 @import "modal";
 @import "modal";
 @import "button";
 @import "button";
 @import "swiper";
 @import "swiper";
+@import "badge";
+@import "form";