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
397 lines
7.1 KiB
SCSS
397 lines
7.1 KiB
SCSS
.navbar {
|
|
z-index: 2;
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
border-color: darken($color, 5);
|
|
}
|
|
}
|
|
|
|
.navbar-dropdown {
|
|
box-shadow: $navbar-dropdown-boxed-shadow;
|
|
top: 101%;
|
|
}
|
|
}
|
|
|
|
.navbar.main-theme {
|
|
background: $light-background;
|
|
z-index: 5 !important;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-end {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media screen and (max-width: $desktop) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
.navbar-brand {
|
|
display: none;
|
|
}
|
|
|
|
.user {
|
|
width: $user-dropdown-width-mobile;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.dropdown-trigger {
|
|
line-height: 1;
|
|
|
|
.button {
|
|
padding: 0 0.25rem;
|
|
height: 1rem;
|
|
|
|
.icon {
|
|
width: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.username {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
.navbar {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
$color-invert: nth($pair, 2);
|
|
|
|
&.is-#{$name} {
|
|
.navbar {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
@include touch {
|
|
.navbar-menu {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-menu .navbar-item .icon {
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
.navbar {
|
|
z-index: 4 !important;
|
|
}
|
|
|
|
.app-container {
|
|
.namespace-container {
|
|
background: $vikunja-nav-background;
|
|
z-index: 6;
|
|
color: $vikunja-nav-color;
|
|
padding: 0;
|
|
transition: all $transition;
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: $navbar-height;
|
|
overflow-x: auto;
|
|
width: 17vw;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
padding: 0 0 1em;
|
|
left: -147vw;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 70vw;
|
|
|
|
&.is-active {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
.menu-label {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-family: $vikunja-font;
|
|
color: $grey;
|
|
font-weight: 500;
|
|
min-height: 2.5em;
|
|
padding-top: $navbar-padding * 0.3;
|
|
padding-left: $navbar-padding;
|
|
|
|
display: block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-label, .menu-list a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
span.name:not(.icon) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
.color-bubble {
|
|
display: inline-block;
|
|
vertical-align: initial;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 100%;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.menu-label {
|
|
.color-bubble {
|
|
width: 14px !important;
|
|
height: 14px !important;
|
|
}
|
|
|
|
.is-archived {
|
|
min-width: 85px;
|
|
}
|
|
}
|
|
|
|
.nsettings {
|
|
float: right;
|
|
padding: 10px 0.3em 0;
|
|
}
|
|
|
|
.menu-label, .nsettings, .menu-list a {
|
|
color: $vikunja-nav-color;
|
|
}
|
|
|
|
.checkinput {
|
|
display: none;
|
|
}
|
|
|
|
.checkinput:checked + .more-container {
|
|
.menu-list.can-be-hidden {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.checkinput:not(:checked) + .more-container .hidden-hint {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
|
|
.hidden-hint {
|
|
display: block;
|
|
opacity: 0;
|
|
height: 0;
|
|
text-align: center;
|
|
color: $grey;
|
|
cursor: pointer;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.menu-list {
|
|
&.can-be-hidden {
|
|
transition: all $transition;
|
|
height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
li {
|
|
height: 44px;
|
|
}
|
|
|
|
a {
|
|
padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
|
|
transition: all 0.2s ease;
|
|
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-left: $vikunja-nav-selected-width solid transparent;
|
|
|
|
.icon {
|
|
color: lighten($vikunja-nav-color, 20);
|
|
height: 1rem;
|
|
vertical-align: middle;
|
|
padding-bottom: 4px;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
&.router-link-exact-active {
|
|
color: $primary;
|
|
border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
|
|
|
|
.icon {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: $white;
|
|
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
display: none;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu {
|
|
margin: $navbar-padding / 2 0 $navbar-padding;
|
|
|
|
.menu-list {
|
|
li {
|
|
font-weight: 500;
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
a {
|
|
padding-left: 2em;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar .user {
|
|
span {
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
.avatar {
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
vertical-align: middle;
|
|
height: 40px;
|
|
}
|
|
|
|
.logout-icon {
|
|
color: lighten($black, 10);
|
|
|
|
.icon {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.dropdown-trigger .button {
|
|
background: none;
|
|
|
|
&:focus:not(:active), &:active {
|
|
outline: none !important;
|
|
-webkit-box-shadow: none !important;
|
|
-moz-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
.dropdown-content {
|
|
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobilemenu-hide-button, .mobilemenu-show-button {
|
|
display: none;
|
|
z-index: 31;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
color: $dark;
|
|
line-height: 1;
|
|
|
|
&:hover, &:focus {
|
|
color: darken($dark, 20);
|
|
}
|
|
}
|
|
|
|
.mobilemenu-hide-button {
|
|
position: fixed;
|
|
|
|
&:hover, &:focus {
|
|
color: $dark;
|
|
}
|
|
}
|
|
|
|
.mobile-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(250, 250, 250, 0.8);
|
|
z-index: 5;
|
|
opacity: 0;
|
|
transition: all $transition;
|
|
}
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
.mobilemenu-hide-button {
|
|
display: block;
|
|
top: $hamburger-menu-icon-spacing;
|
|
right: $hamburger-menu-icon-spacing;
|
|
}
|
|
|
|
.mobilemenu-show-button {
|
|
display: block;
|
|
margin-left: $hamburger-menu-icon-spacing;
|
|
}
|
|
|
|
.mobile-overlay {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.navbar.is-dark .navbar-brand > .navbar-item {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.logout-icon {
|
|
margin-right: 0.85em !important;
|
|
}
|
|
|
|
.menu-bottom-link {
|
|
width: 100%;
|
|
color: $grey-light;
|
|
text-align: center;
|
|
display: block;
|
|
margin: 1em 0;
|
|
font-size: .8em;
|
|
}
|