ami/tl-vikunja
1
0
Fork 0
Code Activity

Improve consistency of the layout (#386)

Browse Source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/386
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
2021-01-23 17:18:09 +00:00
parent b2098d65fd
commit d1a2eefca6
54 changed files with 307 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/theme/_all.scss
View File

@ -1,4 +1,4 @@
@import 'variables';
@import 'variables/all';
@import 'theme';
@import 'content';

2
src/styles/theme/background.scss
View File

@ -42,7 +42,7 @@
.task-view {
border-radius: $radius;
margin-top: 1em;
margin-top: 1rem;
}
.kanban .tasks {

6
src/styles/theme/content.scss
View File

@ -5,7 +5,7 @@
}
.app-content {
padding: $navbar-height + 1.5rem 1.5em 1rem 1.5em;
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
z-index: 2;
&.is-menu-enabled {
@ -14,7 +14,7 @@
@media screen and (max-width: $tablet) {
margin-left: 0;
padding-top: 1.5em;
padding-top: 1.5rem;
min-height: calc(100vh - 4rem);
&.is-menu-enabled {
@ -52,7 +52,7 @@
}
.media-content {
width: calc(100% - 48px - 2em);
width: calc(100% - 48px - 2rem);
}
.content h3 {

16
src/styles/theme/form.scss
View File

@ -5,11 +5,11 @@
font-size: 0.85rem;
font-weight: bold;
height: $button-height;
box-shadow: .2rem 0.2rem .5rem $grey-lighter;
box-shadow: $shadow-sm;
&.is-hovered,
&:hover {
box-shadow: .1rem .1rem 1rem $grey-lighter;
box-shadow: $shadow-md;
}
&.fullheight {
@ -22,7 +22,7 @@
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: .1rem .1rem .75rem $grey-lighter !important;
box-shadow: $shadow-xs !important;
}
&.is-primary.is-outlined:hover {
@ -60,21 +60,21 @@
&:active,
&:focus,
&:focus:not(:active) {
border-color: darken($color, 10);
border-color: $color;
}
}
}
}
.select:after {
margin-top: -0.575em;
margin-top: -0.575rem;
}
.select select {
border-width: $thickness;
&:not([multiple]) {
height: calc(2.25em + #{$thickness});
height: calc(2.25rem + #{$thickness});
}
&.is-active,
@ -119,9 +119,9 @@
font-weight: 400 !important;
background: transparent;
border-color: transparent;
margin: 0 .3em;
margin: 0 .3rem;
height: auto;
padding: .3em;
padding: .3rem;
&:focus {
background: $input-background-color;

2
src/styles/theme/link-share.scss
View File

@ -2,7 +2,7 @@
.logo {
max-width: 500px;
width: 90%;
margin: 2em 0 4em;
margin: 2rem 0 4rem;
}
.logout {

20
src/styles/theme/loading.scss
View File

@ -7,11 +7,11 @@
&:after {
@include loader;
position: absolute;
top: calc(50% - 2.5em);
left: calc(50% - 2.5em);
width: 5em;
height: 5em;
border-width: 0.25em;
top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem);
width: 5rem;
height: 5rem;
border-width: 0.25rem;
}
}
}
@ -22,13 +22,13 @@
&:after {
@include loader;
width: 2em;
height: 2em;
margin-left: calc(50% - 1em);
width: 2rem;
height: 2rem;
margin-left: calc(50% - 1rem);
position: absolute;
margin-top: 1em;
margin-top: 1rem;
z-index: 999;
border-width: 0.25em;
border-width: 0.25rem;
}
}
}

59
src/styles/theme/navigation.scss
View File

@ -1,15 +1,6 @@
.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%;
@ -99,7 +90,7 @@
}
.navbar-menu .navbar-item .icon {
margin: 0 0.5em;
margin: 0 0.5rem;
}
.navbar {
@ -119,7 +110,7 @@
overflow-x: auto;
width: $navbar-width;
padding: 0 0 1em;
padding: 0 0 1rem;
left: -147vw;
bottom: 0;
@ -134,13 +125,13 @@
.menu {
.menu-label {
font-size: 1em;
font-size: 1rem;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $grey;
color: $vikunja-nav-color;
font-weight: 500;
min-height: 2.5em;
min-height: 2.5rem;
padding-top: 0;
padding-left: $navbar-padding;
@ -246,9 +237,9 @@
opacity: 0;
height: 0;
text-align: center;
color: $grey;
color: $grey-500;
cursor: pointer;
font-size: 0.8em;
font-size: 0.8rem;
}
.menu-list {
@ -264,7 +255,7 @@
}
span.list-menu-link, a {
padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
transition: all 0.2s ease;
-webkit-border-radius: 0;
@ -280,12 +271,12 @@
height: 1rem;
vertical-align: middle;
padding-bottom: 4px;
padding-right: 0.5em;
padding-right: 0.5rem;
}
&.router-link-exact-active {
color: $primary;
border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
border-left: $vikunja-nav-selected-width solid $primary;
.icon {
color: $primary;
@ -294,7 +285,7 @@
&:hover {
background: $white;
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
border-left: $vikunja-nav-selected-width solid $primary;
}
}
@ -313,15 +304,15 @@
}
&.loader-container.is-loading:after {
width: 1.5em;
height: 1.5em;
top: calc(50% - .75em);
left: calc(50% - .75em);
width: 1.5rem;
height: 1.5rem;
top: calc(50% - .75rem);
left: calc(50% - .75rem);
border-width: 2px;
}
.icon {
color: $grey-almost-light;
color: $grey-400;
}
}
@ -335,7 +326,7 @@
}
span.list-menu-link, a {
padding-left: 2em;
padding-left: 2rem;
display: inline-block;
}
}
@ -357,7 +348,7 @@
}
.logout-icon {
color: lighten($black, 10);
color: $grey-900;
.icon {
vertical-align: middle;
@ -377,7 +368,7 @@
.dropdown-menu {
.dropdown-content {
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
box-shadow: $shadow-md;
}
}
}
@ -386,12 +377,12 @@
display: none;
z-index: 31;
font-weight: bold;
font-size: 2em;
font-size: 2rem;
color: $dark;
line-height: 1;
&:hover, &:focus {
color: darken($dark, 20);
color: $grey-900;
}
}
@ -443,14 +434,14 @@
}
.logout-icon {
margin-right: 0.85em !important;
margin-right: 0.85rem !important;
}
.menu-bottom-link {
width: 100%;
color: $grey-light;
color: $grey-300;
text-align: center;
display: block;
margin: 1em 0;
font-size: .8em;
margin: 1rem 0;
font-size: .8rem;
}

