update lbp-radio style

ly525
1 parent d5366ff6
Showing 3 changed files with 113 additions and 40 deletions
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/plugins/lbp-form-radio.js
front-end/h5/src/components/plugins/styles/radio.scss
@@ -29,21 +29,37 @@
   }
   .shortcut-button {
+    border: 1px dashed #fff;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all .25s;
+    background-color: #f5f8fb;
+    margin-bottom: 15px;
+    flex-direction: column;
+    color: #393e46;
     width: 100%;
-    height: 30px;
-    font-size: 14px;
-
     .shortcut-icon {
-      padding-right: 4px;
+      padding: 4px;
       // display: block;
       // font-size: 16px;
       // margin-bottom: 10px;
     }
   }
+  .canvas-wrapper {
+    border: 1px dashed #e7e7e7;
+    // padding: '12px';
+  }
+
   .canvas-editor-wrapper {
+    // box-shadow: 0 0 0 1px #d9d9d9;
     // inspired by https://github.com/Heboy/h5-maker/blob/38136192bab1427b9d5741a5dae0b5186d4b2ea0/src/scss/Page.scss#L8
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
+    // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
+    // background-image: url(https://i.imgur.com/SuyR7Vq.png);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg==');
     .element--editing {
       outline: 1px dashed #70c0ff !important;
     }
@@ -76,29 +76,35 @@ export default {
       textDecoration: 'none',
       display: vertical ? 'block' : 'inline-block'
     }
+
+    const checkedClass = checked && 'is-checked'
     return (
       <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
-        <input
-          name={aliasName}
-          id={id}
-          type={type}
-          ref="input"
-          value={value}
-          disabled={disabled}
-          checked={!!checked}
-          onChange={this.handleChange}
-        // readOnly={readOnly}
-        // tabIndex={tabIndex}
-        // className={`${prefixCls}-input`}
-        // onClick={this.onClick}
-        // onFocus={this.onFocus}
-        // onBlur={this.onBlur}
-        // onInput={this.onInput}
-        // autoFocus={autoFocus}
-        // data-type="lbp-form-input"
-        // {...globalProps}
-        />
-        <span><slot>{value}</slot></span>
+        <span class={'lbp-radio__input' + checkedClass}>
+          <span class="lbp-radio__inner"></span>
+          <input
+            class="lbp-radio__original"
+            name={aliasName}
+            id={id}
+            type={type}
+            ref="input"
+            value={value}
+            disabled={disabled}
+            checked={!!checked}
+            onChange={this.handleChange}
+          // readOnly={readOnly}
+          // tabIndex={tabIndex}
+          // className={`${prefixCls}-input`}
+          // onClick={this.onClick}
+          // onFocus={this.onFocus}
+          // onBlur={this.onBlur}
+          // onInput={this.onInput}
+          // autoFocus={autoFocus}
+          // data-type="lbp-form-input"
+          // {...globalProps}
+          />
+          <span class="lbp-radio__label"><slot>{value}</slot></span>
+        </span>
       </label>
     )
   }
+// thanks for element-ui
 .lbp-radio {
-  input[type=checkbox],
-  input[type=radio] {
+  color: #606266;
+  font-weight: 500;
+  line-height: 1;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  outline: none;
+  font-size: 14px;
+  margin-right: 30px;
-    width: 16px;
-    height: 16px;
+  .lbp-radio__label {
+    padding-left: 10px;
+  }
+  .lbp-radio__input {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
     vertical-align: middle;
-    margin: 5px;
-    box-sizing: border-box;
-    resize: none;
-    overflow: hidden;
-    line-height: 120%;
-    display: inline-block!important;
+    .lbp-radio__inner {
+      border: 1px solid #dcdfe6;
+      border-radius: 100%;
+      width: 14px;
+      height: 14px;
+      background-color: #fff;
+      position: relative;
+      cursor: pointer;
+      display: inline-block;
+      box-sizing: border-box;
+
+      &:after {
+        width: 6px;
+        height: 6px;
+        border-radius: 100%;
+        background-color: #fff;
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%) scale(0);
+        transition: transform .15s ease-in;
+      }
+    }
+
+    &.is-checked .lbp-radio__inner {
+      border-color: #409eff;
+      background: #409eff;
+    }
+
+    &.is-checked .lbp-radio__inner:after {
+      transform: translate(-50%,-50%) scale(1);
+    }
-    box-shadow: inherit;
-    border: 1px solid #ccd5db;
-    padding: 6px;
-    outline: none!important;
+    .lbp-radio__original {
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: 0;
+    }
   }
 }
 \ No newline at end of file