From 155dbb5652c0b558a25d7b1843777130ccb57d50 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Mon, 18 Apr 2022 11:54:44 +0530 Subject: [PATCH] refactor: Move checkbox style to a separate file to re-use it in print --- frappe/public/scss/common/global.scss | 97 +----------------------- frappe/public/scss/desk/global.scss | 2 - frappe/public/scss/element/checkbox.scss | 55 ++++++++++++++ frappe/public/scss/element/radio.scss | 37 +++++++++ frappe/public/scss/print.bundle.scss | 1 + 5 files changed, 96 insertions(+), 96 deletions(-) create mode 100644 frappe/public/scss/element/checkbox.scss create mode 100644 frappe/public/scss/element/radio.scss 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