diff options
author | Julius Härtl <jus@bitgrid.net> | 2018-09-01 15:59:07 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2018-10-25 15:00:07 +0300 |
commit | b72dca6536ec0c98adf753784c23a6ef7e5e3f8e (patch) | |
tree | 27bef47e1912acb7b59eb1f6b763e8a3ba886d46 /css | |
parent | bdace3159fa5d694b9188e7e44a3dbd937f403de (diff) |
General styling and accessibility fixes
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'css')
-rw-r--r-- | css/icons.scss | 7 | ||||
-rw-r--r-- | css/style.scss | 38 |
2 files changed, 42 insertions, 3 deletions
diff --git a/css/icons.scss b/css/icons.scss index 820bbc5d..1fb99984 100644 --- a/css/icons.scss +++ b/css/icons.scss @@ -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); + +} diff --git a/css/style.scss b/css/style.scss index d81e2c45..c8224f23 100644 --- a/css/style.scss +++ b/css/style.scss @@ -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; |