vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Remove all usages of darken()

Browse Source
This commit is contained in:
kolaente 2021-01-23 15:38:23 +01:00
parent 59db199aba
commit 97d31bb6d2
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
19 changed files with 30 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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')

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';

4
src/styles/components/base/card.scss
View File

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

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;
}

1
src/styles/components/gantt.scss
View File

@ -66,7 +66,6 @@ $gantt-vertical-border-color: $grey-100;
.task { .task {
display: inline-block; display: inline-block;
border: 2px solid $primary; border: 2px solid $primary;
background: lighten($primary, 40);
font-size: 0.85em; font-size: 0.85em;
margin: 0.5em; margin: 0.5em;
border-radius: 6px; border-radius: 6px;

8
src/styles/components/kanban.scss
View File

@ -50,7 +50,7 @@ $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: 2px 2px 2px $grey-200;
display: block; display: block;
font-size: .9em; font-size: .9em;
@ -141,7 +141,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;
} }
@ -179,7 +179,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, 80%); background: $grey-800;
} }
.footer { .footer {
@ -194,7 +194,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
border-radius: $radius; border-radius: $radius;
margin: 0 .5em .5em; margin: 0 .5em .5em;
background: transparent; background: transparent;
border: 3px dashed darken($bucket-background, 5%); border: 3px dashed $grey-300;
} }
} }

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/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;

4
src/styles/components/namespaces.scss
View File

@ -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: 0.3em 0.3em 1em $grey-300;
transition: box-shadow $transition; transition: box-shadow $transition;
display: flex; display: flex;
@ -61,7 +61,7 @@ $lists-per-row: 5;
flex-wrap: wrap; flex-wrap: wrap;
&:hover { &:hover {
box-shadow: 0 0 1em lighten($dark, 65); box-shadow: 0 0 1em $grey-300;
} }
@media screen and (min-width: $widescreen) { @media screen and (min-width: $widescreen) {

6
src/styles/components/switch-view.scss
View File

@ -3,7 +3,7 @@
display: inline-block; display: inline-block;
border-radius: $radius; border-radius: $radius;
font-size: .8em; font-size: .8em;
box-shadow: 0.3em 0.3em 0.8em darken($light, 6); box-shadow: 0.3em 0.3em 0.8em $grey-200;
height: $switch-view-height; height: $switch-view-height;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -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: 0.3em 0.3em 0.8em $grey-200;
} }
&:hover { &:hover {
background: lighten($primary, 5); background: $primary;
} }
} }
} }

11
src/styles/components/taskRelations.scss
View File

@ -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;
}
} }
} }

13
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,
@ -85,7 +85,7 @@
transition: color ease $transition-duration; transition: color ease $transition-duration;
&:hover { &:hover {
color: darken($text, 40%); color: $grey-900;
} }
} }
@ -124,7 +124,7 @@
} }
span.parent-tasks { span.parent-tasks {
color: lighten($dark, 50); color: $grey-500;
width: auto; width: auto;
} }
@ -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%;
@ -207,10 +206,6 @@
float: right; float: right;
color: $red; color: $red;
transition: all $transition; transition: all $transition;
&:hover {
color: darken($red, 15);
}
} }
} }
} }

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/colors.scss
View File

@ -1,4 +1,4 @@
$grey-100: #F3F4F6; $grey-100: #f3f4f6;
$grey-200: #E5E7EB; $grey-200: #E5E7EB;
$grey-300: #D1D5DB; $grey-300: #D1D5DB;
$grey-400: #9CA3AF; $grey-400: #9CA3AF;

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

@ -60,7 +60,7 @@
&:active, &:active,
&:focus, &:focus,
&:focus:not(:active) { &:focus:not(:active) {
border-color: darken($color, 10); border-color: $color;
} }
} }
} }

17
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%;
@ -285,7 +276,7 @@
&.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;
} }
} }
@ -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: 0.3em 0.3em 0.8em $grey-300;
} }
} }
} }
@ -391,7 +382,7 @@
line-height: 1; line-height: 1;
&:hover, &:focus { &:hover, &:focus {
color: darken($dark, 20); color: $grey-900;
} }
} }

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

@ -1,13 +1,5 @@
.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 {

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

@ -6,7 +6,7 @@
padding: 0 0 0 .5em; padding: 0 0 0 .5em;
border-radius: $radius; border-radius: $radius;
font-size: .9em; font-size: .9em;
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) {

7
src/styles/theme/variables.scss
View File

@ -34,13 +34,6 @@ $vikunja-nav-selected-width: 0.4em;
$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: $grey-300; $scrollbar-track-color: $grey-300;
$scrollbar-thumb-color: $grey-500; $scrollbar-thumb-color: $grey-500;