pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] *: convert less content to scss content

Browse Source 
Convert content so that the assets compile on app installation. The
style is still broken after this as the variables/mixins/... are not
defined in the right order (as it did not matter in LESS but does in
SCSS).

This commit basically changes:
- Variables: @​var_hello -> $var-hello
- Mixins: .mixin_world() {} -> @​mixin mixin-world {}
- Classes used as mixin: .my_class() -> @​extend .my_class
    - Here there were no other solution than to convert the use of
      a mixin call by the use of an extend as a first approximation
- LESS functions -> SCSS functions (e.g. fade -> rgba)
- Move first variable definition before the variable is used
    - Still need to make sure last variable definition is at the
      right place
This commit is contained in:
qsm-odoo
2018-04-18 15:59:16 +02:00
parent b04dec4025
commit 97aa0a8dec
119 changed files with 3282 additions and 3299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/account/static/src/scss/account_dashboard.scss
+16 -16
View File
@@ -1,24 +1,24 @@
.o_kanban_view.o_kanban_dashboard.o_account_kanban {
&.o_kanban_ungrouped .o_account_dashboard_header {
margin: (0 - @o-kanban-record-margin) (@o-kanban-record-margin - @odoo-horizontal-padding) @o-kanban-record-margin;
margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $odoo-horizontal-padding) $o-kanban-record-margin;
}
.o_account_dashboard_header {
.o-flex(1, 0, 100%);
.o-flex-flow(column, nowrap);
.o-align-self(flex-start);
@include o-flex(1, 0, 100%);
@include o-flex-flow(column, nowrap);
@include o-align-self(flex-start);
width: 100%;
height: auto; // cancel o_form_view height 100%, which hides the help tip message at the bottom of the screen
min-height: 0%; // cancel o_form_view min-height 100%, which hides the help tip message at the bottom of the screen
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
.o_form_statusbar {
padding-right: @odoo-horizontal-padding;
padding-right: $odoo-horizontal-padding;
}
h4 {
font-size: @font-size-base;
font-size: $font-size-base;
font-weight: 500;
}
@@ -30,31 +30,31 @@
}
.o_arrow_button.btn-default {
color: @text-muted;
color: $text-muted;
text-transform: none;
font-weight: 500;
.o_account_dashboard_index {
color: @gray-dark;
color: $gray-dark;
}
&.o_action_done {
color: @gray-dark;
background-color: @gray-lighter;
color: $gray-dark;
background-color: $gray-lighter;
&:after {
border-left-color: @gray-lighter;
border-left-color: $gray-lighter;
}
.fa-check {
color: @brand-success;
color: $brand-success;
}
}
&:last-of-type {
margin-left: @odoo-horizontal-padding;
padding-left: @odoo-horizontal-padding*.5;
border-left: 1px solid @gray-lighter-dark;
margin-left: $odoo-horizontal-padding;
padding-left: $odoo-horizontal-padding*.5;
border-left: 1px solid $gray-lighter-dark;
}
}
}
addons/account/static/src/scss/account_journal_dashboard.scss
+11 -11
View File
@@ -6,17 +6,17 @@
}
.o_kanban_card_settings {
padding-top: @odoo-horizontal-padding/2;
padding-bottom: @odoo-horizontal-padding/2;
padding-top: $odoo-horizontal-padding/2;
padding-bottom: $odoo-horizontal-padding/2;
border-top: 1px solid;
border-color: @odoo-brand-lightsecondary;
border-color: $odoo-brand-lightsecondary;
}
.o_dashboard_star {
font-size: 12px;
&.fa-star-o {
color: @odoo-main-color-muted;
color: $odoo-main-color-muted;
&:hover {
color: gold;
}
@@ -27,7 +27,7 @@
}
.o_dashboard_graph {
margin-bottom: -@odoo-horizontal-padding/2;
margin-bottom: -$odoo-horizontal-padding/2;
}
}
@@ -58,7 +58,7 @@
}
g.tick.major {
// Don't know why, but leads to strange bold text
// stroke: @odoo-brand-primary;
// stroke: $odoo-brand-primary;
line {
display: none;
@@ -72,13 +72,13 @@
g.nv-linesWrap {
g.nv-group.nv-series-0 {
fill-opacity: 0.3 !important;
fill: @odoo-brand-primary !important;
stroke: @odoo-brand-primary !important;
fill: $odoo-brand-primary !important;
stroke: $odoo-brand-primary !important;
.nv-point {
visibility: hidden;
r: 3;
stroke: @odoo-brand-primary !important;
stroke: $odoo-brand-primary !important;
fill: white;
stroke-width: 2;
}
@@ -99,11 +99,11 @@
g.nv-group.nv-series-0 {
g.past {
opacity: 0.5;
fill: @odoo-brand-primary !important;
fill: $odoo-brand-primary !important;
}
g.future {
opacity: 0.5;
fill: @odoo-brand-optional !important;
fill: $odoo-brand-optional !important;
}
}
}
addons/account/static/src/scss/account_reconciliation.scss
+26 -36
View File
@@ -1,9 +1,9 @@
@actionColWidth: 15px;
@mainTableBordersPadding: 3px;
@lightBorder: 1px solid #bbb;
@accountingBorder: 1px solid #000;
@initialLineBackground: #f0f0f0;
@infoColor: #44c;
$actionColWidth: 15px;
$mainTableBordersPadding: 3px;
$lightBorder: 1px solid #bbb;
$accountingBorder: 1px solid #000;
$initialLineBackground: #f0f0f0;
$infoColor: #44c;
.o_reconciliation {
@@ -16,9 +16,9 @@
height: 1.5em;
line-height: 1.5em;
&.statement_name {
.o-text-overflow();
@include o-text-overflow;
&.editable:hover {
outline: 1px dashed @odoo-brand-optional;
outline: 1px dashed $odoo-brand-optional;
outline-offset: -1px;
cursor: pointer;
}
@@ -51,7 +51,7 @@
.o_view_noreconciliation {
max-width: none;
padding: 0 10%;
color: @odoo-main-color-muted;
color: $odoo-main-color-muted;
font-size: 125%;
}
@@ -110,16 +110,16 @@
cursor: pointer;
}
tr.already_reconciled {
color: @infoColor;
color: $infoColor;
}
tr.invalid {
text-decoration: line-through;
}
thead td {
border-top: @lightBorder;
border-top: $lightBorder;
padding-top: 4px;
padding-bottom: 5px;
background-color: @initialLineBackground;
background-color: $initialLineBackground;
}
tfoot td {
color: #bbb;
@@ -129,7 +129,7 @@
.cell_action {
width: 15px;
color: @gray;
color: $gray;
background: #fff;
border: 0;
.fa-add-remove:before {
@@ -182,29 +182,19 @@
td {
padding-top: 10px;
text-align: center;
color: @infoColor;
color: $infoColor;
}
}
/* Icons */
.toggle_match, .toggle_create {
.o-transform(rotate(0deg));
.o-transition(transform, 300ms);
@include o-transform(rotate(0deg));
@include o-transition(transform, 300ms);
}
.visible_toggle {
.visible_toggle, &[data-mode="match"] .toggle_match, &[data-mode="create"] .toggle_create {
visibility: visible !important;
.o-transform(rotate(90deg));
}
&[data-mode="match"] {
.toggle_match {
.visible_toggle;
}
}
&[data-mode="create"] {
.toggle_create {
.visible_toggle;
}
@include o-transform(rotate(90deg));
}
/* Match view & Create view */
@@ -214,18 +204,18 @@
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
.o-transition(max-height, 250ms);
@include o-transition(max-height, 250ms);
}
&[data-mode="match"] > .match {
max-height: none;
.o-transition(max-height, 400ms);
@include o-transition(max-height, 400ms);
}
&[data-mode="create"] > .create {
max-height: 210px;
.o-transition(max-height, 400ms);
@include o-transition(max-height, 400ms);
}
}
/* Match view */
.match {
@@ -241,7 +231,7 @@
content: "\f067";
}
.match_controls {
padding: 0 0 5px (@actionColWidth+@mainTableBordersPadding);
padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding);
.filter {
width: 240px;
@@ -264,7 +254,7 @@
}
.show_more {
display: inline-block;
margin-left: (@actionColWidth+@mainTableBordersPadding);
margin-left: ($actionColWidth+$mainTableBordersPadding);
margin-top: 5px;
}
}
@@ -272,7 +262,7 @@
/* Create view */
.create {
> div {
margin: 0 @actionColWidth;
margin: 0 $actionColWidth;
padding: 10px;
overflow: auto;
border: 1px solid #ddd;
@@ -304,7 +294,7 @@
.add_line_container {
text-align: center;
clear: both;
color: @infoColor;
color: $infoColor;
cursor: pointer;
}
}
addons/account_asset/static/src/scss/account_asset.scss
+3 -3
View File
@@ -1,9 +1,9 @@
.o_web_client .o_deprec_lines_toggler {
color: @brand-danger;
color: $brand-danger;
&.o_is_posted {
color: @brand-success;
color: $brand-success;
}
&.o_unposted {
color: @brand-warning;
color: $brand-warning;
}
}
addons/base_import/static/src/scss/base_import.scss
Vendored
+12 -12
View File
@@ -1,5 +1,5 @@
.oe_import {
.o-webclient-padding(@top: 8px);
@include o-webclient-padding($top: 8px);
background-color: white;
overflow: auto;
position: absolute; // Needed for chrome
@@ -7,7 +7,7 @@
right: 0;
bottom: 0;
left: 0;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
position: static;
}
@@ -29,7 +29,7 @@
.oe_import_box {
padding: 16px;
background: #F0EEEE;
border-radius: @border-radius-base;
border-radius: $border-radius-base;
border: solid 1px #dddddd;
label {
font-weight: normal;
@@ -85,7 +85,7 @@
}
.oe_import_noheaders {
.text-muted();
@extend .text-muted; // FIXME was a mixin before scss convertion
}
/* ------------- ERRORS AND WARNINGS REPORT ------------ */
@@ -97,19 +97,19 @@
padding: 4px;
margin: 2px 0;
list-style: none;
border-radius: @border-radius-base;
border-radius: $border-radius-base;
}
.oe_import_report_error {
.bg-danger();
.text-danger();
@extend .bg-danger; // FIXME was a mixin before scss convertion
@extend .text-danger; // FIXME was a mixin before scss convertion
}
.oe_import_report_warning {
.bg-warning();
.text-warning();
@extend .bg-warning; // FIXME was a mixin before scss convertion
@extend .text-warning; // FIXME was a mixin before scss convertion
}
.oe_import_report_info {
.bg-info();
.text-info();
@extend .bg-info; // FIXME was a mixin before scss convertion
@extend .text-info; // FIXME was a mixin before scss convertion
}
}
@@ -136,7 +136,7 @@
/* Field dropdown */
.oe_import_selector {
font-size: @font-size-small;
font-size: $font-size-small;
ul, li {
margin: 0; padding: 0;
}
addons/board/static/src/scss/dashboard.scss
+1 -1
View File
@@ -148,5 +148,5 @@
// Favorites menu in control panel
.o_add_to_dashboard {
display: none; // hidden by default
.o-search-options-dropdown-custom-li;
@include o-search-options-dropdown-custom-li;
}
addons/calendar/static/src/scss/calendar.scss
+8 -8
View File
@@ -5,15 +5,15 @@
border-radius: 5px;
&.accepted {
background-color: @brand-success;
background-color: $brand-success;
}
&.needsAction {
background-color: @odoo-brand-secondary;
background-color: $odoo-brand-secondary;
}
&.declined {
background-color: @brand-danger;
background-color: $brand-danger;
}
}
@@ -42,11 +42,11 @@
}
.o_calendar_invitation_page {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
width: 50%;
margin: 30px auto 0;
.o-webclient-padding(@top: 10px, @bottom: 10px);
background-color: @odoo-view-background-color;
@include o-webclient-padding($top: 10px, $bottom: 10px);
background-color: $odoo-view-background-color;
.o_logo {
width: 15%;
@@ -71,9 +71,9 @@
}
.o_accepted {
color: @brand-success;
color: $brand-success;
}
.o_declined {
color: @brand-danger;
color: $brand-danger;
}
}
addons/event/static/src/scss/event.scss
+4 -4
View File
@@ -4,13 +4,13 @@
position: relative;
padding: 0;
.o-flex-display();
@include o-flex-display;
.o_event_left {
.o-flex(1, 1, 25%);
@include o-flex(1, 1, 25%);
text-align: center;
color: white;
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
padding: 8px;
.o_day {
@@ -19,7 +19,7 @@
}
.o_event_right {
.o-flex(1, 1, 75%);
@include o-flex(1, 1, 75%);
padding: 8px;
margin-left: 8px;
}
addons/google_calendar/static/src/scss/google_calendar.scss
+1 -1
View File
@@ -8,5 +8,5 @@
img.calendar_img_tuto {
margin: 0 0 10px 50px;
border: 2px solid @odoo-brand-secondary;
border: 2px solid $odoo-brand-secondary;
}
addons/hr_attendance/static/src/scss/hr_attendance.scss
+20 -20
View File
@@ -14,12 +14,12 @@
}
#oe_hr_attendance_status {
color: @odoo-brand-secondary;
color: $odoo-brand-secondary;
&.oe_hr_attendance_status_green {
color: @brand-success;
color: $brand-success;
}
&.oe_hr_attendance_status_red {
color: @brand-danger;
color: $brand-danger;
}
}
@@ -35,7 +35,7 @@
top: 0px;
bottom: auto;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
transform: translate(50%, -50%);
}
}
@@ -60,18 +60,18 @@
}
.o_hr_attendance_kiosk_mode_container {
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(center);
.o-align-items(center);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
@include o-justify-content(center);
@include o-align-items(center);
@media (min-width: @screen-sm-min) {
.o-position-absolute(0, 0, 0, 0);
@media (min-width: $screen-sm-min) {
@include o-position-absolute(0, 0, 0, 0);
}
}
.o_hr_attendance_warning_message {
color: @brand-warning;
color: $brand-warning;
}
.o_hr_attendance_random_message {
font-style: italic;
@@ -113,7 +113,7 @@
margin-bottom: 0;
}
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
flex: 0 0 auto;
width: 550px;
border-radius: 10px;
@@ -131,7 +131,7 @@
top: 20px;
right: 20px;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
flex: 0 0 auto;
border-radius: 3px;
background-color: rgba(255,255,255,0.5);
@@ -140,13 +140,13 @@
}
.o_hr_attendance_message_container {
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(center);
.o-align-items(center);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
@include o-justify-content(center);
@include o-align-items(center);
@media (min-width: @screen-sm-min) {
.o-position-absolute(0, 0, 0, 0);
@media (min-width: $screen-sm-min) {
@include o-position-absolute(0, 0, 0, 0);
}
}
@@ -186,7 +186,7 @@
margin-bottom: 0;
}
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
flex: 0 0 auto;
width: 550px;
border-radius: 10px;
addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+74 -75
View File
@@ -1,67 +1,67 @@
@o-org-chart-bg: white;
@o-org-chart-border-color: @odoo-brand-secondary;
$o-org-chart-bg: white;
$o-org-chart-border-color: $odoo-brand-secondary;
@o-org-chart-entry-v-gap: 6px;
@o-org-chart-entry-pic-size: 46px;
@o-org-chart-entry-line-w: 1px;
@o-org-chart-entry-border-color: darken(@o-org-chart-bg, 25%);
$o-org-chart-entry-v-gap: 6px;
$o-org-chart-entry-pic-size: 46px;
$o-org-chart-entry-line-w: 1px;
$o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
// MIXINS
.o-org-chart-line() {
@mixin o-org-chart-line {
content: '';
background-color: @o-org-chart-bg;
border: 0px solid @o-org-chart-entry-border-color;
background-color: $o-org-chart-bg;
border: 0px solid $o-org-chart-entry-border-color;
}
// MOBILE LAYOUT CUSTOMIZATIONS
@media screen and (max-width: @screen-xs-max) {
@media screen and (max-width: $screen-xs-max) {
#o_employee_right {
.o_org_chart_title {
font-size: 20px;
padding: 5px 0;
border-bottom: 1px solid @o-org-chart-border-color;
border-bottom: 1px solid $o-org-chart-border-color;
}
}
}
// SMALL DESKTOP LAYOUT
@media screen and (min-width: @screen-sm-min) {
@media screen and (min-width: $screen-sm-min) {
#o_employee_container {
.o-flex-display();
@include o-flex-display;
width: 100%;
}
#o_employee_main {
.o-flex(1, 1, 60%);
@include o-flex(1, 1, 60%);
}
#o_employee_right {
.o-flex(0, 1, 35%);
@include o-flex(0, 1, 35%);
margin-left: 2%;
padding-left: 2%;
border-left: 1px solid @o-org-chart-border-color;
border-left: 1px solid $o-org-chart-border-color;
.o_org_chart_title {
color: @gray-light
color: $gray-light
}
}
}
// MEDIUM DESKTOP LAYOUT
@media screen and (min-width: @screen-md-min){
@media screen and (min-width: $screen-md-min){
#o_employee_right {
.o-flex(0, 1, 33%);
@include o-flex(0, 1, 33%);
}
}
// LARGE DESKTOP LAYOUT
@media screen and (min-width: @screen-lg-min){
@media screen and (min-width: $screen-lg-min){
#o_employee_right {
.o-flex(0, 1, 30%);
@include o-flex(0, 1, 30%);
}
}
#o_employee_right {
@tmp-gap-base: @o-org-chart-entry-pic-size*0.7;
$tmp-gap-base: $o-org-chart-entry-pic-size*0.7;
// ORGANIGRAM LINES
.o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down {
@@ -70,56 +70,56 @@
.o_org_chart_group_up {
&:before {
.o-org-chart-line();
border-left-width: @o-org-chart-entry-line-w;
height: calc(100% ~'+' @o-org-chart-entry-pic-size*0.5) ;
.o-position-absolute(
@top: @o-org-chart-entry-pic-size*0.1 + 5px,
@left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5
@include o-org-chart-line;
border-left-width: $o-org-chart-entry-line-w;
height: calc(100% + #{$o-org-chart-entry-pic-size*0.5}) ;
@include o-position-absolute(
$top: $o-org-chart-entry-pic-size*0.1 + 5px,
$left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5
);
}
.o_org_chart_entry:last-of-type {
&:before {
.o-org-chart-line();
border-width: 0 0 @o-org-chart-entry-line-w @o-org-chart-entry-line-w;
.size((@o-org-chart-entry-pic-size*0.5) - (@o-org-chart-entry-v-gap*2), @o-org-chart-entry-pic-size*0.5 + @o-org-chart-entry-v-gap*2 );
.o-position-absolute(
@left: @o-org-chart-entry-pic-size*0.5 - @o-org-chart-entry-line-w*0.5,
@top: 100%
@include o-org-chart-line;
border-width: 0 0 $o-org-chart-entry-line-w $o-org-chart-entry-line-w;
@include size(($o-org-chart-entry-pic-size*0.5) - ($o-org-chart-entry-v-gap*2), $o-org-chart-entry-pic-size*0.5 + $o-org-chart-entry-v-gap*2 );
@include o-position-absolute(
$left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5,
$top: 100%
);
}
}
}
.o_org_chart_group_up + .o_org_chart_entry_self {
margin-left: @tmp-gap-base;
margin-left: $tmp-gap-base;
& + .o_org_chart_group_down {
margin-left: @tmp-gap-base*2;
margin-left: $tmp-gap-base*2;
}
}
.o_org_chart_group_down {
margin-left: @tmp-gap-base;
margin-left: $tmp-gap-base;
&:before {
.o-org-chart-line();
border-left-width: @o-org-chart-entry-line-w;
@include o-org-chart-line;
border-left-width: $o-org-chart-entry-line-w;
height: 100%;
.o-position-absolute(
@top: @o-org-chart-entry-v-gap*-1,
@left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5
@include o-position-absolute(
$top: $o-org-chart-entry-v-gap*-1,
$left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5
);
}
.o_org_chart_entry {
&:before {
.o-org-chart-line();
border-top-width: @o-org-chart-entry-line-w;
.size(@tmp-gap-base, 0);
.o-position-absolute(
@left: @tmp-gap-base*-0.5 + @o-org-chart-entry-pic-size*0.1 + @o-org-chart-entry-line-w*0.5,
@top: @o-org-chart-entry-pic-size*0.5
@include o-org-chart-line;
border-top-width: $o-org-chart-entry-line-w;
@include size($tmp-gap-base, 0);
@include o-position-absolute(
$left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5,
$top: $o-org-chart-entry-pic-size*0.5
);
}
@@ -131,7 +131,7 @@
}
&.o_org_chart_more {
margin-top: @o-org-chart-entry-v-gap;
margin-top: $o-org-chart-entry-v-gap;
&:before {
top: 15px;
@@ -142,7 +142,7 @@
// ORGANIGRAM DESIGN
.o_org_chart_entry {
margin-bottom: @o-org-chart-entry-v-gap;
margin-bottom: $o-org-chart-entry-v-gap;
overflow: visible;
margin-top: 0;
@@ -157,12 +157,12 @@
float: right;
cursor: pointer;
margin-right: 5px;
color: @gray-light;
background: @o-org-chart-bg;
border: 1px solid @gray-light;
color: $gray-light;
background: $o-org-chart-bg;
border: 1px solid $gray-light;
&:hover {
color: @odoo-brand-optional;
border-color: @odoo-brand-optional;
color: $odoo-brand-optional;
border-color: $odoo-brand-optional;
}
&:focus {
outline: none;
@@ -173,14 +173,14 @@
display: block;
line-height: 1.2;
font-size: 11px;
color: lighten(@gray-light, 15%);
color: lighten($gray-light, 15%);
}
}
.media-object {
.square(@o-org-chart-entry-pic-size*0.8);
margin: @o-org-chart-entry-pic-size*0.1;
box-shadow: 0 0 0 @o-org-chart-entry-line-w darken(@o-org-chart-bg, 20%);
@include square($o-org-chart-entry-pic-size*0.8);
margin: $o-org-chart-entry-pic-size*0.1;
box-shadow: 0 0 0 $o-org-chart-entry-line-w darken($o-org-chart-bg, 20%);
background-size: cover;
background-position: center center;
@@ -190,15 +190,15 @@
border-color: transparent;
padding: 0;
position: relative;
color: @text-color;
color: $text-color;
.o_org_chart_show_more {
line-height: 13px;
}
&:hover {
border-color: @o-org-chart-entry-border-color;
color:@odoo-brand-optional;
border-color: $o-org-chart-entry-border-color;
color:$odoo-brand-optional;
}
}
}
@@ -209,25 +209,25 @@
}
.media-body > a {
padding-left: 10px;
max-width: calc(100% ~'-' 40px);
max-width: calc(100% - 40px);
display: block;
.media-heading {
color: lighten(@gray-light, 5%);
color: lighten($gray-light, 5%);
font-size: 13px;
}
}
&:hover {
.media-object {
box-shadow: 0 0 0 @o-org-chart-entry-line-w*2 fade(@odoo-brand-optional, 60%);
box-shadow: 0 0 0 $o-org-chart-entry-line-w*2 rgba($odoo-brand-optional, 0.6);
}
.media-body > a {
.media-heading {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
strong {
color: lighten(@gray-light, 5%);
color: lighten($gray-light, 5%);
}
}
}
@@ -235,18 +235,18 @@
&.o_org_chart_entry_self {
&:not(:first-child) {
margin-top: @o-org-chart-entry-v-gap*1.5;
margin-top: $o-org-chart-entry-v-gap*1.5;
}
strong {
color: @text-muted;
color: $text-muted;
}
.media-object {
.square(@o-org-chart-entry-pic-size);
@include square($o-org-chart-entry-pic-size);
margin: 0;
border: @o-org-chart-entry-line-w*2 solid @odoo-brand-optional;
box-shadow: inset 0 0 0 @o-org-chart-entry-line-w*2 white;
border: $o-org-chart-entry-line-w*2 solid $odoo-brand-optional;
box-shadow: inset 0 0 0 $o-org-chart-entry-line-w*2 white;
}
.media-body {
@@ -266,11 +266,11 @@
padding-right: 50px;
> a {
.o-position-absolute(@right: 14px);
@include o-position-absolute($right: 14px);
}
span {
.size(30px, 30px);
@include size(30px, 30px);
margin-right: 10px;
border-radius: 100%;
background-position: center;
@@ -283,4 +283,3 @@
margin-bottom: 0;
}
}
addons/hr_recruitment/static/src/scss/hr_job.scss
+10 -10
View File
@@ -1,5 +1,5 @@
.o_kanban_view.o_kanban_ungrouped {
.o-flex-display();
@include o-flex-display;
.o_kanban_record {
width: 350px;
}
@@ -7,24 +7,24 @@
.o_kanban_view.o_kanban_dashboard {
.o_recruitment_kanban_boxes {
.o-flex-display();
.o-flex-flow(row, nowrap);
@include o-flex-display;
@include o-flex-flow(row, nowrap);
.o_recruitment_kanban_box {
position: relative;
text-align: center;
padding: 0 0 0 0;
.o-flex(1, 1, auto);
.o-flex-display();
.o-flex-flow(row, nowrap);
.o-justify-content(center);
@include o-flex(1, 1, auto);
@include o-flex-display;
@include o-flex-flow(row, nowrap);
@include o-justify-content(center);
&:first-child {
.o-justify-content(flex-start);
@include o-justify-content(flex-start);
padding-left: 16px;
}
&:last-child {
.o-justify-content(flex-end);
@include o-justify-content(flex-end);
padding-right: 16px;
}
@@ -39,7 +39,7 @@
font-size: small;
font-weight: 400;
margin-left: 4px;
.o-hover-opacity(0.5, 1);
@include o-hover-opacity(0.5, 1);
&:before {
content: "/ ";
addons/im_livechat/static/src/scss/copy_clipboard.scss
+4 -4
View File
@@ -2,10 +2,10 @@
.o_field_copy {
position: relative;
border-radius: 5px;
border: 1px solid @btn-primary-border;
font-size: @font-size-small;
color: @odoo-brand-optional;
font-weight: @badge-font-weight;
border: 1px solid $btn-primary-border;
font-size: $font-size-small;
color: $odoo-brand-optional;
font-weight: $badge-font-weight;
text-align: center;
.o_clipboard_button {
&.o_btn_text_copy {
addons/im_livechat/static/src/scss/im_livechat.scss
+1 -1
View File
@@ -27,7 +27,7 @@
.o_livechat_rating {
/* Livechat Rating : feedback smiley */
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
overflow: auto;
padding: 15px;
addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+10 -10
View File
@@ -1,20 +1,20 @@
// bootstrap variables and vendor prefixes needed to embed im_livechat in external pages
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@screen-xs-max: 767px;
@navbar-height: 44px;
$gray-light: lighten(#000, 46.7%); // #777
$gray-lighter: lighten(#000, 93.5%); // #eee
$screen-xs-max: 767px;
$navbar-height: 44px;
.text-muted {
color: @gray-light;
color: $gray-light;
}
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
.o_chat_window {
&,* {
.box-sizing(border-box);
@include box-sizing(border-box);
}
.o_chat_header {
height: 28px;
addons/im_livechat/views/im_livechat_channel_templates.xml
+1
View File
@@ -149,6 +149,7 @@
<script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script>
<script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script>
<t t-call="web._assets_helpers"/>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link>
<link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat_bootstrap.scss"/>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"></link>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link>
addons/lunch/static/src/scss/lunch.scss
+1 -1
View File
@@ -7,7 +7,7 @@
padding: 5px 0;
+ .o_lunch_vignette {
border-top: 1px solid @odoo-brand-lightsecondary;
border-top: 1px solid $odoo-brand-lightsecondary;
}
}
}
addons/mail/static/src/scss/chat_window.scss
+31 -31
View File
@@ -1,25 +1,25 @@
@o-chat-window-bg: #FAFAFA;
@o-chat-window-width: 325px;
@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
$o-chat-window-bg: #FAFAFA;
$o-chat-window-width: 325px;
$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
// backend and other assets (livechat)
@o-chat-header-height: 46px;
@o-chat-window-zindex: @zindex-modal + 1;
$o-chat-header-height: 46px;
$o-chat-window-zindex: $zindex-modal + 1;
.o_chat_window {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
position: fixed;
width: @o-chat-window-width;
width: $o-chat-window-width;
max-width: 100%;
height: 400px;
max-height: 100%;
font-size: 12px;
background-color: @o-chat-window-bg;
background-color: $o-chat-window-bg;
border-radius: 6px 6px 0 0;
z-index: @o-chat-window-zindex;
box-shadow: -5px -5px 10px fade(black, 18%);
z-index: $o-chat-window-zindex;
box-shadow: -5px -5px 10px rgba(black, 0.18);
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
width: 100%;
height: 100%!important;
box-shadow: none;
@@ -33,17 +33,17 @@
}
.o_chat_header {
.o-flex-display();
.o-flex(0, 0, auto);
@include o-flex-display;
@include o-flex(0, 0, auto);
color: white;
padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid @gray-lighter-dark;
background-color: @odoo-brand-primary;
border-bottom: 1px solid $gray-lighter-dark;
background-color: $odoo-brand-primary;
padding: 8px;
@media (max-width: @screen-xs-max) {
height: @o-chat-header-height;
@media (max-width: $screen-xs-max) {
height: $o-chat-header-height;
padding-top: 12px;
border-radius: 0px;
.o_chat_title {
@@ -59,30 +59,30 @@
.o_chat_title {
cursor: pointer;
.o-flex(1, 1, auto);
.o-text-overflow();
@include o-flex(1, 1, auto);
@include o-text-overflow;
}
.o_chat_window_buttons {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
.o_chat_window_close, .o_chat_window_expand {
color: white;
padding: 3px;
margin-left: 5px;
.o-hover-opacity(0.7, 1);
@include o-hover-opacity(0.7, 1);
}
}
}
.o_mail_thread {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
overflow: auto;
-webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
.o_thread_date_separator {
margin: 0px 0px 15px 0px;
.o_thread_date {
background-color: @o-chat-window-bg;
background-color: $o-chat-window-bg;
}
}
.o_thread_message {
@@ -102,11 +102,11 @@
width: auto;
height: 28px;
color: white;
background-color: @gray-dark;
background-color: $gray-dark;
cursor: pointer;
box-shadow: none;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
display: none;
}
@@ -118,8 +118,8 @@
padding: 5px;
.o_total_unread_counter {
.o-position-absolute(-10px, 0, auto, auto);
background-color: @odoo-brand-optional;
@include o-position-absolute(-10px, 0, auto, auto);
background-color: $odoo-brand-optional;
padding: 0 2px;
font-size: smaller;
}
@@ -129,7 +129,7 @@
}
> ul {
max-width: @o-chat-window-width;
max-width: $o-chat-window-width;
padding: 0;
> li.o_chat_header {
@@ -139,7 +139,7 @@
border-top: 1px solid white;
}
&:hover {
background-color: darken(@odoo-brand-primary, 10%);
background-color: darken($odoo-brand-primary, 10%);
}
}
}
addons/mail/static/src/scss/chatter.scss
+11 -11
View File
@@ -10,34 +10,34 @@
}
.o_chatter_topbar {
height: @odoo-statusbar-height;
height: $odoo-statusbar-height;
position: relative;
margin: @grid-gutter-width*0.5 0 0;
margin: $grid-gutter-width*0.5 0 0;
padding: 0;
.o-flex-display();
@include o-flex-display;
> .btn {
height: @odoo-statusbar-height + 1;
height: $odoo-statusbar-height + 1;
border: 1px solid transparent;
}
> .o_followers {
height: @odoo-statusbar-height + 1;
height: $odoo-statusbar-height + 1;
border-bottom: 1px solid transparent;
.o-flex(1,1,auto);
@include o-flex(1,1,auto);
}
}
&.o_chatter_composer_active .o_chatter_topbar {
> .btn, > .o_followers{
border-radius: @border-radius-small @border-radius-small 0 0;
border-radius: $border-radius-small $border-radius-small 0 0;
border-width: 0 0 1px;
border-bottom-color: @gray-lighter-dark;
border-bottom-color: $gray-lighter-dark;
&.o_active {
color: @odoo-brand-primary;
background-color: @gray-lighter;
border-color: @gray-lighter-dark;
color: $odoo-brand-primary;
background-color: $gray-lighter;
border-color: $gray-lighter-dark;
border-width: 1px 1px 0;
}
}
addons/mail/static/src/scss/composer.scss
+130 -124
View File
@@ -1,7 +1,7 @@
@font-face {
font-family: 'emojifont';
src: local('Segoe UI'),
local('Apple Color Emoji'),
src: local('Segoe UI'),
local('Apple Color Emoji'),
local('Android Emoji'),
local('Noto Color Emoji'),
local('Twitter Color Emoji'),
@@ -14,11 +14,11 @@
.o_chat_composer {
position: relative;
.o-flex(0, 0, auto);
.o-flex-display();
@include o-flex(0, 0, auto);
@include o-flex-display;
margin: 1px 0;
border-top: none;
background: @gray-lighter;
background: $gray-lighter;
.o_composer, .o_composer_subject {
position: relative;
@@ -30,11 +30,11 @@
}
.o_composer_subject {
.o-flex-display();
@include o-flex-display;
padding-bottom: 5px;
> input {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
padding: 5px;
margin-right: 30px;
}
@@ -52,7 +52,7 @@
word-break: break-all;
}
.o_composer_mention_dropdown .o_mention_proposition > a {
.o-text-overflow();
@include o-text-overflow;
width: 100%;
padding: 3px 15px;
.o_mention_name {
@@ -67,26 +67,26 @@
resize: none;
}
.btn-icon {
.o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
@include o-hover-opacity($default-opacity: 0.8, $hover-opacity: 1);
border: none;
}
.o_composer_button_full_composer {
.o-position-absolute(auto, 0);
@include o-position-absolute(auto, 0);
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_composer_button_send {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
}
}
.o_mail_emoji_container {
padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
border: 1px solid @gray-lighter-dark;
background-color: @gray-lighter;
padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0;
border: 1px solid $gray-lighter-dark;
background-color: $gray-lighter;
.o_mail_emoji {
margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap;
cursor: pointer; // only in the popover
min-width: 20px;
min-height: 20px;
@@ -95,18 +95,18 @@
// Both inline and not-inline design. Mini-composer disabled.
&:not(.o_chat_mini_composer) {
padding: @mail-thread-avatar-size*0.5;
padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
border: 1px solid @gray-lighter-dark;
padding: $mail-thread-avatar-size*0.5;
padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap;
border: 1px solid $gray-lighter-dark;
border-top: none;
.o_chatter_avatar {
.o-position-absolute(0, @left: -@mail-thread-avatar-size - @o-mail-chatter-gap);
@include o-position-absolute(0, $left: -$mail-thread-avatar-size - $o-mail-chatter-gap);
}
.o_chatter_composer_info, .o_composer_suggested_partners {
.o-flex(0, 0, 100%);
margin-bottom: @o-mail-chatter-gap*0.5;
@include o-flex(0, 0, 100%);
margin-bottom: $o-mail-chatter-gap*0.5;
}
.o_composer_container {
@@ -119,10 +119,10 @@
}
.o_composer, .o_composer_subject {
border: 1px solid @gray-lighter-dark;
border: 1px solid $gray-lighter-dark;
input {
padding: 0 0 @o-mail-chatter-gap;
padding: 0 0 $o-mail-chatter-gap;
border: none;
}
}
@@ -132,34 +132,34 @@
}
.o_chatter_composer_tools {
border-top: 1px solid @gray-lighter-dark;
@media (max-width: @screen-xs-max) {
border-top: 1px solid $gray-lighter-dark;
@media (max-width: $screen-xs-max) {
margin-top: 10px;
}
}
&:not(.o_chat_inline_composer) {
.o-flex-flow(row, wrap);
@include o-flex-flow(row, wrap);
.o_composer_container, .o_composer_button_send {
.o-flex(1, 0, 100%);
@include o-flex(1, 0, 100%);
}
.o_composer, .o_composer_subject {
padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
padding: $o-mail-chatter-gap $o-mail-chatter-gap 0;
}
.o_composer_send {
margin-top: @o-mail-chatter-gap;
margin-top: $o-mail-chatter-gap;
}
}
&.o_chat_inline_composer {
.o_composer_container {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
}
.o_composer {
display: flex;
min-height: 40px;
padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap;
border-radius: 2px 0 0 2px;
border-right-width: 0;
}
@@ -168,32 +168,32 @@
border-width: 1px;
}
.o_composer_input {
.o-flex-flow(row, wrap);
@include o-flex-flow(row, wrap);
}
.o_composer_text_field {
.o-flex(1, 1, 50%);
@include o-flex(1, 1, 50%);
margin: -4px 7px 5px 0px;
padding: 2.5px 0px 0px 5px;
}
.o_chatter_composer_tools {
.o-flex(0, 1, auto);
@include o-flex(0, 1, auto);
}
.o_composer_attachments_list {
.o-flex(1, 0, 100%);
@include o-flex(1, 0, 100%);
}
.o_chatter_composer_tools {
border: none;
border-left: 1px solid @gray-lighter-dark;
padding-left: @o-mail-chatter-gap*0.5;
.o-transform(translateY(-@o-mail-chatter-gap*0.5));
border-left: 1px solid $gray-lighter-dark;
padding-left: $o-mail-chatter-gap*0.5;
@include o-transform(translateY(-$o-mail-chatter-gap*0.5));
}
.o_composer_button_send {
border-radius: 0 3px 3px 0;
// Make the button appear as the same size as the subject input
padding: 10px @padding-base-horizontal;
border: 1px solid darken(@odoo-brand-optional, 5%);
padding: 10px $padding-base-horizontal;
border: 1px solid darken($odoo-brand-optional, 5%);
border-left-width: 0;
}
}
@@ -202,24 +202,24 @@
// Mini-composer enabled
&.o_chat_mini_composer {
.o_composer_container {
border-top: 1px solid @gray-lighter-dark;
border-top: 1px solid $gray-lighter-dark;
width: 100%;
}
.o_mail_emoji_container {
.o-position-absolute(auto, 0, 100%, 0);
@include o-position-absolute(auto, 0, 100%, 0);
border-bottom-width: 1px;
}
.o_composer_input {
.o-flex-flow(row, nowrap);
@include o-flex-flow(row, nowrap);
.o_chatter_composer_tools {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
}
.o_composer_button_send, .o_chatter_avatar {
display: none;
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_composer_button_send {
display: inline-block;
}
@@ -228,7 +228,7 @@
}
.o_composer_attachments_list:not(:empty) {
margin-top: @o-mail-chatter-gap;
margin-top: $o-mail-chatter-gap;
text-align: justify;
}
@@ -245,34 +245,34 @@
// Attachment Icons (common for chat thread and chat composer)
// ------------------------------------------------------------------
@o-mail-attachment-image-size: 38px;
@o-mail-attachment-margin: 5px;
$o-mail-attachment-image-size: 38px;
$o-mail-attachment-margin: 5px;
.o_attachments_list, .o_attachments_previews {
margin: 0 -@o-mail-attachment-margin 0;
.o-flex-display();
.o-flex-flow(row, wrap);
margin: 0 -$o-mail-attachment-margin 0;
@include o-flex-display;
@include o-flex-flow(row, wrap);
}
.o_attachment {
position: relative;
width: 100%;
padding: @o-mail-attachment-margin;
padding: $o-mail-attachment-margin;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
width: 50%;
}
@media (min-width: @screen-md-min) {
width: percentage(1/4);
@media (min-width: $screen-md-min) {
width: 25%;
}
.o_attachment_wrap {
overflow: hidden;
position: relative;
border-bottom: 1px solid fade(black, 10%);
border-bottom: 1px solid rgba(black, 0.1);
border-radius: 2px;
padding: 4px 6px 0 4px;
background-color: fade(black, 5%);
background-color: rgba(black, 0.05);
}
&.o_attachment_editable .o_attachment_wrap {
@@ -280,10 +280,11 @@
}
.o_image {
.square(@o-mail-attachment-image-size);
width: $o-mail-attachment-image-size;
height: $o-mail-attachment-image-size;
image-orientation: from-image; // Only supported in Firefox
&.o_hover {
.o-hover-opacity(@default-opacity: 1, @hover-opacity: 0.7);
@include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
}
}
@@ -292,10 +293,10 @@
}
.caption {
.o-text-overflow(block);
@include o-text-overflow(block);
a {
.o-hover-text-color(@default-color: @odoo-main-text-color, @hover-color: @headings-color);
@include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color);
}
}
@@ -304,23 +305,23 @@
}
.o_attachment_uploaded, .o_attachment_delete {
.o-position-absolute(0,0,0, @left: auto);
.o-flex-display();
.o-align-items(center);
.o-justify-content(center);
@include o-position-absolute(0, 0, 0, $left: auto);
@include o-flex-display();
@include o-align-items(center);
@include o-justify-content(center);
width: 45px;
}
.o_attachment_delete {
background: desaturate(@brand-primary, 50%);
background: desaturate($brand-primary, 50%);
color: white;
cursor: pointer;
font-size: 20px;
.o-transform(translateX(100%));
.o-transition(all, 0.3s);
@include o-transform(translateX(100%));
@include o-transition(all, 0.3s);
&:hover {
background: @brand-primary;
background: $brand-primary;
}
}
@@ -343,8 +344,8 @@
}
&:hover .o_attachment_delete {
.o-transition(all, 0.1s);
.o-transform(translateX(0));
@include o-transition(all, 0.1s);
@include o-transform(translateX(0));
}
}
@@ -352,20 +353,20 @@
> .o_attachment {
width: 50%;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
width: percentage(1/3);
}
@media (min-width: @screen-md-min) {
@media (min-width: $screen-md-min) {
width: percentage(1/4);
}
@media (min-width: @screen-lg-min) {
@media (min-width: $screen-lg-min) {
width: percentage(1/6);
}
.o_attachment_wrap {
padding: 0;
border-radius: 2px;
border: 1px solid @gray-lighter-darker;
border: 1px solid $gray-lighter-darker;
}
.o_image_box {
@@ -373,94 +374,98 @@
padding-top: 75%;
.o_attachment_image {
.o-position-absolute(0,0,0,0);
@include o-position-absolute(0, 0, 0, 0);
background-size: cover;
background-position: center;
.o-transform(scale(1.05));
.o-transition(all, 0.3s);
@include o-transform(scale(1.05));
@include o-transition(all, 0.3s);
}
&:hover .o_attachment_image {
.o-transform(scale(1));
@include o-transform(scale(1));
}
}
.o_image_overlay {
.o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0);
.o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
.o-linear-gradient(180deg, fade(black, 20%), fade(black, 90%));
.o-transition(all, 0.3s);
@include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
@include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
@include o-linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
@include o-transition(all, 0.3s);
padding: 10px;
.o_attachment_title {
.o-position-absolute(@bottom: 7px);
@include o-position-absolute($bottom: 7px);
width: 80%;
.o-text-overflow(inline-block);
font-size: @font-size-small;
@include o-text-overflow(inline-block);
font-size: $font-size-small;
}
.o_attachment_download {
.o-position-absolute(@right: 7px, @bottom:7px);
@include o-position-absolute($right: 7px, $bottom:7px);
}
}
}
}
.o_modal_fullscreen {
z-index: @o-chat-window-zindex + 1;
.o-viewer-black-btn () {
background-color: fade(black, 40%);
color: fade(@gray-lighter, 70%);
&:hover {
background-color: fade(black,60%);
color: white;
}
@mixin o-viewer-black-btn {
background-color: rgba(black, 0.4);
color: rgba($gray-lighter, 0.7);
&.disabled {
color: @gray-light;
background: none;
}
&:hover {
background-color: rgba(black, 0.6);
color: white;
}
&.disabled {
color: $gray-light;
background: none;
}
}
.o_modal_fullscreen {
z-index: $o-chat-window-zindex + 1;
.o_viewer_content {
.square(100%);
position: relative;
width: 100%;
height: 100%;
.o_viewer-header {
.o-position-absolute(0, 0, @left: 0);
@include o-position-absolute(0, 0, $left: 0);
height: 45px;
padding: @grid-gutter-width*0.5;
background-color: fade(black, 80%);
padding: $grid-gutter-width*0.5;
background-color: rgba(black, 0.8);
z-index: 1;
color: #FFFFFF;
a {
.o-hover-text-color(fade(@gray-lighter,60%), white);
@include o-hover-text-color(rgba($gray-lighter, 0.6), white);
}
.o_close_btn {
.o-position-absolute(-1px, @grid-gutter-width*0.5);
font-size: @font-size-h1;
@include o-position-absolute(-1px, $grid-gutter-width*0.5);
font-size: $font-size-h1;
font-weight: 300;
}
}
.o_loading_img {
.o-position-absolute(@top: 45%, @right: 0, @left: 0);
@include o-position-absolute($top: 45%, $right: 0, $left: 0);
}
.o_viewer_img_wrapper {
cursor: pointer;
.square(100%);
position: fixed;
background-color: fade(black, 70%);
width: 100%;
height: 100%;
background-color: rgba(black, 0.7);
.o_viewer_zoomer {
.square(100%);
.o-flex-display();
.o-justify-content(center);
.o-align-items(center);
width: 100%;
height: 100%;
@include o-flex-display;
@include o-justify-content(center);
@include o-align-items(center);
padding: 45px 0;
img {
@@ -476,7 +481,8 @@
}
.o_viewer_pdf {
.size(80%, 100%);
width: 80%;
height: 100%;
border: 0px;
box-shadow: 1px 1px 20px 1px #000;
}
@@ -488,29 +494,29 @@
}
.o_viewer_toolbar {
.o-position-absolute(@left: 50%, @bottom: @grid-gutter-width*0.5);
.o-transform(translate(-50%, -50%));
@include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
@include o-transform(translate(-50%, -50%));
overflow: hidden;
border-radius: 4px;
background-color: fade(black, 40%);
background-color: rgba(black, 0.4);
.o_viewer_toolbar_btn {
.o-viewer-black-btn();
padding-left: 8px;
@include o-viewer-black-btn;
padding-left: 8px;
padding-right: 8px;
}
}
}
.arrow {
.o-position-absolute(50%, @grid-gutter-width*0.5);
@include o-position-absolute(50%, $grid-gutter-width*0.5);
border-radius: 100%;
padding: 12px 16px 11px 18px;
.o-viewer-black-btn();
@include o-viewer-black-btn;
}
.arrow-left {
left: @grid-gutter-width*0.5;
left: $grid-gutter-width*0.5;
right: auto;
padding: 12px 18px 11px 16px;
}
addons/mail/static/src/scss/discuss.scss
+99 -99
View File
@@ -1,10 +1,10 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
@mail-chat-sidebar-width: 250px;
$mail-chat-sidebar-width: 250px;
.o_mail_chat {
.o-position-absolute(0, 0, 0, 0);
@include o-position-absolute(0, 0, 0, 0);
height: 100%;
overflow: hidden;
@@ -13,13 +13,13 @@
background-color: #DFA941;
color: white;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
.o-flex-display();
border-bottom: 1px solid @odoo-main-color-muted;
@include o-flex-display;
border-bottom: 1px solid $odoo-main-color-muted;
.o_mail_request_permission {
.o-flex-display();
@include o-flex-display;
justify-content: center;
.o-flex(1,1, auto);
@include o-flex(1,1, auto);
}
> span {
font-size: 16px;
@@ -38,19 +38,19 @@
}
.o_mail_chat_sidebar {
width: @mail-chat-sidebar-width;
width: $mail-chat-sidebar-width;
height: 100%;
float: left;
overflow: auto;
padding: @odoo-horizontal-padding 0;
padding: $odoo-horizontal-padding 0;
@media (min-width: @screen-lg-min) {
width: @mail-chat-sidebar-width + 50px;
@media (min-width: $screen-lg-min) {
width: $mail-chat-sidebar-width + 50px;
}
.o_mail_sidebar_title {
.o-flex-display();
padding: 6px @odoo-horizontal-padding 0 @odoo-horizontal-padding;
@include o-flex-display;
padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding;
align-items: center;
justify-content: space-between;
h4 {
@@ -65,16 +65,16 @@
}
}
.o_mail_chat_channel_item {
.o-flex-display();
@include o-flex-display;
width: 100%;
padding: 2px @odoo-horizontal-padding 2px (@odoo-horizontal-padding + 12px); // compensate icon
padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon
.o_channel_name {
.o-flex(1, 1, auto);
.o-text-overflow();
@include o-flex(1, 1, auto);
@include o-text-overflow;
}
.o_mail_sidebar_needaction, .o_mail_partner_unpin, .o_mail_channel_settings {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
.o_mail_sidebar_needaction {
margin: 0 0 0 5px;
@@ -87,18 +87,18 @@
}
&.o_mail_chat_title_main {
padding: @padding-base-vertical @odoo-horizontal-padding;
padding: $padding-base-vertical $odoo-horizontal-padding;
margin-bottom: 2px;
}
}
.o_mail_chat_channel_item + .o_mail_sidebar_title {
margin-top: @padding-base-vertical;
margin-top: $padding-base-vertical;
}
.o_mail_add_channel {
width: 100%;
padding: 5px (@odoo-horizontal-padding + 23px); // compensate icon
padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon
position: relative;
> input {
@@ -106,27 +106,27 @@
padding: 2px 5px;
}
> span {
.o-position-absolute(7px, @left: 27px);
@include o-position-absolute(7px, $left: 27px);
}
}
}
.o_mail_chat_content {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
height: 100%;
margin-left: @mail-chat-sidebar-width;
margin-left: $mail-chat-sidebar-width;
position: relative;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
overflow: auto;
}
@media (min-width: @screen-lg-min) {
margin-left: @mail-chat-sidebar-width + 50px;
@media (min-width: $screen-lg-min) {
margin-left: $mail-chat-sidebar-width + 50px;
}
.o_mail_thread {
.o-flex(1, 0, 0);
@include o-flex(1, 0, 0);
overflow: auto;
padding: 0 0 15px 0;
-webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
@@ -138,11 +138,11 @@
}
.o_mail_snackbar {
.o-position-absolute(15px, 15px);
@include o-position-absolute(15px, 15px);
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
background-color: darken(@gray, 8%);
background-color: darken($gray, 8%);
color: white;
}
}
@@ -151,27 +151,27 @@
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
@sidebar-icon-opacity: 0.7;
$sidebar-icon-opacity: 0.7;
.o_mail_chat {
.o_mail_chat_sidebar {
background-color: @gray-dark;
color: @gray-lighter-dark;
background-color: $gray-dark;
color: $gray-lighter-dark;
.o_mail_chat_channel_item {
cursor: pointer;
&:hover {
background-color: darken(@gray-dark,2%);
background-color: darken($gray-dark,2%);
.o_mail_partner_unpin, .o_mail_channel_settings {
opacity: @sidebar-icon-opacity;
opacity: $sidebar-icon-opacity;
}
}
&.o_active {
background-color: @gray-darker;
box-shadow: inset 3px 0 0 @odoo-brand-optional;
background-color: $gray-darker;
box-shadow: inset 3px 0 0 $odoo-brand-optional;
}
.o_mail_hash {
@@ -179,7 +179,7 @@
}
.o_mail_partner_unpin, .o_mail_channel_settings {
.o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
@include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
}
&.o_unread_message {
color: white;
@@ -188,24 +188,24 @@
> .badge {
color: white;
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
font-size: 10px;
line-height: 16px;
height: 18px;
}
&.o_mail_chat_title_main {
font-size: @font-size-base;
font-size: $font-size-base;
&.o_mail_chat_title_starred > .badge {
background-color: @gray-light;
border-color: @gray-light;
background-color: $gray-light;
border-color: $gray-light;
}
}
}
> hr {
border-color: @gray;
border-color: $gray;
}
.o_mail_add_channel {
@@ -221,17 +221,17 @@
.o_mail_sidebar_title {
h4 {
margin: 0;
font-size: @font-size-small;
font-size: $font-size-small;
text-transform: uppercase;
color: @gray-light;
color: $gray-light;
&.o_mail_open_channels:hover {
color: white;
}
}
.o_add {
cursor: pointer;
.o-hover-opacity(@sidebar-icon-opacity, 1);
.o-hover-text-color(@gray-light, white);
@include o-hover-opacity($sidebar-icon-opacity, 1);
@include o-hover-text-color($gray-light, white);
}
}
}
@@ -244,7 +244,7 @@
.o_thread_message {
opacity: 0.5;
&.o_thread_selected_message {
padding: 4px @odoo-horizontal-padding;
padding: 4px $odoo-horizontal-padding;
opacity: 1;
background-color: lightgray;
}
@@ -256,10 +256,10 @@
font-size: 1em;
position: relative;
&.o_user_online {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
&.o_user_idle {
color: @brand-warning;
color: $brand-warning;
}
}
@@ -267,14 +267,14 @@
// ------------------------------------------------------------------
// Mobile
// ------------------------------------------------------------------
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_mail_chat {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
background: white;
.o_mail_chat_mobile_control_panel {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
padding: 5px;
min-height: 44px;
border-bottom: 1px solid #ebebeb;
@@ -292,7 +292,7 @@
}
.o_enable_searchview, .o_enable_searchview:focus,
.o_enable_searchview:hover, .o_enable_searchview:active {
.o-position-absolute(@right: 5px, @top: 5px);
@include o-position-absolute($right: 5px, $top: 5px);
color: gray;
background: none;
font-size: 15px;
@@ -303,24 +303,24 @@
}
.o_mail_chat_mobile_inbox_buttons {
.o-flex-display();
.o-flex(0, 0, auto);
@include o-flex-display;
@include o-flex(0, 0, auto);
z-index: 2;
box-shadow: 0 2px 4px @gray-lighter-darker;
box-shadow: 0 2px 4px $gray-lighter-darker;
.o_channel_inbox_item {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
width: 50%;
padding: 2%;
&.btn-default {
border-bottom: 1px solid @gray-lighter-darker
border-bottom: 1px solid $gray-lighter-darker
}
}
}
.o_mail_chat_content {
.o-flex(1, 0, 0);
@include o-flex(1, 0, 0);
margin-left: 10px;
margin-right: 10px;
background-color: transparent;
@@ -336,7 +336,7 @@
border: 1px solid #afafaf;
border-radius: 4px;
> span {
.o-position-absolute(@top: 10px, @left: 10px);
@include o-position-absolute($top: 10px, $left: 10px);
}
> input {
border: none;
@@ -346,7 +346,7 @@
}
}
.o_mail_mobile_tabs {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
}
}
@@ -356,64 +356,64 @@
// ------------------------------------------------------------------
.o_mail_channel_preview {
.o-flex-display();
background-color: @gray-lighter;
color: @odoo-main-text-color;
@include o-flex-display;
background-color: $gray-lighter;
color: $odoo-main-text-color;
cursor: pointer;
overflow: hidden;
position: relative;
&:hover {
background-color: @gray-lighter-dark;
background-color: $gray-lighter-dark;
.o_channel_name {
color: @headings-color;
color: $headings-color;
}
}
&:not(:last-child) {
border-bottom: 1px solid @gray-lighter-darker;
border-bottom: 1px solid $gray-lighter-darker;
}
.o_mail_channel_image {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
position: relative;
> img {
.square(100%);
@include square(100%);
border-radius: 50%;
}
&.o_mail_channel_app > img {
border-radius: 2px;
}
.o_mail_user_status {
.o-position-absolute(@bottom: 0px, @right: 0px);
@include o-position-absolute($bottom: 0px, $right: 0px);
}
}
.o_channel_info {
.o-flex(1, 1, 100%);
@include o-flex(1, 1, 100%);
overflow: hidden;
.o_channel_title {
.o-flex-display();
@include o-flex-display;
.o_channel_name {
.o-flex(0, 1, auto);
.o-text-overflow();
@include o-flex(0, 1, auto);
@include o-text-overflow;
}
.o_channel_counter {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
}
.o_last_message_date {
.o-flex(0, 0, auto);
color: @odoo-main-color-muted;
@include o-flex(0, 0, auto);
color: $odoo-main-color-muted;
font-weight: 500;
}
}
.o_last_message_preview {
width: 100%;
max-height: 20px;
color: @odoo-main-color-muted;
.o-text-overflow();
color: $odoo-main-color-muted;
@include o-text-overflow;
}
}
&.o_channel_unread {
background-color: transparent;
&:hover {
background-color: @gray-lighter;
background-color: $gray-lighter;
}
.o_channel_info {
.o_channel_title {
@@ -421,29 +421,29 @@
font-weight: 700;
}
.o_last_message_date {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
}
}
}
}
@media (max-width: @screen-xs-max) {
@o-mail-chatter-mobile-gap: 2%;
@media (max-width: $screen-xs-max) {
$o-mail-chatter-mobile-gap: 2%;
.o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
border: none;
}
.o_mail_channel_preview {
padding: @o-mail-chatter-mobile-gap;
padding: $o-mail-chatter-mobile-gap;
.o_mail_channel_image:not(img) {
width: @o-mail-chatter-mobile-gap*6;
width: $o-mail-chatter-mobile-gap*6;
}
.o_channel_info, .o_last_message_date {
margin-left: @o-mail-chatter-mobile-gap;
margin-left: $o-mail-chatter-mobile-gap;
}
.o_channel_name {
@@ -455,22 +455,22 @@
}
.o_last_message_preview {
margin-top: @o-mail-chatter-mobile-gap*0.5;
margin-top: $o-mail-chatter-mobile-gap*0.5;
}
}
.o_mail_mobile_tabs {
.o-flex-display();
box-shadow: 0 0 8px @gray-lighter-darker;
@include o-flex-display;
box-shadow: 0 0 8px $gray-lighter-darker;
.o_mail_mobile_tab {
.o-flex-display();
.o-flex(1, 1, auto);
@include o-flex-display;
@include o-flex(1, 1, auto);
width: 20%;
.o-flex-flow(column, nowrap);
.o-justify-content(space-between);
padding: @o-mail-chatter-mobile-gap @o-mail-chatter-mobile-gap*2;
box-shadow: 1px 0 0 @gray-lighter-darker;
@include o-flex-flow(column, nowrap);
@include o-justify-content(space-between);
padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2;
box-shadow: 1px 0 0 $gray-lighter-darker;
text-align: center;
> span {
@@ -479,13 +479,13 @@
font-size: 10px;
&.fa {
padding-bottom: @o-mail-chatter-mobile-gap*2;
padding-bottom: $o-mail-chatter-mobile-gap*2;
font-size: 1.3em;
}
}
&.active > span {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
}
}
addons/mail/static/src/scss/extended_chat_window.scss
+12 -12
View File
@@ -1,23 +1,23 @@
.o_chat_window {
&.o_thread_less {
.o_chat_search_input {
.o-flex-display();
.o-align-items(baseline);
padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
@include o-flex-display;
@include o-align-items(baseline);
padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
> span {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> input {
margin-left: 5px;
padding: @o-mail-chatter-gap*0.5;
.o-flex(1, 1, 100%);
padding: $o-mail-chatter-gap*0.5;
@include o-flex(1, 1, 100%);
}
}
.o_mail_thread {
background-color: @odoo-webclient-background-color;
background-color: $odoo-webclient-background-color;
}
.o_chat_composer {
@@ -33,7 +33,7 @@
padding: 10px;
font-size: 13px;
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
width: 70%;
> textarea {
padding: 15px 10px;
@@ -41,14 +41,14 @@
}
}
.o_chatter_composer_tools {
.o-position-absolute(@right: 0px, @top: 0px);
@include o-position-absolute($right: 0px, $top: 0px);
@media (max-width: @screen-xs-max) {
.o-position-absolute(@right: 6px, @top: 0px);
@media (max-width: $screen-xs-max) {
@include o-position-absolute($right: 6px, $top: 0px);
}
button {
padding: 8px;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
padding: 7px 6px 0px 6px;
}
&.btn-icon {
addons/mail/static/src/scss/followers.scss
+11 -11
View File
@@ -1,6 +1,6 @@
.o_followers {
float: right;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
display: none !important; // Hide the followers in mobile
}
@@ -38,7 +38,7 @@
.o_followers_follow_button {
width: 85px;
padding-right: 0;
color: @text-color;
color: $text-color;
font-weight: bold;
.o_follow, .o_followers_unfollow, .o_followers_following {
@@ -62,10 +62,10 @@
.fa {
&.fa-times {
color: @brand-warning;
color: $brand-warning;
}
&.fa-check {
color: @brand-success;
color: $brand-success;
}
}
}
@@ -91,26 +91,26 @@
font-size: small;
.o_partner {
@partner_avatar_size: 24px;
$partner-avatar-size: 24px;
position: relative; // required for old design compatibility
> a {
max-width: 160px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: @partner_avatar_size;
padding: 3px @partner_avatar_size + 8px;
height: $partner-avatar-size;
padding: 3px $partner-avatar-size + 8px;
}
> img {
.o-position-absolute();
width: @partner_avatar_size;
@include o-position-absolute;
width: $partner-avatar-size;
}
.o_remove_follower {
.o-position-absolute(6px, 5px);
@include o-position-absolute(6px, 5px);
cursor: pointer;
}
.o_edit_subtype {
.o-position-absolute(6px, 18px);
@include o-position-absolute(6px, 18px);
cursor: pointer;
}
}
addons/mail/static/src/scss/mail_activity.scss
+16 -16
View File
@@ -16,7 +16,7 @@
&.collapsed {
margin-bottom: 0;
.o-transition(margin, 0.8s);
@include o-transition(margin, 0.8s);
.o_chatter_planned_activities_summary {
display: inline-block;
@@ -44,12 +44,12 @@
margin-bottom: 8px;
img {
.square(31px);
@include square(31px);
}
.o_avatar_icon {
.o-position-absolute(@right: -5px, @bottom: -5px);
.square(25px);
@include o-position-absolute($right: -5px, $bottom: -5px);
@include square(25px);
padding: 6px 5px;
text-align: center;
line-height: 1.2;
@@ -64,12 +64,12 @@
.o_activity_info {
vertical-align: baseline;
padding: 4px 6px;
background: @gray-lighter;
background: $gray-lighter;
border-radius: 2px 2px 0 0;
.o-hover-opacity(1, 1);
@include o-hover-opacity(1, 1);
&.collapsed {
.o-hover-opacity(0.5, 1);
@include o-hover-opacity(0.5, 1);
background: transparent;
}
}
@@ -93,7 +93,7 @@
.o_thread_message_tools {
.o_activity_link {
padding: 0 @padding-base-horizontal;
padding: 0 $padding-base-horizontal;
}
.o_activity_done {
padding-left: 0;
@@ -107,13 +107,13 @@
}
.o_activity_color_planned {
color: @brand-success;
color: $brand-success;
}
.o_activity_color_overdue {
color: @brand-danger;
color: $brand-danger;
}
.o_activity_color_today {
color: @brand-warning;
color: $brand-warning;
}
}
@@ -150,14 +150,14 @@
padding: 0px 0px;
& > li:last-child {
background-color: @odoo-brand-lightsecondary;
color: @gray-dark;
background-color: $odoo-brand-lightsecondary;
color: $gray-dark;
line-height: 3em;
}
li > ul.o_activity_log {
max-height: 300px;
overflow-y: auto;
color: @text-color;
color: $text-color;
li {
width: 100%;
@@ -166,14 +166,14 @@
&.o_activity_label {
line-height: 2.5em;
padding: 0px 5px;
background-color: @odoo-brand-lightsecondary;
background-color: $odoo-brand-lightsecondary;
}
&.o_schedule_activity {
padding: 8px 10px 8px 0px;
vertical-align: middle;
&:hover {
background-color: @gray-lighter;
background-color: $gray-lighter;
.o_activity_link_kanban {
visibility: visible;
}
addons/mail/static/src/scss/systray.scss
+23 -23
View File
@@ -9,19 +9,19 @@
&.o_no_notification > a {
opacity: 0.5;
> i {
.o-transform(translateY(0px));
@include o-transform(translateY(0px));
}
.o_notification_counter {
display: none;
}
}
&.open .o_mail_navbar_dropdown {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
}
.o_notification_counter {
.o-position-absolute(@top: 20%, @right: 1px);
background: @odoo-brand-optional;
@include o-position-absolute($top: 20%, $right: 1px);
background: $odoo-brand-optional;
color: white;
padding: 0em 0.3em;
font-size: 0.7em;
@@ -31,27 +31,27 @@
padding: 0;
.o_spinner {
.o-flex-display();
.o-align-items(center);
.o-justify-content(center);
color: @odoo-main-text-color;
@include o-flex-display;
@include o-align-items(center);
@include o-justify-content(center);
color: $odoo-main-text-color;
height: 50px;
}
.o_mail_navbar_dropdown_top {
.o-flex-display();
.o-flex(0, 0, auto);
@include o-flex-display;
@include o-flex(0, 0, auto);
justify-content: space-between;
border-bottom: 1px solid @gray-lighter-darker;
box-shadow: 0 0 2px @gray-lighter-darker;
border-bottom: 1px solid $gray-lighter-darker;
box-shadow: 0 0 2px $gray-lighter-darker;
.o_filter_button, .o_new_message {
.btn-link;
@extend .btn-link; // FIXME was a mixin before scss convertion
padding: 5px;
}
.o_filter_button {
color: @odoo-main-color-muted;
color: $odoo-main-color-muted;
&:hover, &.active {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
&.active {
cursor: default;
@@ -61,12 +61,12 @@
}
.o_mail_navbar_dropdown_channels {
.o-flex(0, 1, auto);
@include o-flex(0, 1, auto);
max-height: 400px;
min-height: 50px;
overflow-y: auto;
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
.o_mail_channel_preview {
height: 50px;
padding: 5px;
@@ -87,12 +87,12 @@
}
}
.o_activity_filter_button {
.btn-link;
@extend .btn-link; // FIXME was a mixin before scss convertion
padding: 2px;
}
.o_no_activity {
cursor: initial;
.o-align-items(center);
@include o-align-items(center);
color: grey;
opacity: 0.5;
padding: 3px;
@@ -106,7 +106,7 @@
// Mobile rules
// Goal: mock the design of Discuss in mobile
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_mail_navbar_item {
.o_notification_counter {
top: 10%;
@@ -120,7 +120,7 @@
padding: 5px;
height: 44px;
border-bottom: 1px solid #ebebeb;
box-shadow: 0 0 2px @gray-lighter-darker;
box-shadow: 0 0 2px $gray-lighter-darker;
}
.o_mail_navbar_dropdown_channels {
max-height: none;
@@ -132,7 +132,7 @@
left: 0px;
right: 0px;
background-color: white;
color: @odoo-main-text-color;
color: $odoo-main-text-color;
}
}
}
addons/mail/static/src/scss/thread.scss
+24 -29
View File
@@ -1,8 +1,3 @@
@mail-thread-avatar-size: 36px;
@mail-thread-icon-opacity: 0.6;
@mail-thread-side-date-opacity: 0.6;
@mail-thread-note: fade(@gray-lighter-dark, 50%);
.o_mail_thread, .o_mail_activity {
.o_thread_show_more {
text-align: center;
@@ -11,11 +6,11 @@
.o_thread_date_separator {
margin-top: 15px;
margin-bottom: 30px;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
margin-top: 0px;
margin-bottom: 15px;
}
border-bottom: 1px solid @gray-lighter-darker;
border-bottom: 1px solid $gray-lighter-darker;
text-align: center;
.o_thread_date {
@@ -30,42 +25,42 @@
.o_thread_new_messages_separator {
margin-bottom: 15px;
border-bottom: solid lighten(@odoo-brand-primary, 15%) 1px;
border-bottom: solid lighten($odoo-brand-primary, 15%) 1px;
text-align: right;
.o_thread_separator_label {
position: relative;
top: 8px;
padding: 0 10px;
background: white;
color: lighten(@odoo-brand-primary, 15%);
color: lighten($odoo-brand-primary, 15%);
font-size: smaller;
}
}
.o_thread_message {
.o-flex-display();
padding: 4px @odoo-horizontal-padding;
@include o-flex-display;
padding: 4px $odoo-horizontal-padding;
margin-bottom: 0px;
&.o_mail_not_discussion {
background-color: @mail-thread-note;
border-bottom: 1px solid @gray-lighter-darker;
background-color: $mail-thread-note;
border-bottom: 1px solid $gray-lighter-darker;
}
.o_thread_message_sidebar {
.o-flex(0, 0, @mail-thread-avatar-size);
@include o-flex(0, 0, $mail-thread-avatar-size);
margin-right: 10px;
margin-top: 2px;
text-align: center;
font-size: smaller;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
margin-top: 4px;
font-size: x-small;
}
.o_thread_message_avatar {
max-width: @mail-thread-avatar-size;
max-width: $mail-thread-avatar-size;
}
.o_thread_message_side_date {
margin-left: -5px;
@@ -82,17 +77,17 @@
cursor: pointer;
opacity: 0;
&.fa-star {
opacity: @mail-thread-icon-opacity;
opacity: $mail-thread-icon-opacity;
color: gold;
}
}
&:hover, &.o_thread_selected_message {
.o_thread_message_side_date {
opacity: @mail-thread-side-date-opacity;
opacity: $mail-thread-side-date-opacity;
}
.o_thread_icon {
opacity: @mail-thread-icon-opacity;
opacity: $mail-thread-icon-opacity;
&:hover {
opacity: 1;
}
@@ -104,7 +99,7 @@
}
.o_thread_message_core {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
min-width: 0;
max-width: 100%;
word-wrap: break-word;
@@ -114,7 +109,7 @@
text-align: justify;
}
.o_mail_subject {
font-style: italic;
@@ -149,13 +144,13 @@
.o_mail_info {
margin-bottom: 2px;
.text-muted();
@extend .text-muted; // FIXME was a mixin before scss convertion
.o_mail_mailto, .o_mail_mailto:hover {
.text-muted();
@extend .text-muted; // FIXME was a mixin before scss convertion
}
strong {
color: @headings-color;
color: $headings-color;
}
}
@@ -179,7 +174,7 @@
.o_attachments_list, .o_attachments_previews {
&:last-child {
margin-bottom: @grid-gutter-width;
margin-bottom: $grid-gutter-width;
}
}
@@ -189,9 +184,9 @@
.o_thread_tooltip_content {
top: 10px;
background: @gray-lighter;
background: $gray-lighter;
padding: 4px;
border: solid @gray-lighter 1px;
border: solid $gray-lighter 1px;
border-radius: 5px;
color: gray;
width: 300px;
@@ -219,7 +214,7 @@
}
.o_mail_no_content {
.o-position-absolute(30%, 0, 0, 0);
@include o-position-absolute(30%, 0, 0, 0);
text-align: center;
font-size: 115%;
}
@@ -231,6 +226,6 @@
.o_web_client.o_touch_device {
.o_mail_thread .o_thread_icon {
opacity: @mail-thread-icon-opacity;
opacity: $mail-thread-icon-opacity;
}
}
addons/mail/static/src/scss/variables.scss
+5
View File
@@ -0,0 +1,5 @@
// FIXME moved here since scss convertion
$mail-thread-avatar-size: 36px;
$mail-thread-icon-opacity: 0.6;
$mail-thread-side-date-opacity: 0.6;
$mail-thread-note: rgba($gray-lighter-dark, 0.5);
addons/mail/views/mail_templates.xml
+1
View File
@@ -27,6 +27,7 @@
<script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
<script type="text/javascript" src="/mail/static/src/js/activity.js"></script>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/announcement.scss"/>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/discuss.scss"/>
<link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"/>
addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+29 -29
View File
@@ -1,25 +1,25 @@
.o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body {
// cancel padding of form_sheet
margin-top: -@odoo-sheet-cancel-tpadding;
margin-left: -@odoo-sheet-cancel-hpadding;
margin-right: -@odoo-sheet-cancel-hpadding;
margin-bottom: -@odoo-sheet-cancel-bpadding;
margin-top: -$odoo-sheet-cancel-tpadding;
margin-left: -$odoo-sheet-cancel-hpadding;
margin-right: -$odoo-sheet-cancel-hpadding;
margin-bottom: -$odoo-sheet-cancel-bpadding;
}
.o_mail_theme_selector {
> a {
.o-position-absolute(0, 0, auto, 0);
height: @odoo-navbar-height;
@include o-position-absolute(0, 0, auto, 0);
height: $odoo-navbar-height;
line-height: 31px;
border-radius: 0;
background-color: @o-we-color-darker;
color: @o-we-color-text-normal;
.o-flex-display();
.o-justify-content(center);
.o-align-items(center);
background-color: $o-we-color-darker;
color: $o-we-color-text-normal;
@include o-flex-display;
@include o-justify-content(center);
@include o-align-items(center);
&:hover, &:focus, &:active {
color: @o-we-color-text-light;
color: $o-we-color-text-light;
}
i {
@@ -29,15 +29,15 @@
&.open > a {
color: white;
background-color: @o-we-color-dark;
background-color: $o-we-color-dark;
}
.dropdown-menu {
.o-position-absolute(@odoo-navbar-height - 1, -1px, -1px, -1px);
@include o-position-absolute($odoo-navbar-height - 1, -1px, -1px, -1px);
margin: 0;
border-radius: 0;
overflow: auto;
background-color: @o-we-color-dark;
background-color: $o-we-color-dark;
> li {
margin: 0;
@@ -49,8 +49,8 @@
display: none;
background-size: cover;
padding-top: 50%;
border: 1px solid @o-we-color-light;
border-top: 1px solid @o-we-color-text-normal;
border: 1px solid $o-we-color-light;
border-top: 1px solid $o-we-color-text-normal;
&.logo {
display: block;
@@ -59,7 +59,7 @@
}
&:hover > a {
background-color: @o-we-color-darker;
background-color: $o-we-color-darker;
.o_thumb {
border: 1px solid white;
@@ -67,8 +67,8 @@
}
&.selected > a .o_thumb {
border: 2px solid @odoo-brand-primary;
background-color: @o-we-color-dark;
border: 2px solid $odoo-brand-primary;
background-color: $o-we-color-dark;
}
}
}
@@ -93,17 +93,17 @@ body.o_force_mail_theme_choice {
max-width: 25%;
> a {
.o-transition(all, 0.3s, ease);
@include o-transition(all, 0.3s, ease);
.o_thumb {
display: none;
padding-top: 107%;
border: 1px solid @o-we-color-light;
border-top: 1px solid @o-we-color-text-normal;
box-shadow: 0 5px 10px fade(black, 80%);
border: 1px solid $o-we-color-light;
border-top: 1px solid $o-we-color-text-normal;
box-shadow: 0 5px 10px rgba(black, 0.8);
will-change: transform;
.backface-visibility(hidden);
.o-transition(all, 0.3s);
@include backface-visibility(hidden);
@include o-transition(all, 0.3s);
&.small {
display: block;
@@ -121,10 +121,10 @@ body.o_force_mail_theme_choice {
}
&:hover > a {
background-color: @o-we-color-dark;
background-color: $o-we-color-dark;
.o_thumb {
box-shadow: 0 5px 30px 1px fade(black, 60%);
box-shadow: 0 5px 30px 1px rgba(black, 0.6);
}
}
@@ -135,7 +135,7 @@ body.o_force_mail_theme_choice {
opacity: 0.2;
> .fa {
.o-position-absolute(0, 0, 0, 0);
@include o-position-absolute(0, 0, 0, 0);
text-align: center;
font-size: 50px;
color: white;
addons/mass_mailing/static/src/scss/themes/theme_default.scss
+45 -47
View File
@@ -1,42 +1,40 @@
// lessc@1.4.2
// ============================
// Mass Mailing "Theme Default"
// ============================
// ===== Default Theme palette =====
@o_mm_def_color_alpha: #f5f5f5;
@o_mm_def_color_beta: #ffffff;
@o_mm_def_color_gamma: #706482;
@o_mm_def_color_delta: #464646;
@o_mm_def_color_epsilon: darken(@o_mm_def_color_gamma, 5%);
@o_mm_def_color_zeta: #706482;
@o_mm_def_color_eta: #87a6b5;
$o-mm-def-color-alpha: #f5f5f5;
$o-mm-def-color-beta: #ffffff;
$o-mm-def-color-gamma: #706482;
$o-mm-def-color-delta: #464646;
$o-mm-def-color-epsilon: darken($o-mm-def-color-gamma, 5%);
$o-mm-def-color-zeta: #706482;
$o-mm-def-color-eta: #87a6b5;
// ===== Default Theme variables =====
@o_mm_def_body_width : 600px;
@o_mm_def_body_bobile : 480px;
@o_mm_def_b_radius : 2px;
$o-mm-def-body-width : 600px;
$o-mm-def-body-bobile : 480px;
$o-mm-def-b-radius : 2px;
@o_mm_def_font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@o_mm_def_text_color : @o_mm_def_color_delta;
$o-mm-def-font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$o-mm-def-text-color : $o-mm-def-color-delta;
@o_mm_def_btn_bg : @o_mm_def_color_gamma;
@o_mm_def_btn_text : @o_mm_def_color_beta;
$o-mm-def-btn-bg : $o-mm-def-color-gamma;
$o-mm-def-btn-text : $o-mm-def-color-beta;
// ===== Colors =====
.bg-beta {
background-color: @o_mm_def_color_zeta;
color: @o_mm_def_color_beta;
background-color: $o-mm-def-color-zeta;
color: $o-mm-def-color-beta;
}
.text-beta {
color: @o_mm_def_color_zeta;
color: $o-mm-def-color-zeta;
}
.bg-delta {
background-color: @o_mm_def_color_eta;
background-color: $o-mm-def-color-eta;
}
.bg-gray-lighter {
background-color: @o_mm_def_color_alpha;
background-color: $o-mm-def-color-alpha;
}
td {
@@ -51,7 +49,7 @@ td {
box-sizing: content-box;
width: 94%;
min-height: 100%;
background-color: @o_mm_def_color_alpha;
background-color: $o-mm-def-color-alpha;
padding: 0 3%;
// Forces on <p/> and <hx/> elements as several mail clients does not
@@ -60,8 +58,8 @@ td {
font-size: 14px; // force bootstrap default
}
&, p, h1, h2, h3, h4, h5, h6 {
font-family: @o_mm_def_font;
color: lighten(@o_mm_def_text_color, 20%);
font-family: $o-mm-def-font;
color: lighten($o-mm-def-text-color, 20%);
}
> .o_mail_wrapper {
@@ -71,9 +69,9 @@ td {
// same width
.o_mail_wrapper_td {
width: @o_mm_def_body_width;
border: 1px solid darken(@o_mm_def_color_alpha, 2%);
background-color: @o_mm_def_color_beta;
width: $o-mm-def-body-width;
border: 1px solid darken($o-mm-def-color-alpha, 2%);
background-color: $o-mm-def-color-beta;
}
}
}
@@ -81,27 +79,27 @@ td {
// ===== Snippets (general) =====
.o_mail_snippet_general {
width: 100%;
max-width: @o_mm_def_body_width; // should not be necessary thanks to mail wrapper
max-width: $o-mm-def-body-width; // should not be necessary thanks to mail wrapper
margin: 0 auto;
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: @o_mm_def_text_color;
color: $o-mm-def-text-color;
}
.btn.btn-primary {
-webkit-user-select: none;
color: @o_mm_def_btn_text;
color: $o-mm-def-btn-text;
border: none;
text-decoration: none;
font-weight: normal;
font-family: @o_mm_def_font;
font-family: $o-mm-def-font;
cursor: pointer;
border-radius: @o_mm_def_b_radius;
background-color: @o_mm_def_btn_bg;
border-radius: $o-mm-def-b-radius;
background-color: $o-mm-def-btn-bg;
}
a, .btn.btn-link {
color: @o_mm_def_color_epsilon;
color: $o-mm-def-color-epsilon;
font-weight: bold;
text-decoration: none !important;
@@ -118,20 +116,20 @@ td {
.separator {
height: 2px;
background-color: @o_mm_def_color_alpha;
background-color: $o-mm-def-color-alpha;
}
.bg-beta {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: @o_mm_def_color_beta;
color: $o-mm-def-color-beta;
}
.btn.btn-primary {
background-color: @o_mm_def_color_eta;
background-color: $o-mm-def-color-eta;
}
a, .btn.btn-link {
color: @o_mm_def_color_eta;
color: $o-mm-def-color-eta;
}
}
@@ -165,7 +163,7 @@ td {
}
.o_mail_block_steps {
background-color: @o_mm_def_color_alpha;
background-color: $o-mm-def-color-alpha;
}
.o_mail_block_two_cols, .o_mail_block_three_cols {
@@ -196,7 +194,7 @@ td {
margin-left: 20px;
margin-right: 20px;
.o_mail_snippet_general{
background: darken(@o_mm_def_color_alpha, 2%);
background: darken($o-mm-def-color-alpha, 2%);
}
}
@@ -208,7 +206,7 @@ td {
.o_mail_block_comparison_table {
.separator {
height: 1px;
background-color: darken(@o_mm_def_color_alpha, 15%);
background-color: darken($o-mm-def-color-alpha, 15%);
}
table table {
td, th {
@@ -227,7 +225,7 @@ td {
.o_mail_block_discount2 {
.o_code {
padding: 5px 10px;
background: @o_mm_def_color_alpha;
background: $o-mm-def-color-alpha;
border-radius: 3px;
font-family: monospace;
}
@@ -235,7 +233,7 @@ td {
.o_mail_block_footer_social {
.o_mail_table_styles {
border-top: 2px solid @o_mm_def_color_alpha;
border-top: 2px solid $o-mm-def-color-alpha;
padding-top: 20px;
padding-bottom: 20px;
}
@@ -253,7 +251,7 @@ td {
.o_mail_footer_copy {
font-size: 9px;
font-weight: bold;
color: lighten(@o_mm_def_text_color, 30%);
color: lighten($o-mm-def-text-color, 30%);
}
&.o_mail_footer_social_center {
@@ -309,15 +307,15 @@ td {
}
// ===== Mobile =====
@media screen and (max-width: @o_mm_def_body_bobile) {
@media screen and (max-width: $o-mm-def-body-bobile) {
.o_mail_col_mv {
display: block!important;
max-width: @o_mm_def_body_bobile!important;
max-width: $o-mm-def-body-bobile!important;
width: 100%!important;
}
.o_mail_table_styles {
max-width: @o_mm_def_body_bobile!important;
max-width: $o-mm-def-body-bobile!important;
width: 100%!important;
}
}
addons/mrp/static/src/scss/mrp_bom_report.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.o_mrp_bom_report_page {
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
margin: 16px auto;
padding: 24px 16px;
.o_mrp_bom_action {
addons/note/static/src/scss/note.scss
+7 -7
View File
@@ -8,7 +8,7 @@
margin-bottom: 0;
}
.oe_form_field.oe_memo {
margin: 0 (@padding-large-horizontal * -1);
margin: 0 ($padding-large-horizontal * -1);
padding: 0;
min-height: 200px;
@@ -18,8 +18,8 @@
}
&.o_form_readonly {
.oe_memo {
padding: @padding-large-horizontal;
border-bottom: 1px solid @legend-border-color;
padding: $padding-large-horizontal;
border-bottom: 1px solid $legend-border-color;
}
}
}
@@ -30,13 +30,13 @@
.o_channel_info {
.o_channel_title {
.o_channel_name {
.o-flex(1, 1, 100%);
@include o-flex(1, 1, 100%);
}
}
.o_note_input_box {
.o-flex-display();
@include o-flex-display;
p {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
}
}
.o_note_save {
@@ -60,4 +60,4 @@
}
}
}
}
}
addons/payment/static/src/scss/payment_acquirer.scss
+1 -1
View File
@@ -8,7 +8,7 @@
+ div {
padding-left: 0;
padding-right: @o-kanban-image-width + @o-kanban-inside-hgutter;
padding-right: $o-kanban-image-width + $o-kanban-inside-hgutter;
}
}
addons/payment/static/src/scss/payment_form.scss
+1 -1
View File
@@ -43,7 +43,7 @@
}
.more_option {
.o-position-absolute(@right: 0px, @bottom: -10px);
@include o-position-absolute($right: 0px, $bottom: -10px);
font-size:10px;
}
addons/point_of_sale/static/src/scss/customer_facing_display.scss
+114 -114
View File
@@ -1,8 +1,8 @@
// out: ../css/customer_facing_display.css, sourcemap: false, compress: false
// =========== Variables ===========
@color_gray_lighter: #f6f6f6;
@color_gray_dark: #3E3E3E;
$color-gray-lighter: #f6f6f6;
$color-gray-dark: #3E3E3E;
// =========== Animations ===========
@keyframes item_in {
@@ -17,7 +17,7 @@
}
// =========== MIXINS ===========
.pos-bg() {
@mixin pos-bg {
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
@@ -31,53 +31,53 @@
}
// =========== VENDOR PREFIX ===========
.flex-display() {
@mixin flex-display {
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
}
.flex-direction(@direction){
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
-o-flex-direction: @direction;
flex-direction: @direction;
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
-o-flex-direction: $direction;
flex-direction: $direction;
};
.flex-grow(@grow) {
-webkit-box-flex: @grow;
-webkit-flex-grow: @grow;
-moz-box-flex: @grow;
-ms-flex-positive: @grow;
flex-grow: @grow;
@mixin flex-grow($grow) {
-webkit-box-flex: $grow;
-webkit-flex-grow: $grow;
-moz-box-flex: $grow;
-ms-flex-positive: $grow;
flex-grow: $grow;
}
.flex(@flex) {
-webkit-box-flex: @flex;
-webkit-flex: @flex;
-moz-box-flex: @flex;
-ms-flex: @flex;
flex: @flex;
@mixin flex($flex) {
-webkit-box-flex: $flex;
-webkit-flex: $flex;
-moz-box-flex: $flex;
-ms-flex: $flex;
flex: $flex;
}
.align-items(@align){
-webkit-box-align: @align;
-webkit-align-items: @align;
-moz-box-align: @align;
-ms-flex-align: @align;
-ms-grid-row-align: @align;
align-items: @align;
@mixin align-items($align) {
-webkit-box-align: $align;
-webkit-align-items: $align;
-moz-box-align: $align;
-ms-flex-align: $align;
-ms-grid-row-align: $align;
align-items: $align;
};
.justify-content(@justify){
-webkit-box-pack: @justify;
-webkit-justify-content: @justify;
-moz-box-pack: @justify;
-ms-flex-pack: @justify;
justify-content: @justify;
@mixin justify-content($justify) {
-webkit-box-pack: $justify;
-webkit-justify-content: $justify;
-moz-box-pack: $justify;
-ms-flex-pack: $justify;
justify-content: $justify;
}
.flex-wrap(@wrap){
-webkit-flex-wrap: @wrap;
-ms-flex-wrap: @wrap;
flex-wrap: @wrap;
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@@ -89,28 +89,28 @@ body {
font-smooth: always;
.pos-customer_facing_display {
background-color: @color_gray_lighter;
background-color: $color-gray-lighter;
font-size: 2vw;
font-family: Futura, HelveticaNeue, Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 100%;
height: 100%;
.flex-display();
.flex-direction(row);
@include flex-display;
@include flex-direction(row);
.pos-customer_products, .pos-payment_info {
height: 100%;
padding: 2%;
.flex-display();
.flex-direction(column);
.flex-grow(1);
@include flex-display;
@include flex-direction(column);
@include flex-grow(1);
}
.pos_orderlines {
width: 100%;
height: 100%;
.flex-display();
.flex-direction(column);
@include flex-display;
@include flex-direction(column);
.pos_orderlines_list {
overflow-y: scroll;
@@ -124,10 +124,10 @@ body {
padding: 1%;
border-radius: 0.3vw;
height: auto;
.flex(0 1 auto);
.flex-display();
.flex-direction(row);
.align-items(center);
@include flex(0 1 auto);
@include flex-display;
@include flex-direction(row);
@include align-items(center);
&:last-of-type {
animation: item_in 1s ease;
@@ -155,11 +155,11 @@ body {
text-align: left;
margin-right: 4%;
font-size: 80%;
.flex-grow(1);
@include flex-grow(1);
&:first-child {
margin-right: 2%;
.flex(1 1 1%);
@include flex(1 1 1%);
}
&:nth-child(2) {
@@ -190,36 +190,36 @@ body {
.pos-payment_info {
max-width: 30%;
padding: 2% 2% 1% 2%;
.flex-direction(column);
.justify-content(space-between);
@include flex-direction(column);
@include justify-content(space-between);
.pos-adv, .pos-company_logo {
.pos-bg();
@include pos-bg;
}
.pos-company_logo {
background-image: url(/logo);
margin-bottom: 10%;
.flex(0 0 20%);
@include flex(0 0 20%);
}
.pos-adv {
margin-bottom: 5%;
border-bottom: 10px solid transparent;
box-shadow: 0 1px fade(@color_gray_lighter, 20%);
.flex(1 1 60%);
box-shadow: 0 1px rgba($color-gray-lighter, 0.2);
@include flex(1 1 60%);
}
.pos-payment_info_details{
.pos-total, .pos-paymentlines {
.flex-direction(row);
.flex-display();
.flex-wrap(wrap);
.justify-content(space-between);
.align-items(baseline);
@include flex-direction(row);
@include flex-display;
@include flex-wrap(wrap);
@include justify-content(space-between);
@include align-items(baseline);
> div {
.flex(1 0 48%);
@include flex(1 0 48%);
&:nth-child(even) {
font-weight: bold;
font-size: 120%;
@@ -241,7 +241,7 @@ body {
.pos-odoo_logo_container {
text-align: right;
margin-top: 10%;
.flex(0 1 auto);
@include flex(0 1 auto);
img {
max-width: 40px;
@@ -256,7 +256,7 @@ body {
.pos-customer_facing_display {
font-size: 2vh;
height: 100%;
.flex-direction(column);
@include flex-direction(column);
&:before {
content: "";
@@ -276,7 +276,7 @@ body {
width: 99vw;
margin:0.5vh;
border-width: 0;
.flex-display();
@include flex-display;
}
&.pos-js_no_ADV {
@@ -294,7 +294,7 @@ body {
overflow: hidden;
.pos_orderlines {
.flex(1 0 auto);
@include flex(1 0 auto);
.pos_orderlines_item {
> div:nth-child(2) {
@@ -309,7 +309,7 @@ body {
padding-right: 1.5vh;
height: auto;
.pos_orderlines_item {
box-shadow: 0 .1vh .1vh darken(@color_gray_lighter, 10%);
box-shadow: 0 .1vh .1vh darken($color-gray-lighter, 10%);
margin-bottom: 1vh;
> div {
font-size: 100%;
@@ -324,10 +324,10 @@ body {
overflow: hidden;
padding-top: 0;
min-height: 120px;
.flex(0 1 23vw);
.flex-direction(row);
.align-items(center);
.justify-content(space-between);
@include flex(0 1 23vw);
@include flex-direction(row);
@include align-items(center);
@include justify-content(space-between);
.pos-company_logo {
margin: 0;
@@ -335,12 +335,12 @@ body {
margin-right: 5%;
height: 100%;
padding: 0;
.flex(1 1 20%);
@include flex(1 1 20%);
}
.pos-payment_info_details {
.flex(0 1 50%);
.flex-direction(column);
@include flex(0 1 50%);
@include flex-direction(column);
min-width: 170px;
.pos-total {
@@ -387,7 +387,7 @@ body {
display: none!important;
}
.pos-payment_info_details {
.flex(1 0 100%);
@include flex(1 0 100%);
.pos-total {
font-size: 6vw;
@@ -417,10 +417,10 @@ body {
opacity: 0.1;
background: repeating-linear-gradient(
45deg,
@color_gray_lighter,
@color_gray_lighter 5px,
@color_gray_dark 5px,
@color_gray_dark 10px
$color-gray-lighter,
$color-gray-lighter 5px,
$color-gray-dark 5px,
$color-gray-dark 10px
)!important;
}
@@ -469,42 +469,42 @@ body {
// =========== PALETTE GENERATOR ===========
.palette_variant (
@bg-info: @color_gray_dark,
@text-info: @color_gray_lighter,
@bg-products: @color_gray_lighter,
@text-products: lighten(@color_gray_dark, 10%),
@card-bg: white,
@card-text: @color_gray_dark,
@card-shadow: darken(@bg-products, 30%)) {
$bg-info: $color-gray-dark,
$text-info: $color-gray-lighter,
$bg-products: $color-gray-lighter,
$text-products: lighten($color-gray-dark, 10%),
$card-bg: white,
$card-text: $color-gray-dark,
$card-shadow: darken($bg-products, 30%)) {
.pos-payment_info {
background: @bg-info;
color: @text-info;
background: $bg-info;
color: $text-info;
}
.pos-customer_products {
background: @bg-products;
color: @text-products;
background: $bg-products;
color: $text-products;
.pos_orderlines_list .pos_orderlines_item {
background-color: @card-bg;
color: @card-text;
box-shadow: 0 .1vh .1vh @card-shadow;
background-color: $card-bg;
color: $card-text;
box-shadow: 0 .1vh .1vh $card-shadow;
div:nth-child(2) {
border-color: fade(@card-text, 30%);
border-color: rgba($card-text, 0.3);
}
}
}
@media all and (orientation: portrait) {
&:before {
background: @bg-info;
background: $bg-info;
}
}
// Editor dropdown buttons
#oe_manipulators .oe_overlay > .oe_overlay_options .snippet-option-pos_palette > ul > li > & {
background: @bg-products!important;
background: $bg-products!important;
&:after {
content: "";
@@ -513,28 +513,28 @@ body {
right: 0;
bottom:0;
left: 50px;
background: @bg-info;
background: $bg-info;
}
&:before {
text-shadow: 0 0 1px (#fff - @bg-products);
text-shadow: 0 0 1px (#fff - $bg-products);
}
}
};
// =========== PALETTE ===========
.pos-palette_01 { .palette_variant(); }
.pos-palette_02 { .palette_variant( #364152, #e6e7e8, #ecf2f6, #364152, white, @color_gray_dark, #364152 ); }
.pos-palette_03 { .palette_variant( #1BA39C, @color_gray_lighter, #ececec ); }
.pos-palette_04 { .palette_variant( #0b7b6c, @color_gray_lighter, #efeeec); }
.pos-palette_05 { .palette_variant( #E26868, @color_gray_lighter, #ececec ); }
.pos-palette_06 { .palette_variant( #9E373B, @color_gray_lighter); }
.pos-palette_07 { .palette_variant( #ce9934, white, #ececec ); }
.pos-palette_08 { .palette_variant( #a48c77, @color_gray_lighter, #ececec ); }
.pos-palette_01 { @include palette-variant; }
.pos-palette_02 { @include palette-variant(#364152, #e6e7e8, #ecf2f6, #364152, white, $color-gray-dark, #364152 ); }
.pos-palette_03 { @include palette-variant(#1BA39C, $color-gray-lighter, #ececec ); }
.pos-palette_04 { @include palette-variant(#0b7b6c, $color-gray-lighter, #efeeec); }
.pos-palette_05 { @include palette-variant(#E26868, $color-gray-lighter, #ececec ); }
.pos-palette_06 { @include palette-variant(#9E373B, $color-gray-lighter); }
.pos-palette_07 { @include palette-variant(#ce9934, white, #ececec ); }
.pos-palette_08 { @include palette-variant(#a48c77, $color-gray-lighter, #ececec ); }
.pos-palette_09 { .palette_variant( linear-gradient(30deg, #014d43, #127e71), @color_gray_lighter, #ececec ); }
.pos-palette_10 { .palette_variant( linear-gradient(30deg, #e2316c, #ea4c89), white, #ececec ); }
.pos-palette_11 { .palette_variant( linear-gradient(30deg, #362b3d, #5b4a63), white, #ececec ); }
.pos-palette_09 { @include palette-variant(linear-gradient(30deg, #014d43, #127e71), $color-gray-lighter, #ececec ); }
.pos-palette_10 { @include palette-variant(linear-gradient(30deg, #e2316c, #ea4c89), white, #ececec ); }
.pos-palette_11 { @include palette-variant(linear-gradient(30deg, #362b3d, #5b4a63), white, #ececec ); }
.pos-palette_12 { .palette_variant( #434343, #e6e6e6, #5b5b5b, #bdb9b9, #f5f5f5); }
.pos-palette_13 { .palette_variant( linear-gradient(30deg, #1a1b1f, #3d3f45), white, #a2a2ab, @color_gray_lighter, @color_gray_lighter); }
.pos-palette_12 { @include palette-variant(#434343, #e6e6e6, #5b5b5b, #bdb9b9, #f5f5f5); }
.pos-palette_13 { @include palette-variant(linear-gradient(30deg, #1a1b1f, #3d3f45), white, #a2a2ab, $color-gray-lighter, $color-gray-lighter); }
addons/portal/static/src/scss/bootstrap.extend.scss
Vendored
+4 -4
View File
@@ -11,7 +11,7 @@
text-align: justify;
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
text-align: inherit;
}
@@ -28,7 +28,7 @@
text-align: justify;
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
text-align: inherit;
}
@@ -45,7 +45,7 @@
text-align: justify;
}
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
text-align: inherit;
}
@@ -62,7 +62,7 @@
text-align: justify;
}
}
@media (min-width: @screen-lg-min) {
@media (min-width: $screen-lg-min) {
.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
text-align: inherit;
}
addons/portal/static/src/scss/portal.scss
+14 -14
View File
@@ -3,10 +3,10 @@
/// rules.
///
// Resize and vertically align navbar’s items relative to @navbar-height
.o-w-fill-navbar(@ratio: 0.8) {
height: round(@navbar-height * @ratio);
margin-top: round(@navbar-height * (1 - @ratio) / 2);
// Resize and vertically align navbar’s items relative to $navbar-height
@mixin o-w-fill-navbar($ratio: 0.8) {
height: round($navbar-height * $ratio);
margin-top: round($navbar-height * (1 - $ratio) / 2);
}
// Frontend general
@@ -30,7 +30,7 @@ header {
padding: 0 15px;
img {
.o-w-fill-navbar();
@include o-w-fill-navbar;
}
}
}
@@ -38,9 +38,9 @@ header {
margin-bottom: 0;
ul.nav > li {
&.divider {
.o-w-fill-navbar();
border-right: 1px solid @navbar-default-link-disabled-color;
@media (max-width: @screen-xs-max) {
@include o-w-fill-navbar;
border-right: 1px solid $navbar-default-link-disabled-color;
@media (max-width: $screen-xs-max) {
display: none;
}
}
@@ -50,7 +50,7 @@ header {
}
}
.nav.navbar-nav.pull-right {
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
float: none!important;
}
}
@@ -146,15 +146,15 @@ hr {
// Images spacing
img, .media_iframe_video, .o_image {
&.pull-right {
margin-left: @grid-gutter-width / 2;
margin-left: $grid-gutter-width / 2;
}
&.pull-left {
margin-right: @grid-gutter-width / 2;
margin-right: $grid-gutter-width / 2;
}
}
img {
// Make all images responsive by default but with inline-block display
.img-responsive(inline-block);
@include img-responsive(inline-block);
}
// Others
@@ -170,7 +170,7 @@ img {
width: 100%;
}
div {
.o-position-absolute(@left: 0, @bottom: 0);
@include o-position-absolute($left: 0, $bottom: 0);
background-color: rgba(0, 0, 0, 0.4);
opacity: 0.85;
width: 100%;
@@ -328,7 +328,7 @@ img {
.o_portal_chatter_message_title {
p {
font-size:85%;
color:@odoo-main-color-muted;
color:$odoo-main-color-muted;
margin: 0px;
}
}
addons/project/static/src/scss/project_dashboard.scss
+5 -5
View File
@@ -1,7 +1,7 @@
.o_kanban_view.o_kanban_dashboard.o_project_kanban {
.o_project_kanban_boxes {
.o-flex-display();
.o-flex-flow(row, nowrap);
@include o-flex-display;
@include o-flex-flow(row, nowrap);
.o_project_kanban_box {
position: relative;
@@ -32,7 +32,7 @@
font-size: small;
font-weight: 400;
margin-left: 4px;
.o-hover-opacity(0.5, 1);
@include o-hover-opacity(0.5, 1);
&:before {
content: "/ ";
@@ -66,10 +66,10 @@
outline: 2px solid transparent;
box-shadow: 0px 0px 1px 1px #ccc;
&.o_selected {
outline-color: @odoo-brand-optional;
outline-color: $odoo-brand-optional;
}
> img {
.o-position-absolute(@top: 0; @left: 0; @right: 0; @bottom: 0);
@include o-position-absolute($top: 0, $left: 0, $right: 0, $bottom: 0);
margin: auto;
max-height: 100%;
max-width: 100%;
addons/sale_timesheet/static/src/scss/sale_timesheet.scss
+4 -4
View File
@@ -2,7 +2,7 @@
.o_timesheet_plan_sale_timesheet {
[type='action'] {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
cursor: pointer;
}
@@ -47,7 +47,7 @@
cursor: pointer;
}
.o_progress_non_billable_project {
background-color: @brand-primary;
background-color: $brand-primary;
color: white;
cursor: pointer;
}
@@ -82,14 +82,14 @@
text-align: center;
}
th.o_right_bordered, td.o_right_bordered {
border-right: 2px solid @odoo-brand-optional;
border-right: 2px solid $odoo-brand-optional;
text-align: center;
}
.o_timesheet_forecast_sale_order{
font-weight: bold;
& > td:first-child {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
}
.o_timesheet_forecast_sale_order_line{
addons/sales_team/static/src/scss/sales_team_dashboard.scss
+3 -3
View File
@@ -1,7 +1,7 @@
@dashboard-bg-color: white;
$dashboard-bg-color: white;
.o_kanban_view.o_kanban_dashboard.o_salesteam_kanban {
@sale-table-spacing: 10px;
$sale-table-spacing: 10px;
.o_kanban_record {
.o_sales_team_kanban_graph_section {
@@ -27,7 +27,7 @@
}
g.tick.major {
// Don't know why, but leads to strange bold text
// stroke: @odoo-brand-primary;
// stroke: $odoo-brand-primary;
line {
display: none;
addons/stock/static/src/scss/stock_traceability_report.scss
+14 -14
View File
@@ -1,16 +1,16 @@
.o_stock_reports_lines(@border-width: 5px, @font-weight: inherit, @border-top-style: initial, @border-bottom-style: initial) {
border-width: @border-width;
@mixin o-stock-reports-lines($border-width: 5px, $font-weight: inherit, $border-top-style: initial, $border-bottom-style: initial) {
border-width: $border-width;
border-left-style: hidden;
border-right-style: hidden;
font-weight: @font-weight;
border-top-style: @border-top-style;
border-bottom-style: @border-bottom-style;
font-weight: $font-weight;
border-top-style: $border-top-style;
border-bottom-style: $border-bottom-style;
}
.o_stock_reports_body_print {
background-color: white;
color: black;
.o_stock_reports_level0 {
.o_stock_reports_lines(@border-width: 1px, @font-weight: bold, @border-top-style: solid, @border-bottom-style: groove);
@include o-stock-reports-lines($border-width: 1px, $font-weight: bold, $border-top-style: solid, $border-bottom-style: groove);
}
}
@@ -20,16 +20,16 @@
}
}
.o_stock_reports_page {
@media (max-width: @screen-md-min) {
@media (max-width: $screen-md-min) {
overflow-x:scroll;
}
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
&.o_stock_reports_no_print {
padding-bottom: 125px;
margin: @odoo-horizontal-padding auto;
.o-webclient-padding(@top: @odoo-sheet-vpadding, @bottom: @odoo-sheet-vpadding);
margin: $odoo-horizontal-padding auto;
@include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding);
.o_stock_reports_level0 {
.o_stock_reports_lines(@border-width: 1px, @font-weight: normal, @border-top-style: solid, @border-bottom-style: groove);
@include o-stock-reports-lines($border-width: 1px, $font-weight: normal, $border-top-style: solid, $border-bottom-style: groove);
}
.o_stock_reports_table {
white-space: nowrap;
@@ -74,16 +74,16 @@
border-bottom: thin groove;
}
.o_stock_reports_level1 {
.o_stock_reports_lines(@border-width: 2px, @border-top-style: hidden, @border-bottom-style: solid);
@include o-stock-reports-lines($border-width: 2px, $border-top-style: hidden, $border-bottom-style: solid);
}
.o_stock_reports_level2 {
.o_stock_reports_lines(@border-width: 1px, @border-top-style: solid, @border-bottom-style: solid);
@include o-stock-reports-lines($border-width: 1px, $border-top-style: solid, $border-bottom-style: solid);
> td > span:last-child {
margin-left: 25px;
}
}
.o_stock_reports_default_style {
.o_stock_reports_lines(@border-width: 0px, @border-top-style: solid, @border-bottom-style: solid);
@include o-stock-reports-lines($border-width: 0px, $border-top-style: solid, $border-bottom-style: solid);
> td > span:last-child {
margin-left: 50px;
}
addons/theme_default/static/src/scss/colors.scss
+74 -74
View File
@@ -1,95 +1,95 @@
/* Clean Colors */
@color-blue: #3498DB;
@color-turquoise: #1ABC9C;
@color-green: #2ECC71;
@color-yellow: #F1C40F;
@color-orange: #E67E22;
@color-red: #E74C3C;
@color-pink: #f74b94;
@color-purple: #9B59B6;
@color-brown: #7b5844;
$color-blue: #3498DB;
$color-turquoise: #1ABC9C;
$color-green: #2ECC71;
$color-yellow: #F1C40F;
$color-orange: #E67E22;
$color-red: #E74C3C;
$color-pink: #f74b94;
$color-purple: #9B59B6;
$color-brown: #7b5844;
@color-blue-dark: #2980B9;
@color-turquoise-dark: #16A085;
@color-green-dark: #27AE60;
@color-yellow-dark: #f3ac12;
@color-orange-dark: #D35400;
@color-red-dark: #C0392B;
@color-pink-dark: #ea3884;
@color-purple-dark: #8E44AD;
@color-brown-dark: #604434;
$color-blue-dark: #2980B9;
$color-turquoise-dark: #16A085;
$color-green-dark: #27AE60;
$color-yellow-dark: #f3ac12;
$color-orange-dark: #D35400;
$color-red-dark: #C0392B;
$color-pink-dark: #ea3884;
$color-purple-dark: #8E44AD;
$color-brown-dark: #604434;
@color-blue-light: lighten(@color-blue, 20%);
@color-turquoise-light: lighten(@color-turquoise, 20%);
@color-green-light: lighten(@color-green, 20%);
@color-yellow-light: lighten(@color-yellow, 20%);
@color-orange-light: lighten(@color-orange, 20%);
@color-red-light: lighten(@color-red, 20%);
@color-pink-light: lighten(@color-pink, 20%);
@color-purple-light: lighten(@color-purple, 20%);
@color-brown-light: lighten(@color-brown, 20%);
$color-blue-light: lighten($color-blue, 20%);
$color-turquoise-light: lighten($color-turquoise, 20%);
$color-green-light: lighten($color-green, 20%);
$color-yellow-light: lighten($color-yellow, 20%);
$color-orange-light: lighten($color-orange, 20%);
$color-red-light: lighten($color-red, 20%);
$color-pink-light: lighten($color-pink, 20%);
$color-purple-light: lighten($color-purple, 20%);
$color-brown-light: lighten($color-brown, 20%);
@color-clouds: #ECF0F1;
@color-silver: #BDC3C7;
@color-concrete: #95A5A6;
@color-stone: #7F8C8D;
@color-asphalt: #34495E;
@color-midnight: #2C3E50;
$color-clouds: #ECF0F1;
$color-silver: #BDC3C7;
$color-concrete: #95A5A6;
$color-stone: #7F8C8D;
$color-asphalt: #34495E;
$color-midnight: #2C3E50;
@color-concrete-dark: #445b5c;
$color-concrete-dark: #445b5c;
/* +++++ NEW COLORS +++++ */
@color-wind: #f7f7f7;
@color-clay: #e1dcd5;
@color-sand: #c5bcb1;
@color-beach: #f3bf91;
@color-forest: #254c3a;
@color-twilight: #3b2c50;
@color-burgundy: #8e362d;
@color-marine: #212d3a;
$color-wind: #f7f7f7;
$color-clay: #e1dcd5;
$color-sand: #c5bcb1;
$color-beach: #f3bf91;
$color-forest: #254c3a;
$color-twilight: #3b2c50;
$color-burgundy: #8e362d;
$color-marine: #212d3a;
/* GRAYS --------------------------------------------------------- */
@gray-darker: lighten(#000, 20%);
@gray-dark: lighten(#000, 40%);
@gray: lighten(#000, 55%);
@gray-light: lighten(#000, 70%);
@gray-lighter: lighten(#000, 80%);
$gray-darker: lighten(#000, 20%);
$gray-dark: lighten(#000, 40%);
$gray: lighten(#000, 55%);
$gray-light: lighten(#000, 70%);
$gray-lighter: lighten(#000, 80%);
/* Backgrounds Colors ------------------------------------------------*/
@bg-blue: background(@color-blue);
@bg-turquoise: background(@color-turquoise);
@bg-green: background(@color-green);
@bg-yellow: background(@color-yellow);
@bg-orange: background(@color-orange);
@bg-red: background(@color-red);
@bg-pink: background(@color-pink);
@bg-purple: background(@color-purple);
@bg-brown: background(@color-brown);
$bg-blue: background($color-blue);
$bg-turquoise: background($color-turquoise);
$bg-green: background($color-green);
$bg-yellow: background($color-yellow);
$bg-orange: background($color-orange);
$bg-red: background($color-red);
$bg-pink: background($color-pink);
$bg-purple: background($color-purple);
$bg-brown: background($color-brown);
/* ---- Default Color HTML Class ---- */
.bg-blue { background-color: @color-blue;}
.bg-turquoise { background-color: @color-turquoise;}
.bg-green { background-color: @color-green;}
.bg-yellow { background-color: @color-yellow;}
.bg-orange { background-color: @color-orange;}
.bg-red { background-color: @color-red;}
.bg-pink { background-color: @color-pink;}
.bg-purple { background-color: @color-purple;}
.bg-brown { background-color: @color-brown;}
.bg-blue { background-color: $color-blue;}
.bg-turquoise { background-color: $color-turquoise;}
.bg-green { background-color: $color-green;}
.bg-yellow { background-color: $color-yellow;}
.bg-orange { background-color: $color-orange;}
.bg-red { background-color: $color-red;}
.bg-pink { background-color: $color-pink;}
.bg-purple { background-color: $color-purple;}
.bg-brown { background-color: $color-brown;}
.text-blue { color: @color-blue;}
.text-turquoise { color: @color-turquoise;}
.text-green { color: @color-green;}
.text-yellow { color: @color-yellow;}
.text-orange { color: @color-orange;}
.text-red { color: @color-red;}
.text-pink { color: @color-pink;}
.text-purple { color: @color-purple;}
.text-brown { color: @color-brown;}
.text-blue { color: $color-blue;}
.text-turquoise { color: $color-turquoise;}
.text-green { color: $color-green;}
.text-yellow { color: $color-yellow;}
.text-orange { color: $color-orange;}
.text-red { color: $color-red;}
.text-pink { color: $color-pink;}
.text-purple { color: $color-purple;}
.text-brown { color: $color-brown;}
addons/theme_default/static/src/scss/option_color_amethyst.scss
+26 -26
View File
@@ -1,77 +1,77 @@
/* GRAYS --------------------------------------------------------- */
@gray-darker: lighten(#000, 30%);
$gray-darker: lighten(#000, 30%);
/* COLORS --------------------------------------------------------- */
@color-primary: @color-purple;
@color-success: @color-purple-dark;
@color-info: @color-twilight;
@color-warning: @color-red-dark;
@color-danger: @color-midnight;
$color-primary: $color-purple;
$color-success: $color-purple-dark;
$color-info: $color-twilight;
$color-warning: $color-red-dark;
$color-danger: $color-midnight;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-clouds;
background-color: $color-clouds;
}
.bg-success {
background-color: @color-purple;
background-color: $color-purple;
}
.bg-info {
background-color: @color-twilight;
background-color: $color-twilight;
}
.bg-warning {
background-color: @color-purple-dark;
background-color: $color-purple-dark;
}
.bg-danger {
background-color: @color-midnight;
background-color: $color-midnight;
}
/* TEXTS & LINKS --------------------------------------------------- */
@text-muted: @color-primary;
@link-color: @color-primary;
@link-hover-color: @color-success;
$text-muted: $color-primary;
$link-color: $color-primary;
$link-hover-color: $color-success;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-silver;
@btn-success-bg: @color-concrete;
@btn-info-bg: @color-purple;
@btn-warning-bg: @color-purple-light;
@btn-danger-bg: @color-red;
$btn-primary-bg: $color-silver;
$btn-success-bg: $color-concrete;
$btn-info-bg: $color-purple;
$btn-warning-bg: $color-purple-light;
$btn-danger-bg: $color-red;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-twilight; opacity: 0.85;}
.bg-transparent-color { background: $color-twilight; opacity: 0.85;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-concrete-dark;
color: @gray-light;
background-color: $color-concrete-dark;
color: $gray-light;
}
footer ul li a {
color: @color-clouds;
color: $color-clouds;
}
footer ul li a:hover {
color: white;
text-decoration: none;
}
footer h4 {
color: @gray-lighter;
color: $gray-lighter;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @color-concrete;
color: $color-concrete;
}
addons/theme_default/static/src/scss/option_color_cobalt.scss
+26 -26
View File
@@ -1,74 +1,74 @@
/* COLORS --------------------------------------------------------- */
@color-primary: @color-blue;
@color-success: @color-turquoise;
@color-info: @color-green;
@color-warning: @color-asphalt;
@color-danger: @color-midnight;
$color-primary: $color-blue;
$color-success: $color-turquoise;
$color-info: $color-green;
$color-warning: $color-asphalt;
$color-danger: $color-midnight;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-wind;
background-color: $color-wind;
}
.bg-success {
background-color: @color-silver;
background-color: $color-silver;
}
.bg-info {
background-color: @color-blue;
background-color: $color-blue;
}
.bg-warning {
background-color: @color-blue-dark;
background-color: $color-blue-dark;
}
.bg-danger {
background-color: @color-asphalt;
background-color: $color-asphalt;
}
/* TEXTS & LINKS --------------------------------------------------- */
@text-muted: @color-primary;
@link-color: @color-primary;
@link-hover-color: @color-info;
$text-muted: $color-primary;
$link-color: $color-primary;
$link-hover-color: $color-info;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-blue;
@btn-success-bg: @color-turquoise;
@btn-info-bg: @color-green;
@btn-warning-bg: @color-orange;
@btn-danger-bg: @color-red;
$btn-primary-bg: $color-blue;
$btn-success-bg: $color-turquoise;
$btn-info-bg: $color-green;
$btn-warning-bg: $color-orange;
$btn-danger-bg: $color-red;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-blue-dark; opacity: 0.9;}
.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-midnight;
color: @gray;
background-color: $color-midnight;
color: $gray;
}
footer ul li a {
color: @color-silver;
color: $color-silver;
}
footer ul li a:hover {
color: @color-clouds;
color: $color-clouds;
text-decoration: none;
}
footer h4 {
color: @color-stone;
color: $color-stone;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @gray-light;
color: $gray-light;
}
addons/theme_default/static/src/scss/option_color_emerald.scss
+25 -25
View File
@@ -1,73 +1,73 @@
/* COLORS --------------------------------------------------------- */
@color-primary: @color-green;
@color-success: @color-turquoise;
@color-info: @color-turquoise-dark;
@color-warning: @color-asphalt;
@color-danger: @color-midnight;
$color-primary: $color-green;
$color-success: $color-turquoise;
$color-info: $color-turquoise-dark;
$color-warning: $color-asphalt;
$color-danger: $color-midnight;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-wind;
background-color: $color-wind;
}
.bg-success {
background-color: @color-silver;
background-color: $color-silver;
}
.bg-info {
background-color: @color-green-dark;
background-color: $color-green-dark;
}
.bg-warning {
background-color: @color-green;
background-color: $color-green;
}
.bg-danger {
background-color: @color-forest;
background-color: $color-forest;
}
/* TEXTS & LINKS --------------------------------------------------- */
@text-muted: @color-success;
@link-color: @color-success;
@link-hover-color: @color-primary;
$text-muted: $color-success;
$link-color: $color-success;
$link-hover-color: $color-primary;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-green;
@btn-success-bg: @color-turquoise;
@btn-info-bg: @color-blue;
@btn-warning-bg: @color-orange;
@btn-danger-bg: @color-red;
$btn-primary-bg: $color-green;
$btn-success-bg: $color-turquoise;
$btn-info-bg: $color-blue;
$btn-warning-bg: $color-orange;
$btn-danger-bg: $color-red;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-green-dark; opacity: 0.9;}
.bg-transparent-color { background: $color-green-dark; opacity: 0.9;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-concrete-dark;
color: @gray;
background-color: $color-concrete-dark;
color: $gray;
}
footer ul li a {
color: @color-clouds;
color: $color-clouds;
}
footer ul li a:hover {
color: white;
text-decoration: none;
}
footer h4 {
color: @color-silver;
color: $color-silver;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @color-clouds;
color: $color-clouds;
}
addons/theme_default/static/src/scss/option_color_gold.scss
+25 -25
View File
@@ -1,75 +1,75 @@
/* COLORS --------------------------------------------------------- */
@color-primary: @color-orange;
@color-success: @color-red;
@color-info: @color-yellow-dark;
@color-warning: @color-red-dark;
@color-danger: @color-orange-dark;
$color-primary: $color-orange;
$color-success: $color-red;
$color-info: $color-yellow-dark;
$color-warning: $color-red-dark;
$color-danger: $color-orange-dark;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-sand;
background-color: $color-sand;
}
.bg-success {
background-color: @color-yellow;
background-color: $color-yellow;
}
.bg-info {
background-color: @color-orange;
background-color: $color-orange;
}
.bg-warning {
background-color: @color-yellow-dark;
background-color: $color-yellow-dark;
}
.bg-danger {
background-color: @color-orange-dark;
background-color: $color-orange-dark;
}
/* TEXTS & LINKS ------------------------------------------------------- */
@text-muted: @gray;
@link-color: @color-info;
@link-hover-color: @color-primary;
$text-muted: $gray;
$link-color: $color-info;
$link-hover-color: $color-primary;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-yellow;
@btn-success-bg: @color-orange;
@btn-info-bg: @color-yellow-dark;
@btn-warning-bg: @color-orange-dark;
@btn-danger-bg: @color-red-dark;
$btn-primary-bg: $color-yellow;
$btn-success-bg: $color-orange;
$btn-info-bg: $color-yellow-dark;
$btn-warning-bg: $color-orange-dark;
$btn-danger-bg: $color-red-dark;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-orange-dark; opacity: 0.85;}
.bg-transparent-color { background: $color-orange-dark; opacity: 0.85;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-orange-dark;
background-color: $color-orange-dark;
color: white;
}
footer ul li a {
color: @color-beach;
color: $color-beach;
}
footer ul li a:hover {
color: @color-yellow;
color: $color-yellow;
text-decoration: none;
}
footer h4 {
color: @color-beach;
color: $color-beach;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @color-beach;
color: $color-beach;
}
addons/theme_default/static/src/scss/option_color_ruby.scss
+26 -26
View File
@@ -1,78 +1,78 @@
/* GRAYS --------------------------------------------------------- */
@gray: lighten(#000, 50%);
$gray: lighten(#000, 50%);
/* COLORS --------------------------------------------------------- */
@color-primary: @color-red;
@color-success: @color-red-dark;
@color-info: @color-orange;
@color-warning: @color-purple;
@color-danger: @color-orange-dark;
$color-primary: $color-red;
$color-success: $color-red-dark;
$color-info: $color-orange;
$color-warning: $color-purple;
$color-danger: $color-orange-dark;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-sand;
background-color: $color-sand;
}
.bg-success {
background-color: @color-red;
background-color: $color-red;
}
.bg-info {
background-color: @color-red-dark;
background-color: $color-red-dark;
}
.bg-warning {
background-color: @color-orange;
background-color: $color-orange;
}
.bg-danger {
background-color: @color-orange-dark;
background-color: $color-orange-dark;
}
/* TEXT & LINKS -------------------------------------------------------- */
@text-muted: @gray;
@link-color: @color-primary;
@link-hover-color: @color-success;
$text-muted: $gray;
$link-color: $color-primary;
$link-hover-color: $color-success;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-red;
@btn-success-bg: @color-orange;
@btn-info-bg: @color-yellow-dark;
@btn-warning-bg: @color-orange-dark;
@btn-danger-bg: @color-red-dark;
$btn-primary-bg: $color-red;
$btn-success-bg: $color-orange;
$btn-info-bg: $color-yellow-dark;
$btn-warning-bg: $color-orange-dark;
$btn-danger-bg: $color-red-dark;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-red-dark; opacity: 0.85;}
.bg-transparent-color { background: $color-red-dark; opacity: 0.85;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-burgundy;
color: @gray-lighter;
background-color: $color-burgundy;
color: $gray-lighter;
}
footer ul li a {
color: white;
}
footer ul li a:hover {
color: @color-orange;
color: $color-orange;
text-decoration: none;
}
footer h4 {
color: @color-sand;
color: $color-sand;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @color-red;
color: $color-red;
}
addons/theme_default/static/src/scss/option_color_stone.scss
+25 -25
View File
@@ -1,75 +1,75 @@
/* COLORS --------------------------------------------------------- */
@color-primary: @color-concrete;
@color-success: @color-turquoise;
@color-info: @color-stone;
@color-warning: @color-concrete-dark;
@color-danger: @color-midnight;
$color-primary: $color-concrete;
$color-success: $color-turquoise;
$color-info: $color-stone;
$color-warning: $color-concrete-dark;
$color-danger: $color-midnight;
/* COLORED BG -------------------------------------------------------- */
.bg-primary {
background-color: @color-clouds;
background-color: $color-clouds;
}
.bg-success {
background-color: @color-silver;
background-color: $color-silver;
}
.bg-info {
background-color: @color-stone;
background-color: $color-stone;
}
.bg-warning {
background-color: @color-concrete-dark;
background-color: $color-concrete-dark;
}
.bg-danger {
background-color: @color-asphalt;
background-color: $color-asphalt;
}
/* TEXT & LINKS -------------------------------------------------------- */
@text-muted: @color-primary;
@link-color: @color-primary;
@link-hover-color: @color-info;
$text-muted: $color-primary;
$link-color: $color-primary;
$link-hover-color: $color-info;
/* BUTTONS --------------------------------------------------------- */
@btn-primary-bg: @color-concrete;
@btn-success-bg: @color-blue;
@btn-info-bg: @color-asphalt;
@btn-warning-bg: @color-red;
@btn-danger-bg: @color-red-dark;
$btn-primary-bg: $color-concrete;
$btn-success-bg: $color-blue;
$btn-info-bg: $color-asphalt;
$btn-warning-bg: $color-red;
$btn-danger-bg: $color-red-dark;
.btn .fa {
color: white;}
.btn-default .fa {
color: @gray-dark;}
color: $gray-dark;}
/* TRANSPARENT BG --------------------------------------------------- */
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
.bg-transparent-color { background: @color-stone; opacity: 0.9;}
.bg-transparent-color { background: $color-stone; opacity: 0.9;}
.bg-transparent-shade { background: black; opacity: 0.5;}
/* Footer ----------------------------------------------------------- */
#wrapwrap footer {
background-color: @color-concrete-dark;
color: @color-concrete;
background-color: $color-concrete-dark;
color: $color-concrete;
}
footer ul li a {
color: @color-clouds;
color: $color-clouds;
}
footer ul li a:hover {
color: white;
text-decoration: none;
}
footer h4 {
color: @color-silver;
color: $color-silver;
padding-bottom: 12px;
text-transform: uppercase;
}
footer .fa {
color: @color-clouds;
color: $color-clouds;
}
addons/theme_default/static/src/scss/option_font.scss
+2 -2
View File
@@ -1,2 +1,2 @@
@font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
@font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
addons/theme_default/static/src/scss/option_layout_boxed.scss
+1 -1
View File
@@ -1,5 +1,5 @@
#wrapwrap {
@media (min-width: @screen-sm-min){
@media (min-width: $screen-sm-min){
width: 85%;
margin: 0 auto;
}
addons/web/static/src/scss/animation.scss
+7 -7
View File
@@ -146,16 +146,16 @@
}
/************** MIXINS for ANIMATIONS **************/
.o-display-marked(@content, @top, @left, @color) {
.o-position-absolute(@top: @top, @left: @left);
@mixin o-display-marked($content, $top, $left, $color) {
@include o-position-absolute($top: $top, $left: $left);
font-size: 300px;
font-family: "FontAwesome";
content: @content;
color: @color;
.o-transform-origin();
.o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
content: $content;
color: $color;
@include o-transform-origin;
@include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
@media (max-width: @screen-sm-max) {
@media (max-width: $screen-sm-max) {
left: 40%;
font-size: 30vw;
}
addons/web/static/src/scss/base_settings.scss
+62 -62
View File
@@ -1,20 +1,20 @@
// VARIABLES
@o-base-settings-mobile-tabs-height: 40px;
@o-base-settings-mobile-tabs-overflow-gap: 3%;
$o-base-settings-mobile-tabs-height: 40px;
$o-base-settings-mobile-tabs-overflow-gap: 3%;
// MIXINS
.o-base-settings-horizontal-padding(@padding-base: @padding-small-vertical) {
padding: @padding-base @odoo-horizontal-padding;
@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
padding: $padding-base $odoo-horizontal-padding;
@media (min-width: @screen-lg-min) {
padding-left: @odoo-horizontal-padding*2;;
@media (min-width: $screen-lg-min) {
padding-left: $odoo-horizontal-padding*2;;
}
}
// Use a very specif selector to overwrite generic form-view rules
.o_form_view.o_form_nosheet.o_base_settings {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
padding: 0px;
}
@@ -22,20 +22,20 @@
.o_base_settings {
height: 100%;
@media (max-width: @screen-xs-max) {
.o-flex-flow(column, nowrap);
@media (max-width: $screen-xs-max) {
@include o-flex-flow(column, nowrap);
}
.o_control_panel {
.o_panel {
.o-flex-display();
.o-flex-flow(row, wrap);
margin-bottom: @odoo-sheet-vpadding*0.5;
@include o-flex-display;
@include o-flex-flow(row, wrap);
margin-bottom: $odoo-sheet-vpadding*0.5;
width: 100%;
.title, .o_setting_search {
.o-flex(1, 0, auto);
width: @screen-xs-min*0.5;
@include o-flex(1, 0, auto);
width: $screen-xs-min*0.5;
}
.o_setting_search {
@@ -45,15 +45,15 @@
height: 28px;
padding: 0px;
border: 0px;
border-bottom: 1px solid @gray-lighter-darker;
border-color: @gray;
border-bottom: 1px solid $gray-lighter-darker;
border-color: $gray;
box-shadow: none;
font-weight: 500;
}
.searchIcon {
.o-position-absolute(4px, 0);
color: @gray;
@include o-position-absolute(4px, 0);
color: $gray;
}
}
}
@@ -64,44 +64,44 @@
border: 0;
.btn-primary, .btn-link {
padding: @padding-small-vertical @padding-small-horizontal;
padding: $padding-small-vertical $padding-small-horizontal;
}
.btn-link {
.o-hover-text-color(@link-color, @link-hover-color);
@include o-hover-text-color($link-color, $link-hover-color);
}
}
}
.o_setting_container {
.o-flex-display();
.o-flex(1, 1, auto);
@include o-flex-display;
@include o-flex(1, 1, auto);
overflow: auto;
@media (max-width: @screen-xs-max) {
.o-flex-flow(column, nowrap);
@media (max-width: $screen-xs-max) {
@include o-flex-flow(column, nowrap);
}
.settings_tab {
.o-flex-display();
.o-flex(0, 0, auto);
.o-flex-flow(column, nowrap);
background: @gray-dark;
@include o-flex-display;
@include o-flex(0, 0, auto);
@include o-flex-flow(column, nowrap);
background: $gray-dark;
overflow: auto;
padding-top: @odoo-horizontal-padding*0.5;
padding-top: $odoo-horizontal-padding*0.5;
@media (max-width: @screen-xs-max) {
.o-flex(0, 0, @o-base-settings-mobile-tabs-height);
.o-inline-flex-display();
@media (max-width: $screen-xs-max) {
@include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
@include o-inline-flex-display;
position: relative;
overflow: hidden;
padding: 0;
}
.selected {
background-color: @gray-darker;
box-shadow: inset 3px 0 0 @odoo-brand-optional;
background-color: $gray-darker;
box-shadow: inset 3px 0 0 $odoo-brand-optional;
.app_name {
color: white;
@@ -109,10 +109,10 @@
}
.tab {
.o-flex-display();
padding: 0 @odoo-horizontal-padding*2 0 @odoo-horizontal-padding;
@include o-flex-display;
padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding;
height: 40px;
color: @gray-lighter-darker;
color: $gray-lighter-darker;
font-size: 13px;
line-height: 40px;
cursor: pointer;
@@ -123,17 +123,17 @@
}
// Mobile Tabs
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
display: block;
.o-position-absolute(@left:100%);
.size(auto, @o-base-settings-mobile-tabs-height);
padding: @o-base-settings-mobile-tabs-height*0.25 @o-base-settings-mobile-tabs-height*0.4;
@include o-position-absolute($left:100%);
@include size(auto, $o-base-settings-mobile-tabs-height);
padding: $o-base-settings-mobile-tabs-height*0.25 $o-base-settings-mobile-tabs-height*0.4;
text-align: center;
font-size: 14px;
font-weight: 500;
line-height: inherit;
.o-transition(0.2s, all);
.o-transform(translate3d(0,0,0));
@include o-transition(0.2s, all);
@include o-transform(translate3d(0,0,0));
.app_name {
display: block;
@@ -142,15 +142,15 @@
&:after {
content: '';
background: @odoo-brand-optional;
background: $odoo-brand-optional;
opacity: 0;
.o-position-absolute(auto, 0, 0, 0);
.size(100%, 3px);
.o-transition(0.2s, all);
@include o-position-absolute(auto, 0, 0, 0);
@include size(100%, 3px);
@include o-transition(0.2s, all);
}
&.previous, &.before {
left: 0% - @o-base-settings-mobile-tabs-overflow-gap;
left: 0% - $o-base-settings-mobile-tabs-overflow-gap;
}
&.current {
@@ -167,7 +167,7 @@
}
&.next, &.after {
left: 100% + @o-base-settings-mobile-tabs-overflow-gap;
left: 100% + $o-base-settings-mobile-tabs-overflow-gap;
}
}
}
@@ -175,15 +175,15 @@
.settings {
position: relative;
.o-flex(1, 1, 100%);
background-color: @odoo-view-background-color;
@include o-flex(1, 1, 100%);
background-color: $odoo-view-background-color;
overflow: auto;
> .app_settings_block {
h2 {
margin-bottom: 0;
.o-base-settings-horizontal-padding();
background-color: @gray-lighter;
@include o-base-settings-horizontal-padding;
background-color: $gray-lighter;
font-size: 15px;
font-weight: bold;
@@ -194,30 +194,30 @@
}
.o_settings_container {
max-width: @screen-md-min; // Provide a maximum container size to ensure readability
.o-base-settings-horizontal-padding(0);
max-width: $screen-md-min; // Provide a maximum container size to ensure readability
@include o-base-settings-horizontal-padding(0);
}
}
.settingSearchHeader {
.o-flex-display();
@include o-flex-display;
margin: 30px 0 10px;
.o-base-settings-horizontal-padding();
background-color: @gray-lighter;
@include o-base-settings-horizontal-padding;
background-color: $gray-lighter;
.icon {
.square(25px);
@include square(25px);
margin-right: 10px;
}
.appName {
color: @headings-color;
color: $headings-color;
font-size: 17px;
}
}
.notFound {
color : @text-muted;
color : $text-muted;
text-align: center;
font-size: 25px;
padding-top: 50px;
addons/web/static/src/scss/bootstrap_overridden.scss
Vendored
+75 -75
View File
@@ -3,74 +3,74 @@
// ------------------------------------------------------------------
//== Grid
@grid-gutter-width: @odoo-horizontal-padding*2;
$grid-gutter-width: $odoo-horizontal-padding*2;
//== Colors
@brand-primary: @odoo-brand-primary;
@gray-lighter: @odoo-color-silver;
$brand-primary: $odoo-brand-primary;
$gray-lighter: $odoo-color-silver;
//== Titles
@font-size-h1: @odoo-font-size-base + 13px;
@font-size-h2: @odoo-font-size-base + 7px;
@font-size-h3: @odoo-font-size-base + 3px;
@font-size-h4: @odoo-font-size-base + 2px;
@font-size-h5: @odoo-font-size-base + 1px;
@font-size-h6: @odoo-font-size-base;
$font-size-h1: $odoo-font-size-base + 13px;
$font-size-h2: $odoo-font-size-base + 7px;
$font-size-h3: $odoo-font-size-base + 3px;
$font-size-h4: $odoo-font-size-base + 2px;
$font-size-h5: $odoo-font-size-base + 1px;
$font-size-h6: $odoo-font-size-base;
//== Scaffolding
@body-bg: @odoo-brand-secondary;
@text-color: @odoo-main-text-color;
@link-color: @odoo-brand-optional;
@link-hover-decoration: none;
$body-bg: $odoo-brand-secondary;
$text-color: $odoo-main-text-color;
$link-color: $odoo-brand-optional;
$link-hover-decoration: none;
//== Typography
@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
@font-size-base: @odoo-font-size-base;
@headings-font-weight: bold;
$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
$font-size-base: $odoo-font-size-base;
$headings-font-weight: bold;
//== Components
@component-active-bg: @gray-lighter;
@component-active-color: @odoo-brand-optional;
$component-active-bg: $gray-lighter;
$component-active-color: $odoo-brand-optional;
//== Badges
@badge-bg: @odoo-brand-optional;
@badge-color: white;
@badge-line-height: @line-height-base;
@badge-font-weight: normal;
$badge-bg: $odoo-brand-optional;
$badge-color: white;
$badge-line-height: $line-height-base;
$badge-font-weight: normal;
//== Breadcrumbs
@breadcrumb-active-color: #777777;
@breadcrumb-bg: @odoo-control-panel-background-color;
@breadcrumb-color: #777777;
@breadcrumb-padding-horizontal: 0;
@breadcrumb-padding-vertical: 0;
$breadcrumb-active-color: #777777;
$breadcrumb-bg: $odoo-control-panel-background-color;
$breadcrumb-color: #777777;
$breadcrumb-padding-horizontal: 0;
$breadcrumb-padding-vertical: 0;
//== Buttons
@btn-default-bg: white;
@btn-default-border: #cccccc;
@btn-default-color: @odoo-main-text-color;
@btn-primary-bg: @odoo-brand-optional;
@btn-primary-border: @odoo-brand-optional;
@btn-primary-color: white;
$btn-default-bg: white;
$btn-default-border: #cccccc;
$btn-default-color: $odoo-main-text-color;
$btn-primary-bg: $odoo-brand-optional;
$btn-primary-border: $odoo-brand-optional;
$btn-primary-color: white;
//== Dropdowns
@dropdown-bg: white;
@dropdown-border: @gray-lighter-dark;
@dropdown-divider-bg: @gray-lighter-dark;
@dropdown-link-color: @odoo-main-text-color;
@dropdown-link-hover-color: @gray-dark;
@dropdown-link-hover-bg: @gray-lighter;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
$dropdown-bg: white;
$dropdown-border: $gray-lighter-dark;
$dropdown-divider-bg: $gray-lighter-dark;
$dropdown-link-color: $odoo-main-text-color;
$dropdown-link-hover-color: $gray-dark;
$dropdown-link-hover-bg: $gray-lighter;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-light;
$dropdown-header-color: $gray-light;
//== Modals
@modal-sm: 300px;
@modal-md: 650px;
@modal-lg: 980px;
@modal-inner-padding: @odoo-horizontal-padding;
@modal-title-padding: @odoo-horizontal-padding;
$modal-sm: 300px;
$modal-md: 650px;
$modal-lg: 980px;
$modal-inner-padding: $odoo-horizontal-padding;
$modal-title-padding: $odoo-horizontal-padding;
// Change the z-index of the modal-backdrop elements to be equal to the
// modal elements' ones. Bootstrap does not support multi-modals, and without
@@ -81,32 +81,32 @@
// cannot happen in odoo though as modals are not hidden but removed from
// the DOM and are always put at the end of the body when opened.
//
// Note that the variable @zindex-modal-background may be renamed/removed in
// Note that the variable $zindex-modal-background may be renamed/removed in
// newer versions of bootstrap.
//
// TODO the following code was disabled because it is saas-incompatible
//
// @zindex-modal-background: @zindex-modal;
// $zindex-modal-background: $zindex-modal;
//== Navs
@nav-link-padding: 10px 15px;
@nav-pills-border-radius: 0;
@nav-pills-active-link-hover-color: white;
@nav-pills-active-link-hover-bg: @odoo-brand-optional;
@nav-tabs-active-link-hover-bg: white;
$nav-link-padding: 10px 15px;
$nav-pills-border-radius: 0;
$nav-pills-active-link-hover-color: white;
$nav-pills-active-link-hover-bg: $odoo-brand-optional;
$nav-tabs-active-link-hover-bg: white;
//== Navbar
@navbar-height: @odoo-navbar-height - 2;
@navbar-margin-bottom: 0;
@navbar-inverse-bg: #222222;
@navbar-inverse-link-color: #9d9d9d;
@navbar-inverse-link-hover-bg: #222222;
@navbar-inverse-toggle-hover-bg: #222222;
@navbar-border-radius: 0;
$navbar-height: $odoo-navbar-height - 2;
$navbar-margin-bottom: 0;
$navbar-inverse-bg: #222222;
$navbar-inverse-link-color: #9d9d9d;
$navbar-inverse-link-hover-bg: #222222;
$navbar-inverse-toggle-hover-bg: #222222;
$navbar-border-radius: 0;
//== Tables
@table-bg-accent: #efeff8; // FIXME: expose
@table-bg-hover: darken(@table-bg-accent,5%);
$table-bg-accent: #efeff8; // FIXME: expose
$table-bg-hover: darken($table-bg-accent,5%);
// ------------------------------------------------------------------
// Bootstrap components rules (non exposed features variables)
@@ -121,9 +121,9 @@
//== Buttons
// Mixin to define variations for btn-links and muted btn-links
.o-btn-link-variant(@color, @color-active) {
@mixin o-btn-link-variant($color, $color-active) {
text-transform: none;
.o-hover-text-color(@default-color: @color, @hover-color: @color-active);
@include o-hover-text-color($default-color: $color, $hover-color: $color-active);
&, &:hover, &:focus, &:active, &.active {
border-color: transparent;
@@ -131,30 +131,30 @@
}
&.text-muted, .text-muted {
.o-hover-opacity();
.o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
@include o-hover-opacity;
@include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
}
}
.btn-icon {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-link {
font-weight: @btn-font-weight;
font-weight: $btn-font-weight;
&.btn-default {
.o-btn-link-variant(@text-color, @headings-color);
@include o-btn-link-variant($text-color, $headings-color);
}
&.btn-success, &.text-success {
.o-btn-link-variant(@text-color, @brand-success);
@include o-btn-link-variant($text-color, $brand-success);
}
&.btn-warning, &.text-warning {
.o-btn-link-variant(@text-color, @brand-warning);
@include o-btn-link-variant($text-color, $brand-warning);
}
&.btn-danger, &.text-danger {
.o-btn-link-variant(@text-color, @brand-danger);
@include o-btn-link-variant($text-color, $brand-danger);
}
&.btn-info, &.text-info {
.o-btn-link-variant(@text-color, darken(@brand-info, 20%));
@include o-btn-link-variant($text-color, darken($brand-info, 20%));
}
}
addons/web/static/src/scss/control_panel.scss
+21 -21
View File
@@ -1,11 +1,11 @@
@breadcrumb-height: 30px;
$breadcrumb-height: 30px;
.o_control_panel {
.o-flex-display();
.o-flex-flow(row, wrap);
border-bottom: 1px solid darken(@odoo-control-panel-background-color, 20%);
.o-webclient-padding(@top: 10px, @bottom: 10px);
background-color: @odoo-control-panel-background-color;
@include o-flex-display;
@include o-flex-flow(row, wrap);
border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%);
@include o-webclient-padding($top: 10px, $bottom: 10px);
background-color: $odoo-control-panel-background-color;
> .breadcrumb {
width: 50%;
@@ -13,7 +13,7 @@
font-size: 18px;
> li {
.o-text-overflow(@max-width: 90%);
@include o-text-overflow($max-width: 90%);
> a {
cursor: pointer;
@@ -27,7 +27,7 @@
> .o_cp_searchview {
width: 50%;
min-height: @breadcrumb-height;
min-height: $breadcrumb-height;
}
.btn.o_enable_searchview {
@@ -37,8 +37,8 @@
}
> .o_cp_left {
.o-flex-display();
.o-justify-content(space-between);
@include o-flex-display;
@include o-justify-content(space-between);
width: 50%;
margin-top: 5px;
@@ -56,10 +56,10 @@
}
.o_form_binary_form span {
padding: 3px 25px;
color: @btn-default-color;
color: $btn-default-color;
}
.o_form_binary_form:hover {
background-color: @table-bg-hover;
background-color: $table-bg-hover;
}
}
.o_sidebar_delete_attachment {
@@ -72,7 +72,7 @@
}
> .o_cp_right {
.o-flex-display();
@include o-flex-display;
width: 50%;
margin-top: 5px;
@@ -80,11 +80,11 @@
margin: auto 0 auto auto;
padding-left: 5px;
text-align: center;
.user-select(none);
@include user-select(none);
> div {
.o-flex-display();
.o-align-items(center);
@include o-flex-display;
@include o-align-items(center);
}
.o_pager_counter {
@@ -93,24 +93,24 @@
}
> .o_cp_switch_buttons > .btn:first-child {
margin-left: @odoo-horizontal-padding;
margin-left: $odoo-horizontal-padding;
}
}
}
.o_x2m_control_panel {
.o-flex-display();
.o-flex-flow(row, wrap);
@include o-flex-display;
@include o-flex-flow(row, wrap);
.o_cp_buttons {
.o-flex-display();
@include o-flex-display;
margin-right: auto;
> div {
margin-top: 5px;
}
}
.o_cp_pager {
.o-flex-display();
@include o-flex-display;
margin-left: auto;
}
}
addons/web/static/src/scss/data_export.scss
+25 -25
View File
@@ -1,11 +1,11 @@
.o_web_client .o_export {
.o-flex(1, 1, auto);
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex(1, 1, auto);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
min-height: 0;
> p, > .row {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
label {
@@ -18,8 +18,8 @@
> div {
margin-left: 5px;
.o-inline-flex-display();
.o-align-items(center);
@include o-inline-flex-display;
@include o-align-items(center);
> label, > input {
margin: 0 0 0 5px;
@@ -28,39 +28,39 @@
}
.o_export_panel {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
position: relative;
min-height: 0;
> div {
height: 100%;
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(center);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
@include o-justify-content(center);
&.o_left_panel { // Needed because of chrome
.o-position-absolute(@top: 0, @bottom: 0, @left: 0, @right: 57%);
@include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%);
}
&.o_center_panel { // Needed because of chrome
.o-position-absolute(@top: 0, @bottom: 0, @left: 43%, @right: 43%);
@include o-position-absolute($top: 0, $bottom: 0, $left: 43%, $right: 43%);
}
&.o_right_panel { // Needed because of chrome
.o-position-absolute(@top: 0, @bottom: 0, @left: 57%, @right: 0);
@include o-position-absolute($top: 0, $bottom: 0, $left: 57%, $right: 0);
}
> h4, > div {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> button {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
margin-top: 10px;
}
.o_left_field_panel, .o_fields_list {
border: 1px solid @odoo-brand-lightsecondary;
border: 1px solid $odoo-brand-lightsecondary;
overflow: auto;
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
min-height: 0;
}
@@ -68,21 +68,21 @@
cursor: pointer;
position: relative;
padding-left: 20px;
.user-select(none);
@include user-select(none);
&.o_selected > .o_tree_column {
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
color: white;
}
.o_expand_parent {
.o-position-absolute(@top: 4px, @left: 5px);
@include o-position-absolute($top: 4px, $left: 5px);
}
.o_tree_column {
display: block;
&.o_required {
border-bottom: 2px solid @odoo-main-text-color;
border-bottom: 2px solid $odoo-main-text-color;
}
}
@@ -92,16 +92,16 @@
}
.o_save_list, .o_exported_lists {
.o-flex-display();
.o-align-items(baseline);
@include o-flex-display;
@include o-align-items(baseline);
> label, > button {
margin: 0 0 5px;
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> input, > select {
width: 0;
.o-flex(1, 0, auto);
@include o-flex(1, 0, auto);
}
}
}
addons/web/static/src/scss/datepicker.scss
+11 -11
View File
@@ -1,5 +1,5 @@
@odoo-datepicker-week-color: #8f8f8f;
@odoo-datepicker-week-bg-color: lighten(@odoo-datepicker-week-color, 30%);
$odoo-datepicker-week-color: #8f8f8f;
$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%);
.sr-only {
position: absolute;
@@ -21,10 +21,10 @@
}
.o_datepicker_button {
.o-position-absolute(2px, 4px);
@include o-position-absolute(2px, 4px);
pointer-events: none; // let click events go through the underlying input
&:after {
.o-caret-down;
@include o-caret-down;
}
}
}
@@ -33,26 +33,26 @@
// The '.dropdown-menu' part is needed to override default bootstrap rule as
// this file is unfortunately placed in common assets.
.bootstrap-datetimepicker-widget.dropdown-menu {
z-index: @zindex-modal + 1;
z-index: $zindex-modal + 1;
}
.datepicker {
.table-condensed {
> thead {
color: white;
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
> tr {
&:first-child {
th:hover {
color: white;
background-color: darken(@odoo-brand-primary, 10%);
background-color: darken($odoo-brand-primary, 10%);
}
}
&:last-child {
color: @odoo-datepicker-week-color;
background-color: @odoo-datepicker-week-bg-color;
color: $odoo-datepicker-week-color;
background-color: $odoo-datepicker-week-bg-color;
}
> th {
border-radius: 0;
@@ -64,12 +64,12 @@
> tr {
> td {
&.active, .active {
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
border-radius: 100px;
}
&.today:before {
border-bottom-color: @odoo-brand-optional;
border-bottom-color: $odoo-brand-optional;
}
}
}
addons/web/static/src/scss/domain_selector.scss
+37 -37
View File
@@ -1,28 +1,28 @@
.o_domain_node {
@o-domain-selector-indent: 32px;
@o-domain-selector-panel-space: 60px;
@o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
@o-domain-animation-bar-height: 15px;
$o-domain-selector-indent: 32px;
$o-domain-selector-panel-space: 60px;
$o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
$o-domain-animation-bar-height: 15px;
position: relative;
// Rows in a domain node (selector) have a minimum height and holds the control panel
.o_domain_selector_row {
.o-flex-display();
.o-align-items(center);
min-height: @o-domain-selector-row-height;
@include o-flex-display;
@include o-align-items(center);
min-height: $o-domain-selector-row-height;
> * {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> .o_domain_node_control_panel {
.o-position-absolute(@top: 0, @bottom: 0, @right: -@o-domain-selector-panel-space);
@include o-position-absolute($top: 0, $bottom: 0, $right: -$o-domain-selector-panel-space);
> button {
float: left;
width: @o-domain-selector-panel-space/2;
width: $o-domain-selector-panel-space/2;
height: 100%;
padding: 0;
background-color: transparent;
@@ -35,7 +35,7 @@
padding-left: 5px;
&:hover {
color: @brand-danger;
color: $brand-danger;
}
}
}
@@ -48,12 +48,12 @@
position: relative;
.o_domain_tree_operator_caret::after {
.o-caret-down();
@include o-caret-down;
}
}
> .o_domain_node_children_container {
padding-left: @o-domain-selector-indent;
padding-left: $o-domain-selector-indent;
}
// Rules specific to domain root
@@ -67,15 +67,15 @@
}
&.o_edit_mode > .o_domain_node_children_container {
padding-right: @o-domain-selector-panel-space; // delete button is over the row
padding-right: $o-domain-selector-panel-space; // delete button is over the row
}
> .o_domain_debug_container {
display: block;
margin-top: 16px;
padding: 8px 10px 12px;
background: @gray-dark;
color: fade(white, 50%);
background: $gray-dark;
color: rgba(white, 0.5);
font-family: monospace;
font-weight: normal;
@@ -92,13 +92,13 @@
// Rules specific to domain parts which do not contain sub-domain parts
&.o_domain_leaf {
&.o_read_mode {
.o-inline-flex-display();
@include o-inline-flex-display;
margin-right: 4px;
}
> .o_domain_leaf_info {
background: @odoo-brand-lightsecondary;
border: 1px solid darken(@odoo-brand-lightsecondary, 10%);
background: $odoo-brand-lightsecondary;
border: 1px solid darken($odoo-brand-lightsecondary, 10%);
padding: 2px 4px;
> .o_field_selector {
@@ -119,21 +119,21 @@
}
> .o_domain_leaf_edition {
.o-flex-display();
@include o-flex-display;
width: 100%;
padding: 4px (@o-domain-selector-panel-space/2) 4px 0;
padding: 4px ($o-domain-selector-panel-space/2) 4px 0;
> * {
.o-flex(1, 1, 15%); // operator select
@include o-flex(1, 1, 15%); // operator select
width: auto;
background-color: white;
&:first-child { // field selector
.o-flex(0, 1, 55%);
@include o-flex(0, 1, 55%);
}
&:last-child { // field value
.o-flex(1, 1, 25%);
@include o-flex(1, 1, 25%);
}
+ * {
@@ -146,13 +146,13 @@
}
.o_domain_leaf_value_tags {
.o-flex-display();
@include o-flex-display;
> * {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> input {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
width: 0;
min-width: 50px;
}
@@ -164,16 +164,16 @@
}
// Animation effects
.o-transition(margin-bottom, .05s, ease, .05s);
@include o-transition(margin-bottom, .05s, ease, .05s);
&::after {
content: "";
.o-position-absolute(@left: 0, @right: 0, @top: 100%);
@include o-position-absolute($left: 0, $right: 0, $top: 100%);
display: block;
height: @o-domain-animation-bar-height;
height: $o-domain-animation-bar-height;
max-height: 0;
.o-linear-gradient(45deg, fade(@odoo-brand-optional, 40%), fade(@odoo-brand-optional, 10%));
.o-transition(max-height, .05s, ease, .05s);
@include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1));
@include o-transition(max-height, .05s, ease, .05s);
}
&.o_hover_btns, &.o_hover_add_node {
@@ -190,15 +190,15 @@
}
&.o_hover_add_node {
margin-bottom: @o-domain-animation-bar-height;
.o-transition(margin, .15s, ease, .5s);
margin-bottom: $o-domain-animation-bar-height;
@include o-transition(margin, .15s, ease, .5s);
&::after {
max-height: @o-domain-animation-bar-height;
.o-transition(max-height, .15s, ease, .5s);
max-height: $o-domain-animation-bar-height;
@include o-transition(max-height, .15s, ease, .5s);
}
&.o_hover_add_inset_node::after {
left: @o-domain-selector-indent;
left: $o-domain-selector-indent;
}
}
}
addons/web/static/src/scss/dropdown.scss
+17 -17
View File
@@ -1,12 +1,12 @@
.li-a-padding {
padding: 3px @odoo-dropdown-hpadding;
%dropdown-li-a-padding {
padding: 3px $odoo-dropdown-hpadding;
}
.ui-autocomplete { // Copy style of bootstrap dropdown
background-image: none;
background-color: @dropdown-bg;
border: 1px solid @dropdown-border;
font-size: @font-size-base;
background-color: $dropdown-bg;
border: 1px solid $dropdown-border;
font-size: $font-size-base;
padding: 5px 0px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
@@ -14,14 +14,14 @@
padding: 0;
> a {
display: block;
color: @dropdown-link-color;
color: $dropdown-link-color;
.li-a-padding
@extend %dropdown-li-a-padding;
}
&.ui-state-focus {
background-image: none;
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
border: none;
font-weight: normal;
margin: 0;
@@ -29,14 +29,14 @@
&.o_m2o_dropdown_option {
padding-left: 20px;
> a {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
}
}
}
.dropdown-menu {
box-shadow: 0 6px 12px -4px fade(black, 25%);
box-shadow: 0 6px 12px -4px rgba(black, 0.25);
.o_inline_dropdown {
position: relative;
@@ -51,7 +51,7 @@
}
}
.dropdown-menu-mixin {
@mixin dropdown-menu-mixin {
.open .dropdown-menu > li {
position: relative; // to allow absolute positionning inside the li
> a {
@@ -59,14 +59,14 @@
outline: none;
}
.li-a-padding;
@extend %dropdown-li-a-padding;
}
&.dropdown-header {
.li-a-padding;
color: @odoo-main-text-color;
@extend %dropdown-li-a-padding;
color: $odoo-main-text-color;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
color: white;
text-decoration: underline;
}
@@ -74,7 +74,7 @@
}
}
.dropdown-menu-mixin();
@include dropdown-menu-mixin;
.navbar-nav {
.dropdown-menu-mixin();
@include dropdown-menu-mixin;
}
addons/web/static/src/scss/dropdown_extra.scss
+6 -6
View File
@@ -1,9 +1,9 @@
.ui-autocomplete .ui-menu-item {
&.ui-state-focus {
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
}
&.o_m2o_dropdown_option > a {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
&.ui-state-focus > a,
&.ui-state-focus.o_m2o_dropdown_option > a {
@@ -11,7 +11,7 @@
}
}
@tag-border: #afafb6;
$tag-border: #afafb6;
.oe_dropdown, .oe_dropdown_toggle {
position: relative;
cursor: pointer;
@@ -25,7 +25,7 @@
position: absolute;
z-index: 3;
margin: 0;
border: 1px solid @tag-border;
border: 1px solid $tag-border;
background: white;
padding: 4px 0;
min-width: 140px;
@@ -42,7 +42,7 @@
margin: 0;
padding: 2px 8px;
&:hover {
.o-vertical-gradient(#f0f0fa, #eeeef6);
@include o-vertical-gradient(#f0f0fa, #eeeef6);
box-shadow: none;
}
> a {
@@ -59,5 +59,5 @@
// Buttons used as dropdown toggler
.o_dropdown_toggler_btn {
.btn-default;
@extend .btn-default; // FIXME was a mixin before scss convertion
}
addons/web/static/src/scss/fields.scss
+64 -68
View File
@@ -6,8 +6,8 @@
// Invalid
.o_field_invalid {
&.o_input, .o_input, &.o_form_label {
color: @brand-danger!important;
border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
color: $brand-danger!important;
border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
}
}
@@ -39,17 +39,17 @@
// Flex fields (inline)
&.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
@media (min-width: @screen-sm-min) {
.o-inline-flex-display();
@media (min-width: $screen-sm-min) {
@include o-inline-flex-display;
}
> span, > button {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
}
// Dropdowns input (many2one, ...)
.o_input_dropdown {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
position: relative;
width: 100%;
@@ -60,10 +60,10 @@
}
.o_dropdown_button {
.o-position-absolute(0, 0);
@include o-position-absolute(0, 0);
pointer-events: none;
&:after {
.o-caret-down;
@include o-caret-down;
}
}
}
@@ -77,51 +77,51 @@
// Monetary
&.o_field_monetary {
&.o_input {
.o-align-items(baseline);
@include o-align-items(baseline);
> input {
width: 100px;
.o-flex(1, 0, auto);
@include o-flex(1, 0, auto);
}
}
}
// Many2many tags
&.o_field_many2manytags {
.o-flex-flow(row, wrap);
.o-align-items(baseline);
@include o-flex-flow(row, wrap);
@include o-align-items(baseline);
> .o_field_widget {
.o-flex(1, 0, 100px);
@include o-flex(1, 0, 100px);
position: initial;
max-width: 100%;
}
> .badge {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
border: 0;
font-size: 12px;
color: white;
cursor: pointer;
> .o_badge_text {
.o-text-overflow(inline-block);
@include o-text-overflow(inline-block);
max-width: 200px;
}
// o-kanban-colorpicker without customizing
// '&:first-child > a::before' (transparent red-crossed colorpick)
.o-tag-colorpicker() {
@o-tag-colorpicker-padding-right: @odoo-dropdown-hpadding - 2 * @o-kanban-inner-hmargin;
@mixin o-tag-colorpicker {
$o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion
max-width: 100%;
padding: 3px @o-tag-colorpicker-padding-right 3px @odoo-dropdown-hpadding;
padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding;
> li {
display: inline-block;
margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion
border: 1px solid white;
box-shadow: 0 0 0 1px @gray-lighter-dark;
box-shadow: 0 0 0 1px $gray-lighter-dark;
> a {
display: block;
@@ -136,7 +136,7 @@
&:last-of-type {
box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban
color: @odoo-main-text-color;
color: $odoo-main-text-color;
}
}
}
@@ -147,7 +147,7 @@
}
> .o_colorpicker > ul {
.o-tag-colorpicker();
@include o-tag-colorpicker;
white-space: normal;
}
@@ -156,28 +156,24 @@
}
}
.o-tag-color(@size: 0) when (@size = 0) {
.o_tag_color_@{size} {
& {
background-color: white;
color: ~"@{odoo-color-@{size}}";
box-shadow: inset 0 0 0 2px ~"@{odoo-color-@{size}}";
}
&::after {
background-color: ~"@{odoo-color-@{size}}";
@for $size from 1 through $odoo-nb-ui-color {
.o_tag_color_#{$size - 1} {
@if $size == 1 {
& {
background-color: white;
color: nth($odoo-colors, $size);
box-shadow: inset 0 0 0 2px nth($odoo-colors, $size);
}
&::after {
background-color: nth($odoo-colors, $size);
}
} @else {
&, &::after {
background-color: nth($odoo-colors, $size);
}
}
}
.o-tag-color(@size + 1);
}
.o-tag-color(@size: 0) when (@size > 0) and (@size < @odoo-nb-ui-color) {
.o_tag_color_@{size} {
&, &::after {
background-color: ~"@{odoo-color-@{size}}";
}
}
.o-tag-color(@size + 1);
}
.o-tag-color();
}
// Stars
@@ -199,7 +195,7 @@
}
&.fa-star-o {
color: @odoo-main-color-muted;
color: $odoo-main-color-muted;
}
&.fa-star {
color: gold;
@@ -213,7 +209,7 @@
font-size: 16px;
}
i.fa-star-o {
color: @odoo-main-color-muted;
color: $odoo-main-color-muted;
&:hover {
color: gold;
}
@@ -225,7 +221,7 @@
// Specific success color for toggle_button widget
.fa.o_toggle_button_success {
color: @brand-success;
color: $brand-success;
}
// Handle widget
@@ -240,13 +236,13 @@
}
.o_radio_item {
.o-flex(0, 0, auto);
.o-flex-display();
.o-align-items(center);
@include o-flex(0, 0, auto);
@include o-flex-display;
@include o-align-items(center);
> input {
.o-flex(0, 0, auto);
margin: 0 @odoo-form-spacing-unit 0 0;
@include o-flex(0, 0, auto);
margin: 0 $odoo-form-spacing-unit 0 0;
}
> label {
margin: 0;
@@ -255,21 +251,21 @@
&.o_horizontal {
.o_radio_item {
margin-right: @odoo-form-spacing-unit * 2;
margin-right: $odoo-form-spacing-unit * 2;
}
}
&.o_vertical {
.o-flex-flow(column, nowrap);
@include o-flex-flow(column, nowrap);
.o_radio_item {
margin-bottom: @odoo-form-spacing-unit;
margin-bottom: $odoo-form-spacing-unit;
}
}
}
// Percent pie
&.o_field_percent_pie {
.o-align-items(center);
@include o-align-items(center);
> .o_pie {
position: relative;
@@ -278,36 +274,36 @@
margin-right: 10px;
border-radius: 100%;
overflow: hidden;
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
&:after { // Outside pie border to go over border-radius irregularities
content: " ";
.o-position-absolute(0, 0);
@include o-position-absolute(0, 0);
width: 100%;
height: 100%;
border-radius: 100%;
}
.o_mask {
.o-position-absolute(0, 0);
.o-transform-origin(0);
@include o-position-absolute(0, 0);
@include o-transform-origin(0);
width: 50%;
height: 100%;
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
&.o_full {
background-color: inherit;
}
}
.o_pie_value {
.o-flex-display();
.o-justify-content(center);
.o-align-items(center);
@include o-flex-display;
@include o-justify-content(center);
@include o-align-items(center);
border-radius: 100%;
font-weight: 700;
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
}
}
@@ -326,11 +322,11 @@
position: relative;
.o_form_image_controls {
.o-position-absolute(0, 0);
@include o-position-absolute(0, 0);
width: 100%;
color: white;
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
opacity: 0;
transition: opacity ease 400ms;
@@ -339,7 +335,7 @@
cursor: pointer;
}
}
@media (max-width: @screen-xs-min) {
@media (max-width: $screen-xs-min) {
.o_form_image_controls{
position: initial;
opacity: 1;
@@ -349,10 +345,10 @@
margin: 0px;
text-align: center;
&.o_select_file_button{
background: @odoo-brand-optional;
background: $odoo-brand-optional;
}
&.o_clear_file_button{
background: @brand-danger;
background: $brand-danger;
}
}
}
@@ -377,7 +373,7 @@
position: relative;
> .o_field_domain_panel {
.o-position-absolute(0, 0);
@include o-position-absolute(0, 0);
margin-top: 0;
}
}
addons/web/static/src/scss/fields_extra.scss
+9 -9
View File
@@ -17,7 +17,7 @@
.o_field_widget {
// Dropdowns input carret
.o_input_dropdown .o_dropdown_button {
.o-position-absolute(2px, 4px);
@include o-position-absolute(2px, 4px);
}
// Many2one
@@ -34,22 +34,22 @@
// Percent pie field
&.o_field_percent_pie {
@pie-dimension: 34px;
@pie-ring-width: 4px;
$pie-dimension: 34px;
$pie-ring-width: 4px;
.o_pie {
width: @pie-dimension;
height: @pie-dimension;
width: $pie-dimension;
height: $pie-dimension;
margin-left: 5px;
&:after { // Outside pie border to go over border-radius irregularities
border: 1px solid @odoo-brand-primary;
border: 1px solid $odoo-brand-primary;
}
.o_pie_value {
.o-position-absolute(@pie-ring-width, @pie-ring-width);
width: @pie-dimension - 2 * @pie-ring-width;
height: @pie-dimension - 2 * @pie-ring-width;
@include o-position-absolute($pie-ring-width, $pie-ring-width);
width: $pie-dimension - 2 * $pie-ring-width;
height: $pie-dimension - 2 * $pie-ring-width;
border: 1px solid white;
background-color: white;
font-size: 10px;
addons/web/static/src/scss/fonts.scss
+23 -23
View File
@@ -1,37 +1,37 @@
// ------------------------------------------------------------------
// Lato
// ------------------------------------------------------------------
@lato-font-path: '../fonts/lato';
$lato-font-path: '../fonts/lato';
.lato-font(@type, @weight, @style) {
@mixin lato-font($type, $weight, $style) {
@font-face {
font-family: 'Lato';
src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
url('@{lato-font-path}/Lato-@{type}-webfont.svg#Lato') format('svg');
font-weight: @weight;
font-style: @style;
src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Lato') format('svg');
font-weight: $weight;
font-style: $style;
}
@font-face {
font-family: 'Lato-@{type}';
src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
url('@{lato-font-path}/Lato-@{type}-webfont.svg#Roboto') format('svg');
font-family: 'Lato-#{$type}';
src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Roboto') format('svg');
}
}
.lato-font-pair(@type, @weight) {
.lato-font('@{type}', @weight, normal);
.lato-font('@{type}Ita', @weight, italic);
@mixin lato-font-pair($type, $weight) {
@include lato-font('#{$type}', $weight, normal);
@include lato-font('#{$type}Ita', $weight, italic);
}
.lato-font-pair('Hai', 100);
.lato-font-pair('Lig', 300);
.lato-font-pair('Reg', 400);
.lato-font-pair('Bol', 700);
.lato-font-pair('Bla', 900);
@include lato-font-pair('Hai', 100);
@include lato-font-pair('Lig', 300);
@include lato-font-pair('Reg', 400);
@include lato-font-pair('Bol', 700);
@include lato-font-pair('Bla', 900);
addons/web/static/src/scss/form_view.scss
+101 -103
View File
@@ -1,10 +1,10 @@
.o_form_view {
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
// Utility classes
.oe_form_box_info {
.bg-info;
.o-webclient-padding(@top: 5px, @bottom: 5px);
@extend .bg-info; // FIXME was a mixin before scss convertion
@include o-webclient-padding($top: 5px, $bottom: 5px);
> p {
margin: auto;
}
@@ -17,37 +17,37 @@
}
.oe_inline {
width: auto!important;
@media (min-width: @screen-xs-min) {
@media (min-width: $screen-xs-min) {
&.o_inner_group {
width: 1px!important;
}
}
}
.oe_left {
.oe_inline;
@extend .oe_inline; // FIXME was a mixin before scss convertion
float: left!important;
}
.oe_right {
.oe_inline;
@extend .oe_inline; // FIXME was a mixin before scss convertion
float: right!important;
}
@media (min-width: @screen-xs-min) {
@media (min-width: $screen-xs-min) {
.o_row {
&, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
.o-flex-display();
@include o-flex-display;
width: auto!important;
}
.o-align-items(baseline);
@include o-align-items(baseline);
min-width: 50px;
margin: 0 -@odoo-form-spacing-unit/2;
margin: 0 -$odoo-form-spacing-unit/2;
> div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
width: auto!important;
margin-right: @odoo-form-spacing-unit/2;
margin-left: @odoo-form-spacing-unit/2;
margin-right: $odoo-form-spacing-unit/2;
margin-left: $odoo-form-spacing-unit/2;
}
> .o_row {
@@ -58,7 +58,7 @@
padding-bottom: 0;
}
> .o_field_boolean {
.o-align-self(center);
@include o-align-self(center);
}
}
}
@@ -82,14 +82,14 @@
.o_form_uri {
display: inline-block;
color: @odoo-main-text-color;
color: $odoo-main-text-color;
&:first-line {
color: @link-color;
color: $link-color;
}
&:hover {
color: darken(@odoo-main-text-color, 1%); // hack required on chrome
color: darken($odoo-main-text-color, 1%); // hack required on chrome
&:first-line {
color: darken(@link-color, 15%);
color: darken($link-color, 15%);
}
}
}
@@ -101,17 +101,17 @@
}
.oe_title {
max-width: @container-sm - (2 * @odoo-horizontal-padding);
max-width: $container-sm - (2 * $odoo-horizontal-padding);
}
@media (min-width: @screen-xs-min) {
@media (min-width: $screen-xs-min) {
.o_row {
> .o_field_widget, > div {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0)
&.o_field_boolean, &.o_priority {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
width: auto!important;
}
}
@@ -122,10 +122,10 @@
// No sheet
&.o_form_nosheet {
display: block;
.o-webclient-padding(@top: @odoo-sheet-vpadding, @bottom: @odoo-sheet-vpadding);
@include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding);
.o_form_statusbar {
margin: -@odoo-sheet-vpadding -@odoo-horizontal-padding @odoo-sheet-vpadding -@odoo-horizontal-padding;
margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding;
}
}
@@ -134,37 +134,37 @@
position: relative;
> .o_form_sheet {
margin: @odoo-sheet-vpadding auto;
margin: $odoo-sheet-vpadding auto;
}
}
// Statusbar
.o_form_statusbar {
position: relative; // Needed for the "More" dropdown
.o-flex-display();
.o-justify-content(space-between);
padding-left: @odoo-horizontal-padding;
border-bottom: 1px solid @gray-lighter-darker;
background-color: @odoo-view-background-color;
@include o-flex-display;
@include o-justify-content(space-between);
padding-left: $odoo-horizontal-padding;
border-bottom: 1px solid $gray-lighter-darker;
background-color: $odoo-view-background-color;
> .o_statusbar_buttons, > .o_statusbar_status {
.o-flex-display();
.o-align-items(center);
.o-align-content(space-around);
@include o-flex-display;
@include o-align-items(center);
@include o-align-content(space-around);
}
> .o_field_widget {
.o-align-self(center);
@include o-align-self(center);
margin-bottom: 0px;
}
> .o_statusbar_buttons {
.o-flex-flow(row, wrap);
@include o-flex-flow(row, wrap);
> .btn {
@o-statusbar-buttons-vmargin: 4px;
min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin;
margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0;
$o-statusbar-buttons-vmargin: 4px;
min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin;
margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0;
padding-top: 2px;
padding-bottom: 2px;
}
@@ -172,28 +172,28 @@
> .o_statusbar_status {
margin-left: auto;
.o-flex-flow(row-reverse, wrap-reverse);
.o-align-self(stretch);
.o-align-items(stretch);
@include o-flex-flow(row-reverse, wrap-reverse);
@include o-align-self(stretch);
@include o-align-items(stretch);
overflow-x: hidden; // to prevent horizontal scroll due to last arrow
> .o_arrow_button {
min-height: @odoo-statusbar-height;
min-height: $odoo-statusbar-height;
font-size: 11px;
font-weight: bold;
position: relative;
padding-left: @odoo-statusbar-arrow-width*2;
color: @gray;
padding-left: $odoo-statusbar-arrow-width*2;
color: $gray;
border-width: 0 0 0;
border-radius: 0;
.o-transition(all, 0.1s);
@include o-transition(all, 0.1s);
&:first-child {
padding-right: @odoo-horizontal-padding; // Compensate container padding
padding-right: $odoo-horizontal-padding; // Compensate container padding
}
&:last-child {
padding-left: @odoo-horizontal-padding - 1;
border-left: 1px solid @gray-lighter-darker;
padding-left: $odoo-horizontal-padding - 1;
border-left: 1px solid $gray-lighter-darker;
}
&:active {
@@ -202,48 +202,48 @@
&.disabled {
opacity: 1.0;
color: @text-muted;
color: $text-muted;
pointer-events: none;
border-left: 1px solid @gray-lighter-dark;
border-left: 1px solid $gray-lighter-dark;
}
&:before, &:after {
content: " ";
display: block;
.o-position-absolute(0, -@odoo-statusbar-arrow-width + 1);
@include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1);
border-top: floor(@odoo-statusbar-height/2) solid transparent;
border-bottom: ceil(@odoo-statusbar-height/2) solid transparent;
border-top: floor($odoo-statusbar-height/2) solid transparent;
border-bottom: ceil($odoo-statusbar-height/2) solid transparent;
border-right: none;
border-left: @odoo-statusbar-arrow-width solid @odoo-view-background-color;
.o-transition(border, 0.2s);
border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color;
@include o-transition(border, 0.2s);
-moz-transform: scale(0.9999); // Smooth the triangle on firefox
}
&:not(.disabled) {
&:hover, &:active, &:focus {
color: @odoo-brand-optional;
background-color: @gray-lighter;
color: $odoo-brand-optional;
background-color: $gray-lighter;
&:after {
border-left-color: @gray-lighter;
border-left-color: $gray-lighter;
}
}
}
&:before {
right: -@odoo-statusbar-arrow-width;
border-left-color: @gray-lighter-dark;
right: -$odoo-statusbar-arrow-width;
border-left-color: $gray-lighter-dark;
}
&.btn-primary.disabled {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
font-size: 11px;
background-color: @gray-lighter;
background-color: $gray-lighter;
cursor: default;
&:after {
border-left-color: @gray-lighter;
border-left-color: $gray-lighter;
}
}
@@ -253,7 +253,7 @@
}
.o-status-more {
.o-position-absolute(100%, 0);
@include o-position-absolute(100%, 0);
min-width: 100px;
> li > button {
width: 100%;
@@ -266,8 +266,8 @@
> .o_statusbar_buttons > .btn-group, > .o_statusbar_status {
> .dropdown-toggle {
&:after {
.o-caret-down();
margin-left: @odoo-form-spacing-unit;
@include o-caret-down;
margin-left: $odoo-form-spacing-unit;
}
}
@@ -315,14 +315,12 @@
margin: 10px 0;
// o_group contains nested groups
.o-generate-groups(@odoo-form-group-cols);
.o-generate-groups(@n, @i: 1) when (@i =< @n) {
.o_group_col_@{i} {
@for $i from 1 through $odoo-form-group-cols {
.o_group_col_#{$i} {
display: inline-block;
width: floor(100% / 12 * @i);
width: floor(100% / 12 * $i);
vertical-align: top;
}
.o-generate-groups(@n, @i + 1);
}
&.o_inner_group {
@@ -352,7 +350,7 @@
width: 100%;
> .btn {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
padding: 0 10px;
}
}
@@ -364,7 +362,7 @@
// Makes extra buttons (e.g. m2o external button) overflow on the
// right padding of the parent element
.o_input_dropdown {
.o-flex(1, 0, auto);
@include o-flex(1, 0, auto);
}
}
@@ -380,17 +378,17 @@
// Separators
.o_horizontal_separator {
font-size: @font-size-h2;
margin: @odoo-form-spacing-unit 0;
font-size: $font-size-h2;
margin: $odoo-form-spacing-unit 0;
&:empty {
height: @odoo-form-spacing-unit * 2;
height: $odoo-form-spacing-unit * 2;
}
}
// Notebooks
.o_notebook {
clear: both; // For the notebook not to have alongside floating elements
margin-top: @odoo-form-spacing-unit * 2;
margin-top: $odoo-form-spacing-unit * 2;
.nav-tabs > .tab-pane {
min-height: 100px;
@@ -399,14 +397,14 @@
// Labels
.o_form_label {
margin: 0 @odoo-form-spacing-unit 0 0;
font-size: @font-size-base; // The label muse have the same size whatever their position
line-height: @line-height-base;
margin: 0 $odoo-form-spacing-unit 0 0;
font-size: $font-size-base; // The label muse have the same size whatever their position
line-height: $line-height-base;
}
// Form fields
.o_field_widget {
margin-bottom: @odoo-form-spacing-unit;
margin-bottom: $odoo-form-spacing-unit;
}
.o_field_widget, .btn {
.o_field_widget {
@@ -428,7 +426,7 @@
// Text field with oe_inline class
.o_field_text.oe_inline {
width: 100%!important;
@media (min-width: @screen-xs-min) {
@media (min-width: $screen-xs-min) {
width: 45%!important;
}
}
@@ -445,7 +443,7 @@
// Specific style classes
.o_group.o_inner_group.oe_subtotal_footer {
.oe_right;
@extend .oe_right; // FIXME was a mixin after scss convertion
> tbody > tr > td {
padding: 0;
@@ -466,7 +464,7 @@
.o_field_widget {
text-align: right;
.o-justify-content(flex-end);
@include o-justify-content(flex-end);
width: 100%;
}
}
@@ -478,7 +476,7 @@
.oe_subtotal_footer_separator {
width: 100%;
text-align: right;
border-top: 1px solid @gray-lighter-dark;
border-top: 1px solid $gray-lighter-dark;
font-weight: bold;
font-size: 1.3em;
}
@@ -487,7 +485,7 @@
.o_address_format {
width: 100%;
.o_address_street, .o_address_country {
.o-flex-display;
@include o-flex-display;
}
.o_address_city {
@@ -557,12 +555,12 @@
// Boolean
.o_field_boolean {
margin: 0 @odoo-form-spacing-unit 0 0;
margin: 0 $odoo-form-spacing-unit 0 0;
}
// Timezone widget warning
.o_tz_warning {
color: @brand-danger;
color: $brand-danger;
cursor: help;
position: absolute;
margin-left: -40px;
@@ -583,7 +581,7 @@
> tfoot > tr > td {
padding: 3px;
color: @odoo-main-text-color;
color: $odoo-main-text-color;
}
}
&.o_form_readonly .o_field_widget .o_list_view .o_row_handle {
@@ -593,9 +591,9 @@
// Attachments
.oe_attachment {
display: inline-block;
border: 1px solid @odoo-brand-lightsecondary;
margin: 0 @odoo-form-spacing-unit @odoo-form-spacing-unit 0;
padding: @odoo-form-spacing-unit;
border: 1px solid $odoo-brand-lightsecondary;
margin: 0 $odoo-form-spacing-unit $odoo-form-spacing-unit 0;
padding: $odoo-form-spacing-unit;
}
&.oe_form_configuration {
@@ -654,19 +652,19 @@ label.o_light_label, .o_light_label label {
}
// XXS form view specific rules
.form-break-table() {
@mixin form-break-table {
display: block;
margin-bottom: @odoo-form-spacing-unit * 4;
margin-bottom: $odoo-form-spacing-unit * 4;
> tbody {
display: block;
> tr {
.o-flex-display();
.o-flex-flow(row, wrap);
@include o-flex-display;
@include o-flex-flow(row, wrap);
> td {
.o-flex(1, 0, auto);
@include o-flex(1, 0, auto);
display: block;
max-width: 100%;
padding: 0;
@@ -674,11 +672,11 @@ label.o_light_label, .o_light_label label {
width: auto!important; // !important is required to override the width computed in JS
&.o_td_label {
width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox)
line-height: @odoo-label-font-size-factor;
line-height: $odoo-label-font-size-factor;
}
.o_field_widget {
margin-bottom: @odoo-form-spacing-unit * 2;
margin-bottom: $odoo-form-spacing-unit * 2;
&.o_field_boolean {
margin-right: 0;
}
@@ -698,16 +696,16 @@ label.o_light_label, .o_light_label label {
}
.o_group {
&.o_inner_group {
.form-break-table();
@include form-break-table;
}
}
}
// Settings form views
.o_settings_container {
.o-flex-display();
.o-flex(0, 1, auto);
.o-flex-flow(row, wrap);
@include o-flex-display;
@include o-flex(0, 1, auto);
@include o-flex-flow(row, wrap);
.o_setting_box:visible:nth-child(odd) {
clear: left;
}
addons/web/static/src/scss/form_view_extra.scss
+12 -12
View File
@@ -1,6 +1,6 @@
@sheet-max-width: 860px;
@sheet-min-width: 650px;
@sheet-padding: 16px;
$sheet-max-width: 860px;
$sheet-min-width: 650px;
$sheet-padding: 16px;
.o_form_view {
&.o_form_nosheet.oe_form_nomargin {
@@ -11,8 +11,8 @@
background: url(/web/static/src/img/form_sheetbg.png);
> .o_form_sheet {
min-width: @sheet-min-width;
max-width: @sheet-max-width;
min-width: $sheet-min-width;
max-width: $sheet-max-width;
min-height: 330px;
padding: 16px;
border: 1px solid #c8c8d3;
@@ -73,12 +73,12 @@
line-height: 1.2;
.o_stat_value {
.o-text-overflow(block);
@include o-text-overflow(block);
font-weight: 700;
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
.o_stat_text {
.o-text-overflow(block);
@include o-text-overflow(block);
font-size: small;
.o_stat_value {
@@ -105,7 +105,7 @@
padding: 0 10px;
}
.o_dropdown_more {
.o-position-absolute(@top: 100%, @right: 0);
@include o-position-absolute($top: 100%, $right: 0);
min-width: 0;
padding: 0px;
}
@@ -144,7 +144,7 @@
// Separators
.o_horizontal_separator {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
font-weight: bold;
}
@@ -166,8 +166,8 @@
// Chatter
.oe_chatter {
display: block;
min-width: @sheet-min-width + 2* @sheet-padding;
max-width: @sheet-max-width + 2* @sheet-padding;
min-width: $sheet-min-width + 2* $sheet-padding;
max-width: $sheet-max-width + 2* $sheet-padding;
margin: 0 auto;
padding: 16px 16px 48px;
}
addons/web/static/src/scss/graph_view.scss
+2 -2
View File
@@ -3,7 +3,7 @@
height: 100%;
overflow: auto;
svg {
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
}
}
}
@@ -16,5 +16,5 @@
// Control panel buttons
// ------------------------------------------------------------------
.o_graph_measures_list {
.o-selected-li;
@include o-selected-li;
}
addons/web/static/src/scss/kanban_column_progressbar.scss
+34 -34
View File
@@ -1,41 +1,41 @@
@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6;
$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6;
.o-kanban-css-filter(@class, @accent-color) {
@mixin o-kanban-css-filter($class, $accent-color) {
// Provide CSS reordering and highlight
&.o_kanban_group_show_@{class} {
@mix-soft: mix(@accent-color, @odoo-webclient-background-color, 5%);
@mix-full: mix(@accent-color, @odoo-webclient-background-color);
&.o_kanban_group_show_#{$class} {
$mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%);
$mix-full: mix($accent-color, $odoo-webclient-background-color);
&, .o_kanban_header {
background-color: @mix-soft;
border-color: @mix-full;
background-color: $mix-soft;
border-color: $mix-full;
}
.progress-bar.bg-@{class}-full {
.progress-bar.bg-#{$class}-full {
border: 1px solid white;
}
.oe_kanban_card_@{class} {
.oe_kanban_card_#{$class} {
order: 1;
margin-bottom: @o-kanban-inside-vgutter*0.5;
margin-bottom: $o-kanban-inside-vgutter*0.5;
~ .oe_kanban_card_@{class} {
margin-top: -@o-kanban-inside-vgutter*0.5 - 1px;
~ .oe_kanban_card_#{$class} {
margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
}
~ .o_kanban_load_more {
margin-top: -@o-kanban-inside-vgutter*0.5;
margin-top: -$o-kanban-inside-vgutter*0.5;
}
}
.o_kanban_load_more {
order: 2;
padding: @o-kanban-inside-vgutter*0.5 0 @o-kanban-inside-vgutter;
padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter;
}
.o_kanban_record:not(.oe_kanban_card_@{class}) {
.o_kanban_record:not(.oe_kanban_card_#{$class}) {
order: 3;
.o-hover-opacity(0.5);
@include o-hover-opacity(0.5);
box-shadow: none;
}
}
@@ -44,7 +44,7 @@
// If columns has the progressbar, adapt the layout
.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
> .o_kanban_header .o_kanban_header_title {
height: @o-kanban-counter-header-height;
height: $o-kanban-counter-header-height;
margin-top: 5px;
}
@@ -57,16 +57,16 @@
.o_kanban_counter {
position: relative;
.o-flex-display();
.o-align-items(center);
.o-transition(opacity, 0.3s);
margin-bottom: @o-kanban-record-margin*2;
@include o-flex-display;
@include o-align-items(center);
@include o-transition(opacity, 0.3s);
margin-bottom: $o-kanban-record-margin*2;
> .o_kanban_counter_progress {
width: 76%;
height: @font-size-small;
height: $font-size-small;
margin-bottom: 0;
background-color: @gray-lighter-dark;
background-color: $gray-lighter-dark;
box-shadow: none;
.progress-bar {
@@ -82,24 +82,24 @@
.o_kanban_counter_label {
font-size: 10px;
.user-select(none);
@include user-select(none);
}
}
> .o_kanban_counter_side {
width: 21%;
margin-left: 3%;
color: @headings-color;
color: $headings-color;
text-align: right;
white-space: nowrap;
.o-transform-origin(right, center);
@include o-transform-origin(right, center);
&.o_kanban_grow {
.o-animation(grow, 1s, ease);
@include o-animation(grow, 1s, ease);
}
&.o_kanban_grow_huge {
.o-animation(grow_huge, 1s, ease);
@include o-animation(grow_huge, 1s, ease);
}
// Target currency icon
@@ -113,16 +113,16 @@
}
.o_kanban_view .o_kanban_group {
.o-kanban-css-filter(success, @brand-success);
.o-kanban-css-filter(warning, @brand-warning);
.o-kanban-css-filter(danger, @brand-danger);
@include o-kanban-css-filter(success, $brand-success);
@include o-kanban-css-filter(warning, $brand-warning);
@include o-kanban-css-filter(danger, $brand-danger);
&.o_kanban_group_show {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
> * {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
}
}
addons/web/static/src/scss/kanban_dashboard.scss
+203 -59
View File
@@ -1,26 +1,170 @@
// FIXME variables and mixins were moved from kanban_view.scss to here as this
// file is placed before in the assets template (and changing file order may
// break selector priorities).
$o-kanban-record-margin: $odoo-horizontal-padding/2;
$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this
$o-kanban-default-record-width: 300px;
$o-kanban-small-record-width: 240px;
$o-kanban-header-title-height: 50px;
$o-kanban-image-width: 64px;
$o-kanban-inside-vgutter: 8px;
$o-kanban-inside-hgutter: 8px;
$o-kanban-color-border-width: 3px;
$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding;
$o-kanban-inner-hmargin: 5px;
$o-kanban-progressbar-height: 20px;
// ------- Kanban grouped mixins -------
@mixin o-kanban-icon($base-opacity: 0.5) {
display: block;
text-align: center;
color: $odoo-main-text-color;
font-size: $font-size-small;
cursor: pointer;
@include o-hover-opacity($base-opacity);
}
@mixin o-kanban-tag-color {
@for $size from 1 through $odoo-nb-ui-color {
// Note: the first color is supposed to be invisible if there is a color
// field but it is used as a default color when there is no color field
&.o_tag_color_#{$size - 1} span {
background-color: nth($odoo-colors, $size);
}
}
}
@mixin o-kanban-record-color {
@for $size from 2 through $odoo-nb-ui-color {
// Note: the first color is not defined as it is the 'no color' for kanban
.oe_kanban_color_#{$size - 1}::after {
background-color: nth($odoo-colors, $size);
}
}
}
@mixin o-kanban-slim-col {
position: relative;
@include o-flex(0, 0, auto);
margin: 0;
padding: 0 floor($o-kanban-group-padding * 0.7);
cursor: pointer;
}
@mixin o-kanban-header-title {
@include o-flex-display;
@include o-align-items(center);
height: $o-kanban-header-title-height;
line-height: 2.2;
color: $headings-color;
}
@mixin o-kanban-v-title {
@include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
@include o-transform-origin(left, bottom, $z: 0);
@include o-transform(rotate(90deg));
overflow: visible;
white-space: nowrap;
font-size: 15px;
}
// ------- Kanban records mixins -------
@mixin o-kanban-record-title($font-size) {
color: $headings-color;
font-size: $font-size;
font-weight: 500;
margin-bottom: 0;
margin-top: 0;
}
@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
margin: -1px -1px auto auto; // compensate border
padding: $padding-base/2 $padding-base;
border: 1px solid transparent;
border-bottom: none;
vertical-align: top;
color: $text-color;
&:hover {
color: $headings-color;
}
&:focus, &:active, &:focus:active {
outline: none;
}
}
@mixin o-kanban-dropdown-open {
position: relative;
background: white;
border-color: $gray-lighter-darker;
z-index: $zindex-dropdown + 1;
}
@mixin o-kanban-dropdown-menu {
@include o-position-absolute($right: -1px);
margin-top: -1px;
border-color: $gray-lighter-darker;
}
@mixin o-kanban-colorpicker {
max-width: 150px;
padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding;
> li {
display: inline-block;
margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
border: 1px solid white;
box-shadow: 0 0 0 1px $gray-lighter-dark;
> a {
display: block;
&::after {
content: "";
display: block;
width: 20px;
height: 15px;
}
}
// No Color
&:first-child > a {
position: relative;
&::before {
content: "";
@include o-position-absolute(-2px, $left: 10px);
display: block;
width: 1px;
height: 20px;
@include rotate(45deg);
background-color: red;
}
&::after {
background-color: white;
}
}
}
}
// ------- Kanban dashboard variables -------
// Since rows and containers are used inside cards, we're
// forced to set the padding relative to the grid system.
@o-kanban-dashboard-hpadding: @grid-gutter-width*0.5;
@o-kanban-dashboard-vpadding: @grid-gutter-width*0.25;
$o-kanban-dashboard-hpadding: $grid-gutter-width*0.5;
$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25;
// Used to manage spacing in complex dropdown menu
@o-kanban-dashboard-dropdown-complex-gap: 5px;
$o-kanban-dashboard-dropdown-complex-gap: 5px;
// Emulate dropdown links
.o-kanban-dashboard-dropdown-link(@link-padding-gap: @odoo-dropdown-hpadding) {
@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) {
padding: 0;
> a {
margin: auto auto auto -@link-padding-gap;
padding: 3px @link-padding-gap;
color: @text-color;
margin: auto auto auto -$link-padding-gap;
padding: 3px $link-padding-gap;
color: $text-color;
display: block;
&:hover {
background-color: @gray-lighter-dark;
color: @headings-color;
background-color: $gray-lighter-dark;
color: $headings-color;
}
}
&:last-child {
@@ -30,16 +174,16 @@
.o_kanban_view.o_kanban_dashboard {
// correctly display the no_content_helper in dashboards
.o-flex-flow(row, wrap);
@include o-flex-flow(row, wrap);
.o_kanban_record {
position: relative;
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(space-between);
padding: @o-kanban-dashboard-vpadding @o-kanban-dashboard-hpadding;
@include o-flex-display;
@include o-flex-flow(column, nowrap);
@include o-justify-content(space-between);
padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
margin-bottom: 10px;
}
@@ -57,20 +201,20 @@
}
// ------- Dropdown toggle & menu -------
@o-kanban-manage-toggle-height: 35px;
$o-kanban-manage-toggle-height: 35px;
.o_kanban_manage_toggle_button {
.o-kanban-dropdown(@o-kanban-dashboard-hpadding);
height: @o-kanban-manage-toggle-height;
@include o-kanban-dropdown($o-kanban-dashboard-hpadding);
height: $o-kanban-manage-toggle-height;
}
.o_kanban_card_manage_pane {
.dropdown-menu;
.o-kanban-dropdown-menu();
@extend .dropdown-menu; // FIXME was a mixin before scss convertion
@include o-kanban-dropdown-menu;
// Arbitrary value to place the dropdown-menu exactly below the
// dropdown-toggle (height is forced so that it works on Firefox)
top: @o-kanban-manage-toggle-height - 1;
top: $o-kanban-manage-toggle-height - 1;
> div:not(.o_no_padding_kanban_colorpicker) {
padding: 3px 0 3px 20px;
@@ -79,11 +223,11 @@
}
> .o_kanban_card_manage_section {
border-bottom: 1px solid @gray-lighter-dark;
border-bottom: 1px solid $gray-lighter-dark;
margin-bottom: 10px;
> div {
.o-kanban-dashboard-dropdown-link();
@include o-kanban-dashboard-dropdown-link;
}
}
@@ -93,32 +237,32 @@
max-width: 400px;
.row {
.o-flex-display();
.o-flex-flow(row, nowrap);
.o-justify-content(space-between);
@include o-flex-display;
@include o-flex-flow(row, nowrap);
@include o-justify-content(space-between);
margin-left: 0;
margin-right: 0;
padding-left: @o-kanban-dashboard-dropdown-complex-gap*2;
padding-right: @o-kanban-dashboard-dropdown-complex-gap*2;
padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
padding-right: $o-kanban-dashboard-dropdown-complex-gap*2;
}
div[class*="col-"] {
.o-flex(1, 1, percentage(100/3));
padding-left: @o-kanban-dashboard-dropdown-complex-gap;
padding-right: @o-kanban-dashboard-dropdown-complex-gap;
@include o-flex(1, 1, percentage(100/3));
padding-left: $o-kanban-dashboard-dropdown-complex-gap;
padding-right: $o-kanban-dashboard-dropdown-complex-gap;
> .o_kanban_card_manage_title {
.h5;
@extend .h5; // FIXME was a mixin before scss convertion
font-weight: 500;
}
> div:not(.o_kanban_card_manage_title) {
.o-kanban-dashboard-dropdown-link(@link-padding-gap: @o-kanban-dashboard-dropdown-complex-gap);
@include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
}
}
.row.o_kanban_card_manage_settings {
border-top: 1px solid @gray-lighter-dark;
padding-top: @o-kanban-dashboard-dropdown-complex-gap*3;
border-top: 1px solid $gray-lighter-dark;
padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
.oe_kanban_colorpicker {
max-width: none;
@@ -126,13 +270,13 @@
}
div[class*="col-"] + div[class*="col-"] {
border-left: 1px solid @gray-lighter-dark;
border-left: 1px solid $gray-lighter-dark;
}
// Default options box
div.text-right {
text-align: left; // :/
.o-kanban-dashboard-dropdown-link(0);
@include o-kanban-dashboard-dropdown-link(0);
> a {
margin-left: 40px;
padding-left: 20px;
@@ -148,7 +292,7 @@
display: block;
}
.o_kanban_manage_toggle_button {
.o-kanban-dropdown-open();
@include o-kanban-dropdown-open;
position: absolute;
}
}
@@ -158,27 +302,27 @@
// Provide enough room for the dropdown-toggle
.o_primary {
padding-right: @o-kanban-dashboard-hpadding*2;
padding-right: $o-kanban-dashboard-hpadding*2;
}
// Uniform titles
.o_kanban_card_header_title .o_primary,
.o_kanban_primary_left .o_primary > span:first-child,
.oe_kanban_content > .o_title > h3 {
.o-kanban-record-title(@font-size: 16px);
@include o-kanban-record-title($font-size: 16px);
display: block;
}
// Identify subtitles without classes
.o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
font-weight: 500;
font-size: @font-size-small;
color: @text-muted;
font-size: $font-size-small;
color: $text-muted;
}
// Provide enough room to add an icon before the title
&.o_has_icon .o_primary {
padding-left: @o-kanban-record-margin*1.5;
padding-left: $o-kanban-record-margin*1.5;
}
// ------- Kanban Content -------
@@ -189,11 +333,11 @@
}
.o_kanban_card_header + .container.o_kanban_card_content {
.o-flex(1, 0, auto);
.o-flex-display();
.o-flex-flow(column, nowrap);
.o-justify-content(space-between);
margin-top: @o-kanban-dashboard-vpadding * 2;
@include o-flex(1, 0, auto);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
@include o-justify-content(space-between);
margin-top: $o-kanban-dashboard-vpadding * 2;
padding-right: 0;
padding-left: 0;
@@ -203,31 +347,31 @@
a {
position: relative;
.o-text-overflow(inline-block);
@include o-text-overflow(inline-block);
}
.o_kanban_primary_bottom {
margin-top: @o-kanban-dashboard-vpadding;
margin-bottom: -@o-kanban-dashboard-vpadding;
margin-top: $o-kanban-dashboard-vpadding;
margin-bottom: -$o-kanban-dashboard-vpadding;
&.bottom_block {
border-top: 1px solid @gray-lighter-dark;
background-color: @gray-lighter;
padding-top: @o-kanban-dashboard-vpadding;
padding-bottom: @o-kanban-dashboard-vpadding;
border-top: 1px solid $gray-lighter-dark;
background-color: $gray-lighter;
padding-top: $o-kanban-dashboard-vpadding;
padding-bottom: $o-kanban-dashboard-vpadding;
}
}
}
.o_dashboard_graph {
overflow: hidden;
margin: (@o-kanban-dashboard-vpadding * 2) -@o-kanban-dashboard-hpadding;
margin: ($o-kanban-dashboard-vpadding * 2) -$o-kanban-dashboard-hpadding;
}
}
.o_favorite, .o_kanban_manage_toggle_button {
.o-position-absolute(0, 0);
padding: @o-kanban-record-margin;
@include o-position-absolute(0, 0);
padding: $o-kanban-record-margin;
}
.o_favorite {
@@ -238,6 +382,6 @@
// Emphasize records' colors when necessary
&.o_emphasize_colors .o_kanban_record::after {
width: @o-kanban-color-border-width * 2;
width: $o-kanban-color-border-width * 2;
}
}
addons/web/static/src/scss/kanban_examples_dialog.scss
+13 -13
View File
@@ -1,29 +1,29 @@
.o_kanban_examples_dialog {
.o-flex-display();
@include o-flex-display;
padding: 0px;
background: @odoo-color-silver;
background: $odoo-color-silver;
// sidebar
.o_kanban_examples_dialog_nav {
.o-flex(0, 0, auto);
border-right: 1px solid @gray-lighter-dark;
@include o-flex(0, 0, auto);
border-right: 1px solid $gray-lighter-dark;
background: white;
> ul > li {
margin: 0;
border-bottom: 1px solid @gray-lighter-dark;
border-bottom: 1px solid $gray-lighter-dark;
> a {
padding: 12px 15px;
color: @odoo-main-text-color;
color: $odoo-main-text-color;
border-left: 3px solid transparent;
&:focus {
outline: none;
}
}
&.active > a {
color: @headings-color;
border-left-color: @odoo-brand-optional;
color: $headings-color;
border-left-color: $odoo-brand-optional;
font-weight: bold;
}
}
@@ -31,28 +31,28 @@
// content
.o_kanban_examples_dialog_content {
.o-flex(1, 1, 100%);
@include o-flex(1, 1, 100%);
.o_kanban_examples_description {
padding: 16px 16px 0;
text-align: justify;
}
.o_kanban_examples {
.o-flex-display();
@include o-flex-display;
padding: 0 6px;
.o_kanban_examples_group {
.o-flex(1, 1, 100%);
@include o-flex(1, 1, 100%);
margin: 10px;
.o_kanban_examples_ghost {
padding: 5px;
margin-top: -1px;
border: thin solid @gray-lighter-dark;
border: thin solid $gray-lighter-dark;
background-color: white;
.o_ghost_content {
height: 12px;
background: @gray-lighter-dark;
background: $gray-lighter-dark;
&.o_ghost_tag {
display: inline-block;
width: 40%;
addons/web/static/src/scss/kanban_view.scss
+88 -224
View File
@@ -1,158 +1,22 @@
@o-kanban-record-margin: @odoo-horizontal-padding/2;
@o-kanban-group-padding: @odoo-horizontal-padding; // Cannot be higher than this
@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;
@o-kanban-header-title-height: 50px;
@o-kanban-image-width: 64px;
@o-kanban-inside-vgutter: 8px;
@o-kanban-inside-hgutter: 8px;
@o-kanban-color-border-width: 3px;
@o-kanban-inside-hgutter-mobile: @odoo-horizontal-padding;
@o-kanban-inner-hmargin: 5px;
@o-kanban-progressbar-height: 20px;
// ------- Kanban grouped mixins -------
.o-kanban-icon(@base-opacity: 0.5) {
display: block;
text-align: center;
color: @odoo-main-text-color;
font-size: @font-size-small;
cursor: pointer;
.o-hover-opacity(@base-opacity);
}
.o-kanban-tag-color(@size: 0) when (@size < @odoo-nb-ui-color) {
// Note: the 0 color is supposed to be invisible if there is a color field
// but it is used as a default color when there is no color field
&.o_tag_color_@{size} span {
background-color: ~"@{odoo-color-@{size}}";
}
.o-kanban-tag-color(@size + 1);
}
.o-kanban-record-color(@size: 1) when (@size < @odoo-nb-ui-color) {
// Note: the 0 color is not defined as it is the 'no color' for kanban
.oe_kanban_color_@{size}::after {
background-color: ~"@{odoo-color-@{size}}";
}
.o-kanban-record-color(@size + 1);
}
.o-kanban-slim-col() {
position: relative;
.o-flex(0, 0, auto);
margin: 0;
padding: 0 floor(@o-kanban-group-padding * 0.7);
cursor: pointer;
}
.o-kanban-header-title() {
.o-flex-display();
.o-align-items(center);
height: @o-kanban-header-title-height;
line-height: 2.2;
color: @headings-color;
}
.o-kanban-v-title() {
.o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2));
.o-transform-origin(left, bottom, @z: 0);
.o-transform(rotate(90deg));
overflow: visible;
white-space: nowrap;
font-size: 15px;
}
// ------- Kanban records mixins -------
.o-kanban-record-title(@font-size) {
color: @headings-color;
font-size: @font-size;
font-weight: 500;
margin-bottom: 0;
margin-top: 0;
}
.o-kanban-dropdown(@padding-base: @o-kanban-inside-vgutter) {
margin: -1px -1px auto auto; // compensate border
padding: @padding-base/2 @padding-base;
border: 1px solid transparent;
border-bottom: none;
vertical-align: top;
color: @text-color;
&:hover {
color: @headings-color;
}
&:focus, &:active, &:focus:active {
outline: none;
}
}
.o-kanban-dropdown-open() {
position: relative;
background: white;
border-color: @gray-lighter-darker;
z-index: @zindex-dropdown + 1;
}
.o-kanban-dropdown-menu() {
.o-position-absolute(@right: -1px);
margin-top: -1px;
border-color: @gray-lighter-darker;
}
.o-kanban-colorpicker() {
max-width: 150px;
padding: 3px (@odoo-dropdown-hpadding - @o-kanban-inner-hmargin) 3px @odoo-dropdown-hpadding;
> li {
display: inline-block;
margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
border: 1px solid white;
box-shadow: 0 0 0 1px @gray-lighter-dark;
> a {
display: block;
&::after {
content: "";
display: block;
width: 20px;
height: 15px;
}
}
// No Color
&:first-child > a {
position: relative;
&::before {
content: "";
.o-position-absolute(-2px, @left: 10px);
display: block;
width: 1px;
height: 20px;
.rotate(45deg);
background-color: red;
}
&::after {
background-color: white;
}
}
}
}
// ------- Kanban View Layout -------
.o_kanban_view {
.o-flex-display();
.o-align-content(stretch);
@include o-flex-display;
@include o-align-content(stretch);
overflow-x: visible;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
padding: 0px!important;
overflow-x: auto;
}
.o_kanban_record, .o_kanban_quick_create {
padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
border: 1px solid @gray-lighter-dark;
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
border: 1px solid $gray-lighter-dark;
background-color: white;
@media (max-width: @screen-xs-max) {
padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile;
@media (max-width: $screen-xs-max) {
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
}
&:focus, &:focus-within {
-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1);
@@ -165,7 +29,7 @@
.o_kanban_quick_create {
box-shadow: 0 0 20px -10px;
margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin;
margin: 0 $o-kanban-record-margin -1px $o-kanban-record-margin;
margin-bottom: 8px;
.o_form_view {
@@ -179,7 +43,7 @@
.o_kanban_record {
position: relative;
display: inline-block; // Force the creation of a block formatting context to clear float items
border-color: @gray-lighter-darker;
border-color: $gray-lighter-darker;
min-width: 150px;
margin: 0 0 -1px;
@@ -187,21 +51,21 @@
// Records colours
&::after {
content: "";
.o-position-absolute(0, auto, 0, -1px);
width: @o-kanban-color-border-width;
@include o-position-absolute(0, auto, 0, -1px);
width: $o-kanban-color-border-width;
}
// Inner Sections
.o_kanban_record_top, .o_kanban_record_body {
margin-bottom: @o-kanban-inner-hmargin;
margin-bottom: $o-kanban-inner-hmargin;
}
.o_kanban_record_top, .o_kanban_record_bottom {
.o-flex-display();
@include o-flex-display;
}
.o_kanban_record_top {
.o-align-items(flex-start);
@include o-align-items(flex-start);
.o_dropdown_kanban {
// For v11 layout, reset positioning to default to properly use
@@ -213,7 +77,7 @@
.o_kanban_record_headings {
line-height: 1.2;
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
// Ensure long word doesn't break out of container
word-wrap: break-word;
overflow: hidden;
@@ -221,22 +85,22 @@
}
.o_kanban_record_title {
.o-kanban-record-title (@font-size: 13px);
@include o-kanban-record-title($font-size: 13px);
}
.o_kanban_record_subtitle {
display: block;
margin-top: @o-kanban-inner-hmargin*0.5;
margin-top: $o-kanban-inner-hmargin*0.5;
}
.o_kanban_record_bottom {
.oe_kanban_bottom_left, .oe_kanban_bottom_right {
.o-flex-display();
.o-align-items(center);
@include o-flex-display;
@include o-align-items(center);
height: 20px;
}
.oe_kanban_bottom_left {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
> * {
margin-right: 6px;
@@ -249,7 +113,7 @@
}
}
.oe_kanban_bottom_right{
.o-flex(0, 1, auto);
@include o-flex(0, 1, auto);
.oe_kanban_avatar {
width: 20px;
@@ -258,9 +122,9 @@
}
}
.o_link_muted {
color: @text-color;
color: $text-color;
&:hover {
color: @brand-primary;
color: $brand-primary;
text-decoration: underline;
}
}
@@ -276,22 +140,22 @@
// ------- v11 Layout + generic layouts (~v10) -------
// Kanban Record - Dropdown
.o_dropdown_kanban {
.o-position-absolute(@o-kanban-inside-vgutter, @o-kanban-inside-hgutter);
@include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
visibility: hidden;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
visibility: visible;
}
.dropdown-toggle {
.o-kanban-dropdown();
margin: (-@o-kanban-inside-vgutter - 1px) (-@o-kanban-inside-hgutter - 1px) 0 0;
@include o-kanban-dropdown;
margin: (-$o-kanban-inside-vgutter - 1px) (-$o-kanban-inside-hgutter - 1px) 0 0;
}
&.open .dropdown-toggle {
.o-kanban-dropdown-open();
@include o-kanban-dropdown-open;
}
.dropdown-menu {
.o-kanban-dropdown-menu();
right: (-@o-kanban-inside-hgutter - 1);
@include o-kanban-dropdown-menu;
right: (-$o-kanban-inside-hgutter - 1);
}
}
@@ -301,13 +165,13 @@
// Kanban Record - Dropdown colorpicker
.oe_kanban_colorpicker {
.o-kanban-colorpicker();
@include o-kanban-colorpicker;
}
// Kanban Record - Inner elements
.o_field_many2manytags, .o_kanban_tags {
display: block;
margin-bottom: @o-kanban-inner-hmargin;
margin-bottom: $o-kanban-inner-hmargin;
line-height: 1.2;
.o_tag {
@@ -316,7 +180,7 @@
font-size: 11px;
font-weight: 500;
background-color: transparent;
.o-kanban-tag-color();
@include o-kanban-tag-color;
span {
display: inline-block;
@@ -342,9 +206,9 @@
margin-top: 15px;
> button, > a {
.o-position-absolute(@right: @o-kanban-record-margin, @bottom: @o-kanban-record-margin);
@media (max-width: @screen-xs-max) {
right: @o-kanban-inside-hgutter-mobile;
@include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
@media (max-width: $screen-xs-max) {
right: $o-kanban-inside-hgutter-mobile;
}
}
}
@@ -355,30 +219,30 @@
}
&.ui-sortable-helper {
.o-transform(rotate(-3deg));
@include o-transform(rotate(-3deg));
box-shadow: 0 5px 25px -10px black;
.transition(~"transform 0.6s, box-shadow 0.3s");
@include transition(transform 0.6s, box-shadow 0.3s);
}
.o_attachment_image > img {
width: 100%;
height: auto;
margin-bottom: @o-kanban-inner-hmargin;
margin-bottom: $o-kanban-inner-hmargin;
}
.o_progressbar {
.o-flex-display();
height: @o-kanban-progressbar-height;
@include o-flex-display;
height: $o-kanban-progressbar-height;
.o_progressbar_title {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
.o_progress {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
margin-top: 3px;
}
.o_progressbar_value {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
width: auto;
height: 100%;
text-align: right;
@@ -391,12 +255,12 @@
.o_kanban_image {
float: left;
width: @o-kanban-image-width;
width: $o-kanban-image-width;
+ div {
padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter;
@media (max-width: @screen-xs-max) {
padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter-mobile;
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
@media (max-width: $screen-xs-max) {
padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
}
}
}
@@ -404,10 +268,10 @@
.oe_kanban_details {
width: 100%;
ul {
margin-bottom: @o-kanban-inner-hmargin*0.5;;
margin-bottom: $o-kanban-inner-hmargin*0.5;;
padding-left: 0;
list-style: none;
font-size: @font-size-small;
font-size: $font-size-small;
li {
margin-bottom: 2px;
@@ -416,11 +280,11 @@
}
.o_kanban_footer {
.o-flex-display();
.o-justify-content(space-between);
.o-align-items(center);
@include o-flex-display;
@include o-justify-content(space-between);
@include o-align-items(center);
> * {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
}
@@ -442,7 +306,7 @@
&.o_kanban_grouped {
min-height: 100%;
padding: 0;
background-color: @gray-lighter;
background-color: $gray-lighter;
.o_kanban_record, .o_kanban_quick_create {
width: 100%;
@@ -451,21 +315,21 @@
}
&.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
width: @o-kanban-small-record-width + 2*@o-kanban-group-padding;
width: $o-kanban-small-record-width + 2*$o-kanban-group-padding;
}
}
// Kanban Grouped Layout - Column default
.o_kanban_group {
.o-flex(0, 0, auto);
padding: 0 @o-kanban-group-padding @o-kanban-group-padding @o-kanban-group-padding;
@include o-flex(0, 0, auto);
padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
.o_kanban_header > .o_kanban_header_title {
.o-kanban-header-title();
@include o-kanban-header-title;
.o_column_title {
.o-flex(1, 1, auto);
.o-text-overflow();
@include o-flex(1, 1, auto);
@include o-text-overflow;
font-size: 16px;
font-weight: 500;
}
@@ -475,26 +339,26 @@
}
.o_kanban_quick_add i {
.o-kanban-icon;
margin-left: @o-kanban-inside-hgutter*2;
@include o-kanban-icon;
margin-left: $o-kanban-inside-hgutter*2;
}
&:hover .o_kanban_config, .o_kanban_config.open {
visibility: visible;
margin-left: @o-kanban-inside-hgutter;
margin-left: $o-kanban-inside-hgutter;
}
.o_kanban_config {
visibility: hidden;
i {
.o-kanban-icon;
@include o-kanban-icon;
}
}
}
.o_kanban_load_more {
padding: @o-kanban-record-margin 0;
padding: $o-kanban-record-margin 0;
box-shadow: inset 0 10px 13px -13px black;
text-align: center;
}
@@ -504,11 +368,11 @@
}
&:not(.o_column_folded) {
width: @o-kanban-default-record-width + 2*@o-kanban-group-padding;
width: $o-kanban-default-record-width + 2*$o-kanban-group-padding;
}
&.o_kanban_dragged {
background-color: @odoo-main-text-color;
background-color: $odoo-main-text-color;
.o_kanban_record {
visibility: hidden;
@@ -522,8 +386,8 @@
// Kanban Grouped Layout - Column Folded
.o_kanban_group.o_column_folded {
.o-kanban-slim-col();
background-color: @gray-lighter-dark;
@include o-kanban-slim-col;
background-color: $gray-lighter-dark;
& + .o_kanban_group.o_column_folded {
margin-left: 1px;
@@ -534,10 +398,10 @@
opacity: 0.5;
.o_column_title {
.o-kanban-v-title();
@include o-kanban-v-title;
}
.o_column_unfold {
.o-kanban-icon(1);
@include o-kanban-icon(1);
}
}
@@ -558,7 +422,7 @@
cursor: pointer;
padding: 12px 16px;
white-space: nowrap;
color: @text-muted;
color: $text-muted;
opacity: 0.6;
&:hover {
opacity: 1;
@@ -567,7 +431,7 @@
.o_kanban_add_column {
display: inline-block;
padding: 10px 14px;
background-color: @odoo-color-silver-dark;
background-color: $odoo-color-silver-dark;
}
.o_kanban_title {
margin-left: 10px;
@@ -575,12 +439,12 @@
}
.o_quick_create_unfolded {
padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
width: @o-kanban-small-record-width;
padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
width: $o-kanban-small-record-width;
height: 100%;
border: none;
box-shadow: 0 0 20px -10px;
background-color: @gray-lighter;
background-color: $gray-lighter;
.o_kanban_header {
height: 50px;
@@ -601,7 +465,7 @@
}
.o_kanban_muted_record {
background: @gray-lighter-dark;
background: $gray-lighter-dark;
height: 70px;
margin: 10px 0px;
}
@@ -611,19 +475,19 @@
// Kanban UN-grouped Layout
&.o_kanban_ungrouped {
.o-flex-flow(row, wrap);
.o-justify-content(flex-start);
@include o-flex-flow(row, wrap);
@include o-justify-content(flex-start);
padding: @o-kanban-record-margin (@odoo-horizontal-padding - @o-kanban-record-margin);
padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin);
.o_kanban_record {
.o-flex(1, 1, auto);
width: @o-kanban-default-record-width;
margin: (@o-kanban-record-margin * 0.5) @o-kanban-record-margin;
@include o-flex(1, 1, auto);
width: $o-kanban-default-record-width;
margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
margin: 0 0 -1px 0;
.o-flex(1, 0, 100%);
@include o-flex(1, 0, 100%);
}
&.o_kanban_ghost {
@@ -639,10 +503,10 @@
&.o_kanban_mobile .o_kanban_record {
div.label {
.o-text-overflow();
@include o-text-overflow;
}
}
// Records colours
.o-kanban-record-color();
@include o-kanban-record-color;
}
addons/web/static/src/scss/kanban_view_mobile.scss
+8 -8
View File
@@ -1,27 +1,27 @@
@o-kanban-mobile-tabs-height: 40px;
$o-kanban-mobile-tabs-height: 40px;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_kanban_view.o_kanban_grouped {
display: block;
position: relative;
overflow: hidden;
.o_kanban_mobile_tabs {
height: @o-kanban-mobile-tabs-height;
height: $o-kanban-mobile-tabs-height;
position: relative;
background-color: #5E5E5E;
.o_kanban_mobile_tab {
.o-position-absolute(@left: 100%);
.o-transform(translateX(-50%));
height: @o-kanban-mobile-tabs-height;
@include o-position-absolute($left: 100%);
@include o-transform(translateX(-50%));
height: $o-kanban-mobile-tabs-height;
padding: 10px;
font-size: 14px;
color: white;
&.o_current {
font-weight: bold;
border-bottom: 3px solid @odoo-brand-optional;
border-bottom: 3px solid $odoo-brand-optional;
}
.o_column_title {
white-space: nowrap;
@@ -31,7 +31,7 @@
// [class] to get same specificity as elsewhere (kanban_view.less)
&[class] .o_kanban_group:not(.o_column_folded) {
.o-position-absolute(@top: @o-kanban-mobile-tabs-height, @left: 0, @bottom: 0);
@include o-position-absolute($top: $o-kanban-mobile-tabs-height, $left: 0, $bottom: 0);
overflow-x: scroll;
width: 100%;
padding: 0;
addons/web/static/src/scss/layout_background.scss
+10 -10
View File
@@ -1,9 +1,9 @@
.o_background_footer, .o_background_header, .o_report_layout_background {
font-family: 'Lato';
color: @gray;
color: $gray;
}
.o_background_header {
border-bottom: 1px solid @gray-lighter;
border-bottom: 1px solid $gray-lighter;
.company_address {
min-width: 300px;
}
@@ -13,19 +13,19 @@
margin-right: 16px;
}
h3 {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
font-weight: 700;
max-width: 300px;
}
}
.o_background_footer {
ul {
border-top: 1px solid @odoo-brand-primary;
border-bottom: 1px solid @odoo-brand-primary;
border-top: 1px solid $odoo-brand-primary;
border-bottom: 1px solid $odoo-brand-primary;
padding: 4px 0;
margin: 0 0 4px 0;
li {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
}
}
@@ -36,10 +36,10 @@
background-repeat: no-repeat;
min-height: 900px;
thead tr th, h2 {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
tbody {
color: @gray;
color: $gray;
tr:nth-child(odd) {
background-color: rgba(184, 171, 180, 0.2);
}
@@ -53,11 +53,11 @@
background-color: transparent !important;
}
tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.less*/
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
border-top: none !important;
}
tr:last-child td {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
}
#total {
addons/web/static/src/scss/layout_boxed.scss
+12 -12
View File
@@ -1,22 +1,22 @@
.o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
font-family: 'Lato';
color: @gray;
color: $gray;
font-size: 12px;
}
.o_boxed_header {
border-bottom: 1px solid @gray-lighter;
border-bottom: 1px solid $gray-lighter;
img {
max-height: 100px;
}
h4 {
color: @o-we-color-text-normal;
color: $o-we-color-text-normal;
font-weight: 700;
text-transform: uppercase;
}
}
.o_boxed_footer {
white-space: nowrap;
border-top: 3px solid @gray;
border-top: 3px solid $gray;
ul {
margin: 4px 0;
}
@@ -25,7 +25,7 @@
// This is not a general rule since the id is not used in all the reports,
// we should make a general structure for report body to use it everywhere
#informations {
border: 1px solid @gray;
border: 1px solid $gray;
padding-top: 10px;
margin: 0;
}
@@ -33,22 +33,22 @@
text-transform: uppercase;
}
table {
border: 1px solid @gray;
border: 1px solid $gray;
thead {
tr th {
border-bottom: 3px solid @gray !important;
border-bottom: 3px solid $gray !important;
text-transform: uppercase;
}
}
tbody {
color: @gray;
color: $gray;
tr {
td {
border-top: none;
border-right: 1px solid @gray;
border-right: 1px solid $gray;
}
td:last-child {
background-color: @gray-lighter;
background-color: $gray-lighter;
}
}
}
@@ -59,14 +59,14 @@
border-right: none;
}
tr:last-child td, tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.less*/
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
border-top: none !important;
}
tr:first-child td {
background-color: transparent;
}
tr:last-child td {
background-color: @gray;
background-color: $gray;
color: #fff;
}
}
addons/web/static/src/scss/layout_clean.scss
+11 -11
View File
@@ -10,16 +10,16 @@
}
.o_clean_footer {
margin: 0 3px;
border-top: 3px solid @odoo-brand-primary;
border-top: 3px solid $odoo-brand-primary;
h4 {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
font-weight: bolder;
}
.pagenumber {
width: 35px;
height: 35px;
border: 3px solid @odoo-brand-primary;
background-color: @odoo-brand-optional;
border: 3px solid $odoo-brand-primary;
background-color: $odoo-brand-optional;
color: white;
padding-top: 6px;
text-align: center;
@@ -27,18 +27,18 @@
}
.o_report_layout_clean {
h1, h2, h3 {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
font-weight: bolder;
}
strong {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
}
table {
thead {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
tr th {
text-align: left !important;
border-top: 3px solid @odoo-brand-primary !important;
border-top: 3px solid $odoo-brand-primary !important;
text-transform: uppercase;
}
tr th:last-child {
@@ -54,7 +54,7 @@
border-top: none;
}
tr:last-child td {
border-bottom: 3px solid @odoo-brand-primary;
border-bottom: 3px solid $odoo-brand-primary;
}
tr {
td {
@@ -74,10 +74,10 @@
top: -20px;
> table {
tr:last-child td {
border-top: 1px solid @gray-lighter !important;
border-top: 1px solid $gray-lighter !important;
}
tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.less*/
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
border-top: none !important;
}
}
addons/web/static/src/scss/list_view.scss
+18 -18
View File
@@ -1,9 +1,9 @@
@odoo-list-group-header-color: lighten(@odoo-brand-lightsecondary, 10%);
$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
.o_list_view {
position: relative;
cursor: pointer;
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
margin-bottom: 0px;
&.table {
@@ -13,7 +13,7 @@
}
thead {
color: @odoo-main-text-color;
color: $odoo-main-text-color;
border-bottom: 1px solid #cacaca;
> tr > th {
border-left: 1px solid #dfdfdf;
@@ -25,16 +25,16 @@
tfoot {
cursor: default;
color: @odoo-list-footer-color;
background-color: @odoo-list-footer-bg-color;
font-weight: @odoo-list-footer-font-weight;
color: $odoo-list-footer-color;
background-color: $odoo-list-footer-bg-color;
font-weight: $odoo-list-footer-font-weight;
border-top: 2px solid #cacaca;
border-bottom: 1px solid #cacaca;
}
.o_column_sortable {
position: relative;
.user-select(none); // Prevent unwanted selection while sorting
@include user-select(none); // Prevent unwanted selection while sorting
&::after {
font-family: FontAwesome;
@@ -61,7 +61,7 @@
opacity: 0.3;
}
&.o-sort-up, &.o-sort-down {
color: @headings-color;
color: $headings-color;
&::after {
opacity: 1;
}
@@ -88,7 +88,7 @@
font-style: italic;
}
.text-muted {
color: lighten(@text-muted, 10%);
color: lighten($text-muted, 10%);
}
// Grouped list views
@@ -100,14 +100,14 @@
}
.o_group_pager {
cursor: text;
.user-select(none);
@include user-select(none);
text-align: right;
padding-top: 0;
padding-bottom: 0;
.o_pager_previous, .o_pager_next {
background-color: @odoo-list-group-header-color;
background-color: $odoo-list-group-header-color;
&:hover {
background-color: darken(@odoo-list-group-header-color, 10%);
background-color: darken($odoo-list-group-header-color, 10%);
}
}
}
@@ -118,11 +118,11 @@
tbody {
tr:focus-within {
background-color: @odoo-form-lightsecondary;
background-color: $odoo-form-lightsecondary;
}
tr{
.focussed {
background-color: @odoo-form-lightsecondary;
background-color: $odoo-form-lightsecondary;
}
}
}
@@ -167,7 +167,7 @@
// Field widgets override
> .o_field_widget {
.o-position-absolute(0, 0, auto, 0);
@include o-position-absolute(0, 0, auto, 0);
min-height: 100%;
&:not(.o_field_text) {
@@ -182,11 +182,11 @@
}
}
> .o_field_translate {
.o-position-absolute(0, 5px);
@include o-position-absolute(0, 5px);
width: 16px; // to have some space on the right
}
.o_input {
padding: @table-condensed-cell-padding;
padding: $table-condensed-cell-padding;
background-color: white;
.o_input {
@@ -210,7 +210,7 @@
padding-right: 15px; // To prevent caret overlapping
}
> .o_dropdown_button, .o_datepicker_button {
.o-position-absolute(20%, 5px);
@include o-position-absolute(20%, 5px);
}
}
.o_field_widget > .o_external_button {
addons/web/static/src/scss/list_view_extra.scss
+1 -1
View File
@@ -5,6 +5,6 @@
}
tbody > tr.o_group_header {
.o-vertical-gradient(#fcfcfc, #dedede);
@include o-vertical-gradient(#fcfcfc, #dedede);
}
}
addons/web/static/src/scss/mimetypes.scss
+2 -1
View File
@@ -1,6 +1,7 @@
.o_image {
.square(38px);
display: inline-block;
width: 38px;
height: 38px;
background-image: url('/web/static/src/img/mimetypes/unknown.svg');
background-size: contain;
addons/web/static/src/scss/modal.scss
+12 -12
View File
@@ -13,8 +13,8 @@
}
.o_modal_header {
.o-webclient-padding(@top: 10px, @bottom: 10px);
.clearfix();
@include o-webclient-padding($top: 10px, $bottom: 10px);
@include clearfix;
.o_search_options {
display: inline-block;
@@ -31,7 +31,7 @@
}
@media (min-width: @screen-sm-min) {
@media (min-width: $screen-sm-min) {
.modal-dialog {
height: 100%;
padding: 30px 0;
@@ -39,11 +39,11 @@
.modal-content {
max-height: 100%;
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
.modal-header, .modal-footer {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
.modal-body {
@@ -54,15 +54,15 @@
&.o_dialog_error {
overflow: visible;
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
> .alert, > button {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
> .o_error_detail {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
min-height: 0;
overflow: auto;
}
@@ -74,10 +74,10 @@
}
// Temporary fix for modals which are not instantiated thanks to the Dialog
// JS classes (deprecated case) (see bootstrap_overridden.less) + Frontend.
// JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend.
//
// TODO the following code was disabled because it is saas-incompatible
//
// :not(body) > .modal {
// z-index: @zindex-modal-background + 1;
// z-index: $zindex-modal-background + 1;
// }
addons/web/static/src/scss/model_field_selector.scss
+27 -27
View File
@@ -3,9 +3,9 @@
position: relative;
> .o_field_selector_value {
.o-flex-display();
.o-flex-flow(row, wrap);
.o-align-items(center);
@include o-flex-display;
@include o-flex-flow(row, wrap);
@include o-align-items(center);
height: 100%;
min-height: 20px; // needed when there is no value in it and used standalone
&:active, &:focus, &:active:focus {
@@ -14,34 +14,34 @@
> .o_field_selector_chain_part {
padding: 0px 1px;
border: 1px solid darken(@odoo-brand-lightsecondary, 10%);
background: @odoo-brand-lightsecondary;
border: 1px solid darken($odoo-brand-lightsecondary, 10%);
background: $odoo-brand-lightsecondary;
margin-bottom: 1px;
}
> i {
.o-align-self(center);
@include o-align-self(center);
margin: 0 2px;
font-size: 10px;
}
}
> .o_field_selector_controls {
.o-position-absolute(0, 0, 1px);
.o-flex-display();
.o-align-items(center);
@include o-position-absolute(0, 0, 1px);
@include o-flex-display;
@include o-align-items(center);
cursor: pointer;
}
&.o_edit_mode {
> .o_field_selector_controls::after {
.o-caret-down();
@include o-caret-down;
}
> .o_field_selector_popover {
@o-field-selector-arrow-height: 7px;
.o-position-absolute(@top: 100%, @left: 0);
$o-field-selector-arrow-height: 7px;
@include o-position-absolute($top: 100%, $left: 0);
z-index: 1051;
width: 265px;
margin-top: @o-field-selector-arrow-height;
margin-top: $o-field-selector-arrow-height;
background: white;
box-shadow: 0 3px 10px rgba(0,0,0,.4);
@@ -51,38 +51,38 @@
.o_field_selector_popover_header {
color: white;
background: @brand-primary;
background: $brand-primary;
font-weight: bold;
padding: 5px 0 5px 0.4em;
.o_field_selector_title {
width: 100%;
.o-text-overflow();
@include o-text-overflow;
padding: 0px 35px;
text-align: center;
}
.o_field_selector_popover_option {
.o-position-absolute(@top: 0);
@include o-position-absolute($top: 0);
padding: 7px 8px 8px 6px;
&.o_prev_page {
left: 0;
border-right: 1px solid darken(@brand-primary, 10%);
border-right: 1px solid darken($brand-primary, 10%);
}
&.o_field_selector_close {
right: 0;
border-left: 1px solid darken(@brand-primary, 10%);
border-left: 1px solid darken($brand-primary, 10%);
}
&:hover {
background: darken(@brand-primary, 10%);
background: darken($brand-primary, 10%);
}
}
&:before {
.o-position-absolute(@top: -@o-field-selector-arrow-height, @left: @o-field-selector-arrow-height);
@include o-position-absolute($top: -$o-field-selector-arrow-height, $left: $o-field-selector-arrow-height);
content: "";
border-left: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
border-right: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
border-bottom: @o-field-selector-arrow-height solid @brand-primary;
border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
border-bottom: $o-field-selector-arrow-height solid $brand-primary;
}
}
.o_field_selector_popover_body {
@@ -109,16 +109,16 @@
font-size: 12px;
}
.o_field_selector_relation_icon {
.o-position-absolute(@top: 0, @right: 0, @bottom: 0);
.o-flex-display();
.o-align-items(center);
@include o-position-absolute($top: 0, $right: 0, $bottom: 0);
@include o-flex-display;
@include o-align-items(center);
padding: 10px;
}
}
}
}
.o_field_selector_popover_footer {
background: @brand-primary;
background: $brand-primary;
padding: 5px 0.4em;
> input {
addons/web/static/src/scss/navbar.scss
+33 -35
View File
@@ -1,26 +1,26 @@
.o_main_navbar {
position: relative;
height: @odoo-navbar-height;
border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
background-color: @odoo-brand-primary;
height: $odoo-navbar-height;
border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
background-color: $odoo-brand-primary;
color: white;
> a, > button {
float: left;
height: @odoo-navbar-height;
height: $odoo-navbar-height;
border: none;
padding: 0 @odoo-horizontal-padding - 4px 0 @odoo-horizontal-padding;
line-height: @odoo-navbar-height;
padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding;
line-height: $odoo-navbar-height;
background-color: transparent;
text-align: center;
color: inherit;
font-size: 18px;
.user-select(none);
@include user-select(none);
&:hover, &:focus {
background-color: @odoo-navbar-inverse-link-hover-bg;
background-color: $odoo-navbar-inverse-link-hover-bg;
color: inherit;
}
&:focus, &:active, &:focus:active {
@@ -32,16 +32,16 @@
display: block;
float: left;
margin-right: 35px;
.user-select(none);
@include user-select(none);
color: white;
font-size: 22px;
font-weight: 500;
line-height: @odoo-navbar-height;
line-height: $odoo-navbar-height;
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
float: none;
margin: 0;
border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
color: transparent;
}
}
@@ -64,13 +64,13 @@
> a {
display: block;
height: @odoo-navbar-height;
height: $odoo-navbar-height;
padding: 0 10px;
color: white;
line-height: @odoo-navbar-height;
line-height: $odoo-navbar-height;
&:hover {
background-color: @odoo-navbar-inverse-link-hover-bg;
background-color: $odoo-navbar-inverse-link-hover-bg;
}
&:focus, &:active, &:focus:active {
@@ -80,7 +80,7 @@
&.o_extra_menu_items {
> a {
width: @odoo-navbar-height;
width: $odoo-navbar-height;
text-align: center;
}
&.open > ul {
@@ -88,12 +88,12 @@
> li {
> a {
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
color: white;
border-bottom: 1px solid @odoo-brand-lightsecondary;
border-bottom: 1px solid $odoo-brand-lightsecondary;
&.dropdown-toggle {
background-color: lighten(@odoo-brand-primary, 15%);
background-color: lighten($odoo-brand-primary, 15%);
pointer-events: none; // hack to prevent clicking on it because dropdown always opened
}
}
@@ -125,36 +125,34 @@
overflow: auto;
margin-top: 0;
.o-menu-indentation(@index) when (@index < 6) {
> li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} {
padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px;
@for $index from 3 through 5 {
> li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} {
padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px;
}
.o-menu-indentation(@index + 1);
}
.o-menu-indentation(3);
}
.open .dropdown-toggle {
background-color: @odoo-navbar-inverse-link-hover-bg;
background-color: $odoo-navbar-inverse-link-hover-bg;
}
.o_user_menu {
margin-left: 6px;
> a {
padding-right: @odoo-horizontal-padding;
padding-right: $odoo-horizontal-padding;
}
.oe_topbar_avatar {
height: 17px;
.o-transform(translateY(-2px));
@include o-transform(translateY(-2px));
}
}
@media (max-width: @screen-xs-max) {
.o-transition(height, 200ms, linear);
@media (max-width: $screen-xs-max) {
@include o-transition(height, 200ms, linear);
position: relative;
height: @odoo-navbar-height;
height: $odoo-navbar-height;
overflow: hidden;
> ul {
@@ -188,15 +186,15 @@
}
&.o_menu_systray {
.o-position-absolute(0px, @odoo-navbar-height, auto, @odoo-navbar-height);
height: @odoo-navbar-height;
@include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height);
height: $odoo-navbar-height;
text-align: right;
> li {
display: inline-block;
&.open .dropdown-menu {
.o-position-absolute(@odoo-navbar-height, 0, 0, 0);
@include o-position-absolute($odoo-navbar-height, 0, 0, 0);
position: fixed;
width: auto;
}
@@ -210,7 +208,7 @@
}
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
body.o_mobile_menu_opened {
overflow: hidden;
height: 100%;
@@ -223,7 +221,7 @@
}
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_switch_company_menu > .dropdown-menu {
padding-top: 0px;
li.bg-info {
addons/web/static/src/scss/pivot_view.scss
+14 -14
View File
@@ -5,36 +5,36 @@
// items corresponding to the clicked cell
&.o_enable_linking {
.o_pivot_cell_value:hover {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
cursor: pointer;
}
}
table {
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
width: auto; // bootstrap override
th {
font-weight: normal; // bootstrap override
background-color: lighten(@odoo-brand-secondary, 40%);
background-color: lighten($odoo-brand-secondary, 40%);
}
.o-pivot-header-cell() {
background-color: lighten(@odoo-brand-secondary, 40%);
@mixin o-pivot-header-cell {
background-color: lighten($odoo-brand-secondary, 40%);
cursor: pointer;
white-space: nowrap;
.user-select(none);
@include user-select(none);
&:hover {
background-color: lighten(@odoo-brand-secondary, 30%);
background-color: lighten($odoo-brand-secondary, 30%);
}
}
.o_pivot_measure_row {
.o-pivot-header-cell;
@include o-pivot-header-cell;
}
.o_pivot_header_cell_closed {
.o-pivot-header-cell;
@include o-pivot-header-cell;
&::before {
font-family: FontAwesome;
content: "";
@@ -43,7 +43,7 @@
}
.o_pivot_header_cell_opened {
.o-pivot-header-cell;
@include o-pivot-header-cell;
&::before {
font-family: FontAwesome;
content: "";
@@ -52,18 +52,18 @@
}
.o_pivot_measure_row_sorted_asc::after {
.o-caret-down;
@include o-caret-down;
margin-left: 5px;
}
.o_pivot_measure_row_sorted_desc::after {
.o-caret-up;
@include o-caret-up;
margin-left: 5px;
}
}
.o_pivot_field_selection::after {
.o-caret-right;
@include o-caret-right;
position: absolute;
right: 6px;
top: 9px;
@@ -74,5 +74,5 @@
// Control panel buttons
// ------------------------------------------------------------------
.o_pivot_measures_list {
.o-selected-li;
@include o-selected-li;
}
addons/web/static/src/scss/progress_bar.scss
+3 -3
View File
@@ -14,16 +14,16 @@
height: 15px;
vertical-align: middle;
border: 1px solid lighten(@odoo-brand-secondary, 25%);
border: 1px solid lighten($odoo-brand-secondary, 25%);
overflow: hidden;
background-color: white;
&.o_progress_overflow {
background-color: @odoo-brand-secondary;
background-color: $odoo-brand-secondary;
}
.o_progressbar_complete {
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
height: 100%;
}
}
addons/web/static/src/scss/rainbow.scss
+55 -55
View File
@@ -1,42 +1,42 @@
/************** rainbow *****************/
// Variables
@reward-size: 400px;
@reward-size-mobile: 300px;
@reward-text-color: #727880;
@reward-base-time: 1.4s;
$reward-size: 400px;
$reward-size-mobile: 300px;
$reward-text-color: #727880;
$reward-base-time: 1.4s;
// o_reward
.o_reward {
will-change: transform;
z-index: @zindex-modal;
z-index: $zindex-modal;
padding: 50px;
margin: -5% auto 0 -(@reward-size / 2);
@media (max-width: @screen-xs-max) {
margin: -5% auto 0 -(@reward-size-mobile / 2);
margin: -5% auto 0 -($reward-size / 2);
@media (max-width: $screen-xs-max) {
margin: -5% auto 0 -($reward-size-mobile / 2);
}
background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
.o-animation(reward-fading, @reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
.o-position-absolute(20%, auto, auto, 50%);
.size(@reward-size, @reward-size);
@media (max-width: @screen-xs-max) {
.size(@reward-size-mobile, @reward-size-mobile);
@include o-animation(reward-fading, $reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
@include o-position-absolute(20%, auto, auto, 50%);
@include size($reward-size, $reward-size);
@media (max-width: $screen-xs-max) {
@include size($reward-size-mobile, $reward-size-mobile);
}
&.o_reward_fading {
display: block;
.o-animation(reward-fading-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
@include o-animation(reward-fading-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
.o_reward_face_group {
.o-animation(reward-jump-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
@include o-animation(reward-jump-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
}
.o_reward_rainbow {
path {
.o-animation(reward-rainbow-reverse, (@reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
@include o-animation(reward-rainbow-reverse, ($reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
}
}
@@ -53,15 +53,15 @@
fill: none;
stroke-linecap: round;
stroke-width: 21px;
.o-animation(reward-rainbow, (@reward-base-time ), ease-out, 0s, 1, normal, forwards);
@include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards);
}
}
.o_reward_face_group {
transform-origin: center;
.o-animation(reward-jump, @reward-base-time * 0.8, ease-in-out);
.o-position-absolute(6%, 0, 0, 0);
.size(100%, 60%);
@include o-animation(reward-jump, $reward-base-time * 0.8, ease-in-out);
@include o-position-absolute(6%, 0, 0, 0);
@include size(100%, 60%);
}
.o_reward_face {
@@ -70,25 +70,25 @@
position: relative;
border-radius: 100%;
background: center center / contain no-repeat;
.o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
.size(34%, 56.67%);
@include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
@include size(34%, 56.67%);
}
.o_reward_stars {
display: block;
.size(@reward-size * 0.75, @reward-size / 2);
@media (max-width: @screen-xs-max) {
.size(@reward-size-mobile * 0.75, @reward-size-mobile / 2);
@include size($reward-size * 0.75, $reward-size / 2);
@media (max-width: $screen-xs-max) {
@include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
}
.o-position-absolute(18%, 7%);
@include o-position-absolute(18%, 7%);
svg {
transform-origin: center center;
.o-position-absolute(28%, @left:3%);
.o-animation(reward-stars, @reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
@include o-position-absolute(28%, $left:3%);
@include o-animation(reward-stars, $reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
&.star2, &.star4 {
.o-animation(reward-stars, (@reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
@include o-animation(reward-stars, ($reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
}
&.star2 {
@@ -112,8 +112,8 @@
.o_reward_thumbup {
width: 40px;
display: block;
.o-animation(reward-scale, @reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
.o-position-absolute(63%, auto, auto, 65%);
@include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
@include o-position-absolute(63%, auto, auto, 65%);
}
.o_reward_msg_container {
@@ -123,15 +123,15 @@
margin-left: 15%;
// Translate before animate
.o-transform(translateY(5px));
@include o-transform(translateY(5px));
.o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate-reverse);
.o-position-absolute(85%, auto, auto, 0%);
@include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse);
@include o-position-absolute(85%, auto, auto, 0%);
.o_reward_thumb_right {
height: 40px;
z-index: 1;
.o-position-absolute(0, auto, auto, 16%);
@include o-position-absolute(0, auto, auto, 16%);
}
.o_reward_msg {
@@ -153,21 +153,21 @@
position: relative;
font-family: sans-serif;
text-align: left;
color: @reward-text-color;
color: $reward-text-color;
}
.o_reward_shadow_container {
.o-transform(~"translateY(0px) rotateZ(0)");
.o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
@include o-transform(translateY(0px) rotateZ(0));
@include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
}
.o_reward_shadow {
.size(100%, 12px);
@include size(100%, 12px);
background-color: #e7eaf0;
border-radius: 100%;
.o-transform(~"scale(0.8) rotateZ(0)");
.o-animation(reward-scale, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
.o-position-absolute(auto, auto, -40px, 0);
@include o-transform(scale(0.8) rotateZ(0));
@include o-animation(reward-scale, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
@include o-position-absolute(auto, auto, -40px, 0);
}
}
}
@@ -189,25 +189,25 @@
@keyframes reward-jump {
0% {
.o-transform(~"scale(0.5)");
@include o-transform(scale(0.5));
}
50% {
.o-transform(~"scale(1.05)");
@include o-transform(scale(1.05));
}
to {
.o-transform(~"scale(1)");
@include o-transform(scale(1));
}
}
@keyframes reward-jump-reverse {
0% {
.o-transform(~"scale(1)");
@include o-transform(scale(1));
}
50% {
.o-transform(~"scale(1.05)");
@include o-transform(scale(1.05));
}
to {
.o-transform(~"scale(0.5)");
@include o-transform(scale(0.5));
}
}
@@ -228,30 +228,30 @@
@keyframes reward-float {
from {
.o-transform(~"translateY(0px)");
@include o-transform(translateY(0px));
}
to {
.o-transform(~"translateY(5px)");
@include o-transform(translateY(5px));
}
}
@keyframes reward-stars {
from {
.o-transform(~"scale(0.3) rotate(0deg)");
@include o-transform(scale(0.3) rotate(0deg));
}
50% {
.o-transform(~"scale(1.0) rotate(20deg)");
@include o-transform(scale(1.0) rotate(20deg));
}
to {
.o-transform(~"scale(0.3) rotate(80deg)");
@include o-transform(scale(0.3) rotate(80deg));
}
}
@keyframes reward-scale {
from {
.o-transform(~"scale(0.8)");
@include o-transform(scale(0.8));
}
to {
.o-transform(~"scale(1.0)");
@include o-transform(scale(1.0));
}
}
addons/web/static/src/scss/search_view.scss
+51 -51
View File
@@ -1,55 +1,55 @@
.o-search-options-dropdown-custom-li() {
@mixin o-search-options-dropdown-custom-li {
margin: 3px 25px;
width: auto;
max-width: 250px;
}
.o_searchview {
.o-flex-display();
.o-flex-flow(row, wrap);
.o-align-items(flex-end);
@include o-flex-display;
@include o-flex-flow(row, wrap);
@include o-align-items(flex-end);
position: relative;
padding: 0 20px 1px 0;
.o_searchview_facet {
@o-searchview-facet-remove-width: 18px;
$o-searchview-facet-remove-width: 18px;
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
max-width: 100%;
.o-flex-display();
@include o-flex-display;
position: relative;
margin: 1px 3px 0 0;
.o_searchview_facet_label {
.o-flex(0, 0, auto);
.o-text-overflow();
@include o-flex(0, 0, auto);
@include o-text-overflow;
padding: 0 3px;
color: white;
.o-flex-display();
.o-align-items(center);
@include o-flex-display;
@include o-align-items(center);
}
.o_facet_values {
padding: 0 @o-searchview-facet-remove-width 0 5px;
padding: 0 $o-searchview-facet-remove-width 0 5px;
.o_facet_values_sep {
font-style: italic;
}
}
.o_facet_remove {
.o-flex(0, 0, auto);
.o-flex-display();
.o-justify-content(center);
.o-align-items(center);
.o-position-absolute(0, 0, 0);
width: @o-searchview-facet-remove-width;
@include o-flex(0, 0, auto);
@include o-flex-display;
@include o-justify-content(center);
@include o-align-items(center);
@include o-position-absolute(0, 0, 0);
width: $o-searchview-facet-remove-width;
cursor: pointer;
}
}
.o_searchview_input {
width: 100px;
.o-flex(1, 0, auto);
@include o-flex(1, 0, auto);
}
.o_searchview_more {
@@ -58,7 +58,7 @@
}
.o_searchview_autocomplete {
.o-position-absolute(100%, @left: auto);
@include o-position-absolute(100%, $left: auto);
width: 100%;
li {
@@ -75,14 +75,14 @@
background-color: inherit;
}
&.o-expand, &.o-expanded { // caret
.o-position-absolute(@left: 6px);
@include o-position-absolute($left: 6px);
padding: 3px;
}
&.o-expand:before {
.o-caret-right;
@include o-caret-right;
}
&.o-expanded:before {
.o-caret-down;
@include o-caret-down;
}
}
}
@@ -101,18 +101,18 @@
display: inline-block;
cursor: pointer;
.user-select(none); // Prevent text selection when toggling the dropdowns
@include user-select(none); // Prevent text selection when toggling the dropdowns
> a { // dropdown togglers
color: @odoo-main-text-color;
color: $odoo-main-text-color;
&:hover {
text-decoration: none;
font-weight: bold;
color: darken(@odoo-main-text-color, 10%);
color: darken($odoo-main-text-color, 10%);
}
}
&.open > a {
font-weight: bold;
color: darken(@odoo-main-text-color, 10%);
color: darken($odoo-main-text-color, 10%);
}
}
@@ -122,33 +122,33 @@
.o_closed_menu {
position: relative;
a:before {
.o-caret-right;
.o-position-absolute(@top: 50%, @left: 10px);
margin-top: (-@caret-width-base);
@include o-caret-right;
@include o-position-absolute($top: 50%, $left: 10px);
margin-top: (-$caret-width-base);
}
}
.o_open_menu {
position: relative;
a:before {
.o-caret-down;
.o-position-absolute(@top: 50%, @left: 10px);
margin-top: (-@caret-width-base);
@include o-caret-down;
@include o-position-absolute($top: 50%, $left: 10px);
margin-top: (-$caret-width-base);
}
}
// Filters
.o_filters_menu {
.o-selected-li;
max-height: ~"calc(100vh - 125px)";
@include o-selected-li;
max-height: calc(100vh - 125px);
overflow: auto;
.o_filter_condition {
.o-search-options-dropdown-custom-li;
@include o-search-options-dropdown-custom-li;
margin-bottom: 8px;
.o_or_filter { // or between conditions
display: none; // hidden for the first condition
.o-position-absolute(@top: 7px, @left: -18px);
@include o-position-absolute($top: 7px, $left: -18px);
}
}
.o_filter_condition + .o_filter_condition {
@@ -161,31 +161,31 @@
}
.o_searchview_extended_prop_value { // date fields: datepicker position
.datepickerbutton {
.o-position-absolute(3px, -20px);
@include o-position-absolute(3px, -20px);
cursor: pointer;
}
}
.o_searchview_extended_delete_prop { // delete condition button position
.o-position-absolute(3px, -18px);
@include o-position-absolute(3px, -18px);
cursor: pointer;
}
.o_add_filter_menu { // apply and add buttons
display: none; // Needed by the webclient
.o-search-options-dropdown-custom-li;
@include o-search-options-dropdown-custom-li;
}
}
// Group By
.o_group_by_menu {
.o-selected-li;
max-height: ~"calc(100vh - 125px)";
@include o-selected-li;
max-height: calc(100vh - 125px);
overflow: auto;
.divider {display: none;} // hide the divider by default (no group)
.o_add_group { // add button
display: none; // Needed by the webclient
.o-search-options-dropdown-custom-li;
@include o-search-options-dropdown-custom-li;
}
}
@@ -193,15 +193,15 @@
.o_favorites_menu {
max-height: 75vh;
overflow-y: auto;
.o-selected-li;
max-height: ~"calc(100vh - 125px)";
@include o-selected-li;
max-height: calc(100vh - 125px);
overflow: auto;
.divider {display: none;} // hide the divider by default (no favorite)
.o-searchview-custom-private, .o-searchview-custom-public {
.o-remove-filter {
.o-position-absolute(50%, 12px);
@include o-position-absolute(50%, 12px);
margin-top: -6px;
cursor: pointer;
}
@@ -214,7 +214,7 @@
}
.o_save_name { // save button
display: none; // hidden by default
.o-search-options-dropdown-custom-li;
@include o-search-options-dropdown-custom-li;
}
}
}
addons/web/static/src/scss/search_view_extra.scss
+9 -9
View File
@@ -1,21 +1,21 @@
.o_searchview {
background-color: white;
border: 1px solid #ccc;
border-radius: @border-radius-base;
border-radius: $border-radius-base;
padding: 1px 25px 3px 5px;
.o_searchview_facet {
border: 1px solid @gray-light;
background: lighten(@odoo-brand-primary, 35%);
border: 1px solid $gray-light;
background: lighten($odoo-brand-primary, 35%);
.o_searchview_facet_label {
background-color: @gray-light;
background-color: $gray-light;
}
.o_facet_remove {
color: @gray-light;
color: $gray-light;
&:hover {
color: @gray;
color: $gray;
}
}
}
@@ -25,10 +25,10 @@
padding: 4px 0 0 0;
}
.o_searchview_more {
.o-position-absolute(@top: 6px, @right: 5px);
@include o-position-absolute($top: 6px, $right: 5px);
}
.o_searchview_autocomplete li.o-selection-focus {
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
> a {
color: white;
}
@@ -38,6 +38,6 @@
// Search options: inputs and selects style
.o_search_options {
input[type="text"], select {
.form-control();
@extend .form-control; // FIXME was a mixin before scss convertion
}
}
addons/web/static/src/scss/tooltip.scss
+9 -9
View File
@@ -7,17 +7,17 @@
.tooltip-inner {
max-width: 300px; // fallback for browsers which do not support "vw" unit
max-width: 100vw;
background-color: @odoo-tooltip-background-color;
color: @odoo-tooltip-color;
border-radius: @border-radius-base;
box-shadow: 0px 0px 1px 1px @odoo-brand-secondary;
background-color: $odoo-tooltip-background-color;
color: $odoo-tooltip-color;
border-radius: $border-radius-base;
box-shadow: 0px 0px 1px 1px $odoo-brand-secondary;
padding: 5px;
text-align: left;
.oe_tooltip_string {
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
color: white;
font-weight: bold;
padding: 5px;
@@ -42,18 +42,18 @@
}
&.top, &.top-left, &.top-right {
.tooltip-arrow {
border-top-color: @odoo-tooltip-arrow-color!important;
border-top-color: $odoo-tooltip-arrow-color!important;
}
}
&.bottom, &.bottom-left, &.bottom-right {
.tooltip-arrow {
border-bottom-color: @odoo-tooltip-arrow-color!important;
border-bottom-color: $odoo-tooltip-arrow-color!important;
}
}
&.left .tooltip-arrow {
border-left-color: @odoo-tooltip-arrow-color!important;
border-left-color: $odoo-tooltip-arrow-color!important;
}
&.right .tooltip-arrow {
border-right-color: @odoo-tooltip-arrow-color!important;
border-right-color: $odoo-tooltip-arrow-color!important;
}
}
addons/web/static/src/scss/ui.scss
+2 -2
View File
@@ -3,9 +3,9 @@
}
.o_text_overflow {
.o-text-overflow();
@include o-text-overflow;
}
.ui-autocomplete {
z-index: @zindex-modal + 1;
z-index: $zindex-modal + 1;
}
addons/web/static/src/scss/utils.scss
+131 -122
View File
@@ -5,53 +5,53 @@
// ------------------------------------------------------------------
// Padding
// ------------------------------------------------------------------
.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
padding-top: @top;
padding-right: @right;
padding-bottom: @bottom;
padding-left: @left;
@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) {
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
padding-left: $left;
}
// ------------------------------------------------------------------
// Caret
// ------------------------------------------------------------------
.utils-caret-boilerplate() {
@mixin utils-caret-boilerplate {
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
}
.o-caret-down(@caret-width: @caret-width-base) {
.utils-caret-boilerplate;
@mixin o-caret-down($caret-width: $caret-width-base) {
@include utils-caret-boilerplate;
border-bottom: 0;
border-left: @caret-width solid transparent;
border-right: @caret-width solid transparent;
border-top: @caret-width solid;
border-left: $caret-width solid transparent;
border-right: $caret-width solid transparent;
border-top: $caret-width solid;
-moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-up(@caret-width: @caret-width-base) {
.utils-caret-boilerplate;
border-bottom: @caret-width solid;
border-left: @caret-width solid transparent;
border-right: @caret-width solid transparent;
@mixin o-caret-up($caret-width: $caret-width-base) {
@include utils-caret-boilerplate;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
border-right: $caret-width solid transparent;
border-top: 0;
-moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-left(@caret-width: @caret-width-base) {
.utils-caret-boilerplate;
border-bottom: @caret-width solid transparent;
@mixin o-caret-left($caret-width: $caret-width-base) {
@include utils-caret-boilerplate;
border-bottom: $caret-width solid transparent;
border-left: 0;
border-right: @caret-width solid;
border-top: @caret-width solid transparent;
border-right: $caret-width solid;
border-top: $caret-width solid transparent;
-moz-transform: scale(0.9999); // Smooth the caret on firefox
}
.o-caret-right(@caret-width: @caret-width-base) {
.utils-caret-boilerplate;
border-bottom: @caret-width solid transparent;
border-left: @caret-width solid;
@mixin o-caret-right($caret-width: $caret-width-base) {
@include utils-caret-boilerplate;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
border-right: 0;
border-top: @caret-width solid transparent;
border-top: $caret-width solid transparent;
-moz-transform: scale(0.9999); // Smooth the caret on firefox
}
@@ -59,7 +59,7 @@
// Vendor prefixes
// ------------------------------------------------------------------
// Flex
.o-flex-display() {
@mixin o-flex-display {
display: -ms-flexbox;
display: -moz-box;
display: -webkit-box;
@@ -67,7 +67,7 @@
display: flex;
}
.o-inline-flex-display() {
@mixin o-inline-flex-display {
display: -ms-inline-flexbox;
display: -moz-inline-box;
display: -webkit-inline-box;
@@ -75,66 +75,66 @@
display: inline-flex;
}
.o-flex-flow(@direction, @wrap) {
-ms-flex-flow: @direction @wrap;
-moz-flex-flow: @direction @wrap;
-webkit-flex-flow: @direction @wrap;
@mixin o-flex-flow($direction, $wrap) {
-ms-flex-flow: $direction $wrap;
-moz-flex-flow: $direction $wrap;
-webkit-flex-flow: $direction $wrap;
flex-flow: @direction @wrap;
flex-flow: $direction $wrap;
}
.o-flex(@grow, @schrink, @basis) {
-ms-flex: @grow @schrink @basis;
-moz-flex: @grow @schrink @basis;
-webkit-box-flex: @grow;
-webkit-flex: @grow @schrink @basis;
@mixin o-flex($grow, $schrink, $basis) {
-ms-flex: $grow $schrink $basis;
-moz-flex: $grow $schrink $basis;
-webkit-box-flex: $grow;
-webkit-flex: $grow $schrink $basis;
flex: @grow @schrink @basis;
flex: $grow $schrink $basis;
}
.o-justify-content(@justify) {
-moz-justify-content: @justify;
-webkit-justify-content: @justify;
@mixin o-justify-content($justify) {
-moz-justify-content: $justify;
-webkit-justify-content: $justify;
justify-content: @justify;
justify-content: $justify;
}
.o-align-content(@align) {
-webkit-align-content: @align;
@mixin o-align-content($align) {
-webkit-align-content: $align;
align-content: @align;
align-content: $align;
}
.o-align-items(@align) {
-webkit-align-items: @align;
@mixin o-align-items($align) {
-webkit-align-items: $align;
align-items: @align;
align-items: $align;
}
.o-align-self(@align) {
-webkit-align-self: @align;
@mixin o-align-self($align) {
-webkit-align-self: $align;
align-self: @align;
align-self: $align;
}
// Background-size
.o-background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
@mixin o-background-size($size) {
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
// ------------------------------------------------------------------
// Dropdowns
// ------------------------------------------------------------------
.o-selected-li() {
@mixin o-selected-li {
li {
position: relative;
> a {
color: @odoo-main-text-color;
color: $odoo-main-text-color;
&:hover {
color: darken(@odoo-main-text-color, 10%);
color: darken($odoo-main-text-color, 10%);
}
}
&.selected {
> a {
color: darken(@odoo-main-text-color, 10%);
color: darken($odoo-main-text-color, 10%);
font-weight: bold;
&:before {
font-family: FontAwesome;
@@ -150,68 +150,68 @@
// ------------------------------------------------------------------
// Select Appearance
// ------------------------------------------------------------------
.o-appearance(@value) {
-webkit-appearance: @value;
-moz-appearance: @value;
appearance: @value;
@mixin o-appearance($value) {
-webkit-appearance: $value;
-moz-appearance: $value;
appearance: $value;
}
// ------------------------------------------------------------------
// Transform
// ------------------------------------------------------------------
.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
-ms-transform-origin: @x @y @z;
-webkit-transform-origin: @x @y @z;
-moz-transform-origin: @x @y @z;
transform-origin: @x @y @z;
@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0) {
-ms-transform-origin: $x $y $z;
-webkit-transform-origin: $x $y $z;
-moz-transform-origin: $x $y $z;
transform-origin: $x $y $z;
}
// ------------------------------------------------------------------
// Animation
// ------------------------------------------------------------------
.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
@mixin o-animation($name: none, $duration: 0s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none, $play-state: running) {
-webkit-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
-moz-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
-o-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
}
// ------------------------------------------------------------------
// Transition
// ------------------------------------------------------------------
.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
-webkit-transition: @property @duration @timing-function @transition-delay;
-moz-transition: @property @duration @timing-function @transition-delay;
-o-transition: @property @duration @timing-function @transition-delay;
transition: @property @duration @timing-function @transition-delay;
@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s) {
-webkit-transition: $property $duration $timing-function $transition-delay;
-moz-transition: $property $duration $timing-function $transition-delay;
-o-transition: $property $duration $timing-function $transition-delay;
transition: $property $duration $timing-function $transition-delay;
}
// ------------------------------------------------------------------
// Columns
// ------------------------------------------------------------------
.o-columns(@width: auto, @col: auto) {
-webkit-columns: @width @col;
-moz-columns: @width @col;
columns: @width @col;
@mixin o-columns($width: auto, $col: auto) {
-webkit-columns: $width $col;
-moz-columns: $width $col;
columns: $width $col;
}
// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------
.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
position: absolute;
top: @top;
left: @left;
bottom: @bottom;
right: @right;
top: $top;
left: $left;
bottom: $bottom;
right: $right;
}
// ------------------------------------------------------------------
// Text overflow
// ------------------------------------------------------------------
.o-text-overflow(@display: inline-block, @max-width: 100%) {
display: @display;
max-width: @max-width;
@mixin o-text-overflow($display: inline-block, $max-width: 100%) {
display: $display;
max-width: $max-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -221,54 +221,63 @@
// ------------------------------------------------------------------
// Gradients
// ------------------------------------------------------------------
.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) {
@mixin o-linear-gradient($deg: 45deg, $start-color: #555, $end-color: #333) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
background-image: -o-linear-gradient(@deg, @start-color, @end-color);
background-image: linear-gradient(@deg, @start-color, @end-color);
background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
background-image: -o-linear-gradient($deg, $start-color, $end-color);
background-image: linear-gradient($deg, $start-color, $end-color);
}
.o-vertical-gradient(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor);
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(top, @startColor, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @endColor);
background-image: -ms-linear-gradient(top, @startColor, @endColor);
background-image: -o-linear-gradient(top, @startColor, @endColor);
background-image: linear-gradient(to bottom, @startColor, @endColor);
@mixin o-vertical-gradient($startColor: #555, $endColor: #333) {
background-color: mix($startColor, $endColor);
background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(top, $startColor, $endColor);
background-image: -moz-linear-gradient(top, $startColor, $endColor);
background-image: -ms-linear-gradient(top, $startColor, $endColor);
background-image: -o-linear-gradient(top, $startColor, $endColor);
background-image: linear-gradient(to bottom, $startColor, $endColor);
}
.o-skew-gradient(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background: -moz-linear-gradient(135deg, @endColor, @startColor);
background: -o-linear-gradient(135deg, @startColor, @endColor);
background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor));
background: -ms-linear-gradient(top, @startColor, @endColor);
@mixin o-skew-gradient($startColor: #555, $endColor: #333) {
background-color: $endColor;
background: -moz-linear-gradient(135deg, $endColor, $startColor);
background: -o-linear-gradient(135deg, $startColor, $endColor);
background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor));
background: -ms-linear-gradient(top, $startColor, $endColor);
}
// ------------------------------------------------------------------
// Transform
// ------------------------------------------------------------------
.o-transform(@transform) {
-webkit-transform: @transform;
-moz-transform: @transform;
-ms-transform: @transform;
-o-transform: @transform;
transform: @transform;
@mixin o-transform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
// ------------------------------------------------------------------
// Hovering effects
// ------------------------------------------------------------------
.o-hover-opacity(@default-opacity: 0.5, @hover-opacity: 1) {
opacity: @default-opacity;
@mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
opacity: $default-opacity;
&:hover, &:focus, &.focus {
opacity: @hover-opacity;
opacity: $hover-opacity;
}
}
.o-hover-text-color(@default-color: @text-color, @hover-color: @link-color) {
color: @default-color;
@mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) {
color: $default-color;
&:hover, &:focus, &.focus {
color: @hover-color;
color: $hover-color;
}
}
//------------------------------------------------------------------------------
// Colors
//------------------------------------------------------------------------------
@function o-get-most-contrast($color, $c1, $c2) {
$brightness: brightness($color);
@return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2);
}
addons/web/static/src/scss/variables.scss
+52 -62
View File
@@ -4,89 +4,79 @@
///
// Font sizes
@odoo-font-size-base: 13px;
$odoo-font-size-base: 13px;
// Colors
@odoo-brand-primary: #7c7bad;
@odoo-brand-optional: #7c7bad;
@odoo-brand-secondary: #f0eeee;
@odoo-brand-lightsecondary: #e2e2e0;
@odoo-color-silver: #F9F9F9;
@odoo-color-silver-dark: #E5E5E5;
@odoo-color-silver-darker: #d9d7d7;
$odoo-brand-primary: #7c7bad;
$odoo-brand-optional: #7c7bad;
$odoo-brand-secondary: #f0eeee;
$odoo-brand-lightsecondary: #e2e2e0;
$odoo-color-silver: #F9F9F9;
$odoo-color-silver-dark: #E5E5E5;
$odoo-color-silver-darker: #d9d7d7;
// Define @gray-lighter-dark as a minor bootstrap @gray-lighter variation used
// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used
// for design purposes only (e.g. cards' borders). We avoid to overwrite the
// default @gray-light because it is deeply used by bootstrap to define muted
// default $gray-light because it is deeply used by bootstrap to define muted
// elements.
@gray-lighter-dark: @odoo-color-silver-dark;
@gray-lighter-darker: @odoo-color-silver-darker;
$gray-lighter-dark: $odoo-color-silver-dark;
$gray-lighter-darker: $odoo-color-silver-darker;
@odoo-color-pink: #875A7B; // Enterprise @odoo-brand-primary
@odoo-main-color-muted: #a8a8a8;
@odoo-main-text-color: #4c4c4c;
$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary
$odoo-main-color-muted: #a8a8a8;
$odoo-main-text-color: #4c4c4c;
@odoo-view-background-color: white;
@odoo-shadow-color: #303030;
$odoo-view-background-color: white;
$odoo-shadow-color: #303030;
@odoo-webclient-background-color: @odoo-color-silver;
@odoo-control-panel-background-color: @odoo-color-silver;
@odoo-form-lightsecondary: #ccc;
$odoo-webclient-background-color: $odoo-color-silver;
$odoo-control-panel-background-color: $odoo-color-silver;
$odoo-form-lightsecondary: #ccc;
@odoo-list-footer-color: @odoo-main-text-color;
@odoo-list-footer-bg-color: #eee;
@odoo-list-footer-font-weight: bold;
$odoo-list-footer-color: $odoo-main-text-color;
$odoo-list-footer-bg-color: #eee;
$odoo-list-footer-font-weight: bold;
@odoo-tooltip-background-color: black;
@odoo-tooltip-color: white;
@odoo-tooltip-arrow-color: black;
@odoo-tooltip-text-color: #777777;
@odoo-tooltip-title-text-color: #4c4c4c;
$odoo-tooltip-background-color: black;
$odoo-tooltip-color: white;
$odoo-tooltip-arrow-color: black;
$odoo-tooltip-text-color: #777777;
$odoo-tooltip-title-text-color: #4c4c4c;
// UI custom colors for tags, kanban records' colors, ...)
@odoo-nb-ui-color: 12;
@odoo-color-0: @gray-light;
@odoo-color-1: #F06050;
@odoo-color-2: #F4A460;
@odoo-color-3: #F7CD1F;
@odoo-color-4: #6CC1ED;
@odoo-color-5: #814968;
@odoo-color-6: #EB7E7F;
@odoo-color-7: #2C8397;
@odoo-color-8: #475577;
@odoo-color-9: #D6145F;
@odoo-color-10: #30C381;
@odoo-color-11: #9365B8;
$odoo-nb-ui-color: 12;
$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
#EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
// Layout
@screen-xs-min: 475px;
@screen-xxs-max: (@screen-xs-min - 1);
$screen-xs-min: 475px;
$screen-xxs-max: ($screen-xs-min - 1);
@screen-xl-min: 1534px;
@screen-lg-max: (@screen-xl-min - 1);
$screen-xl-min: 1534px;
$screen-lg-max: ($screen-xl-min - 1);
@odoo-form-group-cols: 12;
@odoo-form-spacing-unit: 5px;
@odoo-horizontal-padding: 16px;
@odoo-innergroup-rpadding: 45px;
@odoo-dropdown-hpadding: 20px;
$odoo-form-group-cols: 12;
$odoo-form-spacing-unit: 5px;
$odoo-horizontal-padding: 16px;
$odoo-innergroup-rpadding: 45px;
$odoo-dropdown-hpadding: 20px;
@border-radius-base: 3px;
$border-radius-base: 3px;
@odoo-sheet-vpadding: 24px;
$odoo-sheet-vpadding: 24px;
// Needed for having no spacing between sheet and mail body in mass_mailing:
// Different required cancel paddings between web and web_enterprise
@odoo-sheet-cancel-tpadding: 0px;
@odoo-sheet-cancel-hpadding: @odoo-horizontal-padding;
@odoo-sheet-cancel-bpadding: @odoo-horizontal-padding;
$odoo-sheet-cancel-tpadding: 0px;
$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding;
$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding;
@odoo-avatar-size: 90px;
$odoo-avatar-size: 90px;
@odoo-statusbar-height: 33px;
@odoo-statusbar-arrow-width: @odoo-statusbar-height/3;
@odoo-statusbar-disabled-bg: lighten(@odoo-brand-lightsecondary, 7%);
$odoo-statusbar-height: 33px;
$odoo-statusbar-arrow-width: $odoo-statusbar-height/3;
$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%);
@odoo-label-font-size-factor: 0.8;
@odoo-navbar-height: 34px;
@odoo-navbar-inverse-link-hover-bg: @navbar-inverse-link-active-bg;
$odoo-label-font-size-factor: 0.8;
$odoo-navbar-height: 34px;
$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg;
addons/web/static/src/scss/views.scss
+18 -18
View File
@@ -1,6 +1,6 @@
/**
* This file regroups the rules which apply on elements which are shared between
* all renderers. For field default rules, see the fields.less file.
* all renderers. For field default rules, see the fields.scss file.
*/
// Invisible modifier (can be inside the view, the button area, ...)
@@ -9,7 +9,7 @@
}
// Status
// This should normally be put in fields.less but these classes are used outside
// This should normally be put in fields.scss but these classes are used outside
// of `.o_field_widget` so it needs to be placed at an upper level.
.o_status {
display: inline-block;
@@ -18,13 +18,13 @@
border-radius: 6px;
vertical-align: middle;
background-color: @gray-lighter-dark;
background-color: $gray-lighter-dark;
&.o_status_green {
background-color: @brand-success;
background-color: $brand-success;
}
&.o_status_red {
background-color: @brand-danger;
background-color: $brand-danger;
}
}
@@ -40,10 +40,10 @@
// No content helper
.o_view_nocontent {
.o-position-absolute(20%, 0, 0, 0);
@include o-position-absolute(20%, 0, 0, 0);
pointer-events: none;
z-index: 1;
.o_nocontent_help {
pointer-events: auto;
max-width: 650px;
@@ -51,12 +51,12 @@
padding: 15px;
z-index: 1000;
text-align: center;
color: @odoo-tooltip-text-color;
color: $odoo-tooltip-text-color;
font-size: 115%;
> p:first-of-type {
margin-top: 0;
color: @odoo-tooltip-title-text-color;
color: $odoo-tooltip-title-text-color;
font-weight: bold;
font-size: 125%;
}
@@ -65,7 +65,7 @@
cursor: pointer;
}
.o-init-image() {
@mixin o-init-image {
content: "";
display: block;
margin: auto;
@@ -73,20 +73,20 @@
}
.o_view_nocontent_smiling_face:before {
.o-init-image();
.size(120px, 140px);
@include o-init-image;
@include size(120px, 140px);
background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center;
}
.o_view_nocontent_neutral_face:before {
.o-init-image();
.size(120px, 140px);
@include o-init-image;
@include size(120px, 140px);
background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
}
.o_view_nocontent_empty_folder:before {
.o-init-image();
.size(120px, 80px);
@include o-init-image;
@include size(120px, 80px);
margin-top: 30px;
margin-bottom: 30px;
background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
@@ -94,8 +94,8 @@
.o_empty_custom_dashboard {
min-height: 327px;
margin-left: -@grid-gutter-width/2;
margin-top: -@grid-gutter-width/2;
margin-left: -$grid-gutter-width/2;
margin-top: -$grid-gutter-width/2;
padding: 100px 0 0 137px;
background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
}
addons/web/static/src/scss/web_calendar.scss
+33 -40
View File
@@ -1,20 +1,20 @@
@nb-calendar-colors: 24;
$nb-calendar-colors: 24;
@keyframes backgroundfade {
from {background-color: fade(@odoo-brand-primary, 50%);}
from {background-color: rgba($odoo-brand-primary, 0.5);}
to {background-color: #f5f5f5;}
}
.o_calendar_container {
height: 100%;
.o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2);
.o-flex-display();
@include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2);
@include o-flex-display;
.calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) {
.o_calendar_color_@{index} {
@for $index from 1 through $nb-calendar-colors {
.o_calendar_color_#{$index} {
color: #0D0D0D;
background-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
border-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
border-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
opacity: 0.7;
&.o_event_hightlight {
font-weight: bold;
@@ -24,30 +24,23 @@
color: #666 !important;
}
}
.calendar_color_loop(@index + 1);
}
.calendar_color_loop(1);
.underline_color_loop(@index) when (@index < @nb-calendar-colors+1) {
.o_underline_color_@{index} {
border-bottom: 4px solid spin(rgba(255, 192, 192, 0.7), 360/(@nb-calendar-colors+1) * @index);
.o_underline_color_#{$index} {
border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg);
}
.underline_color_loop(@index + 1);
}
.underline_color_loop(1);
.o_calendar_view {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
min-width: 0;
.o_calendar_widget {
height: 100%;
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
* {
z-index: 0; // FIXME
}
.fc-week-number, .fc-widget-header {
background-color: lighten(@odoo-brand-secondary, 30%);
background-color: lighten($odoo-brand-secondary, 30%);
}
.o_avatar_square {
border-radius: 5px;
@@ -71,19 +64,19 @@
}
.o_calendar_sidebar_container {
.o-flex(0, 0, @odoo-horizontal-padding);
@include o-flex(0, 0, $odoo-horizontal-padding);
position: relative;
&.o_sidebar_hidden {
margin-right: -@odoo-horizontal-padding; // hack to display the toggler in the gutter
margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter
.o_calendar_sidebar_toggler {
padding: 4px;
color: darken(@odoo-webclient-background-color, 30%);
color: darken($odoo-webclient-background-color, 30%);
}
}
.o_calendar_sidebar_toggler {
.o-position-absolute(@top: 0, @right: 0);
@include o-position-absolute($top: 0, $right: 0);
cursor: pointer;
padding: 6px;
z-index: 1;
@@ -95,7 +88,7 @@
.o_calendar_sidebar {
width: 250px;
margin-left: 8px;
background: @odoo-view-background-color;
background: $odoo-view-background-color;
}
.ui-datepicker {
@@ -106,18 +99,18 @@
padding: 0;
.ui-widget-header {
.o-flex-display();
@include o-flex-display;
background: none;
background-color: lighten(@odoo-brand-secondary, 30%);
background-color: lighten($odoo-brand-secondary, 30%);
border-radius: 0;
.ui-datepicker-prev, .ui-datepicker-next {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
position: static;
cursor: pointer;
padding: 2px;
text-align: center;
color: @odoo-main-text-color;
color: $odoo-main-text-color;
&.ui-state-hover {
background: none;
border: none;
@@ -142,7 +135,7 @@
}
}
.ui-datepicker-title {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
order: 2;
display: inline-block;
margin: 0 10px;
@@ -151,31 +144,31 @@
table {
td {
padding: 0 2px 2px 0;
background-color: @odoo-view-background-color;
background-color: $odoo-view-background-color;
a {
border: none;
background: none;
background-color: lighten(@odoo-brand-secondary, 40%);
background-color: lighten($odoo-brand-secondary, 40%);
text-align: center;
}
}
.ui-state-default {
color: @odoo-brand-primary;
color: $odoo-brand-primary;
&:hover {
background: none;
background-color: fade(@odoo-brand-primary, 50%);
border-color: @odoo-brand-primary;
color: @odoo-view-background-color;
background-color: rgba($odoo-brand-primary, 0.5);
border-color: $odoo-brand-primary;
color: $odoo-view-background-color;
};
}
.ui-state-active {
background: none;
background-color: @odoo-brand-primary;
color: @odoo-view-background-color;
background-color: $odoo-brand-primary;
color: $odoo-view-background-color;
}
.o_selected_range.o_color {
background: none;
background-color: @odoo-brand-primary;
background-color: $odoo-brand-primary;
animation: backgroundfade 3s forwards;
}
}
@@ -213,7 +206,7 @@
padding: 0;
}
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.o_control_panel {
.o_calendar_button_today {
float: right;
addons/web/static/src/scss/webclient.scss
+18 -18
View File
@@ -3,19 +3,19 @@
// ------------------------------------------------------------------
.o_web_client {
position: relative; // normally useless but required by bootstrap-datepicker
background-color: @odoo-webclient-background-color;
background-color: $odoo-webclient-background-color;
}
// ------------------------------------------------------------------
// Misc. widgets
// ------------------------------------------------------------------
@notification-error-bg-color: #F16567;
@notification-info-bg-color: #FCFBEA;
$notification-error-bg-color: #F16567;
$notification-info-bg-color: #FCFBEA;
.o_notification_manager {
width: 300px;
max-width: 100%;
.o-position-absolute(@navbar-height, 0px);
@include o-position-absolute($navbar-height, 0px);
z-index: 1100; // Bootstrap modal z-index is 1050
.o_notification {
@@ -24,19 +24,19 @@
opacity: 0;
background-color: @notification-info-bg-color;
box-shadow: 0px 0px 5px 1px @odoo-main-text-color;
background-color: $notification-info-bg-color;
box-shadow: 0px 0px 5px 1px $odoo-main-text-color;
position: relative;
.o_close {
.o-position-absolute(5px, 5px);
@include o-position-absolute(5px, 5px);
color: rgba(0, 0, 0, 0.3);
text-decoration: none;
}
.o_notification_title {
.o-flex-display();
.o-align-items(center);
@include o-flex-display;
@include o-align-items(center);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px 10px 10px 20px;
@@ -56,7 +56,7 @@
&.o_error {
color: white;
background-color: @notification-error-bg-color;
background-color: $notification-error-bg-color;
}
}
}
@@ -103,30 +103,30 @@ div.o_boolean_toggle {
}
> input:checked + .slider {
background-color: @odoo-brand-optional;
background-color: $odoo-brand-optional;
&:before {
.translate(14px; 0px);
@include translate(14px, 0px);
}
}
}
// Full bg colors (bootstrap extension)
.bg-success-full {
background-color: @brand-success;
background-color: $brand-success;
}
.bg-warning-full {
background-color: @brand-warning;
background-color: $brand-warning;
}
.bg-danger-full {
background-color: @brand-danger;
background-color: $brand-danger;
}
.bg-info-full {
background-color: @brand-info;
background-color: $brand-info;
}
.o_web_accesskey_overlay {
font-family: @font-family-sans-serif;
font-family: $font-family-sans-serif;
position: absolute;
width: 100%;
height: 100%;
@@ -137,4 +137,4 @@ div.o_boolean_toggle {
justify-content: center;
display: flex;
align-items: center;
}
}
addons/web/static/src/scss/webclient_extra.scss
+4 -4
View File
@@ -7,8 +7,8 @@
outline: none;
}
.o_input {
border: 1px solid @odoo-form-lightsecondary;
border-radius: @border-radius-base;
border: 1px solid $odoo-form-lightsecondary;
border-radius: $border-radius-base;
padding: 2px 4px;
color: #1f1f1f;
@@ -29,7 +29,7 @@ select {
top: 0;
right: 50%;
padding: 4px 12px;
background-color: @odoo-color-pink;
background-color: $odoo-color-pink;
color: white;
text-align: center;
border-top: none;
@@ -41,6 +41,6 @@ select {
// User menu in navbar
//------------------------------------------------------------------------------
#oe_main_menu_navbar .oe_user_menu_placeholder .o_user_menu .oe_topbar_name {
.o-text-overflow();
@include o-text-overflow;
max-width: 150px;
}
addons/web/static/src/scss/webclient_layout.scss
+24 -24
View File
@@ -1,8 +1,8 @@
@odoo-submenu-width: 220px;
$odoo-submenu-width: 220px;
.o_web_client {
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
overflow: hidden;
&.o_fullscreen {
@@ -16,7 +16,7 @@
.navbar {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
li > a {
padding: 4px 8px;
@@ -31,20 +31,20 @@
}
> .o_main {
.o-flex(1, 1, auto);
.o-flex-display();
@include o-flex(1, 1, auto);
@include o-flex-display;
min-height: 0; // Allow flex to shrink this element as much as it wants
height: 100%;
.o_sub_menu {
.o-flex(0, 0, @odoo-submenu-width);
.o-flex-display();
.o-flex-flow(column, nowrap);
border-right: 1px solid darken(@odoo-control-panel-background-color, 20%);
background-color: @odoo-control-panel-background-color;
@include o-flex(0, 0, $odoo-submenu-width);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
border-right: 1px solid darken($odoo-control-panel-background-color, 20%);
background-color: $odoo-control-panel-background-color;
.o_sub_menu_logo {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
text-align: center;
position: relative;
@@ -68,20 +68,20 @@
}
.o_sub_menu_content {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
height:100%;
overflow-y: auto;
.oe_secondary_menu_section {
font-weight: bold;
margin-left: 8px;
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
.oe_secondary_submenu {
margin: 3px 0px 10px;
line-height: 1.1em;
>li:not(.active) > a {
color: @odoo-main-text-color;
color: $odoo-main-text-color;
}
> li > a {
padding: 4px 4px 4px 18px;
@@ -98,7 +98,7 @@
}
}
.oe_menu_text {
.o-text-overflow();
@include o-text-overflow;
max-width: 85%;
margin-top: 1px;
}
@@ -129,34 +129,34 @@
}
.o_sub_menu_footer {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
text-align: center;
> a {
font-weight: bold;
> span {
color: @odoo-color-pink;
color: $odoo-color-pink;
}
}
}
}
.o_main_content {
.o-flex(1, 1, auto);
.o-flex-display();
.o-flex-flow(column, nowrap);
@include o-flex(1, 1, auto);
@include o-flex-display;
@include o-flex-flow(column, nowrap);
.o_control_panel {
.o-flex(0, 0, auto);
@include o-flex(0, 0, auto);
}
.o_content {
.o-flex(1, 1, auto);
@include o-flex(1, 1, auto);
height: 100%;
overflow: auto;
position: relative;
> .o_view_controller {
.o-position-absolute(0, 0, 0, 0); // Get the 100% height of its flex parent
@include o-position-absolute(0, 0, 0, 0); // Get the 100% height of its flex parent
height: 100%;
}
}
addons/web_diagram/static/src/scss/diagram_view.scss
+1 -1
View File
@@ -3,7 +3,7 @@
background-color: white;
.o_diagram_header {
.o-webclient-padding(@top: 16px, @bottom: 16px);
@include o-webclient-padding($top: 16px, $bottom: 16px);
> span {
display: block;
text-align: justify;
addons/web_editor/static/src/scss/web_editor.common.scss
+92 -94
View File
@@ -31,7 +31,7 @@ html, body {
min-width: 20px;
}
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
.table-responsive > table.table {
table-layout: auto;
}
@@ -83,7 +83,7 @@ div.media_iframe_video {
iframe {
width: 100%;
height: 100%;
.o-position-absolute(@top: 0);
@include o-position-absolute($top: 0);
margin: 0 auto;
margin-left: -50%;
}
@@ -108,7 +108,7 @@ div.media_iframe_video {
}
.css_editable_mode_display {
.o-position-absolute();
@include o-position-absolute;
width: 100%;
height: 100%;
display: none;
@@ -120,7 +120,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
margin-left: 0;
}
@media (max-width: @screen-xs-max) {
@media (max-width: $screen-xs-max) {
img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
-webkit-transform: none !important;
-moz-transform: none !important;
@@ -159,72 +159,70 @@ ul.oe_menu_editor {
}
// Generate all spacings for all sizes
.o-spacing-all(@factor: 1) {
@mixin o-spacing-all($factor: 1) {
// Generate vertical margin/padding classes used by the editor
.o-generate-spacings(256/8);
.o-generate-spacings(@n, @i: 0) when (@i =< @n) {
.o-vspacing(@i * 8);
.o-generate-spacings(@n, @i + 1);
@for $i from 0 through (256 / 8) {
@include o-vspacing($i * 8);
}
.o-vspacing(4, @factor);
@include o-vspacing(4, $factor);
// 92px vertical margin is kept for compatibility
.o-vmargins(92, @factor);
@include o-vmargins(92, $factor);
// Some horizontal margin classes defined for convenience
// (and compatibility)
.o-hmargins(0, @factor);
.o-hmargins(4, @factor);
.o-hmargins(8, @factor);
.o-hmargins(16, @factor);
.o-hmargins(32, @factor);
.o-hmargins(64, @factor);
@include o-hmargins(0, $factor);
@include o-hmargins(4, $factor);
@include o-hmargins(8, $factor);
@include o-hmargins(16, $factor);
@include o-hmargins(32, $factor);
@include o-hmargins(64, $factor);
}
// Generate all spacings for one size, scalled by a given factor
// (0 <= factor <= 1)
.o-vspacing(@name, @factor: 1) {
.o-vmargins(@name, @factor);
.o-vpaddings(@name, @factor);
@mixin o-vspacing($name, $factor: 1) {
@include o-vmargins($name, $factor);
@include o-vpaddings($name, $factor);
}
.o-vmargins(@name, @factor: 1) {
.o-vmargins-define(@name, @factor * @name);
@mixin o-vmargins($name, $factor: 1) {
@include o-vmargins-define($name, $factor * $name);
}
.o-vpaddings(@name, @factor: 1) {
.o-vpaddings-define(@name, @factor * @name);
@mixin o-vpaddings($name, $factor: 1) {
@include o-vpaddings-define($name, $factor * $name);
}
.o-hspacing(@name, @factor: 1) {
.o-hmargins(@name, @factor);
.o-hpaddings(@name, @factor);
@mixin o-hspacing($name, $factor: 1) {
@include o-hmargins($name, $factor);
@include o-hpaddings($name, $factor);
}
.o-hmargins(@name, @factor: 1) {
.o-hmargins-define(@name, @factor * @name);
@mixin o-hmargins($name, $factor: 1) {
@include o-hmargins-define($name, $factor * $name);
}
.o-hpaddings(@name, @factor: 1) {
.o-hpaddings-define(@name, @factor * @name);
@mixin o-hpaddings($name, $factor: 1) {
@include o-hpaddings-define($name, $factor * $name);
}
// Generate all spacings for one size, given the name of the spacing and
// intended size
.o-vmargins-define(@name, @size: @name) {
.mt@{name} { margin-top: unit(@size, px)!important; }
.mb@{name} { margin-bottom: unit(@size, px)!important; }
@mixin o-vmargins-define($name, $size: $name) {
.mt#{$name} { margin-top: $size * 1px !important; }
.mb#{$name} { margin-bottom: $size * 1px !important; }
}
.o-vpaddings-define(@name, @size: @name) {
.pt@{name} { padding-top: unit(@size, px)!important; }
.pb@{name} { padding-bottom: unit(@size, px)!important; }
@mixin o-vpaddings-define($name, $size: $name) {
.pt#{$name} { padding-top: $size * 1px !important; }
.pb#{$name} { padding-bottom: $size * 1px !important; }
}
.o-hmargins-define(@name, @size: @name) {
.ml@{name} { margin-left: unit(@size, px)!important; }
.mr@{name} { margin-right: unit(@size, px)!important; }
@mixin o-hmargins-define($name, $size: $name) {
.ml#{$name} { margin-left: $size * 1px !important; }
.mr#{$name} { margin-right: $size * 1px !important; }
}
.o-hpaddings-define(@name, @size: @name) {
.pl@{name} { padding-left: unit(@size, px)!important; }
.pr@{name} { padding-right: unit(@size, px)!important; }
@mixin o-hpaddings-define($name, $size: $name) {
.pl#{$name} { padding-left: $size * 1px !important; }
.pr#{$name} { padding-right: $size * 1px !important; }
}
// Generate all margins
.o-spacing-all();
@include o-spacing-all;
// Underline
a.o_underline {
@@ -235,74 +233,74 @@ a.o_underline {
}
// Colors
@gray-white: #fff;
$gray-white: #fff;
@color-alpha: #1cc1a9;
@color-beta: #875A7B;
@color-gamma: #BA3C3D;
@color-delta: #0D6759;
@color-epsilon: #0B2E59;
$color-alpha: #1cc1a9;
$color-beta: #875A7B;
$color-gamma: #BA3C3D;
$color-delta: #0D6759;
$color-epsilon: #0B2E59;
// Greyscale transparent colours
@color-black-25: fade(black, 25%);
@color-black-50: fade(black, 50%);
@color-black-75: fade(black, 75%);
@color-white-25: fade(white, 25%);
@color-white-50: fade(white, 50%);
@color-white-75: fade(white, 75%);
$color-black-25: rgba(black, 0.25);
$color-black-50: rgba(black, 0.5);
$color-black-75: rgba(black, 0.75);
$color-white-25: rgba(white, 0.25);
$color-white-50: rgba(white, 0.5);
$color-white-75: rgba(white, 0.75);
.o-create-color-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) {
.bg-@{name} {
background-color: @color;
color: @complementary;
@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) {
.bg-#{$name} {
background-color: $color;
color: $complementary;
.text-muted {
color: fade(@complementary, 40%);
color: rgba($complementary, 0.4);
}
}
body .text-@{name} { // body to make the rules more important that bg-* ones
color: @content-color;
body .text-#{$name} { // body to make the rules more important that bg-* ones
color: $content-color;
}
}
.o-create-color-btn-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @border-color: darken(@color, 5%)) {
.btn-@{name} {
.button-variant(@complementary, @color, @border-color);
@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) {
.btn-#{$name} {
@include button-variant($complementary, $color, $border-color);
}
}
// Create classes for theme colors...
.o-create-color-classes(alpha, @color-alpha);
.o-create-color-classes(beta, @color-beta);
.o-create-color-classes(gamma, @color-gamma);
.o-create-color-classes(delta, @color-delta);
.o-create-color-classes(epsilon, @color-epsilon);
@include o-create-color-classes(alpha, $color-alpha);
@include o-create-color-classes(beta, $color-beta);
@include o-create-color-classes(gamma, $color-gamma);
@include o-create-color-classes(delta, $color-delta);
@include o-create-color-classes(epsilon, $color-epsilon);
// ... and button classes
.o-create-color-btn-classes(alpha, @color-alpha);
.o-create-color-btn-classes(beta, @color-beta);
.o-create-color-btn-classes(gamma, @color-gamma);
.o-create-color-btn-classes(delta, @color-delta);
.o-create-color-btn-classes(epsilon, @color-epsilon);
@include o-create-color-btn-classes(alpha, $color-alpha);
@include o-create-color-btn-classes(beta, $color-beta);
@include o-create-color-btn-classes(gamma, $color-gamma);
@include o-create-color-btn-classes(delta, $color-delta);
@include o-create-color-btn-classes(epsilon, $color-epsilon);
// Create classes for UI colors
.o-create-color-classes(primary, @brand-primary);
.o-create-color-classes(success, @state-success-bg, @content-color: @state-success-text);
.o-create-color-classes(info, @state-info-bg, @content-color: @state-info-text);
.o-create-color-classes(warning, @state-warning-bg, @content-color: @state-warning-text);
.o-create-color-classes(danger, @state-danger-bg, @content-color: @state-danger-text);
@include o-create-color-classes(primary, $brand-primary);
@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
// Create classes for greyscale colors
.o-create-color-classes(~'black', @gray-base);
.o-create-color-classes(~'gray-darker', @gray-darker);
.o-create-color-classes(~'gray-dark', @gray-dark);
.o-create-color-classes(~'gray', @gray);
.o-create-color-classes(~'gray-light', @gray-light);
.o-create-color-classes(~'gray-lighter', @gray-lighter);
.o-create-color-classes(~'white', @gray-white);
@include o-create-color-classes('black', $gray-base);
@include o-create-color-classes('gray-darker', $gray-darker);
@include o-create-color-classes('gray-dark', $gray-dark);
@include o-create-color-classes('gray', $gray);
@include o-create-color-classes('gray-light', $gray-light);
@include o-create-color-classes('gray-lighter', $gray-lighter);
@include o-create-color-classes('white', $gray-white);
// Create classes for greyscale transparent colours
.o-create-color-classes(~'black-25', @color-black-25);
.o-create-color-classes(~'black-50', @color-black-50);
.o-create-color-classes(~'black-75', @color-black-75);
.o-create-color-classes(~'white-25', @color-white-25);
.o-create-color-classes(~'white-50', @color-white-50);
.o-create-color-classes(~'white-75', @color-white-75);
@include o-create-color-classes('black-25', $color-black-25);
@include o-create-color-classes('black-50', $color-black-50);
@include o-create-color-classes('black-75', $color-black-75);
@include o-create-color-classes('white-25', $color-white-25);
@include o-create-color-classes('white-50', $color-white-50);
@include o-create-color-classes('white-75', $color-white-75);
addons/web_editor/static/src/scss/web_editor.ui.scss
+306 -307
View File
File diff suppressed because it is too large Load Diff
addons/web_editor/static/src/scss/web_editor.variables.scss
+59 -59
View File
@@ -2,41 +2,41 @@
/// This files regroups the variables and mixins which are specific to the editor.
///
@o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
@o-we-color-dark: #2c2c36;
@o-we-color-darker: darken(@o-we-color-dark, 2%);
@o-we-color-divider: #33363e;
@o-we-color-light: #4e525b;
@o-we-color-normal: #50545d;
@o-we-color-paper: #fcfcfc;
@o-we-color-text-normal: #999999;
@o-we-color-text-light: #d4d5d7;
@o-we-color-danger: #e6586c;
@o-we-color-warning: #f0ad4e;
@o-we-color-success: #40ad67;
@o-we-color-info: #6999a8;
$o-we-color-dark: #2c2c36;
$o-we-color-darker: darken($o-we-color-dark, 2%);
$o-we-color-divider: #33363e;
$o-we-color-light: #4e525b;
$o-we-color-normal: #50545d;
$o-we-color-paper: #fcfcfc;
$o-we-color-text-normal: #999999;
$o-we-color-text-light: #d4d5d7;
$o-we-color-danger: #e6586c;
$o-we-color-warning: #f0ad4e;
$o-we-color-success: #40ad67;
$o-we-color-info: #6999a8;
@o-we-sidebar-width: 210px;
$o-we-sidebar-width: 210px;
@o-we-tab-active-bg: #3D4048;
$o-we-tab-active-bg: #3D4048;
// Transitions
@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
// ============ 'Preview' component Mixins ===============
// Create a "preview" work-area to edit/customize specific elements
.o-we-preview-box(@padding: 0px 25px 25px 25px, @color-text: white) {
padding: @padding;
@mixin o-we-preview-box($padding: 0px 25px 25px 25px, $color-text: white) {
padding: $padding;
border-top: 1px solid black;
border-bottom: 1px solid white;
.o-linear-gradient(-150deg, @o-we-color-dark, @o-we-color-darker);
@include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
color: @color-text;
color: $color-text;
}
.o-we-preview-content() {
@mixin o-we-preview-content {
display: inline-block;
max-width: 100%;
overflow: hidden;
@@ -47,28 +47,28 @@
// ============ Preservetion mixins ===============
// Used to preserve web_editor and website UI from themes customizations
.o-w-preserve-base() {
font-family: @o-we-font-family;
@mixin o-w-preserve-base {
font-family: $o-we-font-family;
line-height: 1.42857143;
color: @o-we-color-divider;
color: $o-we-color-divider;
.text-muted {
color: @o-we-color-text-normal;
color: $o-we-color-text-normal;
}
}
.o-w-preserve-headings() {
@mixin o-w-preserve-headings {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @o-we-font-family;
font-family: $o-we-font-family;
line-height: 1.42857143;
color: @o-we-color-dark;
color: $o-we-color-dark;
font-weight: bold;
}
}
.o-w-preserve-links() {
@mixin o-w-preserve-links {
a:not(.o_btn_preview) {
color: @odoo-brand-optional;
color: $odoo-brand-optional;
&:focus, &:active, &:focus:active {
outline: none!important;
@@ -82,13 +82,13 @@
}
}
.o-w-preserve-forms() {
@mixin o-w-preserve-forms {
.form-control {
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border: 1px solid @o-we-color-text-light;
border: 1px solid $o-we-color-text-light;
color: #555;
background-color: #fff;
border-radius: 0;
@@ -96,24 +96,24 @@
.has-error {
.form-control {
border-color: @state-danger-text;
border-color: $state-danger-text;
}
}
select.form-control {
.o-appearance(none);
@include o-appearance(none);
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
background-position: 100% 65%;
background-repeat: no-repeat;
}
}
.o-w-preserve-modals() {
@mixin o-w-preserve-modals {
background: 0;
.modal-content {
border-radius: 0;
background-color: @o-we-color-paper;
background-color: $o-we-color-paper;
.modal-body {
background-color: white;
@@ -124,24 +124,24 @@
}
}
.o-w-preserve-tabs() {
@mixin o-w-preserve-tabs {
.nav-tabs {
border-bottom: 1px solid @gray-lighter;
border-bottom: 1px solid $gray-lighter;
> li {
> a {
line-height: 1.42857143;
color: @o-we-color-light;
color: $o-we-color-light;
&:hover {
border-color: @gray-lighter;
border-color: $gray-lighter;
}
}
&.active > a {
&, &:hover, &:focus {
color: @o-we-color-normal;
background-color: @o-we-color-paper;
border-color: @gray-lighter;
color: $o-we-color-normal;
background-color: $o-we-color-paper;
border-color: $gray-lighter;
border-bottom-color: transparent;
}
}
@@ -149,54 +149,54 @@
}
}
.o-w-preserve-btn() {
@mixin o-w-preserve-btn {
.btn:not(.o_btn_preview) {
border-width: 1px;
border-radius: 0;
font-weight: normal;
.button-size(6px; 12px; 14px; 1.42857143; 0);
@include button-size(6px, 12px, 14px, 1.42857143, 0);
&.btn-primary {
.button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
@include button-variant(white, $odoo-brand-optional, darken($odoo-brand-optional,5%));
}
&.btn-default {
.button-variant(@o-we-color-normal, white, @o-we-color-text-light);
@include button-variant($o-we-color-normal, white, $o-we-color-text-light);
}
&.btn-link {
.button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
@include button-variant($odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
&.btn-success {
.button-variant(white; @o-we-color-success; darken(@o-we-color-success, 5%));
@include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
}
&.btn-info {
.button-variant(white; @o-we-color-info; darken(@o-we-color-info, 5%));
@include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%));
}
&.btn-warning {
.button-variant(white; @o-we-color-warning; darken(@o-we-color-warning, 5%));
@include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%));
}
&.btn-danger {
.button-variant(white; @o-we-color-danger; darken(@o-we-color-danger, 5%));
@include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%));
}
&.btn-lg {
.button-size(10px; 16px; 18px; 1.3333333; 0);
@include button-size(10px, 16px, 18px, 1.3333333, 0);
}
&.btn-sm {
.button-size(5px; 10px; 12px; 1.5; 0);
@include button-size(5px, 10px, 12px, 1.5, 0);
}
&.btn-xs {
.button-size(1px; 5px; 12px; 1.5; 0);
@include button-size(1px, 5px, 12px, 1.5, 0);
}
}
}
.o-w-preserve-wells() {
@mixin o-w-preserve-wells {
.well {
padding: 19px;
margin-bottom: 20px;
background-color: @o-we-color-paper;
border: 1px solid darken(@o-we-color-paper,5%);
background-color: $o-we-color-paper;
border: 1px solid darken($o-we-color-paper,5%);
border-radius: 0;
.box-shadow(none);
@include box-shadow(none);
}
}
addons/web_settings_dashboard/static/src/scss/dashboard.scss
+7 -7
View File
@@ -1,10 +1,10 @@
.o_web_settings_dashboard {
@bg-dashboard-col: #FFF;
$bg-dashboard-col: #FFF;
.o_web_settings_dashboard_card() {
@mixin o-web-settings-dashboard-card {
box-shadow: 0 1px 2px 0 rgba(0,0,0,.14);
background: @bg-dashboard-col;
background: $bg-dashboard-col;
border-radius: 2px;
}
@@ -18,7 +18,7 @@
.o_web_settings_dashboard_col {
padding: 10px 8px;
@media (max-width: @screen-sm-max) {
@media (max-width: $screen-sm-max) {
padding: 5px 8px;
}
@@ -28,7 +28,7 @@
}
> div {
.o_web_settings_dashboard_card();
@include o-web-settings-dashboard-card;
padding: 25px 18px 18px 18px;
.o_web_settings_dashboard_header {
font-size: 22px;
@@ -72,7 +72,7 @@
.o_web_settings_dashboard_planner {
.progress {
height: 10px;
background-color: darken(@bg-dashboard-col, 15%);
background-color: darken($bg-dashboard-col, 15%);
cursor: pointer;
margin-bottom: 30px;
}
@@ -87,7 +87,7 @@
.o_web_settings_dashboard_progress_title {
font-weight: bold;
cursor: pointer;
color: @odoo-brand-optional;
color: $odoo-brand-optional;
}
}
}
addons/web_tour/static/src/scss/keyframes.scss
+12 -12
View File
@@ -1,49 +1,49 @@
@-webkit-keyframes move-left-right {
0% {
.translate(-3px, 0);
@include translate(-3px, 0);
}
100% {
.translate(3px, 0);
@include translate(3px, 0);
}
}
@-moz-keyframes move-left-right {
0% {
.translate(-3px, 0);
@include translate(-3px, 0);
}
100% {
.translate(3px, 0);
@include translate(3px, 0);
}
}
@keyframes move-left-right {
0% {
.translate(-3px, 0);
@include translate(-3px, 0);
}
100% {
.translate(3px, 0);
@include translate(3px, 0);
}
}
@-webkit-keyframes move-bottom-top {
0% {
.translate(0, -3px);
@include translate(0, -3px);
}
100% {
.translate(0, 3px);
@include translate(0, 3px);
}
}
@-moz-keyframes move-bottom-top {
0% {
.translate(0px, -3px);
@include translate(0px, -3px);
}
100% {
.translate(0, 3px);
@include translate(0, 3px);
}
}
@keyframes move-bottom-top {
0% {
.translate(0px, -3px);
@include translate(0px, -3px);
}
100% {
.translate(0, 3px);
@include translate(0, 3px);
}
}
addons/web_tour/static/src/scss/tip.scss
+88 -88
View File
@@ -26,110 +26,110 @@
}
.o_tooltip {
@o-tip-color: @odoo-brand-primary;
@o-tip-size: 24px;
@o-tip-border-width: 2px;
@o-tip-arrow-length: 10px;
@o-tip-arrow-width: 20px;
@o-tip-arrow-integration: 2px;
$o-tip-color: $odoo-brand-primary;
$o-tip-size: 24px;
$o-tip-border-width: 2px;
$o-tip-arrow-length: 10px;
$o-tip-arrow-width: 20px;
$o-tip-arrow-integration: 2px;
@o-tip-duration-in: 300ms;
@o-tip-size-duration-in: floor(@o-tip-duration-in * 3 / 4);
@o-tip-size-delay-in: floor(@o-tip-duration-in / 4);
@o-tip-border-radius-duration-in: floor(@o-tip-duration-in / 2);
@o-tip-border-radius-delay-in: floor(@o-tip-duration-in * 0);
@o-tip-bg-color-duration-in: floor(@o-tip-duration-in * 1);
@o-tip-bg-color-delay-in: floor(@o-tip-duration-in * 0);
@o-tip-arrow-duration-in: floor(@o-tip-duration-in / 2);
@o-tip-arrow-delay-in: floor(@o-tip-duration-in * 0);
@o-tip-white-arrow-duration-in: floor(@o-tip-duration-in * 1);
@o-tip-white-arrow-delay-in: floor(@o-tip-duration-in * 0);
$o-tip-duration-in: 300ms;
$o-tip-size-duration-in: floor($o-tip-duration-in * 3 / 4);
$o-tip-size-delay-in: floor($o-tip-duration-in / 4);
$o-tip-border-radius-duration-in: floor($o-tip-duration-in / 2);
$o-tip-border-radius-delay-in: floor($o-tip-duration-in * 0);
$o-tip-bg-color-duration-in: floor($o-tip-duration-in * 1);
$o-tip-bg-color-delay-in: floor($o-tip-duration-in * 0);
$o-tip-arrow-duration-in: floor($o-tip-duration-in / 2);
$o-tip-arrow-delay-in: floor($o-tip-duration-in * 0);
$o-tip-white-arrow-duration-in: floor($o-tip-duration-in * 1);
$o-tip-white-arrow-delay-in: floor($o-tip-duration-in * 0);
@o-tip-duration-out: 200ms;
@o-tip-size-duration-out: floor(@o-tip-duration-out * 2 / 3);
@o-tip-size-delay-out: floor(@o-tip-duration-out * 0);
@o-tip-border-radius-duration-out: floor(@o-tip-duration-out * 2 / 3);
@o-tip-border-radius-delay-out: floor(@o-tip-duration-out / 3);
@o-tip-arrow-duration-out: floor(@o-tip-duration-out / 2);
@o-tip-arrow-delay-out: floor(@o-tip-duration-out / 2);
$o-tip-duration-out: 200ms;
$o-tip-size-duration-out: floor($o-tip-duration-out * 2 / 3);
$o-tip-size-delay-out: floor($o-tip-duration-out * 0);
$o-tip-border-radius-duration-out: floor($o-tip-duration-out * 2 / 3);
$o-tip-border-radius-delay-out: floor($o-tip-duration-out / 3);
$o-tip-arrow-duration-out: floor($o-tip-duration-out / 2);
$o-tip-arrow-delay-out: floor($o-tip-duration-out / 2);
box-sizing: content-box;
.o-position-absolute(@top: 50%, @left: 50%);
@include o-position-absolute($top: 50%, $left: 50%);
opacity: 0;
width: @o-tip-size;
height: @o-tip-size;
border: @o-tip-border-width solid @o-tip-color;
width: $o-tip-size;
height: $o-tip-size;
border: $o-tip-border-width solid $o-tip-color;
border-radius: 50%;
padding: 0; // ! Cannot be changed ! Javascript rely on this.
z-index: @zindex-modal + 1; // See comment on 'o_tooltip_parent' class
background-color: @o-tip-color;
z-index: $zindex-modal + 1; // See comment on 'o_tooltip_parent' class
background-color: $o-tip-color;
box-shadow: 0 2px 2px 1px rgba(150, 150, 150, 0.3);
transition:
width @o-tip-size-duration-out ease @o-tip-size-delay-out,
height @o-tip-size-duration-out ease @o-tip-size-delay-out,
margin @o-tip-size-duration-out ease @o-tip-size-delay-out,
border-radius @o-tip-border-radius-duration-out ease @o-tip-border-radius-delay-out;
width $o-tip-size-duration-out ease $o-tip-size-delay-out,
height $o-tip-size-duration-out ease $o-tip-size-delay-out,
margin $o-tip-size-duration-out ease $o-tip-size-delay-out,
border-radius $o-tip-border-radius-duration-out ease $o-tip-border-radius-delay-out;
&.o_animated {
.o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate);
@include o-animation(move-bottom-top, 500ms, ease-in, 0ms, infinite, alternate);
&.right, &.left {
.animation-name(move-left-right);
@include animation-name(move-left-right);
}
}
&::before {
content: "";
border: 0 solid rgba(0, 0, 0, 0);
transition: all @o-tip-arrow-duration-out ease @o-tip-arrow-delay-out;
transition: all $o-tip-arrow-duration-out ease $o-tip-arrow-delay-out;
}
&.right::before {
.o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0;
border-right-color: @o-tip-color;
@include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0;
border-right-color: $o-tip-color;
}
&.top::before {
.o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2;
border-top-color: @o-tip-color;
@include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2;
border-top-color: $o-tip-color;
}
&.left::before {
.o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-arrow-integration, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length;
border-left-color: @o-tip-color;
@include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-arrow-integration, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length;
border-left-color: $o-tip-color;
}
&.bottom::before {
.o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-arrow-integration, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2;
border-bottom-color: @o-tip-color;
@include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-arrow-integration, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2;
border-bottom-color: $o-tip-color;
}
&::after {
content: "";
.o-position-absolute(-@o-tip-border-width, -@o-tip-border-width, -@o-tip-border-width, -@o-tip-border-width);
border-color: @o-tip-color;
@include o-position-absolute(-$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width, -$o-tip-border-width);
border-color: $o-tip-color;
border-radius: 50%;
transition: margin @o-tip-size-duration-out ease @o-tip-size-delay-out, border-radius @o-tip-duration-out linear 0s;
background: radial-gradient(lighten(@o-tip-color, 7%), @o-tip-color);
transition: margin $o-tip-size-duration-out ease $o-tip-size-delay-out, border-radius $o-tip-duration-out linear 0s;
background: radial-gradient(lighten($o-tip-color, 7%), $o-tip-color);
}
> .o_tooltip_overlay {
display: none;
.o-position-absolute(0, 0, 0, 0);
margin: -@o-tip-border-width;
@include o-position-absolute(0, 0, 0, 0);
margin: -$o-tip-border-width;
z-index: -1;
}
> .o_tooltip_content {
overflow: hidden;
padding: floor(@o-tip-size/4) floor(@o-tip-size/2);
padding: floor($o-tip-size/4) floor($o-tip-size/2);
visibility: hidden;
transition: visibility 0s ease 0s;
color: black;
// Force style so that it does not depend on where the tooltip is attached
line-height: @line-height-base;
font-size: @font-size-base;
font-family: @font-family-sans-serif;
line-height: $line-height-base;
font-size: $font-size-base;
font-family: $font-family-sans-serif;
font-weight: normal;
.o_skip_tour {
@@ -151,14 +151,14 @@
background-color: white;
transition:
width @o-tip-size-duration-in ease @o-tip-size-delay-in,
height @o-tip-size-duration-in ease @o-tip-size-delay-in,
margin @o-tip-size-duration-in ease @o-tip-size-delay-in,
border-radius @o-tip-border-radius-duration-in ease @o-tip-border-radius-delay-in,
background-color @o-tip-bg-color-duration-in ease @o-tip-bg-color-delay-in;
width $o-tip-size-duration-in ease $o-tip-size-delay-in,
height $o-tip-size-duration-in ease $o-tip-size-delay-in,
margin $o-tip-size-duration-in ease $o-tip-size-delay-in,
border-radius $o-tip-border-radius-duration-in ease $o-tip-border-radius-delay-in,
background-color $o-tip-bg-color-duration-in ease $o-tip-bg-color-delay-in;
&::before {
transition: all @o-tip-arrow-duration-in ease @o-tip-arrow-delay-in;
transition: all $o-tip-arrow-duration-in ease $o-tip-arrow-delay-in;
}
&::after {
border: 0 solid rgba(0, 0, 0, 0);
@@ -170,55 +170,55 @@
}
> .o_tooltip_content {
visibility: visible;
transition: visibility 0s ease @o-tip-duration-in;
transition: visibility 0s ease $o-tip-duration-in;
}
&.right {
&::before {
left: -@o-tip-arrow-length;
border-right-color: @o-tip-color;
left: -$o-tip-arrow-length;
border-right-color: $o-tip-color;
}
&::after {
.o-position-absolute(@left: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2 0;
@include o-position-absolute($left: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2 0;
border-right-color: white;
transition: border-right-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
transition: border-right-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
}
}
&.top {
&::before {
bottom: -@o-tip-arrow-length;
border-top-color: @o-tip-color;
bottom: -$o-tip-arrow-length;
border-top-color: $o-tip-color;
}
&::after {
.o-position-absolute(@bottom: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-length @o-tip-arrow-width/2 0 @o-tip-arrow-width/2;
@include o-position-absolute($bottom: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-length $o-tip-arrow-width/2 0 $o-tip-arrow-width/2;
border-top-color: white;
transition: border-top-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
transition: border-top-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
}
}
&.left {
&::before {
right: -@o-tip-arrow-length;
border-left-color: @o-tip-color;
right: -$o-tip-arrow-length;
border-left-color: $o-tip-color;
}
&::after {
.o-position-absolute(@right: -@o-tip-arrow-length+@o-tip-border-width*2, @top: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: @o-tip-arrow-width/2 0 @o-tip-arrow-width/2 @o-tip-arrow-length;
@include o-position-absolute($right: -$o-tip-arrow-length+$o-tip-border-width*2, $top: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: $o-tip-arrow-width/2 0 $o-tip-arrow-width/2 $o-tip-arrow-length;
border-left-color: white;
transition: border-left-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
transition: border-left-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
}
}
&.bottom {
&::before {
top: -@o-tip-arrow-length;
border-bottom-color: @o-tip-color;
top: -$o-tip-arrow-length;
border-bottom-color: $o-tip-color;
}
&::after {
.o-position-absolute(@top: -@o-tip-arrow-length+@o-tip-border-width*2, @left: (@o-tip-size - @o-tip-arrow-width) / 2);
border-width: 0 @o-tip-arrow-width/2 @o-tip-arrow-length @o-tip-arrow-width/2;
@include o-position-absolute($top: -$o-tip-arrow-length+$o-tip-border-width*2, $left: ($o-tip-size - $o-tip-arrow-width) / 2);
border-width: 0 $o-tip-arrow-width/2 $o-tip-arrow-length $o-tip-arrow-width/2;
border-bottom-color: white;
transition: border-bottom-color @o-tip-white-arrow-duration-in ease @o-tip-white-arrow-delay-in;
transition: border-bottom-color $o-tip-white-arrow-duration-in ease $o-tip-white-arrow-delay-in;
}
}
}
@@ -227,13 +227,13 @@
&.left, &.right {
&::before, &.active::after {
top: auto;
bottom: (@o-tip-size - @o-tip-arrow-width) / 2;
bottom: ($o-tip-size - $o-tip-arrow-width) / 2;
}
}
&.top, &.bottom {
&::before, &.active::after {
left: auto;
right: (@o-tip-size - @o-tip-arrow-width) / 2;
right: ($o-tip-size - $o-tip-arrow-width) / 2;
}
}
}

Some files were not shown because too many files have changed in this diff Show More