mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add clock icon, add visual separation between dates and time
This commit is contained in:
t1m0n
parent
476a18bef0
commit
1fa7899d9a
51
dist/css/datepicker.css
vendored
51
dist/css/datepicker.css
vendored
@ -392,19 +392,21 @@
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
.datepicker--time {
|
||||
border-top: 1px solid #efefef;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 4px 4px;
|
||||
padding: 4px;
|
||||
position: relative; }
|
||||
|
||||
.datepicker--time-sliders {
|
||||
-webkit-flex: 0 1 138px;
|
||||
-ms-flex: 0 1 138px;
|
||||
flex: 0 1 138px;
|
||||
margin-right: 10px;
|
||||
-webkit-order: 2;
|
||||
-ms-flex-order: 2;
|
||||
order: 2; }
|
||||
@ -420,14 +422,12 @@
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center; }
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0 0 0 10px; }
|
||||
.datepicker--time-current input[type='text'] {
|
||||
box-sizing: content-box;
|
||||
border: none;
|
||||
@ -438,10 +438,9 @@
|
||||
font-size: 16px;
|
||||
width: 18px;
|
||||
height: 23px; }
|
||||
.datepicker--time-current > {
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
.datepicker--time-current span {
|
||||
line-height: 1;
|
||||
margin: 0 -2px; }
|
||||
|
||||
.datepicker--time-row {
|
||||
display: -webkit-flex;
|
||||
@ -505,16 +504,20 @@
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-track {
|
||||
border: none;
|
||||
height: 12px;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
@ -525,6 +528,32 @@
|
||||
.datepicker--time-row span {
|
||||
padding: 0 12px; }
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: #777;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin: 0 5px -1px 0;
|
||||
width: 1em;
|
||||
height: 1em; }
|
||||
.datepicker--time-icon:after, .datepicker--time-icon:before {
|
||||
content: '';
|
||||
background: currentColor;
|
||||
position: absolute; }
|
||||
.datepicker--time-icon:after {
|
||||
height: .4em;
|
||||
width: 1px;
|
||||
left: calc(50% - 1px);
|
||||
top: calc(50% + 1px);
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%); }
|
||||
.datepicker--time-icon:before {
|
||||
width: .4em;
|
||||
height: 1px;
|
||||
top: calc(50% + 1px);
|
||||
left: calc(50% - 1px); }
|
||||
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
|
||||
2
dist/css/datepicker.min.css
vendored
2
dist/css/datepicker.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/js/datepicker.js
vendored
4
dist/js/datepicker.js
vendored
@ -1742,9 +1742,11 @@ var Datepicker;
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-current">' +
|
||||
' <i class="datepicker--time-icon"></i>' +
|
||||
' <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
|
||||
' <span>:</span>' +
|
||||
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
|
||||
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
inputTimeout = 10;
|
||||
|
||||
|
||||
2
dist/js/datepicker.min.js
vendored
2
dist/js/datepicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -11,9 +11,11 @@
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-current">' +
|
||||
' <i class="datepicker--time-icon"></i>' +
|
||||
' <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
|
||||
' <span>:</span>' +
|
||||
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
|
||||
' <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
inputTimeout = 10;
|
||||
|
||||
|
||||
@ -22,16 +22,26 @@ $rangeThumbBg: #dedede;
|
||||
transition: background .2s;
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
border: none;
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.datepicker--time {
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 $datepickerPadding $datepickerPadding;
|
||||
padding: $datepickerPadding;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.datepicker--time-sliders {
|
||||
flex: 0 1 138px;
|
||||
margin-right: 10px;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@ -43,10 +53,10 @@ $rangeThumbBg: #dedede;
|
||||
.datepicker--time-current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0 0 0 10px;
|
||||
|
||||
input[type='text'] {
|
||||
box-sizing: content-box;
|
||||
@ -60,8 +70,9 @@ $rangeThumbBg: #dedede;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
> {
|
||||
flex: 1;
|
||||
span {
|
||||
line-height: 1;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,23 +133,15 @@ $rangeThumbBg: #dedede;
|
||||
// Track
|
||||
// -------------------------------------------------
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
border: none;
|
||||
height: $rangeThumbSize;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@ -157,4 +160,36 @@ $rangeThumbBg: #dedede;
|
||||
span {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: #777;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin: 0 5px -1px 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
&:after, &:before {
|
||||
content: '';
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: .4em;
|
||||
width: 1px;
|
||||
left: calc(50% - 1px);
|
||||
top: calc(50% + 1px);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: .4em;
|
||||
height: 1px;
|
||||
top: calc(50% + 1px);
|
||||
left: calc(50% - 1px);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user