app/styles/components/date-range-picker.scss
.busyweb {
&.emberdatetime {
&.c-date-range-picker {
position: relative;
width: 515px;
height: 46px;
margin: 0;
padding: 0;
float: left;
z-index: 1000;
.button {
display: inline-block;
padding: 11px 15px;
border: 1px solid $ept-color-5;
border-radius: 4px;
outline: none;
background: $ept-color-1;
color: $ept-color-6-1;
font: 14px/1 $ept-font-family;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
&:hover {
text-decoration: none;
}
&.blue {
border-color: $ept-color-3;
background: $ept-color-3;
color: $ept-color-1;
}
&.text {
border-color: transparent;
background: transparent;
&:hover {
text-decoration: underline;
}
}
&.select {
position: relative;
padding-right: 50px;
padding-left: 10px;
text-align: left;
&:after {
position: absolute;
top: 16px;
right: 10px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: $ept-color-6-2;
content: '\00a0';
}
}
&.arrow {
& > span {
width: 12px;
height: 12px;
float: left;
transform: rotate(45deg);
border: 2px solid $ept-color-6-2;
cursor: pointer;
}
&.disabled {
border-color: #ddd;
background: #efefef;
cursor: not-allowed;
& > span {
border-color: #ddd;
}
}
&.left {
padding-right: 10px;
padding-left: 15px;
& > span {
border-top-color: transparent;
border-right-color: transparent;
}
}
&.right {
padding-right: 15px;
padding-left: 10px;
& > span {
border-bottom-color: transparent;
border-left-color: transparent;
}
}
}
}
& > .menu {
width: 100%;
height: 100%;
cursor: initial;
& > .select {
margin-right: 58px;
float: left;
}
& > .arrows {
margin-left: -58px;
padding: 0 0 0 10px;
float: left;
& > .arrow {
margin: 0;
&.left {
border-radius: 3px 0 0 3px;
}
&.right {
border-radius: 0 3px 3px 0;
}
}
}
& > .date {
padding: 0 0 0 10px;
float: left;
color: $ept-color-6-2;
font: 14px/46px $ept-font-family;
}
}
& > .list {
display: none;
position: absolute;
top: 55px;
left: 0;
padding: 10px 0;
border: 1px solid $ept-color-5;
border-radius: 4px;
background: $ept-color-1;
z-index: 10000;
&.active {
display: block;
}
& > li {
min-width: 260px;
padding: 10px 20px;
font: 14px/1 $ept-font-family;
cursor: pointer;
&.custom {
&.active {
padding: 10px 20px 20px;
}
}
&.active {
color: $ept-color-3;
}
&.focus {
background-color: aliceblue;
}
&.picker {
display: none;
position: relative;
width: 300px;
padding: 0;
border-top: 1px solid $ept-color-6-3;
cursor: initial;
& > .header {
display: inline-block;
position: relative;
width: 100%;
height: 80px;
padding: 22px 15px 18px;
box-sizing: border-box;
& > span {
width: 10%;
float: left;
color: $ept-color-6-2;
font: 14px/40px $ept-font-family;
text-align: center;
&:first-of-type {
width: 45%;
line-height: 1;
}
&:last-of-type {
width: 45%;
line-height: 1;
}
//&.state {
// & > input {
// }
// &.open {
// & > input {
// }
// }
//}
//&:last-of-type {
// &.open {
// & > input {
// border-color: $ept-color-7;
// }
// }
//}
}
}
& > .body {
display: inline-block;
width: 100%;
height: 325px;
padding: 0;
border-top: 1px solid $ept-color-6-3;
border-bottom: 1px solid $ept-color-6-3;
box-sizing: border-box;
& > .p-date-picker {
width: 100%;
& > .calendar-container {
& > .header-container {
display: none;
}
}
}
}
& > .footer {
display: inline-block;
width: 100%;
height: 70px;
padding: 20px 15px 10px;
box-sizing: border-box;
}
&.active {
display: inline-block;
}
&.disable-custom {
& > .header {
& > span {
display: none;
&.start {
display: inline;
width: 100%;
}
}
}
}
}
}
}
&.right {
float: right;
& > .list {
right: 0;
left: initial;
}
}
&.large {
.button {
font-size: 16px;
&.select {
padding-top: 14px;
padding-bottom: 14px;
&:after {
top: 20px;
}
}
&.arrow {
padding-top: 14px;
padding-bottom: 14px;
& > span {
width: 12px;
height: 12px;
}
}
}
}
}
}
}
@media screen and (max-width: 525px) {
.busyweb {
&.emberdatetime {
&.c-date-range-picker {
display: inline-block;
width: 100%;
& > .menu {
position: relative;
width: 100%;
padding: 0 0 0 84px;
box-sizing: border-box;
& > .button {
position: relative;
width: 100%;
margin: 0 0 0 -84px;
border-radius: 3px 0 0 3px;
background-color: transparent;
color: transparent;
z-index: 2;
}
& > .arrows {
position: relative;
height: 46px;
margin: 0;
padding: 0;
z-index: 3;
& .button {
&.arrow {
width: 42px;
height: 46px;
margin: 0;
float: left;
overflow: hidden;
&.left {
border-left: 0;
border-radius: 0;
}
&.right {
border-left: 0;
}
}
}
}
& > .date {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: $ept-color-1;
font-size: 12px;
z-index: 1;
box-sizing: border-box;
}
}
//& > .menu {
// position: relative;
// & > .button {
// &.select {
// display: block;
// position: relative;
// width: calc(100% - 86px);
// margin: 0 43px;
// //padding-top: 8px !important;
// //padding-bottom: 8px !important;
// float: none;
// border-right: 0;
// border-left: 0;
// border-radius: 0;
// border-color: transparent;
// //border-bottom-color: $ept-color-3;
// background-color: transparent;
// color: transparent; //$ept-color-3;
// //font-size: 14px;
// //text-align: center;
// z-index: 3;
// &:after {
// //top: 18px;
// //right: 0;
// border-top-color: $ept-color-3;
// }
// }
// }
// & > .arrows {
// display: block;
// position: relative;
// width: 100%;
// height: 46px;
// margin: -46px 0 0;
// padding: 0;
// float: none;
// z-index: 2;
// & > .button {
// &.arrow {
// &.left {
// //padding-right: 5px;
// //padding-left: 15px;
// float: left;
// border-color: transparent;
// background-color: transparent;
// & > span {
// border-bottom-color: $ept-color-3;
// border-left-color: $ept-color-3;
// }
// }
// &.right {
// //padding-right: 15px;
// //padding-left: 5px;
// float: right;
// border-color: transparent;
// background-color: transparent;
// & > span {
// border-top-color: $ept-color-3;
// border-right-color: $ept-color-3;
// }
// }
// &.disabled {
// &.left {
// & > span {
// border-bottom-color: $ept-color-6-3;
// border-left-color: $ept-color-6-3;
// }
// }
// &.right {
// & > span {
// border-top-color: $ept-color-6-3;
// border-right-color: $ept-color-6-3;
// }
// }
// }
// }
// }
// }
// & > .date {
// display: block;
// position: relative;
// width: calc(100% - 86px);
// margin: -46px 43px 0;
// padding: 0 10px;
// float: none;
// //background-color: $ept-color-1;
// color: $ept-color-3;
// font-size: 12px;
// //line-height: 34px;
// text-align: left;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
// z-index: 2;
// box-sizing: border-box;
// }
//}
& > .list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
& > li {
&.picker {
display: inline-block;
width: 100%;
& > .footer {
clear: both;
}
}
}
}
}
}
}
}