_editor.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @use '@growi/core/scss/bootstrap/init' as bs;
  2. @use './variables' as var;
  3. @import './organisms/wiki-custom-sidebar';
  4. // global imported
  5. .layout-root.editing {
  6. overflow: hidden !important;
  7. .page-wrapper {
  8. height: 100vh;
  9. }
  10. // show
  11. .d-edit-block {
  12. display: block !important;
  13. }
  14. // hide unnecessary elements
  15. .d-edit-none {
  16. display: none !important;
  17. }
  18. /*****************
  19. * Expand Editor
  20. *****************/
  21. .dynamic-layout-root {
  22. @extend .flex-expand-vh-100;
  23. }
  24. &.builtin-editor {
  25. /*****************
  26. * Editor styles
  27. *****************/
  28. .page-editor-editor-container {
  29. border-right: 1px solid transparent;
  30. // add icon on cursor
  31. .markdown-table-activated,
  32. .markdown-link-activated {
  33. .CodeMirror-cursor {
  34. &:after {
  35. position: relative;
  36. top: -1.1em;
  37. left: 0.3em;
  38. display: block;
  39. width: 1em;
  40. height: 1em;
  41. content: ' ';
  42. background-repeat: no-repeat;
  43. background-size: 1em;
  44. }
  45. }
  46. }
  47. .markdown-table-activated .CodeMirror-cursor {
  48. &:after {
  49. background-image: url(/images/icons/editor/table.svg);
  50. }
  51. }
  52. .markdown-link-activated .CodeMirror-cursor {
  53. &:after {
  54. background-image: url(/images/icons/editor/link.svg);
  55. }
  56. }
  57. .textarea-editor {
  58. font-family: var(--font-family-monospace);
  59. border: none;
  60. }
  61. }
  62. .page-editor-preview-container {
  63. }
  64. .page-editor-preview-body {
  65. flex-grow: 1;
  66. padding: 18px 15px 0;
  67. overflow-y: scroll;
  68. }
  69. // editing /Sidebar
  70. .page-editor-preview-body.preview-sidebar {
  71. flex-grow: 0;
  72. width: 320px;
  73. margin-right: auto;
  74. margin-left: auto;
  75. .wiki {
  76. @extend %grw-custom-sidebar-content;
  77. }
  78. }
  79. .grw-editor-configuration-dropdown {
  80. .icon-container {
  81. width: 20px;
  82. }
  83. .menuitem-label {
  84. min-width: 130px;
  85. }
  86. }
  87. }
  88. // .builtin-editor .tab-pane#edit
  89. /*****************
  90. * Toastr
  91. *****************/
  92. .Toastify .Toastify__toast-container {
  93. top: 4.5em;
  94. }
  95. }
  96. // TODO: Never used this id class
  97. #tag-edit-button-tooltip {
  98. .tooltip-inner {
  99. color: black;
  100. background-color: white;
  101. border: 1px solid bs.$gray-300;
  102. }
  103. .tooltip-arrow {
  104. border-bottom: 5px solid bs.$gray-300;
  105. }
  106. }