local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: merge list-backgrounds.scss with component

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:20:54 +02:00
parent 4223d23ce5
commit 4d15f7ae98
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
3 changed files with 83 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/styles/components/_index.scss
View file

@ -9,7 +9,6 @@
@import "teams"; @import "teams";
@import "migrator"; @import "migrator";
@import "table-view"; @import "table-view";
@import "list-backgrounds";
@import "namespaces"; @import "namespaces";
@import "notifications"; @import "notifications";
@import "quick-actions"; @import "quick-actions";

84
src/styles/components/list-backgrounds.scss
View file

@ -1,84 +0,0 @@
.list-background-setting {
.unsplash-link {
text-align: right;
font-size: .8rem;
a {
color: $grey-800;
}
}
.image-search-result {
margin-top: 1rem;
display: flex;
flex-flow: row wrap;
.image {
width: calc(100% / 5 - 1rem);
height: 120px;
margin: .5rem;
background-size: cover;
background-position: center;
display: flex;
@media screen and (min-width: $desktop) {
&:nth-child(5n) {
page-break-after: always; // CSS 2.1 syntax
break-after: always; // New syntax
}
}
@media screen and (max-width: $desktop) {
width: calc(100% / 4 - 1rem);
&:nth-child(4n) {
page-break-after: always; // CSS 2.1 syntax
break-after: always; // New syntax
}
}
@media screen and (max-width: $tablet) {
width: calc(100% / 2 - 1rem);
&:nth-child(2n) {
page-break-after: always; // CSS 2.1 syntax
break-after: always; // New syntax
}
}
@media screen and (max-width: ($mobile)) {
width: calc(100% - 1rem);
&:nth-child(1n) {
page-break-after: always; // CSS 2.1 syntax
break-after: always; // New syntax
}
}
.info {
align-self: flex-end;
display: block;
opacity: 0;
width: 100%;
padding: .25rem 0;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-size: .75rem;
font-weight: bold;
color: $white;
transition: opacity $transition;
}
&:hover .info {
opacity: 1;
}
}
}
.is-load-more-button {
margin: 1rem auto 0 !important;
display: block;
width: 200px;
}
}

83
src/views/list/settings/background.vue
View file

@ -158,3 +158,86 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped>
.list-background-setting {
.unsplash-link {
text-align: right;
font-size: .8rem;
a {
color: $grey-800;
}
}
.image-search-result {
margin-top: 1rem;
display: flex;
flex-flow: row wrap;
.image {
width: calc(100% / 5 - 1rem);
height: 120px;
margin: .5rem;
background-size: cover;
background-position: center;
display: flex;
@media screen and (min-width: $desktop) {
&:nth-child(5n) {
break-after: always;
}
}
@media screen and (max-width: $desktop) {
width: calc(100% / 4 - 1rem);
&:nth-child(4n) {
break-after: always;
}
}
@media screen and (max-width: $tablet) {
width: calc(100% / 2 - 1rem);
&:nth-child(2n) {
break-after: always;
}
}
@media screen and (max-width: ($mobile)) {
width: calc(100% - 1rem);
&:nth-child(1n) {
break-after: always;
}
}
.info {
align-self: flex-end;
display: block;
opacity: 0;
width: 100%;
padding: .25rem 0;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-size: .75rem;
font-weight: bold;
color: $white;
transition: opacity $transition;
}
&:hover .info {
opacity: 1;
}
}
}
.is-load-more-button {
margin: 1rem auto 0 !important;
display: block;
width: 200px;
}
}
</style>