From e83e3c7403ca00237f2d9ab4aa7401959aa3640b Mon Sep 17 00:00:00 2001 From: Sam Bigelow Date: Thu, 6 Jun 2019 21:51:08 -0400 Subject: Apply improved styling based on UX feedback - Only apply extra margins and borders between checkbox components - Change cursor to `not-allowed` when checkbox is disabled - Adjust handling of inline checkbox styling vs block --- app/assets/stylesheets/framework/forms.scss | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 2a601afff53..821e6691fe4 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -248,14 +248,24 @@ label { .gl-form-checkbox { align-items: baseline; + margin-right: 1rem; + margin-bottom: 0.25rem; + + .form-check-input { + margin-right: 0; + } + + .form-check-label { + padding-left: $gl-padding-8; + } &.form-check-inline .form-check-input { align-self: flex-start; - margin-right: $gl-padding-8; height: 1.5 * $gl-font-size; } - .help-text { - margin-bottom: 0; + .form-check-input:disabled, + .form-check-input:disabled ~ .form-check-label { + cursor: not-allowed; } } -- cgit v1.2.1