weseek__growi/packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@use '~/styles/variables' as var;
@use '~/styles/bootstrap/init' as bs;
@use '~/styles/mixins';

// https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
// workaround to use '&' in global scope
.grw-subnav {
  :global {
    min-height: var.$grw-subnav-min-height;
    padding-top: 8px;
    padding-bottom: 8px;

    @include bs.media-breakpoint-up(md) {
      min-height: var.$grw-subnav-min-height-md;
    }

    .grw-drawer-toggler {
      width: 50px;
      height: 50px;
      font-size: 24px;
    }

    h1 {
      @include mixins.variable-font-size(32px);
      line-height: 1.4em;
    }

    .grw-taglabels-container {
      margin-bottom: 0.5rem;
    }

    .grw-page-path-nav {
      .separator {
        margin-right: 0.2em;
        margin-left: 0.2em;
      }
    }

    .btn-subscribe {
      height: 40px;
      font-size: 20px;
    }

    .btn-like,
    .btn-bookmark,
    .btn-seen-user {
      height: 40px;
      padding-right: 6px;
      padding-left: 8px;
      font-size: 20px;
      svg {
        width: 20px;
        height: 20px;
      }
    }
    .total-likes,
    .total-bookmarks {
      display: flex;
      align-items: flex-end;
      padding-right: 8px;
      padding-left: 6px;
      font-size: 14px;
      font-weight: bs.$font-weight-bold;
    }
    .seen-user-count {
      padding-right: 6px;
      padding-left: 6px;
      font-size: 14px;
      font-weight: bs.$font-weight-bold;
      vertical-align: bottom;
    }

    .btn-page-item-control {
      height: 40px;
      font-size: 16px;
    }

    ul.authors {
      li {
        font-size: 12px;
        list-style: none;
      }

      .text-date {
        font-size: 11px;
      }

      .picture {
        width: 22px;
        height: 22px;
        border: 1px solid bs.$gray-300;

        &.picture-xs {
          width: 14px;
          height: 14px;
        }
      }

      .user-list-popover {
        max-width: 200px;

        .user-list-content {
          direction: rtl;

          .liker-user-count,
          .seen-user-count {
            font-size: 12px;
            font-weight: bolder;
          }
        }
        .cls-1 {
          isolation: isolate;
        }
      }
    }
  }

  &:global {
    &:hover {
      .btn-copy,
      .btn-edit,
      .btn-edit-tags {
        // change button opacity
        opacity: unset;
      }
    }

    /*
     * Compact Mode
     */
    &.grw-subnav-compact {
      min-height: 70px;

      @include bs.media-breakpoint-up(md) {
        min-height: 90px;
      }

      .btn-like,
      .btn-bookmark,
      .btn-subscribe {
        width: 32px;
        height: 32px;
        padding: 4px;
        font-size: 16px;
      }
      .btn-seen-user {
        width: 48px;
        height: 32px;
        padding: 4px;
        font-size: 16px;

        svg {
          width: 16px;
          height: 16px;
        }
      }
      .btn-page-item-control {
        width: 32px;
        height: 32px;
        font-size: 12px;
      }
    }
  }
}

/*
 * shadow
 */
.grw-subnav-append-shadow-container {
  .grw-subnav {
    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
  }
}

/*
 * Fixed ver
 */
$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);

.grw-subnav-fixed-container {
  top: var.$grw-navbar-border-width;
  z-index: bs.$zindex-sticky - 5;
}

/*
 * Switching show/hide
 */
.grw-subnav-switcher {
  .grw-subnav-fixed-container {
    transition: transform 150ms $easeInOutCubic;
  }

  &.grw-subnav-switcher-hidden {
    .grw-subnav-fixed-container {
      transition: unset;
      transform: translateY(-100%);
    }
  }
}