diagram.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. .diagramBlock {
  2. background: white;
  3. width: 200px;
  4. border: 4px solid black;
  5. &.input {
  6. background: green;
  7. color:white;
  8. }
  9. &.attribute {
  10. background: orange;
  11. }
  12. &.output {
  13. background: blue;
  14. color:white;
  15. .inputs {
  16. color:white;
  17. }
  18. }
  19. .header {
  20. margin: 10px;
  21. font-size: 16px;
  22. text-align: center;
  23. white-space: nowrap;
  24. text-overflow: ellipsis;
  25. overflow: hidden;
  26. }
  27. .value {
  28. height: 34px;
  29. text-align: center;
  30. font-size: 20px;
  31. font-weight: bold;
  32. }
  33. .inputs {
  34. .input-port {
  35. display: grid;
  36. grid-template-columns: 4px calc(100% - 4px);
  37. grid-template-rows: 100%;
  38. .input-port-plug {
  39. grid-column: 1;
  40. grid-row: 1;
  41. display: grid;
  42. align-content: center;
  43. margin-left: -11px;
  44. .srd-port {
  45. background: grey;
  46. }
  47. }
  48. .input-port-label {
  49. margin-left: 10px;
  50. grid-column: 2;
  51. grid-row: 1;
  52. margin-bottom: 2px;
  53. }
  54. }
  55. }
  56. .outputs {
  57. .output-port {
  58. display: grid;
  59. grid-template-columns: calc(100% - 4px) 4px;
  60. grid-template-rows: 100%;
  61. .output-port-plug {
  62. grid-column: 2;
  63. grid-row: 1;
  64. display: grid;
  65. align-content: center;
  66. .srd-port {
  67. background: grey;
  68. }
  69. }
  70. .output-port-label {
  71. text-align: right;
  72. margin-right: 10px;
  73. grid-column: 1;
  74. grid-row: 1;
  75. margin-bottom: 2px;
  76. }
  77. }
  78. }
  79. }