徐烜 / bsth-ebus-h5_editor · Commits

Commit 0de67dcaa389dab242984d3bf7b288f673bd3be2

Authored by ly525
1 parent d5366ff6

update lbp-radio style

Inline Side-by-side
Showing 3 changed files with 113 additions and 40 deletions
front-end/h5/src/components/core/styles/index.scss
  View file @0de67dc
... ... @@ -29,21 +29,37 @@
29 29 }
30 30  
31 31 .shortcut-button {
  32 + border: 1px dashed #fff;
  33 + height: 60px;
  34 + display: flex;
  35 + align-items: center;
  36 + justify-content: center;
  37 + cursor: pointer;
  38 + transition: all .25s;
  39 + background-color: #f5f8fb;
  40 + margin-bottom: 15px;
  41 + flex-direction: column;
  42 + color: #393e46;
32 43 width: 100%;
33   - height: 30px;
34   - font-size: 14px;
35   -
36 44 .shortcut-icon {
37   - padding-right: 4px;
  45 + padding: 4px;
38 46 // display: block;
39 47 // font-size: 16px;
40 48 // margin-bottom: 10px;
41 49 }
42 50 }
43 51  
  52 + .canvas-wrapper {
  53 + border: 1px dashed #e7e7e7;
  54 + // padding: '12px';
  55 + }
  56 +
44 57 .canvas-editor-wrapper {
  58 + // box-shadow: 0 0 0 1px #d9d9d9;
45 59 // inspired by https://github.com/Heboy/h5-maker/blob/38136192bab1427b9d5741a5dae0b5186d4b2ea0/src/scss/Page.scss#L8
46   - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
  60 + // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
  61 + // background-image: url(https://i.imgur.com/SuyR7Vq.png);
  62 + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg==');
47 63 .element--editing {
48 64 outline: 1px dashed #70c0ff !important;
49 65 }
... ...
front-end/h5/src/components/plugins/lbp-form-radio.js
  View file @0de67dc
... ... @@ -76,29 +76,35 @@ export default {
76 76 textDecoration: 'none',
77 77 display: vertical ? 'block' : 'inline-block'
78 78 }
  79 +
  80 + const checkedClass = checked && 'is-checked'
79 81 return (
80 82 <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
81   - <input
82   - name={aliasName}
83   - id={id}
84   - type={type}
85   - ref="input"
86   - value={value}
87   - disabled={disabled}
88   - checked={!!checked}
89   - onChange={this.handleChange}
90   - // readOnly={readOnly}
91   - // tabIndex={tabIndex}
92   - // className={`${prefixCls}-input`}
93   - // onClick={this.onClick}
94   - // onFocus={this.onFocus}
95   - // onBlur={this.onBlur}
96   - // onInput={this.onInput}
97   - // autoFocus={autoFocus}
98   - // data-type="lbp-form-input"
99   - // {...globalProps}
100   - />
101   - <span><slot>{value}</slot></span>
  83 + <span class={'lbp-radio__input' + checkedClass}>
  84 + <span class="lbp-radio__inner"></span>
  85 + <input
  86 + class="lbp-radio__original"
  87 + name={aliasName}
  88 + id={id}
  89 + type={type}
  90 + ref="input"
  91 + value={value}
  92 + disabled={disabled}
  93 + checked={!!checked}
  94 + onChange={this.handleChange}
  95 + // readOnly={readOnly}
  96 + // tabIndex={tabIndex}
  97 + // className={`${prefixCls}-input`}
  98 + // onClick={this.onClick}
  99 + // onFocus={this.onFocus}
  100 + // onBlur={this.onBlur}
  101 + // onInput={this.onInput}
  102 + // autoFocus={autoFocus}
  103 + // data-type="lbp-form-input"
  104 + // {...globalProps}
  105 + />
  106 + <span class="lbp-radio__label"><slot>{value}</slot></span>
  107 + </span>
102 108 </label>
103 109 )
104 110 }
... ...
front-end/h5/src/components/plugins/styles/radio.scss
  View file @0de67dc
  1 +// thanks for element-ui
1 2 .lbp-radio {
2   - input[type=checkbox],
3   - input[type=radio] {
  3 + color: #606266;
  4 + font-weight: 500;
  5 + line-height: 1;
  6 + position: relative;
  7 + cursor: pointer;
  8 + display: inline-block;
  9 + white-space: nowrap;
  10 + outline: none;
  11 + font-size: 14px;
  12 + margin-right: 30px;
4 13  
5   - width: 16px;
6   - height: 16px;
  14 + .lbp-radio__label {
  15 + padding-left: 10px;
  16 + }
7 17  
  18 + .lbp-radio__input {
  19 + white-space: nowrap;
  20 + cursor: pointer;
  21 + outline: none;
  22 + display: inline-block;
  23 + line-height: 1;
  24 + position: relative;
8 25 vertical-align: middle;
9   - margin: 5px;
10   - box-sizing: border-box;
11 26  
12   - resize: none;
13   - overflow: hidden;
14   - line-height: 120%;
15   - display: inline-block!important;
  27 + .lbp-radio__inner {
  28 + border: 1px solid #dcdfe6;
  29 + border-radius: 100%;
  30 + width: 14px;
  31 + height: 14px;
  32 + background-color: #fff;
  33 + position: relative;
  34 + cursor: pointer;
  35 + display: inline-block;
  36 + box-sizing: border-box;
  37 +
  38 + &:after {
  39 + width: 6px;
  40 + height: 6px;
  41 + border-radius: 100%;
  42 + background-color: #fff;
  43 + content: "";
  44 + position: absolute;
  45 + left: 50%;
  46 + top: 50%;
  47 + transform: translate(-50%,-50%) scale(0);
  48 + transition: transform .15s ease-in;
  49 + }
  50 + }
  51 +
  52 + &.is-checked .lbp-radio__inner {
  53 + border-color: #409eff;
  54 + background: #409eff;
  55 + }
  56 +
  57 + &.is-checked .lbp-radio__inner:after {
  58 + transform: translate(-50%,-50%) scale(1);
  59 + }
16 60  
17   - box-shadow: inherit;
18   - border: 1px solid #ccd5db;
19   - padding: 6px;
20   - outline: none!important;
  61 + .lbp-radio__original {
  62 + opacity: 0;
  63 + outline: none;
  64 + position: absolute;
  65 + z-index: -1;
  66 + top: 0;
  67 + left: 0;
  68 + right: 0;
  69 + bottom: 0;
  70 + margin: 0;
  71 + }
21 72 }
22 73 }
23 74 \ No newline at end of file
... ...