fix: Checkbox margin

This commit is contained in:
Suraj Shetty 2020-08-31 14:01:23 +05:30
parent 5fbee181bc
commit 18b72c52ff
3 changed files with 16 additions and 10 deletions

View file

@ -299,17 +299,16 @@ select.input-xs {
}
/* checkbox */
$checkbox-size: 14px;
input[type="checkbox"] {
position: relative;
width: 0 !important;
height: $checkbox-size;
margin-right: calc(#{$checkbox-size} + var(--checkbox-right-margin)) !important;
font-size: calc(#{$checkbox-size} - 1px);
height: var(--custom-checkbox-size);
margin-right: calc(var(--custom-checkbox-size) + var(--checkbox-right-margin)) !important;
font-size: calc(var(--custom-checkbox-size) - 1px);
&:before {
width: $checkbox-size;
height: $checkbox-size;
width: var(--custom-checkbox-size);
height: var(--custom-checkbox-size);
position: absolute;
top: 0;
display: inline-block;
@ -351,8 +350,13 @@ input[type="checkbox"] {
// Firefox doesn't support pseudo elements on checkbox
@supports (-moz-appearance: none) or (-ms-ime-align:auto) {
:root {
--custom-checkbox-size: 0px;
}
input[type="checkbox"] {
width: $checkbox-size !important
width: var(--base-checkbox-size) !important;
height: var(--base-checkbox-size);
margin-right: var(--checkbox-right-margin) !important;
}
}

View file

@ -190,7 +190,7 @@ $level-margin-right: 8px;
input.list-check-all, input.list-row-checkbox {
margin-top: 0px;
margin-left: calc(#{$checkbox-size}/2);
margin-left: calc(var(--custom-checkbox-size)/2);
--checkbox-right-margin: #{$level-margin-right};
}

View file

@ -120,14 +120,14 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--padding-xs: 5px;
--padding-sm: 10px;
--padding-sm: 8px;
--padding-md: 15px;
--padding-lg: 20px;
--padding-xl: 30px;
--padding-2xl: 40px;
--margin-xs: 5px;
--margin-sm: 10px;
--margin-sm: 8px;
--margin-md: 15px;
--margin-lg: 20px;
--margin-xl: 30px;
@ -190,6 +190,8 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--border-radius-lg: 12px;
--checkbox-right-margin: var(--margin-xs);
--base-checkbox-size: 14px;
--custom-checkbox-size: 14px;
--primary-color: #{$primary};