From 0e63254aff85696c1f7b03c0010cfaa81c397883 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Wed, 19 Aug 2020 16:43:11 +0200
Subject: [PATCH] improved checkbox display
---
less/qfq-bs.css.less | 34 +++++++++++++++++++---------------
1 file changed, 19 insertions(+), 15 deletions(-)
diff --git a/less/qfq-bs.css.less b/less/qfq-bs.css.less
index 7d4feee42..e5eebd9bf 100644
--- a/less/qfq-bs.css.less
+++ b/less/qfq-bs.css.less
@@ -57,6 +57,8 @@ i.@{spinner_class} {
cursor: pointer;
height: 0;
width: 0;
+ -moz-appearance: none;
+ /*Radios don't scale correctly on Firefox with zoom*/
}
/* Customize the label (the container) */
@@ -82,10 +84,10 @@ i.@{spinner_class} {
/* Create a custom radio button */
.radio-inline .checkmark, .radio .checkmark {
position: absolute;
- top: 0;
- left: 0;
- height: 18px;
- width: 18px;
+ top: -1px;
+ left: -2px;
+ height: 22px;
+ width: 22px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #ccc;
@@ -114,8 +116,8 @@ i.@{spinner_class} {
/* Style the indicator (dot/circle) */
.radio-inline .checkmark:after, .radio .checkmark:after {
- top: 3px;
- left: 3px;
+ top: 5px;
+ left: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
@@ -124,12 +126,14 @@ i.@{spinner_class} {
/* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */
-.checkbox-inline>input[type=checkbox] {
+.checkbox-inline>input[type=checkbox], .checkbox>input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
+ -moz-appearance: none;
+ /*Checkboxes don't scale correctly on Firefox with zoom*/
}
/* Customize the label (the container) */
@@ -167,12 +171,12 @@ i.@{spinner_class} {
/* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark {
position: absolute;
- top: 0;
- left: 0;
- height: 18px;
- width: 18px;
+ top: -1px;
+ left: -2px;
+ height: 22px;
+ width: 22px;
background-color: #fff;
- border-radius: 4px;
+ border-radius: 5px;
border: 2px solid #ccc;
}
@@ -208,10 +212,10 @@ i.@{spinner_class} {
/* Style the indicator (dot/circle) */
.checkbox-inline .checkmark:after, .checkbox .checkmark:after {
- top: 1px;
- left: 4px;
+ top: 2px;
+ left: 6px;
width: 6px;
- height: 10px;
+ height: 12px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
--
GitLab