Add calendar icons to input fields

This commit is contained in:
benji 2015-09-11 11:09:38 +02:00
parent 6f37cbf8ac
commit c8c77c0b9c
3 changed files with 14 additions and 3 deletions

View file

@ -17,6 +17,8 @@
*= require_self
*= require purecss
*/
@import "font-awesome-sprockets";
@import "font-awesome";
body {
padding: 30px;
}

View file

@ -59,5 +59,12 @@ table.pure-table-striped {
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
vertical-align: middle;
&[type="date"] {
height: 34px;
vertical-align: bottom;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
}

View file

@ -7,10 +7,12 @@
.pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
%fieldset.pure-group-inline
%span.fa.fa-calendar.pure-group-addon
%input.lower-bound{type: 'date', placeholder: 'after'}
%i.fa.fa-calendar.pure-group-addon
%input.lower-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
\-
%input.upper-bound{type: 'date', placeholder: 'before'}
%fieldset.pure-group-inline
%i.fa.fa-calendar.pure-group-addon
%input.upper-bound{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
%fieldset.pure-group-inline