14
src/styles/theme/notification.scss
View File

@ -1,18 +1,10 @@
.notification {
border: $thickness solid $border;
@each $name, $pair in $colors {
$color: nth($pair, 1);
&.is-#{$name} {
border-color: darken($color, 5);
}
}
}
.notifications {
left: 0.5em !important;
bottom: 1em !important;
left: 0.5rem !important;
bottom: 1rem !important;
.notification-wrapper .notification {
-webkit-border-radius: 0;
@ -21,7 +13,7 @@
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0.4em;
border-left-width: 0.4rem;
}
}

6
src/styles/theme/offline.scss
View File

@ -10,15 +10,15 @@
width: 100vw;
bottom: 5vh;
color: $white;
padding: 0 1em;
padding: 0 1rem;
h1 {
font-weight: bold;
font-size: 1.5em;
font-size: 1.5rem;
text-align: center;
color: $white;
font-weight: 700 !important;
font-size: 1.5em;
font-size: 1.5rem;
}
}
}

2
src/styles/theme/theme.scss
View File

@ -81,7 +81,7 @@ button.table {
}
.pagination {
padding-bottom: 1em;
padding-bottom: 1rem;
.pagination-previous,
.pagination-next {

18
src/styles/theme/update-notification.scss
View File

@ -1,18 +1,18 @@
.update-notification {
margin: 1em;
margin: 1rem;
display: flex;
align-items: center;
background: $warning;
padding: 0 0 0 .5em;
padding: 0 0 0 .5rem;
border-radius: $radius;
font-size: .9em;
color: darken($dark, 5);
font-size: .9rem;
color: $grey-900;
justify-content: space-between;
@media screen and (max-width: $desktop) {
& {
position: fixed;
bottom: 1em;
bottom: 1rem;
margin: 0;
width: 450px;
left: calc(50vw - 225px);
@ -22,9 +22,9 @@
@media screen and (max-width: $tablet) {
& {
position: fixed;
left: 1em;
right: 1em;
bottom: 1em;
left: 1rem;
right: 1rem;
bottom: 1rem;
width: auto;
}
}
@ -35,6 +35,6 @@
}
.button {
margin-left: .5em;
margin-left: .5rem;
}
}

3
src/styles/theme/variables/_all.scss Normal file
View File

@ -0,0 +1,3 @@
@import 'colors';
@import 'shadows';
@import 'variables';

17
src/styles/theme/variables/colors.scss Normal file
View File

@ -0,0 +1,17 @@
$grey-100: #f3f4f6;
$grey-200: #E5E7EB;
$grey-300: #D1D5DB;
$grey-400: #9CA3AF;
$grey-500: #6B7280;
$grey-600: #4B5563;
$grey-700: #374151;
$grey-800: #1F2937;
$grey-900: #111827;
// Bulma defaults
$grey-dark: $grey-800;
$grey-darker: $grey-700;
$grey: $grey-500;
$grey-light: $grey-300;
$grey-lighter: $grey-200;
$grey-lightest: $grey-100;

5
src/styles/theme/variables/shadows.scss Normal file
View File

@ -0,0 +1,5 @@
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
$shadow-xl: 0 20px 40px rgba($grey-500, .2);

35
src/styles/theme/variables.scss → src/styles/theme/variables/variables.scss
View File

@ -1,52 +1,45 @@
@import 'colors';
$black: hsl(0, 0%, 4%) !default;
$orange: #ff851b;
$green: #00db60;
$red: #ff4136;
$blue: #1973ff;
$primary: $blue;
$dark: lighten($black, 8);
$grey: hsl(0, 0%, 48%);
$grey-almost-light: hsl(0, 0%, 57%);
$dark: $grey-900;
$info-invert: #fff;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$thickness: 1px;
$pagination-current-border: darken($primary, 5);
$pagination-current-border: $primary;
$navbar-item-active-color: $primary;
$dropdown-content-shadow: none;
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
$bulmaswatch-import-font: false !default;
$light-background: #F1F5F8;
$light-background: $grey-100;
$transition-duration: 100ms;
$flash-background-duration: 750ms;
$transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: darken(#fff, 10%);
$vikunja-light-text: $grey-100;
$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
$vikunja-green: #4DB788;
$navbar-padding: 2em;
$navbar-padding: 2rem;
$vikunja-nav-background: $light-background;
$vikunja-nav-color: lighten($black, 25);
$vikunja-nav-selected-width: 0.4em;
$vikunja-nav-color: $grey-800;
$vikunja-nav-selected-width: 0.4rem;
$transition-duration: 150ms;
$transition: $transition-duration ease;
$multiselect-primary: $green;
$multiselect-dark: #35495e;
$multiselect-border: #e8e8e8;
$multiselect-highlight: $green;
$multiselect-highlight-negative: $red;
$multiselect-disabled: darken(#fff, 40);
$scrollbar-height: 8px;
$scrollbar-track-color: lighten($dark, 65);
$scrollbar-thumb-color: lighten($dark, 40);
$scrollbar-hover-color: lighten($dark, 30);
$scrollbar-track-color: $grey-300;
$scrollbar-thumb-color: $grey-500;
$scrollbar-hover-color: $grey-700;
$button-height: 2.648em;
$button-height: 2.648rem;
$switch-view-height: 43px;
@ -57,3 +50,5 @@ $navbar-height: 4rem;
$navbar-width: 300px;
$editor-border-color: #ddd;
$dropdown-item-hover-background-color: $grey-100;