Merge pull request #13042 from frappe/mergify/bp/version-13-hotfix/pr…

…-13019
frappe · Apr 29, 2021 · 2ca9db0 · 2ca9db0
2 parents 0c4053f + 243d0c0
commit 2ca9db0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 52 deletions.
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
@@ -16,69 +16,62 @@
 	}
 }
 
+$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: 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%);
+	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: #2490EF;
+		background-image: $check-icon, linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
+		background-size: 57%, 100%;
 		box-shadow: none;
 		border: none;
 	}
 
+	&:focus {
+		outline: none; // Prevent browser behavior
+		box-shadow: var(--checkbox-focus-shadow);
+	}
 
-	&.disabled-deselected:before, &:disabled:not([checked])::before {
-		background: var(--disabled-control-bg);
-		border: 0.5px solid var(--gray-300);
-		box-sizing: border-box;
+	&.disabled-deselected, &:disabled {
+		background-color: var(--disabled-control-bg);
 		box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
-		border-radius: 4px;
+		border: 0.5px solid var(--gray-300);
 		pointer-events: none;
 	}
 
-	&.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: var(--gray-500);
-		box-sizing: border-box;
+	&.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-radius: 4px;
-		line-height: 10px;
+		border: none;
 		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/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
@@ -31,9 +31,6 @@ $input-height: 28px !default;
 	--modal-bg: white;
 	--toast-bg: var(--modal-bg);
 	--popover-bg: white;
-	--checkbox-right-margin: var(--margin-xs);
-	--base-checkbox-size: 14px;
-	--custom-checkbox-size: 14px;
 
 	--appreciation-color: var(--dark-green-600);
 	--appreciation-bg: var(--dark-green-100);
@@ -52,6 +49,11 @@ $input-height: 28px !default;
 	--input-height: #{$input-height};
 	--input-disabled-bg: var(--gray-200);
 
+	// checkbox
+	--checkbox-right-margin: var(--margin-xs);
+	--checkbox-size: 14px;
+	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
+
 	// timeline
 	--timeline-item-icon-size: 34px;
 	--timeline-item-left-margin: var(--margin-xl);

diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
@@ -78,6 +78,9 @@
 	// input
 	--input-disabled-bg: none;
 
+	// checkbox
+	--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
+
 	color-scheme: dark;
 
 	.frappe-card {

diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
@@ -197,8 +197,7 @@ $level-margin-right: 8px;
 
 input.list-check-all, input.list-row-checkbox {
 	margin-top: 0px;
-	margin-left: calc(var(--custom-checkbox-size) / 2);
-	--checkbox-right-margin: #{$level-margin-right};
+	--checkbox-right-margin: calc(var(--checkbox-size) / 2 + #{$level-margin-right});
 }
 
 .filterable {