weseek__growi/packages/app/src/styles/_mixins.scss

@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-up(xl) {
    font-size: $basesize;
  }
}

@mixin expand-editor($editor-margin-top) {
  $header-plus-footer: $editor-margin-top + $grw-editor-navbar-bottom-height;

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

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

    .grw-container-convertible {
      max-width: unset;
      padding: 0;
      margin: 0;
    }

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

      .tab-pane {
        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 !important;
  height: calc(100vh - 30px);
  margin: 15px !important;

  .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});
  }
}

/*
 * see: https://gist.github.com/bjmiller121/902745cbb38d88178882
 *
 * Makes a CSS hexagon! based off of http://csshexagon.com/
 * Demo: http://sassmeister.com/gist/98fcf3ce163a97d2ef7e
 */
@mixin hexagonize($size, $color, $box-shadow: 0, $border: 0) {
  width: $size;
  height: ($size * 0.577);
  margin: ($size * 0.288) 0;
  background-color: $color;
  border-right: $border;
  border-left: $border;

  @if $box-shadow != 0 {
    box-shadow: $box-shadow;
  }

  &:before,
  &:after {
    position: absolute;
    content: '';

    @if $border == 0 and $box-shadow == 0 {
      left: 0;
      width: 0;
      border-right: ($size/2) solid transparent;
      border-left: ($size/2) solid transparent;
    } @else {
      left: ($size * 0.129);
      z-index: 1;
      width: ($size * 0.707);
      height: ($size * 0.707);
      background-color: inherit;
      transform: scaleY(0.6) rotate(-45deg);
    }

    @if $box-shadow != 0 {
      box-shadow: $box-shadow;
    }
  }

  &:before {
    @if $border == 0 and $box-shadow == 0 {
      bottom: 99%;
      border-bottom: ($size * 0.288) solid $color;
    } @else {
      top: -($size * 0.353);
    }

    @if $border != 0 {
      border-top: $border;
      border-right: $border;
    }
  }

  &:after {
    @if $border == 0 and $box-shadow == 0 {
      top: 99%;
      width: 0;
      border-top: ($size * 0.288) solid $color;
    } @else {
      bottom: -($size * 0.353);
    }

    @if $border != 0 {
      border-bottom: $border;
      border-left: $border;
    }
  }

  @if $box-shadow != 0 {
    > span {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;

      &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: $size;
        height: $size * 0.577;
        content: '';
        background-color: $color;
      }
    }
  }
}

@mixin override-hexagon-color($color, $bgcolor) {
  background-color: $bgcolor;
  transition: background-color 200ms linear, color 100ms linear, opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);

  &:before {
    border-bottom-color: $bgcolor;
    transition: border-bottom-color 200ms linear;
  }
  &:after {
    border-top-color: $bgcolor;
    transition: border-top-color 200ms linear;
  }
  > span:after {
    background-color: $bgcolor;
    transition: background-color 200ms linear;
  }
  svg path {
    fill: $color;
  }
}

@mixin apply-navigation-transition() {
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  transition-duration: 300ms;
}

@mixin border-vertical($beforeOrAfter, $borderLength, $zIndex: initial, $isBtnGroup: false) {
  position: relative;
  @if $isBtnGroup {
    &:not(:first-child) {
      margin-left: 0;
      border-left: none;
    }
    &:not(:last-child) {
      border-right: none;
    }
  }
  &:not(:first-child) {
    &::#{$beforeOrAfter} {
      position: absolute;
      top: calc((100% - #{$borderLength}) / 2);
      left: 0;
      z-index: $zIndex;
      width: 100%;
      height: $borderLength;
      margin-left: -0.5px;
      content: '';
      border-left: 1px solid transparent;
      transition: border-color 0.15s ease-in-out;
    }
  }
}
@mixin highlighted($color) {
  @keyframes fadeout {
    100% {
      opacity: 0;
    }
  }
  position: relative;
  z-index: 1;

  &::after {
    position: absolute;
    top: 15%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 70%;
    content: '';
    background-color: $color;
    border-radius: 2px;
    animation: fadeout 1s ease-in 1.5s forwards;
  }
}