Merge pull request #4552 from umbraco/temp8-ui-datepicker-style

UI datepicker style updated
This commit is contained in:
Shannon Deminick
2019-02-14 10:28:08 +11:00
committed by GitHub
3 changed files with 32 additions and 10 deletions

View File

@@ -574,14 +574,19 @@ div.help {
width: auto;
height: 22px;
min-width: 18px;
padding: 4px 6px;
padding: 5px 6px 3px 6px;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
background-color: @gray-10;
border: 1px solid @purple-l3;
//text-shadow: 0 1px 0 @white;
background-color: @white;
border: 1px solid @inputBorder;
color: @ui-option-type;
&:hover {
border-color:@inputBorderFocus;
color: @ui-option-type-hover;
}
}
.add-on,
.btn,

View File

@@ -884,6 +884,23 @@
.bootstrap-datetimepicker-widget .btn{padding: 0;}
.bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
.umb-datepicker .input-append .add-on{cursor: pointer;}
.umb-datepicker .input-append .on-top {
position: absolute;
margin-left: -31px;
margin-top: 1px;
display: inline-block;
height: 22px;
padding: 5px 6px 3px 6px;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
background-color: @white;
color: @ui-option-type;
&:hover {
color: @ui-option-type-hover;
}
}
.umb-datepicker p {margin-top:10px;}
.umb-datepicker p a{color: @gray-3;}

View File

@@ -13,12 +13,15 @@
<div class="input-append">
<input
name="datepicker"
id="{{model.alias}}"
type="text"
id="{{model.alias}}"
type="text"
ng-model="model.datetimePickerValue"
ng-required="model.validation.mandatory"
val-server="value"
val-server="value"
class="datepickerinput">
<span class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
<i class="icon-delete"></i>
</span>
<span class="add-on">
<i class="icon-calendar"></i>
</span>
@@ -38,9 +41,6 @@
<small><localize key="content_scheduledPublishServerTime">This translates to the following time on the server:</localize> {{serverTime}}</small><br />
<small><localize key="content_scheduledPublishDocumentation">What does this mean?</localize></small>
</p>
<p ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
<a href ng-click="clearDate()"><i class="icon-delete"></i><small><localize key="content_removeDate">Clear date</localize></small></a>
</p>
</ng-form>
</div>