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