_mixins.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @mixin variable-font-size($basesize) {
  2. font-size: $basesize;
  3. @media(max-width: $screen-lg) {
  4. font-size: #{$basesize * 0.9};
  5. }
  6. @media(max-width: $screen-md) {
  7. font-size: #{$basesize * 0.8};
  8. }
  9. @media(max-width: $screen-sm) {
  10. font-size: #{$basesize * 0.7};
  11. }
  12. @media(max-width: $screen-xs) {
  13. font-size: #{$basesize * 0.6};
  14. }
  15. }
  16. @mixin expand-editor($header-plus-footer) {
  17. $header-plus-footer: $header-plus-footer + 2px; // add .main padding-top
  18. $editor-margin: $header-plus-footer
  19. + 25px // add .btn-open-dropzone height
  20. + 30px; // add .navbar-editor height
  21. .main {
  22. width: 100%;
  23. height: 100vh;
  24. margin-top: 0px !important;
  25. padding-top: 2px;
  26. padding-left: 0;
  27. padding-right: 0;
  28. &,
  29. .content-main,
  30. .tab-content {
  31. display: flex;
  32. flex-direction: column;
  33. flex: 1;
  34. .tab-pane#edit, .tab-pane#hackmd {
  35. min-height: calc(100vh - #{$header-plus-footer}); // for IE11
  36. height: calc(100vh - #{$header-plus-footer});
  37. }
  38. #page-editor {
  39. // right(preview)
  40. &,
  41. &>.row,
  42. .page-editor-preview-container,
  43. .page-editor-preview-body {
  44. min-height: calc(100vh - #{$header-plus-footer}); // for IE11
  45. height: calc(100vh - #{$header-plus-footer});
  46. }
  47. // left(editor)
  48. .page-editor-editor-container {
  49. min-height: calc(100vh - #{$header-plus-footer}); // for IE11
  50. height: calc(100vh - #{$header-plus-footer});
  51. .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
  52. .textarea-editor {
  53. height: calc(100vh - #{$editor-margin});
  54. }
  55. @media (min-width: $screen-md) {
  56. padding-right: 0;
  57. }
  58. }
  59. }
  60. #page-editor-with-hackmd {
  61. &,
  62. .hackmd-preinit, #iframe-hackmd-container > iframe {
  63. width: 100vw;
  64. min-height: calc(100vh - #{$header-plus-footer}); // for IE11
  65. height: calc(100vh - #{$header-plus-footer});
  66. }
  67. }
  68. }
  69. }
  70. }