konrad
cf136132e3
All checks were successful
continuous-integration/drone/push Build is passing
Center list backgrounds Better alignment of new namespace and filter button Make creating new namespace button clear Hide archived lists unless the user wants it Make all cards responsive Cleanup Show it if a namespace is archived Show if a list is archived Fix not updating the list in store after updating the background Make task cards smaller Display list backgrounds in cards and look good while doing it lighter shadow Change background to stripes Set list backgrounds as card backgrounds Add background color check to color appropriatly Move color check to mixin Use background color from tasks Change list card color Make create new namespace button stick to the right Shadow all the things Don't keep list backgrounds set when navigating back Make links to list clickable Add seperate page for namespaces Co-authored-by: kolaente <k@knt.li> Reviewed-on: #160
131 lines
2.8 KiB
SCSS
131 lines
2.8 KiB
SCSS
$lists-per-row: 5;
|
|
|
|
.namespaces-list {
|
|
.button.new-namespace {
|
|
float: right;
|
|
|
|
@media screen and (max-width: $tablet / 2) {
|
|
float: none;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.show-archived-check {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.namespace {
|
|
margin-bottom: 1rem;
|
|
|
|
h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.is-archived {
|
|
font-size: 0.75rem;
|
|
border: 1px solid $grey;
|
|
color: $grey !important;
|
|
padding: 2px 4px;
|
|
margin-left: .5rem;
|
|
border-radius: 3px;
|
|
font-family: $vikunja-font;
|
|
background: rgba($white, 0.75);
|
|
}
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
|
|
.list {
|
|
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
|
height: 150px;
|
|
background: $white;
|
|
margin: 0 1rem 1rem 0;
|
|
padding: 1rem;
|
|
border-radius: $radius;
|
|
box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
|
|
transition: box-shadow $transition;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 1em lighten($dark, 65);
|
|
}
|
|
|
|
@media screen and (min-width: $widescreen) {
|
|
&:nth-child(#{$lists-per-row}n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $widescreen) and (min-width: $tablet) {
|
|
$lists-per-row: 3;
|
|
& {
|
|
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
|
}
|
|
|
|
&:nth-child(#{$lists-per-row}n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
$lists-per-row: 2;
|
|
& {
|
|
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
|
|
}
|
|
|
|
&:nth-child(#{$lists-per-row}n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: $tablet / 2) {
|
|
$lists-per-row: 1;
|
|
& {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.is-archived-container {
|
|
width: 100%;
|
|
text-align: right;
|
|
|
|
.is-archived {
|
|
font-size: .75em;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
align-self: flex-end;
|
|
font-family: $vikunja-font;
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
color: $text;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.has-light-text .title {
|
|
color: $light;
|
|
}
|
|
|
|
&.has-background {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
.title {
|
|
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |