From e7e2562e4f82b10301e899ebb0e355df6beac0e6 Mon Sep 17 00:00:00 2001
From: Jared Deckard <jared.deckard@gmail.com>
Date: Mon, 6 Feb 2017 16:25:30 -0600
Subject: Position task list checkbox to match the list indent

---
 app/assets/stylesheets/framework/lists.scss        | 10 ---------
 app/assets/stylesheets/framework/mixins.scss       |  7 ++++++
 app/assets/stylesheets/framework/typography.scss   | 25 +++++++++++++++++++++-
 .../unreleased/22466-task-list-alignment.yml       |  4 ++++
 4 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 changelogs/unreleased/22466-task-list-alignment.yml

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 2bfdb9f9601..55ed4b7b06c 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -96,16 +96,6 @@ ul.unstyled-list > li {
   border-bottom: none;
 }
 
-ul.task-list {
-  li.task-list-item {
-    list-style-type: none;
-  }
-
-  ul:not(.task-list) {
-    padding-left: 1.3em;
-  }
-}
-
 // Generic content list
 ul.content-list {
   @include basic-list;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 1acd06122a3..df78bbdea51 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -76,6 +76,13 @@
   #{$property}: $value;
 }
 
+/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
+@mixin on-webkit-only {
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @content;
+  }
+}
+
 @mixin keyframes($animation-name) {
   @-webkit-keyframes #{$animation-name} {
     @content;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 54958973f15..db5e2c51fe7 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -134,7 +134,7 @@
   ul,
   ol {
     padding: 0;
-    margin: 3px 0 3px 28px !important;
+    margin: 3px 0 !important;
   }
 
   ul:dir(rtl),
@@ -144,6 +144,29 @@
 
   li {
     line-height: 1.6em;
+    margin-left: 25px;
+    padding-left: 3px;
+
+    /* Normalize the bullet position on webkit. */
+    @include on-webkit-only {
+      margin-left: 28px;
+      padding-left: 0;
+    }
+  }
+
+  ul.task-list {
+    li.task-list-item {
+      list-style-type: none;
+      position: relative;
+      padding-left: 28px;
+      margin-left: 0 !important;
+
+      input.task-list-item-checkbox {
+        position: absolute;
+        left: 8px;
+        top: 5px;
+      }
+    }
   }
 
   a[href*="/uploads/"],
diff --git a/changelogs/unreleased/22466-task-list-alignment.yml b/changelogs/unreleased/22466-task-list-alignment.yml
new file mode 100644
index 00000000000..6e6ccb873ec
--- /dev/null
+++ b/changelogs/unreleased/22466-task-list-alignment.yml
@@ -0,0 +1,4 @@
+---
+title: Align task list checkboxes
+merge_request: 6487
+author: Jared Deckard <jared.deckard@gmail.com>
-- 
cgit v1.2.1