local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
cypress/integration/list/list.spec.js
View file

@ -361,10 +361,7 @@ describe('Lists', () => {
}) })
cy.visit('/lists/1/kanban') cy.visit('/lists/1/kanban')
cy.get('.kanban .bucket .tasks') cy.getAttached('.kanban .bucket .tasks .task')
.should('contain', tasks[0].title)
cy.get('.kanban .bucket .tasks .task')
.contains(tasks[0].title) .contains(tasks[0].title)
.click() .click()

2
cypress/integration/sharing/team.spec.js
View file

@ -23,8 +23,6 @@ describe('Team', () => {
.contains('Create') .contains('Create')
.click() .click()
cy.get('.fullpage')
.should('not.exist')
cy.url() cy.url()
.should('contain', '/edit') .should('contain', '/edit')
cy.get('input#teamtext') cy.get('input#teamtext')

17
cypress/support/commands.js Normal file
View file

@ -0,0 +1,17 @@
/**
* getAttached(selector)
* getAttached(selectorFn)
*
* Waits until the selector finds an attached element, then yields it (wrapped).
* selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
*
* Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
*/
Cypress.Commands.add('getAttached', selector => {
const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
let $el = null;
return cy.document().should($d => {
$el = getElement(Cypress.$($d));
expect(Cypress.dom.isDetached($el)).to.be.false;
}).then(() => cy.wrap($el));
});

1
cypress/support/index.js
View file

@ -1,2 +1,3 @@
import './commands'
import 'cypress-file-upload' import 'cypress-file-upload'

6
src/components/input/editor.vue
View file

@ -442,7 +442,7 @@ export default {
<style lang="scss"> <style lang="scss">
@import '../../../node_modules/highlight.js/scss/atelier-heath-light'; @import '../../../node_modules/highlight.js/scss/atelier-heath-light';
@import '../../../node_modules/easymde/dist/easymde.min.css'; @import '../../../node_modules/easymde/dist/easymde.min.css';
@import '../../styles/theme/variables'; @import '../../styles/theme/variables/all';
.editor { .editor {
.clear { .clear {
@ -505,7 +505,7 @@ pre.CodeMirror-line {
} }
ul.actions { ul.actions {
font-size: .8em; font-size: .8rem;
margin: 0; margin: 0;
li { li {
@ -522,7 +522,7 @@ ul.actions {
} }
&, a { &, a {
color: $grey; color: $grey-500;
} }
a:hover { a:hover {

2
src/components/misc/notification.vue
View file

@ -58,6 +58,6 @@ export default {
} }
.buttons { .buttons {
margin-top: 0.5em; margin-top: 0.5rem;
} }
</style> </style>

4
src/components/misc/user.vue
View file

@ -40,7 +40,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.user { .user {
margin: .5em; margin: .5rem;
&.is-inline { &.is-inline {
display: inline; display: inline;
@ -52,7 +52,7 @@ export default {
border-radius: 100%; border-radius: 100%;
vertical-align: middle; vertical-align: middle;
margin-right: .5em; margin-right: .5rem;
} }
} }
</style> </style>

2
src/components/tasks/edit-task.vue
View file

@ -284,6 +284,6 @@ export default {
<style scoped> <style scoped>
form { form {
margin-bottom: 1em; margin-bottom: 1rem;
} }
</style> </style>

4
src/components/tasks/partials/priorityLabel.vue
View file

@ -44,7 +44,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/theme/variables'; @import '../../../styles/theme/variables/all';
.priority-label { .priority-label {
display: inline-flex; display: inline-flex;
@ -58,7 +58,7 @@ span.high-priority {
.icon { .icon {
vertical-align: middle; vertical-align: middle;
width: auto !important; width: auto !important;
padding: 0 .5em; padding: 0 .5rem;
} }
&.not-so-high { &.not-so-high {

2
src/components/tasks/partials/relatedTasks.vue
View file

@ -250,7 +250,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '@/styles/theme/variables'; @import '@/styles/theme/variables/all';
.add-task-relation-button { .add-task-relation-button {
margin-top: -3rem; margin-top: -3rem;

3
src/styles/components/_all.scss
View file

@ -1,7 +1,6 @@
@import 'base/all'; @import 'base/all';
@import 'attachments'; @import 'attachments';
@import 'fullpage';
@import 'gantt'; @import 'gantt';
@import 'labels'; @import 'labels';
@import 'list'; @import 'list';
@ -22,4 +21,4 @@
@import 'legal'; @import 'legal';
@import 'keyboard-shortcuts'; @import 'keyboard-shortcuts';
@import 'api-config'; @import 'api-config';
@import 'datepicker' @import 'datepicker';

16
src/styles/components/attachments.scss
View file

@ -14,7 +14,7 @@
padding: .5rem; padding: .5rem;
&:hover { &:hover {
background-color: $grey-lightest; background-color: $grey-100;
} }
.filename { .filename {
@ -24,7 +24,7 @@
} }
.info { .info {
color: $grey; color: $grey-500;
font-size: .9rem; font-size: .9rem;
p { p {
@ -84,20 +84,18 @@
.icon { .icon {
width: 100%; width: 100%;
font-size: 5em; font-size: 5rem;
height: auto; height: auto;
text-shadow: 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px rgba(0, 0, 0, .2), 0 1px 5px rgba(0, 0, 0, .12); text-shadow: $shadow-md;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite; animation: bounce 2s infinite;
} }
.hint { .hint {
margin: .5em auto 2em; margin: .5rem auto 2rem;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); box-shadow: $shadow-md;
background: $primary; background: $primary;
padding: 1em; padding: 1rem;
color: $white; color: $white;
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;

8
src/styles/components/base/card.scss
View file

@ -1,5 +1,5 @@
.card { .card {
background-color: rgba($grey-lighter, 0.075); background-color: $white;
border-radius: $radius; border-radius: $radius;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -11,12 +11,12 @@
.card-header { .card-header {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid $grey-lighter; border-bottom: 1px solid $grey-200;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
} }
} }
.box, .card { .box, .card {
border: $thickness solid $border; border: 1px solid $grey-200;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6); box-shadow: $shadow-md;
} }

6
src/styles/components/base/fancycheckbox.scss
View file

@ -9,7 +9,7 @@
} }
&.is-block { &.is-block {
margin: .5em .2em; margin: .5rem .2rem;
} }
.check { .check {
@ -26,9 +26,9 @@
} }
span { span {
font-size: 0.8em; font-size: 0.8rem;
vertical-align: top; vertical-align: top;
padding-left: .5em; padding-left: .5rem;
} }
svg { svg {

10
src/styles/components/base/multiselect.scss
View file

@ -12,19 +12,19 @@
background: $white !important; background: $white !important;
&, &:focus-within { &, &:focus-within {
border-bottom-color: $grey-lighter !important; border-bottom-color: $grey-200 !important;
} }
} }
.input-wrapper { .input-wrapper {
padding: 0; padding: 0;
background: $white !important; background: $white !important;
border-color: $grey-lighter !important; border-color: $grey-200 !important;
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
&:hover { &:hover {
border-color: $grey-light !important; border-color: $grey-300 !important;
} }
.input { .input {
@ -105,7 +105,7 @@
} }
&:focus, &:hover { &:focus, &:hover {
background: $grey-lightest; background: $grey-100;
box-shadow: none !important; box-shadow: none !important;
.hint-text { .hint-text {
@ -114,7 +114,7 @@
} }
&:active { &:active {
background: $grey-lighter; background: $grey-200;
} }
} }
} }

10
src/styles/components/base/scrollbars.scss
View file

@ -6,17 +6,13 @@
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: $scrollbar-track-color; background: $scrollbar-track-color;
border-radius: 10px; border-radius: .5rem;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: .5rem;
background: $scrollbar-thumb-color; background: $scrollbar-thumb-color;
-webkit-transition: background-color $transition; transition: all $transition;
-moz-transition: background-color $transition;
-ms-transition: background-color $transition;
-o-transition: background-color $transition;
transition: background-color $transition;
&:hover { &:hover {
background: $scrollbar-hover-color; background: $scrollbar-hover-color;

88
src/styles/components/base/tooltip.scss
View file

@ -1,7 +1,7 @@
.tooltip { .tooltip {
visibility: collapse; visibility: collapse;
z-index: 10000; z-index: 10000;
font-size: 0.8em; font-size: 0.8rem;
text-align: center; text-align: center;
background: $dark; background: $dark;
color: white; color: white;
@ -37,90 +37,4 @@
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&.popover {
.popover-inner {
background: $light;
color: $dark;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.popover-arrow {
border-color: $light;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
} }

2
src/styles/components/color-picker.scss
View file

@ -5,7 +5,7 @@
.verte__guide { .verte__guide {
border-radius: 100%; border-radius: 100%;
border: 1px solid $grey-light; border: 1px solid $grey-300;
box-shadow: $card-shadow; box-shadow: $card-shadow;
} }
} }

2
src/styles/components/comments.scss
View file

@ -2,7 +2,7 @@
align-items: center; align-items: center;
.media-left { .media-left {
margin: 0 1em; margin: 0 1rem;
} }
.comment-info { .comment-info {

57
src/styles/components/fullpage.scss
View file

@ -1,57 +0,0 @@
.fullpage {
position: fixed;
text-align: center;
top: 0;
z-index: 50;
left: 0;
right: 0;
bottom: 0;
padding: 15vh 20vh;
background: $vikunja-blue;
color: $vikunja-light-text;
font-size: 2em;
@media screen and (max-width: $tablet) {
padding: 20vw 10vw;
}
input {
background: transparent;
border: none;
border-bottom: 3px solid darken($vikunja-blue, 10);
color: $vikunja-light-text;
padding: 1em 0.5em;
font-size: 1.5em;
border-radius: 0;
&::placeholder {
color: $vikunja-light-text;
}
}
.button {
font-size: 1em;
margin-top: 4px;
}
h3 {
font-size: 1.5em;
}
.close {
position: fixed;
top: 5vh;
right: 6vh;
color: $vikunja-light-text;
}
.small {
margin-top: 1em;
font-size: 0.5em;
}
}
.fullpage-overlay {
z-index: 6 !important;
}

47
src/styles/components/gantt.scss
View file

@ -1,8 +1,8 @@
$gantt-border: 1px solid $grey-lighter; $gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: lighten($grey, 45); $gantt-vertical-border-color: $grey-100;
.gantt-chart-container { .gantt-chart-container {
padding-bottom: 1em; padding-bottom: 1rem;
} }
.gantt-chart { .gantt-chart {
@ -17,7 +17,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
display: flex; display: flex;
.month { .month {
padding: 0.5em 0 0; padding: 0.5rem 0 0;
border-right: $gantt-border; border-right: $gantt-border;
font-family: $vikunja-font; font-family: $vikunja-font;
font-weight: bold; font-weight: bold;
@ -30,7 +30,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
display: flex; display: flex;
.day { .day {
padding: 0.5em 0; padding: 0.5rem 0;
font-weight: normal; font-weight: normal;
&.today { &.today {
@ -41,13 +41,13 @@ $gantt-vertical-border-color: lighten($grey, 45);
} }
.theday { .theday {
padding: 0 .5em; padding: 0 .5rem;
width: 100%; width: 100%;
display: block; display: block;
} }
.weekday { .weekday {
font-size: 0.8em; font-size: 0.8rem;
} }
} }
} }
@ -66,11 +66,10 @@ $gantt-vertical-border-color: lighten($grey, 45);
.task { .task {
display: inline-block; display: inline-block;
border: 2px solid $primary; border: 2px solid $primary;
background: lighten($primary, 40); font-size: 0.85rem;
font-size: 0.85em; margin: 0.5rem;
margin: 0.5em;
border-radius: 6px; border-radius: 6px;
padding: 0.25em 0.5em; padding: 0.25rem 0.5rem;
cursor: grab; cursor: grab;
position: relative; position: relative;
@ -147,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
} }
.high-priority { .high-priority {
margin: 0 0 0 .5em; margin: 0 0 0 .5rem;
vertical-align: bottom; vertical-align: bottom;
} }
@ -158,8 +157,8 @@ $gantt-vertical-border-color: lighten($grey, 45);
} }
&.nodate { &.nodate {
border: 2px dashed $grey-light; border: 2px dashed $grey-300;
background: lighten($grey-light, 40); background: $grey-100;
} }
&:active { &:active {
@ -183,17 +182,17 @@ $gantt-vertical-border-color: lighten($grey, 45);
} }
.add-new-task { .add-new-task {
padding: 1em .7em .4em .7em; padding: 1rem .7rem .4rem .7rem;
display: flex; display: flex;
max-width: 450px; max-width: 450px;
.input { .input {
margin-right: .7em; margin-right: .7rem;
font-size: .8em; font-size: .8rem;
} }
.button { .button {
font-size: .68em; font-size: .68rem;
} }
} }
@ -209,14 +208,14 @@ $gantt-vertical-border-color: lighten($grey, 45);
.range-picker { .range-picker {
display: flex; display: flex;
margin-bottom: 1em; margin-bottom: 1rem;
.field { .field {
margin: 0 0 0 .5em; margin: 0 0 0 .5rem;
max-width: 100px; max-width: 100px;
&, .input { &, .input {
font-size: .8em; font-size: .8rem;
} }
.select { .select {
@ -225,12 +224,12 @@ $gantt-vertical-border-color: lighten($grey, 45);
select { select {
height: auto; height: auto;
font-size: 0.75em; font-size: 0.75rem;
} }
.label { .label {
font-size: .9em; font-size: .9rem;
padding-left: .4em; padding-left: .4rem;
} }
} }
} }

51
src/styles/components/kanban.scss
View file

@ -3,7 +3,7 @@ $task-background: $white;
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px; $bucket-width: 300px;
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px'; $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
.app-content.list\.kanban { .app-content.list\.kanban {
padding-bottom: 0; padding-bottom: 0;
@ -17,22 +17,21 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
overflow-y: hidden; overflow-y: hidden;
height: calc(#{$crazy-height-calculation}); height: calc(#{$crazy-height-calculation});
margin: 0 -1.5rem; margin: 0 -1.5rem;
padding: 0 1.5em; padding: 0 1.5rem;
.bucket { .bucket {
background-color: $bucket-background; background-color: $bucket-background;
border-radius: $radius; border-radius: $radius;
position: relative; position: relative;
flex: 0 0 $bucket-width; flex: 0 0 $bucket-width;
margin: 0 1em 0 0; margin: 0 1rem 0 0;
max-height: 100%; max-height: 100%;
min-height: 20px; min-height: 20px;
max-width: $bucket-width; max-width: $bucket-width;
.tasks { .tasks {
max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em); max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem);
overflow: auto; overflow: auto;
.task { .task {
@ -50,20 +49,20 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
transition: $ease-out; transition: $ease-out;
cursor: pointer; cursor: pointer;
box-shadow: 2px 2px 2px darken($white, 12%); box-shadow: $shadow-xs;
display: block; display: block;
font-size: .9em; font-size: .9rem;
padding: .5em; padding: .5rem;
margin: .5em; margin: .5rem;
border-radius: $radius; border-radius: $radius;
background: $task-background; background: $task-background;
&.loader-container.is-loading:after { &.loader-container.is-loading:after {
width: 1.5em; width: 1.5rem;
height: 1.5em; height: 1.5rem;
top: calc(50% - .75em); top: calc(50% - .75rem);
left: calc(50% - .75em); left: calc(50% - .75rem);
border-width: 2px; border-width: 2px;
} }
@ -94,7 +93,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
} }
.label-wrapper .tag { .label-wrapper .tag {
margin: .5em .5em 0 0; margin: .5rem .5rem 0 0;
} }
.footer { .footer {
@ -128,7 +127,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.priority-label { .priority-label {
font-size: .75rem; font-size: .75rem;
height: 2em; height: 2rem;
.icon { .icon {
height: 1rem; height: 1rem;
@ -141,7 +140,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.footer .icon, .footer .icon,
.due-date, .due-date,
.priority-label { .priority-label {
background: darken($task-background, 5%); background: $grey-100;
border-radius: $radius; border-radius: $radius;
padding: 0 .5rem; padding: 0 .5rem;
} }
@ -151,14 +150,14 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
} }
.task-id { .task-id {
color: $grey; color: $grey-500;
font-size: .8rem; font-size: .8rem;
} }
.is-done { .is-done {
margin: 0; margin: 0;
font-size: .8em; font-size: .8rem;
padding: .25em .5em; padding: .25rem .5rem;
} }
&.is-moving { &.is-moving {
@ -173,13 +172,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
color: $white; color: $white;
.task-id { .task-id {
color: $grey-lighter; color: $grey-200;
} }
.footer .icon, .footer .icon,
.due-date, .due-date,
.priority-label { .priority-label {
background: darken($task-background, 80%); background: $grey-800;
} }
.footer { .footer {
@ -192,9 +191,9 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.drop-preview { .drop-preview {
border-radius: $radius; border-radius: $radius;
margin: 0 .5em .5em; margin: 0 .5rem .5rem;
background: transparent; background: transparent;
border: 3px dashed darken($bucket-background, 5%); border: 3px dashed $grey-300;
} }
} }
@ -228,7 +227,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: .5em; padding: .5rem;
.limit { .limit {
padding-left: .5rem; padding-left: .5rem;
@ -245,13 +244,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.title.input { .title.input {
height: auto; height: auto;
padding: .4em .5em; padding: .4rem .5rem;
display: inline-block; display: inline-block;
} }
} }
.bucket-footer { .bucket-footer {
padding: .5em; padding: .5rem;
.button { .button {
background-color: transparent; background-color: transparent;

6
src/styles/components/keyboard-shortcuts.scss
View file

@ -4,7 +4,7 @@
right: 1rem; right: 1rem;
z-index: 4500; // The modal has a z-index of 4000 z-index: 4500; // The modal has a z-index of 4000
color: $grey; color: $grey-500;
transition: color $transition; transition: color $transition;
} }
@ -33,8 +33,8 @@
span { span {
padding: .1rem .35rem; padding: .1rem .35rem;
border: 1px solid $grey-light; border: 1px solid $grey-300;
background: lighten($grey-lightest, 2.5); background: $grey-100;
border-radius: 3px; border-radius: 3px;
font-size: .75rem; font-size: .75rem;
} }

2
src/styles/components/labels.scss
View file

@ -5,7 +5,7 @@
.tag { .tag {
margin: .5rem 0 .5rem .5rem; margin: .5rem 0 .5rem .5rem;
background: darken($background, 5); background: $grey-200;
&.disabled { &.disabled {
opacity: 0.7; opacity: 0.7;

2
src/styles/components/legal.scss
View file

@ -1,6 +1,6 @@
.legal-links { .legal-links {
margin-top: 1rem; margin-top: 1rem;
text-align: right; text-align: right;
color: $grey-light; color: $grey-300;
font-size: 1rem; font-size: 1rem;
} }

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

@ -5,19 +5,19 @@
font-size: .8rem; font-size: .8rem;
a { a {
color: $grey-dark; color: $grey-800;
} }
} }
.image-search-result { .image-search-result {
margin-top: 1em; margin-top: 1rem;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
.image { .image {
width: calc(100% / 5 - 1em); width: calc(100% / 5 - 1rem);
height: 120px; height: 120px;
margin: .5em; margin: .5rem;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;
@ -30,7 +30,7 @@
} }
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop) {
width: calc(100% / 4 - 1em); width: calc(100% / 4 - 1rem);
&:nth-child(4n) { &:nth-child(4n) {
page-break-after: always; // CSS 2.1 syntax page-break-after: always; // CSS 2.1 syntax
@ -39,7 +39,7 @@
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
width: calc(100% / 2 - 1em); width: calc(100% / 2 - 1rem);
&:nth-child(2n) { &:nth-child(2n) {
page-break-after: always; // CSS 2.1 syntax page-break-after: always; // CSS 2.1 syntax
@ -48,7 +48,7 @@
} }
@media screen and (max-width: ($mobile)) { @media screen and (max-width: ($mobile)) {
width: calc(100% - 1em); width: calc(100% - 1rem);
&:nth-child(1n) { &:nth-child(1n) {
page-break-after: always; // CSS 2.1 syntax page-break-after: always; // CSS 2.1 syntax
@ -61,10 +61,10 @@
display: block; display: block;
opacity: 0; opacity: 0;
width: 100%; width: 100%;
padding: .25em 0; padding: .25rem 0;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
font-size: .75em; font-size: .75rem;
font-weight: bold; font-weight: bold;
color: $white; color: $white;
transition: opacity $transition; transition: opacity $transition;

18
src/styles/components/list.scss
View file

@ -10,7 +10,7 @@
} }
.table { .table {
border-top: 1px solid darken(#fff, 15%); border-top: 1px solid $grey-100;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@ -29,7 +29,7 @@
} }
.task-add .button { .task-add .button {
padding: 10px 1em; padding: 10px 1rem;
height: 40px; height: 40px;
} }
@ -48,7 +48,7 @@
} }
.icon { .icon {
color: $grey-almost-light; color: $grey-400;
margin-left: 1rem; margin-left: 1rem;
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
@ -56,7 +56,7 @@
} }
.edit-list { .edit-list {
padding-bottom: 1em; padding-bottom: 1rem;
} }
.filter-container { .filter-container {
@ -65,7 +65,7 @@
min-width: 400px; min-width: 400px;
max-width: 180px; max-width: 180px;
position: absolute; position: absolute;
right: 1.5em; right: 1.5rem;
margin-top: -59px; margin-top: -59px;
z-index: 4; z-index: 4;
@ -74,7 +74,7 @@
justify-content: flex-end; justify-content: flex-end;
.button:not(:last-child) { .button:not(:last-child) {
margin-right: .5em; margin-right: .5rem;
} }
} }
@ -95,7 +95,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-right: .5em; margin-right: .5rem;
.button, .input { .button, .input {
height: $switch-view-height; height: $switch-view-height;
@ -119,7 +119,7 @@
} }
.filters input { .filters input {
font-size: .9em; font-size: .9rem;
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
@ -157,5 +157,5 @@
} }
.list-namespace-title { .list-namespace-title {
color: $grey; color: $grey-500;
} }

8
src/styles/components/migrator.scss
View file

@ -5,7 +5,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
text-transform: capitalize; text-transform: capitalize;
margin-right: 1em; margin-right: 1rem;
img { img {
display: block; display: block;
@ -15,7 +15,7 @@
.migration-in-progress-container { .migration-in-progress-container {
max-width: 400px; max-width: 400px;
margin: 4em auto 0; margin: 4rem auto 0;
text-align: center; text-align: center;
} }
@ -25,7 +25,7 @@
max-width: 400px; max-width: 400px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 2em; margin-bottom: 2rem;
img { img {
display: block; display: block;
@ -39,7 +39,7 @@
span { span {
transition: all 500ms ease; transition: all 500ms ease;
background: $grey; background: $grey-500;
height: 10px; height: 10px;
width: 10px; width: 10px;
display: inline-block; display: inline-block;

2
src/styles/components/modal.scss
View file

@ -54,7 +54,7 @@
top: 5px; top: 5px;
right: 26px; right: 26px;
color: $white; color: $white;
font-size: 2em; font-size: 2rem;
} }
} }
} }

16
src/styles/components/namespaces.scss
View file

@ -32,7 +32,7 @@ $lists-per-row: 5;
.is-archived { .is-archived {
font-size: 0.75rem; font-size: 0.75rem;
border: 1px solid $grey; border: 1px solid $grey-500;
color: $grey !important; color: $grey !important;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
@ -53,7 +53,7 @@ $lists-per-row: 5;
margin: 0 1rem 1rem 0; margin: 0 1rem 1rem 0;
padding: 1rem; padding: 1rem;
border-radius: $radius; border-radius: $radius;
box-shadow: 0.3em 0.3em 1em lighten($dark, 75); box-shadow: $shadow-sm;
transition: box-shadow $transition; transition: box-shadow $transition;
display: flex; display: flex;
@ -61,7 +61,13 @@ $lists-per-row: 5;
flex-wrap: wrap; flex-wrap: wrap;
&:hover { &:hover {
box-shadow: 0 0 1em lighten($dark, 65); box-shadow: $shadow-md;
}
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: $shadow-xs !important;
} }
@media screen and (min-width: $widescreen) { @media screen and (min-width: $widescreen) {
@ -105,7 +111,7 @@ $lists-per-row: 5;
text-align: right; text-align: right;
.is-archived { .is-archived {
font-size: .75em; font-size: .75rem;
float: left; float: left;
} }
} }
@ -130,7 +136,7 @@ $lists-per-row: 5;
background-position: center; background-position: center;
.title { .title {
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker; text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
color: $white; color: $white;
} }
} }

18
src/styles/components/switch-view.scss
View file

@ -1,16 +1,16 @@
.switch-view { .switch-view {
background: $white; background: $white;
display: inline-block; display: inline-flex;
border-radius: $radius; border-radius: $radius;
font-size: .8em; font-size: .75rem;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6); box-shadow: $shadow-sm;
height: $switch-view-height; height: $switch-view-height;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: .5rem;
a { a {
padding: .5em; padding: .25rem .5rem;
display: inline-block; display: block;
margin: .4em;
border-radius: $radius; border-radius: $radius;
-webkit-transition: all 100ms; -webkit-transition: all 100ms;
@ -20,7 +20,7 @@
transition: all 100ms; transition: all 100ms;
&:not(:last-child) { &:not(:last-child) {
margin-right: 0; margin-right: .5rem;
} }
&.is-active, &:hover { &.is-active, &:hover {
@ -30,11 +30,11 @@
&.is-active { &.is-active {
background: $primary; background: $primary;
font-weight: bold; font-weight: bold;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6); box-shadow: $shadow-xs;
} }
&:hover { &:hover {
background: lighten($primary, 5); background: $primary;
} }
} }
} }

2
src/styles/components/table-view.scss
View file

@ -9,7 +9,7 @@
} }
.is-done { .is-done {
font-size: .9em; font-size: .9rem;
margin: 0; margin: 0;
} }
} }

36
src/styles/components/task.scss
View file

@ -1,14 +1,14 @@
.task-view { .task-view {
// This is a workaround to hide the llama background from the top on the task detail page // This is a workaround to hide the llama background from the top on the task detail page
margin-top: -1.5em; margin-top: -1.5rem;
padding: 1em; padding: 1rem;
background-color: $light-background; background-color: $light-background;
.subtitle { .subtitle {
color: $grey; color: $grey-500;
a { a {
color: $grey-dark; color: $grey-800;
} }
} }
@ -17,7 +17,7 @@
} }
.icon.is-grey { .icon.is-grey {
color: lighten($grey, 5%); color: $grey-400;
} }
.heading { .heading {
@ -30,13 +30,13 @@
margin-bottom: 0; margin-bottom: 0;
&.input { &.input {
// 1.8rem is the font-size, 1.125 is the line-height, .3em padding everywhere, 1px border around the whole thing. // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
min-height: calc(1.8rem * 1.125 + .6em + 2px); min-height: calc(1.8rem * 1.125 + .6rem + 2px);
} }
} }
.title.task-id { .title.task-id {
color: lighten($grey, 25%); color: $grey-400;
white-space: nowrap; white-space: nowrap;
} }
@ -45,7 +45,7 @@
align-items: start; align-items: start;
.title.input { .title.input {
margin: 0 -.3em .5rem -.3em; // the title has 0.3em padding - this make the text inside of it align with the rest margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
} }
} }
} }
@ -57,7 +57,7 @@
a.remove { a.remove {
color: $red; color: $red;
vertical-align: middle; vertical-align: middle;
padding-left: .5em; padding-left: .5rem;
line-height: 1; line-height: 1;
} }
} }
@ -93,12 +93,12 @@
} }
.details { .details {
padding-bottom: 0.75em; padding-bottom: 0.75rem;
flex-flow: row wrap; flex-flow: row wrap;
.detail-title { .detail-title {
display: block; display: block;
color: lighten($grey, 15%); color: $grey-400;
} }
.none { .none {
@ -187,14 +187,14 @@
.action-buttons { .action-buttons {
a.button { a.button {
width: 100%; width: 100%;
margin-bottom: .5em; margin-bottom: .5rem;
justify-content: left; justify-content: left;
} }
} }
.created { .created {
font-size: .75rem; font-size: .75rem;
color: $grey; color: $grey-500;
text-align: right; text-align: right;
} }
} }
@ -223,9 +223,9 @@
.is-done { .is-done {
background: $green; background: $green;
color: $white; color: $white;
padding: .5em; padding: .5rem;
font-size: 1.5em; font-size: 1.5rem;
margin-left: .5em; margin-left: .5rem;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;
border-radius: 4px; border-radius: 4px;
@ -234,7 +234,7 @@
.modal-container .task-view { .modal-container .task-view {
border-radius: $radius; border-radius: $radius;
padding: 1em; padding: 1rem;
color: $text; color: $text;
background-color: $light-background !important; background-color: $light-background !important;

13
src/styles/components/taskRelations.scss
View file

@ -11,7 +11,7 @@ $remove-icon-width: 24px;
.related-tasks { .related-tasks {
.title { .title {
font-size: 1em; font-size: 1rem;
margin: 0; margin: 0;
} }
@ -21,14 +21,9 @@ $remove-icon-width: 24px;
a:not(.remove) { a:not(.remove) {
width: calc(100% - #{$remove-icon-width}); width: calc(100% - #{$remove-icon-width});
.task { .different-list {
padding: .5em; color: $grey-500;
max-width: 100%; width: auto;
.different-list {
color: lighten($dark, 50);
width: auto;
}
} }
} }

47
src/styles/components/tasks.scss
View file

@ -21,13 +21,13 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid darken(#fff, 10%); border-bottom: 1px solid $grey-200;
transition: background-color $transition; transition: background-color $transition;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: darken($light-background, 3); background-color: $grey-200;
} }
.tasktext, .tasktext,
@ -45,8 +45,8 @@
.task-list { .task-list {
width: auto; width: auto;
color: lighten($grey, 25%); color: $grey-400;
font-size: .9em; font-size: .9rem;
white-space: nowrap; white-space: nowrap;
} }
@ -60,7 +60,7 @@
} }
.tag { .tag {
margin: 0 0.5em; margin: 0 0.5rem;
} }
.avatar { .avatar {
@ -85,7 +85,7 @@
transition: color ease $transition-duration; transition: color ease $transition-duration;
&:hover { &:hover {
color: darken($text, 40%); color: $grey-900;
} }
} }
@ -120,11 +120,11 @@
.tasktext.done { .tasktext.done {
text-decoration: line-through; text-decoration: line-through;
color: $grey; color: $grey-500;
} }
span.parent-tasks { span.parent-tasks {
color: lighten($dark, 50); color: $grey-500;
width: auto; width: auto;
} }
@ -143,12 +143,12 @@
} }
&.loader-container.is-loading:after { &.loader-container.is-loading:after {
top: calc(50% - 1em); top: calc(50% - 1rem);
left: calc(50% - 1em); left: calc(50% - 1rem);
width: 2em; width: 2rem;
height: 2em; height: 2rem;
border-left-color: $grey-light; border-left-color: $grey-300;
border-bottom-color: $grey-light; border-bottom-color: $grey-300;
} }
} }
@ -189,7 +189,6 @@
min-height: calc(100% - 1rem); min-height: calc(100% - 1rem);
margin-top: 1rem; margin-top: 1rem;
.priority-select { .priority-select {
.select, select { .select, select {
width: 100%; width: 100%;
@ -201,23 +200,19 @@
margin: 0; margin: 0;
li { li {
padding: 0.5em 0.5em 0; padding: 0.5rem 0.5rem 0;
a { a {
float: right; float: right;
color: $red; color: $red;
transition: all $transition; transition: all $transition;
&:hover {
color: darken($red, 15);
}
} }
} }
} }
.tag { .tag {
margin-right: 0.5em; margin-right: 0.5rem;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -231,7 +226,7 @@
&.nothing { &.nothing {
text-align: center; text-align: center;
margin-top: 3em; margin-top: 3rem;
} }
.input { .input {
@ -242,7 +237,7 @@
} }
img { img {
margin-top: 2em; margin-top: 2rem;
} }
.user img{ .user img{
@ -250,7 +245,7 @@
} }
.spinner.is-loading:after { .spinner.is-loading:after {
margin-left: calc(40% - 1em); margin-left: calc(40% - 1rem);
} }
} }
@ -261,7 +256,7 @@
width: 100%; width: 100%;
max-width: $defer-task-max-width; max-width: $defer-task-max-width;
border-radius: $radius; border-radius: $radius;
border: 1px solid $grey-lighter; border: 1px solid $grey-200;
padding: 1rem; padding: 1rem;
margin: 1rem; margin: 1rem;
background: $white; background: $white;

3
src/styles/components/teams.scss
View file

@ -12,9 +12,10 @@ ul.teams {
color: #363636; color: #363636;
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
transition: background-color $transition;
&:hover { &:hover {
background: darken(#fff, 2%); background: $grey-100;
} }
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,18 +1,10 @@
.notification { .notification {
border: $thickness solid $border; border: $thickness solid $border;
@each $name, $pair in $colors {
$color: nth($pair, 1);
&.is-#{$name} {
border-color: darken($color, 5);
}
}
} }
.notifications { .notifications {
left: 0.5em !important; left: 0.5rem !important;
bottom: 1em !important; bottom: 1rem !important;
.notification-wrapper .notification { .notification-wrapper .notification {
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -21,7 +13,7 @@
border-top-width: 0; border-top-width: 0;
border-right-width: 0; border-right-width: 0;
border-bottom-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; width: 100vw;
bottom: 5vh; bottom: 5vh;
color: $white; color: $white;
padding: 0 1em; padding: 0 1rem;
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 1.5em; font-size: 1.5rem;
text-align: center; text-align: center;
color: $white; color: $white;
font-weight: 700 !important; 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 { .pagination {
padding-bottom: 1em; padding-bottom: 1rem;
.pagination-previous, .pagination-previous,
.pagination-next { .pagination-next {

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

@ -1,18 +1,18 @@
.update-notification { .update-notification {
margin: 1em; margin: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
background: $warning; background: $warning;
padding: 0 0 0 .5em; padding: 0 0 0 .5rem;
border-radius: $radius; border-radius: $radius;
font-size: .9em; font-size: .9rem;
color: darken($dark, 5); color: $grey-900;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop) {
& { & {
position: fixed; position: fixed;
bottom: 1em; bottom: 1rem;
margin: 0; margin: 0;
width: 450px; width: 450px;
left: calc(50vw - 225px); left: calc(50vw - 225px);
@ -22,9 +22,9 @@
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
& { & {
position: fixed; position: fixed;
left: 1em; left: 1rem;
right: 1em; right: 1rem;
bottom: 1em; bottom: 1rem;
width: auto; width: auto;
} }
} }
@ -35,6 +35,6 @@
} }
.button { .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; $black: hsl(0, 0%, 4%) !default;
$orange: #ff851b; $orange: #ff851b;
$green: #00db60; $green: #00db60;
$red: #ff4136; $red: #ff4136;
$blue: #1973ff; $blue: #1973ff;
$primary: $blue; $primary: $blue;
$dark: lighten($black, 8); $dark: $grey-900;
$grey: hsl(0, 0%, 48%);
$grey-almost-light: hsl(0, 0%, 57%);
$info-invert: #fff; $info-invert: #fff;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif; $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$thickness: 1px; $thickness: 1px;
$pagination-current-border: darken($primary, 5); $pagination-current-border: $primary;
$navbar-item-active-color: $primary; $navbar-item-active-color: $primary;
$dropdown-content-shadow: none; $dropdown-content-shadow: none;
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow; $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
$bulmaswatch-import-font: false !default; $bulmaswatch-import-font: false !default;
$light-background: #F1F5F8; $light-background: $grey-100;
$transition-duration: 100ms; $transition-duration: 100ms;
$flash-background-duration: 750ms; $flash-background-duration: 750ms;
$transparent-background-light: rgba($light-background, 0.9); $transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif; $vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: darken(#fff, 10%); $vikunja-light-text: $grey-100;
$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9 $vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
$vikunja-green: #4DB788; $vikunja-green: #4DB788;
$navbar-padding: 2em; $navbar-padding: 2rem;
$vikunja-nav-background: $light-background; $vikunja-nav-background: $light-background;
$vikunja-nav-color: lighten($black, 25); $vikunja-nav-color: $grey-800;
$vikunja-nav-selected-width: 0.4em; $vikunja-nav-selected-width: 0.4rem;
$transition-duration: 150ms; $transition-duration: 150ms;
$transition: $transition-duration ease; $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-height: 8px;
$scrollbar-track-color: lighten($dark, 65); $scrollbar-track-color: $grey-300;
$scrollbar-thumb-color: lighten($dark, 40); $scrollbar-thumb-color: $grey-500;
$scrollbar-hover-color: lighten($dark, 30); $scrollbar-hover-color: $grey-700;
$button-height: 2.648em; $button-height: 2.648rem;
$switch-view-height: 43px; $switch-view-height: 43px;
@ -57,3 +50,5 @@ $navbar-height: 4rem;
$navbar-width: 300px; $navbar-width: 300px;
$editor-border-color: #ddd; $editor-border-color: #ddd;
$dropdown-item-hover-background-color: $grey-100;

2
src/views/user/Login.vue
View file

@ -186,7 +186,7 @@ export default {
<style scoped> <style scoped>
.button { .button {
margin: 0 0.4em 0 0; margin: 0 0.4rem 0 0;
} }
.reset-password-link { .reset-password-link {

2
src/views/user/PasswordReset.vue
View file

@ -114,6 +114,6 @@ export default {
<style scoped> <style scoped>
.button { .button {
margin: 0 0.4em 0 0; margin: 0 0.4rem 0 0;
} }
</style> </style>

2
src/views/user/RequestPasswordReset.vue
View file

@ -85,6 +85,6 @@ export default {
<style scoped> <style scoped>
.button { .button {
margin: 0 0.4em 0 0; margin: 0 0.4rem 0 0;
} }
</style> </style>