703 lines
14 KiB
Plaintext
703 lines
14 KiB
Plaintext
/**
|
|
* @preserve jQuery PeriodPicker plugin v5.4.2
|
|
* @homepage http://xdsoft.net/jqplugins/periodpicker/
|
|
* @copyright (c) 2016 xdsoft.net Chupurnov Valeriy
|
|
* @license PRO http://xdsoft.net/jqplugins/periodpicker/license/
|
|
*/
|
|
@button-font: Arial,sans-serif;
|
|
@button-radius: 2px;
|
|
|
|
@button-color: #000;
|
|
@button-color-disable: #999;
|
|
|
|
@button-background: #fff;
|
|
@button-background-in-focus: #f6f6f6;
|
|
@button-background-disable: #eee;
|
|
@button-background-active: #f6f5f3;
|
|
|
|
@button-shadow: 0 0 0 1px rgba(0,0,0,.2);
|
|
@button-shadow-in-focus: 0 0 0 1px rgba(0,0,0,.4);
|
|
@button-shadow-active: 0 0 0 1px rgba(0,0,0,.3);
|
|
|
|
@picker-color: rgb(96, 96, 96);
|
|
@picker-background: #fff;
|
|
@picker-font: @button-font;
|
|
@picker-border: 1px solid rgba(0,0,0,.1);
|
|
@picker-shadow: 0 10px 20px -5px rgba(0,0,0,.4);
|
|
|
|
@picker-min-height: 365px;
|
|
@bottom-panel-height: 54px;
|
|
@header-height: 40px;
|
|
@yearsline-height: 30px;
|
|
|
|
@cell-background-today: #c8ffca;
|
|
@cell-background-selected: #ffeba0;
|
|
@cell-background-selected-hover: #fff5d0;
|
|
@cell-color-today: #0e5632;
|
|
@cell-color-holiday: #c11924;
|
|
|
|
.xdsoft_noselect,.xdsoft_noselect *:not(input) {
|
|
user-select: none;
|
|
}
|
|
.period_picker_input{
|
|
border:0;
|
|
line-height: 28px;
|
|
font-size: 13px;
|
|
border-radius: 3px;
|
|
font-family: @button-font;
|
|
color: @button-color;
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
outline: 0;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
left: 1px;
|
|
padding: 0;
|
|
content: '';
|
|
border-radius: @button-radius;
|
|
background: @button-background;
|
|
box-shadow: @button-shadow;
|
|
}
|
|
|
|
&:focus:before {
|
|
background: @button-background-in-focus;
|
|
box-shadow: @button-shadow-in-focus;
|
|
}
|
|
|
|
&[disabled]{
|
|
color: @button-color-disable;
|
|
&:before {
|
|
background-color: @button-background-disable;
|
|
}
|
|
}
|
|
&:active:before {
|
|
background-color: @button-background-active;
|
|
box-shadow: @button-shadow-active;
|
|
}
|
|
.period_button_text{
|
|
padding: 0 13px;
|
|
position: relative;
|
|
}
|
|
.icon_clear,
|
|
.icon_calendar {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: 50% no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-image: data-uri('palete.svg');
|
|
margin-right: 9px;
|
|
margin-bottom: 2px;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
&:after {
|
|
visibility: hidden;
|
|
content: '\00A0';
|
|
}
|
|
}
|
|
&[disabled]{
|
|
.icon_clear,
|
|
.icon_calendar {
|
|
opacity:0.5;
|
|
}
|
|
}
|
|
.icon_clear {
|
|
background-image: data-uri('clear.svg');
|
|
margin-right: 0px;
|
|
margin-left: 9px;
|
|
transition: opacity 0.2s linear, background 0.2s linear;
|
|
position:relative;
|
|
border-radius: 8px;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
&:active {
|
|
background-color: #ccc;
|
|
}
|
|
}
|
|
.period_button_dash {
|
|
margin-left: 3px;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
.period_picker_box {
|
|
&, & * {
|
|
box-sizing: border-box !important;
|
|
color: @picker-color;
|
|
}
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 0 20px 20px;
|
|
background: @picker-background;
|
|
|
|
font-family: @picker-font;
|
|
font-size: 13px;
|
|
|
|
cursor: default;
|
|
overflow: hidden;
|
|
z-index: 33001;
|
|
border: @picker-border;
|
|
box-shadow: @picker-shadow;
|
|
min-width: 236px;
|
|
min-height: @picker-min-height;
|
|
padding-bottom: 80px;
|
|
visibility:hidden;
|
|
display: none;
|
|
|
|
&.with_first_timepicker{
|
|
min-width: calc(~"236px + 87px");
|
|
&.with_second_timepicker{
|
|
min-width: calc(~"236px + 87px + 87px");
|
|
}
|
|
}
|
|
&.period_picker_maximize{
|
|
border: 0;
|
|
position: fixed;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
left: 0px;
|
|
top: 0px;
|
|
min-width: 667px;
|
|
min-height: 395px;
|
|
margin-top: 0px;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
left: 0 !important;
|
|
top: 0 !important;
|
|
}
|
|
&.visible{
|
|
visibility:visible;
|
|
display: block;
|
|
}
|
|
&.animation{
|
|
opacity:0;
|
|
margin-top:-200px;
|
|
transition: .15s linear;
|
|
transition-property: opacity, margin-top;
|
|
}
|
|
&.active.animation{
|
|
opacity:1.0;
|
|
margin-top:0px;
|
|
}
|
|
&.xdsoft_inline,
|
|
&.animation.xdsoft_inline {
|
|
position: relative;
|
|
top: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
right: auto;
|
|
visibility:visible;
|
|
box-shadow:none;
|
|
opacity:1;
|
|
margin:0;
|
|
z-index: 0;
|
|
display: inline-block;
|
|
}
|
|
.period_picker_error {
|
|
box-shadow: 1px 1px 10px red!important;
|
|
}
|
|
.period_picker_head {
|
|
color: #333;
|
|
position: relative;
|
|
height: 40px;
|
|
user-select: none;
|
|
}
|
|
.period_picker_head_title {
|
|
display: inline-block;
|
|
margin-top: 12px;
|
|
color: rgba(0,0,0,.5);
|
|
}
|
|
.period_picker_resizer,
|
|
.period_picker_max_min,
|
|
.period_picker_close {
|
|
background-image: data-uri('buttons.svg');
|
|
background-repeat: no-repeat;
|
|
opacity: .5;
|
|
right: 0;
|
|
}
|
|
.period_picker_resizer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: se-resize;
|
|
z-index: 7;
|
|
display: block;
|
|
background-position: -42px 0;
|
|
}
|
|
.period_picker_close, .period_picker_max_min {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
top: 10px;
|
|
cursor: pointer;
|
|
background-position: 0 0;
|
|
}
|
|
.period_picker_max_min {
|
|
background-position: -14px 0;
|
|
right: 20px;
|
|
}
|
|
.period_picker_maximize div span.period_picker_max_min {
|
|
background-position: -28px 0;
|
|
}
|
|
.period_picker_years {
|
|
position: relative;
|
|
left: 0;
|
|
height: 30px;
|
|
margin-bottom: 15px;
|
|
user-select: none;
|
|
}
|
|
.period_picker_years_selector {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 30px;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
user-select: none;
|
|
border-radius: 3px;
|
|
background: #f4f4f3;
|
|
.period_picker_year {
|
|
position: absolute;
|
|
top: 5px;
|
|
width: 3em;
|
|
margin-left: -1.5em;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
z-index: 11;
|
|
color: rgba(0,0,0,.5);
|
|
font-weight: 700;
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 1px;
|
|
height: 9px;
|
|
margin: 2px auto;
|
|
background: rgba(0,0,0,.2);
|
|
}
|
|
}
|
|
}
|
|
.period_picker_years_selector_container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height:30px;
|
|
}
|
|
.period_picker_years_dragger {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20px;
|
|
width: 70px;
|
|
height: 30px;
|
|
margin-left: -1px;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
z-index: 12;
|
|
cursor: pointer;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
border: 2px solid rgba(0,0,0,.7);
|
|
background: rgba(255,255,255,.4);
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1px;
|
|
right: -1px;
|
|
}
|
|
&:hover:after{
|
|
border-color: #000;
|
|
background: rgba(255,255,255,.6);
|
|
}
|
|
}
|
|
.period_picker_years_period {
|
|
background: #ffcf00;
|
|
position: absolute;
|
|
right: 100px;
|
|
width: 1px;
|
|
height: 32px;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
z-index: 9;
|
|
display: none;
|
|
}
|
|
.period_picker_first_letters_td,
|
|
.period_picker_first_letters_tr {
|
|
padding: 0 6px;
|
|
}
|
|
table {
|
|
border-spacing: 0;
|
|
border-collapse: separate;
|
|
th, td {
|
|
font-family: Arial,sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-collapse: collapse;
|
|
&.period_picker_first_letters_td,
|
|
&.period_picker_first_letters_tr {
|
|
padding: 0;
|
|
}
|
|
}
|
|
td.period_picker_selector_week{
|
|
width: 16px;
|
|
padding: 2px 5px 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.period_picker_days table {
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
table {
|
|
width: 184px;
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
&.period_picker_first_letters_table th {
|
|
text-align: right;
|
|
font-size: 9px;
|
|
height: 10px;
|
|
line-height: 10px;
|
|
padding: 0;
|
|
color: rgba(0,0,0,.5);
|
|
font-family: Verdana,Arial,sans-serif;
|
|
}
|
|
th {
|
|
width: 23px;
|
|
padding: 0 5px;
|
|
height:25px;
|
|
white-space: nowrap;
|
|
}
|
|
td {
|
|
width: 23px;
|
|
padding: 0 5px;
|
|
height:25px;
|
|
cursor: pointer;
|
|
empty-cells: hide;
|
|
vertical-align: middle;
|
|
&:hover {
|
|
background: #EBEBEB;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
td.period_picker_holiday {
|
|
color: @cell-color-holiday;
|
|
}
|
|
|
|
th.period_picker_month {
|
|
border: 0;
|
|
font-weight: 700;
|
|
padding: 14px 0 10px 12px;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
color: rgba(0,0,0,.7);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
td.period_picker_empty, td.period_picker_empty:hover {
|
|
cursor: default!important;
|
|
background: none!important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
td.period_picker_gray_period {
|
|
&, &:hover{
|
|
color: #aaa;
|
|
}
|
|
}
|
|
}
|
|
td.period_picker_month12:not(:last-child) {
|
|
position: relative;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
border-right: 2px solid rgba(0,0,0,.1);
|
|
position: absolute;
|
|
top: -16px;
|
|
bottom: 0;
|
|
right: -5px;
|
|
}
|
|
}
|
|
|
|
td.period_picker_cell_today {
|
|
background: @cell-background-today;
|
|
color: @cell-color-today;
|
|
}
|
|
|
|
td.period_picker_selected{
|
|
background: @cell-background-selected;
|
|
border-radius: 0;
|
|
:hover {
|
|
background-color: @cell-background-selected-hover;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
td.period_picker_selected_start {
|
|
&, &:hover {
|
|
border-radius: 5px 0 0 0;
|
|
}
|
|
}
|
|
td.period_picker_selected_end {
|
|
&, &:hover {
|
|
border-radius: 0 0 5px 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
span.period_picker_selector_week_cap {
|
|
visibility: hidden;
|
|
}
|
|
span.period_picker_selector_week,
|
|
span.period_picker_selector_week_cap {
|
|
padding: 0;
|
|
background-color: #ccc;
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 16px;
|
|
}
|
|
.period_picker_gray_period,
|
|
.period_picker_weekday,
|
|
.period_picker_holiday,
|
|
.period_picker_empty {
|
|
text-align: right;
|
|
}
|
|
.period_picker_month b {
|
|
display: none;
|
|
}
|
|
.period_picker_submit_dates {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
margin: 0 20px 15px;
|
|
background-color: #fff;
|
|
&:before {
|
|
content: '';
|
|
border-top: 1px solid rgba(0,0,0,.1);
|
|
margin: 0px;
|
|
margin-bottom:20px;
|
|
display: block;
|
|
}
|
|
.input_box{
|
|
padding-right: 7px;
|
|
background: #fff;
|
|
box-shadow: inset 0 0 0 1px #cbcbcb;
|
|
position: relative;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
cursor: text;
|
|
}
|
|
.input_focused_yes .input_box {
|
|
box-shadow: inset 0 0 0 1px #d0ba65,0 0 10px #fc0;
|
|
}
|
|
input {
|
|
width: 6.1em;
|
|
&.input_control {
|
|
position: relative;
|
|
z-index: 3;
|
|
width: 100%;
|
|
margin: 0;
|
|
font-size: 100%;
|
|
color: #000;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
padding: .4em 0;
|
|
border: 0;
|
|
outline: 0;
|
|
background: 0 0;
|
|
font-family: Arial,sans-serif;
|
|
color: #000;
|
|
padding-left: 7px;
|
|
}
|
|
}
|
|
}
|
|
&.without_bottom_panel{
|
|
min-height: @picker-min-height - @bottom-panel-height;
|
|
padding-bottom: 0px;
|
|
.period_picker_submit_dates{
|
|
display:none;
|
|
}
|
|
}
|
|
&.without_yearsline{
|
|
min-height: @picker-min-height - @yearsline-height;
|
|
}
|
|
&.without_header{
|
|
min-height: @picker-min-height - @header-height;
|
|
.period_picker_head{
|
|
height:10px;
|
|
}
|
|
}
|
|
|
|
&.without_header.without_yearsline{
|
|
min-height: @picker-min-height - @header-height;
|
|
}
|
|
|
|
&.without_header.without_bottom_panel{
|
|
min-height: @picker-min-height - @header-height - @bottom-panel-height;
|
|
}
|
|
|
|
&.without_yearsline.without_bottom_panel{
|
|
min-height: @picker-min-height - @yearsline-height - @bottom-panel-height;
|
|
}
|
|
|
|
&.without_yearsline.without_header.without_bottom_panel{
|
|
min-height: @picker-min-height - @yearsline-height - @header-height - @bottom-panel-height;
|
|
}
|
|
|
|
.period_picker_from_time_block,
|
|
.period_picker_to_time_block,
|
|
.period_picker_from_block,
|
|
.period_picker_to_block {
|
|
margin-right: 5px;
|
|
width: 81px;
|
|
font-size: 13px;
|
|
line-height: 28px;
|
|
font-family: Arial,sans-serif;
|
|
color: #000;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-bottom: 5px;
|
|
}
|
|
.period_picker_from_time_block,
|
|
.period_picker_to_time_block{
|
|
width: 60px;
|
|
}
|
|
|
|
&.xdsoft_norange .period_picker_from_block ~ span{
|
|
display:none;
|
|
}
|
|
|
|
.period_picker_to_time_block,
|
|
.period_picker_to_block {
|
|
margin-right: 0px;
|
|
margin-left: 5px;
|
|
}
|
|
.period_picker_show {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
outline: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
border-radius: 3px;
|
|
font-family: Arial,sans-serif;
|
|
color: #000;
|
|
line-height: 28px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
border: 0;
|
|
background: 0 0;
|
|
z-index: 3;
|
|
& + .period_picker_show {
|
|
right: 50px;
|
|
}
|
|
&:before {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
left: 1px;
|
|
padding: 0;
|
|
content: '';
|
|
border-radius: 2px;
|
|
background: #ffdb4d;
|
|
box-shadow: 0 0 0 1px rgba(191,153,0,.8);
|
|
}
|
|
span {
|
|
position: relative;
|
|
padding: 0 13px;
|
|
}
|
|
&:focus {
|
|
box-shadow: 0 0 6px #fc0;
|
|
}
|
|
&:active:before {
|
|
background-color: #fc0;
|
|
box-shadow: 0 0 0 1px rgba(159,127,0,.8);
|
|
}
|
|
}
|
|
.period_picker_work{
|
|
vertical-align:top;
|
|
height: 100%;
|
|
position:relative;
|
|
}
|
|
.period_picker_timepicker_box{
|
|
width:87px;
|
|
display:block;
|
|
top:0px;
|
|
bottom:100px;
|
|
left:0px;
|
|
position:absolute;
|
|
& + .period_picker_days + .period_picker_timepicker_box{
|
|
left:auto;
|
|
right:0px;
|
|
}
|
|
}
|
|
&.with_first_timepicker {
|
|
.period_picker_days{
|
|
width:calc(~"100% - 87px");
|
|
margin-left:87px;
|
|
}
|
|
&.with_second_timepicker .period_picker_days{
|
|
width:calc(~"100% - 174px");
|
|
margin-left:87px;
|
|
}
|
|
}
|
|
.xdsoft_navigate{
|
|
background:data-uri('left.svg') no-repeat center center;
|
|
position:absolute;
|
|
top:0px;
|
|
left:-13px;
|
|
bottom:100px;
|
|
width:15px;
|
|
opacity:0.7;
|
|
transition:opacity .3s linear;
|
|
&:hover{
|
|
opacity:1.0;
|
|
}
|
|
&:active{
|
|
margin-top:2px;
|
|
}
|
|
&.xdsoft_navigate_next{
|
|
background-image:data-uri('next.svg');
|
|
left:auto;
|
|
right:-15px;
|
|
}
|
|
}
|
|
&.without_bottom_panel{
|
|
.xdsoft_navigate{
|
|
bottom:0px;
|
|
}
|
|
}
|
|
}
|