| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- .ds-date-input-control {
- width: 8rem;
- margin-right: 4px;
- position:relative;
- }
- .ds-date-input-title{
- color:#505d74;
- font-weight:bold;
- padding-bottom:4px;
- }
- .ds-date-input[type="text"]{
- all: initial;
- color: #282e3a;
- width: 100%;
- border: none;
- height: 2.5rem;
- margin: 0;
- outline: 0;
- padding: 0.5rem;
- font-size: 0.875rem;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- box-sizing: border-box;
- -webkit-transition: 0.1s ease-in-out;
- transition: 0.1s ease-in-out;
- font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
- line-height: 1.25rem;
- border-radius: 3px 3px 0 0;
- background-color: #f7f9fa;
- -webkit-transition-property: box-shadow, border;
- transition-property: box-shadow, border;
- border:none;
- border-bottom:solid 2px grey;
- background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzE4Mzc4MiI+PHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWOGgxNnYxM3oiLz48L3N2Zz4=");
- background-repeat: no-repeat;
- background-position: right 8px top 45%;
- background-size: 20px;
- }
- .ds-date-input[type="text"]:focus{
- border-bottom:solid 2px #255fcc;
- }
- .ds-date-input[type="text"]:focus + .ds-datepicker-container,
- .ds-date-input[type="text"]:hover + .ds-datepicker-container{
- display:block;
- }
- .ds-datepicker-container{
- position: absolute;
- width: 315px;
- height: 360px;
- display:none;
- z-index:10;
- }
- .ds-datepicker-container.show{
- display:block
- }
- .ds-datepicker-container.same-size{
- width: 100%;
- height:auto;
- padding-top: 114%;
- }
- .ds-datepicker-container.right{
- right:0px;
- }
- .ds-datepicker {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- background:white;
- display:grid;
- grid-template-columns: repeat( 7 , 1fr);
- grid-template-rows: repeat( 8 , 1fr);
- column-gap: 4px;
- row-gap: 4px;
- box-shadow: 0 2px 8px 0 rgba(0,0,0,0.14);
- padding:8px;
- z-index:10;
- }
- .ds-datepicker > div{
- text-align:center;
- color:#505d74;
- border-radius:3px;
- display:flex;
- justify-content: center;
- align-items: center;
- }
- .ds-datepicker-prev:before,
- .ds-datepicker-next:before{
- content:"";
- width:100%;height:100%;
- background-repeat:no-repeat;
- background-position: center;
- background-size:35px;
- }
- .ds-datepicker-prev:before{
- background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTE0LjcxIDYuNzFhLjk5Ni45OTYgMCAwMC0xLjQxIDBMOC43MSAxMS4zYS45OTYuOTk2IDAgMDAwIDEuNDFsNC41OSA0LjU5YS45OTYuOTk2IDAgMTAxLjQxLTEuNDFMMTAuODMgMTJsMy44OC0zLjg4Yy4zOS0uMzkuMzgtMS4wMyAwLTEuNDF6IiBmaWxsPSIjMTgzNzgyIi8+PC9zdmc+");
- }
- .ds-datepicker-next:before{
- background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTkuMjkgNi43MWEuOTk2Ljk5NiAwIDAwMCAxLjQxTDEzLjE3IDEybC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxMDEuNDEgMS40MWw0LjU5LTQuNTlhLjk5Ni45OTYgMCAwMDAtMS40MUwxMC43IDYuN2MtLjM4LS4zOC0xLjAyLS4zOC0xLjQxLjAxeiIgZmlsbD0iIzE4Mzc4MiIvPjwvc3ZnPg==");
- }
- .ds-datepicker > div:not(.ds-datepicker-weekday):not(.ds-disable){
- cursor:pointer;
- }
- .ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):hover{
- background: #f0f4f6;
- color:#505d74;
- }
- .ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):focus{
- border: solid 2px #255fcc;
- border-radius:0px;
- }
- .ds-datepicker > div.ds-selected:not(.ds-disable):not(.ds-datepicker-weekday){
- background: #063b9e;
- color: #fff;
- font-weight:bold;
- }
- .ds-datepicker-current {
- grid-column: 2 / 7;
- font-weight:bold;
- }
- div.ds-datepicker-weekday {
- grid-column: 1 / 8;
- display: grid;
- grid-template-columns: repeat(7 , 1fr);
- cursor:initial;
- }
- .ds-datepicker-weekday > div{
- text-align:center;
- color: #c1c7d3;
- }
- .ds-datepicker > .ds-today{
- border: solid 2px #063b9e;
- font-weight:bold;
- color:#063b9e;
- }
- .ds-datepicker .ds-disable,
- .ds-datepicker .ds-out{
- color: #c1c7d3;
- }
- .ds-datepicker > .ds-disable{
- cursor:not-allowed;
- }
|