diff options
author | Jan C. Borchardt <hey@jancborchardt.net> | 2020-09-25 18:35:47 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2020-09-29 14:07:29 +0300 |
commit | 532d8b68d3c66590b8a0d9bbacbfe3670b2e2bd8 (patch) | |
tree | 1ceba824b2155e7c8497cc0621bf0c7b57e00f10 | |
parent | 76c8155966953318598873874b393b86934f393e (diff) |
Fix alignment and design of checkboxes
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
-rw-r--r-- | css/prosemirror.scss | 13 | ||||
-rw-r--r-- | img/checkbox-mark.svg | 1 |
2 files changed, 9 insertions, 5 deletions
diff --git a/css/prosemirror.scss b/css/prosemirror.scss index 668e0c902..e1561b0a5 100644 --- a/css/prosemirror.scss +++ b/css/prosemirror.scss @@ -29,6 +29,8 @@ div.ProseMirror { .checkbox-item { display: flex; align-items: start; + // Left-align with list item text + margin-left: -24px; input[type=checkbox] { display: none; @@ -40,23 +42,24 @@ div.ProseMirror { width: 14px; vertical-align: middle; border-radius: 50%; - margin: 0 6px 3px 3px; - margin-left: 3px; - border: 1px solid #878787; + margin: 2px 6px 3px 3px; + border: 1px solid var(--color-text-maxcontrast); content: ""; position: relative; width: 44px; height: 44px; display: block; - border-radius: 1px; + border-radius: var(--border-radius); height: 14px; width: 14px; box-shadow: none !important; background-position: center; + cursor: pointer; } &.checked:before { - background-image: url('/core/css/../img/actions/checkbox-mark.svg'); + background-image: url('../../img/checkbox-mark.svg'); background-color: var(--color-primary-element); + border-color: var(--color-primary-element); } label { display: block; diff --git a/img/checkbox-mark.svg b/img/checkbox-mark.svg new file mode 100644 index 000000000..dbfa0afc2 --- /dev/null +++ b/img/checkbox-mark.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z" fill="#fff"/></svg> |