Add calendar icons to input fields
This commit is contained in:
parent
6f37cbf8ac
commit
c8c77c0b9c
3 changed files with 14 additions and 3 deletions
|
@ -17,6 +17,8 @@
|
||||||
*= require_self
|
*= require_self
|
||||||
*= require purecss
|
*= require purecss
|
||||||
*/
|
*/
|
||||||
|
@import "font-awesome-sprockets";
|
||||||
|
@import "font-awesome";
|
||||||
body {
|
body {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
|
@ -59,5 +59,12 @@ table.pure-table-striped {
|
||||||
box-shadow: inset 0 1px 3px #ddd;
|
box-shadow: inset 0 1px 3px #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
&[type="date"] {
|
||||||
|
height: 34px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,10 +7,12 @@
|
||||||
.pure-g
|
.pure-g
|
||||||
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
|
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
|
||||||
%fieldset.pure-group-inline
|
%fieldset.pure-group-inline
|
||||||
%span.fa.fa-calendar.pure-group-addon
|
%i.fa.fa-calendar.pure-group-addon
|
||||||
%input.lower-bound{type: 'date', placeholder: 'after'}
|
%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
|
.pure-g
|
||||||
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
|
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
|
||||||
%fieldset.pure-group-inline
|
%fieldset.pure-group-inline
|
||||||
|
|
Loading…
Reference in a new issue