From d79f97f75209b690064a97596fc82a22dc0db32e Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Tue, 5 Jan 2021 22:18:35 -0800 Subject: [PATCH] ui: css: New style for select all checkbox - Make the box look different from the rest of the options so that this it does not look like an option without label. - Give it the appearance of a button so that it is becomes an operation rather than option. Signed-off-by: Sunil Mohan Adapa Reviewed-by: James Valleroy --- static/themes/default/css/main.css | 11 +++++++++++ static/themes/default/js/main.js | 1 + 2 files changed, 12 insertions(+) diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index ea84ce8d0..b8e3aa3ec 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -699,6 +699,17 @@ input[type='submit'].running-status-button { padding-left: 2rem; } +/* + * Select all checkbox for multiple checkboxes field. + */ +.select-all-label { + border: 1px solid var(--neutral-dark-color); + background-color: var(--neutral-light-color); + border-radius: 0.25rem; + padding: 0.5rem 1rem 0.25rem; + margin-left: -1rem; +} + /* * Button toolbar */ diff --git a/static/themes/default/js/main.js b/static/themes/default/js/main.js index b9f6c5bf9..65c723f56 100644 --- a/static/themes/default/js/main.js +++ b/static/themes/default/js/main.js @@ -132,6 +132,7 @@ document.addEventListener('DOMContentLoaded', function(event) { let label = document.createElement('label'); label.for = "select_all"; + label.setAttribute('class', 'select-all-label'); let checkbox = document.createElement('input'); checkbox.type = "checkbox";