[component] changed stylesheet for radiobutton and checkbox

zekexy · Dec 3, 2019 · 980ab56 · 980ab56
1 parent 9e892a5
commit 980ab56
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 25 deletions.
diff --git a/apps/common/main/lib/component/CheckBox.js b/apps/common/main/lib/component/CheckBox.js
@@ -94,7 +94,7 @@ define([
         checked     : false,
         value       : 'unchecked',
 
-        template    : _.template('<label class="checkbox-indeterminate"><input type="button" class="img-commonctrl"><span><%= labelText %></span></label>'),
+        template    : _.template('<label class="checkbox-indeterminate"><input type="button" class="button__checkbox"><span><%= labelText %></span></label>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
@@ -71,7 +71,7 @@ define([
         disabled    : false,
         rendered    : false,
 
-        template    : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="img-commonctrl"><span><%= labelText %></span></label>'),
+        template    : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="button__radiobox"><span><%= labelText %></span></label>'),
 
         initialize : function(options) {
             Common.UI.BaseView.prototype.initialize.call(this, options);

diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
@@ -3,37 +3,58 @@
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
+    position: relative;
 
     input[type=button] {
-        background-color: transparent;
         background-position: @checkbox-offset-x @checkbox-offset-y;
-        border: none;
         margin-left: -22px;
         margin-right: 6px;
-        padding-bottom: 4px;
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
         cursor: default;
         vertical-align: top;
         margin-top: -1px;
+        background: #fff;
+        border: 1px solid @gray;
 
         &.checked {
-            background-position: @checkbox-offset-x @checkbox-offset-y - 16px;
+            + span {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    border: solid @gray-deep;
+                    border-width: 0 2px 2px 0;
+                    transform: rotate(45deg);
+                    width: 6px;
+                    height: 10px;
+                    left: 4px;
+                    top: -1px;
+                }
+            }
         }
 
         &.indeterminate {
-            background-position: @checkbox-offset-x @checkbox-offset-y - 48px;
+            + span {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    border: 1px solid @gray-deep;
+                    background: @gray-soft;
+                    width: 10px;
+                    height: 10px;
+                    left: 3px;
+                    top: 2px;
+                }
+            }
         }
 
         &.disabled {
-            background-position: @checkbox-offset-x - 48px @checkbox-offset-y;
-
-            &.checked {
-                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 16px;
-            }
+            opacity: .4;
 
-            &.indeterminate {
-                background-position: @checkbox-offset-x - 48px @checkbox-offset-y - 48px;
+            + span {
+                &::before {
+                    opacity: .4;
+                }
             }
         }
     }

diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
@@ -3,28 +3,43 @@
     margin-bottom: 0;
     .font-size-normal();
     font-weight: normal;
+    position: relative;
 
     input[type=button] {
-        background-position: @radio-offset-x @radio-offset-y;
-        background-color: transparent;
-        border: none;
         margin-left: -22px;
         margin-right: 6px;
         padding-bottom: 4px;
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
         cursor: default;
         vertical-align: top;
 
+        background: #fff;
+        border: 1px solid @gray;
+        border-radius: 50%;
+
         &.checked {
-            background-position: @radio-offset-x @radio-offset-y - 16px;
+            + span {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    background: @gray-deep;
+                    border-radius: 50%;
+                    width: 8px;
+                    height: 8px;
+                    left: 3px;
+                    top: 3px;
+                }
+            }
         }
 
         &.disabled {
-            background-position: @radio-offset-x - 48px @radio-offset-y;
+            opacity: .4;
 
-            &.checked {
-                background-position: @radio-offset-x - 48px @radio-offset-y - 16px;
+            + span {
+                &::before {
+                    opacity: .4;
+                }
             }
         }
     }