Created
June 9, 2018 14:33
-
-
Save romchambe/933cc4e4d874155e0cd7c8b6503dc37e to your computer and use it in GitHub Desktop.
Commodity styles and components to be reused in projects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* So that a 'component style file' is not compiled to css in a separate file by npm watch, it needs to start with an underscore */ | |
$hover: #eee; | |
$checked: #20c997; | |
$unchecked: white; | |
/* Customize the label (the checkbox-area) */ | |
.checkbox-area { | |
position: relative; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
padding-left:2rem; | |
} | |
/* Hide the browser's default checkbox */ | |
.checkbox-area input { | |
position: absolute; | |
opacity: 0; | |
cursor: pointer; | |
} | |
/* Create a custom checkbox */ | |
.checkmark { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 25px; | |
width: 25px; | |
background-color: $unchecked; | |
} | |
/* On mouse-over, add a grey background color */ | |
.checkbox-area:hover input ~ .checkmark { | |
background-color: $hover; | |
} | |
/* When the checkbox is checked, add a blue background */ | |
.checkbox-area input:checked ~ .checkmark { | |
background-color: $checked; | |
} | |
/* Create the checkmark/indicator (hidden when not checked) */ | |
.checkmark:after { | |
content: ""; | |
position: absolute; | |
display: none; | |
} | |
/* Show the checkmark when checked */ | |
.checkbox-area input:checked ~ .checkmark:after { | |
display: block; | |
} | |
/* Style the checkmark/indicator */ | |
.checkbox-area .checkmark:after { | |
left: 9px; | |
top: 5px; | |
width: 7px; | |
height: 12px; | |
border: solid white; | |
border-width: 0 3px 3px 0; | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
class Checkbox extends Component { | |
render () { | |
return ( | |
<label className="checkbox-area"> | |
<input | |
type="checkbox" | |
value={this.props.remember_me} | |
onChange={this.props.handleRememberMe} | |
/> | |
<span className="checkmark"></span> | |
Remember me on this device | |
</label> | |
) | |
} | |
} | |
export default Checkbox |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment