Use CSS3 achieve a part of material design
Now scss support compass 1.0.1
Modify transform
in scss
- Base on JavaScript & Sass & compass
- Use CSS3
- Form input focus effect
- button & a click effect
- IE 10+
- jQuery is not necessary
HTML
<!-- basic -->
<div class="input-group">
<input type="text">
<label class="material-design-label" for="">PassWord</label>
</div>
Can add error style
<!-- error style -->
<div class="input-group input-error">
<input type="text">
<label class="material-design-label" for="">E-mail</label>
</div>
<!-- password type -->
<div class="material-input-group">
<input type="password">
<label class="material-design-label" for="">PassWord</label>
</div>
<!-- textarea -->
<div class="material-input-group">
<textarea rows="4" cols="50"></textarea>
<label class="material-design-label" for="">textarea</label>
</div>
Default HTML tag button
& a
have material design effect
If want to change
Modify code
if (target.tagName.toLowerCase() !== 'button' && target.tagName.toLowerCase() !== 'a') return false;
<div class="material-design-checkbox">
<input id="checkbox" type="checkbox">
<span class="check">
<span class="ripple"></span>
</span>
<label for="checkbox">checkbox</label>
</div>
<div class="material-design-radio">
<input id="radio_2" type="radio" name="radio">
<span class="check">
<span class="ripple"></span>
</span>
<label for="radio_2">radio_2</label>
</div>
<div class="material-design-switch">
<label for="switch">switch</label>
<input id="switch" type="checkbox">
<span class="check">
<span class="ripple"></span>
</span>
</div>