Skip to content
Snippets Groups Projects
Commit 0e63254a authored by bbaer's avatar bbaer
Browse files

improved checkbox display

parent 68292e01
No related branches found
No related tags found
3 merge requests!286Master,!281Master,!276#s11039 checkbox css
Pipeline #3701 passed
Stage: before
Stage: build
Stage: selenium
Hide whitespace changes
Inline Side-by-side
Showing
with 19 additions and 15 deletions
less/qfq-bs.css.less
+ 19
− 15
View file @ 0e63254a
...@@ -57,6 +57,8 @@ i.@{spinner_class} { ...@@ -57,6 +57,8 @@ i.@{spinner_class} {
cursor: pointer; cursor: pointer;
height: 0; height: 0;
width: 0; width: 0;
-moz-appearance: none;
/*Radios don't scale correctly on Firefox with zoom*/
} }
/* Customize the label (the container) */ /* Customize the label (the container) */
...@@ -82,10 +84,10 @@ i.@{spinner_class} { ...@@ -82,10 +84,10 @@ i.@{spinner_class} {
/* Create a custom radio button */ /* Create a custom radio button */
.radio-inline .checkmark, .radio .checkmark { .radio-inline .checkmark, .radio .checkmark {
position: absolute; position: absolute;
top: 0; top: -1px;
left: 0; left: -2px;
height: 18px; height: 22px;
width: 18px; width: 22px;
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 50%;
border: 2px solid #ccc; border: 2px solid #ccc;
...@@ -114,8 +116,8 @@ i.@{spinner_class} { ...@@ -114,8 +116,8 @@ i.@{spinner_class} {
/* Style the indicator (dot/circle) */ /* Style the indicator (dot/circle) */
.radio-inline .checkmark:after, .radio .checkmark:after { .radio-inline .checkmark:after, .radio .checkmark:after {
top: 3px; top: 5px;
left: 3px; left: 5px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
...@@ -124,12 +126,14 @@ i.@{spinner_class} { ...@@ -124,12 +126,14 @@ i.@{spinner_class} {
/* CUSTOM CHECKBOXES */ /* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */ /* Hide the browser's default radio */
.checkbox-inline>input[type=checkbox] { .checkbox-inline>input[type=checkbox], .checkbox>input[type=checkbox] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
height: 0; height: 0;
width: 0; width: 0;
-moz-appearance: none;
/*Checkboxes don't scale correctly on Firefox with zoom*/
} }
/* Customize the label (the container) */ /* Customize the label (the container) */
...@@ -167,12 +171,12 @@ i.@{spinner_class} { ...@@ -167,12 +171,12 @@ i.@{spinner_class} {
/* Create a custom radio button */ /* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark { .checkbox-inline .checkmark, .checkbox .checkmark {
position: absolute; position: absolute;
top: 0; top: -1px;
left: 0; left: -2px;
height: 18px; height: 22px;
width: 18px; width: 22px;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 5px;
border: 2px solid #ccc; border: 2px solid #ccc;
} }
...@@ -208,10 +212,10 @@ i.@{spinner_class} { ...@@ -208,10 +212,10 @@ i.@{spinner_class} {
/* Style the indicator (dot/circle) */ /* Style the indicator (dot/circle) */
.checkbox-inline .checkmark:after, .checkbox .checkmark:after { .checkbox-inline .checkmark:after, .checkbox .checkmark:after {
top: 1px; top: 2px;
left: 4px; left: 6px;
width: 6px; width: 6px;
height: 10px; height: 12px;
border: solid white; border: solid white;
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment