mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add styles to range inputs
This commit is contained in:
t1m0n
parent
97d0402721
commit
5bbb57cfd0
77
dist/css/datepicker.css
vendored
77
dist/css/datepicker.css
vendored
@ -392,17 +392,30 @@
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
.datepicker--time {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
position: relative; }
|
||||
|
||||
.datepicker--time-sliders {
|
||||
-webkit-flex: 0 1 138px;
|
||||
-ms-flex: 0 1 138px;
|
||||
flex: 0 1 138px; }
|
||||
|
||||
.datepicker--time-label {
|
||||
display: block;
|
||||
display: none;
|
||||
font-size: 12px; }
|
||||
|
||||
.datepicker--time-current {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 4px; }
|
||||
font-size: 16px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center; }
|
||||
|
||||
.datepicker--time-row {
|
||||
display: -webkit-flex;
|
||||
@ -411,11 +424,63 @@
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 11px; }
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 2px no-repeat; }
|
||||
.datepicker--time-row input[type='range'] {
|
||||
background: none;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1; }
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-ms-tooltip {
|
||||
display: none; }
|
||||
.datepicker--time-row input[type='range']:focus {
|
||||
outline: none; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: #5cc4ef;
|
||||
margin-top: -5px;
|
||||
cursor: pointer; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #5cc4ef;
|
||||
cursor: pointer; }
|
||||
.datepicker--time-row input[type='range']::-ms-thumb {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: #5cc4ef;
|
||||
cursor: pointer; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-track {
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-track {
|
||||
border: none;
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-lower {
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-upper {
|
||||
background: transparent; }
|
||||
.datepicker--time-row span {
|
||||
padding: 0 12px; }
|
||||
|
||||
|
||||
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
18
dist/js/datepicker.js
vendored
18
dist/js/datepicker.js
vendored
@ -1717,15 +1717,17 @@ var Datepicker;
|
||||
|
||||
(function (window, $, datepicker) {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <label class="datepicker--time-label">#{hourLabel}</label>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
' </div>' +
|
||||
' <label class="datepicker--time-label">#{minLabel}</label>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
|
||||
'<label class="datepicker--time-label">#{hourLabel}</label>' +
|
||||
'<div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
'</div>' +
|
||||
' <label class="datepicker--time-label">#{minLabel}</label>' +
|
||||
'<div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
datepicker.Timepicker = function (inst, opts) {
|
||||
this.d = inst;
|
||||
|
||||
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
@ -1,14 +1,16 @@
|
||||
(function (window, $, datepicker) {
|
||||
var template = '<div class="datepicker--time">' +
|
||||
'<div class="datepicker--time-sliders">' +
|
||||
' <label class="datepicker--time-label">#{hourLabel}</label>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
' </div>' +
|
||||
' <label class="datepicker--time-label">#{minLabel}</label>' +
|
||||
' <div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
|
||||
'<label class="datepicker--time-label">#{hourLabel}</label>' +
|
||||
'<div class="datepicker--time-row">' +
|
||||
' <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
|
||||
'</div>' +
|
||||
' <label class="datepicker--time-label">#{minLabel}</label>' +
|
||||
'<div class="datepicker--time-row">' +
|
||||
' <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
datepicker.Timepicker = function (inst, opts) {
|
||||
this.d = inst;
|
||||
|
||||
@ -4,31 +4,126 @@
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
|
||||
$rangeTrackHeight: 2px;
|
||||
$rangeTrackBg: #dedede;
|
||||
$rangeThumbSize: 10px;
|
||||
$rangeThumbBg: #5cc4ef;
|
||||
|
||||
.datepicker--time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: $datepickerPadding;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.datepicker--time-sliders {
|
||||
flex: 0 1 138px;
|
||||
}
|
||||
|
||||
.datepicker--time-label {
|
||||
display: block;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.datepicker--time-current {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: $datepickerPadding;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.datepicker--time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
height: 24px;
|
||||
background: linear-gradient(to right,#dedede,#dedede) left 50%/100% 2px no-repeat;
|
||||
|
||||
input[type='range'] {
|
||||
background: none;
|
||||
flex: 1;
|
||||
}
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Thumb
|
||||
// -------------------------------------------------
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
height: $rangeThumbSize;
|
||||
width: $rangeThumbSize;
|
||||
border-radius: 50%;
|
||||
background: $rangeThumbBg;
|
||||
margin-top: -$rangeThumbSize/2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
height: $rangeThumbSize;
|
||||
width: $rangeThumbSize;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: $rangeThumbBg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
height: $rangeThumbSize;
|
||||
width: $rangeThumbSize;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $rangeThumbBg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Track
|
||||
// -------------------------------------------------
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: $rangeTrackHeight;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
border: none;
|
||||
height: $rangeThumbSize;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
&:focus::-ms-fill-lower {
|
||||
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: transparent;
|
||||
}
|
||||
&:focus::-ms-fill-upper {
|
||||
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user