ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

General styling and accessibility fixes

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2018-09-01 14:59:07 +02:00
parent bdace3159f
commit b72dca6536
2 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/icons.scss
View File

@@ -35,6 +35,7 @@
.icon-home { .icon-home {
background-image: url('../../../core/img/places/home.svg'); background-image: url('../../../core/img/places/home.svg');
background-image: var(--icon-home-000);
} }
.icon-description { .icon-description {
@@ -52,3 +53,9 @@
.icon-toggle-compact-expanded { .icon-toggle-compact-expanded {
background-image: url('../img/toggle_view_collapse.svg'); background-image: url('../img/toggle_view_collapse.svg');
} }
@if mixin-exists('icon-black-white') {
@include icon-black-white('deck', 'deck', 1);
@include icon-black-white('archive', 'deck', 1);
}

38
css/style.scss
View File

@@ -157,6 +157,7 @@ input.input-inline {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
} }
#board { #board {
@@ -186,9 +187,11 @@ input.input-inline {
.card { .card {
box-shadow: 0px 0px 7px 0px $color-grey; box-shadow: 0px 0px 7px 0px $color-grey;
box-shadow: 0px 0px 7px 0px var(--color-grey);
&.current { &.current {
box-shadow: 0px 0px 7px 0px $color-darkgrey; box-shadow: 0px 0px 7px 0px $color-darkgrey;
box-shadow: 0px 0px 7px 0px var(--color-darkgrey);
} }
} }
} }
@@ -213,10 +216,19 @@ input.input-inline {
padding: 10px; padding: 10px;
> .as-sortable-placeholder { > .as-sortable-placeholder {
display: inline-block !important; display: flex !important;
width: 320px;
min-width: 320px;
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
} }
> .as-sortable-drag {
background-color: $color-main-background;
background-color: var(--color-main-background);
box-shadow: 0 0 7px 0 $color-background-dark;
box-shadow: 0 0 7px 0 var(--color-background-dark);
}
} }
#controls { #controls {
@@ -322,6 +334,7 @@ input.input-inline {
#stack-add { #stack-add {
background-color: $color-lightgrey; background-color: $color-lightgrey;
background-color: var(--color-lightgrey);
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
display: flex; display: flex;
@@ -366,9 +379,9 @@ input.input-inline {
width: 100%; width: 100%;
margin: 0; margin: 0;
font-size: 12pt; font-size: 12pt;
font-weight: 700;
border: 0; border: 0;
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
min-height: initial; min-height: initial;
} }
@@ -401,6 +414,11 @@ input.input-inline {
} }
} }
&.as-sortable-item {
height: 100%;
display: flex;
}
> ul { > ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -410,10 +428,12 @@ input.input-inline {
.card { .card {
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
margin: $board-item-margin; margin: $board-item-margin;
white-space: normal; white-space: normal;
position: relative; position: relative;
box-shadow: 0 0 3px $color-darkgrey; box-shadow: 0 0 3px $color-darkgrey;
box-shadow: 0 0 3px --var(color-darkgrey);
border-radius: 3px; border-radius: 3px;
transition: margin 250ms linear; transition: margin 250ms linear;
@@ -443,6 +463,7 @@ input.input-inline {
.card-controls { .card-controls {
background: $color-lightgrey; background: $color-lightgrey;
background: var(--color-background-dark);
display: flex; display: flex;
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
@@ -477,6 +498,7 @@ input.input-inline {
&.overdue { &.overdue {
background-color: $color-error; background-color: $color-error;
color: $color-primary-text; color: $color-primary-text;
color: var(--color-primary-text);
.icon-badge { .icon-badge {
background-image: url('../img/calendar-white.svg'); background-image: url('../img/calendar-white.svg');
@@ -659,6 +681,7 @@ input.input-inline {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
z-index: 200; z-index: 200;
h3 { h3 {
@@ -698,7 +721,8 @@ input.input-inline {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: $color-main-background;
background-color: var(--color-main-background);
z-index: 100; z-index: 100;
opacity: 0.9; opacity: 0.9;
text-align: center; text-align: center;
@@ -786,7 +810,9 @@ input.input-inline {
} }
&.unsaved { &.unsaved {
background-color: $color-lightgrey; background-color: $color-lightgrey;
background-color: var(--color-lightgrey);
color: $color-darkgrey; color: $color-darkgrey;
color: var(--color-darkgrey);
} }
} }
@@ -827,6 +853,7 @@ input.input-inline {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($color-darkgrey, 0.5); background-color: rgba($color-darkgrey, 0.5);
background-color: var(--color-background-dark);
left: 0; left: 0;
top: 0; top: 0;
} }
@@ -842,9 +869,11 @@ input.input-inline {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
z-index: 2; z-index: 2;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 3px $color-darkgrey; box-shadow: 0 0 3px $color-darkgrey;
box-shadow: 0 0 3px var(--color-darkgrey);
overflow: scroll; overflow: scroll;
} }
h3.attachment-selector { h3.attachment-selector {
@@ -939,6 +968,8 @@ input.input-inline {
.container { .container {
background-color: $color-main-background; background-color: $color-main-background;
background-color: var(--color-main-background);
} }
} }
} }
@@ -1463,6 +1494,7 @@ input.input-inline {
pre { pre {
background-color: $color-lightgrey; background-color: $color-lightgrey;
background-color: var(--color-background-dark);
padding: 3px; padding: 3px;
overflow: auto; overflow: auto;