flectra/addons/web/static/src/less/kanban_dashboard.less

236 lines
7.2 KiB
Plaintext

// ------- 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;
// Used to manage spacing in complex dropdown menu
@o-kanban-dashboard-dropdown-complex-gap: 5px;
// Emulate dropdown links
.o-kanban-dashboard-dropdown-link(@link-padding-gap: @flectra-dropdown-hpadding) {
padding: 0;
> a {
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;
}
}
&:last-child {
margin-bottom: 5px;
}
}
.o_kanban_view.o_kanban_dashboard {
// correctly display the no_content_helper in dashboards
.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;
@media (max-width: @screen-xs-max) {
margin-bottom: 10px;
}
// ------- Generic layout adaptations -------
.container {
width: 100%;
}
// ------- Dropdown toggle & menu -------
@o-kanban-manage-toggle-height: 35px;
.o_kanban_manage_toggle_button {
.o-kanban-dropdown(@o-kanban-dashboard-hpadding);
height: @o-kanban-manage-toggle-height;
}
.o_kanban_card_manage_pane {
.dropdown-menu;
.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;
> div:not(.o_project_kanban_colorpicker) {
padding: 3px 0 3px 20px;
visibility: visible;
margin-bottom: 5px;
}
> .o_kanban_card_manage_section {
border-bottom: 1px solid @gray-lighter-dark;
margin-bottom: 10px;
> div {
.o-kanban-dashboard-dropdown-link();
}
}
// Dropdown menu with complex layout
&.container {
width: 95%;
max-width: 400px;
.row {
.o-flex-display();
.o-flex-flow(row, nowrap);
.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;
}
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;
> .o_kanban_card_manage_title {
.h5;
font-weight: 500;
}
> div:not(.o_kanban_card_manage_title) {
.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;
.oe_kanban_colorpicker {
max-width: none;
padding: 0;
}
div[class*="col-"] + div[class*="col-"] {
border-left: 1px solid @gray-lighter-dark;
}
// Default options box
div.text-right {
text-align: left; // :/
.o-kanban-dashboard-dropdown-link(0);
> a {
margin-left: 40px;
padding-left: 20px;
}
}
}
}
}
&.o_dropdown_open {
.o_kanban_card_manage_pane {
display: block;
}
.o_kanban_manage_toggle_button {
.o-kanban-dropdown-open();
position: absolute;
}
}
// ------- Kanban Record Titles -------
// Uniform design across different HTML layouts
// Provide enough room for the dropdown-toggle
.o_primary {
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);
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;
}
// Provide enough room to add an icon before the title
&.o_has_icon .o_primary {
padding-left: @o-kanban-record-margin*1.5;
}
// ------- Kanban Content -------
.o_kanban_card_content {
display: inline-block;
vertical-align: top;
min-height: 80px;
}
.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;
padding-right: 0;
padding-left: 0;
&::before, &::after {
content: normal; // so that space-between works
}
a {
position: relative;
.o-text-overflow(inline-block);
}
.o_kanban_primary_bottom {
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;
}
}
}
.o_dashboard_graph {
overflow: hidden;
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;
}
.o_favorite {
top: 3px;
left: 0;
right: auto;
}
// Emphasize records' colors when necessary
&.o_emphasize_colors .o_kanban_record::after {
width: @o-kanban-color-border-width * 2;
}
}