base_ui/components/other/DocumentToolbar.vue

<template>
  <div class="toolbar-container">
    <ul class="toolbar-list">
      <li class="toolbar-list-item without-hover-icon">
        <button class="btn" type="button">
          <span class="tavasi tavasi-settings"></span>
        </button>
      </li>

      <li class="toolbar-list-item">
        <button
          @click="fireEvent('open-tinymce-modal')"
          class="btn"
          type="button"
          title="ویرایش سند"
        >
          <i class="tavasi tavasi-Component-242--1"></i>
        </button>
      </li>

      <li class="toolbar-list-item divider"></li>

      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-68--1"></span>
        </button>
      </li>
      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-84--1"></span>
        </button>
      </li>
      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-87--1"></span>
        </button>
      </li>
      <li class="toolbar-list-item divider"></li>
      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-88--1"></span>
        </button>
      </li>
      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-85--1"
            ><span class="path1"></span><span class="path2"></span
          ></span>
        </button>
      </li>
      <li class="toolbar-list-item">
        <button class="btn" type="button">
          <span class="tavasi tavasi-Component-69--1"></span>
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tinyText: {
      default: "",
      type: String,
    },
  },
  methods: {
    fireEvent(eventName) {
      this.$emit("action-fired", eventName);
    },
  },
};
</script>

<style scoped lang="scss">
.toolbar-container {
  position: absolute;
  bottom: 1.5em;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1b2733;
  padding: 8px 15px;
  right: 0;
  left: 0;
  margin: auto;
  opacity: 0.2;
  overflow: hidden;
  transition: width 0.1s;

  &:hover {
    width: 272px;
    border-radius: 20px;
    opacity: 1;
    transition: all 0.3s;

    .toolbar-list {
      .toolbar-list-item {
        &.without-hover-icon {
          display: none;
        }
        &:nth-child(n + 2) {
          display: flex;
        }
      }
    }
  }

  .toolbar-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .toolbar-list-item {
      &.divider {
        border-right: 1px solid #bac4ce;
        height: 15px;
      }

      &:not(.without-hover-icon) {
        display: none;
      }
      .btn {
        padding: 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .tavasi-Component-85--1 *::before,
        .tavasi {
          color: #bac4ce;
        }

        &:hover {
          filter: brightness(1.5);
        }
      }
    }
  }
}
</style>