Improve consistency of the layout (#386)
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:
@ -1,4 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'variables/all';
|
||||
@import 'theme';
|
||||
|
||||
@import 'content';
|
||||
|
@ -42,7 +42,7 @@
|
||||
|
||||
.task-view {
|
||||
border-radius: $radius;
|
||||
margin-top: 1em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.kanban .tasks {
|
||||
|
@ -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 {
|
||||
|
@ -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,7 +2,7 @@
|
||||
.logo {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 2em 0 4em;
|
||||
margin: 2rem 0 4rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -81,7 +81,7 @@ button.table {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
|
@ -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
3
src/styles/theme/variables/_all.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'colors';
|
||||
@import 'shadows';
|
||||
@import 'variables';
|
17
src/styles/theme/variables/colors.scss
Normal file
17
src/styles/theme/variables/colors.scss
Normal 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
5
src/styles/theme/variables/shadows.scss
Normal 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);
|
@ -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;
|
Reference in New Issue
Block a user