portal.css 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051
  1. /*******************/
  2. /* Global settings */
  3. /*******************/
  4. @media (max-width: 768px){
  5. body{
  6. padding-top: 60px;
  7. }
  8. }
  9. footer{
  10. margin: 5em 1em;
  11. }
  12. /* Navigation menu */
  13. .navbar-nav .dropdown-menu a .glyphicon,
  14. .user_infos .dropdown-menu a .glyphicon{
  15. margin-right: 15px;
  16. }
  17. .nav > li > a > span.brick_icon{
  18. margin-right: 20px;
  19. }
  20. /* Topbar */
  21. #topbar #navbar{
  22. overflow-y: auto;
  23. }
  24. #topbar .user_infos{
  25. text-decoration: none;
  26. }
  27. #topbar .user_photo{
  28. margin-right: 10px;
  29. }
  30. #topbar .user_photo img{
  31. margin-top: -4px;
  32. max-width: 100%;
  33. max-height: 100%;
  34. height: 25px;
  35. border-radius: 100%;
  36. }
  37. /* Sidebar */
  38. #sidebar{
  39. position: fixed;
  40. top: 0px;
  41. left: 0px;
  42. padding: 0px; /* Overriding BS */
  43. height: 100%;
  44. }
  45. #sidebar .user_card{
  46. padding: 30px 0px;
  47. background-color: #EA7D1E; /* TODO : Change this */
  48. text-align: center;
  49. box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
  50. }
  51. #sidebar .user_card .user_photo{
  52. margin-bottom: 10px;
  53. }
  54. #sidebar .user_card .user_photo img{
  55. border: 2px solid #FFFFFF;
  56. border-radius: 100%;
  57. width: 80px;
  58. }
  59. #sidebar .user_card .user_infos{
  60. font-size: 1em;
  61. color: #FFFFFF;
  62. }
  63. #sidebar .user_card .user_infos .dropdown-toggle{
  64. color: #FFFFFF;
  65. }
  66. #sidebar .user_card .user_options.dropdown-menu{
  67. width: 92%;
  68. left: 4%;
  69. }
  70. #sidebar .user_card .user_fullname{
  71. font-weight: 600;
  72. }
  73. #sidebar .menu{
  74. max-height: 59%;
  75. overflow-y: auto;
  76. }
  77. #sidebar .menu .nav > li{
  78. line-height: 3.0em;
  79. }
  80. #sidebar .menu .nav > li:after{
  81. content: "";
  82. display: block;
  83. position: relative;
  84. /*margin-left: 6.8em;
  85. width: 56%;*/
  86. color: #FFFFFF;
  87. border-bottom: 1px solid #7D7D7D;
  88. }
  89. #sidebar .menu .nav > li.active{
  90. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
  91. }
  92. #sidebar .menu .nav > li.active:after{
  93. content: " ";
  94. position: absolute;
  95. right: 0px;
  96. top: 0px;
  97. border: 30px solid transparent;
  98. border-right-width: 20px;
  99. border-right-color: #EDECEC;
  100. }
  101. #sidebar .menu .nav > li.active > a{
  102. margin-top: -1px; /* To mask border from previous li item */
  103. /*margin-left: 4em;
  104. padding-left: 1em;*/
  105. }
  106. #sidebar .menu .nav > li > a{
  107. /*padding-left: 3em;*/
  108. padding-left: 10%;
  109. overflow-x: hidden;
  110. text-overflow: ellipsis;
  111. white-space: nowrap;
  112. }
  113. #sidebar .menu .nav > li > a > .brick_icon{
  114. width: 1.2em;
  115. vertical-align: sub;
  116. text-align: center;
  117. }
  118. #sidebar .logo{
  119. position: absolute;
  120. bottom: 15px;
  121. width: 100%;
  122. text-align: center;
  123. }
  124. #sidebar .logo img{
  125. width: 40%;
  126. max-width: 100%;
  127. }
  128. /* Main content */
  129. @media (min-width: 768px) {
  130. #main-wrapper{
  131. margin-top: 20px;
  132. }
  133. }
  134. /* Overlays*/
  135. .global_overlay{
  136. z-index: 9999;
  137. display: none;
  138. position: fixed;
  139. top: 0px;
  140. left: 0px;
  141. width: 100%;
  142. height: 100%;
  143. background-color: black;
  144. opacity: 0.5;
  145. }
  146. #page_overlay .overlay_content{
  147. margin-top: 20em;
  148. width: 100%;
  149. color: white;
  150. }
  151. .overlay_content{
  152. text-align: center;
  153. }
  154. .content_loader .icon{
  155. margin-bottom: 0.3em;
  156. /*width: 52px;*/
  157. height: 38px; /* 50px; *//* Hack to make loader circle perfectly */
  158. font-size: 3em; /* 4em; */
  159. animation: spin 1.2s linear infinite;
  160. -webkit-animation: spin 1.2s linear infinite;
  161. -moz-animation: spin 1.2s linear infinite;
  162. -ms-animation: spin 1.2s linear infinite;
  163. }
  164. .content_loader .message{
  165. font-size: 1.5em; /* 2em; */
  166. }
  167. .datatables_overlay{
  168. padding: 5% 0px !important;
  169. background-color: white;
  170. }
  171. /******************/
  172. /* Global classes */
  173. /******************/
  174. .vertical-center {
  175. /* Make it a flex container */
  176. display: -webkit-box;
  177. display: -moz-box;
  178. display: -ms-flexbox;
  179. display: -webkit-flex;
  180. display: flex;
  181. /* Align the bootstrap's container vertically */
  182. -webkit-box-align : center;
  183. -webkit-align-items : center;
  184. -moz-box-align : center;
  185. -ms-flex-align : center;
  186. align-items : center;
  187. /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
  188. hence the bootstrap's container won't be aligned to the center anymore.
  189. Therefore, we should use the following declarations to get it centered again */
  190. -webkit-box-pack : center;
  191. -moz-box-pack : center;
  192. -ms-flex-pack : center;
  193. -webkit-justify-content : center;
  194. justify-content : center;
  195. }
  196. /*********************/
  197. /* Global animations */
  198. /*********************/
  199. /* Spin */
  200. @keyframes spin{
  201. 100% {
  202. transform: rotate(360deg);
  203. }
  204. }
  205. @-webkit-keyframes spin{
  206. 100% {
  207. -webkit-transform: rotate(360deg);
  208. }
  209. }
  210. @-moz-keyframes spin{
  211. 100% {
  212. -moz-transform: rotate(360deg);
  213. }
  214. }
  215. @-ms-keyframes spin{
  216. 100% {
  217. -ms-transform: rotate(360deg);
  218. }
  219. }
  220. /***************/
  221. /* BS override */
  222. /***************/
  223. @font-face {
  224. font-family: 'Glyphicons Halflings';
  225. src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot');
  226. src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  227. }
  228. label{
  229. font-weight: bold;
  230. }
  231. /*********************/
  232. /* BS theme override */
  233. /*********************/
  234. body{
  235. background-color: #EDECEC;
  236. }
  237. a{
  238. color: #D46201;
  239. }
  240. a:hover, a:focus{
  241. color: #C15A02; /* TODO : Darken #D46201 */
  242. }
  243. .pagination{
  244. margin: 14px 0px;
  245. }
  246. .list-group.tree{
  247. margin-top: 11px;
  248. margin-bottom: -11px;
  249. }
  250. .list-group-item{
  251. padding-right: 0px; /* To align all actions on the right without indent */
  252. }
  253. .tooltip-inner{
  254. max-width: 400px;
  255. padding: 15px;
  256. }
  257. /* Navbars */
  258. .navbar-default{
  259. background-color: #585653;
  260. border: none;
  261. }
  262. .navbar-default .nav > li > a{
  263. color: #FFFFFF;
  264. }
  265. .navbar-default .nav > li > a:focus,
  266. .navbar-default .nav > li > a:hover{
  267. background-color: #FFFFFF;
  268. color: #EA7D1E;
  269. }
  270. .navbar-default .nav > li.active{
  271. background-color: #292827; /* TODO Darken #585653 */
  272. color: #FFFFFF;
  273. font-weight: 600;
  274. }
  275. /* Dropdowns */
  276. .dropdown-menu>li>a:hover,
  277. .dropdown-menu>li>a:focus {
  278. text-decoration: none;
  279. color: #FFFFFF;
  280. background-color: #EA7D1E;
  281. }
  282. /* Buttons */
  283. /* - Default */
  284. .btn-default,
  285. .btn-default:active, .btn-default.active,
  286. .btn-default:hover, .btn-default:focus{
  287. color: inherit;
  288. background-color: #FFFFFF;
  289. background-image: none;
  290. border: 1px solid rgba(0, 0, 0, 0.15);
  291. }
  292. .btn-default:hover, .btn-default.active:focus{
  293. background-color: #FAFAFA; /* TODO : Darken white */
  294. }
  295. .btn-default:active, .btn-default.active{
  296. background-color: transparent; /* Body background */
  297. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
  298. border: none;
  299. border-bottom-color: #EBEAEA;
  300. }
  301. .btn-default:active:hover, .btn-default.active:hover,
  302. .btn-default:active:focus, .btn-default.active:focus,
  303. .btn-default:active.focus, .btn-default.active.focus {
  304. color: inherit;
  305. background-color: #EAEAEA; /* Darken body background */
  306. border: inherit;
  307. }
  308. /* - Primary */
  309. .btn-primary,
  310. .btn-primary:active, .btn-primary.active,
  311. .btn-primary:hover, .btn-primary:focus{
  312. color: #FFFFFF;
  313. background-color: #EA7D1E;
  314. background-image: none;
  315. border: 1px solid rgba(0, 0, 0, 0.15);
  316. }
  317. .btn-primary:hover,
  318. .btn-primary:active:hover, .btn-primary.active:hover,
  319. .btn-primary:active:focus, .btn-primary.active:focus,
  320. .btn-primary:active.focus, .btn-primary.active.focus{
  321. background-color: #DA751C; /* TODO : Darken #EA7D1E */
  322. }
  323. /* Button groups */
  324. .btn-group.btn_group_explicit{
  325. padding: 7px;
  326. background-color: #292827;
  327. border: 1px solid #EBEAEA;
  328. border-radius: 30px;
  329. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset;
  330. }
  331. .btn-group.btn_group_explicit .btn{
  332. color: #FFFFFF;
  333. background-color: transparent;
  334. border: none;
  335. }
  336. .btn-group.btn_group_explicit .btn.active{
  337. color: #6B6965;
  338. background-color: #EDECEC;
  339. border-radius: 37px !important;
  340. box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
  341. }
  342. /* Panels */
  343. .panel{
  344. border: none;
  345. border-radius: 0px;
  346. box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  347. }
  348. /* Forms */
  349. .form-control{
  350. border-radius: 0px;
  351. }
  352. /* Pagination */
  353. .pagination>.active>a,
  354. .pagination>.active>span,
  355. .pagination>.active>a:hover,
  356. .pagination>.active>span:hover,
  357. .pagination>.active>a:focus,
  358. .pagination>.active>span:focus {
  359. background-color: #EA7D1E;
  360. border-color: #EA7D1E;
  361. }
  362. .pagination>li>a:hover,
  363. .pagination>li>span:hover,
  364. .pagination>li>a:focus,
  365. .pagination>li>span:focus {
  366. background-color: #EA7D1E;
  367. border-color: #EA7D1E;
  368. }
  369. /* Modal */
  370. .modal-content{
  371. border-radius: 0px;
  372. }
  373. /* Custom "glyphicons" */
  374. .glyphicon-ext-hierarchy:before {
  375. content: url('../img/icons/hierarchy-white-13px.png');
  376. }
  377. /**********************/
  378. /* BS plugin override */
  379. /**********************/
  380. /* Datatables */
  381. .table-striped > tbody > tr:hover {
  382. background-color: #fdf5d0;
  383. }
  384. /******************/
  385. /* Modal settings */
  386. /******************/
  387. .modal-content .content_loader{
  388. margin: 7em 0em;
  389. text-align: center;
  390. }
  391. @media (min-width: 992px){
  392. .modal-lg {
  393. width: 80%;
  394. max-width: 1200px;
  395. }
  396. }
  397. /**************************/
  398. /* MagnificPopup settings */
  399. /**************************/
  400. .mfp-bg{
  401. z-index: 1200;
  402. }
  403. .mfp-wrap{
  404. z-index: 1210;
  405. }
  406. /********************/
  407. /* Typeahed setting */
  408. /********************/
  409. .twitter-typeahead .tt-menu{
  410. max-height: 200px;
  411. overflow-y: auto;
  412. }
  413. @media (min-width: 768px){
  414. .twitter-typeahead .tt-menu{
  415. max-height: 300px;
  416. }
  417. }
  418. .twitter-typeahead .tt-dataset > .content_loader{
  419. margin: 10px 0px;
  420. text-align: center;
  421. font-size: 0.6em;
  422. }
  423. .twitter-typeahead .tt-dataset > .content_loader .icon{
  424. height: 25px;
  425. }
  426. .twitter-typeahead .tt-dataset .no_result{
  427. text-align: center;
  428. font-style: italic;
  429. }
  430. /*****************/
  431. /* Home settings */
  432. /*****************/
  433. .home #main-wrapper{
  434. padding-top: 15px;
  435. }
  436. .home .tile{
  437. display: block;
  438. margin-bottom: 8px;
  439. padding: 0em 1em;
  440. min-height: 4em;
  441. background-color: #FFFFFF;
  442. background-image: none;
  443. border: none;
  444. border-radius: 0px;
  445. text-align: center;
  446. text-decoration: none;
  447. white-space: normal;
  448. line-height: 4em;
  449. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  450. }
  451. .home .tile .tile_decoration{
  452. position: absolute;
  453. top: 0.3em;
  454. left: 2.5em;
  455. }
  456. .home .tile .tile_title{
  457. font-weight: bold;
  458. color: #333;
  459. }
  460. .home .tile .tile_description{
  461. display: none;
  462. color: #555555;
  463. }
  464. @media (min-width: 768px) {
  465. .home .tile{
  466. display: block;
  467. margin-bottom: 40px;
  468. padding: 40px 40px 30px 40px;
  469. min-height: 10em;
  470. text-align: left;
  471. transition: all 0.2s linear;
  472. }
  473. .home .tile:hover{
  474. box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.10);
  475. }
  476. .home .tile .tile_decoration{
  477. display: block;
  478. position: relative;
  479. float: left;
  480. top: initial;
  481. left: initial;
  482. margin: 0px 40px 5px 0px;
  483. }
  484. .home .tile .tile_body{
  485. display: block;
  486. text-align: left;
  487. line-height: 1.5em;
  488. }
  489. .home .tile .tile_title{
  490. margin-bottom: 1em;
  491. font-size: 1.0em;
  492. }
  493. .home .tile .tile_description{
  494. display: block;
  495. text-align: justify;
  496. }
  497. }
  498. @media (min-width: 992px) {
  499. .home .tile{
  500. min-height: 15em;
  501. padding: 40px 50px 30px 50px;
  502. }
  503. .home .tile .tile_decoration > span.icon{
  504. font-size: 6em;
  505. }
  506. .home .tile .tile_title{
  507. font-size: 1.5em;
  508. }
  509. .home .tile .tile_description{
  510. font-size: 1.2em;
  511. }
  512. }
  513. /********************/
  514. /* Modules settings */
  515. /********************/
  516. #main-header{
  517. text-align: center;
  518. }
  519. #main-header-title{
  520. margin-bottom: 15px;
  521. }
  522. #main-header-actions{
  523. margin-bottom: 15px;
  524. }
  525. #main-header-actions .btn-group .btn{
  526. padding: 0em 1.5em;
  527. line-height: 2.8em;
  528. font-size: 14px;
  529. }
  530. @media (min-width: 768px) {
  531. #main-header:after{
  532. clear: both;
  533. }
  534. #main-header-title{
  535. float: left;
  536. margin-bottom: 0px;
  537. min-height: 6em;
  538. text-align: left;
  539. }
  540. #main-header-actions{
  541. float: right;
  542. margin-bottom: 0px;
  543. }
  544. }
  545. .dataTables_wrapper{
  546. padding: 10px 10px;
  547. }
  548. #brick_content_toolbar{
  549. /* margin: 10px 0px 6px 0px; */
  550. padding: 10px;
  551. }
  552. #brick_content_toolbar > div label{
  553. font-weight: normal;
  554. white-space: nowrap;
  555. text-align: left;
  556. }
  557. #brick_content_toolbar > div label input{
  558. margin-left: 0.5em;
  559. display: inline-block;
  560. width: 130px;
  561. }
  562. /***********************/
  563. /* Brick communication */
  564. /***********************/
  565. /* Home tile */
  566. .home .tile.tile_communication{
  567. padding: 20px;
  568. background-color: #EDEDED;
  569. border: none;
  570. font-weight: initial;
  571. }
  572. .home .tile_communication .carousel{
  573. margin-bottom: 0px;
  574. width: 100%;
  575. height: 200px;
  576. }
  577. /**********************/
  578. /* Brick user profile */
  579. /**********************/
  580. .home .userprofile-brick{
  581. background-color: #E8E7E7;
  582. }
  583. /****************/
  584. /* Brick browse */
  585. /****************/
  586. /* - Tree mode */
  587. /****************/
  588. #brick_content_tree{
  589. position: relative;
  590. }
  591. .panel > .list-group:last-child .list-group-item:last-child,
  592. .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child{
  593. margin-bottom: 1px;
  594. }
  595. .list-group-item > .list-group-item-actions{
  596. /*display: none; Displaying actions only when hovering was not unanimous in the team */
  597. position: absolute;
  598. top: 10px;
  599. right: 10px;
  600. }
  601. .list-group-item:hover > .list-group-item-actions{
  602. display: block;
  603. }
  604. .list-group-item .list-group-item-actions a:not(:first-child){
  605. margin-left: 10px;
  606. }
  607. .list-group-item .list-group-item-text{
  608. margin-left: 5px;
  609. font-size: 1em;
  610. line-height: 1em;
  611. }
  612. .list-group-item .keep-spinning{
  613. animation: spin 1s linear infinite;
  614. -webkit-animation: spin 1s linear infinite;
  615. -moz-animation: spin 1s linear infinite;
  616. -ms-animation: spin 1s linear infinite;
  617. }
  618. /* Secondary actions */
  619. table .group-actions{
  620. position: relative;
  621. }
  622. .list-group-item-actions a.glyphicon-menu-hamburger,
  623. table .group-actions a.glyphicon-menu-hamburger{
  624. cursor: pointer;
  625. text-decoration: none;
  626. }
  627. .list-group-item-actions .item-action-wrapper,
  628. table .group-actions .item-action-wrapper
  629. {
  630. display: none;
  631. position: absolute;
  632. z-index: 5;
  633. bottom: 5px;
  634. right: 0px;
  635. -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  636. -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  637. box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  638. }
  639. .list-group-item-actions .item-action-wrapper .glyphicon,
  640. table .group-actions .item-action-wrapper .glyphicon{
  641. margin-right: 0.6em;
  642. }
  643. .list-group-item-actions .item-action-wrapper.collapse.in,
  644. table .group-actions .item-action-wrapper.collapse.in{
  645. display: block;
  646. }
  647. .list-group-item-actions .item-action-wrapper .panel-body > p,
  648. table .group-actions .item-action-wrapper .panel-body > p{
  649. white-space: nowrap;
  650. }
  651. .list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
  652. table .group-actions .item-action-wrapper .panel-body > p:last-child{
  653. margin-bottom: 0px;
  654. }
  655. #brick_content_empty{
  656. display: none;
  657. padding: 40px;
  658. font-size: 1.3em;
  659. font-style: italic;
  660. }
  661. /* Loader */
  662. #brick_tree_overlay{
  663. /*z-index: 10;*/
  664. display: none;
  665. padding: 8% 0px;
  666. /*position: absolute;
  667. top: 0px;
  668. left: 0px;
  669. width: 100%;
  670. height: 100%;
  671. min-height: 130px;*/
  672. /*background-color: black;*/
  673. border-radius: 0px 0px 4px 4px;
  674. /*opacity: 0.5;
  675. color: white;*/
  676. font-size: 1em;
  677. }
  678. /****************/
  679. /* - List mode */
  680. /****************/
  681. /*********/
  682. /* Forms */
  683. /*********/
  684. .form_fields textarea{
  685. height: 160px;
  686. }
  687. .form_field .form_mandatory .control-label:after{
  688. content: "\002a";
  689. position: relative;
  690. left: 3px;
  691. color: red; /* TODO : SASS this */
  692. font-size: 0.9em;
  693. }
  694. /* Subform field */
  695. .subform_field > fieldset{
  696. margin: inherit;
  697. margin-bottom: 15px; /* TODO : SASS this from .form-group */
  698. padding: 10px 15px;
  699. border: 1px solid #dddddd; /* TODO : SASS this */
  700. border-radius: 4px; /* TODO : SASS this */
  701. }
  702. .subform_field > fieldset > legend{
  703. margin: 0px 0px;
  704. padding: 0px 7px;
  705. width: inherit;
  706. border: none;
  707. font-size: 1em;
  708. font-weight: bold;
  709. color: #777777; /* TODO : SASS this */
  710. }
  711. /* CaseLog field */
  712. .caselog_field_entry{
  713. border: 1px solid #dddddd;
  714. border-top: none;
  715. }
  716. .caselog_field_entry_header{
  717. padding: 6px;
  718. font-size: 1em;
  719. border-bottom: 1px solid #FFFFFF;
  720. background-color: #F2F2F2;
  721. }
  722. .caselog_field_entry_button{
  723. display: block;
  724. width: 15px;
  725. height: 15px;
  726. text-align: center;
  727. line-height: 15px;
  728. font-size: 16px;
  729. border: 1px solid #a6a6a6;
  730. border-bottom-color: #979797;
  731. }
  732. .caselog_field_entry_button:hover{
  733. background-color: #cccccc;
  734. }
  735. .caselog_field_entry_button:before{
  736. content: "▴";
  737. }
  738. .caselog_field_entry_button.collapsed:before{
  739. content: "▾";
  740. }
  741. .caselog_field_entry_content{
  742. margin: 10px;
  743. overflow-x: auto;
  744. }
  745. /* LinkedSet*/
  746. .form_linkedset_toggler,
  747. .form_linkedset_toggler:hover,
  748. .form_linkedset_toggler:focus{
  749. margin-left: 0.4em;
  750. text-decoration: none;
  751. color: inherit;
  752. }
  753. .form_linkedset_toggler > .text:before{
  754. content: "(";
  755. }
  756. .form_linkedset_toggler > .text:after{
  757. content: ")";
  758. }
  759. .form_linkedset_toggler > .glyphicon{
  760. margin-left: 0.5em;
  761. font-size: 0.85em;
  762. color: #EA7D1E; /* TODO : SASS this to primary color */
  763. transition: transform 0.2s linear;
  764. }
  765. .form_linkedset_toggler > .glyphicon.collapsed{
  766. transform: rotateZ(-90deg);
  767. }
  768. /* - DataTables : Loader */
  769. .form_linkedset_wrapper .datatables_overlay{
  770. padding: 8px !important;
  771. }
  772. .form_linkedset_wrapper .overlay_content{
  773. font-size: 0.6em;
  774. }
  775. .form_linkedset_wrapper .content_loader{
  776. margin: 0px;
  777. }
  778. .form_linkedset_wrapper .content_loader .icon{
  779. height: 23px;
  780. }
  781. /* - DataTables : Fit the table in the form */
  782. .form_linkedset_wrapper .dataTables_wrapper{
  783. margin-bottom: 5px;
  784. padding: 0px;
  785. }
  786. /* FileUpload */
  787. .fileupload_field_content{
  788. padding: 8px 23px;
  789. border: 1px solid #DDDDDD; /* TODO : SASS this */
  790. background-color: #F9F9F9; /* TODO : SASS this*/
  791. }
  792. .fileupload_field_content > div{
  793. margin-bottom: 15px;
  794. }
  795. .attachments_container .attachment {
  796. height: 95px;
  797. overflow-x: hidden;
  798. text-align: center;
  799. }
  800. .attachments_container .attachment:hover {
  801. background-color: #e0e0e0;
  802. }
  803. .attachments_container .attachment .attachment_name{
  804. overflow-x: hidden;
  805. text-overflow: ellipsis;
  806. white-space: nowrap;
  807. }
  808. .attachments_container .attachment .btn{
  809. margin-top: 3px;
  810. }
  811. .upload_container input{
  812. display: inline;
  813. }
  814. .upload_container .loader{
  815. visibility: hidden;
  816. margin-left: 7px;
  817. font-size: 1.2em;
  818. animation: spin 1.0s linear infinite;
  819. -webkit-animation: spin 1.0s linear infinite;
  820. -moz-animation: spin 1.0s linear infinite;
  821. -ms-animation: spin 1.0s linear infinite;
  822. }
  823. #drag_overlay{
  824. display: block;
  825. top: inherit;
  826. bottom: 0px;
  827. height: 0px;
  828. }
  829. #drag_overlay .overlay_content{
  830. margin-top: 5em;
  831. width: 100%;
  832. color: white;
  833. }
  834. #drag_overlay .overlay_content .icon{
  835. font-size: 3em;
  836. }
  837. #drag_overlay .overlay_content .message{
  838. font-size: 1.5em;
  839. }
  840. /* Attachments drag & drop zone, only for none mobile devices */
  841. @media (min-width: 768px){
  842. #drag_overlay.drag_in{
  843. animation: show-drop-zone 0.3s ease-out forwards;
  844. -webkit-animation: show-drop-zone 0.3s ease-out forwards;
  845. -moz-animation: show-drop-zone 0.3s ease-out forwards;
  846. -ms-animation: show-drop-zone 0.3s ease-out forwards;
  847. }
  848. #drag_overlay.drag_out{
  849. animation: hide-drop-zone 0.3s ease-out forwards;
  850. -webkit-animation: hide-drop-zone 0.3s ease-out forwards;
  851. -moz-animation: hide-drop-zone 0.3s ease-out forwards;
  852. -ms-animation: hide-drop-zone 0.3s ease-out forwards;
  853. }
  854. @keyframes show-drop-zone{
  855. 100% {
  856. height: 20%;
  857. }
  858. }
  859. @-webkit-keyframes show-drop-zone{
  860. 100% {
  861. height: 20%;
  862. }
  863. }
  864. @-moz-keyframes show-drop-zone{
  865. 100% {
  866. height: 20%;
  867. }
  868. }
  869. @-ms-keyframes show-drop-zone{
  870. 100% {
  871. height: 20%;
  872. }
  873. }
  874. @keyframes hide-drop-zone{
  875. 0% {
  876. height: 20%;
  877. }
  878. 100% {
  879. height: 0%;
  880. }
  881. }
  882. @-webkit-keyframes hide-drop-zone{
  883. 0% {
  884. height: 20%;
  885. }
  886. 100% {
  887. height: 0%;
  888. }
  889. }
  890. @-moz-keyframes hide-drop-zone{
  891. 0% {
  892. height: 20%;
  893. }
  894. 100% {
  895. height: 0%;
  896. }
  897. }
  898. @-ms-keyframes hide-drop-zone{
  899. 0% {
  900. height: 20%;
  901. }
  902. 100% {
  903. height: 0%;
  904. }
  905. }
  906. }
  907. .form_field .form-control-static img{
  908. max-width: 100% !important;
  909. height: initial !important;
  910. }
  911. .form_buttons{
  912. padding-top: 20px;
  913. text-align: center;
  914. }
  915. .form_buttons .form_btn_transitions{
  916. margin-bottom: 20px;
  917. }
  918. .form_buttons .btn .glyphicon{
  919. margin-right: 0.5em;
  920. }
  921. .form_btn_regular.sticky{
  922. display: none;
  923. }
  924. @media (min-width: 768px){
  925. .form_buttons .form_btn_transitions{
  926. float: left !important;
  927. }
  928. .form_buttons .form_btn_regular{
  929. text-align: right;
  930. }
  931. .form_buttons .form_btn_regular btn{
  932. width: inherit;
  933. }
  934. /* Making regular button sticky */
  935. .form_btn_regular.sticky{
  936. display: block;
  937. position: fixed;
  938. bottom: 5em;
  939. right: -2px; /* TODO : SASS this to col-xs-12 padding */
  940. padding: 15px;
  941. background-color: #FFF; /* TODO : SASS this to panel bg */
  942. border: 1px solid #DDD; /* TODO : SASS this to panel border */
  943. border-radius: 4px; /* TODO : SASS this to panel border */
  944. transition: right 0.3s;
  945. }
  946. .form_btn_regular.sticky.closed{
  947. right: -75px;
  948. }
  949. .form_btn_regular.sticky button{
  950. display: block;
  951. }
  952. .form_btn_regular.sticky button:first-child{
  953. margin-bottom: 4px;
  954. }
  955. /* - Adjustments for modal sticky buttons */
  956. .modal.in .form_btn_regular.sticky{
  957. /*right: 15px;*/ /* TODO : SASS this to col-xs-12 padding */
  958. }
  959. }
  960. /* CKEditor : Adding BS error feedback */
  961. .form_field div.cke{
  962. border: 1px solid #dddddd; /* TODO : SASS this */
  963. }
  964. .form_field.has-error div.cke{
  965. border: 1px solid #D9230F; /* TODO : SASS this */
  966. border-radius: 3px; /* TODO : SASS this */
  967. box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  968. }
  969. /* CKEditor : Styling notifications based on BS alerts */
  970. .cke_notification{
  971. position: relative;
  972. padding: 15px;
  973. margin-bottom: 18px;
  974. border: 1px solid transparent;
  975. border-radius: 4px;
  976. background-color: #FFFFFF
  977. }
  978. .cke_notification_close{
  979. position: absolute;
  980. top: 2px;
  981. right: 5px;
  982. }
  983. .cke_notification_message{
  984. margin-bottom: 0px;
  985. line-height: 1em;
  986. font-size: 1em;
  987. }
  988. .cke_notification_success{ /* TODO : SASS this */
  989. display: none;
  990. background-color: #dff0d8;
  991. border-color: #d6e9c6;
  992. color: #468847;
  993. }
  994. .cke_notification_warning{ /* TODO : SASS this */
  995. background-color: #fcf8e3;
  996. border-color: #fbeed5;
  997. color: #c09853;
  998. }
  999. /* DataTables : Selection inputs */
  1000. .dataTable.table th span.row_input,
  1001. .dataTable.table td span.row_input{
  1002. display: inline-block;
  1003. width: 100%;
  1004. text-align: center;
  1005. }