re-com.css 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353
  1. /*----------------------------------------------------------------------------------------
  2. re-com.css
  3. This file is required for styling the re-com UI library components.
  4. To use the library, bootstrap.css is also required, which is best obtained from a CDN.
  5. So, place the following lines in the <head> section of the html file:
  6. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
  7. <link rel="stylesheet" href="resources/css/re-com.css">
  8. The following is required for constraining an application to the
  9. height of the browser window and setting some global defaults like font...
  10. ----------------------------------------------------------------------------------------*/
  11. /* The following style addresses: http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */
  12. * {
  13. min-height: 0px;
  14. min-width: 0px;
  15. }
  16. html, body {
  17. font-family: Segoe UI, Roboto, sans-serif;
  18. font-size: 14px;
  19. font-weight: 400;
  20. color: rgba(68, 68, 68, 1.0);
  21. letter-spacing: 0.002em;
  22. height: 100%;
  23. margin: 0px;
  24. padding: 0px;
  25. }
  26. /*----------------------------------------------------------------------------------------
  27. Bootstrap overrides after upgrading to 3.3.5
  28. ----------------------------------------------------------------------------------------*/
  29. .popover, .tooltip {
  30. font-family: Segoe UI, Roboto, sans-serif;
  31. }
  32. .popover-title {
  33. font-weight: normal;
  34. }
  35. .form-control-feedback {
  36. pointer-events: initial;
  37. }
  38. /*----------------------------------------------------------------------------------------
  39. The section immediately below is required for the drop-down components and comes from
  40. the bootstrap-chosen library:
  41. https://github.com/alxlit/bootstrap-chosen
  42. License: MIT.
  43. That library provides it's css as a .less file.
  44. To compile the less file into the css below, use the following steps from
  45. a command prompt (you'll need git and the lessc compiler (http://lesscss.org):
  46. git clone https://github.com/alxlit/bootstrap-chosen
  47. cd bootstrap-chosen
  48. git clone --depth=1 https://github.com/twbs/bootstrap
  49. Now edit bootstrap-chosen.less and add the following two lines before the first @import:
  50. @import "bootstrap/less/variables.less";
  51. @import "bootstrap/less/mixins.less";
  52. lessc bootstrap-chosen.less > bootstrap-chosen.css
  53. Finally, replace the section below with the contents of bootstrap-chosen.css.
  54. START OF BOOTSTRAP-CHOSEN SECTION...
  55. ----------------------------------------------------------------------------------------*/
  56. .chosen-select {
  57. width: 100%;
  58. }
  59. .chosen-select-deselect {
  60. width: 100%;
  61. }
  62. .chosen-container {
  63. display: inline-block;
  64. font-size: 14px;
  65. position: relative;
  66. vertical-align: middle;
  67. }
  68. .chosen-container .chosen-drop {
  69. background: #ffffff;
  70. border: 1px solid #cccccc;
  71. border-bottom-right-radius: 4px;
  72. border-bottom-left-radius: 4px;
  73. -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
  74. box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
  75. margin-top: -1px;
  76. position: absolute;
  77. top: 100%;
  78. left: -9000px;
  79. z-index: 1060;
  80. }
  81. .chosen-container.chosen-with-drop .chosen-drop {
  82. left: 0;
  83. right: 0;
  84. }
  85. .chosen-container .chosen-results {
  86. color: #555555;
  87. margin: 0 4px 4px 0;
  88. max-height: 240px;
  89. padding: 0 0 0 4px;
  90. position: relative;
  91. overflow-x: hidden;
  92. overflow-y: auto;
  93. -webkit-overflow-scrolling: touch;
  94. }
  95. .chosen-container .chosen-results li {
  96. display: none;
  97. line-height: 1.42857143;
  98. list-style: none;
  99. margin: 0;
  100. padding: 5px 6px;
  101. }
  102. .chosen-container .chosen-results li em {
  103. background: #feffde;
  104. font-style: normal;
  105. }
  106. .chosen-container .chosen-results li.group-result {
  107. display: list-item;
  108. cursor: default;
  109. color: #999;
  110. font-weight: bold;
  111. }
  112. .chosen-container .chosen-results li.group-option {
  113. padding-left: 15px;
  114. }
  115. .chosen-container .chosen-results li.active-result {
  116. cursor: pointer;
  117. display: list-item;
  118. }
  119. .chosen-container .chosen-results li.highlighted {
  120. background-color: #428bca;
  121. background-image: none;
  122. color: white;
  123. }
  124. .chosen-container .chosen-results li.highlighted em {
  125. background: transparent;
  126. }
  127. .chosen-container .chosen-results li.disabled-result {
  128. display: list-item;
  129. color: #777777;
  130. }
  131. .chosen-container .chosen-results .no-results {
  132. background: #eeeeee;
  133. display: list-item;
  134. }
  135. .chosen-container .chosen-results .error {
  136. text-align: center;
  137. background: #f2dede;
  138. display: list-item;
  139. }
  140. .chosen-container .chosen-results .loading {
  141. text-align: center;
  142. color: #ccc;
  143. display: list-item;
  144. }
  145. .chosen-container .chosen-results-scroll {
  146. background: white;
  147. margin: 0 4px;
  148. position: absolute;
  149. text-align: center;
  150. width: 321px;
  151. z-index: 1;
  152. }
  153. .chosen-container .chosen-results-scroll span {
  154. display: inline-block;
  155. height: 1.42857143;
  156. text-indent: -5000px;
  157. width: 9px;
  158. }
  159. .chosen-container .chosen-results-scroll-down {
  160. bottom: 0;
  161. }
  162. .chosen-container .chosen-results-scroll-down span {
  163. background: url("chosen-sprite.png") no-repeat -4px -3px;
  164. }
  165. .chosen-container .chosen-results-scroll-up span {
  166. background: url("chosen-sprite.png") no-repeat -22px -3px;
  167. }
  168. .chosen-container-single .chosen-single {
  169. background-color: #ffffff;
  170. -webkit-background-clip: padding-box;
  171. -moz-background-clip: padding;
  172. background-clip: padding-box;
  173. border: 1px solid #cccccc;
  174. border-top-right-radius: 4px;
  175. border-top-left-radius: 4px;
  176. border-bottom-right-radius: 4px;
  177. border-bottom-left-radius: 4px;
  178. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  179. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  180. color: #555555;
  181. display: block;
  182. height: 34px;
  183. overflow: hidden;
  184. line-height: 34px;
  185. padding: 0 0 0 8px;
  186. position: relative;
  187. text-decoration: none;
  188. white-space: nowrap;
  189. }
  190. .chosen-container-single .chosen-single span {
  191. display: block;
  192. margin-right: 26px;
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. white-space: nowrap;
  196. }
  197. .chosen-container-single .chosen-single abbr {
  198. background: url("chosen-sprite.png") right top no-repeat;
  199. display: block;
  200. font-size: 1px;
  201. height: 10px;
  202. position: absolute;
  203. right: 26px;
  204. top: 12px;
  205. width: 12px;
  206. }
  207. .chosen-container-single .chosen-single abbr:hover {
  208. background-position: right -11px;
  209. }
  210. .chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover {
  211. background-position: right 2px;
  212. }
  213. .chosen-container-single .chosen-single div {
  214. display: block;
  215. height: 100%;
  216. position: absolute;
  217. top: 0;
  218. right: 0;
  219. width: 18px;
  220. }
  221. .chosen-container-single .chosen-single div b {
  222. background: url("chosen-sprite.png") no-repeat 0 7px;
  223. display: block;
  224. height: 100%;
  225. width: 100%;
  226. }
  227. .chosen-container-single .chosen-default {
  228. color: #777777;
  229. }
  230. .chosen-container-single .chosen-search {
  231. margin: 0;
  232. padding: 3px 4px;
  233. position: relative;
  234. white-space: nowrap;
  235. z-index: 1000;
  236. }
  237. .chosen-container-single .chosen-search input[type="text"] {
  238. background: url("chosen-sprite.png") no-repeat 100% -20px, #ffffff;
  239. border: 1px solid #cccccc;
  240. border-top-right-radius: 4px;
  241. border-top-left-radius: 4px;
  242. border-bottom-right-radius: 4px;
  243. border-bottom-left-radius: 4px;
  244. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  245. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  246. margin: 1px 0;
  247. padding: 4px 20px 4px 4px;
  248. width: 100%;
  249. }
  250. .chosen-container-single .chosen-drop {
  251. margin-top: -1px;
  252. border-bottom-right-radius: 4px;
  253. border-bottom-left-radius: 4px;
  254. -webkit-background-clip: padding-box;
  255. -moz-background-clip: padding;
  256. background-clip: padding-box;
  257. }
  258. .chosen-container-single-nosearch .chosen-search input {
  259. position: absolute;
  260. left: -9000px;
  261. }
  262. .chosen-container-multi .chosen-choices {
  263. background-color: #ffffff;
  264. border: 1px solid #cccccc;
  265. border-top-right-radius: 4px;
  266. border-top-left-radius: 4px;
  267. border-bottom-right-radius: 4px;
  268. border-bottom-left-radius: 4px;
  269. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  270. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  271. cursor: text;
  272. height: auto !important;
  273. height: 1%;
  274. margin: 0;
  275. overflow: hidden;
  276. padding: 0;
  277. position: relative;
  278. }
  279. .chosen-container-multi .chosen-choices li {
  280. float: left;
  281. list-style: none;
  282. }
  283. .chosen-container-multi .chosen-choices .search-field {
  284. margin: 0;
  285. padding: 0;
  286. white-space: nowrap;
  287. }
  288. .chosen-container-multi .chosen-choices .search-field input[type="text"] {
  289. background: transparent !important;
  290. border: 0 !important;
  291. -webkit-box-shadow: none;
  292. box-shadow: none;
  293. color: #555555;
  294. height: 32px;
  295. margin: 0;
  296. padding: 4px;
  297. outline: 0;
  298. }
  299. .chosen-container-multi .chosen-choices .search-field .default {
  300. color: #999;
  301. }
  302. .chosen-container-multi .chosen-choices .search-choice {
  303. -webkit-background-clip: padding-box;
  304. -moz-background-clip: padding;
  305. background-clip: padding-box;
  306. background-color: #eeeeee;
  307. border: 1px solid #cccccc;
  308. border-top-right-radius: 4px;
  309. border-top-left-radius: 4px;
  310. border-bottom-right-radius: 4px;
  311. border-bottom-left-radius: 4px;
  312. background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
  313. background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
  314. background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
  315. background-repeat: repeat-x;
  316. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
  317. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  318. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  319. color: #333333;
  320. cursor: default;
  321. line-height: 13px;
  322. margin: 6px 0 3px 5px;
  323. padding: 3px 20px 3px 5px;
  324. position: relative;
  325. }
  326. .chosen-container-multi .chosen-choices .search-choice .search-choice-close {
  327. background: url("chosen-sprite.png") right top no-repeat;
  328. display: block;
  329. font-size: 1px;
  330. height: 10px;
  331. position: absolute;
  332. right: 4px;
  333. top: 5px;
  334. width: 12px;
  335. cursor: pointer;
  336. }
  337. .chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover {
  338. background-position: right -11px;
  339. }
  340. .chosen-container-multi .chosen-choices .search-choice-focus {
  341. background: #d4d4d4;
  342. }
  343. .chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close {
  344. background-position: right -11px;
  345. }
  346. .chosen-container-multi .chosen-results {
  347. margin: 0 0 0 0;
  348. padding: 0;
  349. }
  350. .chosen-container-multi .chosen-drop .result-selected {
  351. display: none;
  352. }
  353. .chosen-container-active .chosen-single {
  354. border: 1px solid #66afe9;
  355. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  356. box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  357. -webkit-transition: border linear .2s, box-shadow linear .2s;
  358. -o-transition: border linear .2s, box-shadow linear .2s;
  359. transition: border linear .2s, box-shadow linear .2s;
  360. }
  361. .chosen-container-active.chosen-with-drop .chosen-single {
  362. background-color: #ffffff;
  363. border: 1px solid #66afe9;
  364. border-bottom-right-radius: 0;
  365. border-bottom-left-radius: 0;
  366. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  367. box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  368. -webkit-transition: border linear .2s, box-shadow linear .2s;
  369. -o-transition: border linear .2s, box-shadow linear .2s;
  370. transition: border linear .2s, box-shadow linear .2s;
  371. }
  372. .chosen-container-active.chosen-with-drop .chosen-single div {
  373. background: transparent;
  374. border-left: none;
  375. }
  376. .chosen-container-active.chosen-with-drop .chosen-single div b {
  377. background-position: -18px 7px;
  378. }
  379. .chosen-container-active .chosen-choices {
  380. border: 1px solid #66afe9;
  381. border-bottom-right-radius: 0;
  382. border-bottom-left-radius: 0;
  383. -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  384. box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
  385. -webkit-transition: border linear .2s, box-shadow linear .2s;
  386. -o-transition: border linear .2s, box-shadow linear .2s;
  387. transition: border linear .2s, box-shadow linear .2s;
  388. }
  389. .chosen-container-active .chosen-choices .search-field input[type="text"] {
  390. color: #111 !important;
  391. }
  392. .chosen-container-active.chosen-with-drop .chosen-choices {
  393. border-bottom-right-radius: 0;
  394. border-bottom-left-radius: 0;
  395. }
  396. .chosen-disabled {
  397. cursor: default;
  398. opacity: 0.5 !important;
  399. }
  400. .chosen-disabled .chosen-single {
  401. cursor: default;
  402. }
  403. .chosen-disabled .chosen-choices .search-choice .search-choice-close {
  404. cursor: default;
  405. }
  406. .chosen-rtl {
  407. text-align: right;
  408. }
  409. .chosen-rtl .chosen-single {
  410. padding: 0 8px 0 0;
  411. overflow: visible;
  412. }
  413. .chosen-rtl .chosen-single span {
  414. margin-left: 26px;
  415. margin-right: 0;
  416. direction: rtl;
  417. }
  418. .chosen-rtl .chosen-single div {
  419. left: 7px;
  420. right: auto;
  421. }
  422. .chosen-rtl .chosen-single abbr {
  423. left: 26px;
  424. right: auto;
  425. }
  426. .chosen-rtl .chosen-choices .search-field input[type="text"] {
  427. direction: rtl;
  428. }
  429. .chosen-rtl .chosen-choices li {
  430. float: right;
  431. }
  432. .chosen-rtl .chosen-choices .search-choice {
  433. margin: 6px 5px 3px 0;
  434. padding: 3px 5px 3px 19px;
  435. }
  436. .chosen-rtl .chosen-choices .search-choice .search-choice-close {
  437. background-position: right top;
  438. left: 4px;
  439. right: auto;
  440. }
  441. .chosen-rtl.chosen-container-single .chosen-results {
  442. margin: 0 0 4px 4px;
  443. padding: 0 4px 0 0;
  444. }
  445. .chosen-rtl .chosen-results .group-option {
  446. padding-left: 0;
  447. padding-right: 15px;
  448. }
  449. .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  450. border-right: none;
  451. }
  452. .chosen-rtl .chosen-search input[type="text"] {
  453. background: url("chosen-sprite.png") no-repeat -28px -20px, #ffffff;
  454. direction: rtl;
  455. padding: 4px 5px 4px 20px;
  456. }
  457. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
  458. .chosen-rtl .chosen-search input[type="text"],
  459. .chosen-container-single .chosen-single abbr,
  460. .chosen-container-single .chosen-single div b,
  461. .chosen-container-single .chosen-search input[type="text"],
  462. .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  463. .chosen-container .chosen-results-scroll-down span,
  464. .chosen-container .chosen-results-scroll-up span {
  465. background-image: url("chosen-sprite@2x.png") !important;
  466. background-size: 52px 37px !important;
  467. background-repeat: no-repeat !important;
  468. }
  469. }
  470. /*----------------------------------------------------------------------------------------
  471. ...END OF BOOTSTRAP-CHOSEN SECTION
  472. bootstrap-chosen additions
  473. ----------------------------------------------------------------------------------------*/
  474. /* Mouse hover color in drop-downs */
  475. .chosen-container .chosen-results li.mouseover {
  476. background-color: #eeeeee;
  477. background-image: none;
  478. }
  479. /*----------------------------------------------------------------------------------------
  480. Stylesheet for re-com.date Date Picker variants inline-picker & dropdown-picker
  481. Day8 variation loosely based on:
  482. Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
  483. Licensed under the Apache License v2.0
  484. http://www.apache.org/licenses/LICENSE-2.0
  485. Built for http://www.improvely.com
  486. http://eternicode.github.io/bootstrap-datepicker
  487. START OF DATE PICKER SECTION...
  488. ----------------------------------------------------------------------------------------*/
  489. .datepicker.single .calendar {
  490. float: none;
  491. }
  492. .datepicker .calendar {
  493. display: none;
  494. max-width: 200px;
  495. }
  496. .datepicker .calendar.single .calendar-date {
  497. border: none;
  498. }
  499. .datepicker .calendar th, .datepicker .calendar td {
  500. white-space: nowrap;
  501. text-align: center;
  502. min-width: 32px;
  503. }
  504. .datepicker .calendar-date {
  505. border: 1px solid #ddd;
  506. padding: 4px;
  507. border-radius: 4px;
  508. background: #fff;
  509. }
  510. .datepicker .calendar-time {
  511. text-align: center;
  512. margin: 8px auto 0 auto;
  513. line-height: 30px;
  514. }
  515. .datepicker {
  516. position: absolute;
  517. background: #fff;
  518. top: 100px;
  519. left: 20px;
  520. padding: 10px 10px 5px;
  521. margin-top: 1px;
  522. -webkit-border-radius: 4px;
  523. -moz-border-radius: 4px;
  524. line-height: 16px;
  525. border-radius: 4px;
  526. }
  527. .datepicker table {
  528. width: 100%;
  529. margin: 0;
  530. border-collapse: separate;
  531. }
  532. .datepicker td, .datepicker th {
  533. text-align: center;
  534. width: 27px;
  535. height: 26px;
  536. max-width: 27px;
  537. max-height: 26px;
  538. min-width: 27px;
  539. min-height: 26px;
  540. -webkit-border-radius: 4px;
  541. -moz-border-radius: 4px;
  542. border-radius: 4px;
  543. padding: 4px;
  544. cursor: default;
  545. white-space: nowrap;
  546. font-weight: normal;
  547. }
  548. .datepicker td.off {
  549. padding: 4px;
  550. color: #999;
  551. }
  552. .datepicker td.disabled {
  553. color: #999;
  554. }
  555. .datepicker th.disabled {
  556. color: #999;
  557. }
  558. .datepicker td.available:hover, .datepicker th.available:hover {
  559. background: #eee;
  560. cursor: pointer;
  561. }
  562. .datepicker td.in-range {
  563. background: #ebf4f8;
  564. -webkit-border-radius: 0;
  565. -moz-border-radius: 0;
  566. border-radius: 0;
  567. }
  568. .datepicker td.start-date {
  569. -webkit-border-radius: 4px 0 0 4px;
  570. -moz-border-radius: 4px 0 0 4px;
  571. border-radius: 4px 0 0 4px;
  572. }
  573. .datepicker td.end-date {
  574. -webkit-border-radius: 0 4px 4px 0;
  575. -moz-border-radius: 0 4px 4px 0;
  576. border-radius: 0 4px 4px 0;
  577. }
  578. .datepicker td.start-date.end-date {
  579. -webkit-border-radius: 4px;
  580. -moz-border-radius: 4px;
  581. border-radius: 4px;
  582. }
  583. .datepicker td.active, .datepicker td.active:hover {
  584. background-color: #357ebd;
  585. border-color: #3071a9;
  586. color: #fff;
  587. }
  588. /* Introduced by Day8 from http://eternicode.github.io/bootstrap-datepicker */
  589. .datepicker td.today, .datepicker td.today:hover {
  590. background-color: #ffcd70;
  591. border-color: #f59e00;
  592. border-radius: 18px;
  593. color: #fff;
  594. }
  595. .datepicker th.day-enabled, label.day-enabled {
  596. font-weight: normal;
  597. font-size: 10px;
  598. color: #333;
  599. }
  600. .datepicker th.selectable {
  601. font-weight: normal;
  602. color: #357ebd;
  603. }
  604. .datepicker th.day-disabled {
  605. font-weight: normal;
  606. font-size: 10px;
  607. color: #999;
  608. }
  609. .datepicker td.week, .datepicker th.week {
  610. font-size: 80%;
  611. color: #ccc;
  612. }
  613. .datepicker th.prev {
  614. border: 1px solid #ccc;
  615. border-right-style: none;
  616. border-top-right-radius: 0;
  617. border-bottom-right-radius: 0;
  618. background-color: #F7F7F7;
  619. }
  620. .datepicker th.next {
  621. border: 1px solid #ccc;
  622. border-left-style: none;
  623. border-top-left-radius: 0;
  624. border-bottom-left-radius: 0;
  625. background-color: #F7F7F7;
  626. }
  627. .datepicker th.month {
  628. width: auto;
  629. font-size: 14px;
  630. color: #777;
  631. border-radius: 0;
  632. border: 1px solid #CCC;
  633. border-right-style: none;
  634. border-left-style: none;
  635. background-color: #F7F7F7;
  636. }
  637. .dropdown-button {
  638. cursor: pointer;
  639. height: 32px;
  640. font-size: 13px;
  641. font-weight: normal;
  642. }
  643. .dropdown-button.activator {
  644. width: 40px;
  645. color: #777;
  646. background-color: #F7F7F7
  647. }
  648. /*----------------------------------------------------------------------------------------
  649. END OF DATE PICKER SECTION...
  650. CSS THROBBER
  651. ----------------------------------------------------------------------------------------*/
  652. @keyframes blink {
  653. 0% {
  654. transform: scale(1);
  655. opacity: 1;
  656. }
  657. 100% {
  658. transform: scale(.5);
  659. opacity: 0;
  660. }
  661. }
  662. @-moz-keyframes blink {
  663. 0% {
  664. -moz-transform: scale(1);
  665. opacity: 1;
  666. }
  667. 100% {
  668. -moz-transform: scale(.5);
  669. opacity: 0;
  670. }
  671. }
  672. @-webkit-keyframes blink {
  673. 0% {
  674. -webkit-transform: scale(1);
  675. opacity: 1;
  676. }
  677. 100% {
  678. -webkit-transform: scale(.5);
  679. opacity: 0;
  680. }
  681. }
  682. .loader {
  683. position: relative;
  684. display: inline-block;
  685. vertical-align: middle;
  686. width: 20px;
  687. height: 20px;
  688. margin: 20px;
  689. padding: 0px;
  690. }
  691. .loader li {
  692. position: absolute;
  693. display: block;
  694. border-radius: 4px;
  695. background-color: #999;
  696. width: 6px;
  697. height: 6px;
  698. margin-top: -3px;
  699. margin-left: -3px;
  700. opacity: 0;
  701. -webkit-animation: blink .8s ease infinite;
  702. -moz-animation: blink .8s ease infinite;
  703. animation: blink .8s ease infinite;
  704. }
  705. .loader li:nth-child(1) {
  706. top: 0%;
  707. left: 50%;
  708. -webkit-animation-delay: -.7s;
  709. -moz-animation-delay: -.7s;
  710. animation-delay: -.7s;
  711. }
  712. .loader li:nth-child(2) {
  713. top: 15%;
  714. left: 85%;
  715. -webkit-animation-delay: -.6s;
  716. -moz-animation-delay: -.6s;
  717. animation-delay: -.6s;
  718. }
  719. .loader li:nth-child(3) {
  720. top: 50%;
  721. left: 100%;
  722. -webkit-animation-delay: -.5s;
  723. -moz-animation-delay: -.5s;
  724. animation-delay: -.5s;
  725. }
  726. .loader li:nth-child(4) {
  727. top: 85%;
  728. left: 85%;
  729. -webkit-animation-delay: -.4s;
  730. -moz-animation-delay: -.4s;
  731. animation-delay: -.4s;
  732. }
  733. .loader li:nth-child(5) {
  734. top: 100%;
  735. left: 50%;
  736. -webkit-animation-delay: -.3s;
  737. -moz-animation-delay: -.3s;
  738. animation-delay: -.3s;
  739. }
  740. .loader li:nth-child(6) {
  741. top: 85%;
  742. left: 15%;
  743. -webkit-animation-delay: -.2s;
  744. -moz-animation-delay: -.2s;
  745. animation-delay: -.2s;
  746. }
  747. .loader li:nth-child(7) {
  748. top: 50%;
  749. left: 0%;
  750. -webkit-animation-delay: -.1s;
  751. -moz-animation-delay: -.1s;
  752. animation-delay: -.1s;
  753. }
  754. .loader li:nth-child(8) {
  755. top: 15%;
  756. left: 15%;
  757. }
  758. .loader.smaller {
  759. width: 9px;
  760. height: 10px;
  761. margin: 7px;
  762. }
  763. .loader.smaller li {
  764. width: 4px;
  765. height: 4px;
  766. margin-top: -2px;
  767. margin-left: -2px;
  768. }
  769. .loader.small {
  770. width: 12px;
  771. height: 12px;
  772. margin: 10px;
  773. }
  774. .loader.small li {
  775. width: 4px;
  776. height: 4px;
  777. margin-top: -2px;
  778. margin-left: -2px;
  779. }
  780. .loader.large {
  781. width: 48px;
  782. height: 48px;
  783. margin: 20px;
  784. }
  785. .loader.large li {
  786. border-radius: 14px;
  787. width: 14px;
  788. height: 14px;
  789. margin-top: -7px;
  790. margin-left: -7px;
  791. }
  792. /*----------------------------------------------------------------------------------------
  793. END OF CSS THROBBER SECTION...
  794. Bootstrap list-group-item variation (only used in selection-list component)
  795. ----------------------------------------------------------------------------------------*/
  796. /* TODO: re-demo CSS */
  797. .compact {
  798. margin: 0;
  799. height: 19px;
  800. white-space: nowrap;
  801. border: none;
  802. padding: 0;
  803. overflow: hidden;
  804. cursor: default;
  805. font-size: small;
  806. text-overflow: ellipsis;
  807. }
  808. /* TODO: re-demo CSS */
  809. .list-group-item:hover {
  810. background-color: #eeeeee;
  811. }
  812. /*----------------------------------------------------------------------------------------
  813. Custom scrollbars
  814. - http://css-tricks.com/custom-scrollbars-in-webkit
  815. - http://codemug.com/html/custom-scrollbars-using-css
  816. ----------------------------------------------------------------------------------------*/
  817. ::-webkit-scrollbar {
  818. width: 10px;
  819. border-radius: 5px;
  820. background-color: rgba(0,0,0,0.05);
  821. }
  822. ::-webkit-scrollbar:horizontal {
  823. height:10px;
  824. }
  825. ::-webkit-scrollbar:hover {
  826. background-color:rgba(0,0,0,0.20);
  827. }
  828. ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
  829. background:rgba(0,0,0,0.25);
  830. border-radius: 5px;
  831. }
  832. ::-webkit-scrollbar-thumb:horizontal:active, ::-webkit-scrollbar-thumb:vertical:active {
  833. background:rgba(0,0,0,0.45);
  834. }
  835. /* Color of selected text*/
  836. /*
  837. ::-moz-selection { color: gold; background: red; }
  838. ::selection { color: gold; background: red; }
  839. */
  840. /*----------------------------------------------------------------------------------------
  841. Override bootstrap input text placeholder color (it's too dark)
  842. ----------------------------------------------------------------------------------------*/
  843. .form-control::-webkit-input-placeholder {
  844. color: #bbb;
  845. }
  846. /*----------------------------------------------------------------------------------------
  847. Override bootstrap warning color (from horrible brown/orange to orange)
  848. ----------------------------------------------------------------------------------------*/
  849. .has-warning .form-control {
  850. border-color: #f57c00;
  851. }
  852. .has-warning .form-control:focus {
  853. border-color: #f57c00;
  854. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(245, 124, 0, 0.6);
  855. }
  856. /* TODO: REMOVE */
  857. .has-warning .form-control-feedback {
  858. color: #f57c00;
  859. }
  860. .rc-input-text .zmdi-alert-triangle {
  861. color: #f57c00;
  862. }
  863. .has-error .form-control {
  864. border-color: #d50000;
  865. }
  866. .has-error .form-control:focus {
  867. border-color: #d50000;
  868. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(213, 0, 0, 0.6);
  869. }
  870. /* TODO: REMOVE */
  871. .has-error .form-control-feedback {
  872. color: #d50000;
  873. }
  874. /* Override bootstrap green validation */
  875. .has-success .form-control {
  876. border-color: #13C200;
  877. }
  878. .has-success .form-control:focus {
  879. border-color: #13C200;
  880. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(19, 194, 0, 0.6);
  881. }
  882. .rc-input-text .zmdi-alert-circle {
  883. color: #d50000;
  884. }
  885. .rc-input-text .zmdi-check-circle {
  886. color: #13C200;
  887. }
  888. .alert-warning {
  889. color: #ea6b00;
  890. background-color: #ffecdc;
  891. border-color: #faebcc;
  892. }
  893. code {
  894. margin-right: 0.2em;
  895. border-radius: 4px;
  896. color: #333;
  897. background: #eee;
  898. border: 1px solid #ddd;
  899. padding: 0.1em 0.3em;
  900. }
  901. /*----------------------------------------------------------------------------------------
  902. Time component
  903. ----------------------------------------------------------------------------------------*/
  904. .time-entry {
  905. flex: none;
  906. padding-left: 0.3em;
  907. padding-top: 2px;
  908. border: 1px solid #ccc;
  909. border-radius: 4px 0 0 4px;
  910. width: 3.3em;
  911. }
  912. .time-entry:last-child {
  913. border-radius: 4px;
  914. }
  915. .time-icon {
  916. display: flex;
  917. padding: 0 0.3em;
  918. border: 1px solid #ccc;
  919. border-left: none;
  920. border-radius: 0 4px 4px 0;
  921. background-color: #ddd;
  922. }
  923. /*----------------------------------------------------------------------------------------
  924. md-circle-icon-button
  925. ----------------------------------------------------------------------------------------*/
  926. .rc-md-circle-icon-button {
  927. width: 40px; /* material design dimensions */
  928. height: 40px;
  929. text-align: center; /* to horizontally center the icon */
  930. border: 1px solid lightgrey;
  931. border-radius: 50%;
  932. background-color: inherit;
  933. opacity: 0.9;
  934. }
  935. .rc-md-circle-icon-button > i {
  936. font-size : 24px;
  937. line-height: 40px; /* to vertically center in surrounding :div */
  938. color: inherit;
  939. }
  940. .rc-md-circle-icon-button:hover {
  941. border: 1px solid #428bca;
  942. color: #428bca;
  943. }
  944. .rc-circle-smaller {
  945. width: 26px;
  946. height: 26px;
  947. }
  948. .rc-circle-smaller > i {
  949. font-size: 16px;
  950. line-height: 24px;
  951. }
  952. .rc-circle-larger {
  953. width: 56px;
  954. height: 56px;
  955. }
  956. .rc-circle-larger > i {
  957. font-size: 24px;
  958. line-height: 56px;
  959. }
  960. .rc-circle-emphasis {
  961. border: 1px solid #428bca;
  962. background-color: #428bca;
  963. color: white;
  964. }
  965. .rc-circle-emphasis:hover {
  966. border: 1px solid #2196f3;
  967. background-color: #2196f3;
  968. color: white;
  969. }
  970. .rc-circle-disabled {
  971. border: none;
  972. }
  973. .rc-circle-disabled:hover {
  974. border: none;
  975. }
  976. .rc-circle-disabled > i {
  977. color: lightgrey;
  978. }
  979. /*----------------------------------------------------------------------------------------
  980. md-icon-button
  981. ----------------------------------------------------------------------------------------*/
  982. .rc-md-icon-button {
  983. height: 24px;
  984. font-size: 24px;
  985. line-height: 24px;
  986. text-align: center; /* to horizontally center the icon */
  987. background-color: inherit;
  988. border-radius: 3px;
  989. }
  990. .rc-md-icon-button > i {
  991. color: inherit;
  992. }
  993. .rc-md-icon-button:hover {
  994. color: #2196f3;
  995. }
  996. .rc-icon-smaller {
  997. height: 16px;
  998. font-size: 16px;
  999. line-height: 16px;
  1000. }
  1001. .rc-icon-larger {
  1002. height: 32px;
  1003. font-size: 32px;
  1004. line-height: 32px;
  1005. }
  1006. .rc-icon-emphasis {
  1007. background-color: #428bca;
  1008. color: white;
  1009. }
  1010. .rc-icon-emphasis:hover {
  1011. background-color: #2196f3;
  1012. color: white;
  1013. }
  1014. .rc-icon-disabled > i {
  1015. color: lightgrey;
  1016. }
  1017. /*----------------------------------------------------------------------------------------
  1018. info-button
  1019. CSS styles below are taken from https://github.com/oakmac/cljs.info...
  1020. The MIT License (MIT)
  1021. Copyright (c) 2014 Chris Oakman and contributors
  1022. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
  1023. to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
  1024. and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  1025. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  1026. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  1027. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  1028. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  1029. IN THE SOFTWARE.
  1030. ----------------------------------------------------------------------------------------*/
  1031. .rc-info-button {
  1032. padding-left: 3px;
  1033. padding-right: 3px;
  1034. fill: #bdbdbd;
  1035. }
  1036. .rc-info-button:hover {
  1037. fill: #2962ff;
  1038. }
  1039. .popover-content .info-heading {
  1040. font-size: 22px;
  1041. }
  1042. .popover-content .info-subheading {
  1043. font-size: 18px;
  1044. margin-top: 8px;
  1045. }
  1046. .popover-content .info-bold {
  1047. background-color: #555;
  1048. padding-left: 3px;
  1049. padding-right: 3px;
  1050. border-radius: 3px;
  1051. font-weight: bold;
  1052. }
  1053. .popover-content a {
  1054. color: #ccf;
  1055. }
  1056. .popover-content code {
  1057. color: white;
  1058. background-color: #555;
  1059. border: none;
  1060. }
  1061. /*----------------------------------------------------------------------------------------
  1062. row-button
  1063. ----------------------------------------------------------------------------------------*/
  1064. .rc-row-button {
  1065. text-align: center; /* to horizontally center the icon */
  1066. color: #2167f2; /2196f3;
  1067. background-color: inherit;
  1068. opacity: 0;
  1069. cursor: pointer;
  1070. }
  1071. .rc-row-button > i {
  1072. color: inherit;
  1073. }
  1074. .rc-row-mouse-over-row {
  1075. opacity: 0.4;
  1076. }
  1077. .rc-row-button:hover, rc-row-mouse-over-row:hover {
  1078. opacity: 1;
  1079. }
  1080. .rc-row-disabled {
  1081. opacity: 1;
  1082. color: lightgrey;
  1083. cursor: default;
  1084. }
  1085. /*----------------------------------------------------------------------------------------
  1086. div-table
  1087. ----------------------------------------------------------------------------------------*/
  1088. .rc-div-table {
  1089. flex: none;
  1090. width: auto;
  1091. border: 2px solid lightgrey;
  1092. cursor: default;
  1093. }
  1094. .rc-div-table-header > div {
  1095. background-color: #e8e8e8;
  1096. font-weight: bold;
  1097. padding: 5px;
  1098. }
  1099. .rc-div-table-row {
  1100. border-top: 1px solid lightgrey;
  1101. }
  1102. .rc-div-table-row:hover {
  1103. background-color: #f2f2f2;
  1104. }
  1105. .rc-div-table-row > div {
  1106. padding: 5px;
  1107. }
  1108. /*----------------------------------------------------------------------------------------
  1109. General Typography
  1110. ----------------------------------------------------------------------------------------*/
  1111. .semibold {
  1112. font-weight: 500;
  1113. }
  1114. .bold {
  1115. font-weight: 700;
  1116. }
  1117. .italic {
  1118. font-style: italic;
  1119. }
  1120. .uppercase {
  1121. text-transform: uppercase;
  1122. }
  1123. .all-small-caps {
  1124. font-variant: small-caps;
  1125. }
  1126. .level1 {
  1127. font-family: Roboto, sans-serif;
  1128. font-weight: 200;
  1129. font-size: 40px;
  1130. color: rgba(68, 68, 68, 1.0);
  1131. letter-spacing: normal;
  1132. /*-ms-font-feature-settings: 'ss20' 1;*/
  1133. }
  1134. .level2 {
  1135. font-family: Roboto, sans-serif;
  1136. font-weight: 200;
  1137. font-size: 26px;
  1138. color: rgba(0, 0, 0, 1.0);
  1139. letter-spacing: 0.001em;
  1140. }
  1141. .level3 {
  1142. font-family: Roboto, sans-serif;
  1143. font-weight: 500;
  1144. font-size: 15px;
  1145. color: rgba(68, 68, 68, 1.0);
  1146. letter-spacing: 0.002em;
  1147. }
  1148. .level4 {
  1149. font-family: Roboto, sans-serif;
  1150. font-weight: 500;
  1151. font-size: 15px;
  1152. color: rgba(68, 68, 68, 0.6);
  1153. letter-spacing: 0.002em;
  1154. }
  1155. .field-label {
  1156. font-family: Roboto, sans-serif;
  1157. font-weight: 400;
  1158. font-size: 14px;
  1159. color: rgba(68, 68, 68, 0.6);
  1160. letter-spacing: 0.002em;
  1161. font-variant: small-caps;
  1162. flex: none;
  1163. }
  1164. .noselect {
  1165. -webkit-user-select: none;
  1166. -moz-user-select: none;
  1167. -ms-user-select: none;
  1168. user-select: none;
  1169. }
  1170. /*----------------------------------------------------------------------------------------
  1171. Flexbox "display" styles
  1172. Requires 2 display values which we can't represent in a Clojure map
  1173. ----------------------------------------------------------------------------------------*/
  1174. .display-flex {
  1175. display: -webkit-flex;
  1176. display: flex;
  1177. }
  1178. .display-inline-flex {
  1179. display: -webkit-inline-flex;
  1180. display: inline-flex;
  1181. }
  1182. .zmdi-hc-fw-rc {
  1183. width: 1em;
  1184. text-align: center;
  1185. }
  1186. .rc-typeahead-suggestions-container {
  1187. position: absolute;
  1188. width: 100%;
  1189. background-color: #eee;
  1190. }
  1191. .rc-typeahead-suggestion {
  1192. background-color: #eee;
  1193. padding: 0.4em;
  1194. }
  1195. .rc-typeahead-suggestion.active {
  1196. background-color: #ddd;
  1197. }