test1_input.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. .ds-date-input-control {
  2. width: 8rem;
  3. margin-right: 4px;
  4. position:relative;
  5. }
  6. .ds-date-input-title{
  7. color:#505d74;
  8. font-weight:bold;
  9. padding-bottom:4px;
  10. }
  11. .ds-date-input[type="text"]{
  12. all: initial;
  13. color: #282e3a;
  14. width: 100%;
  15. border: none;
  16. height: 2.5rem;
  17. margin: 0;
  18. outline: 0;
  19. padding: 0.5rem;
  20. font-size: 0.875rem;
  21. -webkit-appearance: none;
  22. -moz-appearance: none;
  23. appearance: none;
  24. box-sizing: border-box;
  25. -webkit-transition: 0.1s ease-in-out;
  26. transition: 0.1s ease-in-out;
  27. font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  28. line-height: 1.25rem;
  29. border-radius: 3px 3px 0 0;
  30. background-color: #f7f9fa;
  31. -webkit-transition-property: box-shadow, border;
  32. transition-property: box-shadow, border;
  33. border:none;
  34. border-bottom:solid 2px grey;
  35. background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzE4Mzc4MiI+PHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWOGgxNnYxM3oiLz48L3N2Zz4=");
  36. background-repeat: no-repeat;
  37. background-position: right 8px top 45%;
  38. background-size: 20px;
  39. }
  40. .ds-date-input[type="text"]:focus{
  41. border-bottom:solid 2px #255fcc;
  42. }
  43. .ds-date-input[type="text"]:focus + .ds-datepicker-container,
  44. .ds-date-input[type="text"]:hover + .ds-datepicker-container{
  45. display:block;
  46. }
  47. .ds-datepicker-container{
  48. position: absolute;
  49. width: 315px;
  50. height: 360px;
  51. display:none;
  52. z-index:10;
  53. }
  54. .ds-datepicker-container.show{
  55. display:block
  56. }
  57. .ds-datepicker-container.same-size{
  58. width: 100%;
  59. height:auto;
  60. padding-top: 114%;
  61. }
  62. .ds-datepicker-container.right{
  63. right:0px;
  64. }
  65. .ds-datepicker {
  66. position: absolute;
  67. top: 0;
  68. left: 0;
  69. bottom: 0;
  70. right: 0;
  71. background:white;
  72. display:grid;
  73. grid-template-columns: repeat( 7 , 1fr);
  74. grid-template-rows: repeat( 8 , 1fr);
  75. column-gap: 4px;
  76. row-gap: 4px;
  77. box-shadow: 0 2px 8px 0 rgba(0,0,0,0.14);
  78. padding:8px;
  79. z-index:10;
  80. }
  81. .ds-datepicker > div{
  82. text-align:center;
  83. color:#505d74;
  84. border-radius:3px;
  85. display:flex;
  86. justify-content: center;
  87. align-items: center;
  88. }
  89. .ds-datepicker-prev:before,
  90. .ds-datepicker-next:before{
  91. content:"";
  92. width:100%;height:100%;
  93. background-repeat:no-repeat;
  94. background-position: center;
  95. background-size:35px;
  96. }
  97. .ds-datepicker-prev:before{
  98. background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTE0LjcxIDYuNzFhLjk5Ni45OTYgMCAwMC0xLjQxIDBMOC43MSAxMS4zYS45OTYuOTk2IDAgMDAwIDEuNDFsNC41OSA0LjU5YS45OTYuOTk2IDAgMTAxLjQxLTEuNDFMMTAuODMgMTJsMy44OC0zLjg4Yy4zOS0uMzkuMzgtMS4wMyAwLTEuNDF6IiBmaWxsPSIjMTgzNzgyIi8+PC9zdmc+");
  99. }
  100. .ds-datepicker-next:before{
  101. background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTkuMjkgNi43MWEuOTk2Ljk5NiAwIDAwMCAxLjQxTDEzLjE3IDEybC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxMDEuNDEgMS40MWw0LjU5LTQuNTlhLjk5Ni45OTYgMCAwMDAtMS40MUwxMC43IDYuN2MtLjM4LS4zOC0xLjAyLS4zOC0xLjQxLjAxeiIgZmlsbD0iIzE4Mzc4MiIvPjwvc3ZnPg==");
  102. }
  103. .ds-datepicker > div:not(.ds-datepicker-weekday):not(.ds-disable){
  104. cursor:pointer;
  105. }
  106. .ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):hover{
  107. background: #f0f4f6;
  108. color:#505d74;
  109. }
  110. .ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):focus{
  111. border: solid 2px #255fcc;
  112. border-radius:0px;
  113. }
  114. .ds-datepicker > div.ds-selected:not(.ds-disable):not(.ds-datepicker-weekday){
  115. background: #063b9e;
  116. color: #fff;
  117. font-weight:bold;
  118. }
  119. .ds-datepicker-current {
  120. grid-column: 2 / 7;
  121. font-weight:bold;
  122. }
  123. div.ds-datepicker-weekday {
  124. grid-column: 1 / 8;
  125. display: grid;
  126. grid-template-columns: repeat(7 , 1fr);
  127. cursor:initial;
  128. }
  129. .ds-datepicker-weekday > div{
  130. text-align:center;
  131. color: #c1c7d3;
  132. }
  133. .ds-datepicker > .ds-today{
  134. border: solid 2px #063b9e;
  135. font-weight:bold;
  136. color:#063b9e;
  137. }
  138. .ds-datepicker .ds-disable,
  139. .ds-datepicker .ds-out{
  140. color: #c1c7d3;
  141. }
  142. .ds-datepicker > .ds-disable{
  143. cursor:not-allowed;
  144. }