basti.scss

/* Copyright 2022 SIB Visions GmbH
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

/// Basic Theme React
:root {
    /// Font-size
    --font-size: 14px;

    /// Login form top bottom padding
    --login-form-top-bottom-padding: 40px;
  
    /// Login form left right padding
    --login-form-left-right-padding: 40px;

    /// Login form field margin
    --login-form-field-margin: 1.5rem;

    /// Standard-menu header height
    --std-header-height: 70px;

    /// Standard-menu width when expanded
    --std-menu-width: 240px;

    /// Standard-menu width when collapsed
    --std-menu-collapsed-width: 80px;

    /// Standard-menu logo width when expanded
    --std-logo-width: 190px;

    /// Standard-menu logo width when collapsed
    --std-logo-collapsed-width: 60px;

    /// Standard-menu logo height
    --std-logo-height: 60px;

    /// Standard-menu height of the profile-menu
    --std-profile-height: 60px;

    /// Standard-menu small profile-menu width
    --std-profile-width-small: 60px;

    /// Standard-menu profile-menu padding
    --std-profile-padding: 0.75rem 1rem;

    /// Standard-menu profile-menu picture size
    --std-profile-pic: 40px;

    /// Standard-menu profile-menu & buttons separator margin
    --std-profile-separator-margin: 4px;

    /// Standard-menu profile-menu sub-menu width when in mini mode
    --std-profile-submenu-width-small: 10rem;

    /// Standard-menu full size of topbar buttons
    --topbar-button-size: 60px;

    /// Standard-menu small size of topbar buttons
    --topbar-button-size-small: 40px;

    /// Standard-menu-fadeout-width
    --std-fadeout-width: 20px;

    /// Standard-menu-fadeout-left
    --std-fadeout-left: calc(var(--std-menu-collapsed-width) - var(--std-fadeout-width));

    /// Padding of a menu-header for standard menu.
    --std-menu-header-padding: 1rem 1rem 1rem 0.625rem;

    /// Padding of a menu-item for standard menu.
    --std-menu-item-padding: 0.75rem 0.75rem 0.75rem 1.5rem;

    /// Corporation-menu header height
    --corp-header-height: 70px;

    /// Corporation-menu logo width
    --corp-logo-width: 190px;

    /// Corporation-menu profile-menu height
    --corp-profile-height: 60px;

    /// Corporation-menu small profile-menu width
    --corp-profile-width-small: 60px;

    /// Corporation-menu profile-menu padding
    --corp-profile-padding: 0.75rem 1rem;

    /// Corporation-menu profile-menu picture size
    --corp-profile-pic: 40px;

    /// Corporation-menu profile-menu & buttons separator margin
    --corp-profile-separator-margin: 4px;

    /// Corporation-menu profile-menu sub-menu width when in mini mode
    --corp-profile-submenu-width-small: 10rem;

    /// Corporation-menu full size of topbar buttons
    --corp-topbar-buttons: 60px;

    /// Corporation-menu small size of topbar buttons
    --corp-topbar-buttons-small: 40px;

    /// Corporation-menu menubar height
    --corp-menubar-height: 40px;

    /// Corporation-menu speeddial size
    --corp-speeddial-size: 2rem;

    /// Padding of a menu-header for coporation-menu.
    --corp-menu-header-padding: 0.75rem 1rem;

    /// Padding of a menu-item for corporation menu.
    --corp-menu-item-padding: 0.75rem 1rem;

    /// Padding of input fields
    --input-padding: 0.5rem 0.5rem;

    /// Padding for buttons next to input fields. e.g. LinkedCellEditor, DateCellEditor
    --input-button-padding: 0rem 0.5rem;

    /// Icon size for LinkedCellEditor and DateCellEditor
    --input-button-icon-size: 14px;

    /// Padding for normal buttons
    --button-padding: 0.5rem 1rem;

    /// Padding for icon-only buttons
    --button-icon-only-padding: 0.5rem 0.5rem;

    /// Padding for the left part of the menu-button
    --menubtn-leftbtn-padding: 0.5rem 0rem 0.5rem 1rem;

    /// Padding for the right part of the menu-button
    --menubtn-rightbtn-padding: 0.5rem 0rem;

    /// Size of a checkbox
    --checkbox-size: 20px;

    /// Size of a radiobutton
    --radiobutton-size: 20px;

    /// Padding of tabs
    --tab-padding: 0rem 1rem;

    /// Padding of table headers
    --table-header-padding: 0.6rem 1rem;

    /// Padding of table cells
    --table-cell-padding-top-bottom: 0.2rem;

    /// Padding of table cells
    --table-cell-padding-left-right: 0.4rem;

    /// Height of cell data in a table
    --table-data-height: 27px;

    /// Fixed Padding for Labels
    --label-padding: 9px;

    --menubar-height: 40px;

    --menuicon-size: 14px;

    --dialog-header-padding: 1rem;

    --error-dialog-min-width: 205px;

    --error-dialog-details-gap: 1rem;

    --error-dialog-textarea-height: 8rem;

    --error-dialog-icon-size: 2rem;
}

body {
    font-size: var(--font-size);
}

.login-form {
    .p-fluid {
        padding: calc(var(--login-form-top-bottom-padding) / 2) var(--login-form-left-right-padding) var(--login-form-top-bottom-padding);

        .p-field {
            margin-bottom: var(--login-form-field-margin);
        }
    }

    .login-logo-wrapper {
        padding: var(--login-form-top-bottom-padding) var(--login-form-left-right-padding) calc(var(--login-form-top-bottom-padding) / 2);
    }
}

.basti {
    .p-menubar {
        padding: 0;
        height: var(--menubar-height);
    }

    .std-menu {
        &.menu-collapsed {
            .menu-logo-wrapper {
                width: var(--std-menu-collapsed-width);

                .menu-logo {
                    width: var(--std-logo-collapsed-width);
                }
            }

            .menu-panelmenu-wrapper {
                width: var(--std-menu-collapsed-width);
            }

            .menu-topbar {
                margin-left: var(--std-menu-collapsed-width);
            }

            .menu-logo-mini {
                width: var(--std-logo-collapsed-width);
            }
        }

        .menu-header {
            height: var(--std-header-height);
        }

        .menu-topbar {
            margin-left: var(--std-menu-width);
        }

        .menu-logo-wrapper {
            height: var(--std-header-height);
            width: var(--std-menu-width);

            .menu-logo {
                max-height: var(--std-logo-height);
                width: var(--std-logo-width);
            }
        }

        .p-button.p-button-icon-only.menu-topbar-buttons {
            width: var(--topbar-button-size);
            height: var(--topbar-button-size);
        }

        .profile-image, .profile-image-null {
            width: var(--std-profile-pic);
            height: var(--std-profile-pic);
        }

        .profile-image {
            background-size: var(--std-profile-pic) var(--std-profile-pic);
        }
        
        .profile-image-null::before {
            font-size: calc(var(--std-profile-pic) - 2px);
        }

        .menu-panelmenu-wrapper {
            width: var(--std-menu-width);
            padding-top: var(--std-header-height);
        }

        .menu-logo-mini {
            width: var(--std-logo-width);
        }

        .p-panelmenu {
            .p-panelmenu-header > a {
                padding: var(--std-menu-header-padding);
            }
        
            .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled) {
                padding: var(--std-menu-item-padding);
            }

            .p-panelmenu-icon {
                left: calc(var(--std-menu-width) - 30px)
            }
        }

        .p-menuitem-icon:not(.profile-image):not(.profile-image-null) {
            min-width: var(--menuicon-size);
            max-width: var(--menuicon-size);
            font-size: var(--menuicon-size);
        }

        .fadeout {
            left: var(--std-fadeout-left);
            width: var(--std-fadeout-width);
            margin-top: var(--std-header-height);
        }
    }

    .profile-menu {
        height: var(--std-profile-height);

        .p-menubar {
            height: 100%;
            .p-menubar-root-list >.p-menuitem >.p-menuitem-link {
                height: var(--std-profile-height);
                padding: var(--std-profile-padding);
            }

            .p-submenu-list {
                width: calc(100% - var(--std-profile-separator-margin));
                margin-left: var(--std-profile-separator-margin);
            }
        }
    }

    .vl {
        height: var(--std-profile-height);
    }

    .corp-menu {
        .corp-menu-header {
            height: var(--corp-header-height);
        }

        .corp-menu-menubar .p-menubar {
            height: var(--corp-menubar-height);

            .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled) {
                padding: var(--corp-menu-header-padding);
            }
            .p-menuitem-link {
                padding: var(--corp-menu-item-padding);
            }
        }

        .corp-menu-logo-wrapper {
            max-width: var(--corp-logo-width);
        }

        .p-button.p-button-icon-only.menu-topbar-buttons {
            width: var(--corp-topbar-buttons);
            height: var(--corp-topbar-buttons);
        }

        .profile-menu {
            .p-menubar {
                .p-menubar-root-list>.p-menuitem>.p-menuitem-link {
                    height: var(--corp-profile-height);
                    padding: var(--corp-profile-padding);
                }
        
                .p-submenu-list {
                    width: calc(100% - var(--corp-profile-separator-margin));
                    margin-left: var(--corp-profile-separator-margin);
                }
            }
        }

        .vl {
            height: var(--corp-profile-height);
        }

        .profile-image, .profile-image-null {
            width: var(--corp-profile-pic);
            height: var(--corp-profile-pic);
        }

        .profile-image {
            background-size: var(--corp-profile-pic) var(--corp-profile-pic);
        }
        
        .profile-image-null::before {
            font-size: calc(var(--corp-profile-pic) - 2px);
        }

        .p-speeddial {
            .p-speeddial-button.p-button.p-button-icon-only {
                height: var(--corp-speeddial-size);
                width: var(--corp-speeddial-size);
                top: calc((32px - var(--corp-speeddial-size)) / 2);
    
                .p-button-icon {
                    font-size: calc(var(--corp-speeddial-size) / 2);
                }
            }

            .p-speeddial-action {
                height: var(--corp-speeddial-size);
                width: var(--corp-speeddial-size);

                .p-speeddial-action-icon {
                    font-size: calc(var(--corp-speeddial-size) / 2);
                }
            }
        }
    }

    .p-component {
        font-size: var(--font-size);
    }
    
    .p-inputtext {
        padding: var(--input-padding);
    }

    .rc-button {
        padding: var(--btnPadding, var(--button-padding, 0.5rem 1rem));
    }
    
    .p-button.p-button-icon-only {
        &:not(.rc-toolbar-button):not(.p-speeddial-button) {
            padding: var(--btnPadding, var(--button-icon-only-padding, 0.5rem 0.5rem));
        }

        &.p-autocomplete-dropdown, &.p-datepicker-trigger {
            padding: var(--input-button-padding);
            > .p-button-icon {
                font-size: var(--input-button-icon-size);
            }
        }
    }

    .open-cell-editor {
        .p-button.p-button-icon-only:not(.rc-toolbar-button):not(.p-speeddial-button) {
            padding: 0px;
        }
    }
    
    .p-checkbox {
        width: var(--checkbox-size);
        height: var(--checkbox-size);

        .p-checkbox-box {
            width: var(--checkbox-size);
            height: var(--checkbox-size);
        
            .p-checkbox-icon {
                font-size: calc(var(--checkbox-size) * 0.7);
            }
        }
    }
    
    .p-radiobutton .p-radiobutton-box {
        width: var(--radiobutton-size);
        height: var(--radiobutton-size);
    
        .p-radiobutton-icon {
            height: calc(var(--radiobutton-size) * 0.6);
            width: calc(var(--radiobutton-size) * 0.6);
        }
    }

    .p-splitbutton-defaultbutton {
        padding: var(--menuBtnPadding, var(--menubtn-leftbtn-padding, 0.5rem 0rem 0.5rem 1rem));
    }

    .p-button.p-splitbutton-menubutton {
        padding: var(--menubtn-rightbtn-padding);
    }

    .rc-togglebutton {
        padding: var(--btnPadding, var(--button-padding, 0.5rem 1rem));
    }
    
    .p-tabview .p-tabview-nav li .p-tabview-nav-link {
        padding: var(--tab-padding);
    }
    
    .rc-table {
        .p-datatable-thead > tr > th {
            padding: var(--table-header-padding);
        }
    
        .p-datatable-tbody > tr > td {
            padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right) var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
            height: calc(8px + var(--table-data-height));
        }
    }
    
    .rc-label >span {
        padding: var(--label-padding) 0px;
    }
}

.p-dialog .p-dialog-header {
    padding: var(--dialog-header-padding);
}

.error-dialog {
    min-width: var(--error-dialog-min-width);

    .error-dialog-details-caption {
        margin-top: var(--error-dialog-details-gap);
        text-align: "left";
    }

    .error-dialog-listbox {
        margin-top: var(--error-dialog-details-gap);

        .p-listbox-item {
            height: calc(8px + var(--table-data-height));
            padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right) var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
            line-height: var(--table-data-height);
        }
    }

    .error-dialog-textarea {
        margin-top: var(--error-dialog-details-gap);
        width: 100%;
        height: var(--error-dialog-textarea-height);
    }

    .error-dialog-icon {
        min-width: var(--error-dialog-icon-size);
        font-size: var(--error-dialog-icon-size);
    }
}

.p-autocomplete-panel.dropdown-table {
    .p-autocomplete-item {
        height: calc(8px + var(--table-data-height));
    }
}


@media screen and (max-width: 960px) {
    .basti {
        .std-menu {
            .profile-menu {
                .p-menubar .p-menubar-root-list {
                    .p-submenu-list {
                        width: var(--std-profile-submenu-width-small);
                        left: calc(var(--std-profile-width-small) - var(--std-profile-submenu-width-small));
                    }
            
                    >.p-menuitem >.p-menuitem-link:not(.p-disabled), &.p-menuitem-active >.p-menuitem-link:not(.p-disabled) {
                        width: var(--std-profile-width-small);
                        padding: 0;
                    }
                }
            } 
        }

        .corp-menu {
            .profile-menu {
                .p-menubar .p-menubar-root-list {
                    .p-submenu-list {
                        width: var(--corp-profile-submenu-width-small);
                        left: calc(var(--corp-profile-width-small) - var(--corp-profile-submenu-width-small));
                    }
            
                    >.p-menuitem >.p-menuitem-link:not(.p-disabled), &.p-menuitem-active >.p-menuitem-link:not(.p-disabled) {
                        width: var(--corp-profile-width-small);
                        padding: 0;
                    }
                }
            } 
        }
    }
}

@media screen and (max-width: 530px) {
    .basti {
        .std-menu {
            .menu-logo-mini-wrapper {
                height: var(--std-logo-height);

                .menu-logo-mini {
                    max-height: var(--std-logo-height);
                    width: var(--std-logo-width);
                }
            }

            .p-button.p-button-icon-only.menu-topbar-buttons {
                width: var(--topbar-button-size-small);
                height: var(--topbar-button-size-small);
            }

            .fadeout {
                margin-top: calc(var(--std-header-height) + var(--std-logo-height));
            }
        }

        .corp-menu {
            .p-button.p-button-icon-only.menu-topbar-buttons {
                width: var(--corp-topbar-buttons-small);
                height: var(--corp-topbar-buttons-small);
            }
        }
    }
}