frontend fix

This commit is contained in:
carodej
2020-05-31 19:54:42 +02:00
parent 61a8849e2d
commit 16c3625b0b
6 changed files with 28 additions and 63 deletions

View File

@@ -150,8 +150,7 @@
}
}
// Small screen size
.small {
@media only screen and (max-width: 690px) {
.popup-wrapper {
padding: 40px 20px 20px;
left: 15px;
@@ -160,11 +159,9 @@
}
@media (prefers-color-scheme: dark) {
.popup-wrapper {
background: $dark_mode_background;
}
.popup-content {
.title {
color: $dark_mode_text_primary;

View File

@@ -25,7 +25,7 @@
}
}
.small {
@media only screen and (max-width: 690px) {
.actions {
padding: 15px;
position: absolute;
@@ -34,8 +34,4 @@
right: 0;
}
}
@media (prefers-color-scheme: dark) {
}
</style>

View File

@@ -18,15 +18,13 @@
@import '@assets/vue-file-manager/_mixins';
.popup-content {
&.height-limited {
height: 400px;
overflow-y: auto;
}
}
.small {
@media only screen and (max-width: 690px) {
.popup-content {
top: 57px;
bottom: 72px;
@@ -37,10 +35,6 @@
}
}
@media (prefers-color-scheme: dark) {
}
@keyframes popup-in {
0% {
opacity: 0;

View File

@@ -12,7 +12,7 @@
</template>
<script>
import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
import {CornerDownRightIcon, LinkIcon, XIcon} from 'vue-feather-icons'
import {events} from '@/bus'
export default {
@@ -80,30 +80,26 @@
stroke: $theme;
}
}
cursor: pointer;
}
}
}
.small {
@media only screen and (max-width: 690px) {
.popup-header {
padding: 15px;
}
}
@media only screen and (max-width: 690px) {
}
@media (prefers-color-scheme: dark) {
.popup-header {
.label {
.close-icon {
&:hover {
background: $dark_mode_foreground;
}
cursor: pointer;
}
}

View File

@@ -73,7 +73,6 @@
// Desktop, tablet
.medium, .large {
// Animations
.popup-enter-active {
animation: popup-in 0.35s 0.15s ease both;
@@ -84,33 +83,6 @@
}
}
.small {
.popup {
overflow: hidden;
}
.popup-wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translateY(0) scale(1);
box-shadow: none;
width: 100%;
border-radius: 0px;
}
// Animations
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
}
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
}
@keyframes popup-in {
0% {
opacity: 0;
@@ -121,6 +93,7 @@
transform: scale(1);
}
}
@keyframes popup-slide-in {
0% {
transform: translateY(100%);
@@ -131,11 +104,26 @@
}
@media only screen and (max-width: 690px) {
.popup {
overflow: hidden;
}
.popup-wrapper {
left: 15px;
right: 15px;
padding: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transform: translateY(0) scale(1);
box-shadow: none;
width: 100%;
border-radius: 0px;
}
// Animations
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
}
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
}

View File

@@ -154,7 +154,7 @@
}
}
.small {
@media only screen and (max-width: 690px) {
.file-item {
padding: 0 15px;
margin-bottom: 20px;
@@ -162,11 +162,8 @@
}
@media (prefers-color-scheme: dark) {
.file-item {
.icon-item .file-icon {
path {
fill: $dark_mode_foreground;
stroke: #2F3C54;
@@ -174,7 +171,6 @@
}
.item-name {
.name {
color: $dark_mode_text_primary;
}
@@ -190,9 +186,7 @@
@media (max-width: 690px) and (prefers-color-scheme: dark) {
.file-item {
.icon-item .file-icon {
path {
fill: $dark_mode_foreground;
}