From 7f91112576d5cbdceb55906e90c6a9cbc1e21318 Mon Sep 17 00:00:00 2001
From: Sam Bigelow <sbigelow@gitlab.com>
Date: Thu, 31 Jan 2019 09:38:23 -0500
Subject: Add CSS to be used by vue-bootstrap form checkbox

---
 app/assets/stylesheets/framework/forms.scss        | 34 ++++++++++++++++++++++
 ...ab-ui-132-add-bootstrap-vue-s-form-checkbox.yml |  5 ++++
 2 files changed, 39 insertions(+)
 create mode 100644 changelogs/unreleased/gitlab-ui-132-add-bootstrap-vue-s-form-checkbox.yml

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index cbf9ee24ec5..67ae3e7c90b 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -274,3 +274,37 @@ label {
   max-width: $input-lg-width;
   width: 100%;
 }
+
+/*
+* Bootstrap-vue form-checkbox
+* Override styles to handle vue-bootstrap's use of REMs
+*/
+
+.custom-control.custom-checkbox.custom-control-inline {
+  min-height: 1.5 * $gl-font-size;
+  padding-left: 1.5 * $gl-font-size;
+
+  .custom-control {
+    max-height: 1.5 * $gl-font-size;
+    padding-left: 1.5 * $gl-font-size;
+    min-height: 1.5 * $gl-font-size;
+  }
+
+  .custom-control-inline {
+    margin-right: $gl-font-size;
+  }
+
+  .custom-control-label::before {
+    top: $gl-padding-4;
+    left: -1.5 * $gl-font-size;
+    width: $gl-font-size;
+    height: $gl-font-size;
+  }
+
+  .custom-control-label::after {
+    top: $gl-padding-4;
+    left: -1.5 * $gl-font-size;
+    width: $gl-font-size;
+    height: $gl-font-size;
+  }
+}
diff --git a/changelogs/unreleased/gitlab-ui-132-add-bootstrap-vue-s-form-checkbox.yml b/changelogs/unreleased/gitlab-ui-132-add-bootstrap-vue-s-form-checkbox.yml
new file mode 100644
index 00000000000..55a501eb474
--- /dev/null
+++ b/changelogs/unreleased/gitlab-ui-132-add-bootstrap-vue-s-form-checkbox.yml
@@ -0,0 +1,5 @@
+---
+title: Add CSS for gitlab-ui's Form Checkbox
+merge_request: !24826
+author:
+type: other
-- 
cgit v1.2.1