From bed628a4cd245bc337401e91ea6bd7f885206609 Mon Sep 17 00:00:00 2001 From: Sagar Vora Date: Wed, 28 Apr 2021 15:11:02 +0530 Subject: [PATCH 1/3] fix(UI): consistent checkboxes on all browsers (cherry picked from commit 47630b8ea094aed4da0885076006420e63c6e686) --- frappe/public/scss/common/global.scss | 78 +++++++++------------- frappe/public/scss/desk/css_variables.scss | 7 +- frappe/public/scss/desk/list.scss | 3 +- 3 files changed, 38 insertions(+), 50 deletions(-) diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss index 20778176d4..e6f14f6b17 100644 --- a/frappe/public/scss/common/global.scss +++ b/frappe/public/scss/common/global.scss @@ -16,69 +16,57 @@ } } +$check-icon: url("data:image/svg+xml, "); + 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); + 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; - &: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; + // 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:before { - content: url("data: image/svg+xml;utf8, "); - background: linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%); + &: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; } - - &.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, "); - 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 index 5aca23a0b0..ee9ccd7ba5 100644 --- 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,10 @@ $input-height: 28px !default; --input-height: #{$input-height}; --input-disabled-bg: var(--gray-200); + // checkbox + --checkbox-right-margin: var(--margin-xs); + --checkbox-size: 14px; + // timeline --timeline-item-icon-size: 34px; --timeline-item-left-margin: var(--margin-xl); diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss index 0230138e8f..72fdf2c0f2 100644 --- 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 { From b61e183029886625ceb9cb450f1e8a2ac7c4cde8 Mon Sep 17 00:00:00 2001 From: Sagar Vora Date: Wed, 28 Apr 2021 16:48:50 +0530 Subject: [PATCH 2/3] fix: add box-shadow on :focus for tab key navigation (cherry picked from commit 0742a754b893383096773e1e31345da62387f70e) --- frappe/public/scss/common/global.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss index e6f14f6b17..6696c2eb4b 100644 --- a/frappe/public/scss/common/global.scss +++ b/frappe/public/scss/common/global.scss @@ -50,6 +50,15 @@ input[type="checkbox"] { border: none; } + &:focus { + outline: none; // Prevent browser behavior + box-shadow: 0 0 0 2px var(--gray-300); + + [data-theme="dark"] & { + box-shadow: 0 0 0 2px var(--gray-600); + } + } + &.disabled-deselected, &:disabled { background-color: var(--disabled-control-bg); box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1); From 243d0c040d0ba856370ced265a75d32c72ee43c1 Mon Sep 17 00:00:00 2001 From: Sagar Vora Date: Thu, 29 Apr 2021 15:17:17 +0530 Subject: [PATCH 3/3] fix: use css variable for themeability (cherry picked from commit 2fefa244628d62f4f35024821edcc94f0284a934) --- frappe/public/scss/common/global.scss | 8 ++------ frappe/public/scss/desk/css_variables.scss | 1 + frappe/public/scss/desk/dark.scss | 3 +++ 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss index 6696c2eb4b..726b3a98a6 100644 --- a/frappe/public/scss/common/global.scss +++ b/frappe/public/scss/common/global.scss @@ -30,7 +30,7 @@ input[type="checkbox"] { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); border-radius: 4px; - // Reset Browser Behavior + // Reset browser behavior -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -52,11 +52,7 @@ input[type="checkbox"] { &:focus { outline: none; // Prevent browser behavior - box-shadow: 0 0 0 2px var(--gray-300); - - [data-theme="dark"] & { - box-shadow: 0 0 0 2px var(--gray-600); - } + box-shadow: var(--checkbox-focus-shadow); } &.disabled-deselected, &:disabled { diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss index ee9ccd7ba5..135bb7a9f5 100644 --- a/frappe/public/scss/desk/css_variables.scss +++ b/frappe/public/scss/desk/css_variables.scss @@ -52,6 +52,7 @@ $input-height: 28px !default; // 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; diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss index 4e83f4db47..76dcf90bc3 100644 --- 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 {