ohayolibs/src/styles/_drawer.less

Ohayo is a set of essential modules for ohayojp.

@drawer-width: 60vw;

.drawer {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none;
  > * {
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
      box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
  &-mask,
  &-content-wrapper {
    position: absolute;
    height: 100%;
  }
  &-mask {
    top: 0;
    width: 100%;
    background: #000;
    opacity: 0;
  }
  &-content-wrapper {
    left: -@drawer-width;
    width: @drawer-width;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
  }
  &-content {
    height: 100%;
    overflow: auto;
  }
  &-button {
    position: absolute;
    top: 72px;
    right: -40px;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    background: @component-background;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
  }
  &-open {
    transform: translateX(@drawer-width);
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) 0s;
    pointer-events: auto;
    .drawer-mask {
      opacity: 0.3;
    }
  }
  @media (max-width: @mobile-max) {
    .ant-menu-inline .ant-menu-item::after,
    .ant-menu-vertical .ant-menu-item::after {
      right: auto;
      left: 0;
    }
  }
}