mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
custom color theme part 1
This commit is contained in:
Peter Papp
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<router-link :to="{name: linkRoute}" class="footer-link">
|
||||
<span class="content">{{ linkName }}</span>
|
||||
<chevron-right-icon size="16"></chevron-right-icon>
|
||||
<chevron-right-icon size="16" class="text-theme"></chevron-right-icon>
|
||||
</router-link>
|
||||
</WidgetWrapper>
|
||||
</template>
|
||||
@@ -46,7 +46,7 @@
|
||||
align-items: center;
|
||||
|
||||
polyline {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<div class="widget-content">
|
||||
<div class="headline">
|
||||
<div class="icon">
|
||||
<users-icon v-if="icon === 'users'" size="19"></users-icon>
|
||||
<star-icon v-if="icon === 'star'" size="19"></star-icon>
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="19"></hard-drive-icon>
|
||||
<users-icon v-if="icon === 'users'" size="19" class="text-theme"></users-icon>
|
||||
<star-icon v-if="icon === 'star'" size="19" class="text-theme"></star-icon>
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme"></hard-drive-icon>
|
||||
</div>
|
||||
<b class="title">{{ title }}</b>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@
|
||||
margin-right: 10px;
|
||||
|
||||
path, circle, line, polygon {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<button class="button outline">
|
||||
<button class="button outline hover-text-theme hover-border-theme">
|
||||
<span class="text-label">{{ text }}</span>
|
||||
|
||||
<span v-if="loading" class="icon">
|
||||
<FontAwesomeIcon icon="sync-alt" class="sync-alt"/>
|
||||
<FontAwesomeIcon icon="sync-alt" class="sync-alt svg-color-theme"/>
|
||||
</span>
|
||||
<span v-if="! loading && icon" class="icon">
|
||||
<FontAwesomeIcon :icon="icon"/>
|
||||
<FontAwesomeIcon :icon="icon" class="svg-color-theme"/>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
@@ -74,15 +74,15 @@
|
||||
.icon {
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $theme;
|
||||
border-color: inherit;
|
||||
|
||||
.text-label {
|
||||
color: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,18 +47,6 @@
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.theme {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.content {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.theme-solid {
|
||||
background: $theme;
|
||||
|
||||
|
||||
@@ -227,20 +227,6 @@ export default {
|
||||
/deep/ .label {
|
||||
color: $text !important;
|
||||
}
|
||||
|
||||
/deep/ .preview-sorting {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
/deep/ .preview-sorting {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-wrapper {
|
||||
@@ -348,22 +334,9 @@ export default {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle,
|
||||
rect {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-sorting {
|
||||
background: $light_background;
|
||||
|
||||
/deep/ .preview-sorting {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<span ref="name" class="name">{{ fileInfoDetail[0].name }}</span>
|
||||
<span class="mimetype" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
|
||||
<span class="mimetype text-theme" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +180,6 @@
|
||||
.mimetype {
|
||||
@include font-size(12);
|
||||
font-weight: 600;
|
||||
color: $theme;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
|
||||
{{ item.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder" />
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder svg-color-theme" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
@@ -44,12 +44,12 @@
|
||||
<div class="item-info">
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
<link-icon size="12" class="shared-icon text-theme"></link-icon>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
<user-plus-icon size="12" class="shared-icon text-theme"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
@@ -401,7 +401,7 @@ export default {
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -481,7 +481,6 @@ export default {
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
|
||||
@@ -84,12 +84,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.default-color {
|
||||
path {
|
||||
fill: $theme !important;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
|
||||
path {
|
||||
|
||||
@@ -1,65 +1,68 @@
|
||||
<template>
|
||||
<button class="button" :title="action">
|
||||
<button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
|
||||
<corner-down-right-icon
|
||||
v-if="source === 'move'"
|
||||
size="19"
|
||||
></corner-down-right-icon>
|
||||
v-if="source === 'move'"
|
||||
size="19"
|
||||
class="hover-text-theme"
|
||||
/>
|
||||
<download-cloud-icon
|
||||
v-if="source === 'download'"
|
||||
size="19"
|
||||
></download-cloud-icon>
|
||||
v-if="source === 'download'"
|
||||
size="19"
|
||||
class="hover-text-theme"
|
||||
/>
|
||||
<folder-plus-icon
|
||||
v-if="source === 'folder-plus'"
|
||||
size="19"
|
||||
></folder-plus-icon>
|
||||
<edit-2-icon v-if="source === 'rename'" size="19"></edit-2-icon>
|
||||
<printer-icon v-if="source === 'print'" size="19"></printer-icon>
|
||||
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
|
||||
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
|
||||
<info-icon v-if="source === 'info'" size="19"></info-icon>
|
||||
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
|
||||
<link-icon v-if="source === 'share'" size="19"></link-icon>
|
||||
<x-icon v-if="source === 'close'" size="19"></x-icon>
|
||||
<cloud-off-icon v-if="source === 'shared-off'" size="19"></cloud-off-icon>
|
||||
<sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"></sorting-and-preview-icon>
|
||||
v-if="source === 'folder-plus'"
|
||||
size="19"
|
||||
class="hover-text-theme"
|
||||
/>
|
||||
<edit-2-icon v-if="source === 'rename'" size="19" />
|
||||
<printer-icon v-if="source === 'print'" size="19" />
|
||||
<trash-2-icon v-if="source === 'trash'" size="19" />
|
||||
<list-icon v-if="source === 'th-list'" size="19" />
|
||||
<info-icon v-if="source === 'info'" size="19" />
|
||||
<grid-icon v-if="source === 'th'" size="19" />
|
||||
<link-icon v-if="source === 'share'" size="19" />
|
||||
<x-icon v-if="source === 'close'" size="19" />
|
||||
<cloud-off-icon v-if="source === 'shared-off'" size="19" />
|
||||
<sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
FolderPlusIcon,
|
||||
Trash2Icon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
Edit2Icon,
|
||||
InfoIcon,
|
||||
CornerDownRightIcon,
|
||||
LinkIcon,
|
||||
DownloadCloudIcon,
|
||||
XIcon,
|
||||
PrinterIcon,
|
||||
CloudOffIcon,
|
||||
FolderPlusIcon,
|
||||
Trash2Icon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
Edit2Icon,
|
||||
InfoIcon,
|
||||
CornerDownRightIcon,
|
||||
LinkIcon,
|
||||
DownloadCloudIcon,
|
||||
XIcon,
|
||||
PrinterIcon,
|
||||
CloudOffIcon,
|
||||
} from "vue-feather-icons";
|
||||
import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'
|
||||
|
||||
export default {
|
||||
name: "ToolbarButton",
|
||||
props: ["source", "action"],
|
||||
components: {
|
||||
SortingAndPreviewIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
CloudOffIcon,
|
||||
PrinterIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
ListIcon,
|
||||
XIcon,
|
||||
GridIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
name: "ToolbarButton",
|
||||
props: ["source", "action"],
|
||||
components: {
|
||||
SortingAndPreviewIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
CloudOffIcon,
|
||||
PrinterIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
ListIcon,
|
||||
XIcon,
|
||||
GridIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -68,65 +71,70 @@ export default {
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.preview-sorting {
|
||||
svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
|
||||
}
|
||||
|
||||
rect, line {
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
@include transition(150ms);
|
||||
background: transparent;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
@include transition(150ms);
|
||||
background: transparent;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
.preview-sorting {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
@include transition(150ms);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: transparent;
|
||||
.button {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<label label="file" class="button file-input">
|
||||
<upload-cloud-icon size="17"></upload-cloud-icon>
|
||||
<label label="file" class="button hover-text-theme file-input">
|
||||
<upload-cloud-icon size="17" />
|
||||
<input
|
||||
@change="emmitFiles"
|
||||
v-show="false"
|
||||
@@ -47,12 +47,24 @@
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="plan-wrapper">
|
||||
<header class="plan-header">
|
||||
<div class="icon">
|
||||
<hard-drive-icon size="26"></hard-drive-icon>
|
||||
<hard-drive-icon class="text-theme" size="26"></hard-drive-icon>
|
||||
</div>
|
||||
<h1 class="title">{{ plan.data.attributes.name }}</h1>
|
||||
<h2 class="description">{{ plan.data.attributes.description }}</h2>
|
||||
@@ -14,7 +14,7 @@
|
||||
<span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
|
||||
</section>
|
||||
<footer class="plan-footer">
|
||||
<b class="price">
|
||||
<b class="price text-theme">
|
||||
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
|
||||
<small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
|
||||
</b>
|
||||
@@ -73,7 +73,7 @@
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,7 +113,6 @@
|
||||
}
|
||||
|
||||
.price {
|
||||
color: $theme;
|
||||
@include font-size(18);
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
:description="index.get_started_description"
|
||||
></PageTitle>
|
||||
|
||||
<router-link tag="button" class="get-started-button" :to="{name: 'SignUp'}">
|
||||
<router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{name: 'SignUp'}">
|
||||
<span class="content">{{ $t('page_index.get_started_button') }}</span>
|
||||
<chevron-right-icon size="22"></chevron-right-icon>
|
||||
</router-link>
|
||||
|
||||
<cloud-icon size="790" class="cloud-bg"></cloud-icon>
|
||||
<cloud-icon size="790" class="cloud-bg svg-color-theme" />
|
||||
|
||||
<div class="icons">
|
||||
<hard-drive-icon size="42" class="icon"></hard-drive-icon>
|
||||
@@ -274,10 +274,10 @@
|
||||
top: 70px;
|
||||
right: 60px;
|
||||
transform: scale(-1, 1) rotate(13deg);
|
||||
opacity: 0.1;
|
||||
|
||||
path {
|
||||
stroke: none;
|
||||
fill: rgba($theme, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -288,26 +288,19 @@
|
||||
.get-started-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
background: rgba($theme, 0.8);
|
||||
padding: 20px 36px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
|
||||
//box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
|
||||
margin-bottom: 395px;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 7px 16px 2px rgba($theme, 0.4);
|
||||
background: rgba($theme, 1);
|
||||
}
|
||||
|
||||
.content {
|
||||
@include font-size(19);
|
||||
font-weight: 700;
|
||||
|
||||
@@ -12,32 +12,32 @@
|
||||
</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<router-link :to="{name: 'ContactUs'}">
|
||||
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.contact_us') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="! config.isAuthenticated" class="navigation-links">
|
||||
<li>
|
||||
<router-link :to="{name: 'SignIn'}">
|
||||
<router-link :to="{name: 'SignIn'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.log_in') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="config.userRegistration">
|
||||
<router-link class="cta-button" :to="{name: 'SignUp'}">
|
||||
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'SignUp'}">
|
||||
{{ $t('page_index.menu.sign_in') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="config.isAuthenticated" class="navigation-links">
|
||||
<li v-if="config.userRegistration">
|
||||
<router-link class="cta-button" :to="{name: 'Files'}">
|
||||
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'Files'}">
|
||||
Go to Files <!--todo: preklad-->
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-link class="cta-button log-in" :to="{name: 'SignIn'}">
|
||||
<router-link class="cta-button log-in text-theme bg-theme-100" :to="{name: 'SignIn'}">
|
||||
{{ $t('page_index.menu.log_in') }}
|
||||
</router-link>
|
||||
</nav>
|
||||
@@ -98,19 +98,13 @@
|
||||
font-weight: 700;
|
||||
@include font-size(17);
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background: rgba($theme, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 8px 23px;
|
||||
color: $theme;
|
||||
@include font-size(17);
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
</a>
|
||||
</li>-->
|
||||
<li>
|
||||
<router-link :to="{name: 'ContactUs'}">
|
||||
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
|
||||
{{ $t('page_index.menu.contact_us') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navigation-links">
|
||||
<li v-if="legal.visibility" v-for="(legal, index) in config.legal" :key="index">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}">
|
||||
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}" class="hover-text-theme">
|
||||
{{ legal.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
@@ -75,10 +75,6 @@
|
||||
font-weight: 700;
|
||||
@include font-size(17);
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -90,7 +86,6 @@
|
||||
padding-bottom: 20px;
|
||||
|
||||
/deep/ a {
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="form-label">
|
||||
<edit-2-icon size="22" class="icon"></edit-2-icon>
|
||||
<edit-2-icon size="22" class="icon text-theme" />
|
||||
<b class="label">
|
||||
<slot></slot>
|
||||
</b>
|
||||
@@ -31,7 +31,7 @@
|
||||
margin-right: 10px;
|
||||
|
||||
path {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<span class="option-value placehoder">{{ placeholder }}</span>
|
||||
</div>
|
||||
|
||||
<chevron-down-icon size="19" class="chevron"></chevron-down-icon>
|
||||
<chevron-down-icon size="19" class="chevron" />
|
||||
</div>
|
||||
|
||||
<!--Options-->
|
||||
@@ -117,7 +117,9 @@
|
||||
}
|
||||
|
||||
.input-area {
|
||||
border: 1px solid transparent;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
//background: $light_mode_input_background;
|
||||
@@ -135,8 +137,7 @@
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: $theme;
|
||||
box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
//box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
|
||||
.chevron {
|
||||
@include transform(rotate(180deg));
|
||||
|
||||
@@ -83,7 +83,6 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $theme;
|
||||
|
||||
.switch-button {
|
||||
left: 25px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<li class="list-info-item">
|
||||
<b>{{ title }}</b>
|
||||
<b class="text-theme">{{ title }}</b>
|
||||
<span v-if="content">{{ content }}</span>
|
||||
<slot></slot>
|
||||
</li>
|
||||
@@ -33,7 +33,6 @@
|
||||
b {
|
||||
display: block;
|
||||
@include font-size(13);
|
||||
color: $theme;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
:class="{ 'sortable': column.sortable }"
|
||||
v-if="! column.hidden"
|
||||
>
|
||||
<span>{{ column.label }}</span>
|
||||
<span class="text-theme">{{ column.label }}</span>
|
||||
|
||||
<chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
|
||||
</th>
|
||||
@@ -272,7 +272,6 @@ export default {
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
@include font-size(12);
|
||||
white-space: nowrap;
|
||||
@@ -311,7 +310,6 @@ export default {
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: $text-muted;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<transition name="folder">
|
||||
<div class="folder-item-wrapper" >
|
||||
|
||||
<div class="folder-item" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
|
||||
<div class="folder-item text-theme" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
|
||||
:style="indent" @click="getFolder"
|
||||
@dragover.prevent="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@@ -11,7 +11,7 @@
|
||||
>
|
||||
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
|
||||
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
|
||||
<folder-icon size="17" class="icon"></folder-icon>
|
||||
<folder-icon size="17" class="icon text-theme"></folder-icon>
|
||||
<span class="label">{{ nodes.name }}</span>
|
||||
</div>
|
||||
|
||||
@@ -217,12 +217,12 @@
|
||||
|
||||
.icon {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
|
||||
<div class="button-icon">
|
||||
<hard-drive-icon size="19"></hard-drive-icon>
|
||||
<div class="button-icon text-theme">
|
||||
<hard-drive-icon size="19" class="text-theme"></hard-drive-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
@@ -160,7 +160,6 @@
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,10 +168,9 @@
|
||||
|
||||
&.home {
|
||||
.button-icon {
|
||||
background: rgba($theme, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user