Skip to content

Instantly share code, notes, and snippets.

@elisherer

elisherer/SassMeister-input-HTML.html

Created January 20, 2016 20:44
Show Gist options
  • Save elisherer/ba4f9f127815ca2f4e58 to your computer and use it in GitHub Desktop.
Save elisherer/ba4f9f127815ca2f4e58 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<nav>
<div class="menu"></div>
<span class="title">Pure CSS Material Design</span>
</nav>
<table>
<tr>
<td style="width:200px">
<input type="text" placeholder="Hint text" /><br/>
<input type="text" class="error" placeholder="Error" /><br/>
<input type="text" disabled value="Input text" />
<br />
<br/>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td style="width:200px">
<label><input type="checkbox" />Checkbox</label><br/>
<label><input type="checkbox" checked />Checkbox</label><br/>
<label><input type="checkbox" disabled />Checkbox</label><br/>
<label><input type="checkbox" disabled checked />Checkbox</label>
<br/>
<br/>
<label><input type="radio" name="r"/>Radio 1</label><br/>
<label><input type="radio" name="r" checked />Radio 2</label><br/>
<label><input type="radio" disabled />Radio 3</label><br/>
<label><input type="radio" disabled checked />Radio 4</label>
</td>
<td style="width:200px">
<input type="range" />
<br/>
<br/>
<div class="button-wrapper">
<button>Submit</button>
<div class="circle"></div>
</div>
</td>
</tr>
</table>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Light Theme */
$text-color: black;
$background-color: white;
$primary-color: #2196F3;
$error-color: red;
$disabled-color: #bdbdbd;
$inverse-color: white;
/* Dark Theme */
/*$text-color: #eeeeee;
$background-color: #303030;
$primary-color: #1e90ff;
$error-color: red;
$disabled-color: #616161;
$inverse-color: white;
*/
html, body {
/*background-color: $background-color;*/
color: $text-color;
}
html, body, input, textarea, keygen, select, button {
font-family: 'Roboto', sans-serif;
}
nav {
background-color: $primary-color;
box-shadow:1px 1px 5px rgba(0,0,0,0.5);
height: 48px;
line-height: 48px;
z-index: 1;
text-align: left;
top: 0px;
width: 100%;
color: $inverse-color;
font-size: 1.2em;
font-weight: 400;
padding-bottom: 5px;
}
nav .menu {
position: absolute;
cursor: pointer;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn2.png) no-repeat;
top: 14px;
left: 16px;
width: 32px; height:32px;
}
nav .title {
margin-left: 48px;
}
::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; }
::-moz-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; } /* firefox 19+ */
:-ms-input-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; } /* ie */
input:-moz-placeholder { font-family: 'Roboto', sans-serif; color: $disabled-color; }
/* Textbox */
input[type=text], select { /* + Dropdown */
border: 0;
margin: 0.5em 0;
padding-bottom: 0.5em;
border-bottom: 2px solid $disabled-color;
font-size: 1em;
color: $text-color;
background-color: transparent;
outline: none;
}
select { color: $disabled-color; }
select:focus { color: $text-color; }
input[type=text].error{
border-bottom: 2px solid $error-color;
}
input[type=text]:active, input[type=text]:focus{
border-bottom: 2px solid $primary-color;
}
input[type=text]:disabled{
background-color: transparent;
border-bottom: 1px dotted $disabled-color;
color: $disabled-color;
}
/* Checkbox */
input[type=checkbox] {
margin-right: 10px;
}
input[type=checkbox]::before {
width: 1em;
height: 1em; display: inline-block;
line-height: 1em;
text-align: center;
border: 2px solid $text-color;
border-radius: 4px;
color: $inverse-color;
content:'';
background-color: $background-color;
}
input[type=checkbox]:checked::before {
content:'\2713';
border: 2px solid $primary-color;
background-color: $primary-color;
}
input[type=checkbox]:disabled::before {
border-color: $disabled-color;
}
input[type=checkbox]:checked:disabled::before {
background-color: $disabled-color;
}
/* Radio */
input[type=radio] {
margin-right: 10px;
}
input[type=radio]::before {
width: 1em;
height: 1em; display: inline-block;
line-height: 1em;
text-align: center;
border: 2px solid $text-color;
border-radius: 1em;
content:'';
background-color: $background-color;
-webkit-text-stroke-width: 0.3em;
-webkit-text-stroke-color: $primary-color;
}
input[type=radio]:checked::before {
content:'\2022';
border: 2px solid $primary-color;
color: $primary-color;
}
input[type=radio]:disabled::before {
border-color: $disabled-color;
color: $disabled-color;
-webkit-text-stroke-color: $disabled-color;
}
/* Range */
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -0.4em;
height: 1em;
width: 1em;
border-radius: 1em;
background: $primary-color;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
height: 1em;
width: 1em;
border-radius: 1em;
background: $primary-color;
cursor: pointer;
}
input[type=range]::-ms-thumb {
height: 1em;
width: 1em;
border-radius: 1em;
background: $primary-color;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
background-color: $disabled-color;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background-color: $primary-color;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
background-color: $disabled-color;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
height: 3px;
background-color: $disabled-color;
}
input[type=range]::-ms-fill-lower {
background-color: $disabled-color;
}
input[type=range]::-ms-fill-upper {
background-color: $disabled-color;
}
input[type=range]:focus::-ms-fill-lower {
background-color: $primary-color;
}
input[type=range]:focus::-ms-fill-upper {
background-color: $primary-color;
}
/* Button - credits to Wifeo (http://codepen.io/wifeo/pen/gsDJx)*/
button
{
border: none;
position: absolute;
font-weight: 300;
font-size: 1em;
text-transform: uppercase;
background-color: $primary-color;
color: $inverse-color;
cursor: pointer;
height: 100%;
width: 100%;
}
.button-wrapper
{
width: 100px;
height: 40px;
background-color: #00bcd4;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);
}
.button-wrapper:active .circle
{
cursor: pointer;
-webkit-animation:oblik 0.2s ease-in;
-webkit-transform-origin: 50% 50%;
-moz-animation:oblik 0.2s ease-in;
-moz-transform-origin: 50% 50%;
-ms-animation:oblik 0.2s ease-in;
-ms-transform-origin: 50% 50%;
animation:oblik 0.2s ease-in;
transform-origin: 50% 50%;
width: 100%;
height: 100%;
border-radius: 50%;
}
@-webkit-keyframes oblik {
0% {opacity:1;-webkit-transform:scale(0);}
100% {opacity:0;-webkit-transform:scale(5);background-color: black;}
}
@-moz-keyframes oblik {
0% {opacity:1;-moz-transform:scale(0);}
100% {opacity:0;-moz-transform:scale(5);background-color: black;}
}
@-ms-keyframes oblik {
0% {opacity:1;-ms-transform:scale(0);}
100% {opacity:0;-ms-transform:scale(5);background-color: black;}
}
@keyframes oblik {
0% {opacity:1;transform:scale(0);}
100% {opacity:0;transform:scale(5);background-color: black;}
}
Raw
SassMeister-output.css
@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Light Theme */
/* Dark Theme */
/*$text-color: #eeeeee;
$background-color: #303030;
$primary-color: #1e90ff;
$error-color: red;
$disabled-color: #616161;
$inverse-color: white;
*/
html, body {
/*background-color: $background-color;*/
color: black;
}
html, body, input, textarea, keygen, select, button {
font-family: 'Roboto', sans-serif;
}
nav {
background-color: #2196F3;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
height: 48px;
line-height: 48px;
z-index: 1;
text-align: left;
top: 0px;
width: 100%;
color: white;
font-size: 1.2em;
font-weight: 400;
padding-bottom: 5px;
}
nav .menu {
position: absolute;
cursor: pointer;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn2.png) no-repeat;
top: 14px;
left: 16px;
width: 32px;
height: 32px;
}
nav .title {
margin-left: 48px;
}
::-webkit-input-placeholder {
font-family: 'Roboto', sans-serif;
color: #bdbdbd;
}
::-moz-placeholder {
font-family: 'Roboto', sans-serif;
color: #bdbdbd;
}
/* firefox 19+ */
:-ms-input-placeholder {
font-family: 'Roboto', sans-serif;
color: #bdbdbd;
}
/* ie */
input:-moz-placeholder {
font-family: 'Roboto', sans-serif;
color: #bdbdbd;
}
/* Textbox */
input[type=text], select {
/* + Dropdown */
border: 0;
margin: 0.5em 0;
padding-bottom: 0.5em;
border-bottom: 2px solid #bdbdbd;
font-size: 1em;
color: black;
background-color: transparent;
outline: none;
}
select {
color: #bdbdbd;
}
select:focus {
color: black;
}
input[type=text].error {
border-bottom: 2px solid red;
}
input[type=text]:active, input[type=text]:focus {
border-bottom: 2px solid #2196F3;
}
input[type=text]:disabled {
background-color: transparent;
border-bottom: 1px dotted #bdbdbd;
color: #bdbdbd;
}
/* Checkbox */
input[type=checkbox] {
margin-right: 10px;
}
input[type=checkbox]::before {
width: 1em;
height: 1em;
display: inline-block;
line-height: 1em;
text-align: center;
border: 2px solid black;
border-radius: 4px;
color: white;
content: '';
background-color: white;
}
input[type=checkbox]:checked::before {
content: '\2713';
border: 2px solid #2196F3;
background-color: #2196F3;
}
input[type=checkbox]:disabled::before {
border-color: #bdbdbd;
}
input[type=checkbox]:checked:disabled::before {
background-color: #bdbdbd;
}
/* Radio */
input[type=radio] {
margin-right: 10px;
}
input[type=radio]::before {
width: 1em;
height: 1em;
display: inline-block;
line-height: 1em;
text-align: center;
border: 2px solid black;
border-radius: 1em;
content: '';
background-color: white;
-webkit-text-stroke-width: 0.3em;
-webkit-text-stroke-color: #2196F3;
}
input[type=radio]:checked::before {
content: '\2022';
border: 2px solid #2196F3;
color: #2196F3;
}
input[type=radio]:disabled::before {
border-color: #bdbdbd;
color: #bdbdbd;
-webkit-text-stroke-color: #bdbdbd;
}
/* Range */
input[type=range] {
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
width: 100%;
/* Specific width is required for Firefox. */
}
input[type=range]:focus {
outline: none;
/* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -0.4em;
height: 1em;
width: 1em;
border-radius: 1em;
background: #2196F3;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
height: 1em;
width: 1em;
border-radius: 1em;
background: #2196F3;
cursor: pointer;
}
input[type=range]::-ms-thumb {
height: 1em;
width: 1em;
border-radius: 1em;
background: #2196F3;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
background-color: #bdbdbd;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background-color: #2196F3;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
background-color: #bdbdbd;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
height: 3px;
background-color: #bdbdbd;
}
input[type=range]::-ms-fill-lower {
background-color: #bdbdbd;
}
input[type=range]::-ms-fill-upper {
background-color: #bdbdbd;
}
input[type=range]:focus::-ms-fill-lower {
background-color: #2196F3;
}
input[type=range]:focus::-ms-fill-upper {
background-color: #2196F3;
}
/* Button - credits to Wifeo (http://codepen.io/wifeo/pen/gsDJx)*/
button {
border: none;
position: absolute;
font-weight: 300;
font-size: 1em;
text-transform: uppercase;
background-color: #2196F3;
color: white;
cursor: pointer;
height: 100%;
width: 100%;
}
.button-wrapper {
width: 100px;
height: 40px;
background-color: #00bcd4;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
}
.button-wrapper:active .circle {
cursor: pointer;
-webkit-animation: oblik 0.2s ease-in;
-webkit-transform-origin: 50% 50%;
-moz-animation: oblik 0.2s ease-in;
-moz-transform-origin: 50% 50%;
-ms-animation: oblik 0.2s ease-in;
-ms-transform-origin: 50% 50%;
animation: oblik 0.2s ease-in;
transform-origin: 50% 50%;
width: 100%;
height: 100%;
border-radius: 50%;
}
@-webkit-keyframes oblik {
0% {
opacity: 1;
-webkit-transform: scale(0);
}
100% {
opacity: 0;
-webkit-transform: scale(5);
background-color: black;
}
}
@-moz-keyframes oblik {
0% {
opacity: 1;
-moz-transform: scale(0);
}
100% {
opacity: 0;
-moz-transform: scale(5);
background-color: black;
}
}
@-ms-keyframes oblik {
0% {
opacity: 1;
-ms-transform: scale(0);
}
100% {
opacity: 0;
-ms-transform: scale(5);
background-color: black;
}
}
@keyframes oblik {
0% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(5);
background-color: black;
}
}
Raw
SassMeister-rendered.html
<nav>
<div class="menu"></div>
<span class="title">Pure CSS Material Design</span>
</nav>
<table>
<tr>
<td style="width:200px">
<input type="text" placeholder="Hint text" /><br/>
<input type="text" class="error" placeholder="Error" /><br/>
<input type="text" disabled value="Input text" />
<br />
<br/>
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td style="width:200px">
<label><input type="checkbox" />Checkbox</label><br/>
<label><input type="checkbox" checked />Checkbox</label><br/>
<label><input type="checkbox" disabled />Checkbox</label><br/>
<label><input type="checkbox" disabled checked />Checkbox</label>
<br/>
<br/>
<label><input type="radio" name="r"/>Radio 1</label><br/>
<label><input type="radio" name="r" checked />Radio 2</label><br/>
<label><input type="radio" disabled />Radio 3</label><br/>
<label><input type="radio" disabled checked />Radio 4</label>
</td>
<td style="width:200px">
<input type="range" />
<br/>
<br/>
<div class="button-wrapper">
<button>Submit</button>
<div class="circle"></div>
</div>
</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment