fix: Checkbox margin
This commit is contained in:
parent
5fbee181bc
commit
18b72c52ff
3 changed files with 16 additions and 10 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue