_viz_editor.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. .viz-editor {
  2. height: 100%;
  3. }
  4. .viz-picker {
  5. }
  6. .viz-picker__search {
  7. flex-grow: 0;
  8. }
  9. .viz-picker__items {
  10. flex-grow: 1;
  11. display: flex;
  12. flex-wrap: wrap;
  13. }
  14. .viz-picker__item {
  15. background: $card-background;
  16. box-shadow: $card-shadow;
  17. border-radius: 3px;
  18. padding: $spacer;
  19. height: 60px;
  20. width: 157px;
  21. text-align: center;
  22. margin: 0 7px 7px 0;
  23. cursor: pointer;
  24. display: flex;
  25. flex-shrink: 0;
  26. border: 1px solid transparent;
  27. @include left-brand-border;
  28. &:hover {
  29. background: $card-background-hover;
  30. }
  31. &--selected {
  32. .viz-picker__item-name {
  33. color: $text-color;
  34. }
  35. }
  36. }
  37. .viz-picker__item-name {
  38. text-overflow: ellipsis;
  39. overflow: hidden;
  40. white-space: nowrap;
  41. font-size: $font-size-h5;
  42. display: flex;
  43. flex-direction: column;
  44. align-self: center;
  45. padding-left: $spacer;
  46. font-size: $font-size-md;
  47. color: $text-muted;
  48. }
  49. .viz-picker__item-img {
  50. height: 100%;
  51. }
  52. .panel-editor-container {
  53. display: flex;
  54. flex-direction: column;
  55. height: 100%;
  56. }
  57. .panel-editor-container__panel {
  58. height: 35%;
  59. }
  60. .panel-editor-container__editor {
  61. height: 65%;
  62. margin-top: $panel-margin*2;
  63. display: flex;
  64. flex-direction: row;
  65. }
  66. .panel-editor__content {
  67. flex-grow: 1;
  68. min-width: 0;
  69. height: 100%;
  70. padding: 0px 0 20px 20px;
  71. max-width: 1100px;
  72. }
  73. .panel-editor__aside {
  74. padding: 18px 0 0 20px;
  75. background: $panel-bg;
  76. display: flex;
  77. flex-direction: column;
  78. }
  79. .panel-editor__aside-header {
  80. color: $text-muted;
  81. font-size: $font-size-h3;
  82. padding-right: 50px;
  83. white-space: nowrap;
  84. margin-bottom: $spacer;
  85. i {
  86. font-size: 25px;
  87. position: relative;
  88. top: 1px;
  89. padding-right: 5px;
  90. }
  91. }
  92. .viz-picker__bar {
  93. display: flex;
  94. margin-bottom: $spacer;
  95. }