vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: Checkbox style for disabled but checked checkbox (#12435)

Browse source
This commit is contained in:
Suraj Shetty 2021-02-19 09:24:56 +05:30 • committed by GitHub
parent 82c8bbbacd
commit ce752dbafd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
frappe/public/scss/common.scss
View file

@ -1,86 +0,0 @@
/* checkbox */
.checkbox {
label {
display: inline-flex;
align-items: center;
margin-bottom: 0;
}
--checkbox-right-margin: 8px;
.label-area {
line-height: 1;
font-size: var(--text-sm);
}
.input-area, .disp-area {
display: flex;
}
}
input[type="checkbox"] {
position: relative;
width: 0 !important;
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: var(--custom-checkbox-size);
height: var(--custom-checkbox-size);
position: absolute;
top: 0;
display: inline-block;
line-height: 1;
text-align: center;
content: ' ';
border: 1px solid var(--gray-400);
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
&:checked:before {
content: url("data: image/svg+xml;utf8, <svg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background: linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
box-shadow: none;
border: none;
}
&.disabled-deselected:before {
background: $gray-50;
border: 0.5px solid var(--gray-400);
box-sizing: border-box;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 4px;
pointer-events:none
}
&.disabled-selected:before {
content: url("data: image/svg+xml;utf8, <svg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background: $gray-500;
box-sizing: border-box;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 4px;
line-height: 10px;
pointer-events:none
}
}
// Firefox doesn't support
// pseudo elements on checkbox
html.firefox, html.safari {
:root {
--custom-checkbox-size: 0px;
}
input[type="checkbox"] {
width: var(--base-checkbox-size) !important;
height: var(--base-checkbox-size);
margin-right: var(--checkbox-right-margin) !important;
}
}
.frappe-card {
@include card();
}

9
frappe/public/scss/common/global.scss
View file

@ -1,4 +1,3 @@
/* checkbox */
.checkbox {
label {
@ -48,21 +47,23 @@ input[type="checkbox"] {
}
&.disabled-deselected:before, &[disabled]:before {
&.disabled-deselected:before, &:disabled:not([checked])::before {
background: var(--disabled-control-bg);
border: 0.5px solid var(--gray-300);
box-sizing: border-box;
box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
border-radius: 4px;
pointer-events: none;
}
&.disabled-selected:before {
&.disabled-selected:before, &:disabled:checked::before {
content: url("data: image/svg+xml;utf8, <svg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background: $gray-500;
background: var(--gray-500);
box-sizing: border-box;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 4px;
line-height: 10px;
pointer-events: none;
}
}