nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 08:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fixes & refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-29 15:58:54 +02:00
parent 2d7b6e4e05
commit 351d57b103
15 changed files with 216 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/js/components/FilesView/SearchBar.vue
View File

@@ -1,10 +1,10 @@
<template>
<div @click="$openSpotlight" class="search-bar">
<div class="message">
<span>
<div @click="$openSpotlight" class="relative dark:bg-dark-foreground bg-light-background rounded-lg cursor-pointer">
<div class="flex justify-between px-5 py-3 xl:w-72 w-52 text-left">
<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400">
{{ $t('inputs.placeholder_search_files') }}
</span>
<span>
<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400">
{{ metaKeyIcon }}+K
</span>
</div>
@@ -13,7 +13,6 @@
<script>
import {SearchIcon} from 'vue-feather-icons'
import {events} from '/resources/js/bus'
export default {
name: 'SearchBar',
@@ -27,63 +26,3 @@
},
}
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.search-bar {
position: relative;
background: $light_background;
border-radius: 8px;
cursor: pointer;
.message {
border-radius: 8px;
padding: 11px 20px;
width: 300px;
text-align: left;
display: flex;
justify-content: space-between;
span {
font-weight: 400;
@include font-size(14);
color: #B9B9B9;
}
}
}
@media only screen and (max-width: 1290px) {
.search-bar .message {
width: 230px;
}
}
@media only screen and (max-width: 1024px) {
.search-bar .message {
max-width: 190px;
}
}
@media only screen and (max-width: 690px) {
.search-bar .message {
min-width: initial;
width: 100%;
max-width: initial;
}
}
.dark {
.search-bar {
background: $dark_mode_foreground;
.message span {
color: $dark_mode_text_secondary;
}
}
}
</style>