Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

alpaca.css 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886
  1. /** Added to outer field elements to hide them **/
  2. .alpaca-hidden
  3. {
  4. display: none;
  5. }
  6. /** Added to every field outer element **/
  7. .alpaca-field
  8. {
  9. }
  10. /** Added to every container outer field element **/
  11. .alpaca-container
  12. {
  13. }
  14. /** Added to the optional label (or legend) accompanying any container **/
  15. .alpaca-container-label
  16. {
  17. }
  18. /** Added to every container item field within a container **/
  19. .alpaca-container-item
  20. {
  21. }
  22. /** Added to the first container item field within a container **/
  23. .alpaca-container-item-first
  24. {
  25. }
  26. /** Added to the last container item field within a container **/
  27. .alpaca-container-item-last
  28. {
  29. }
  30. /** Added to a container to indicate it is empty **/
  31. .alpaca-container-empty
  32. {
  33. }
  34. /** Added to the dom element holding the toolbar for an array **/
  35. .alpaca-array-toolbar
  36. {
  37. }
  38. /** Added to a button in the array toolbar that triggers an action **/
  39. .alpaca-array-toolbar-action
  40. {
  41. }
  42. /** Added to the dom element holding the actionbar for each array item **/
  43. .alpaca-array-actionbar
  44. {
  45. }
  46. /** Added to a button in an array item actionbar that triggers an action **/
  47. .alpaca-array-actionbar-action
  48. {
  49. }
  50. /** Added to every control outer field element **/
  51. .alpaca-control
  52. {
  53. }
  54. /** Added to the optional label accompanying any control **/
  55. .alpaca-control-label
  56. {
  57. }
  58. /** ******************************************************** **/
  59. /** STATE LABELS **/
  60. /** ******************************************************** **/
  61. /** Added to top-most control when rendering in display mode **/
  62. .alpaca-display
  63. {
  64. }
  65. /** Added to top-most control when rendering in create mode **/
  66. .alpaca-create
  67. {
  68. }
  69. /** Added to top-most control when rendering in edit mode **/
  70. .alpaca-edit
  71. {
  72. }
  73. /** Added to any field that is optional **/
  74. .alpaca-required
  75. {
  76. }
  77. /** Added to any field that is required **/
  78. .alpaca-optional
  79. {
  80. }
  81. /** Added to any field that is readonly **/
  82. .alpaca-readonly
  83. {
  84. }
  85. /** Added to any field that is disabled **/
  86. .alpaca-disabled
  87. {
  88. }
  89. /** Added to the container that holds Alpaca field helper text **/
  90. .alpaca-helper
  91. {
  92. }
  93. /** Added to form containers that are rendering in horizontal mode **/
  94. .alpaca-horizontal
  95. {
  96. }
  97. /** Added to form containers that are rendering in vertical mode **/
  98. .alpaca-vertical
  99. {
  100. }
  101. /** Added to the top most container element **/
  102. .alpaca-top
  103. {
  104. }
  105. /** Added to fields that are valid **/
  106. .alpaca-valid
  107. {
  108. }
  109. /** Added to fields that have run through validation and are invalid **/
  110. .alpaca-invalid
  111. {
  112. }
  113. /** Added to fields that have run through validation and are invalid but are currently hiding invalidation errors **/
  114. .alpaca-invalid-hidden
  115. {
  116. }
  117. /* Added to additional DOM elements to mark validation messages */
  118. .alpaca-message
  119. {
  120. }
  121. /** Added to messages that are for invalidation states that are current hidden (hideInitValidationError) **/
  122. .alpaca-message-hidden
  123. {
  124. }
  125. /** Added to buttons that are marked disabled */
  126. .alpaca-button-disabled
  127. {
  128. }
  129. /** ******************************************************** **/
  130. /** ICONS **/
  131. /** ******************************************************** **/
  132. .alpaca-icon-helper
  133. {
  134. }
  135. .alpaca-icon-required
  136. {
  137. }
  138. /** ******************************************************** **/
  139. /** OTHER **/
  140. /** ******************************************************** **/
  141. .alpaca-autocomplete
  142. {
  143. }
  144. /** Added to indicate hover state **/
  145. .alpaca-hover
  146. {
  147. }
  148. /** General purpose HTML clear **/
  149. .alpaca-clear
  150. {
  151. clear: both;
  152. }
  153. .alpaca-float-right
  154. {
  155. float: right;
  156. }
  157. /** ************************************** **/
  158. /** TWITTER TYPEAHEAD **/
  159. /** ************************************** **/
  160. .twitter-typeahead .tt-dropdown-menu
  161. {
  162. background-color: white;
  163. border: 1px #ccc solid;
  164. padding: 10px;
  165. color: #999;
  166. width: 100%;
  167. padding-bottom: 0px;
  168. }
  169. .twitter-typeahead .tt-dropdown-menu P
  170. {
  171. font-size: 1em;
  172. }
  173. .tt-suggestion.tt-is-under-cursor
  174. {
  175. background-color: #ccc;
  176. color: #333;
  177. }
  178. .tt-dropdown-menu
  179. {
  180. background-color: white;
  181. border: 1px solid rgb(204, 204, 204);
  182. width: 100%;
  183. }
  184. /** ************************************** **/
  185. /** EDITOR FIELD **/
  186. /** ************************************** **/
  187. .alpaca-controlfield-editor
  188. {
  189. position: relative;
  190. width: 100%;
  191. height: 300px;
  192. border: 1px #ccc solid;
  193. }
  194. .alpaca-controlfield-editor .control-field-editor-el
  195. {
  196. position:absolute;
  197. top:0;
  198. bottom:0;
  199. left: 0;
  200. right:0
  201. }
  202. /** ************************************** **/
  203. /** DATEPICKER (jQueryUI) **/
  204. /** ************************************** **/
  205. #ui-datepicker-div
  206. {
  207. display: none;
  208. background-color:white;
  209. z-index: 9999999 !important;
  210. width: 22em !important;
  211. }
  212. /* Fix for Chrome issue with Button text */
  213. .ui-button .ui-button-text {
  214. white-space: nowrap;
  215. }
  216. .ui-datepicker
  217. {
  218. z-index: 100;
  219. }
  220. /** ************************************** **/
  221. /** FILE UPLOAD (jQueryUI) **/
  222. /** ************************************** **/
  223. .alpaca-fileupload-container
  224. {
  225. border: 1px #ccc solid;
  226. padding: 10px;
  227. border-radius: 5px;
  228. }
  229. .alpaca-fileupload-container .row
  230. {
  231. margin-bottom: 10px;
  232. }
  233. .alpaca-fileupload-well
  234. {
  235. /*border: 1px #ccc solid;*/
  236. padding: 10px;
  237. border-radius: 5px;
  238. min-height: 100px;
  239. }
  240. .alpaca-fileupload-container table
  241. {
  242. border: 1px #ccc solid;
  243. padding: 10px;
  244. border-radius: 5px;
  245. }
  246. .alpaca-fileupload-well p
  247. {
  248. padding-top: 20px;
  249. color: #888;
  250. }
  251. .alpaca-fileupload-well table tbody.files tr td.name
  252. {
  253. word-wrap: break-word;
  254. }
  255. /** ************************************** **/
  256. /** ACE EDITOR **/
  257. /** ************************************** **/
  258. .ace_editor
  259. {
  260. border: 1px solid rgb(204, 204, 204);
  261. }
  262. /** ************************************** **/
  263. /** CK EDITOR **/
  264. /** ************************************** **/
  265. .alpaca-field-ckeditor.alpaca-invalid > .cke
  266. {
  267. border-color: #f04124;
  268. }
  269. /** ************************************** **/
  270. /** OPTIONTREE **/
  271. /** ************************************** **/
  272. .alpaca-field-optiontree {
  273. }
  274. .alpaca-field-optiontree .optiontree {
  275. }
  276. .alpaca-field-optiontree .optiontree .optiontree-selector {
  277. }
  278. .alpaca-field-optiontree.optiontree-horizontal {
  279. }
  280. .alpaca-field-optiontree.optiontree-horizontal .optiontree {
  281. display: inline-block;
  282. }
  283. .alpaca-field-optiontree.optiontree-horizontal .optiontree .optiontree-selector {
  284. display: inline-block;
  285. padding-left: 4px;
  286. }
  287. .alpaca-field-optiontree.optiontree-horizontal input {
  288. display: inline-block;
  289. width: auto;
  290. }
  291. .alpaca-field-optiontree.optiontree-horizontal label {
  292. display: block;
  293. }
  294. /** ************************************** **/
  295. /** TABLE **/
  296. /** ************************************** **/
  297. .alpaca-field-table .alpaca-field-tablerow label.control-label,
  298. table.dt-rowReorder-float .alpaca-field-tablerow label.control-label
  299. {
  300. display: none;
  301. }
  302. .alpaca-field-table .actionbar, .table .actionbar,
  303. table.dt-rowReorder-float .actionbar, .table .actionbar
  304. {
  305. white-space: nowrap;
  306. text-align: center;
  307. }
  308. .alpaca-field-table table tr td .alpaca-field,
  309. table.dt-rowReorder-float tr td .alpaca-field
  310. {
  311. width: 100%;
  312. }
  313. .alpaca-field-table table tr td .alpaca-field .form-control,
  314. table.dt-rowReorder-float tr td .alpaca-field .form-control
  315. {
  316. width: 100%;
  317. }
  318. .alpaca-field-table .form-group,
  319. table.dt-rowReorder-float .form-group
  320. {
  321. margin-bottom: 0px;
  322. }
  323. .alpaca-field-table .form-group.alpaca-field-checkbox,
  324. table.dt-rowReorder-float .form-group.alpaca-field-checkbox
  325. {
  326. text-align: center;
  327. }
  328. .alpaca-field-table .alpaca-control.checkbox,
  329. table.dt-rowReorder-float .alpaca-control.checkbox
  330. {
  331. padding-top: 6px;
  332. }
  333. .alpaca-field-table table tr td.actionbar .alpaca-array-actionbar,
  334. table.dt-rowReorder-float tr td.actionbar .alpaca-array-actionbar
  335. {
  336. padding-bottom: 0px;
  337. display: inline-block;
  338. }
  339. .alpaca-field-table .actionbar .alpaca-array-actionbar.btn-group,
  340. table.dt-rowReorder-float .actionbar .alpaca-array-actionbar.btn-group
  341. {
  342. width: auto;
  343. }
  344. .alpaca-field-table .alpaca-table-column-hidden,
  345. table.dt-rowReorder-float .alpaca-table-column-hidden
  346. {
  347. display: none;
  348. }
  349. .alpaca-field-table .alpaca-table-reorder-index-header,
  350. table.dt-rowReorder-float .alpaca-table-reorder-index-header
  351. {
  352. display: none;
  353. }
  354. .alpaca-field-table .alpaca-table-reorder-index-cell,
  355. table.dt-rowReorder-float .alpaca-table-reorder-index-cell
  356. {
  357. display: none;
  358. }
  359. .alpaca-field-table .alpaca-table-reorder-draggable-header,
  360. table.dt-rowReorder-float .alpaca-table-reorder-draggable-header
  361. {
  362. }
  363. .alpaca-field-table .alpaca-table-reorder-draggable-cell,
  364. table.dt-rowReorder-float .alpaca-table-reorder-draggable-cell
  365. {
  366. color: #bbb;
  367. font-size: 20px;
  368. text-align: center;
  369. vertical-align: middle;
  370. padding-top: 11px;
  371. cursor: pointer;
  372. }
  373. .alpaca-field-radio.disabled .alpaca-control.radio
  374. {
  375. color: grey;
  376. }
  377. .alpaca-field-radio.disabled .alpaca-control.radio label
  378. {
  379. cursor: inherit;
  380. }
  381. .alpaca-control.radio
  382. {
  383. min-height: inherit;
  384. height: inherit;
  385. padding-top: 0px;
  386. padding-bottom: 0px;
  387. padding-left: 0px;
  388. padding-right: 0px;
  389. margin-left: 10px;
  390. }
  391. .alpaca-control.radio label
  392. {
  393. line-height: 20px;
  394. }
  395. /** multiselect **/
  396. .has-error .multiselect
  397. {
  398. border-color: #a94442;
  399. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  400. box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  401. }
  402. .btn.multiselect
  403. {
  404. white-space: normal;
  405. }
  406. .alpaca-container-label
  407. {
  408. margin-top: 20px;
  409. }
  410. legend.alpaca-container-label
  411. {
  412. margin-top: 0px;
  413. }
  414. .alpaca-array-toolbar
  415. {
  416. margin-bottom: 10px;
  417. }
  418. .alpaca-array-actionbar
  419. {
  420. /*height: 40px;*/
  421. }
  422. .alpaca-array-actionbar.alpaca-array-actionbar-top
  423. {
  424. padding-bottom: 10px;
  425. }
  426. .alpaca-array-actionbar.alpaca-array-actionbar-bottom
  427. {
  428. padding-top: 10px;
  429. }
  430. .alpaca-array-actionbar, .alpaca-array-actionbar.btn-group
  431. {
  432. width: 100%;
  433. }
  434. .alpaca-array-actionbar
  435. {
  436. overflow: hidden;
  437. }
  438. .alpaca-field-object
  439. {
  440. border: 1px #eee solid;
  441. border-radius: 4px;
  442. padding: 10px;
  443. }
  444. .alpaca-display h3
  445. {
  446. margin-top: 0px;
  447. }
  448. /*
  449. .alpaca-field-object > .alpaca-container.alpaca-container-has-items
  450. {
  451. border: 1px #eee solid;
  452. border-radius: 4px;
  453. padding: 10px;
  454. }
  455. */
  456. .alpaca-field-array
  457. {
  458. border: 1px #eee solid;
  459. border-radius: 4px;
  460. padding: 10px;
  461. }
  462. /*
  463. .alpaca-field-array > .alpaca-container.alpaca-container-has-items
  464. {
  465. border: 1px #eee solid;
  466. border-radius: 4px;
  467. padding: 10px;
  468. }
  469. */
  470. .alpaca-control-buttons-container
  471. {
  472. margin-top: 10px;
  473. }
  474. .alpaca-container-item > .alpaca-container > .alpaca-field-object
  475. {
  476. border: 0px;
  477. }
  478. .alpaca-form-buttons-container
  479. {
  480. margin-top: 10px;
  481. text-align: right;
  482. }
  483. .alpaca-container > .form-group
  484. {
  485. margin-left: 0px;
  486. margin-right: 0px;
  487. }
  488. .alpaca-field-hidden
  489. {
  490. display:none;
  491. }
  492. .alpaca-field-object.alpaca-top
  493. {
  494. border: 0px;
  495. }
  496. .alpaca-field-array.alpaca-top
  497. {
  498. border: 0px;
  499. }
  500. .alpaca-container-item:not(:first-child)
  501. {
  502. margin-top: 10px;
  503. }
  504. .alpaca-container .alpaca-container-item:last-child
  505. {
  506. margin-bottom: 0px;
  507. }
  508. .alpaca-field-object.alpaca-top .alpaca-container
  509. {
  510. border: 0px;
  511. }
  512. .alpaca-field-select .btn-group
  513. {
  514. display:block;
  515. }
  516. .alpaca-field-select .btn-group button.multiselect
  517. {
  518. float: none;
  519. }
  520. /*
  521. .bootstrap-timepicker-widget table td input
  522. {
  523. width: 50px !important;
  524. }
  525. */
  526. /** FIElDS **/
  527. .alpaca-field.alpaca-field-upload .fileupload-active-zone
  528. {
  529. margin-top: 50px;
  530. margin-bottom: 50px;
  531. }
  532. .alpaca-field.alpaca-field-upload .template-download TD.error
  533. {
  534. color: red;
  535. word-break: break-all;
  536. }
  537. .alpaca-field.alpaca-field-upload .template-download TD.error .label
  538. {
  539. color: red;
  540. font-size: 16px;
  541. text-align: left;
  542. }
  543. .alpaca-field.alpaca-field-upload .template-upload TD.error
  544. {
  545. color: red;
  546. word-break: break-all;
  547. }
  548. .alpaca-field.alpaca-field-upload .template-upload TD.error .label
  549. {
  550. color: red;
  551. font-size: 16px;
  552. text-align: left;
  553. }
  554. .alpaca-field.alpaca-field-address .alpaca-field-address-mapcanvas
  555. {
  556. height: 250px;
  557. }
  558. .alpaca-field.alpaca-field-image .alpaca-image-display
  559. {
  560. margin-top: 20px;
  561. }
  562. .alpaca-field-text-max-length-indicator
  563. {
  564. color: #aaa;
  565. }
  566. .alpaca-field-text-max-length-indicator.err
  567. {
  568. color: #aa0000;
  569. }
  570. /** WIZARD **/
  571. .alpaca-wizard .alpaca-wizard-nav li .chevron
  572. {
  573. position: absolute;
  574. top: 0;
  575. right: -14px;
  576. display: block;
  577. border: 27px solid transparent;
  578. border-right: 0;
  579. border-left: 14px solid #d4d4d4;
  580. }
  581. .alpaca-wizard .alpaca-wizard-nav li .chevron:before
  582. {
  583. position: absolute;
  584. top: -27px;
  585. right: 1px;
  586. display: block;
  587. border: 27px solid transparent;
  588. border-right: 0;
  589. border-left: 14px solid #fcfcfc;
  590. content: "";
  591. }
  592. .alpaca-wizard .alpaca-wizard-nav li div.holder
  593. {
  594. padding-left: 30px;
  595. padding-right: 20px;
  596. text-align: center;
  597. padding-top: 6px;
  598. padding-bottom: 6px;
  599. }
  600. .alpaca-wizard .alpaca-wizard-nav li:first-child div.holder
  601. {
  602. padding-left: 10px;
  603. }
  604. .alpaca-wizard .alpaca-wizard-nav li div.holder div.title
  605. {
  606. font-size: 18px;
  607. font-weight: 600;
  608. color: #333;
  609. }
  610. .alpaca-wizard .alpaca-wizard-nav li div.holder div.description
  611. {
  612. color: #aaa;
  613. font-size: 12px;
  614. }
  615. .alpaca-wizard .alpaca-wizard-nav li.completed div.holder div.title
  616. {
  617. color: #333;
  618. }
  619. .alpaca-wizard .alpaca-wizard-nav li.completed div.holder div.description
  620. {
  621. color: #333;
  622. }
  623. .alpaca-wizard .alpaca-wizard-nav li.visited:hover
  624. {
  625. cursor: pointer;
  626. }
  627. .alpaca-wizard .alpaca-wizard-nav li.visited div.holder div.title
  628. {
  629. }
  630. .alpaca-wizard .alpaca-wizard-nav li.visited div.holder div.description
  631. {
  632. }
  633. .alpaca-wizard .alpaca-wizard-nav li.active:hover
  634. {
  635. cursor: default;
  636. }
  637. .alpaca-wizard .alpaca-wizard-nav li.active div.holder div.title
  638. {
  639. color: #206199;
  640. }
  641. .alpaca-wizard .alpaca-wizard-nav li.active div.holder div.description
  642. {
  643. color: #206199;
  644. }
  645. .alpaca-wizard .alpaca-wizard-nav li.disabled div.holder div.title
  646. {
  647. color: #ccc;
  648. }
  649. .alpaca-wizard .alpaca-wizard-nav li.disabled div.holder div.description
  650. {
  651. color: #ccc;
  652. }
  653. .alpaca-wizard .alpaca-wizard-nav .alpaca-wizard-back
  654. {
  655. background-color: #fcfcfc;
  656. }
  657. .alpaca-wizard .alpaca-wizard-buttons
  658. {
  659. margin-top: 20px;
  660. }
  661. .alpaca-wizard .alpaca-wizard-progress-bar
  662. {
  663. margin-top: 20px;
  664. }