diff options
Diffstat (limited to 'addons/web/static/src/scss/fields.scss')
| -rw-r--r-- | addons/web/static/src/scss/fields.scss | 132 |
1 files changed, 64 insertions, 68 deletions
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index ff6fe9eb20b..f28e3ba349c 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -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}}"; - } - } - .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}}"; + @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(); } // 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; } } |