imp: Improve the look of multilines checkboxes

The checkbox is now aligned with the first line of the label, and not centered.
flusio · Mar 10, 2024 · 6006686 · 6006686
1 parent 49c324f
commit 6006686
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/assets/stylesheets/components/forms.css b/src/assets/stylesheets/components/forms.css
@@ -77,14 +77,15 @@ input[type="radio"] + label {
 
     display: inline-flex;
 
-    align-items: center;
+    align-items: baseline;
 }
 
 input[type="checkbox"] + label::before,
 input[type="radio"] + label::before {
     content: ' ';
 
     position: relative;
+    top: 0.5rem;
 
     width: 2.5rem;
     height: 2.5rem;
@@ -128,11 +129,11 @@ input[type="radio"]:checked + label::after {
     content: '';
 
     position: absolute;
+    top: 1.2rem;
     left: 1.5rem;
 
     width: 1.5rem;
     height: 0.75rem;
-    margin-top: -0.3rem;
 
     border-bottom: var(--width-border) solid var(--color-text);
     border-left: var(--width-border) solid var(--color-text);
@@ -141,8 +142,9 @@ input[type="radio"]:checked + label::after {
 }
 
 input[type="radio"]:checked + label::after {
+    top: 1rem;
+
     height: 1.5rem;
-    margin-top: 0;
 
     background-color: var(--color-text);
     border-top: var(--width-border) solid var(--color-text);