API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 15th, 2019
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.05 KB | None | 0 0
raw download clone embed print report
  1. .project-list-page {
  2. width: $width_page_content;
  3. .project-status {
  4. background-color: white;
  5. box-shadow: -1px 1px 6px 0px #ccc;
  6. padding: 30px;
  7. .project-status-title {
  8. color: #1081e0;
  9. font-family: $font-bold;
  10. margin-bottom: 15px;
  11. font-size: 16px;
  12. }
  13. ul {
  14. width: 100%;
  15. margin-bottom: 0;
  16. padding-left: 0;
  17. li {
  18. border-bottom: dotted 1px #1081e0;
  19. margin-bottom: 15px;
  20. padding-left: 0;
  21. .item-left {
  22. display: inline-block;
  23. }
  24. .item-right {
  25. float: right;
  26. font-family: $font-bold;
  27. display: inline-block;
  28. }
  29. }
  30. }
  31. }
  32. .project-list {
  33. background-color: white;
  34. box-shadow: -1px 1px 6px 0px #ccc;
  35. padding: 30px;
  36. margin-top: 30px;
  37. .box-header {
  38. display: flex;
  39. align-items: center;
  40. margin-bottom: 30px;
  41. h3 {
  42. text-transform: uppercase;
  43. font-family: $font-extrabold;
  44. margin: 0;
  45. }
  46. a.btn-create-new {
  47. background-color: $bg_page;
  48. color: $color_9;
  49. text-align: center;
  50. border-radius: 5px;
  51. padding: 10px 20px;
  52. text-decoration: none;
  53. margin-left: 30px;
  54. border: solid 1px #d9d9d9;
  55. &:hover {
  56. background-color: #1081e0;
  57. color: $color_white
  58. }
  59. }
  60. }
  61. .tableAll {
  62. padding: 15px 0;
  63. }
  64. .table-project {
  65. thead {
  66. tr {
  67. td {
  68. font-family: $font-bold;
  69. }
  70. }
  71. }
  72. tbody {
  73. tr.row-red {
  74. color: #ff625b;
  75. td:first-child {
  76. .dot {
  77. visibility: visible;
  78. }
  79. }
  80. }
  81. tr {
  82. td.spread {
  83. position: relative;
  84. .ticket-menu {
  85. cursor: pointer;
  86. }
  87. .list_menu {
  88. left: auto;
  89. right: 18px;
  90. box-shadow: none;
  91. border-radius: 0;
  92. border: solid 1px #ccc;
  93. padding: 0;
  94. margin: 0;
  95. li {
  96. &:nth-child(2) {
  97. a {
  98. border-top: solid 1px #ccc;
  99. border-bottom: solid 1px #ccc;
  100. }
  101. }
  102. a {
  103. padding: 10px 20px;
  104. transition: all .2s;
  105. &:hover {
  106. background-color: #1081e0;
  107. transition: all .2s;
  108. color: white;
  109. }
  110. }
  111. }
  112. }
  113. }
  114. td.progress-cell {
  115. span {
  116. width: 100%;
  117. display: flex;
  118. align-items: center;
  119. }
  120. .percent {
  121. margin-right: 15px;
  122. color: #333;
  123. }
  124. .progress-double {
  125. width: 40%;
  126. .progress {
  127. height: 7px;
  128. margin-bottom: 7px;
  129. background-color: #d9d9d9;
  130. box-shadow: none;
  131. .progress-bar {
  132. border-radius: 5px;
  133. }
  134. .bg-blue {
  135. background-color: #1081e0;
  136. }
  137. .bg-orange {
  138. background-color: #f58021;
  139. }
  140. &:last-child {
  141. margin-bottom: 0;
  142. }
  143. }
  144. }
  145. }
  146. td:first-child {
  147. .date {
  148. display: inline-block;
  149. }
  150. .dot {
  151. width: 7px;
  152. height: 7px;
  153. background-color: #ff625b;
  154. border-radius: 50%;
  155. display: inline-block;
  156. vertical-align: top;
  157. visibility: hidden;
  158. }
  159. }
  160. &:hover {
  161. color: #1081e0;
  162. transition: all .3s;
  163. td.text-bold {
  164. font-family: $font-bold;
  165. }
  166. }
  167. }
  168. }
  169. }
  170. }
  171. .recent-box {
  172. margin-top: 30px;
  173. .recent-project,
  174. .recent-task {
  175. background-color: white;
  176. box-shadow: -1px 1px 6px 0px #ccc;
  177. padding: 30px;
  178. min-height: 280px;
  179. .recent-title {
  180. color: #1081e0;
  181. font-family: $font-bold;
  182. margin-bottom: 15px;
  183. font-size: 16px;
  184. }
  185. ul {
  186. width: 100%;
  187. margin-bottom: 0;
  188. padding-left: 0;
  189. li {
  190. border-bottom: dotted 1px #1081e0;
  191. margin-bottom: 10px;
  192. padding: 5px 0;
  193. a {
  194. text-decoration: none;
  195. color: #666;
  196. }
  197. .text-code {
  198. font-family: $font-bold;
  199. display: inline-block;
  200. margin: 0 10px;
  201. }
  202. }
  203. li.task-green {
  204. .text-code {
  205. color: #00af68;
  206. }
  207. }
  208. li.task-red {
  209. .text-code {
  210. color: #ff625b;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. }
  217.  
  218. .project-update-page {
  219. background-color: white;
  220. box-shadow: -1px 1px 6px 0px #ccc;
  221. padding: 30px;
  222. height: 100%;
  223. .header-page {
  224. border-bottom: solid 1px #ccc;
  225. margin: -30px -30px 0 -30px;
  226. padding: 45px 30px;
  227. display: flex;
  228. align-items: flex-start;
  229. flex-direction: column;
  230. h1 {
  231. font-size: 24px;
  232. text-transform: uppercase;
  233. font-family: $font-extrabold;
  234. margin: 0;
  235. }
  236. .step-update {
  237. list-style-type: none;
  238. margin: 10px 0 0;
  239. li {
  240. counter-increment: section;
  241. position: relative;
  242. display: inline-block;
  243. color: #999;
  244. padding: 0 30px;
  245. margin: 0 50px 0 0;
  246. &:before {
  247. content: counter(section);
  248. width: 30px;
  249. height: 30px;
  250. background-color: #999999;
  251. color: white;
  252. border-radius: 50%;
  253. position: absolute;
  254. font-family: $font-extrabold;
  255. text-align: center;
  256. vertical-align: middle;
  257. font-size: 20px;
  258. padding-top: 1px;
  259. left: 0;
  260. top: 0;
  261. bottom: 0;
  262. margin: auto;
  263. }
  264. &:after {
  265. width: 75px;
  266. height: 2px;
  267. background-color: #999999;
  268. position: absolute;
  269. top: 20px;
  270. left: -75px;
  271. content: '';
  272. }
  273. &:first-child {
  274. &:after {
  275. display: none;
  276. }
  277. }
  278. &.active,
  279. &:hover {
  280. &:before,
  281. &:after {
  282. background-color: #ff625b;
  283. color: white;
  284. }
  285. a {
  286. color: #ff625b;
  287. font-family: $font-semibolditalic;
  288. border: none;
  289. }
  290. &:nth-of-type(1),
  291. &:nth-of-type(2) {
  292. opacity: 0.7;
  293. }
  294. }
  295. a {
  296. padding: 9px 15px;
  297. }
  298. }
  299. }
  300. }
  301. .container-page {
  302. position: relative;
  303. padding: 0 0 80px;
  304. .content_wiki {
  305. margin: -30px -30px 0 -30px;
  306. border-bottom: solid 1px #ccc;
  307. padding: 30px;
  308. }
  309. .title-content {
  310. font-size: 16px;
  311. color: #1081e0;
  312. font-family: $font-bold;
  313. text-transform: uppercase;
  314. margin: 30px 0;
  315. }
  316. .form-container {
  317. padding: 10px;
  318. .form-groups {
  319. display: flex;
  320. align-items: center;
  321. justify-content: space-between;
  322. margin-bottom: 20px;
  323. input.form-control {
  324. border-radius: 0;
  325. box-shadow: none;
  326. transition: all .3s;
  327. &:focus {
  328. border: solid 1px #1081e0;
  329. }
  330. }
  331. input[type="email"] {
  332. height: 40px;
  333. }
  334. label {
  335. width: 15%;
  336. margin-bottom: 0;
  337. }
  338. .form-input {
  339. width: 85%;
  340. }
  341. .form-select {
  342. width: 85%;
  343. height: 40px;
  344. padding: 0 10px;
  345. }
  346. }
  347. .form-group {
  348. label.title {
  349. font-family: $font-bold;
  350. color: #111;
  351. text-transform: uppercase;
  352. }
  353. }
  354. .form-date {
  355. .duo-date {
  356. width: 59%;
  357. display: flex;
  358. align-items: center;
  359. label {
  360. width: 30%;
  361. }
  362. .form-date {
  363. border: solid 1px #ccc;
  364. height: 40px;
  365. display: flex;
  366. align-items: center;
  367. padding: 10px;
  368. width: 70%;
  369. position: relative;
  370. justify-content: space-between;
  371. input[type="date"] {
  372. border: none;
  373. outline: none;
  374. width: 95%;
  375. background: none;
  376. }
  377. .icon-date {
  378. margin-left: 10px;
  379. }
  380. span.help-block {
  381. position: absolute;
  382. bottom: -30px;
  383. left: 0;
  384. }
  385. }
  386. &:last-child {
  387. label {
  388. width: 20%;
  389. margin-left: 71px;
  390. }
  391. }
  392. }
  393. }
  394. .form-group-task {
  395. width: 100%;
  396. display: inline-block;
  397. margin: 0 0 25px 0;
  398. }
  399. .form-task {
  400. background-color: #f4f6fb;
  401. border: solid 1px #d9d9d9;
  402. padding: 20px 30px;
  403. .form-date .duo-date .form-date,
  404. input {
  405. background-color: #fff;
  406. margin-bottom: 0;
  407. }
  408. .remark {
  409. display: inline-block;
  410. margin-left: 15px;
  411. i {
  412. font: {
  413. family: $font-italic;
  414. size: 14px;
  415. }
  416. color: #999;
  417. width: 100%;
  418. display: inline-block;
  419. margin-bottom: 20px;
  420. }
  421. button {
  422. background-color: #999999;
  423. color: white;
  424. &:hover {
  425. background-color: #1081e0;
  426. }
  427. padding: 5px 17px;
  428. }
  429. }
  430. .form-group {
  431. margin-bottom: 0;
  432. }
  433. .title_task {
  434. display: none;
  435. font: {
  436. family: $font-extrabold;
  437. size: 16px;
  438. }
  439. color: #111;
  440. }
  441. }
  442. }
  443. .form-container.milestone {
  444. display: flex;
  445. justify-content: space-between;
  446. margin: 0;
  447. position: relative;
  448. a.remove-milestone {
  449. position: absolute;
  450. right: 15px;
  451. top: 13px;
  452. img {
  453. width: 20px;
  454. height: 20px;
  455. }
  456. }
  457. .list_milestone {
  458. margin-right: 50px;
  459. position: relative;
  460. li {
  461. width: 40px;
  462. height: 40px;
  463. display: inline-block;
  464. background-color: #ff625b;
  465. border-radius: 100%;
  466. @include text(center);
  467. color: $color_white;
  468. font: {
  469. family: $font-extrabold;
  470. size: 20px;
  471. }
  472. text-transform: uppercase;
  473. padding: 6px;
  474. &:after {
  475. content: '';
  476. display: inline-block;
  477. width: 2px;
  478. height: 100%;
  479. background-color: #5e9dd1;
  480. left: 0;
  481. right: 0;
  482. margin: auto;
  483. position: absolute;
  484. top: 40px;
  485. }
  486. }
  487. & .button_addmore {
  488. content: '';
  489. display: inline-block;
  490. background-image: url('../../../public/images/icon_plus.png');
  491. width: 40px;
  492. height: 40px;
  493. position: absolute;
  494. bottom: -45px;
  495. background-color: #ff625b;
  496. border-radius: 100%;
  497. background-position: center;
  498. background-repeat: no-repeat;
  499. }
  500. }
  501. }
  502. .form-container.system {
  503. background-color: #f4f6fb;
  504. margin: 0 15px;
  505. padding: 35px 15px 15px;
  506. input[type="text"] {
  507. border-radius: 0;
  508. }
  509. }
  510. .group-button {
  511. margin: 20px 0 10px 10px;
  512. position: absolute;
  513. bottom: -20px;
  514. a {
  515. display: inline-block;
  516. margin-right: 15px;
  517. border-radius: 5px;
  518. text-align: center;
  519. padding: 10px;
  520. text-decoration: none;
  521. }
  522. .btn-next {
  523. background-color: #1081e0;
  524. color: white;
  525. width: 300px;
  526. border: solid 1px transparent;
  527. }
  528. .btn-cancel {
  529. background-color: #f4f6fb;
  530. color: #666;
  531. padding: 10px 25px;
  532. border: solid 1px #ccc;
  533. }
  534. }
  535. }
  536. }
  537.  
  538. .mt-35 {
  539. margin-top: 35px;
  540. }
  541.  
  542. .form-create.bottom {
  543. padding-top: 20px;
  544. border-top: solid 1px #d9d9d9;
  545. }
  546.  
  547. .content.serivce .tab_proj_show {
  548. @include display_full;
  549. @include text(center);
  550. margin-bottom: 50px !important;
  551. border-bottom: solid 2px $bg_page !important;
  552. li {
  553. float: inherit !important;
  554. display: inline-block !important;
  555. a {
  556. color: $color_6;
  557. font-family: $font-bold;
  558. &:hover {
  559. background-color: transparent !important;
  560. border: none !important;
  561. }
  562. }
  563. &.active a,
  564. &:hover a {
  565. border: none !important;
  566. color: $bg_sale !important;
  567. cursor: pointer !important;
  568. position: relative;
  569. &:before {
  570. content: '';
  571. display: inline-block;
  572. width: 50px;
  573. height: 2px;
  574. background-color: $bg_sale;
  575. left: 0;
  576. right: 0;
  577. bottom: -2px;
  578. position: absolute;
  579. @include margin_auto;
  580. }
  581. }
  582. }
  583. }
  584.  
  585. .basicInfomation {
  586. margin: 0 30px;
  587. }
  588.  
  589. ul.content_basic {
  590. @include display_full;
  591. background-color: $bg_page;
  592. padding: 25px 25px 5px;
  593. li {
  594. display: grid;
  595. grid-template-columns: repeat(3, 1fr);
  596. margin: 0 0 20px 0;
  597. p {
  598. margin: 0;
  599. }
  600. .status {
  601. font-family: $font-bold;
  602. color: $color_333;
  603. }
  604. .state {
  605. color: #0095d2;
  606. }
  607. }
  608. }
  609.  
  610. .projectWiki {
  611. @extend .basicInfomation;
  612. h5 {
  613. font: {
  614. size: 16px;
  615. family: $font-bold;
  616. }
  617. margin-bottom: 15px;
  618. color: #111;
  619. }
  620. .specification {
  621. margin-bottom: 35px;
  622. }
  623. .list_system {
  624. display: grid;
  625. grid-template-columns: repeat(2, 1fr);
  626. grid-gap: 30px;
  627. margin-bottom: 30px;
  628. .grid-items.content_system {
  629. background-color: $bg_page;
  630. padding: 25px 30px 0;
  631. h5 {
  632. text-transform: uppercase;
  633. }
  634. li {
  635. display: grid;
  636. grid-template-columns: repeat(3, 1fr);
  637. margin: 0 0 20px 0;
  638. }
  639. }
  640. .grid-items.note_proj {
  641. background-color: #5e9dd1;
  642. color: $color_white;
  643. position: relative;
  644. padding: 25px 30px;
  645. border-radius: 14px;
  646. &:before {
  647. background-image: url('../../../public/images/paperclip.png');
  648. width: 43px;
  649. height: 39px;
  650. display: inline-block;
  651. content: '';
  652. position: absolute;
  653. top: 0;
  654. right: 0;
  655. background-repeat: no-repeat;
  656. background-position: center;
  657. }
  658. h4 {
  659. text-transform: uppercase;
  660. font-family: $font-extrabold;
  661. }
  662. .edit_proj {
  663. background-color: transparent;
  664. border: none;
  665. }
  666. .content_note {
  667. margin-top: 20px;
  668. margin-bottom: 20px;
  669. p {
  670. border-bottom: dotted 1px;
  671. }
  672. }
  673. .attach_file {
  674. .title_attach {
  675. font-family: $font-bold;
  676. float: left;
  677. margin-right: 45px;
  678. }
  679. }
  680. &.history {
  681. background-color: #799ab5;
  682. &:before {
  683. display: none;
  684. }
  685. .list_history {
  686. height: 147px;
  687. overflow-y: auto;
  688. li {
  689. margin-bottom: 20px;
  690. border-bottom: dotted 1px;
  691. }
  692. }
  693. }
  694. }
  695. }
  696. }
  697. /** Project Detail **/
  698.  
  699. .project-detail-page {
  700. .container-page {
  701. padding: 0 30px;
  702. }
  703. .tab-content > .tab-pane,
  704. .pill-content > .pill-pane {
  705. display: block;
  706. height: 0;
  707. overflow-y: hidden;
  708. }
  709. .tab-content > .active,
  710. .pill-content > .active {
  711. height: auto;
  712. }
  713. }
  714.  
  715.  
  716. .title_service {
  717. .change_status {
  718. background-color: #00af68;
  719. color: #fff;
  720. width: 190px;
  721. display: inline-block;
  722. height: 27px;
  723. padding-left: 15px;
  724. border-radius: 999px;
  725. outline: none;
  726. }
  727. }
  728. .tab-content {
  729. .basicInfomation {
  730. .edit {
  731. float: left;
  732. margin-top: 15px;
  733. a {
  734. border: 1px solid rgb(16, 129, 224);
  735. padding: 15px 28px;
  736. background-color: rgb(16, 129, 224);
  737. color: white;
  738. border-radius: 4px;
  739. }
  740. }
  741. .timing_project {
  742. display: inline-block;
  743. width: 99%;
  744. margin-top: 50px;
  745. .title_timing {
  746. display: inline-block;
  747. width: 100%;
  748. h5 {
  749. color: #1081e0;
  750. font-weight: bold;
  751. font-size: 16px;
  752. }
  753. select.view_week {
  754. border-radius: 999px;
  755. background-color: #f4f6fb;
  756. padding: 5px 0px 5px 20px;
  757. outline: none;
  758. }
  759. }
  760. .content_timing {
  761. display: inline-block;
  762. width: 100%;
  763. background: #fff;
  764. margin: 20px 1px;
  765. position: relative;
  766. .grip_chart_custom {
  767. .grip_chart {
  768. height: 10em;
  769. th {
  770. border: 1px solid #d9d9d9;
  771. }
  772. }
  773. .time_point {
  774. color: #999999;
  775. }
  776. }
  777. .full_time {
  778. display: inline-block;
  779. width: 100%;
  780. background: #d9d9d9;
  781. height: 40px;
  782. margin-top: 15px;
  783. position: absolute;
  784. top: 5px;
  785. .time_value {
  786. display: inline-block;
  787. background: #5e9dd1;
  788. height: 40px;
  789. p {
  790. color: #fff;
  791. margin-top: 10px;
  792. margin-left: 15px;
  793. }
  794. }
  795. }
  796. }
  797. }
  798. }
  799. .btn-create-block {
  800. width: 100%;
  801. background: #fff;
  802. border: dashed 1px #1081e0;
  803. height: 50px;
  804. color: #1081e0;
  805. border-radius: 0;
  806. font-family: $font-bold;
  807. &:hover {
  808. color: #1081e0;
  809. }
  810. }
  811. #backlog {
  812. .sprint-wrapper {
  813. border: solid 1px #d9d9d9;
  814. margin-top: 30px;
  815. transition: opacity .3s ease-out;
  816. //check status sprint
  817. &.active-sprint {
  818. .sprint-status {
  819. background-color: #00af68;
  820. }
  821. }
  822. &.closed-sprint {
  823. .sprint-status {
  824. background-color: #999;
  825. }
  826. }
  827. &.dropdown-show {
  828. .box-header {
  829. .icon-dropdown {
  830. background: #1081e0!important;
  831. color: white!important;
  832. transform: rotate(-90deg)!important;
  833. }
  834. }
  835. .list-task {
  836. max-height: none!important;
  837. }
  838. }
  839. .box-header {
  840. background-color: #f4f6fb;
  841. border-bottom: solid 1px #d9d9d9;
  842. height: 50px;
  843. padding: 15px;
  844. cursor: pointer;
  845. &:hover {
  846. background-color: #eaeaea;
  847. }
  848. .icon-dropdown {
  849. float: left;
  850. background: transparent;
  851. color: #1081e0;
  852. border: solid 1px #1081e0;
  853. transform: rotate(90deg);
  854. width: 20px;
  855. height: 20px;
  856. border-radius: 5px;
  857. display: flex;
  858. align-items: center;
  859. justify-content: center;
  860. }
  861. .sprint-name {
  862. font-family: $font-bold;
  863. float: left;
  864. margin: 0 10px;
  865. color: #1081e0;
  866. }
  867. .sprint-task {
  868. color: #999;
  869. float: left;
  870. }
  871. .sprint-status {
  872. color: white;
  873. float: right;
  874. border-radius: 20px;
  875. padding: 1px 10px;
  876. }
  877. }
  878. .member-list {
  879. padding: 14px 14px 20px;
  880. clear: both;
  881. ul.list-avatar {
  882. margin: 0!important;
  883. display: inline-block;
  884. vertical-align: middle;
  885. float: left;
  886. li {
  887. float: left;
  888. margin-right: 7px;
  889. display: inline-block;
  890. a {
  891. display: block;
  892. width: 25px;
  893. height: 25px;
  894. border-radius: 50%;
  895. overflow: hidden;
  896. background-color: #d9d9d9;
  897. img {
  898. width: 100%;
  899. }
  900. }
  901. }
  902. }
  903. .btn-show-member {
  904. display: inline-block;
  905. width: 25px;
  906. height: 25px;
  907. border-radius: 50%;
  908. background-color: #d9d9d9;
  909. vertical-align: middle;
  910. float: left;
  911. text-align: center;
  912. padding-top: 3px;
  913. color: #666;
  914. margin-right: 20px;
  915. }
  916. .text-due-date {
  917. color: #666;
  918. display: inline-block;
  919. vertical-align: middle;
  920. }
  921. .btn-edit-sprint {
  922. border-radius: 5px;
  923. display: inline-block;
  924. float: right;
  925. padding: 3px 10px;
  926. color: #666;
  927. vertical-align: middle;
  928. border: solid 1px #ccc;
  929. &:hover {
  930. text-decoration: none;
  931. }
  932. }
  933. }
  934. .list-task {
  935. display: block;
  936. margin: 0;
  937. clear: both;
  938. max-height: 0;
  939. overflow: hidden;
  940. li {
  941. padding: 9px 15px 7px;
  942. display: block;
  943. border-top: solid 1px #d9d9d9;
  944. overflow: auto;
  945. width: 100%;
  946. background-color: #fff;
  947. clear: both;
  948. &:hover {
  949. background-color: #f4f6fb;
  950. cursor: move;
  951. }
  952. .item-left {
  953. display: inline-block;
  954. float: left;
  955. .task-icon {
  956. width: 20px;
  957. height: 20px;
  958. float: left;
  959. display: inline-block;
  960. background-repeat: no-repeat;
  961. }
  962. .task-code {
  963. font-family: $font-bold;
  964. margin: 0 10px;
  965. float: left;
  966. display: inline-block;
  967. }
  968. .task-name {
  969. display: inline-block;
  970. float: left;
  971. color: #666;
  972. }
  973. }
  974. .item-right {
  975. float: right;
  976. display: inline-block;
  977. .assignee {
  978. width: 24px;
  979. height: 24px;
  980. border-radius: 50%;
  981. overflow: hidden;
  982. display: inline-block;
  983. float: left;
  984. img {
  985. width: 100%;
  986. }
  987. }
  988. .estimate {
  989. background-color: #f4f6fb;
  990. border-radius: 20px;
  991. border: solid 1px #d9d9d9;
  992. color: #666;
  993. font-size: 13px;
  994. margin: 0 7px;
  995. padding: 2px 7px;
  996. }
  997. .link-edit {
  998. background-color: #f4f6fb;
  999. border-radius: 10px;
  1000. border: solid 1px #d9d9d9;
  1001. color: #666;
  1002. display: inline-block;
  1003. padding: 0 7px;
  1004. }
  1005. }
  1006. }
  1007. //task story
  1008. li.story {
  1009. .task-icon {
  1010. background-image: url("../../public/images/icon-droplets.png");
  1011. }
  1012. .task-code {
  1013. color: $color_story_green;
  1014. }
  1015. }
  1016. //task bug
  1017. li.bug {
  1018. .task-icon {
  1019. background-image: url("../../public/images/icon-task-setting.png");
  1020. }
  1021. .task-code {
  1022. color: $color_bug_red;
  1023. }
  1024. }
  1025. //task task
  1026. li.task {
  1027. .task-icon {
  1028. background-image: url("../../public/images/icon-fly-flag.png");
  1029. }
  1030. .task-code {
  1031. color: $color_task_blue;
  1032. }
  1033. }
  1034. }
  1035. }
  1036. .backlog {
  1037. margin-bottom: 30px;
  1038. .box-header {
  1039. border-bottom: none;
  1040. }
  1041. .box-footer {
  1042. padding: 15px;
  1043. background-color: #f4f6fb;
  1044. border-top: solid 1px #d9d9d9;
  1045. .btn-create-block {
  1046. background: transparent;
  1047. }
  1048. }
  1049. }
  1050. .create-sprint-form {
  1051. display: none;
  1052. .box-header-new {
  1053. padding: 10px;
  1054. border-bottom: solid 1px #d9d9d9;
  1055. height: 50px;
  1056. display: flex;
  1057. flex-direction: row;
  1058. align-items: center;
  1059. background-color: #f4f6fb;
  1060. .icon-dropdown {
  1061. float: left;
  1062. border: solid 1px #1081e0;
  1063. width: 20px;
  1064. height: 20px;
  1065. border-radius: 5px;
  1066. display: flex;
  1067. align-items: center;
  1068. justify-content: center;
  1069. background: #1081e0;
  1070. color: white;
  1071. transform: rotate(-90deg);
  1072. }
  1073. .sprint-name {
  1074. margin-left: 5px;
  1075. margin-right: 10px;
  1076. input {
  1077. height: 30px;
  1078. padding-left: 10px;
  1079. font-family: $font-bold;
  1080. color: #1081e0;
  1081. float: left;
  1082. outline: none;
  1083. background: transparent;
  1084. border: solid 1px #d9d9d9;
  1085. }
  1086. .icon-sprint {
  1087. height: 30px;
  1088. width: 30px;
  1089. display: inline-block;
  1090. color: white;
  1091. background-color: #009dd7;
  1092. text-align: center;
  1093. padding-top: 5px;
  1094. }
  1095. }
  1096. .sprint-task {
  1097. color: #999;
  1098. }
  1099. }
  1100. .form-date {
  1101. padding: 15px;
  1102. .estimate-day {
  1103. clear: both;
  1104. overflow: auto;
  1105. .start-date {
  1106. float: left;
  1107. &:first-child {
  1108. margin-right: 15px;
  1109. }
  1110. label {
  1111. color: #999;
  1112. margin-right: 5px;
  1113. }
  1114. input {
  1115. outline: none;
  1116. height: 30px;
  1117. border: solid 1px #d9d9d9;
  1118. padding-left: 10px;
  1119. }
  1120. }
  1121. }
  1122. .group-btn {
  1123. margin-top: 30px;
  1124. button {
  1125. border-radius: 5px;
  1126. text-align: center;
  1127. padding: 10px 25px;
  1128. }
  1129. .btn-create {
  1130. background-color: #1081e0;
  1131. color: white;
  1132. margin-right: 7px;
  1133. }
  1134. .btn-cancel {
  1135. background-color: #f4f6fb;
  1136. border: solid 1px #d9d9d9;
  1137. }
  1138. }
  1139. }
  1140. }
  1141. }
  1142. }
  1143.  
  1144.  
  1145. /** Project Wiki **/
  1146.  
  1147. .projectWiki {
  1148. .button_view {
  1149. a {
  1150. background-color: #999999;
  1151. padding: 9px 19px;
  1152. color: #fff;
  1153. border-radius: 4px;
  1154. &:hover {
  1155. background-color: #1081e0;
  1156. color: white;
  1157. }
  1158. }
  1159. }
  1160. }
  1161.  
  1162. #edit_proj {
  1163. .modal-header {
  1164. .modal-title {
  1165. color: #666666;
  1166. }
  1167. .modal-title2 {
  1168. display: flex;
  1169. p {
  1170. margin-right: 15px;
  1171. }
  1172. }
  1173. }
  1174. .modal-footer {
  1175. .btn-default {
  1176. background-color: #f4f6fb;
  1177. padding: 13px 43px;
  1178. color: #000;
  1179. }
  1180. }
  1181. .modal-body {
  1182. margin-top: 15px;
  1183. h4.tile-modal-system {
  1184. font-weight: bold;
  1185. position: absolute;
  1186. top: -40px;
  1187. left: 0px;
  1188. text-transform: uppercase;
  1189. }
  1190. .list_system {
  1191. display: grid;
  1192. grid-template-columns: repeat(2, 1fr);
  1193. grid-gap: 30px;
  1194. margin-bottom: 30px;
  1195. .grid-items.content_system {
  1196. background-color: $bg_page;
  1197. padding: 25px 30px 0;
  1198. position: relative;
  1199. h5 {
  1200. text-transform: uppercase;
  1201. }
  1202. li {
  1203. @include display_flex;
  1204. width: 70%;
  1205. padding: 5px 0 5px 40px;
  1206. }
  1207. }
  1208. }
  1209. }
  1210. }
  1211. /** Project Milestone **/
  1212. .milestone{
  1213. margin: 0 30px;
  1214. .title_milestone{
  1215. h5{
  1216. color: #1081e0;
  1217. font-weight: bold;
  1218. font-size: 16px;
  1219. }
  1220. }
  1221. .content_milestone{
  1222. float: left;
  1223. display: inline-block;
  1224. width: 95%;
  1225. padding-left: 2%;
  1226. margin-left: 2%;
  1227. border-left: 2px solid #999999;
  1228. .content_milestone_main {
  1229. margin-top:20px;
  1230. background-color: #f4f6fb;
  1231. .title_miles_detal {
  1232. padding: 10px 0px 0px 20px;
  1233. display: inline-block;
  1234. width: 100%;
  1235. background-color: #5e9dd1;
  1236. color: #fff;
  1237. font-weight: bold;
  1238. position: relative;
  1239. p{
  1240. &:after {
  1241. width: 50px;
  1242. height: 50px;
  1243. display: inline-block;
  1244. content: "1";
  1245. position: absolute;
  1246. top: 0px;
  1247. left: -39px;
  1248. font-size: 25px;
  1249. }
  1250.  
  1251. &:before {
  1252. background-image: url(/images/sale.png?de4c8d2…);
  1253. width: 50px;
  1254. height: 50px;
  1255. display: inline-block;
  1256. content: "";
  1257. position: absolute;
  1258. top: -5px;
  1259. left: -58px;
  1260. background-repeat: no-repeat;
  1261. background-position: center;
  1262. }
  1263. }
  1264. }
  1265. .milestone_detal {
  1266. padding: 30px 30px;
  1267. li {
  1268. display: grid;
  1269. grid-template-columns: repeat(3, 1fr);
  1270. margin: 0 0 20px 0;
  1271. }
  1272. .button_miles_detal{
  1273. a{
  1274. background-color: #999999;
  1275. padding: 9px 19px;
  1276. color: #fff;
  1277. border-radius: 4px;
  1278. &:hover{
  1279. background-color: #1081e0;
  1280. color: white;
  1281. }
  1282. }
  1283. }
  1284. }
  1285. }
  1286. .content_milestone_sm {
  1287. display: grid;
  1288. grid-template-columns: repeat(4, 1fr);
  1289. grid-gap: 30px;
  1290. .compoment_miles_demo{
  1291. display: inline-block;
  1292. width: 100%;
  1293. background-color: #f4f6fb;
  1294. .miles_demo_title{
  1295. position: relative;
  1296. background-color: #5e9dd1;
  1297. display: flex;
  1298. width: 100%;
  1299. padding: 10px 0px 0px 20px;
  1300. color: #fff;
  1301. font-weight: bold;
  1302. .btn_edit{
  1303. border: 1px solid #fff;
  1304. width: 25px;
  1305. height: 25px;
  1306. border-radius: 5px;
  1307. position: absolute;
  1308. right: 7px;
  1309. top: 8px;
  1310. color: #fff;
  1311. &:before {
  1312. width: 0px;
  1313. content: "...";
  1314. position: absolute;
  1315. top: -9px;
  1316. right: 19px;
  1317. font-size: 20px;
  1318. }
  1319. &:hover{
  1320. color: #3C00FF;
  1321. border-color: #3C00FF;
  1322. }
  1323. }
  1324. }
  1325. .miles_demo_content {
  1326. padding: 20px 30px 5px 20px;
  1327. li {
  1328. display: grid;
  1329. grid-template-columns: repeat(3, 1fr);
  1330. margin: 0 0 5px 0;
  1331. }
  1332. }
  1333. }
  1334. }
  1335. .timing_task{
  1336. margin-top: 30px;
  1337. display: inline-block;
  1338. width: 100%;
  1339. .timeline{
  1340. width: 100%;
  1341. svg {
  1342. background: #fff;
  1343. g:nth-child(2) {
  1344. rect {fill: transparent;}
  1345. }
  1346. path {
  1347. stroke: rgb(230, 230, 230);
  1348. }
  1349. }
  1350. }
  1351. .title_timing_task{
  1352. display: inline-block;
  1353. width: 100%;
  1354. h5{
  1355. float: left;
  1356. color: #1081e0;
  1357. font-weight: bold;
  1358. font-size: 16px;
  1359. }
  1360. }
  1361. }
  1362. }
  1363. }
  1364.  
  1365.  
  1366.  
  1367. /** Active Sprint **/
  1368.  
  1369. #active-sprint {
  1370. padding: 0 30px;
  1371. .sprint-header {
  1372. margin-bottom: 15px;
  1373. clear: both;
  1374. overflow: auto;
  1375. .sprint-name {
  1376. font-family: $font-bold;
  1377. color: #1081e0;
  1378. float: left;
  1379. margin-right: 15px;
  1380. }
  1381. .sprint-task {
  1382. color: #999;
  1383. float: left;
  1384. }
  1385. }
  1386.  
  1387. .form-quick-create-task {
  1388. margin-bottom: 15px;
  1389. form {
  1390. height: 40px;
  1391. border: solid 1px #d9d9d9;
  1392. padding: 10px;
  1393. display: flex;
  1394. align-items: center;
  1395. .dropdown {
  1396. margin-right: 10px;
  1397. .dropdown-toggle {
  1398. cursor: pointer;
  1399. color: #999;
  1400. display: flex;
  1401. align-items: center;
  1402. .display-type {
  1403. margin-right: 5px;
  1404. }
  1405. }
  1406. .dropdown-menu {
  1407. //display: flex;
  1408. flex-direction: column;
  1409. padding: 5px;
  1410. min-width: auto;
  1411. a {
  1412. display: block;
  1413. margin-bottom: 5px;
  1414. }
  1415. }
  1416. }
  1417. }
  1418. .form-select-type {
  1419. .form-select-type {
  1420.  
  1421. }
  1422. }
  1423. input {
  1424. border: none;
  1425. outline: none;
  1426. width: 100%;
  1427. }
  1428. b {
  1429. font-family: $font-bold;
  1430. }
  1431. .description-form {
  1432. margin-top: 10px;
  1433. display: block;
  1434. }
  1435. }
  1436.  
  1437. .pool-column {
  1438. display: flex;
  1439. -ms-flex-direction: column;
  1440. flex-direction: column;
  1441. flex-grow: 1;
  1442. margin-top: 10px;
  1443. .column-header-group {
  1444. overflow: visible;
  1445. position: -webkit-sticky;
  1446. position: sticky;
  1447. top: 0;
  1448. margin: 0;
  1449. ul.column-headers {
  1450. display: grid;
  1451. grid-column-gap: 10px;
  1452. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1453. overflow: visible;
  1454. li {
  1455. grid-row: 1;
  1456. min-width: 200px;
  1457. background: #fff;
  1458. border-bottom: 5px solid #f4f5f7;
  1459. padding: 12px 9px;
  1460. padding-top: 17px;
  1461. display: flex;
  1462. align-items: center;
  1463. h5, span {
  1464. color: #5e6c84;
  1465. text-transform: uppercase;
  1466. display: inline-block;
  1467. margin: 0 5px 0 0;
  1468. white-space: nowrap;
  1469. overflow: hidden;
  1470. text-overflow: ellipsis;
  1471. }
  1472. }
  1473. }
  1474. }
  1475.  
  1476. .pool {
  1477. flex-grow: 0;
  1478. flex-shrink: 5;
  1479. margin-bottom: 30px;
  1480. .swimlane {
  1481. display: grid;
  1482. margin-top: 30px;
  1483. .swimlane-header {
  1484. border: solid 1px #d9d9d9;
  1485. display: flex;
  1486. flex-direction: row;
  1487. align-items: center;
  1488. background-color: #fff;
  1489. padding: 5px 7px;
  1490. .icon-expand {
  1491. color: #999;
  1492. display: inline-block;
  1493. margin-right: 10px;
  1494. }
  1495. .task-parent-icon {
  1496. width: 20px;
  1497. height: 20px;
  1498. background-repeat: no-repeat;
  1499. }
  1500. .task-parent-code {
  1501. font-family: $font-bold;
  1502. margin: 0 10px;
  1503. }
  1504. .task-parent-status {
  1505. background-color: #f4f6fb;
  1506. border-radius: 5px;
  1507. border: solid 1px #d9d9d9;
  1508. color: #333;
  1509. padding: 0 10px;
  1510. }
  1511. .task-parent-name {
  1512. margin: 0 10px;
  1513. }
  1514. .qty-sub-task {
  1515. color: #999;
  1516. }
  1517. }
  1518.  
  1519. .columns {
  1520. display: grid;
  1521. grid-column-gap: 10px;
  1522. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1523. overflow: visible;
  1524. box-sizing: border-box;
  1525. border-spacing: 10px 0;
  1526. list-style: none;
  1527. margin: 0;
  1528. width: 100%;
  1529. padding: 0;
  1530.  
  1531. li.column {
  1532. grid-row: 1;
  1533. min-width: 200px;
  1534. background: #f4f5f7;
  1535. -moz-box-sizing: border-box;
  1536. -webkit-box-sizing: border-box;
  1537. box-sizing: border-box;
  1538. display: table-cell;
  1539. list-style: none;
  1540. margin: 0;
  1541. padding: 1px 0 0;
  1542. position: relative;
  1543. vertical-align: top;
  1544. //height: 200px;
  1545. .sub-task {
  1546. border: solid 1px #d9d9d9;
  1547. border-top: none;
  1548. padding: 10px;
  1549. height: 130px;
  1550. background-color: #fff;
  1551. display: flex;
  1552. flex-direction: column;
  1553. cursor: move;
  1554. &:hover {
  1555. background: #f2f2f3;
  1556. }
  1557. .card-content {
  1558. min-height: 75px;
  1559. position: relative;
  1560. .info {
  1561. float: left;
  1562. display: flex;
  1563. flex-direction: column;
  1564. justify-content: center;
  1565. margin-right: 10px;
  1566. .sub-task-type {
  1567. background-repeat: no-repeat;
  1568. width: 20px;
  1569. height: 20px;
  1570. margin-bottom: 7px;
  1571. }
  1572. .priority {
  1573. background-repeat: no-repeat;
  1574. width: 20px;
  1575. height: 20px;
  1576. background-image: url("../../public/images/icon-arrow-up-orange.png");
  1577. background-position: center;
  1578. }
  1579. .priority.very-high {
  1580. background-image: url("../../public/images/icon-double-arrow-up-red.png");
  1581. }
  1582. .priority.high {
  1583. background-image: url("../../public/images/icon-arrow-up-orange.png");
  1584. }
  1585. .priority.very-low {
  1586. background-image: url("../../public/images/icon-double-arrow-down-green.png");
  1587. }
  1588. .priority.low {
  1589. background-image: url("../../public/images/icon-arrow-down-green.png");
  1590. }
  1591. }
  1592. .sub-task-name {
  1593. display: flex;
  1594. flex-direction: column;
  1595. justify-content: center;
  1596. float: left;
  1597. max-width: 125px;
  1598. .code {
  1599. font-family: $font-bold;
  1600. }
  1601. .name {
  1602. display: block;
  1603. overflow: hidden;
  1604. word-wrap: break-word;
  1605. color: #333;
  1606. max-height: 50px;
  1607. text-overflow: ellipsis;
  1608. display: -webkit-box;
  1609. -webkit-line-clamp: 2;
  1610. }
  1611. }
  1612. .sub-task-avatar {
  1613. width: 20px;
  1614. height: 20px;
  1615. overflow: hidden;
  1616. border-radius: 50%;
  1617. position: absolute;
  1618. right: 0;
  1619. img {
  1620. width: 100%;
  1621. }
  1622. }
  1623. }
  1624. .card-footer {
  1625. display: flex;
  1626. align-items: flex-end;
  1627. justify-content: flex-end;
  1628. margin-top: 10px;
  1629. .estimate {
  1630. background-color: #f4f6fb;
  1631. border-radius: 20px;
  1632. padding: 0px 8px;
  1633. color: #333;
  1634. border: solid 1px #d9d9d9;
  1635. }
  1636. .link-sub-task {
  1637. background-color: #f4f6fb;
  1638. border-radius: 5px;
  1639. padding: 0px 5px;
  1640. color: #333;
  1641. border: solid 1px #d9d9d9;
  1642. margin-left: 5px;
  1643. }
  1644. }
  1645. }
  1646. .sub-task.issue-sub-story {
  1647. .card-content {
  1648. .sub-task-type {
  1649. background-image: url("../../public/images/icon-droplets.png");
  1650. }
  1651. .sub-task-name {
  1652. color: $color_story_green;
  1653. }
  1654. }
  1655. }
  1656. .sub-task.issue-sub-bug {
  1657. .card-content {
  1658. .sub-task-type {
  1659. background-image: url("../../public/images/icon-task-setting.png");
  1660. }
  1661. .sub-task-name {
  1662. color: $color_bug_red;
  1663. }
  1664. }
  1665. }
  1666. .sub-task.issue-sub-task {
  1667. .card-content {
  1668. .sub-task-type {
  1669. background-image: url("../../public/images/icon-fly-flag.png");
  1670. }
  1671. .sub-task-name {
  1672. color: $color_task_blue;
  1673. }
  1674. }
  1675. }
  1676. }
  1677.  
  1678. li.column.issue-drag-process {
  1679. //border: dashed 2px #1081e0;
  1680. }
  1681. }
  1682. }
  1683. .swimlane.issue-parent-story {
  1684. .task-parent-icon {
  1685. background-image: url("../../public/images/icon-droplets.png");
  1686. }
  1687. .task-parent-code {
  1688. color: $color_story_green;
  1689. }
  1690. }
  1691. .swimlane.issue-parent-bug {
  1692. .task-parent-icon {
  1693. background-image: url("../../public/images/icon-task-setting.png");
  1694. }
  1695. .task-parent-code {
  1696. color: $color_bug_red;
  1697. }
  1698. }
  1699. .swimlane.issue-parent-task {
  1700. .task-parent-icon {
  1701. background-image: url("../../public/images/icon-fly-flag.png");
  1702. }
  1703.  
  1704. .task-parent-code {
  1705. color: $color_task_blue;
  1706. }
  1707. }
  1708. .swimlane.task-opened {
  1709. .swimlane-header {
  1710. .icon-expand {
  1711. transform: rotate(180deg);
  1712. }
  1713. }
  1714. }
  1715. }
  1716. }
  1717. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!