vue-time-date-range-picker
Version:
a vue time date range picker
1 lines • 9.47 kB
Source Map (JSON)
{"version":3,"file":"vdprDatePicker.min.css","mappings":"AASA,2BACE,sBACA,sBAEA,sCACE,eACA,yBACA,kBACA,eAGF,mCCbA,aACA,8BACA,mBDaE,aAEA,gFAEE,eACA,kBACA,kBACA,sBACA,WACA,aAEA,8FACE,kBACA,QACA,SACA,gCAIJ,+CACE,YAGF,+CACE,YAGF,4CACE,mBACA,sBAIJ,iCACE,WACA,mBACA,yBACA,mBAEA,mCACE,SACA,UAGF,uCACE,yBACA,kBACA,eAGF,oCACE,mBACA,gBACA,YACA,iBACA,UAtEkB,CAyEpB,oCACE,mBACA,gBACA,iBACA,kBACA,qBApFqB,CAqFrB,UAlFwB,CAmFxB,eAEA,0CACE,eACA,yBAIJ,wCACE,UA1FiB,CA6FnB,8CACE,wBApGoB,CAqGpB,UAlGsB,CAoGtB,oDACE,yBAIJ,2CACE,mBACA,wBA5GiB,CA6GjB,UA1GoB,CA4GpB,iDACE,mBACA,wBAjHe,CEKvB,yBACE,eACA,gEACA,eACA,gBACA,kBACA,0BACA,iBACA,gBACA,mBACA,+BACA,kBAEA,gCACE,WACA,cAGF,iCACE,UAzBmB,CA0BnB,qBA3BgB,CA4BhB,qBAEA,uCACE,yBAIJ,gCACE,UAjCkB,CAkClB,wBAnCe,CAoCf,qBAEA,sCACE,yBAIJ,+BACE,UAzCiB,CA0CjB,wBA3Cc,CA4Cd,qBAEA,qCACE,yBCnDN,sCACE,YAEA,2CACE,sBACA,YACA,WACA,YACA,iBACA,sBCPJ,sCACE,kBACA,YACA,sBAEA,2CACE,YACA,YACA,WACA,+BACA,sBACA,iBAGF,8CACE,kBACA,MACA,QACA,YACA,UACA,sBACA,gEHtBF,aACA,uBACA,mBGuBE,oGAEE,eACA,WH5BJ,aACA,uBACA,mBG6BI,gHACE,WAIJ,iDACE,mBACA,eClCN,yBACE,kBACA,qBACA,WACA,YAEA,+BACE,aAGE,uEACE,wBAhBU,CAmBZ,+EACE,2BAGF,8EACE,aACA,SAKN,gCACE,eACA,kBACA,MACA,OACA,QACA,SACA,qBApCgB,CAqChB,eACA,mBAEA,uCACE,WACA,YACA,WACA,kBACA,SACA,WACA,qBA9CgB,CA+ChB,eACA,kBAGF,sCACE,cACA,kBACA,QACA,SACA,gCACA,UAxDc,CAyDd,eCpDJ,kCACE,uCACA,kBACA,eACA,YACA,aACA,mBACA,aACA,sBAEA,0CACE,oBACA,iCACA,UACA,gBACA,kCAIJ,2BACE,YAGF,yCACE,YACA,iBAEA,4DACE,eAIJ,mCACE,YACA,iBACA,eAEA,sDACE,eAIJ,yCL3CA,aACA,8BACA,mBK2CE,WAEA,8CACE,yBAGF,2DACE,gBAGF,8CACE,eAGF,8JAEE,e;ACpEN,iBACE,kB","sources":["webpack://vdprDatePicker/./src/Styles/Calendar.scss","webpack://vdprDatePicker/./src/Styles/_mixins.scss","webpack://vdprDatePicker/./src/Styles/Button.scss","webpack://vdprDatePicker/./src/Styles/InputDate.scss","webpack://vdprDatePicker/./src/Styles/InputTime.scss","webpack://vdprDatePicker/./src/Styles/Switch.scss","webpack://vdprDatePicker/./src/Styles/CalendarDialog.scss","webpack://vdprDatePicker/./src/Styles/DatePicker.scss"],"sourcesContent":["$bg-calendar-highlighted: #3a86ff;\n$bg-calendar-not-selected: #eee;\n$bg-calendar-disabled: #a6a6a6;\n$color-calendar-highligted: white;\n$color-calendar-not-selected: #333;\n$color-calendar-disabled: #ccc;\n$color-calendar-faded: #ccc;\n$color-calendar-header: #333;\n\n.vdpr-datepicker__calendar {\n box-sizing: border-box;\n background-color: white;\n\n &-month-year {\n font-size: 24px;\n text-transform: uppercase;\n text-align: center;\n flex-basis: 70%;\n }\n\n &-control {\n @include flex-sb-c;\n padding: 10px;\n\n &-prev,\n &-next {\n cursor: pointer;\n position: relative;\n border-radius: 50%;\n border: 1px solid #333;\n color: #333;\n padding: 12px;\n\n &:before {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n &-prev:before {\n content: \"\\003c\";\n }\n\n &-next:before {\n content: \"\\003e\";\n }\n\n &-disabled {\n cursor: not-allowed;\n background-color: #ccc;\n }\n }\n\n &-table {\n width: 100%;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 1px;\n\n > * {\n margin: 0;\n padding: 0;\n }\n\n thead {\n text-transform: uppercase;\n text-align: center;\n font-size: 12px;\n }\n\n th {\n white-space: nowrap;\n overflow: hidden;\n padding: 4px;\n line-height: 28px;\n color: $color-calendar-header;\n }\n\n td {\n white-space: nowrap;\n overflow: hidden;\n line-height: 35px;\n text-align: center;\n background-color: $bg-calendar-not-selected;\n color: $color-calendar-not-selected;\n font-size: 14px;\n\n &:hover {\n cursor: pointer;\n background-color: darken($bg-calendar-not-selected, 5%);\n }\n }\n\n .faded {\n color: $color-calendar-faded;\n }\n\n .highlighted {\n background-color: $bg-calendar-highlighted;\n color: $color-calendar-highligted;\n\n &:hover {\n background-color: darken($bg-calendar-highlighted, 5%);\n }\n }\n\n .disabled {\n cursor: not-allowed;\n background-color: $bg-calendar-disabled;\n color: $color-calendar-disabled;\n\n &:hover {\n cursor: not-allowed;\n background-color: $bg-calendar-disabled;\n }\n }\n }\n}\n","@mixin flex-c-c {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n@mixin flex-sb-c {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n","$bg-button-default: white;\n$color-button-default: #333;\n$bg-button-submit: #3a86ff;\n$color-button-submit: white;\n$bg-button-reset: #ef233c;\n$color-button-reset: white;\n\n.vdpr-datepicker__button {\n cursor: pointer;\n user-select: none;\n font-size: 14px;\n font-weight: 400;\n text-align: center;\n text-transform: capitalize;\n padding: 6px 12px;\n line-height: 1.5;\n white-space: nowrap;\n border: 1px solid transparent;\n border-radius: 4px;\n\n &--block {\n width: 100%;\n display: block;\n }\n\n &-default {\n color: $color-button-default;\n background-color: $bg-button-default;\n border-color: darken($bg-button-default, 10%);\n\n &:hover {\n background-color: darken($bg-button-default, 10%);\n }\n }\n\n &-submit {\n color: $color-button-submit;\n background-color: $bg-button-submit;\n border-color: darken($bg-button-submit, 10%);\n\n &:hover {\n background-color: darken($bg-button-submit, 10%);\n }\n }\n\n &-reset {\n color: $color-button-reset;\n background-color: $bg-button-reset;\n border-color: darken($bg-button-reset, 10%);\n\n &:hover {\n background-color: darken($bg-button-reset, 10%);\n }\n }\n}\n",".vdpr-datepicker__calendar-input-date {\n height: 30px;\n\n &-elem {\n box-sizing: border-box;\n border: none;\n width: 100%;\n height: 100%;\n padding-left: 5px;\n background-color: #eee;\n }\n}\n","@import \"mixins\";\n\n.vdpr-datepicker__calendar-input-time {\n position: relative;\n height: 30px;\n background-color: #eee;\n\n &-elem {\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n padding-left: 5px;\n }\n\n &-control {\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n width: 20%;\n flex-direction: column;\n user-select: none;\n @include flex-c-c;\n\n &-up,\n &-down {\n cursor: pointer;\n color: #999;\n @include flex-c-c;\n\n &:hover {\n color: black;\n }\n }\n\n &-up {\n margin-bottom: -5px;\n margin-top: 2px;\n }\n }\n}\n","$bg-switch-check: #3a86ff;\n$bg-switch-uncheck: #ccc;\n$color-switch-button: white;\n$color-switch-text: white;\n\n.vdpr-datepicker__switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 30px;\n\n > input {\n display: none;\n\n &:checked {\n + .vdpr-datepicker__switch-slider {\n background-color: $bg-switch-check;\n }\n\n + .vdpr-datepicker__switch-slider::before {\n transform: translateX(26px);\n }\n\n + .vdpr-datepicker__switch-slider::after {\n content: \"ON\";\n left: 25%;\n }\n }\n }\n\n &-slider {\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: $bg-switch-uncheck;\n transition: 0.4s;\n border-radius: 34px;\n\n &:before {\n content: \"\";\n height: 24px;\n width: 24px;\n position: absolute;\n left: 5px;\n bottom: 3px;\n background-color: $color-switch-button;\n transition: 0.4s;\n border-radius: 50%;\n }\n\n &:after {\n content: \"OFF\";\n position: absolute;\n top: 50%;\n left: 75%;\n transform: translate(-50%, -50%);\n color: $color-switch-text;\n font-size: 11px;\n }\n }\n}\n","@import \"./mixins\";\n@import \"./Calendar.scss\";\n@import \"./Button.scss\";\n@import \"./InputDate.scss\";\n@import \"./InputTime.scss\";\n@import \"./Switch.scss\";\n\n.vdpr-datepicker {\n &__calendar-dialog {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n margin-top: 2px;\n padding: 5px;\n display: flex;\n flex-direction: row;\n z-index: 1000;\n background-color: white;\n\n &--inline {\n display: inline-flex;\n position: unset;\n z-index: 0;\n box-shadow: none;\n border: 1px solid rgba(0, 0, 0, 0.175);\n }\n }\n\n &__calendar {\n width: 300px;\n }\n\n &__calendar-button-helper {\n width: 140px;\n padding: 5px 10px;\n\n > :not(:first-child) {\n margin-top: 5px;\n }\n }\n\n &__calendar-actions {\n width: 160px;\n padding: 5px 10px;\n font-size: 13px;\n\n > :not(:first-child) {\n margin-top: 5px;\n }\n }\n\n &__calendar-input-wrapper {\n @include flex-sb-c;\n width: 100%;\n\n &--end {\n justify-content: flex-end;\n }\n\n &:not(:first-child) {\n margin-top: 10px;\n }\n\n > span {\n flex-basis: 35%;\n }\n\n > .vdpr-datepicker__calendar-input-date,\n .vdpr-datepicker__calendar-input-time {\n flex-basis: 65%;\n }\n }\n}\n",".vdpr-datepicker {\n position: relative;\n}"],"names":[],"sourceRoot":""}