mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(date-picker): finish style

Browse Source
This commit is contained in:
07akioni 2019-07-26 17:15:59 +08:00
parent d6443e1cdd
commit ba93be57ec
2 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
packages/common/DatePicker/src/panel/datetimerange.vue
View File

@ -6,24 +6,40 @@
class="n-date-picker-calendar n-date-picker-calendar--datetimerange"
@click.capture="resetSelectingStatus"
>
<div class="n-date-picker-calendar__range-wrapper">
<div
class="n-date-picker-calendar__date-time-input-wrapper"
>
<n-input
v-model="startDateDisplayString"
class="n-date-picker-calendar__date-input"
placeholder="Select date"
@blur="handleStartDateInputBlur"
@input="handleStartDateInput"
/>
<n-time-picker
class="n-date-picker-calendar__time-input"
:value="startTimeValue"
stop-selector-bubble
@input="handleStartTimePickerInput"
/>
<div
class="n-date-picker-calendar__date-time-input-wrapper"
>
<n-input
v-model="startDateDisplayString"
class="n-date-picker-calendar__date-input"
placeholder="Select date"
@blur="handleStartDateInputBlur"
@input="handleStartDateInput"
/>
<n-time-picker
class="n-date-picker-calendar__time-input"
:value="startTimeValue"
stop-selector-bubble
@input="handleStartTimePickerInput"
/>
<div class="n-date-picker-calendar__arrow">
<n-icon type="ios-arrow-forward" />
</div>
<n-input
v-model="endDateDisplayString"
class="n-date-picker-calendar__date-input"
placeholder="Select date"
@blur="handleEndDateInputBlur"
@input="handleEndDateInput"
/>
<n-time-picker
class="n-date-picker-calendar__time-input"
:value="endTimeValue"
stop-selector-bubble
@input="handleEndTimePickerInput"
/>
</div>
<div class="n-date-picker-calendar__range-wrapper">
<div class="n-date-picker-calendar__month-modifier">
<div
class="n-date-picker-calendar__fast-prev"
@ -106,23 +122,6 @@
</div>
<div><div class="n-date-picker-calendar__vertical-divider" /></div>
<div class="n-date-picker-calendar__range-wrapper">
<div
class="n-date-picker-calendar__date-time-input-wrapper"
>
<n-input
v-model="endDateDisplayString"
class="n-date-picker-calendar__date-input"
placeholder="Select date"
@blur="handleEndDateInputBlur"
@input="handleEndDateInput"
/>
<n-time-picker
class="n-date-picker-calendar__time-input"
:value="endTimeValue"
stop-selector-bubble
@input="handleEndTimePickerInput"
/>
</div>
<div class="n-date-picker-calendar__month-modifier">
<div
class="n-date-picker-calendar__fast-prev"

11
styles/DatePicker.scss
View File

@ -129,6 +129,17 @@
width: 701px;
display: flex;
flex-wrap: wrap;
.n-date-picker-calendar__date-time-input-wrapper {
flex: 1;
align-items: center;
.n-date-picker-calendar__arrow {
width: 21px;
display: flex;
justify-content: center;
font-size: 20px;
color: rgba(255, 255, 255, .3);
}
}
.n-date-picker-calendar__range-wrapper {
width: 350px;
.n-date-picker-calendar__month-modifier {