Input fields can now use icons, added icons to datepicker inputs

This commit is contained in:
Samuel Georges 2015-02-13 22:57:55 +11:00
parent c678c965ea
commit fe611b8834
6 changed files with 76 additions and 36 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 584 B

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -157,6 +157,10 @@ label {
}
}
&.field-indent {
padding-left: 23px;
}
&.input-sidebar-control {
padding-right: 35px;
@ -198,6 +202,29 @@ label {
}
}
.input-with-icon {
position: relative;
> .icon {
position: absolute;
z-index: 2;
padding: 13px;
pointer-events: none;
color: @color-form-field-icon;
font-size: 15px;
}
&.right-align {
> .icon { right: 0; }
input { padding-right: 32px !important; }
}
&.left-align {
> .icon { left: 0; }
input { padding-left: 32px !important; }
}
}
.field-textarea {
resize: vertical;
&.size-tiny { min-height: @size-tiny; }

View File

@ -132,6 +132,7 @@
@color-form-sidebar: #ecf0f1;
@color-form-field-preview: #f6f6f6;
@color-form-field-bg: #ffffff;
@color-form-field-icon: #bdbdbd;
@color-panel-light: #ECF0F1;

View File

@ -10,13 +10,16 @@
data-control="datepicker"
data-min-date="<?= $minDate ?>"
data-max-date="<?= $maxDate ?>">
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off" />
<div class="input-with-icon right-align">
<i class="icon icon-calendar-o"></i>
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off" />
</div>
</div>
<?php elseif ($mode == 'datetime'): ?>
@ -30,13 +33,16 @@
data-control="datepicker"
data-min-date="<?= $minDate ?>"
data-max-date="<?= $maxDate ?>">
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off" />
<div class="input-with-icon right-align">
<i class="icon icon-calendar-o"></i>
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off" />
</div>
</div>
</div>
<div class="col-md-6">
@ -45,16 +51,19 @@
id="<?= $this->getId() ?>-time"
data-control="timepicker"
class="field-timepicker clockpicker">
<input
type="text"
id="<?= $this->getId('input') ?>-time"
name="<?= $timeName ?>"
value="<?= $timeValue ?>"
class="form-control align-right"
autocomplete="off"
data-autoclose="true"
data-placement="bottom"
data-align="right" />
<div class="input-with-icon right-align">
<i class="icon icon-clock-o"></i>
<input
type="text"
id="<?= $this->getId('input') ?>-time"
name="<?= $timeName ?>"
value="<?= $timeValue ?>"
class="form-control align-right"
autocomplete="off"
data-autoclose="true"
data-placement="bottom"
data-align="right" />
</div>
</div>
</div>
</div>
@ -65,16 +74,19 @@
id="<?= $this->getId() ?>"
data-control="timepicker"
class="field-timepicker clockpicker">
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off"
data-autoclose="true"
data-placement="bottom"
data-align="right" />
<div class="input-with-icon right-align">
<i class="icon icon-clock-o"></i>
<input
type="text"
id="<?= $this->getId('input') ?>"
name="<?= $name ?>"
value="<?= $value ?>"
class="form-control align-right"
autocomplete="off"
data-autoclose="true"
data-placement="bottom"
data-align="right" />
</div>
</div>
<?php endif ?>

View File

@ -1,9 +1,9 @@
<?php namespace System\Traits;
use Yaml;
use File;
use Lang;
use Event;
use Yaml;
use SystemException;
use Backend\Classes\Controller;
use stdClass;