menu-animation-icon/src/components/Common/styles.styl

Menu animation icons

.CommonMenu
  max-width: 700px;
  margin: 8em auto 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  &_wrapper
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;

    & > div
      width: 60px;
      height: 60px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover, &:focus
        outline: none;

    > span
      display: inline-block;
      text-align: center;
      line-height: 1.2;
      padding: 20px;
      margin-top: auto;

  &_box
  &_line
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &_line
    height: 8px;
    width: 45px;
    background: #fff;
    margin: 5px auto;

  &_box
    width: 10px;
    height: 10px;
    background: #fff;
    margin: 3px 3px;
    display: inline-block;

  &_circle
    width: 12px;
    height: 12px;
    margin: 3px;
    background: #fff;
    border-radius: 50%;
    display: block;