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

refactor: Move checkbox style to a separate file to re-use it in print

Browse source
This commit is contained in:
Suraj Shetty 2022-04-18 11:54:44 +05:30
parent 746e017aef
commit 155dbb5652
5 changed files with 96 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,6 @@
@import "../element/checkbox";
@import "../element/radio";
html, body {
height: 100%;
}
@ -20,100 +23,6 @@ html, body {
}
}
$check-icon: url("data:image/svg+xml, <svg 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>");
input[type="radio"] {
position: relative;
width: var(--checkbox-size) !important;
height: var(--checkbox-size);
margin-right: 8px !important;
font-size: calc(var(--checkbox-size) - 1px);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
// Reset browser behavior
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
&:focus {
outline: none;
}
&:before {
width: var(--checkbox-size);
height: var(--checkbox-size);
position: absolute;
content: ' ';
border: 1px solid var(--gray-400);
border-radius: 16px;
}
&:checked::before {
background-color: var(--primary);
border-radius: 16px;
box-shadow: inset 0 0 0 2px white;
}
}
input[type="checkbox"] {
position: relative;
width: var(--checkbox-size) !important;
height: var(--checkbox-size);
margin-right: var(--checkbox-right-margin) !important;
background-repeat: no-repeat;
background-position: center;
border: 1px solid var(--gray-400);
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
// Reset browser behavior
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
.grid-static-col & {
margin-right: 0 !important;
}
&:checked {
background-color: var(--primary);
background-image: $check-icon, var(--checkbox-gradient);
background-size: 57%, 100%;
box-shadow: none;
border: none;
}
&:focus {
outline: none; // Prevent browser behavior
box-shadow: var(--checkbox-focus-shadow);
}
&.disabled-deselected, &:disabled {
background-color: var(--disabled-control-bg);
box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
border: 0.5px solid var(--gray-300);
pointer-events: none;
}
&.disabled-selected, &:disabled:checked {
background-color: var(--gray-500);
background-image: $check-icon;
background-size: 57%;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
border: none;
pointer-events: none;
}
}
.frappe-card {
@include card();
}

2
frappe/public/scss/desk/global.scss
View file

@ -2,8 +2,6 @@ html {
background-color: var(--bg-color);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

55
frappe/public/scss/element/checkbox.scss Normal file
View file

@ -0,0 +1,55 @@
$check-icon: url("data:image/svg+xml, <svg 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>");
input[type="checkbox"] {
position: relative;
width: var(--checkbox-size) !important;
height: var(--checkbox-size);
margin-right: var(--checkbox-right-margin) !important;
background-repeat: no-repeat;
background-position: center;
border: 1px solid var(--gray-400);
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
// Reset browser behavior
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
.grid-static-col & {
margin-right: 0 !important;
}
&:checked {
background-color: var(--primary);
background-image: $check-icon, var(--checkbox-gradient);
background-size: 57%, 100%;
box-shadow: none;
border: none;
}
&:focus {
outline: none; // Prevent browser behavior
box-shadow: var(--checkbox-focus-shadow);
}
&.disabled-deselected, &:disabled {
background-color: var(--disabled-control-bg);
box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
border: 0.5px solid var(--gray-300);
pointer-events: none;
}
&.disabled-selected, &:disabled:checked {
background-color: var(--gray-500);
background-image: $check-icon;
background-size: 57%;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
border: none;
pointer-events: none;
}
}

37
frappe/public/scss/element/radio.scss Normal file
View file

@ -0,0 +1,37 @@
input[type="radio"] {
position: relative;
width: var(--checkbox-size) !important;
height: var(--checkbox-size);
margin-right: 8px !important;
font-size: calc(var(--checkbox-size) - 1px);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
// Reset browser behavior
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
&:focus {
outline: none;
}
&:before {
width: var(--checkbox-size);
height: var(--checkbox-size);
position: absolute;
content: ' ';
border: 1px solid var(--gray-400);
border-radius: 16px;
}
&:checked::before {
background-color: var(--primary);
border-radius: 16px;
box-shadow: inset 0 0 0 2px white;
}
}

1
frappe/public/scss/print.bundle.scss
View file

@ -1,6 +1,7 @@
@import "frappe/public/css/bootstrap.css";
@import "./common/quill";
@import "./desk/css_variables";
@import "./element/checkbox";
// !! PDF Barcode hack !!
// Workaround for rendering barcodes prior to https://github.com/frappe/frappe/pull/15307