diff options
| author | Sam Bigelow <sbigelow@gitlab.com> | 2019-06-06 21:51:08 -0400 |
|---|---|---|
| committer | Sam Bigelow <sbigelow@gitlab.com> | 2019-06-12 14:01:08 -0400 |
| commit | e83e3c7403ca00237f2d9ab4aa7401959aa3640b (patch) | |
| tree | 97b302c4c255a8189888ed8c75ed89b037e1ecf4 | |
| parent | 9bf141cf718ab9ca770c3bd6b7e2c6719cbe9da7 (diff) | |
| download | gitlab-ce-gitlab-ui-259-style-checkboxes.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.scss | 16 |
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; } } |