_tree.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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: 'FontAwesome', sans-serif;
  33. content : "\f078";
  34. }
  35. &.folded:before{
  36. width : 1em;
  37. height : 1em;
  38. line-height: 1em;
  39. display : inline-block;
  40. font-family: 'FontAwesome', sans-serif;
  41. content : "\f054";
  42. }
  43. // Sub lines
  44. .line-content {
  45. padding-left:15px;
  46. &:hover {
  47. background-color:$background;
  48. }
  49. .line:hover:first-child {
  50. background-color:$background-lighter2;
  51. }
  52. }
  53. }
  54. }