weseek__growi/src/client/styles/scss/_mixins.scss

@import 'layout_variable';

@mixin variable-font-size($basesize) {
  font-size: $basesize * 0.6;

  @include media-breakpoint-only(sm) {
    font-size: #{$basesize * 0.7};
  }
  @include media-breakpoint-only(md) {
    font-size: #{$basesize * 0.8};
  }
  @include media-breakpoint-only(lg) {
    font-size: #{$basesize * 0.9};
  }
  @include media-breakpoint-only(xl) {
    font-size: $basesize;
  }
}

@mixin expand-editor($editor-header-plus-footer) {
  $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top

  $editor-margin: $header-plus-footer //
    + 25px //   add .btn-open-dropzone height
    + 30px; //  add .navbar-editor height

  .main {
    width: 100%;
    height: calc(100vh - #{$grw-navbar-height});
    padding-top: 2px;
    margin-top: 0px !important;

    &,
    .content-main,
    .tab-content {
      display: flex;
      flex: 1;
      flex-direction: column;

      .tab-pane#edit,
      .tab-pane#hackmd {
        height: calc(100vh - #{$header-plus-footer});
        min-height: calc(100vh - #{$header-plus-footer}); // for IE11
      }

      #page-editor {
        // right(preview)
        &,
        & > .row,
        .page-editor-preview-container,
        .page-editor-preview-body {
          height: calc(100vh - #{$header-plus-footer});
          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
        }

        // left(editor)
        .page-editor-editor-container {
          height: calc(100vh - #{$header-plus-footer});
          min-height: calc(100vh - #{$header-plus-footer}); // for IE11

          .react-codemirror2,
          .CodeMirror,
          .CodeMirror-scroll,
          .textarea-editor {
            height: calc(100vh - #{$editor-margin});
          }
        }
      }

      #page-editor-with-hackmd {
        &,
        .hackmd-preinit,
        .hackmd-error,
        #iframe-hackmd-container > iframe {
          width: 100%;
          height: calc(100vh - #{$header-plus-footer});
          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
        }
      }
    }
  }
}

@mixin expand-modal-fullscreen($hasModalHeader: true, $hasModalFooter: true) {
  // full-screen modal
  width: auto;
  max-width: unset;
  height: calc(100vh - 30px);
  margin: 15px;

  .modal-content {
    height: calc(100vh - 30px);
  }

  // expand .modal-body (with calculating height)
  .modal-body {
    $modal-header: 54px;
    $modal-footer: 46px;

    $margin: 0px;
    @if $hasModalHeader {
      $margin: $margin + $modal-header;
    }
    @if $hasModalFooter {
      $margin: $margin + $modal-footer;
    }
    height: calc(100% - #{$margin});
  }
}