summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSam Bigelow <sbigelow@gitlab.com>2019-06-06 21:51:08 -0400
committerSam Bigelow <sbigelow@gitlab.com>2019-06-12 14:01:08 -0400
commite83e3c7403ca00237f2d9ab4aa7401959aa3640b (patch)
tree97b302c4c255a8189888ed8c75ed89b037e1ecf4
parent9bf141cf718ab9ca770c3bd6b7e2c6719cbe9da7 (diff)
downloadgitlab-ce-e83e3c7403ca00237f2d9ab4aa7401959aa3640b.tar.gz
Apply improved styling based on UX feedbackgitlab-ui-259-style-checkboxes
- 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
-rw-r--r--app/assets/stylesheets/framework/forms.scss16
1 files 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;
}
}