diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 8a849ab51a..e51a7b6728 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -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, ");
-
-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();
}
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 7c2ae3c8b1..6a85dea6dd 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -2,8 +2,6 @@ html {
background-color: var(--bg-color);
}
-
-
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/frappe/public/scss/element/checkbox.scss b/frappe/public/scss/element/checkbox.scss
new file mode 100644
index 0000000000..6e0987c00a
--- /dev/null
+++ b/frappe/public/scss/element/checkbox.scss
@@ -0,0 +1,55 @@
+$check-icon: url("data:image/svg+xml, ");
+
+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;
+ }
+}
\ No newline at end of file
diff --git a/frappe/public/scss/element/radio.scss b/frappe/public/scss/element/radio.scss
new file mode 100644
index 0000000000..b471832a9b
--- /dev/null
+++ b/frappe/public/scss/element/radio.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/frappe/public/scss/print.bundle.scss b/frappe/public/scss/print.bundle.scss
index 7dbaf5b496..61f56beaf8 100644
--- a/frappe/public/scss/print.bundle.scss
+++ b/frappe/public/scss/print.bundle.scss
@@ -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