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

@use '@growi/core/scss/bootstrap/init' as bs;
@use './variables' as var;

@import './mixins/editing';
@import './mixins/fluid-layout';
@import './mixins/share-link';

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

  @include bs.media-breakpoint-only(sm) {
    font-size: #{$basesize * 0.7};
  }
  @include bs.media-breakpoint-only(md) {
    font-size: #{$basesize * 0.8};
  }
  @include bs.media-breakpoint-only(lg) {
    font-size: #{$basesize * 0.9};
  }
  @include bs.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

  .editor-root {
    width: 100%;
    height: calc(100vh - #{$header-plus-footer});
    min-height: calc(100vh - #{$header-plus-footer}); // for IE11
    margin-top: 0px !important;

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

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

  .editor-root#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 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;
    }
  }
}

@keyframes fadeout {
  100% {
    opacity: 0;
  }
}

@mixin blink-bgcolor($bgcolor) {
  position: relative;
  z-index: 1;

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

@mixin grw-skeleton-text($font-size, $line-height) {
  height: $line-height;
  padding: (($line-height - $font-size)  / 2) 0;
}
/*
.example {
  @include grw-skeleton-text($font-size:$size, $line-height:$height);
  max-width: 100%;
}
*/

// values from './bootstrap/override'

@mixin grw-skeleton-h3 {
  @include grw-skeleton-text(21px, 30px);
}

@mixin grw-skeleton-h5 {
  @include grw-skeleton-text(16px, 18px);
}