react_hsbc_teller 0.5.7 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/video/video.jsx

@@ -2828,7 +2828,11 @@ class Video extends Component {
         {
           this.state.cameraList.map((item, index) => {
             return <div>
-              <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="camere" value={item.actionid} style={{float: 'left'}} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }
@@ -2840,7 +2844,11 @@ class Video extends Component {
         {
           this.state.microphoneList.map((item, index) => {
             return <div class="cameraAnMicrophone">
-              <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br />
+              <label className="radio">
+              <input type="radio" name="microphone" value={item.actionid} style={{float: 'left'}} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)}  /><i></i>
+              {item.actionname}
+            </label>
+              {/* <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} /><label for={item.actionid}>{item.actionname}</label> <br /> */}
             </div>
           })
         }

package/packages/pages/video/video.less

@@ -363,27 +363,51 @@
 
 }
 
-input[type="radio"]+label::before {
-  content: " ";
+.radio {
+  position: relative;
   display: inline-block;
-  vertical-align: middle;
-  width: 13px;
-  height: 13px;
+  font-weight: 400;
+  padding-left: 25px;
+  text-align: left;
+  width: 100%;
+  display: flex;
+}
+
+.radio input {
+  position: absolute;
+  left: -9999px;
+}
+
+.radio i {
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  width: 15px;
+  height: 15px;
+  outline: 0;
+  border: 1px solid rgb(133, 133, 133);
+  background: transparent;
   border-radius: 50%;
-  border: 1px solid #999999;
-  margin-right: 0.2rem;
-  box-sizing: border-box;
-  margin-top: -0.1rem;
+  transition: border-color .3s;
+  -webkit-transition: border-color .3s;
 }
 
-input[type="radio"]:checked+label::before {
+.radio input+i:after {
+  position: absolute;
+  content: '';
+  top: 1.5px;
+  left: 1.5px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
   background-color: #269792;
-  background-clip: content-box;
   border: 1px solid #269792;
-  padding: 0.1rem;
-  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity .1s;
+  -webkit-transition: opacity .1s;
 }
-input[type="radio"] {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
+
+.radio input:checked+i:after {
+  opacity: 1;
 }

package/src/index.js

@@ -2,8 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.less";
 import '@babel/polyfill';
-// import { HSBC } from "../lib/hsbc";
-import {HSBC} from "../packages";
+import { HSBC } from "../lib/hsbc";
+// import {HSBC} from "../packages";
 
 ReactDOM.render(
   <div className="hsbc"><HSBC></HSBC></div>,