refactor: Move email.less to email.scss
- Updated email container layout & btn style
This commit is contained in:
Suraj Shetty
parent
1104e3aac2
commit
53923264b3
3 changed files with 234 additions and 221 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
233
frappe/public/scss/email.scss
Normal file
233
frappe/public/scss/email.scss
Normal file
|
|
@ -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 */
|
||||
Loading…
Add table
Reference in a new issue