cchl_prompt.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  1. /*
  2. Licensed Materials - Property of IBM
  3. IBM Cognos Products: rs
  4. (C) Copyright IBM Corp. 2003, 2019
  5. US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  6. */
  7. .clsPromptSelectWithSearch .clsAdorment
  8. {
  9. border: 1px solid var(--primary1);
  10. border-top-width: 0;
  11. }
  12. .clsPromptSelectWithSearch .clsInvalid .clsAdorment
  13. {
  14. border: 1px solid #D64427;
  15. border-top-width: 0;
  16. }
  17. .clsPromptSelectWithSearch .clsInvalid .clsListView,
  18. [isPromptControl] .clsRequiredBorder
  19. {
  20. border: 1px solid #D64427;
  21. }
  22. [isControl] .clsRequiredBorder,
  23. [isControl].clsPromptSelectWithSearch .clsInvalid .clsAdorment,
  24. [isControl].clsPromptSelectWithSearch .clsInvalid .clsListView,
  25. [isControl] .clsPromptSelectWithSearch .clsInvalid .clsAdorment,
  26. [isControl] .clsPromptSelectWithSearch .clsInvalid .clsListView
  27. {
  28. border-color: var(--support-01) !important;
  29. }
  30. .clsPromptSelectWithSearchControlArea
  31. {
  32. display: -webkit-flex;
  33. -webkit-flex-direction: row;
  34. display: flex;
  35. flex-direction: row;
  36. }
  37. .clsPromptSelectWithSearchControlArea .clsSelectWithSearch
  38. {
  39. min-height: initial !important;
  40. height: auto !important;
  41. -webkit-flex: 1;
  42. flex: 1;
  43. }
  44. .clsPromptSelectWithSearchControlArea .clsSelectWithSearch input[type=text]::-ms-clear
  45. {
  46. display: none;
  47. }
  48. [isControl] .clsSelectWithSearch
  49. {
  50. min-width: 250px;
  51. }
  52. .clsPromptSignon
  53. {
  54. margin-left: 5px;
  55. font-family: var(--F1);
  56. }
  57. .clsPromptSignonBlock
  58. {
  59. margin-top: 10px;
  60. }
  61. .clsPromptSignonTitle
  62. {
  63. font-weight: bold;
  64. color: var(--primary1);
  65. }
  66. .clsPromptComponent td[prole="input"]
  67. {
  68. min-width: 45px;
  69. }
  70. .clsPromptComponent td[prole="radio"]
  71. {
  72. vertical-align: top;
  73. padding: 0 8px;
  74. }
  75. [isControl] .clsPromptComponent td[prole="radio"]
  76. {
  77. padding-left: 0;
  78. padding-right: 0;
  79. }
  80. .clsPromptComponent td[prole="spacer"]
  81. {
  82. width: 8px;
  83. }
  84. .clsPromptComponent td[prole="adornmentL"]
  85. {
  86. width: 18px;
  87. padding-right: 8px;
  88. }
  89. .clsPromptComponent td[prole="adornmentR"]
  90. {
  91. width: 18px;
  92. padding-left: 8px;
  93. }
  94. .clsPromptComponent:not([specname="selectTime"]):not([specname="selectDate"]):not([specname="selectDateTime"]) td[prole="controlPanel"]
  95. {
  96. width: 50%;
  97. min-width: 180px;
  98. }
  99. .clsPromptComponent td[prole="choicePanel"]
  100. {
  101. width: 50%;
  102. min-width: 150px;
  103. }
  104. [isControl] TD[prole="choicePanel"]
  105. {
  106. min-width: 200px;
  107. }
  108. [isControl][specname="selectDateTime"][_range="true"][_multiselect="true"] TD[prole="choicePanel"],
  109. [isControl][specname="selectInterval"][_range="true"][_multiselect="true"] TD[prole="choicePanel"]
  110. {
  111. min-width: 310px;
  112. }
  113. [isControl][specname="selectDate"][_range="true"][_multiselect="true"] TD[prole="choicePanel"],
  114. [isControl][specname="selectTime"][_range="true"][_multiselect="true"] TD[prole="choicePanel"]
  115. {
  116. min-width: 250px;
  117. }
  118. [isControl][specname="selectTime"][_multiselect="true"]:not([_range]) TD[prole="choicePanel"]
  119. {
  120. min-width: 150px;
  121. }
  122. [isControl] .clsCCHLSelectTimeEditBox
  123. {
  124. width: 104px;
  125. margin: 0;
  126. }
  127. [isControl][specname="selectDate"] INPUT.clsCCHLTextWidget,
  128. [isControl][specname="selectDateTime"] INPUT.clsCCHLTextWidget
  129. {
  130. min-width: 104px;
  131. width: 104px !important;
  132. }
  133. [isControl][specname="selectDate"][_multiselect="true"]:not([_range]) TD.clsPromptButtonsContainer
  134. {
  135. padding-bottom: 32px;
  136. }
  137. .clsPromptComponent div[prole="container"] > .clsListView
  138. {
  139. min-height: 55px;
  140. }
  141. .clsPromptComponent[specname]
  142. {
  143. width: 160px;
  144. height: 1px;
  145. min-width: 1px;
  146. }
  147. div[specname=selectWithSearch]
  148. {
  149. width: 213px;
  150. height: 320px;
  151. }
  152. .clsPromptComponent[specname=selectWithSearch]
  153. {
  154. min-height: 428px;
  155. display: inline-block;
  156. width: auto;
  157. }
  158. .clsPromptComponent .clsPromptSelectWithSearchControlArea
  159. {
  160. width: 200px;
  161. }
  162. [isControl] .clsPromptSelectWithSearchControlArea
  163. {
  164. width: 250px;
  165. }
  166. [isPromptControl] .clsPromptSelectWithSearchMultiSelPane
  167. {
  168. min-width: 250px;
  169. height: 100%;
  170. }
  171. [isControl] .clsPromptSelectWithSearchMultiSelPane
  172. {
  173. width: 300px;
  174. }
  175. BUTTON.clsSelectWithSearchSearchButton
  176. {
  177. background-color: var(--primary1);
  178. border-color: var(--primary1);
  179. }
  180. INPUT.clsSelectWithSearchSearchText
  181. {
  182. font-family: Arial, Helvetica, sans-serif;
  183. border-color: var(--primary1);
  184. }
  185. LABEL.clsSelectWithSearchSelectAllLabel
  186. {
  187. color: var(--primary1);
  188. }
  189. .clsPromptComponent[specname=selectValue]
  190. {
  191. display: inline-block;
  192. }
  193. table.clsPromptComponent[specname]
  194. {
  195. display: inline-table;
  196. }
  197. .clsPromptComponent button
  198. {
  199. width: 40px;
  200. height: 40px;
  201. padding: 0;
  202. margin: 0 8px;
  203. }
  204. [isControl] BUTTON.clsPromptInsertButton,
  205. [isControl] BUTTON.clsPromptRemoveButton
  206. {
  207. width: 32px;
  208. height: 32px;
  209. padding: 8px;
  210. margin: 0;
  211. }
  212. [isControl] .clsPromptButtonContainer
  213. {
  214. width: auto !important;
  215. height: auto !important;
  216. line-height: normal !important;
  217. }
  218. [isControl][specname="selectValue"] .clsPromptButtonsContainer
  219. {
  220. padding: 16px 8px 0 8px;
  221. }
  222. [isControl][specname="textBox"] .clsPromptButtonsContainer,
  223. [isControl][specname="selectDateTime"] .clsPromptButtonsContainer,
  224. [isControl][specname="selectDate"] .clsPromptButtonsContainer,
  225. [isControl][specname="selectTime"] .clsPromptButtonsContainer
  226. {
  227. padding: 0 8px;
  228. }
  229. [isControl][specname="selectInterval"] .clsPromptButtonsContainer
  230. {
  231. padding: 0 8px 32px 8px;
  232. }
  233. [isControl][specname="selectInterval"][_multiselect="true"]:not([_range]) TD[prole="controlPanel"] > TABLE
  234. {
  235. height: 0 !important;
  236. }
  237. [isControl][specname="selectWithSearch"] DIV.pc
  238. {
  239. line-height: normal !important;
  240. }
  241. [isControl] DIV.clsPromptHyperlinksContainer,
  242. [isControl] TD.clsPromptHyperlinksContainer
  243. {
  244. line-height: normal !important;
  245. padding-top: 4px !important;
  246. }
  247. .clsPromptComponent button > img
  248. {
  249. width: 24px;
  250. height: 24px;
  251. }
  252. .clsPromptComponent button > img[dir="rtl"]
  253. {
  254. transform: rotate(180deg);
  255. }
  256. [isPromptControl] .clsListItem_normal,
  257. [isPromptControl] .clsListItem_hover,
  258. [isPromptControl] .clsListItem_selected
  259. {
  260. text-align: left;
  261. }
  262. /* styles for prompt */
  263. .pc
  264. {
  265. font-size: 14px;
  266. }
  267. .pl
  268. {
  269. font-size: 14px;
  270. text-decoration: underline;
  271. }
  272. [isControl] .pl
  273. {
  274. text-decoration: none;
  275. }
  276. [isControl] .pl:hover
  277. {
  278. text-decoration: underline;
  279. color: var(--primary2);
  280. }
  281. .pt
  282. {
  283. font-size: 14px;
  284. padding: 0 8px;
  285. border: 1px solid var(--text-02);
  286. min-height: 32px;
  287. }
  288. .pcl
  289. {
  290. font-size: 14px;
  291. min-height: 32px;
  292. }
  293. .pcl:focus
  294. {
  295. outline: none;
  296. }
  297. .pv_clsListView_dropdown,
  298. .po_clsListView_dropdown
  299. {
  300. background-color: var(--ui-01);
  301. border: 1px solid var(--G2);
  302. border-radius: 0;
  303. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  304. color: var(--text-01);
  305. font-family: var(--F1);
  306. font-size: 11px;
  307. overflow: auto;
  308. padding-left: 0;
  309. white-space: nowrap;
  310. }
  311. .pv,
  312. .po
  313. {
  314. font-size: 14px;
  315. }
  316. .pv .clsListView,
  317. .po .clsListView,
  318. .pv .clsComboBox,
  319. .po .clsComboBox
  320. {
  321. color: inherit;
  322. font-family: inherit;
  323. font-size: inherit;
  324. font-weight: inherit;
  325. font-style: inherit;
  326. text-decoration: inherit;
  327. background-color: transparent;
  328. }
  329. .pv .clsComboBox .clsComboBoxText,
  330. .po .clsComboBox .clsComboBoxText,
  331. .pv .clsListItem_normal,
  332. .po .clsListItem_normal,
  333. .po.po_clsListView_dropdown .clsListItem_normal,
  334. .pv .clsListItem_hover,
  335. .po .clsListItem_hover,
  336. .po.po_clsListView_dropdown .clsListItem_hover,
  337. .pv .clsListItem_selected,
  338. .po .clsListItem_selected,
  339. .po.po_clsListView_dropdown .clsListItem_selected
  340. {
  341. cursor: inherit;
  342. color: inherit;
  343. font-family: inherit;
  344. font-size: inherit;
  345. font-weight: inherit;
  346. font-style: inherit;
  347. text-decoration: inherit;
  348. }
  349. .pa .clsTreeNode_loading,
  350. .pa .clsTreeNode_normal,
  351. .pa .clsTreeNode_hover,
  352. .pa .clsTreeNode_selected
  353. {
  354. color: inherit;
  355. font-family: inherit;
  356. font-size: inherit;
  357. font-weight: inherit;
  358. font-style: inherit;
  359. text-decoration: inherit;
  360. display: inline-block;
  361. min-height: 32px;
  362. height: 1.618em;
  363. }
  364. .pa .clsTreeNode_loading:before,
  365. .pa .clsTreeNode_normal:before,
  366. .pa .clsTreeNode_hover:before,
  367. .pa .clsTreeNode_selected:before
  368. {
  369. content: '';
  370. display: inline-block;
  371. height: 100%;
  372. vertical-align: middle;
  373. }
  374. .clsPromptComponent .pt:focus
  375. {
  376. color: var(--text-02);
  377. border: 1px solid var(--primary1);
  378. }
  379. .clsPromptComponent .pt:disabled
  380. {
  381. color: #aeb8b8;
  382. border: 1px solid #aeb8b8;
  383. }
  384. [isControl] .pt:disabled
  385. {
  386. color: var(--text-03);
  387. border: 1px solid var(--text-03);
  388. }
  389. .clsPromptComponent .pt::-ms-clear
  390. {
  391. display: none;
  392. }
  393. .clsPromptComponent .pl:hover
  394. {
  395. cursor: pointer;
  396. }
  397. .clsPromptComponent .pdd,
  398. .clsPromptComponent .pmd
  399. {
  400. background-color: transparent;
  401. }
  402. .clsPromptComponent .pm,
  403. .clsPromptComponent .pms,
  404. .clsPromptComponent .pmd
  405. {
  406. width: 56px;
  407. height: 56px;
  408. }
  409. .clsPromptComponent.clsParseError .pt,
  410. .clsPromptComponent.clsParseError div[prole="container"] > .clsListView
  411. {
  412. border: 1px solid #d64427;
  413. }
  414. [isControl].clsPromptComponent.clsParseError .pt,
  415. [isControl].clsPromptComponent.clsParseError div[prole="container"] > .clsListView,
  416. [isControl] .clsPromptComponent.clsParseError .pt,
  417. [isControl] .clsPromptComponent.clsParseError div[prole="container"] > .clsListView
  418. {
  419. border-color: var(--support-01) !important;
  420. }
  421. .clsCCHLToolbarButton,
  422. .clsCCHLToolbarButton_hover,
  423. .clsCCHLToolbarButton_active
  424. {
  425. border: 1px solid var(--G2);
  426. padding: 2px;
  427. }
  428. .clsCCHLToolbarButton
  429. {
  430. background-color: var(--ui-01);
  431. }
  432. .clsCCHLToolbarButton_hover
  433. {
  434. background-color: var(--G2);
  435. }
  436. .clsCCHLToolbarButton_active
  437. {
  438. background-color: var(--ui-03);
  439. }
  440. .clsPromptComponent .clsCCHLSelectDateYears .clsCCHLToolbarButton,
  441. .clsPromptComponent .clsCCHLSelectDateYears .clsCCHLToolbarButton_hover,
  442. [isControl] .clsCCHLSelectDateYears .clsCCHLToolbarButton,
  443. [isControl] .clsCCHLSelectDateYears .clsCCHLToolbarButton_hover
  444. {
  445. width: 32px;
  446. height: 32px;
  447. }
  448. .clsPromptComponent .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .clsCCHLParseErrorOff,
  449. .clsPromptComponent .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .clsCCHLParseErrorOn,
  450. [isControl] .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears > TD:nth-of-type(2)
  451. {
  452. border: none;
  453. padding: 1px;
  454. height: 100%;
  455. }
  456. .clsPromptComponent .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .clsCCHLParseErrorOn .pcl,
  457. [isControl] .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .clsCCHLParseErrorOn .pcl
  458. {
  459. border: 1px solid var(--support-01);
  460. }
  461. .clsPromptComponent .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .pcl,
  462. [isControl] .clsCCHLSelectDateCalendarDialog .clsCCHLSelectDateDialogTopTable .clsCCHLSelectDateYears .pcl
  463. {
  464. width: 100%;
  465. }
  466. .clsCCHLSelectDateCalendarDialog TABLE.clsCCHLSelectDateDialogTopTable,
  467. .clsCCHLSelectDateCalendarDialog TABLE.clsWeekDaySection,
  468. .clsCCHLSelectDateCalendarDialog TABLE.clsMonthSection,
  469. .clsCCHLSelectDateCalendarDialog TABLE.clsCCHLSelectDateDialogTopTable,
  470. .clsCCHLSelectDateCalendarDialog TABLE.clsWeekDaySection,
  471. .clsCCHLSelectDateCalendarDialog TABLE.clsMonthSection
  472. {
  473. table-layout: fixed;
  474. }
  475. .clsPromptSelectWithSearch .clsComboBox
  476. {
  477. height: 32px;
  478. }
  479. .clsPromptSelectWithSearch .clsListView
  480. {
  481. padding: 1px;
  482. }
  483. .clsPromptSelectWithSearchMsg
  484. {
  485. color: #C0BFC0;
  486. }
  487. .clsPromptSelectWithSearchMsgSeparator
  488. {
  489. border-color: #C0BFC0;
  490. }
  491. .clsSpinnerText
  492. {
  493. font-size: 14px;
  494. color: var(--G2);
  495. text-align: center;
  496. padding: 4px 0;
  497. }
  498. .clsSpinnerValue
  499. {
  500. border-top: 1px solid var(--text-02);
  501. border-bottom: 1px solid var(--text-02);
  502. }
  503. .clsSpinnerButton
  504. {
  505. width: 32px;
  506. height: 32px;
  507. margin: 0 auto;
  508. position: relative;
  509. cursor: pointer;
  510. }
  511. .clsSpinnerButton::after
  512. {
  513. content: "";
  514. position: absolute;
  515. top: 10px;
  516. left: 10px;
  517. bottom: 10px;
  518. right: 10px;
  519. -webkit-transform: rotate(45deg);
  520. transform: rotate(45deg);
  521. }
  522. .clsSpinnerButton[disabled=true]
  523. {
  524. opacity: 0.5;
  525. pointer-events: none;
  526. }
  527. .clsSpinnerButtonUp::after
  528. {
  529. border-top: 3px solid var(--primary1);
  530. border-left: 3px solid var(--primary1);
  531. }
  532. .clsSpinnerButtonDown::after
  533. {
  534. border-bottom: 3px solid var(--primary1);
  535. border-right: 3px solid var(--primary1);
  536. }
  537. .clsPromptComponent.clsDirectionRtl IMG[src*="plus"]
  538. {
  539. transform: rotate(180deg);
  540. }
  541. .pv_clsListView_dropdown.clsDirectionRtl,
  542. .po_clsListView_dropdown.clsDirectionRtl,
  543. .clsCCHLSelectDateCalendarDialog.clsDirectionRtl
  544. {
  545. direction: rtl;
  546. }
  547. .clsPromptComponent.clsDirectionRtl .clsPromptSelectWithSearch BUTTON.clsPromptInsertButton,
  548. .clsPromptComponent.clsDirectionRtl .clsPromptSelectWithSearch BUTTON.clsPromptRemoveButton,
  549. .clsPromptComponent.clsDirectionRtl .clsCCHLSelectDateCalendarDialog IMG[src*="year_up"],
  550. .clsPromptComponent.clsDirectionRtl .clsCCHLSelectDateCalendarDialog IMG[src*="year_down"],
  551. .clsCCHLSelectDateCalendarDialog.clsDirectionRtl IMG[src*="year_up"],
  552. .clsCCHLSelectDateCalendarDialog.clsDirectionRtl IMG[src*="year_down"]
  553. {
  554. transform: rotate(180deg);
  555. }
  556. INPUT.clsTextBox.clsCCHLSelectTimeControl
  557. {
  558. border: none !important;
  559. padding: 0;
  560. margin: 0;
  561. width: 24px !important;
  562. }
  563. [isControl][specname="promptDateTime"] INPUT.clsTextBox
  564. {
  565. background-color: var(--ui-01);
  566. }
  567. [isControl][specname="promptDateTime"] INPUT.clsTextBox:not(.clsCCHLSelectTimeControl)
  568. {
  569. border: 1px solid var(--text-03);
  570. }
  571. [isControl] DIV.clsListViewRadioView
  572. {
  573. padding-top: 8px;
  574. padding-left: 4px;
  575. }
  576. [isControl]:not([_fdn]) SELECT
  577. {
  578. padding: 0 24px 0 4px;
  579. -webkit-appearance: none;
  580. -moz-appearance: none;
  581. background: url(../hal/images/ComboBoxArrow.svg) no-repeat;
  582. background-position: right 4px center;
  583. background-size: 16px;
  584. }
  585. [isControl] SELECT
  586. {
  587. height: 32px;
  588. cursor: pointer;
  589. border: 1px solid var(--G2);
  590. /* background-color: var(--ui-01); */
  591. /* color: var(--text-01); */
  592. }
  593. [isControl][specname="textBox"][_multiselect="true"]:not([_range])
  594. {
  595. height: 180px;
  596. width: 520px;
  597. }
  598. [isControl][specname="textBox"][_multiselect="true"]:not([_range]) .clsTextBox
  599. {
  600. width: 232px !important;
  601. }
  602. [isControl][specname="textBox"][_multiselect="true"]:not([_range]) .clsListView
  603. {
  604. width: 240px !important;
  605. }
  606. SPAN.clsRequiredIndicator
  607. {
  608. color: var(--support-01);
  609. font-weight: bold;
  610. font-size: 22px;
  611. line-height: 14px;
  612. vertical-align: middle;
  613. }
  614. SPAN.clsRequiredIndicator:before
  615. {
  616. content: '*';
  617. }
  618. [isControl] BUTTON.clsSvgButton16x16
  619. {
  620. fill: var(--primary1);
  621. color: var(--primary1);
  622. }
  623. [isControl] TD.clsCCHLDatePickerButton
  624. {
  625. width: 38px;
  626. padding-left: 8px;
  627. }
  628. [isControl] IMG.clsCCHLDatePickerButton
  629. {
  630. width: 30px;
  631. height: 30px;
  632. cursor: pointer;
  633. }
  634. [isControl] IMG.clsCCHLDatePickerButton:hover
  635. {
  636. outline: 1px solid var(--primary1);
  637. }
  638. DIV.clsFilterCount
  639. {
  640. float: left;
  641. margin-top: var(--8XS);
  642. font-size: var(--CAPTION);
  643. color: var(--text-03);
  644. }