Make table wrapper and table options components

This commit is contained in:
Milos Holba
2021-01-19 18:47:53 +01:00
parent 9a736a2615
commit 2263cc9511
11 changed files with 359 additions and 324 deletions

View File

@@ -1,7 +1,7 @@
<template>
<li class="menu-option">
<li class="menu-option" :class="[icon === 'trash' ? 'danger' : '']">
<div class="icon">
<trash-2-icon v-if="icon === 'trash'" :class="{'danger' : icon === 'trash'}" size="17"></trash-2-icon>
<trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
<life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
<trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
<eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
@@ -14,7 +14,7 @@
<smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
<paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon>
</div>
<div class="text-label" :class="{'danger' : icon === 'trash'}">
<div class="text-label">
{{ title }}
</div>
</li>
@@ -60,6 +60,22 @@ import {
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.danger {
.text-label {
color: $danger !important;
}
.icon {
path,
line,
polyline,
rect,
circle,
polygon {
stroke: $danger !important;
}
}
}
.menu-option {
white-space: nowrap;
font-weight: 700;
@@ -71,20 +87,6 @@ import {
display: flex;
align-items: center;
.danger {
color: $danger !important;
path,
line,
polyline,
rect,
circle,
polygon {
stroke: $danger !important;
}
}
.icon {
margin-right: 20px;
line-height: 0;
@@ -112,6 +114,11 @@ import {
}
}
@media (prefers-color-scheme: dark) {
.danger {
&:hover {
background: rgba($danger, 0.1) !important;
}
}
.menu-option {
color: $dark_mode_text_primary;