You are here

datepicker.css in Open Social 8.5

input[type='text'].form-date {
  min-width: 240px;
  background-repeat: no-repeat;
  background-size: auto 18px;
  background-position: 96% 50%;
  padding-right: 36px;
  background-image: url(../images/icons/icon-today.svg);
}

input[type='text'].form-time {
  min-width: 160px;
  background-repeat: no-repeat;
  background-size: auto 18px;
  background-position: 96% 50%;
  padding-right: 36px;
  background-image: url(../images/icons/icon-schedule.svg);
}

.ui-datepicker {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  float: left;
  min-width: 160px;
  margin: 4px 0;
  text-align: left;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  font-size: 0.875rem;
  padding: 4px;
  z-index: 1000 !important;
}

.ui-datepicker-header:before, .ui-datepicker-header:after {
  content: " ";
  display: table;
}

.ui-datepicker-header:after {
  clear: both;
}

.ui-datepicker-title {
  text-align: center;
  width: 145px;
  height: 30px;
  border-radius: 4px;
  border: none;
  padding: 5px;
  margin: 0 auto;
  font-weight: 500;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: #e6e6e6;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  fill: #4d4d4d;
}

.ui-datepicker-next {
  float: right;
}

.ui-datepicker-prev:before {
  background-image: url(../images/icons/icon-navigate_before.svg);
}

.ui-datepicker-next:before {
  background-image: url(../images/icons/icon-navigate_next.svg);
}

.ui-icon {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ui-datepicker-calendar > thead > tr > th {
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
  padding: 0;
  font-weight: 500;
}

.ui-datepicker-calendar > tbody > tr > td {
  border: 0;
  padding: 0;
}

.ui-datepicker-calendar > tbody > tr > td .ui-state-default {
  display: block;
  border-radius: 4px;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: 300;
}

.ui-datepicker-calendar > tbody > tr > td .ui-state-default:hover {
  background: #f3f3f3;
  cursor: pointer;
}

.ui-datepicker-calendar > tbody > tr > td .ui-state-highlight {
  background-color: #e6e6e6;
}

.ui-datepicker-calendar > tbody > tr > td .ui-state-highlight:hover {
  color: white;
  background-color: #777777;
}

File

themes/socialbase/assets/css/datepicker.css
View source
  1. input[type='text'].form-date {
  2. min-width: 240px;
  3. background-repeat: no-repeat;
  4. background-size: auto 18px;
  5. background-position: 96% 50%;
  6. padding-right: 36px;
  7. background-image: url(../images/icons/icon-today.svg);
  8. }
  9. input[type='text'].form-time {
  10. min-width: 160px;
  11. background-repeat: no-repeat;
  12. background-size: auto 18px;
  13. background-position: 96% 50%;
  14. padding-right: 36px;
  15. background-image: url(../images/icons/icon-schedule.svg);
  16. }
  17. .ui-datepicker {
  18. position: absolute;
  19. display: none;
  20. top: 100%;
  21. left: 0;
  22. float: left;
  23. min-width: 160px;
  24. margin: 4px 0;
  25. text-align: left;
  26. -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  27. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  28. background-clip: padding-box;
  29. font-size: 0.875rem;
  30. padding: 4px;
  31. z-index: 1000 !important;
  32. }
  33. .ui-datepicker-header:before, .ui-datepicker-header:after {
  34. content: " ";
  35. display: table;
  36. }
  37. .ui-datepicker-header:after {
  38. clear: both;
  39. }
  40. .ui-datepicker-title {
  41. text-align: center;
  42. width: 145px;
  43. height: 30px;
  44. border-radius: 4px;
  45. border: none;
  46. padding: 5px;
  47. margin: 0 auto;
  48. font-weight: 500;
  49. }
  50. .ui-datepicker-prev,
  51. .ui-datepicker-next {
  52. float: left;
  53. width: 30px;
  54. height: 30px;
  55. border-radius: 4px;
  56. text-align: center;
  57. cursor: pointer;
  58. border-radius: 4px;
  59. }
  60. .ui-datepicker-prev:hover,
  61. .ui-datepicker-next:hover {
  62. background: #e6e6e6;
  63. }
  64. .ui-datepicker-prev:before,
  65. .ui-datepicker-next:before {
  66. position: relative;
  67. top: 5px;
  68. width: 20px;
  69. height: 20px;
  70. content: '';
  71. display: inline-block;
  72. background-repeat: no-repeat;
  73. background-size: auto 100%;
  74. background-position: center;
  75. fill: #4d4d4d;
  76. }
  77. .ui-datepicker-next {
  78. float: right;
  79. }
  80. .ui-datepicker-prev:before {
  81. background-image: url(../images/icons/icon-navigate_before.svg);
  82. }
  83. .ui-datepicker-next:before {
  84. background-image: url(../images/icons/icon-navigate_next.svg);
  85. }
  86. .ui-icon {
  87. position: absolute;
  88. width: 1px;
  89. height: 1px;
  90. margin: -1px;
  91. padding: 0;
  92. overflow: hidden;
  93. clip: rect(0, 0, 0, 0);
  94. border: 0;
  95. }
  96. .ui-datepicker-calendar > thead > tr > th {
  97. text-align: center;
  98. width: 30px;
  99. height: 30px;
  100. border-radius: 4px;
  101. border: none;
  102. padding: 0;
  103. font-weight: 500;
  104. }
  105. .ui-datepicker-calendar > tbody > tr > td {
  106. border: 0;
  107. padding: 0;
  108. }
  109. .ui-datepicker-calendar > tbody > tr > td .ui-state-default {
  110. display: block;
  111. border-radius: 4px;
  112. text-align: center;
  113. width: 30px;
  114. height: 30px;
  115. line-height: 30px;
  116. font-weight: 300;
  117. }
  118. .ui-datepicker-calendar > tbody > tr > td .ui-state-default:hover {
  119. background: #f3f3f3;
  120. cursor: pointer;
  121. }
  122. .ui-datepicker-calendar > tbody > tr > td .ui-state-highlight {
  123. background-color: #e6e6e6;
  124. }
  125. .ui-datepicker-calendar > tbody > tr > td .ui-state-highlight:hover {
  126. color: white;
  127. background-color: #777777;
  128. }