704 lines
18 KiB
Plaintext
704 lines
18 KiB
Plaintext
.o_form_view {
|
|
background-color: @flectra-view-background-color;
|
|
|
|
// Utility classes
|
|
.oe_form_box_info {
|
|
.bg-info;
|
|
.o-webclient-padding(@top: 5px, @bottom: 5px);
|
|
> p {
|
|
margin: auto;
|
|
}
|
|
}
|
|
.oe_text_center {
|
|
text-align: center;
|
|
}
|
|
.oe_link {
|
|
.btn-link;
|
|
}
|
|
.oe_grey {
|
|
opacity: 0.5;
|
|
}
|
|
.oe_inline {
|
|
width: auto!important;
|
|
@media (min-width: @screen-xs-min) {
|
|
&.o_inner_group {
|
|
width: 1px!important;
|
|
}
|
|
}
|
|
}
|
|
.oe_left {
|
|
.oe_inline;
|
|
float: left!important;
|
|
}
|
|
.oe_right {
|
|
.oe_inline;
|
|
float: right!important;
|
|
}
|
|
|
|
@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();
|
|
width: auto!important;
|
|
}
|
|
|
|
.o-align-items(baseline);
|
|
min-width: 50px;
|
|
margin: 0 -@flectra-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);
|
|
width: auto!important;
|
|
margin-right: @flectra-form-spacing-unit/2;
|
|
margin-left: @flectra-form-spacing-unit/2;
|
|
}
|
|
|
|
> .o_row {
|
|
margin: 0;
|
|
}
|
|
> .btn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
> .o_field_boolean {
|
|
.o-align-self(center);
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_row > div > .o_field_widget {
|
|
width: 100%;
|
|
}
|
|
|
|
// Readonly specific rules
|
|
&.o_form_readonly {
|
|
.oe_edit_only {
|
|
display: none!important;
|
|
}
|
|
|
|
.o_row, .o_row > div {
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
.o_form_uri {
|
|
display: inline-block;
|
|
|
|
color: @flectra-main-text-color;
|
|
&:first-line {
|
|
color: @link-color;
|
|
}
|
|
&:hover {
|
|
color: darken(@flectra-main-text-color, 1%); // hack required on chrome
|
|
&:first-line {
|
|
color: darken(@link-color, 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Editable specific rules
|
|
&.o_form_editable {
|
|
.oe_read_only {
|
|
display: none!important;
|
|
}
|
|
|
|
.oe_title {
|
|
max-width: @container-sm - (2 * @flectra-horizontal-padding);
|
|
}
|
|
|
|
@media (min-width: @screen-xs-min) {
|
|
.o_row {
|
|
> .o_field_widget, > div {
|
|
.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);
|
|
width: auto!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// No sheet
|
|
&.o_form_nosheet {
|
|
display: block;
|
|
.o-webclient-padding(@top: @flectra-sheet-vpadding, @bottom: @flectra-sheet-vpadding);
|
|
|
|
.o_form_statusbar {
|
|
margin: -@flectra-sheet-vpadding -@flectra-horizontal-padding @flectra-sheet-vpadding -@flectra-horizontal-padding;
|
|
}
|
|
}
|
|
|
|
// Non-chatter rules
|
|
.o_form_sheet_bg {
|
|
position: relative;
|
|
|
|
> .o_form_sheet {
|
|
margin: @flectra-sheet-vpadding auto;
|
|
}
|
|
}
|
|
|
|
// Statusbar
|
|
.o_form_statusbar {
|
|
position: relative; // Needed for the "More" dropdown
|
|
.o-flex-display();
|
|
.o-justify-content(space-between);
|
|
padding-left: @flectra-horizontal-padding;
|
|
border-bottom: 1px solid @gray-lighter-darker;
|
|
background-color: @flectra-view-background-color;
|
|
|
|
> .o_statusbar_buttons, > .o_statusbar_status {
|
|
.o-flex-display();
|
|
.o-align-items(center);
|
|
.o-align-content(space-around);
|
|
}
|
|
|
|
> .o_field_widget {
|
|
.o-align-self(center);
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
> .o_statusbar_buttons {
|
|
.o-flex-flow(row, wrap);
|
|
|
|
> .btn {
|
|
@o-statusbar-buttons-vmargin: 4px;
|
|
min-height: @flectra-statusbar-height - 2 * @o-statusbar-buttons-vmargin;
|
|
margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
> .o_statusbar_status {
|
|
.o-flex-flow(row-reverse, wrap-reverse);
|
|
.o-align-self(stretch);
|
|
.o-align-items(stretch);
|
|
overflow-x: hidden; // to prevent horizontal scroll due to last arrow
|
|
|
|
> .o_arrow_button {
|
|
min-height: @flectra-statusbar-height;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
padding-left: @flectra-statusbar-arrow-width*2;
|
|
color: @gray;
|
|
border-width: 0 0 0;
|
|
border-radius: 0;
|
|
.o-transition(all, 0.1s);
|
|
|
|
&:first-child {
|
|
padding-right: @flectra-horizontal-padding; // Compensate container padding
|
|
}
|
|
&:last-child {
|
|
padding-left: @flectra-horizontal-padding - 1;
|
|
border-left: 1px solid @gray-lighter-darker;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 1.0;
|
|
color: @text-muted;
|
|
pointer-events: none;
|
|
border-left: 1px solid @gray-lighter-dark;
|
|
}
|
|
|
|
&:before, &:after {
|
|
content: " ";
|
|
display: block;
|
|
.o-position-absolute(0, -@flectra-statusbar-arrow-width + 1);
|
|
|
|
border-top: floor(@flectra-statusbar-height/2) solid transparent;
|
|
border-bottom: ceil(@flectra-statusbar-height/2) solid transparent;
|
|
border-right: none;
|
|
border-left: @flectra-statusbar-arrow-width solid @flectra-view-background-color;
|
|
.o-transition(border, 0.2s);
|
|
-moz-transform: scale(0.9999); // Smooth the triangle on firefox
|
|
}
|
|
|
|
&:not(.disabled) {
|
|
&:hover, &:active, &:focus {
|
|
color: @flectra-brand-optional;
|
|
background-color: @gray-lighter;
|
|
|
|
&:after {
|
|
border-left-color: @gray-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
right: -@flectra-statusbar-arrow-width;
|
|
border-left-color: @gray-lighter-dark;
|
|
}
|
|
|
|
&.btn-primary.disabled {
|
|
color: @flectra-brand-primary;
|
|
font-size: 11px;
|
|
background-color: @gray-lighter;
|
|
cursor: default;
|
|
|
|
&:after {
|
|
border-left-color: @gray-lighter;
|
|
}
|
|
}
|
|
|
|
.caret {
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
|
|
.o-status-more {
|
|
.o-position-absolute(100%, 0);
|
|
min-width: 100px;
|
|
> li > button {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Touch device mode
|
|
> .o_statusbar_buttons > .btn-group, > .o_statusbar_status {
|
|
> .dropdown-toggle {
|
|
&:after {
|
|
.o-caret-down();
|
|
margin-left: @flectra-form-spacing-unit;
|
|
}
|
|
}
|
|
|
|
> .dropdown-menu {
|
|
padding: 5px 0 2px 0;
|
|
min-width: 100px;
|
|
|
|
> li > .btn {
|
|
min-width: 100%;
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button box
|
|
.oe_button_box {
|
|
.oe_stat_button {
|
|
&:not(:hover) .o_stat_info > .o_hover {
|
|
display: none !important;
|
|
}
|
|
&:hover .o_stat_info > .o_not_hover {
|
|
display: none !important
|
|
}
|
|
}
|
|
}
|
|
|
|
// Title
|
|
.oe_title {
|
|
> h1, > h2, > h3 {
|
|
width: 100%; // Needed because inline-block when is a hx.o_row
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
line-height: inherit;
|
|
}
|
|
.o_priority > .o_priority_star {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
// Groups
|
|
.o_group {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
|
|
// o_group contains nested groups
|
|
.o-generate-groups(@flectra-form-group-cols);
|
|
.o-generate-groups(@n, @i: 1) when (@i =< @n) {
|
|
.o_group_col_@{i} {
|
|
display: inline-block;
|
|
width: floor(100% / 12 * @i);
|
|
vertical-align: top;
|
|
}
|
|
.o-generate-groups(@n, @i + 1);
|
|
}
|
|
|
|
&.o_inner_group {
|
|
display: inline-table;
|
|
|
|
> tbody > tr > td {
|
|
&.o_td_label {
|
|
width: 0%;
|
|
padding: 0 15px 0 0;
|
|
min-width: 150px;
|
|
}
|
|
vertical-align: top;
|
|
|
|
span, .o_field_boolean, .oe_avatar, .o_form_uri {
|
|
&.o_field_widget {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_form_label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.o_field_widget {
|
|
width: 100%;
|
|
|
|
> .btn {
|
|
.o-flex(0, 0, auto);
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
:not(.o_row) > .o_field_widget,
|
|
.o_row > .o_field_widget:last-child { // Note: this does not take care
|
|
// of an invisible last-child but
|
|
// it does not really matter
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
&.o_label_nowrap .o_form_label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.o_td_label .o_form_label {
|
|
font-weight: bold;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
// Separators
|
|
.o_horizontal_separator {
|
|
font-size: @font-size-h2;
|
|
margin: @flectra-form-spacing-unit 0;
|
|
&:empty {
|
|
height: @flectra-form-spacing-unit * 2;
|
|
}
|
|
}
|
|
|
|
// Notebooks
|
|
.o_notebook {
|
|
clear: both; // For the notebook not to have alongside floating elements
|
|
margin-top: @flectra-form-spacing-unit * 2;
|
|
|
|
.nav-tabs > .tab-pane {
|
|
min-height: 100px;
|
|
}
|
|
}
|
|
|
|
// Labels
|
|
.o_form_label {
|
|
margin: 0 @flectra-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: @flectra-form-spacing-unit;
|
|
}
|
|
.o_field_widget, .btn {
|
|
.o_field_widget {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
// Translate icon
|
|
.o_field_translate {
|
|
padding: 0;
|
|
cursor: pointer;
|
|
width: 12px !important;
|
|
vertical-align: top;
|
|
&::before { // seems to be useful for some old browser
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
// Text field with oe_inline class
|
|
.o_field_text.oe_inline {
|
|
width: 100%!important;
|
|
@media (min-width: @screen-xs-min) {
|
|
width: 45%!important;
|
|
}
|
|
}
|
|
|
|
// One2Many, Many2Many outside of group
|
|
.o_field_widget {
|
|
&.o_view_manager_content, &.o_field_one2many, &.o_field_many2many {
|
|
width: 100%;
|
|
> div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Specific style classes
|
|
.o_group.o_inner_group.oe_subtotal_footer {
|
|
.oe_right;
|
|
|
|
> tbody > tr > td {
|
|
padding: 0;
|
|
|
|
&.o_td_label {
|
|
text-align: right;
|
|
}
|
|
|
|
.o_form_label {
|
|
padding-right: 20px;
|
|
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
&:after {
|
|
content: ":";
|
|
}
|
|
}
|
|
|
|
.o_field_widget {
|
|
text-align: right;
|
|
.o-justify-content(flex-end);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
> tbody > tr:first-child > td {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.oe_subtotal_footer_separator {
|
|
width: 100%;
|
|
text-align: right;
|
|
border-top: 1px solid @gray-lighter-dark;
|
|
font-weight: bold;
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
|
|
.o_address_format {
|
|
width: 100%;
|
|
.o_address_street, .o_address_country {
|
|
.o-flex-display;
|
|
}
|
|
|
|
.o_address_city {
|
|
margin-right: 2%;
|
|
}
|
|
.o_address_state {
|
|
margin-right: 2%;
|
|
}
|
|
&.o_zip_city {
|
|
.o_address_zip {
|
|
margin-right: 2%;
|
|
}
|
|
.o_address_city {
|
|
margin-right: 0;
|
|
}
|
|
.o_address_state {
|
|
display: block;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&.o_city_state {
|
|
.o_address_state {
|
|
margin-right: 0;
|
|
}
|
|
.o_address_zip {
|
|
display: block;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
> span.o_field_widget {
|
|
width: auto;
|
|
}
|
|
}
|
|
&.o_form_editable .o_address_format {
|
|
.o_address_city {
|
|
width: 38%;
|
|
}
|
|
div.o_address_state {
|
|
width: 33%;
|
|
}
|
|
input.o_address_zip {
|
|
width: 25%;
|
|
}
|
|
&.o_zip_city {
|
|
.o_address_zip {
|
|
width: 38%;
|
|
}
|
|
.o_address_city {
|
|
width: 60%;
|
|
}
|
|
.o_address_state {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&.o_city_state {
|
|
.o_address_city {
|
|
width: 50%;
|
|
}
|
|
.o_address_state {
|
|
width: 48%;
|
|
}
|
|
.o_address_zip {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Boolean
|
|
.o_field_boolean {
|
|
margin: 0 @flectra-form-spacing-unit 0 0;
|
|
}
|
|
|
|
// Timezone widget warning
|
|
.o_tz_warning {
|
|
color: @brand-danger;
|
|
cursor: help;
|
|
position: absolute;
|
|
margin-left: -40px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
// One2Many Kanban views
|
|
.o_field_widget .o_kanban_view.o_kanban_ungrouped {
|
|
padding: 0;
|
|
.o_kanban_record {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// One2Many List views
|
|
.o_field_widget .o_list_view {
|
|
margin-bottom: 10px;
|
|
|
|
> tfoot > tr > td {
|
|
padding: 3px;
|
|
color: @flectra-main-text-color;
|
|
}
|
|
}
|
|
&.o_form_readonly .o_field_widget .o_list_view .o_row_handle {
|
|
display: none; // Hide the handler in non-edit mode
|
|
}
|
|
|
|
// Attachments
|
|
.oe_attachment {
|
|
display: inline-block;
|
|
border: 1px solid @flectra-brand-lightsecondary;
|
|
margin: 0 @flectra-form-spacing-unit @flectra-form-spacing-unit 0;
|
|
padding: @flectra-form-spacing-unit;
|
|
}
|
|
|
|
&.oe_form_configuration {
|
|
.o_group .o_form_label {
|
|
white-space: nowrap;
|
|
}
|
|
h2 {
|
|
margin-top: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overriden style when form view in modal
|
|
.modal .modal-dialog {
|
|
.o_form_view {
|
|
.o_form_sheet_bg {
|
|
padding: 0;
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
|
|
> .o_form_sheet {
|
|
box-shadow: none;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
max-width: none;
|
|
}
|
|
}
|
|
.oe_chatter {
|
|
display: none;
|
|
}
|
|
}
|
|
&:not(.modal-lg) .o_form_view {
|
|
.o_group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.oe_button_box, .o_form_statusbar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// FIXME bootstrap modal : 1050
|
|
.ui-autocomplete {
|
|
z-index: 1051;
|
|
}
|
|
|
|
// Buttons in ControlPanel
|
|
.o_control_panel .o_form_buttons_view > button:first-child {
|
|
float: left; // Unfortunately needed for the bounce effect
|
|
margin-right: 4px;
|
|
}
|
|
|
|
// Light labels (not in bold) for settings forms
|
|
label.o_light_label, .o_light_label label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.o_settings_container {
|
|
.o-flex-display();
|
|
.o-flex(0, 1, auto);
|
|
.o-flex-flow(row, wrap);
|
|
.o_setting_box:visible:nth-child(odd) {
|
|
clear: left;
|
|
}
|
|
.text-muted {
|
|
color: #aaaaaa;
|
|
}
|
|
.o_setting_box {
|
|
margin-bottom: 8px;
|
|
margin-top: 8px;
|
|
.o_setting_left_pane {
|
|
width: 24px;
|
|
float: left;
|
|
.o_enterprise_label {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 40px;
|
|
}
|
|
}
|
|
.o_setting_right_pane {
|
|
margin-left: 30px;
|
|
border-left: 1px solid #bbbbbb;
|
|
padding-left: 10px;
|
|
.o_input_dropdown > .o_input {
|
|
width: 100%;
|
|
}
|
|
.o_field_widget {
|
|
width: 50%;
|
|
}
|
|
button.btn-link {
|
|
padding: 0;
|
|
}
|
|
a.oe-link {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|