From 53923264b3759114829e8e6299258b7104465345 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Wed, 13 Jan 2021 10:31:14 +0530 Subject: [PATCH] refactor: Move email.less to email.scss - Updated email container layout & btn style --- frappe/public/build.json | 2 +- frappe/public/less/email.less | 220 -------------------------------- frappe/public/scss/email.scss | 233 ++++++++++++++++++++++++++++++++++ 3 files changed, 234 insertions(+), 221 deletions(-) delete mode 100644 frappe/public/less/email.less create mode 100644 frappe/public/scss/email.scss diff --git a/frappe/public/build.json b/frappe/public/build.json index 202fc1afa8..54ed37b307 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -300,7 +300,7 @@ "public/less/controls.less", "node_modules/frappe-datatable/dist/frappe-datatable.css" ], - "frappe/css/email.css": "public/less/email.less", + "frappe/css/email.css": "public/scss/email.scss", "js/barcode_scanner.min.js": "public/js/frappe/barcode_scanner/quagga.js", "js/user_profile_controller.min.js": "desk/page/user_profile/user_profile_controller.js", "css/login.css": "public/scss/login.scss" diff --git a/frappe/public/less/email.less b/frappe/public/less/email.less deleted file mode 100644 index ef95caed8c..0000000000 --- a/frappe/public/less/email.less +++ /dev/null @@ -1,220 +0,0 @@ -/* csslint ignore:start */ -@import "variables.less"; - -body { - line-height: 1.5; - color: @text-color; -} - -p { - margin: 1em 0 !important; -} - -.ql-editor { - white-space: normal; - p { - margin: 0 !important; - } -} - -hr { - border-top: 1px solid @border-color; -} - -.body-table { - font-family: @font-stack; - - td { - font-family: @font-stack; - } -} - -.email-header, .email-body, .email-footer { - width: 100% !important; - min-width: 100% !important; -} - -.email-body { - font-size: @text-regular; -} - -.email-footer { - border-top: 1px solid @border-color; - font-size: @text-medium; -} - -.email-header { - border: 1px solid @border-color; - border-radius: 4px 4px 0 0; - - .brand-image { - width: 24px; - height: 24px; - display: block; - } -} - -.email-header-title { - font-weight: bold; -} - -.body-table.has-header { - .email-body { - border: 1px solid @border-color; - border-radius: 0 0 4px 4px; - border-top: none; - } - - .email-footer { - border-top: none; - } -} - -.email-footer-container { - margin-top: 30px; - - & > div:not(:last-child) { - margin-bottom: 5px; - } -} - -.email-unsubscribe a { - color: @text-muted; - text-decoration: underline; -} - -.btn { - text-decoration: none; - padding: 7px 10px; - font-size: 12px; - border: 1px solid; - border-radius: 3px; - - &.btn-default { - color: #fff; - background-color: #f0f4f7; - border-color: transparent; - } - - &.btn-primary { - color: #fff; - background-color: @brand-primary; - border-color: #444bff; - } -} - -.table { - width: 100%; - border-collapse: collapse; - - td, th { - padding: 8px; - line-height: 1.42857143; - vertical-align: top; - border-top: 1px solid @border-color; - text-align: left; - } - - th { - font-weight: bold; - } - - & > thead > tr > th { - vertical-align: middle; - border-bottom: 2px solid @border-color; - } - - & > thead:first-child > tr:first-child > th { - border-top: none; - } - - &.table-bordered { - border: 1px solid @border-color; - - td, th { - border: 1px solid @border-color; - } - } -} - -.more-info { - font-size: 80% !important; - color: @text-muted !important; - border-top: 1px solid @light-border-color; - padding-top: 10px; -} - -.text-right { - text-align: right !important; -} - -.text-center { - text-align: center !important; -} - -.text-muted { - color: @text-muted !important; -} - -.text-extra-muted { - color: @text-extra-muted !important; -} - -.text-regular { - font-size: @text-regular; -} - -.text-medium { - font-size: @text-medium; -} - -.text-small { - font-size: @text-small; -} - -.text-bold { - font-weight: bold; -} - -.indicator { - width: 8px; - height: 8px; - border-radius: 8px; - background-color: @indicator-gray; - display: inline-block; - margin-right: 5px; - - &.indicator-blue { - background-color: @indicator-blue; - } - &.indicator-green { - background-color: @indicator-green; - } - &.indicator-orange { - background-color: @indicator-orange; - } - &.indicator-red { - background-color: @indicator-red; - } - &.indicator-yellow { - background-color: @indicator-yellow; - } -} - -.screenshot { - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); - border: 1px solid @border-color; - margin: 8px 0; - max-width: 100%; -} - -.list-unstyled { - list-style-type: none; - padding: 0; -} - -/* auto email report */ -.report-title { - margin-bottom: 20px; -} -/* csslint ignore:end */ \ No newline at end of file diff --git a/frappe/public/scss/email.scss b/frappe/public/scss/email.scss new file mode 100644 index 0000000000..5d22057398 --- /dev/null +++ b/frappe/public/scss/email.scss @@ -0,0 +1,233 @@ +/* csslint ignore:start */ +@import "./desk/variables.scss"; + +$text-color: $gray-900; +$border-color: $gray-100; +$dark-border-color: $gray-200; +$font-stack: "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +$text-muted: $gray-600; +$text-extra-muted: $gray-400; +$border-radius: 6px; +$border-radius-sm: 4px; +$border-radius-lg: 8px; + +body { + line-height: 1.5; + color: $text-color; +} + +p { + margin: 1em 0 !important; +} + +.ql-editor { + white-space: normal; + p { + margin: 0 !important; + } +} + +hr { + border-top: 1px solid $border-color; +} + +.body-table { + font-family: $font-stack; + background-color: $gray-100; + border-collapse: collapse; + table-layout: fixed; + margin: 0 auto; + border-spacing: 0; + height: 100% !important; + width: 100% !important; + font-weight: normal; + color: $text-color; + font-family: $font-stack; + font-size: 14px; + line-height: 1.4; + + td { + font-family: $font-stack; + } + + .body-content { + padding-top: 20vh; + padding-bottom: 20px; + } +} + +.email-container { + max-width: 400px; + border-spacing: 0; + padding: 30px; + border-radius: $border-radius-lg; + overflow: hidden; + background-color: white; + .email-body > tr { + border-collapse: collapse; + border-bottom: none; + } +} + +.email-header, .email-body, .email-footer { + width: 100% !important; + min-width: 100% !important; +} + +.email-body { + font-size: 14px; + color: $text-color; +} + +.email-footer { + font-size: 13px; + line-height: 20px; +} + +.email-header { + + .brand-image { + width: 24px; + height: 24px; + display: block; + } +} + +.email-header-title { + margin-top: 20px !important; + font-size: 20px; + font-weight: 600; +} + +.body-table.has-header { + .email-body { + border-radius: 0 0 4px 4px; + border-top: none; + } + + .email-footer { + border-top: none; + } +} + +.email-footer-container { + margin-top: 40px; + + & > div:not(:last-child) { + margin-bottom: 5px; + } +} + +.email-unsubscribe a { + color: $text-muted; + text-decoration: underline; +} + +.btn { + text-decoration: none; + padding: 4px 20px; + font-size: 13px; + border: 1px solid; + border-radius: $border-radius; + color: $white; + background-color: $gray-500; + border-color: transparent; + display: inline-block; + line-height: 20px; + + &.btn-primary { + color: #fff; + background-color: $primary; + } +} + +.table { + width: 100%; + border-collapse: collapse; + + td, th { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid $border-color; + text-align: left; + } + + th { + font-weight: bold; + } + + & > thead > tr > th { + vertical-align: middle; + border-bottom: 2px solid $border-color; + } + + & > thead:first-child > tr:first-child > th { + border-top: none; + } + + &.table-bordered { + border: 1px solid $border-color; + + td, th { + border: 1px solid $border-color; + } + } +} + +.more-info { + font-size: 80% !important; + color: $text-muted !important; + border-top: 1px solid $border-color; + padding-top: 10px; +} + +.text-right { + text-align: right !important; +} + +.text-center { + text-align: center !important; +} + +.text-muted { + color: $text-muted !important; +} + +.text-extra-muted { + color: $text-muted !important; +} + +.text-regular { + font-size: 14px; +} + +.text-medium { + font-size: 13px; +} + +.text-small { + font-size: 12px; +} + +.text-bold { + font-weight: bold; +} + +.screenshot { + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); + border: 1px solid $border-color; + margin: 8px 0; + max-width: 100%; +} + +.list-unstyled { + list-style-type: none; + padding: 0; +} + +/* auto email report */ +.report-title { + margin-bottom: 20px; +} +/* csslint ignore:end */