refactor: tailwindcss样式优化

Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87
2022-12-31 22:37:47 +08:00
parent ba2e6769b4
commit 5beaa84297
21 changed files with 423 additions and 356 deletions
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -40,12 +40,3 @@ const tagsViewStore = useTagsViewStore();
  }
 }
 </style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -3,20 +3,23 @@ import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessageBox } from 'element-plus';

-import Breadcrumb from '@/components/Breadcrumb/index.vue';
 import Hamburger from '@/components/Hamburger/index.vue';
+import Breadcrumb from '@/components/Breadcrumb/index.vue';
 import Screenfull from '@/components/Screenfull/index.vue';
 import SizeSelect from '@/components/SizeSelect/index.vue';
 import LangSelect from '@/components/LangSelect/index.vue';
+import MixNav from './Sidebar/MixNav.vue';
 import { CaretBottom } from '@element-plus/icons-vue';

-import { useAppStore, DeviceType } from '@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 import { useTagsViewStore } from '@/store/modules/tagsView';
 import { useUserStore } from '@/store/modules/user';
+import { useSettingsStore } from '@/store/modules/settings';

 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
 const userStore = useUserStore();
+const settingsStore = useSettingsStore();

 const route = useRoute();
 const router = useRouter();
@@ -47,31 +50,44 @@ function logout() {

 <template>
  <div class="navbar">
-    <hamburger
-      id="hamburger-container"
-      :is-active="appStore.sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
+    <div
+      class="flex justify-start"
+      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+    >
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggleClick="toggleSideBar"
+      />
+      <!-- 面包屑导航栏 -->
+      <breadcrumb />
+    </div>

-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <mix-nav v-if="device !== 'mobile' && settingsStore.layout === 'mix'" />

-    <div class="right-menu">
-      <template v-if="device !== DeviceType.mobile">
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+    <div
+      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+      class="flex justify-start"
+    >
+      <div v-if="device !== 'mobile'" class="flex justify-center items-center">
+        <!--全屏 -->
+        <screenfull id="screenfull" />
+
+        <!-- 布局大小 -->
        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+          <size-select />
        </el-tooltip>
-        <lang-select class="right-menu-item hover-effect" />
-      </template>

-      <el-dropdown
-        class="avatar-container right-menu-item hover-effect"
-        trigger="click"
-      >
-        <div class="avatar-wrapper">
-          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
-          <CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
+        <!--语言选择-->
+        <lang-select />
+      </div>
+
+      <el-dropdown trigger="click">
+        <div class="flex justify-center items-center pr-[20px]">
+          <img
+            :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            class="w-[40px] h-[40px] rounded-lg"
+          />
+          <CaretBottom class="w-3 h-3" />
        </div>

        <template #dropdown>
@@ -99,85 +115,15 @@ function logout() {
 </template>

 <style lang="scss" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.el-dropdown {
+  font-size: 18px;
 }
+
 .navbar {
  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        img {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
 }
 </style>
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,25 +1,34 @@
 <script setup lang="ts">
+import { Sunny, Moon } from '@element-plus/icons-vue';
+
 import { useSettingsStore } from '@/store/modules/settings';

-import ThemePicker from '@/components/ThemePicker/index.vue';
+import { useDark, useToggle } from '@vueuse/core';
+import { ElDivider, ElSwitch, ElTooltip } from 'element-plus';
+import { onMounted } from 'vue';

 const settingsStore = useSettingsStore();
+const isDark = useDark();

-function themeChange(val: string) {
-  settingsStore.changeSetting({ key: 'theme', value: val });
+function toggleTheme() {
+  const isDark = useDark();
+  useToggle(isDark);
+}
+
+onMounted(() => {
+  window.document.body.setAttribute('layout', settingsStore.layout);
+});
+
+function changeLayout(layout: string) {
+  settingsStore.changeSetting({ key: 'layout', value: layout });
+  window.document.body.setAttribute('layout', settingsStore.layout);
 }
 </script>

 <template>
-  <div class="drawer-container">
-    <h3 class="drawer-title">系统布局配置</h3>
-    <div class="drawer-item">
-      <span>主题颜色</span>
-      <div style="float: right; height: 26px; margin: -3px 8px 0 0">
-        <theme-picker @change="themeChange" />
-      </div>
-    </div>
-
+  <div class="settings-container">
+    <h3 class="text-base font-bold">项目配置</h3>
+    <el-divider />
    <div class="drawer-item">
      <span>开启 Tags-View</span>
      <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
@@ -35,23 +44,53 @@ function themeChange(val: string) {
      <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
    </div>

-    <el-divider>导航栏模式</el-divider>
+    <el-divider>主题</el-divider>

-    <ul class="navbar">
+    <div class="flex justify-center" @click.stop>
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        @change="toggleTheme"
+        :active-icon="Sunny"
+        :inactive-icon="Moon"
+      />
+    </div>
+
+    <el-divider>导航栏布局</el-divider>
+
+    <ul class="layout">
      <el-tooltip content="左侧模式" placement="bottom">
-        <li class="navbar__item navbar__item--left">
+        <li
+          :class="
+            'layout-item layout-left ' +
+            (settingsStore.layout == 'left' ? 'is-active' : '')
+          "
+          @click="changeLayout('left')"
+        >
          <div />
          <div />
        </li>
      </el-tooltip>
      <el-tooltip content="顶部模式" placement="bottom">
-        <li class="navbar__item navbar__item--top">
+        <li
+          :class="
+            'layout-item layout-top ' +
+            (settingsStore.layout == 'top' ? 'is-active' : '')
+          "
+          @click="changeLayout('top')"
+        >
          <div />
          <div />
        </li>
      </el-tooltip>
      <el-tooltip content="混合模式" placement="bottom">
-        <li class="navbar__item navbar__item--mix">
+        <li
+          :class="
+            'layout-item layout-mix ' +
+            (settingsStore.layout == 'mix' ? 'is-active' : '')
+          "
+          @click="changeLayout('mix')"
+        >
          <div />
          <div />
        </li>
@@ -61,11 +100,9 @@ function themeChange(val: string) {
 </template>

 <style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
+.settings-container {
+  padding: 16px;
  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;

  .drawer-title {
    margin-bottom: 12px;
@@ -84,34 +121,27 @@ function themeChange(val: string) {
    float: right;
  }

-  .job-link {
-    display: block;
-    position: absolute;
+  .layout {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
    width: 100%;
-    left: 0;
-    bottom: 0;
-  }
-}
+    height: 50px;
+    padding: 0;

-.navbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  width: 100%;
-  height: 50px;
-  padding: 0;
-
-  &__item {
-    width: 18%;
-    height: 45px;
-    background: #f0f2f5;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    border-radius: 4px;
-    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
-
-    &--left {
+    &-item {
+      width: 18%;
+      height: 45px;
+      background: #f0f2f5;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    &-item.is-active {
+      border: 2px solid var(--el-color-primary);
+    }
+    &-left {
      div {
        &:nth-child(1) {
          width: 30%;
@@ -131,7 +161,7 @@ function themeChange(val: string) {
      }
    }

-    &--top {
+    &-top {
      div {
        &:nth-child(1) {
          width: 100%;
@@ -142,7 +172,7 @@ function themeChange(val: string) {
      }
    }

-    &--mix {
+    &-mix {
      div {
        &:nth-child(1) {
          width: 100%;
@@ -156,7 +186,7 @@ function themeChange(val: string) {
          height: 70%;
          bottom: 0;
          left: 0;
-          background: #fff;
+          background: #1b2a47;
          box-shadow: 0 0 1px #888;
          position: absolute;
        }
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useSettingsStore } from '@/store/modules/settings';
+
+const settingsStore = useSettingsStore();

 defineProps({
  collapse: {
@@ -14,71 +17,25 @@ const logo = ref<string>(
 </script>

 <template>
-  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
-    <transition name="sidebarLogoFade">
-      <router-link
-        v-if="collapse"
-        key="collapse"
-        class="sidebar-logo-link"
-        to="/"
-      >
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">vue3-element-admin</h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title">vue3-element-admin</h1>
-      </router-link>
-    </transition>
-  </div>
+  <transition class="bg-gray-800">
+    <router-link
+      v-if="collapse"
+      key="collapse"
+      class="h-[50px] flex items-center justify-center"
+      to="/"
+    >
+      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+      <h1 v-else>vue3-element-admin</h1>
+    </router-link>
+
+    <router-link
+      v-else
+      key="expand"
+      class="h-[50px] flex items-center justify-center"
+      to="/"
+    >
+      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+      <span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span>
+    </router-link>
+  </transition>
 </template>
-
-<style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
-.sidebar-logo-container {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
-  overflow: hidden;
-
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 20px;
-      height: 20px;
-      vertical-align: middle;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-      margin-left: 12px;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
-}
-</style>
--- a/src/layout/components/Sidebar/MixNav.vue
+++ b/src/layout/components/Sidebar/MixNav.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { RouterLink, useRoute, useRouter, RouteRecordRaw } from 'vue-router';
+import {
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElMenu,
+  ElMessageBox,
+  ElTooltip
+} from 'element-plus';
+
+import Screenfull from '@/components/Screenfull/index.vue';
+import SizeSelect from '@/components/SizeSelect/index.vue';
+import LangSelect from '@/components/LangSelect/index.vue';
+import { CaretBottom } from '@element-plus/icons-vue';
+
+import SidebarItem from './SidebarItem.vue';
+import variables from '@/styles/variables.module.scss';
+
+import { useTagsViewStore } from '@/store/modules/tagsView';
+import { useUserStore } from '@/store/modules/user';
+import { usePermissionStore } from '@/store/modules/permission';
+
+const tagsViewStore = useTagsViewStore();
+const userStore = useUserStore();
+const permissionStore = usePermissionStore();
+
+const route = useRoute();
+const router = useRouter();
+const routes = [] as any[];
+onMounted(() => {
+  console.log('origin routes', permissionStore.routes);
+  permissionStore.routes.forEach(item => {
+    const { children, ...newItem } = item;
+    routes.push(newItem);
+  });
+  console.log('routes', routes);
+});
+
+const activeMenu = computed<string>(() => {
+  const { meta, path } = route;
+  if (meta?.activeMenu) {
+    return meta.activeMenu as string;
+  }
+  return path;
+});
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+
+<template>
+  <div class="horizontal-header">
+    <el-menu
+      class="horizontal-header-menu"
+      :default-active="activeMenu"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      mode="horizontal"
+    >
+      <sidebar-item
+        v-for="route in routes"
+        :item="route"
+        :key="route.path"
+        :base-path="route.path"
+      />
+    </el-menu>
+
+    <div class="horizontal-header-right">
+      <!--全屏 -->
+      <screenfull id="screenfull" />
+
+      <!-- 布局大小 -->
+      <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <size-select />
+      </el-tooltip>
+
+      <!--语言选择-->
+      <lang-select />
+
+      <el-dropdown trigger="click">
+        <div class="flex justify-center items-center pr-[20px]">
+          <img
+            :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            class="w-[40px] h-[40px] rounded-lg"
+          />
+          <CaretBottom class="w-3 h-3" />
+        </div>
+
+        <template #dropdown>
+          <el-dropdown-menu>
+            <router-link to="/">
+              <el-dropdown-item>{{ $t('navbar.dashboard') }}</el-dropdown-item>
+            </router-link>
+            <a target="_blank" href="https://github.com/hxrui">
+              <el-dropdown-item>Github</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://gitee.com/haoxr">
+              <el-dropdown-item>{{ $t('navbar.gitee') }}</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
+              <el-dropdown-item>{{ $t('navbar.document') }}</el-dropdown-item>
+            </a>
+            <el-dropdown-item divided @click="logout">
+              {{ $t('navbar.logout') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.horizontal-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
+  background: #001529;
+
+  &-menu {
+    height: 100%;
+    width: 100%;
+    border: none;
+    background-color: transparent;
+  }
+
+  &-right {
+    display: flex;
+    min-width: 340px;
+    align-items: center;
+    justify-content: flex-end;
+    color: #fff;
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -86,13 +86,14 @@ function resolvePath(routePath: string) {
        </el-menu-item>
      </app-link>
    </template>
+
    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
      <!-- popper-append-to-body -->
      <template #title>
        <svg-icon
          v-if="item.meta && item.meta.icon"
          :icon-class="item.meta.icon"
-        ></svg-icon>
+        />
        <span v-if="item.meta && item.meta.title">{{
          generateTitle(item.meta.title)
        }}</span>
@@ -104,10 +105,7 @@ function resolvePath(routePath: string) {
        :item="child"
        :is-nest="true"
        :base-path="resolvePath(child.path)"
-        class="nest-menu"
      />
    </el-sub-menu>
  </div>
 </template>
-
-<style lang="scss" scoped></style>
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -54,7 +54,7 @@ function moveToTarget(currentTag: TagView) {
  } else if (lastTag === currentTag) {
    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
  } else {
-    const tagListDom = document.getElementsByClassName('tags-view__item');
+    const tagListDom = document.getElementsByClassName('tags-item');
    const currentIndex = tagsViewStore.visitedViews.findIndex(
      item => item === currentTag
    );
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -237,10 +237,12 @@ onMounted(() => {
 </script>

 <template>
-  <div class="tags-view__container">
+  <div
+    class="h-[34px] w-full border-b-[1px] border-gray-200 shadow-lg shadow-[rgba(0, 21, 41, 0.08)]"
+  >
    <scroll-pane
      ref="scrollPaneRef"
-      class="tags-view__wrapper"
+      class="tags-container"
      @scroll="handleScroll"
    >
      <router-link
@@ -249,24 +251,26 @@ onMounted(() => {
        :data-path="tag.path"
        :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query }"
-        class="tags-view__item"
+        class="tags-item"
        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent="openMenu(tag, $event)"
      >
        {{ generateTitle(tag.meta?.title) }}
+
        <span
          v-if="!isAffix(tag)"
-          class="icon-close"
+          class="tags-item-remove"
          @click.prevent.stop="closeSelectedTag(tag)"
        >
          <svg-icon icon-class="close" />
        </span>
      </router-link>
    </scroll-pane>
+
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
-      class="tags-view__menu"
+      class="tags-item-menu"
    >
      <li @click="refreshSelectedTag(selectedTag)">
        <svg-icon icon-class="refresh" />
@@ -297,90 +301,67 @@ onMounted(() => {
 </template>

 <style lang="scss" scoped>
-.tags-view__container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+.tags-container {
+  .tags-item {
+    display: inline-block;
+    cursor: pointer;
+    border: 1px solid #d8dce5;
+    padding: 3px 8px;
+    font-size: 12px;
+    margin: 4px 0 0 5px;

-  .tags-view__wrapper {
-    .tags-view__item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
+    &:first-of-type {
+      margin-left: 15px;
+    }

-      &:first-of-type {
-        margin-left: 15px;
-      }
+    &:last-of-type {
+      margin-right: 15px;
+    }

-      &:last-of-type {
-        margin-right: 15px;
-      }
+    &:hover {
+      color: var(--el-color-primary);
+    }

-      &:hover {
-        color: var(--el-color-primary);
-      }
-
-      &.active {
-        background-color: var(--el-color-primary);
-        color: var(--el-color-primary-light-9);
-        border-color: var(--el-color-primary);
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 5px;
-        }
-      }
-
-      .icon-close {
+    &.active {
+      background-color: var(--el-color-primary);
+      color: var(--el-color-primary-light-9);
+      border-color: var(--el-color-primary);
+      &::before {
+        content: '';
+        background: #fff;
+        display: inline-block;
+        width: 8px;
+        height: 8px;
        border-radius: 50%;
-        text-align: center;
-
-        &:hover {
-          background-color: #ccc;
-          color: #fff;
-        }
+        position: relative;
+        margin-right: 5px;
      }
    }
-  }
-
-  .tags-view__menu {
-    margin: 0;
-    background: #fff;
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
-
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;

+    &-remove {
+      border-radius: 50%;
      &:hover {
-        background: #eee;
+        color: #fff;
+        background-color: #ccc;
      }
    }
  }
 }
+
+.tags-item-menu {
+  background: #fff;
+  z-index: 99;
+  position: absolute;
+  border-radius: 4px;
+  font-size: 12px;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+
+  li {
+    padding: 8px 16px;
+    cursor: pointer;
+    &:hover {
+      background: #eee;
+    }
+  }
+}
 </style>