[PoC] CSS logging with React, ジャバボタン.css

index.html

<h1>[PoC] CSS logging in <code>`input type=password`</code> with React, ジャバボタン.CSS</h1>
<p><strong>Input "java"</strong> in the following password field like JavaButton.</p>

<div id="input-button" class="redjavabo"></div>

<p><a href="https://github.com/facebook/react/issues/11896">Original issue is here.</a></p>

poc-css-logging-with-react-css.markdown

[PoC] CSS logging with React, ジャバボタン.css

A Pen by TOBY on CodePen.

License.

script.babel

// ref. https://reactjs.org/docs/forms.html
class InputButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      value: "",
    };
  }
  render() {
    return (
      <input
        type="password"
        value={this.state.value}
        onChange={e => { this.setState({value: e.target.value }); }}
        placeholder="無料ジャバのダウンロード"
        />
    );
  }
}

ReactDOM.render(<InputButton/>, document.getElementById('input-button'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

style.css

input[type="password"][value$="j"] {
  background-size: cover;
  background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/dl_button.png")  !important;
}

input[type="password"][value$="a"] {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/happy_java.png")  !important;
}

input[type="password"][value$="v"] {
  background-size: cover;
  background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/aoi-xhdpi.png")  !important;
}

input[type="password"][value="java"] {
  background-repeat: repeat;
  background-size: contain;
  background-image: url("https://raw.githubusercontent.com/arigato-java/java_images/master/src/com/java/images/original/happy_java.png");
}

input[type="password"] {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  outline: none;
  
 	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 2em;
	padding-right: 2em;
  
  font-size: 2em;
}

input[type="password"]::placeholder {
  color: #f88;
}




/* JavaButton.css -*- coding: utf-8 -*- */

/* ここからカット */
/* Crimson Javabo */
.redjavabo {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	font-weight: bold;
	background-color: #f00;
	border-radius: .5em;

	min-width: 11em;
	background-image:
    linear-gradient(
      to bottom, 
      rgba(255,255,255,.17), 
      rgba(255,255,255,.23) 40%, 
      transparent 40%),
		linear-gradient(to bottom, #ff8791, #b50010);
	background-size: auto, auto;
	background-position: 0px 0px, 0px 0px;
	text-align: center;
	margin: .5em;
}

.redjavabo:active {
	box-shadow: none;
	background-image: linear-gradient(to top, #aa3030, #b50010);
}

/* Royal Blue Javabo */
.bluejavabo {
	display: inline-block;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 2em;
	padding-right: 2em;
	min-width: 11em;
	text-decoration: none;
	color: #fff;
	font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	font-weight: normal;
	background-color: #007;
	border-radius: .8em;
	border: 2px solid #333;
	background-color: #007;
	background-image:
    linear-gradient(to bottom,
      rgb(125,227,255) 2px,
      rgb(39,181,247) 2px, 
      rgb(7,123,242) 33%, 
      rgb(0,32,115) 50%,
      rgb(0,34,70));
	text-align: center;
	margin: .5em;
}
/* ここまでカット */


/* pervasive */
body {
	font-family: sans-serif;
}