[REF] web: less: form view's statusbar
Move the statusbar rules to community as both webclient now share the same js basecode for the statusbar.
This commit is contained in:
Aaron Bohy
@@ -76,6 +76,93 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Header containing status/workflow buttons
|
||||
.o_form_statusbar {
|
||||
background-color: @odoo-view-background-color;
|
||||
position: relative; // Needed for the "More" dropdown
|
||||
border-bottom: 1px solid @odoo-brand-secondary;
|
||||
|
||||
> .o_statusbar_status {
|
||||
> .o_arrow_button {
|
||||
min-height: @odoo-statusbar-height;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-left: @odoo-statusbar-arrow-width*2;
|
||||
color: @odoo-main-color-muted;
|
||||
.o-transition(all, 0.2s);
|
||||
|
||||
&:first-child {
|
||||
padding-right: @odoo-horizontal-padding; // Compensate container padding
|
||||
}
|
||||
&:last-child {
|
||||
padding-left: @odoo-horizontal-padding - 1;
|
||||
border-left: 1px solid @odoo-brand-lightsecondary;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 1.0;
|
||||
cursor: auto;
|
||||
pointer-events: auto;
|
||||
color: @odoo-main-text-color;
|
||||
border-left: 1px solid @odoo-brand-lightsecondary;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
.o-position-absolute(0, -@odoo-statusbar-arrow-width + 1);
|
||||
|
||||
border-top: @odoo-statusbar-height/2 solid transparent;
|
||||
border-bottom: @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);
|
||||
-moz-transform: scale(0.9999); // Smooth the triangle on firefox
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
&:hover, &:active, &:focus {
|
||||
color: white;
|
||||
background-color: @odoo-brand-optional;
|
||||
&:after {
|
||||
border-left-color: @odoo-brand-optional;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: -@odoo-statusbar-arrow-width;
|
||||
border-left-color: @odoo-brand-lightsecondary;
|
||||
}
|
||||
|
||||
&.btn-primary.disabled {
|
||||
color: @text-color;
|
||||
background-color: @odoo-statusbar-disabled-bg;
|
||||
|
||||
&:before {
|
||||
border-left-color: @odoo-brand-lightsecondary;
|
||||
}
|
||||
&:after {
|
||||
border-left-color: @odoo-statusbar-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o-status-more {
|
||||
.o-position-absolute(100%, 0);
|
||||
min-width: 100px;
|
||||
> li > button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button box
|
||||
.oe_button_box {
|
||||
.oe_stat_button {
|
||||
@@ -93,7 +180,7 @@
|
||||
.o_priority > .o_priority_star {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Groups
|
||||
.o_group {
|
||||
|
||||
@@ -19,120 +19,6 @@
|
||||
&.o_form_nosheet > header {
|
||||
margin: -16px -16px 0 -16px;
|
||||
}
|
||||
ul.oe_form_status, ul.oe_form_status_clickable {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 18px 0 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
// It is probably a bad idea to modify this margin
|
||||
margin: 0 -18px 0 0;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
.o-vertical-gradient(#fcfcfc, #dedede);
|
||||
&:first-child > .label {
|
||||
border-left: 1px solid #cacaca;
|
||||
padding-left: 14px;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid #cacaca;
|
||||
> .label {
|
||||
padding-right: 14px;
|
||||
}
|
||||
> .arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .label {
|
||||
color: #4c4c4c;
|
||||
text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede;
|
||||
padding: 7px;
|
||||
display: inline-block;
|
||||
padding-left: 24px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
// Customize for statusbar label
|
||||
line-height: normal;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
// End of customize
|
||||
}
|
||||
> .arrow {
|
||||
width: 17px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
margin-left: -5px;
|
||||
span {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-left: -12px;
|
||||
margin-top: 3px;
|
||||
border-radius: 3px;
|
||||
box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2);
|
||||
.o-skew-gradient(#fcfcfc, #dedede);
|
||||
.o-transform(rotate(45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.oe_dropdown_menu {
|
||||
display: none;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
&.oe_opened {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
span.label {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.oe_active {
|
||||
.o-vertical-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%));
|
||||
> .arrow span {
|
||||
.o-skew-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%));
|
||||
}
|
||||
> .label {
|
||||
color: white;
|
||||
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.oe_form_status_clickable {
|
||||
li {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
.o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%));
|
||||
> .label {
|
||||
text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
|
||||
}
|
||||
> .arrow span {
|
||||
.o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%));
|
||||
}
|
||||
}
|
||||
> .label {
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
li.oe_active {
|
||||
&:hover {
|
||||
.o-vertical-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%));
|
||||
> .label {
|
||||
text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
|
||||
}
|
||||
> .arrow span {
|
||||
.o-skew-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button box
|
||||
.oe_button_box {
|
||||
|
||||
@@ -88,6 +88,61 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Header containing status/workflow buttons
|
||||
.o_form_statusbar {
|
||||
.o-flex(0, 0, auto);
|
||||
.o-flex-display();
|
||||
.o-justify-content(space-between);
|
||||
|
||||
padding-left: @odoo-horizontal-padding;
|
||||
|
||||
> .o_statusbar_buttons, > .o_statusbar_status {
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
.o-align-content(space-around);
|
||||
}
|
||||
|
||||
> .o_form_field {
|
||||
.o-align-self(center);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
> .o_statusbar_buttons {
|
||||
.o-flex-flow(row, wrap);
|
||||
|
||||
> .btn {
|
||||
margin: 2px 3px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .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
|
||||
}
|
||||
|
||||
// Touch device mode
|
||||
> .o_statusbar_buttons > .btn-group {
|
||||
> .dropdown-toggle {
|
||||
&:after {
|
||||
.o-caret-down();
|
||||
margin-left: @odoo-form-spacing-unit;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
padding: 5px 0 2px 0;
|
||||
min-width: 100px;
|
||||
|
||||
> li > .btn {
|
||||
min-width: 100%;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
.oe_title {
|
||||
> h1, > h2, > h3 {
|
||||
|
||||
@@ -28,22 +28,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Header containing status/workflow buttons
|
||||
> header {
|
||||
padding-left: 14px;
|
||||
.clearfix();
|
||||
ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu) {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
> button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
> span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Button box
|
||||
.oe_button_box {
|
||||
width: 400px;
|
||||
|
||||
@@ -47,8 +47,9 @@
|
||||
|
||||
@odoo-avatar-size: 90px;
|
||||
|
||||
@odoo-statusbar-height: 36px;
|
||||
@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;
|
||||
|
||||
Reference in New Issue
Block a user