From ce752dbafd72017f2d8a949d95e4a14df0af3ef7 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Date: Fri, 19 Feb 2021 09:24:56 +0530
Subject: [PATCH] fix: Checkbox style for disabled but checked checkbox
 (#12435)

---
 frappe/public/scss/common.scss        | 86 ---------------------------
 frappe/public/scss/common/global.scss |  9 +--
 2 files changed, 5 insertions(+), 90 deletions(-)
 delete mode 100644 frappe/public/scss/common.scss

diff --git a/frappe/public/scss/common.scss b/frappe/public/scss/common.scss
deleted file mode 100644
index eca147c2de..0000000000
--- a/frappe/public/scss/common.scss
+++ /dev/null
@@ -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();
-}
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 94e44cc7d4..12dd5dfe7b 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -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;
 	}
 }