summaryrefslogtreecommitdiff
path: root/addons/web/static/src/scss
diff options
context:
space:
mode:
Diffstat (limited to 'addons/web/static/src/scss')
-rw-r--r--addons/web/static/src/scss/base_document_layout.scss162
-rw-r--r--addons/web/static/src/scss/colorpicker.scss4
-rw-r--r--addons/web/static/src/scss/fields.scss9
-rw-r--r--addons/web/static/src/scss/fonts.scss24
-rw-r--r--addons/web/static/src/scss/layout_background.scss26
-rw-r--r--addons/web/static/src/scss/layout_boxed.scss22
-rw-r--r--addons/web/static/src/scss/layout_clean.scss35
-rw-r--r--addons/web/static/src/scss/layout_standard.scss19
-rw-r--r--addons/web/static/src/scss/report.scss5
9 files changed, 272 insertions, 34 deletions
diff --git a/addons/web/static/src/scss/base_document_layout.scss b/addons/web/static/src/scss/base_document_layout.scss
new file mode 100644
index 00000000000..20378848e26
--- /dev/null
+++ b/addons/web/static/src/scss/base_document_layout.scss
@@ -0,0 +1,162 @@
+.o_document_layout .o_group {
+ display: flex;
+ .o_document_layout_company {
+ flex: 5;
+ @include media-breakpoint-up(sm, $o-extra-grid-breakpoints) {
+ max-width: 50%;
+ }
+ img {
+ max-height: 100px;
+ }
+ .o_document_layout_colors {
+ vertical-align: middle;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .o_field_widget {
+ width: 30px;
+ margin: 0 5px 0 0;
+ }
+ .btn {
+ padding: 0;
+ margin-left: 10px;
+ .o_form_label {
+ height: 30px;
+ font-size: 18px;
+ margin: 0;
+ cursor: pointer;
+ }
+ }
+ }
+ select.o_input {
+ height: 25px;
+ }
+
+ }
+ .o_document_layout_preview {
+ flex: 4;
+ border: 1px solid;
+ border-color: gray;
+ margin-right: 12px;
+ padding: 12px;
+ display: flex;
+ min-height: 420px;
+ flex-direction: column;
+ }
+}
+
+.o_document_layout_preview_logo img {
+ padding-left: 5px;
+ max-height: 45px;
+}
+
+.o_document_layout_preview_html {
+ flex: 1;
+ .o_readonly {
+ height: 100%;
+ }
+ .o_preview_layout {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ .header {
+ padding: 0 10px;
+ border-top: 1px solid;
+ h2 {
+ margin: 40px 0;
+ }
+ .o_layout_information {
+ margin-bottom: 20px;
+ }
+ }
+ .article {
+ flex: 1;
+ padding: 0 10px;
+ table th, table td {
+ text-align: right;
+ &:first-child {
+ text-align: left;
+ }
+ }
+ }
+ .footer {
+ border-top: 1px solid;
+ }
+ .o_preview_background_layout {
+ background-image: url(/base/static/img/bg_background_template.jpg);
+ background-size: cover;
+ background-position: bottom center;
+ background-repeat: no-repeat;
+ .table tbody tr:nth-child(odd) {
+ background-color: rgba(220, 205, 216, 0.2);
+ }
+ .row table tbody tr:nth-child(odd) {
+ background-color: transparent !important;
+ }
+ .footer {
+ border-bottom: 1px solid;
+ }
+ }
+ .o_preview_clean_layout {
+ .header {
+ border: none;
+ }
+ .article table {
+ border-bottom: 1px solid;
+ border-top: 1px solid;
+ margin: 0;
+ }
+ .clearfix table {
+ border-top: none;
+ .o_subtotal td {
+ border: none;
+ }
+ }
+ thead th {
+ border-top: 1px solid;
+ text-transform: uppercase;
+ }
+ }
+ .o_preview_standard_layout {
+ .o_subtotal, .o_total {
+ td {
+ border-top: 1px solid;
+ }
+ }
+ }
+ .o_preview_boxed_layout {
+ table {
+ border: 1px solid gray('700');
+ thead th {
+ border: 1px solid gray('700');
+ text-transform: uppercase;
+ }
+ tbody tr td {
+ border-top: none;
+ border-right: 1px solid gray('700');
+ }
+ }
+ .o_subtotal td, .o_total td {
+ border-right: none;
+ border-top: 1px solid gray('700');
+ }
+ .o_total td {
+ strong, span {
+ color: white;
+ }
+ }
+ }
+}
+
+@media (max-width: 620px) {
+ .o_document_layout .o_group {
+ flex-direction: column;
+ }
+}
+
+@media (max-width: 992px) {
+ .clearfix td {
+ display: flex;
+ }
+}
diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index ade14ca9c7c..ab8d2fb4a90 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -53,12 +53,12 @@
}
}
.o_color_picker_inputs {
- display: -webkit-flex;
+ display: flex;
flex-direction: column;
& > .form-row {
flex: 1;
.col {
- display: -webkit-flex;
+ display: flex;
flex-direction: column;
justify-content: space-around;
}
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 120896dceee..d7c332d5369 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -447,6 +447,15 @@
}
}
}
+
+ & > .o_field_color {
+ border: 2px solid rgba(0, 0, 0, 0.25);
+ border-radius: 100px;
+ width: 30px;
+ height: 30px;
+ margin: 0 5px 0 0;
+ display: inline-block;
+ }
}
span.o_field_copy:empty {
diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss
index 0a8793c9a18..2324883532b 100644
--- a/addons/web/static/src/scss/fonts.scss
+++ b/addons/web/static/src/scss/fonts.scss
@@ -65,3 +65,27 @@ $lato-font-path: '../fonts/lato';
@include lato-font-pair('Reg', 400);
@include lato-font-pair('Bol', 700);
@include lato-font-pair('Bla', 900);
+
+// ------------------------------------------------------------------
+// Google fonts
+// ------------------------------------------------------------------
+$google-font-path: '../fonts/google';
+
+@mixin google-font($family, $type, $weight, $style) {
+ @font-face {
+ font-family: $family;
+ src: url('#{$google-font-path}/#{$family}/#{$family}-#{$type}.ttf') format('truetype');
+ font-weight: $weight;
+ font-style: $style;
+ }
+}
+
+@mixin google-font-pair($family) {
+ @include google-font('#{$family}', 'Regular', 400, normal);
+}
+
+@include google-font-pair('Montserrat');
+@include google-font-pair('Open Sans');
+@include google-font-pair('Oswald');
+@include google-font-pair('Raleway');
+@include google-font-pair('Roboto');
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index 93ac948b2ad..12dc0f109dc 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -1,5 +1,5 @@
+
.o_background_footer, .o_background_header, .o_report_layout_background {
- font-family: 'Lato', 'Noto';
color: gray('700');
}
.o_background_header {
@@ -11,7 +11,7 @@
margin-right: 16px;
}
h3 {
- color: $o-brand-odoo;
+ color: $o-company-primary-color;
font-weight: 700;
font-size: 1.25rem;
max-width: 300px;
@@ -22,12 +22,12 @@
white-space: nowrap;
}
ul {
- border-top: 1px solid $o-brand-odoo;
- border-bottom: 1px solid $o-brand-odoo;
+ border-top: 1px solid $o-company-secondary-color;
+ border-bottom: 1px solid $o-company-secondary-color;
padding: 4px 0;
margin: 0 0 4px 0;
li {
- color: $o-brand-odoo;
+ color: $o-company-secondary-color;
}
}
}
@@ -37,7 +37,10 @@
background-position: bottom center;
background-repeat: no-repeat;
min-height: 620px;
-
+
+ strong {
+ color: $o-company-secondary-color;
+ }
.table {
border-top: 1px solid gray('300');
}
@@ -45,8 +48,11 @@
.table td, .table th {
border-top: none;
}
- thead tr th, h2 {
- color: $o-brand-odoo;
+ h2 {
+ color: $o-company-primary-color;
+ }
+ thead tr th {
+ color: $o-company-secondary-color
}
tbody {
color: gray('700');
@@ -75,9 +81,11 @@
&.o_total {
border-top: none !important;
td {
- color: $o-brand-odoo;
border-top: 1px solid gray('400') !important;
}
+ strong {
+ color: $o-company-primary-color;
+ }
}
}
}
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index 8b2d555365e..a32c09379cd 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -1,5 +1,4 @@
.o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
- font-family: 'Lato', 'Noto';
color: gray('700');
font-size: 15px;
}
@@ -17,15 +16,24 @@
.o_boxed_footer {
margin-top: 200px;
white-space: nowrap;
- border-top: 3px solid gray('700');
+ border-top: 3px solid $o-company-secondary-color;
ul {
margin: 4px 0;
}
}
.o_report_layout_boxed {
+ #total strong {
+ color: $o-company-primary-color;
+ }
+ #informations strong {
+ color: $o-company-secondary-color;
+ }
> h2 {
text-transform: uppercase;
}
+ h2 span {
+ color: $o-company-primary-color;
+ }
table {
border: 1px solid gray('700');
thead {
@@ -33,6 +41,7 @@
tr th {
text-transform: uppercase;
border: 1px solid gray('700');
+ color: $o-company-secondary-color;
}
}
tbody {
@@ -50,12 +59,12 @@
border-bottom: 1px solid gray('700');
}
&.o_line_section td {
- background-color: gray('700');
+ background-color: rgba($o-company-primary-color, 0.7);
color: #fff;
}
&.is-subtotal,
td.o_price_total {
- background-color: gray('200');
+ background-color: rgba($o-company-secondary-color, 0.1);
}
}
}
@@ -83,13 +92,16 @@
}
&:last-child td,
&.o_total td {
- background-color: gray('700');
+ background-color: rgba($o-company-primary-color, 0.9);
color: #fff;
&:first-child {
border-right: none;
}
}
+ &.o_total strong {
+ color: white;
+ }
}
}
}
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 0a8f4b065af..0a62584ea88 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -1,25 +1,21 @@
.o_clean_footer, .o_clean_header, .o_report_layout_clean {
- font-family: 'Lato', 'Noto';
color: #000;
}
-.o_clean_header {
- border-bottom: 1px solid $o-brand-primary;
- img {
- max-height: 90px;
- max-width: 300px;
- }
+.o_clean_header img {
+ max-height: 90px;
+ max-width: 300px;
}
.o_clean_footer {
margin: 0 3px;
margin-top: 200px;
- border-top: 3px solid $o-brand-odoo;
+ border-top: 3px solid $o-company-secondary-color;
h4 {
- color: $o-brand-odoo;
+ color: $o-company-secondary-color;
font-weight: bolder;
}
.pagenumber {
- border: 3px solid $o-brand-odoo;
- background-color: $o-brand-primary;
+ border: 3px solid $o-company-primary-color;
+ background-color: $o-company-secondary-color;
color: white;
padding: 4px 8px;
text-align: center;
@@ -27,11 +23,11 @@
}
.o_report_layout_clean {
h1, h2, h3 {
- color: $o-brand-primary;
+ color: $o-company-primary-color;
font-weight: bolder;
}
strong {
- color: $o-brand-odoo;
+ color: $o-company-secondary-color;
}
table {
&.o_main_table {
@@ -39,13 +35,11 @@
}
thead {
- color: $o-brand-odoo;
+ color: $o-company-secondary-color;
tr th {
- border-top: 3px solid $o-brand-odoo !important;
+ border-top: 3px solid $o-company-secondary-color !important;
text-transform: uppercase;
}
- tr th:last-child {
- }
tr th:first-child {
width: 48%;
}
@@ -56,7 +50,7 @@
border-top: none;
}
tr:last-child td {
- border-bottom: 3px solid $o-brand-odoo;
+ border-bottom: 3px solid $o-company-secondary-color;
}
tr {
td {
@@ -67,6 +61,11 @@
}
}
}
+ #total {
+ strong {
+ color: $o-company-secondary-color;
+ }
+ }
/*Total table*/
/* compat 12.0 */
.row:not(#total) > div:has(table) {
diff --git a/addons/web/static/src/scss/layout_standard.scss b/addons/web/static/src/scss/layout_standard.scss
index acc0e07bf1c..e992d25b796 100644
--- a/addons/web/static/src/scss/layout_standard.scss
+++ b/addons/web/static/src/scss/layout_standard.scss
@@ -1,3 +1,22 @@
.o_standard_footer {
margin-top: 200px;
}
+
+.o_report_layout_standard {
+ h2 {
+ color: $o-company-primary-color;
+ }
+
+ #informations strong {
+ color: $o-company-secondary-color;
+ }
+
+ #total strong{
+ color: $o-company-primary-color;
+ }
+ table {
+ thead {
+ color: $o-company-secondary-color;
+ }
+ }
+}
diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index e901b5b9364..f6fcdeb9407 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -1,3 +1,7 @@
+$o-company-font: 'Lato' !default;
+$o-company-primary-color: rgb(0, 0, 0) !default;
+$o-company-secondary-color: rgb(0, 0, 0) !default;
+
html, body {
height: 100%;
direction: ltr;
@@ -6,6 +10,7 @@ html, body {
body {
color: #000 !important;
word-wrap: break-word;
+ font-family: $o-company-font;
}
.border-black td, .border-black th {
border-top: 1px solid black !important;