Nav apraksta

_bootstrap-datetimepicker.less 8.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. /*!
  2. * Datetimepicker for Bootstrap 3
  3. * version : 4.17.47
  4. * https://github.com/Eonasdan/bootstrap-datetimepicker/
  5. */
  6. @bs-datetimepicker-timepicker-font-size: 1.2em;
  7. @bs-datetimepicker-active-bg: @btn-primary-bg;
  8. @bs-datetimepicker-active-color: @btn-primary-color;
  9. @bs-datetimepicker-border-radius: @border-radius-base;
  10. @bs-datetimepicker-btn-hover-bg: @gray-lighter;
  11. @bs-datetimepicker-disabled-color: @gray-light;
  12. @bs-datetimepicker-alternate-color: @gray-light;
  13. @bs-datetimepicker-secondary-border-color: #ccc;
  14. @bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
  15. @bs-datetimepicker-primary-border-color: white;
  16. @bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  17. .bootstrap-datetimepicker-widget {
  18. list-style: none;
  19. &.dropdown-menu {
  20. display: block;
  21. margin: 2px 0;
  22. padding: 4px;
  23. width: 19em;
  24. &.timepicker-sbs {
  25. @media (min-width: @screen-sm-min) {
  26. width: 38em;
  27. }
  28. @media (min-width: @screen-md-min) {
  29. width: 38em;
  30. }
  31. @media (min-width: @screen-lg-min) {
  32. width: 38em;
  33. }
  34. }
  35. &:before, &:after {
  36. content: '';
  37. display: inline-block;
  38. position: absolute;
  39. }
  40. &.bottom {
  41. &:before {
  42. border-left: 7px solid transparent;
  43. border-right: 7px solid transparent;
  44. border-bottom: 7px solid @bs-datetimepicker-secondary-border-color;
  45. border-bottom-color: @bs-datetimepicker-secondary-border-color-rgba;
  46. top: -7px;
  47. left: 7px;
  48. }
  49. &:after {
  50. border-left: 6px solid transparent;
  51. border-right: 6px solid transparent;
  52. border-bottom: 6px solid @bs-datetimepicker-primary-border-color;
  53. top: -6px;
  54. left: 8px;
  55. }
  56. }
  57. &.top {
  58. &:before {
  59. border-left: 7px solid transparent;
  60. border-right: 7px solid transparent;
  61. border-top: 7px solid @bs-datetimepicker-secondary-border-color;
  62. border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
  63. bottom: -7px;
  64. left: 6px;
  65. }
  66. &:after {
  67. border-left: 6px solid transparent;
  68. border-right: 6px solid transparent;
  69. border-top: 6px solid @bs-datetimepicker-primary-border-color;
  70. bottom: -6px;
  71. left: 7px;
  72. }
  73. }
  74. &.pull-right {
  75. &:before {
  76. left: auto;
  77. right: 6px;
  78. }
  79. &:after {
  80. left: auto;
  81. right: 7px;
  82. }
  83. }
  84. }
  85. .list-unstyled {
  86. margin: 0;
  87. }
  88. a[data-action] {
  89. padding: 6px 0;
  90. }
  91. a[data-action]:active {
  92. box-shadow: none;
  93. }
  94. .timepicker-hour, .timepicker-minute, .timepicker-second {
  95. width: 54px;
  96. font-weight: bold;
  97. font-size: @bs-datetimepicker-timepicker-font-size;
  98. margin: 0;
  99. }
  100. button[data-action] {
  101. padding: 6px;
  102. }
  103. .btn[data-action="incrementHours"]::after {
  104. .sr-only();
  105. content: "Increment Hours";
  106. }
  107. .btn[data-action="incrementMinutes"]::after {
  108. .sr-only();
  109. content: "Increment Minutes";
  110. }
  111. .btn[data-action="decrementHours"]::after {
  112. .sr-only();
  113. content: "Decrement Hours";
  114. }
  115. .btn[data-action="decrementMinutes"]::after {
  116. .sr-only();
  117. content: "Decrement Minutes";
  118. }
  119. .btn[data-action="showHours"]::after {
  120. .sr-only();
  121. content: "Show Hours";
  122. }
  123. .btn[data-action="showMinutes"]::after {
  124. .sr-only();
  125. content: "Show Minutes";
  126. }
  127. .btn[data-action="togglePeriod"]::after {
  128. .sr-only();
  129. content: "Toggle AM/PM";
  130. }
  131. .btn[data-action="clear"]::after {
  132. .sr-only();
  133. content: "Clear the picker";
  134. }
  135. .btn[data-action="today"]::after {
  136. .sr-only();
  137. content: "Set the date to today";
  138. }
  139. .picker-switch {
  140. text-align: center;
  141. &::after {
  142. .sr-only();
  143. content: "Toggle Date and Time Screens";
  144. }
  145. td {
  146. padding: 0;
  147. margin: 0;
  148. height: auto;
  149. width: auto;
  150. line-height: inherit;
  151. span {
  152. line-height: 2.5;
  153. height: 2.5em;
  154. width: 100%;
  155. }
  156. }
  157. }
  158. table {
  159. width: 100%;
  160. margin: 0;
  161. & td,
  162. & th {
  163. text-align: center;
  164. border-radius: @bs-datetimepicker-border-radius;
  165. }
  166. & th {
  167. height: 20px;
  168. line-height: 20px;
  169. width: 20px;
  170. &.picker-switch {
  171. width: 145px;
  172. }
  173. &.disabled,
  174. &.disabled:hover {
  175. background: none;
  176. color: @bs-datetimepicker-disabled-color;
  177. cursor: not-allowed;
  178. }
  179. &.prev::after {
  180. .sr-only();
  181. content: "Previous Month";
  182. }
  183. &.next::after {
  184. .sr-only();
  185. content: "Next Month";
  186. }
  187. }
  188. & thead tr:first-child th {
  189. cursor: pointer;
  190. &:hover {
  191. background: @bs-datetimepicker-btn-hover-bg;
  192. }
  193. }
  194. & td {
  195. height: 54px;
  196. line-height: 54px;
  197. width: 54px;
  198. &.cw {
  199. font-size: .8em;
  200. height: 20px;
  201. line-height: 20px;
  202. color: @bs-datetimepicker-alternate-color;
  203. }
  204. &.day {
  205. height: 20px;
  206. line-height: 20px;
  207. width: 20px;
  208. }
  209. &.day:hover,
  210. &.hour:hover,
  211. &.minute:hover,
  212. &.second:hover {
  213. background: @bs-datetimepicker-btn-hover-bg;
  214. cursor: pointer;
  215. }
  216. &.old,
  217. &.new {
  218. color: @bs-datetimepicker-alternate-color;
  219. }
  220. &.today {
  221. position: relative;
  222. &:before {
  223. content: '';
  224. display: inline-block;
  225. border: solid transparent;
  226. border-width: 0 0 7px 7px;
  227. border-bottom-color: @bs-datetimepicker-active-bg;
  228. border-top-color: @bs-datetimepicker-secondary-border-color-rgba;
  229. position: absolute;
  230. bottom: 4px;
  231. right: 4px;
  232. }
  233. }
  234. &.active,
  235. &.active:hover {
  236. background-color: @bs-datetimepicker-active-bg;
  237. color: @bs-datetimepicker-active-color;
  238. text-shadow: @bs-datetimepicker-text-shadow;
  239. }
  240. &.active.today:before {
  241. border-bottom-color: #fff;
  242. }
  243. &.disabled,
  244. &.disabled:hover {
  245. background: none;
  246. color: @bs-datetimepicker-disabled-color;
  247. cursor: not-allowed;
  248. }
  249. span {
  250. display: inline-block;
  251. width: 54px;
  252. height: 54px;
  253. line-height: 54px;
  254. margin: 2px 1.5px;
  255. cursor: pointer;
  256. border-radius: @bs-datetimepicker-border-radius;
  257. &:hover {
  258. background: @bs-datetimepicker-btn-hover-bg;
  259. }
  260. &.active {
  261. background-color: @bs-datetimepicker-active-bg;
  262. color: @bs-datetimepicker-active-color;
  263. text-shadow: @bs-datetimepicker-text-shadow;
  264. }
  265. &.old {
  266. color: @bs-datetimepicker-alternate-color;
  267. }
  268. &.disabled,
  269. &.disabled:hover {
  270. background: none;
  271. color: @bs-datetimepicker-disabled-color;
  272. cursor: not-allowed;
  273. }
  274. }
  275. }
  276. }
  277. &.usetwentyfour {
  278. td.hour {
  279. height: 27px;
  280. line-height: 27px;
  281. }
  282. }
  283. &.wider {
  284. width: 21em;
  285. }
  286. & .datepicker-decades .decade {
  287. line-height: 1.8em !important;
  288. }
  289. }
  290. .input-group.date {
  291. & .input-group-addon {
  292. cursor: pointer;
  293. }
  294. }