_tree.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. // Color for a property type
  2. .property-type {
  3. color:$color-bot;
  4. }
  5. .property-name {
  6. color:$color-top;
  7. }
  8. .insp-tree {
  9. overflow-y: auto;
  10. overflow-x: hidden;
  11. height : calc(50% - #{$tabbar-height} - #{$searchbar-height});
  12. .line {
  13. padding:3px;
  14. cursor:pointer;
  15. // Hover
  16. &:hover {
  17. background-color:$background-lighter;
  18. }
  19. // Line active (selected)
  20. &.active {
  21. background-color:$background-lighter3;
  22. .line-content {
  23. background-color:$background;
  24. }
  25. }
  26. // > before title names
  27. &.unfolded:before{
  28. width : 1em;
  29. height : 1em;
  30. line-height: 1em;
  31. display : inline-block;
  32. font-family: $font-family-icons;
  33. content : "\f107";
  34. font-weight: 900;
  35. }
  36. &.folded:before{
  37. width : 1em;
  38. height : 1em;
  39. line-height: 1em;
  40. display : inline-block;
  41. font-family: $font-family-icons;
  42. content : "\f105";
  43. font-weight: 900;
  44. }
  45. &.unfolded.transformNode > span:first-of-type{
  46. color:$color-top;
  47. }
  48. &.folded.transformNode > span:first-of-type{
  49. color:$color-top;
  50. }
  51. // Sub lines
  52. .line-content {
  53. padding-left:15px;
  54. &:hover {
  55. background-color:$background;
  56. }
  57. .line:hover:first-child {
  58. background-color:$background-lighter2;
  59. }
  60. }
  61. }
  62. .line_invisible {
  63. display: none;
  64. }
  65. }