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

Remove all usages of darken()

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')
.click()
cy.get('.fullpage')
.should('not.exist')
cy.url()
.should('contain', '/edit')
cy.get('input#teamtext')

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

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

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

@ -1,5 +1,5 @@
.card {
background-color: rgba($grey-200, 0.075);
background-color: $white;
border-radius: $radius;
margin-bottom: 1rem;
@ -18,5 +18,5 @@
.box, .card {
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 {
display: inline-block;
border: 2px solid $primary;
background: lighten($primary, 40);
font-size: 0.85em;
margin: 0.5em;
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;
cursor: pointer;
box-shadow: 2px 2px 2px darken($white, 12%);
box-shadow: 2px 2px 2px $grey-200;
display: block;
font-size: .9em;
@ -141,7 +141,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.footer .icon,
.due-date,
.priority-label {
background: darken($task-background, 5%);
background: $grey-100;
border-radius: $radius;
padding: 0 .5rem;
}
@ -179,7 +179,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
.footer .icon,
.due-date,
.priority-label {
background: darken($task-background, 80%);
background: $grey-800;
}
.footer {
@ -194,7 +194,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
border-radius: $radius;
margin: 0 .5em .5em;
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 {
margin: .5rem 0 .5rem .5rem;
background: darken($background, 5);
background: $grey-200;
&.disabled {
opacity: 0.7;

2
src/styles/components/list.scss
View File

@ -10,7 +10,7 @@
}
.table {
border-top: 1px solid darken(#fff, 15%);
border-top: 1px solid $grey-100;
border-radius: 4px;
overflow: hidden;

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

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

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

@ -3,7 +3,7 @@
display: inline-block;
border-radius: $radius;
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;
margin-bottom: 1rem;
@ -30,11 +30,11 @@
&.is-active {
background: $primary;
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 {
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) {
width: calc(100% - #{$remove-icon-width});
.task {
padding: .5em;
max-width: 100%;
.different-list {
color: lighten($dark, 50);
width: auto;
}
.different-list {
color: $grey-500;
width: auto;
}
}

13
src/styles/components/tasks.scss
View File

@ -21,13 +21,13 @@
display: flex;
flex-wrap: wrap;
padding: 0.5rem 1rem;
border-bottom: 1px solid darken(#fff, 10%);
border-bottom: 1px solid $grey-200;
transition: background-color $transition;
align-items: center;
cursor: pointer;
&:hover {
background-color: darken($light-background, 3);
background-color: $grey-200;
}
.tasktext,
@ -85,7 +85,7 @@
transition: color ease $transition-duration;
&:hover {
color: darken($text, 40%);
color: $grey-900;
}
}
@ -124,7 +124,7 @@
}
span.parent-tasks {
color: lighten($dark, 50);
color: $grey-500;
width: auto;
}
@ -189,7 +189,6 @@
min-height: calc(100% - 1rem);
margin-top: 1rem;
.priority-select {
.select, select {
width: 100%;
@ -207,10 +206,6 @@
float: right;
color: $red;
transition: all $transition;
&:hover {
color: darken($red, 15);
}
}
}
}

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

@ -12,9 +12,10 @@ ul.teams {
color: #363636;
display: block;
padding: 0.5rem 1rem;
transition: background-color $transition;
&: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-300: #D1D5DB;
$grey-400: #9CA3AF;

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

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

17
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%;
@ -285,7 +276,7 @@
&.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;
}
}
@ -377,7 +368,7 @@
.dropdown-menu {
.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;
&:hover, &:focus {
color: darken($dark, 20);
color: $grey-900;
}
}

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

@ -1,13 +1,5 @@
.notification {
border: $thickness solid $border;
@each $name, $pair in $colors {
$color: nth($pair, 1);
&.is-#{$name} {
border-color: darken($color, 5);
}
}
}
.notifications {

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

@ -6,7 +6,7 @@
padding: 0 0 0 .5em;
border-radius: $radius;
font-size: .9em;
color: darken($dark, 5);
color: $grey-900;
justify-content: space-between;
@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: $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: $grey-300;
$scrollbar-thumb-color: $grey-500;