muk_web/muk_web_searchpanel/static/src/scss/kanban_view.scss

/**********************************************************************************
* 
*    Copyright (C) 2017 MuK IT GmbH
*
*    This program is free software: you can redistribute it and/or modify
*    it under the terms of the GNU Affero General Public License as
*    published by the Free Software Foundation, either version 3 of the
*    License, or (at your option) any later version.
*
*    This program is distributed in the hope that it will be useful,
*    but WITHOUT ANY WARRANTY; without even the implied warranty of
*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*    GNU Affero General Public License for more details.
*
*    You should have received a copy of the GNU Affero General Public License
*    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*
**********************************************************************************/

.o_kanban_with_searchpanel {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;

    .o_onboarding_container {
   		flex: 1 1 100%;
   	}
    .o_kanban_view {
        flex: 1 1 calc(100% - #{$o-searchpanel-w});
        overflow: auto;
        max-height: 100%;
    }
    .o_search_panel {
        flex: 0 0 $o-searchpanel-w;
        overflow: auto;
        height: 100%;
        padding: $o-searchpanel-p-small $o-searchpanel-p-small $o-searchpanel-p*2 $o-searchpanel-p;
        border-right: 1px solid $gray-300;
        background-color: white;
        position: relative;

		.o_search_panel_loading {
		    position: absolute;
		    margin-top: -30px;
		    margin-left: -30px;
		    margin-bottom: 0;
		    margin-right: 0;
		    font-size: 60px;
		    height: 60px;
			width: 60px;
		    left: 50%;
		    top: 50%;
		}

        .o_search_panel_category .o_search_panel_section_icon {
            color: $o-searchpanel-category-default-color;
        }
        .o_search_panel_filter .o_search_panel_section_icon {
            color: $o-searchpanel-filter-default-color;
        }

        .o_search_panel_label {
            cursor: pointer;
            user-select: none;

            .o_toggle_fold {
                padding: 3px;
            }
        }
        .o_search_panel_section_header {
            padding: $o-searchpanel-p-small 0;
        }
        .list-group-item {
            padding: 0 0 $o-searchpanel-p-small 0;

            .list-group-item {
                padding: 0 0 0 $custom-control-gutter;
                margin-bottom: $o-searchpanel-p-tiny*0.5;
                &:first-child {
                    margin-top: $o-searchpanel-p-tiny*0.5;
                }
            }
            span.o_search_panel_label_title {
                color: $headings-color;
                @include o-text-overflow(inline-block, calc(100% - 22px));
            }
            header.active {
                background-color: $list-group-action-active-bg;
            }
        }
        .o_search_panel_category_value {
            header {
                margin-left: -$o-searchpanel-p-tiny;
                padding-left: $o-searchpanel-p-tiny;
            }
            .o_search_panel_category_value {
                position: relative;
                padding-left: $o-searchpanel-p;
                padding-bottom: $o-searchpanel-p-tiny;
                margin-bottom: 0;

                &:before, &:after {
                    @include o-position-absolute(0, $left: $o-searchpanel-p-tiny)
                    @include size(1px, 100%);
                    background: $gray-500;
                    content: '';
                }
                &:after {
                    top: 10px;
                    @include size(8px, 1px);
                }
                &:last-child {
                    &:before {
                        height: 11px;
                    }
                    &:after {
                        top: 11px;
                    }
                }
            }
        }
    }
}