Nav apraksta

_bootstrap-datetimepicker.scss 8.7KB

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