@dashadmin/dash-styles 0.0.0 → 1.3.16

package/src/styles/header.less

@@ -1,879 +0,0 @@
-@mobile_header_height: 64px;
-@mobile_header_gutter: 40px; // This is the space to left for the android header bar, the clock etc to be shown. 
-
-//Corrections:
-// Bug: somne android navigations bars does not allow the save button to be visible on screen 
-// e.g class on problematic device : ua-mozilla-5-0-linux-android-10-k-applewebkit-537-36-khtml-like-gecko-samsungbrowser-29-0-chrome-136-0- touch-device
-.touch-device .RaToolbar-mobileToolbar {
-    bottom: calc(var(--sidebar-horizontal-height) + @mobile_header_gutter) !important;
-}
-
-/*
-@media screen and (max-width: 960px) {
-  .webview, .android {
-    .dash-header-container, .sidebar-header {
-      padding-top: 40px; 
-    }
-   
-  }
-}
-*/
-
-@media (max-width: 990px) and (max-width: 990px) {
-
-    .webview,
-    .android {
-        .dash-header .dash-header-container, .sidebar-header {
-            padding-top: @mobile_header_gutter !important;
-        }
-    }
-}
-
-
-.dash-page-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin: 15px 0px 15px 0px;
-}
-
-.dash-header-item {
-    cursor: pointer;
-}
-
-.dash-module-sidenav {
-    //position:relative;
-}
-
-.dash-datagrid-wrapper {
-    margin-top: 0px !important;
-}
-
-.dash-module-top {
-    //position:relative;
-    display: flex;
-    flex-flow: row-reverse;
-}
-
-//Custom Header
-
-// .dash-header-items{
-//     margin: 0;
-// }
-
-// .dash-layout-sider-header{
-//     background-color: transparent;
-//     padding: 31px 83px 8.12px 82px !important;
-//     height: auto;
-//     img{
-//         width: 91px;
-//         height: 31px;
-//         object-fit: contain;
-//         filter: brightness(0) invert(1);
-//     }
-// }
-
-// .ant-layout-sider-collapsed .dash-layout-sider-header{
-//     padding: 16px 17px 25.12px 18px !important;
-//     height: auto;
-//     img{
-//         width: 25px;
-//         height: 25px;
-//     }
-// }
-// .dash-layout-sider-scrollbar > div:first-child{
-//     width: 100%;
-//     overflow: auto !important;
-// }
-
-// .ant-layout-sider-collapsed{
-//     .dash-layout-sider-header{
-//         justify-content: center;
-//         img{
-//             width: 25px;
-//             height: 25px;
-//         }
-//     }
-// }
-
-
-// .dash-linebar .sidebar-menu{
-//     padding: 11.13px 0 11.13px 16.52px;
-//     width: 63px;
-//     height: auto;
-//     display: flex;
-//     align-items: center;
-//     justify-content: flex-start;
-//     svg{
-//         width: 12.97px;
-//         height: 13.75px;
-//     }
-// }
-
-// .ant-layout-sider-collapsed.dash-app-sidebar{
-//     .sidebar-menu{
-//         padding-left: 24.51px;
-//     }
-// }
-
-// .ant-layout-sider-collapsed{
-//     .dash-linebar{
-//         margin-bottom: 25.26px;
-//     }
-// }
-
-// .ant-layout-content.dash-layout-content{
-//     padding: 0 0 0 263px;
-//     transition: all .4s;
-//     > .dash-app-module{
-//         padding: 0 61px 0 48px;
-//         .dash-module-box-header, .dash-module-box-content{
-//             padding-left: 0;
-//             padding-right: 0;
-//         }
-//     }
-// }
-
-// .dash-app-layout-sidebar-collapsed{
-//     .ant-layout-content.dash-layout-content{
-//         padding: 0 0 0 63px;
-//     }
-// }
-
-// .ant-menu-submenu-popup{
-//     background: var(--sidebar-bg);
-//     .ant-menu-sub.ant-menu .ant-menu-item{
-//         &:hover{
-//             background-color: var(--sidebar-bg-hover);
-//         }
-//     }
-// }
-
-@media (max-width: @mq-sm) {
-    // .ant-layout-header.dash-header, .ant-layout-content.dash-layout-content{
-    //     padding: 0;
-    // }
-    // .ant-layout-header.dash-header{
-    //     .dash-header-container{
-    //         flex-direction: column;
-    //         padding: 0;
-    //         .dash-header{
-    //             &-subheader{
-    //                 display: flex;
-    //                 flex-wrap: wrap;
-    //                 justify-content: space-between;
-    //                 width: 100%;
-    //                 height: auto;
-    //                 margin: 0;
-    //                 padding: 25px 19px;
-    //                 background-color: var(--highlight-color);
-    //                 &-action{
-    //                     display: flex;
-    //                     align-items: center;
-    //                     justify-content: center;
-    //                     width: 18.75px;
-    //                     height: 16.5px;
-    //                     margin-left: 2.63px;
-    //                 }
-    //                 &-logo{
-    //                     display: block;
-    //                     width: 71px;
-    //                     height: 24px;
-    //                     img{
-    //                         width: 100%;
-    //                         height: 100%;
-    //                         object-fit: contain;
-    //                     }
-    //                 }
-    //                 &-avatar{
-    //                     width: 24px;
-    //                     height: 24px;
-    //                     .dash-header-user-avatar{
-    //                         width: 24px;
-    //                         height: 24px;
-    //                     }
-    //                 }
-    //             }
-    //             &-content{
-    //                 margin: 0 19px;
-    //                 width: calc(100% - 38px);
-    //                 max-width: calc(100% - 38px);
-    //                 display: flex;
-    //                 flex-direction: column;
-    //                 .dash-page-header-heading{
-    //                     width: 100%;
-    //                     padding: 19px 16px 13px;
-    //                 }
-    //                 .dash-page-header-heading-inline{
-    //                     display: flex;
-    //                     flex-direction: column;
-    //                     align-items: flex-start;
-    //                     width: 100%;
-    //                     padding: 0;
-
-    //                     .dash-page-header-heading-img{
-    //                         display: none;
-    //                     }
-
-    //                     .dash-page-header-heading-title{
-    //                         display: inline-block;
-    //                         font-style: normal;
-    //                         font-weight: 700;
-    //                         font-size: 14px;
-    //                         line-height: 24px;
-    //                         color: var(--highlight-color);
-    //                         margin-left: 0;
-    //                     }
-    //                     .dash-page-header-heading-sub-title{
-    //                         display: inline-block;
-    //                         font-style: normal;
-    //                         font-weight: 700;
-    //                         font-size: 20px;
-    //                         line-height: 24px;
-    //                         overflow: visible;
-    //                         margin: 0;
-    //                     }
-    //                 }
-
-    //                 .dash-header-items{
-    //                     display: flex;
-    //                     flex-direction: column;
-    //                     padding: 0;
-    //                     width: 100%;
-    //                     padding: 0 19px 16px;
-
-    //                     .dash-header-item, .dash-header-actions{
-    //                         width: 100%;
-    //                     }
-
-    //                     .dash-header-actions-btn{
-    //                         padding: 8px 16px;
-    //                         width: 100%;
-    //                         height: 40px;
-
-    //                         border: 1px solid var(--highlight-color);
-    //                         border-radius: 8px;
-    //                         &:hover{
-    //                             border-color: var(--highlight-color);
-    //                             background-color: var(--highlight-color);
-    //                             color: var(--primary-color);
-    //                         }
-    //                         &.hide-sm{
-    //                             display: none;
-    //                         }
-    //                     }
-
-    //                 }
-    //             }
-    //         }
-    //     }
-    // }
-
-    // .dash-app-layout-sidebar-collapsed{
-    //     .ant-layout-header.dash-header, .ant-layout-content.dash-layout-content{
-    //         padding: 0;
-    //     }
-    // }
-    // .ant-layout{
-    //     background-color: var(--highlight-color) !important;
-    // }
-}
-
-
-
-//HEADER
-.dash-header {
-    display: flex;
-    align-items: center;
-    // height: @mobile_header_height;
-    height: auto;
-
-    position: static;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: transparent;
-    box-shadow: unset;
-    // padding: 0 0 0 63px;
-    line-height: unset;
-    transition: all .4s;
-
-    &-container {
-        width: 100%;
-        display: flex;
-        // flex-wrap: wrap;
-        align-items: center;
-        //padding: 5px 0px 14px 20px;+
-        //padding: 5px;
-        margin-right: 0px;
-
-        .dash-header-subheader {
-
-            //width: 64px;
-            //height: 64px;
-            //margin-right: 20px;
-            &-action,
-            &-logo {
-                display: none;
-            }
-
-            &-avatar {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 64px;
-                height: 64px;
-                margin: 2px;
-
-                svg {
-                    fill: var(--highlight-color);
-                    color: var(--highlight-color);
-                    width: 23.5px;
-                    height: 24.88px;
-                    object-fit: contain;
-                }
-
-                .dash-header-user-profile {
-                    padding: 0;
-                }
-
-                .dash-header-user-avatar {
-                    background-color: var(--highlight-color);
-                    width: 64px;
-                    height: 64px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    background: var(--primary-color);
-
-                }
-
-            }
-        }
-
-        .dash-header-content {
-            width: 100%;
-            //height: 65px;
-            
-            margin-right: 8px;
-            margin-left: 8px;
-            margin-top: 8px;
-            padding: 8px 0px;
-
-
-            //max-width: calc(100% - 84px);
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            flex: 1;
-            border-radius: 8px;
-            //justify-content: space-between;
-            //background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-contrast) 100%);
-
-            background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-contrast) 100%);
-
-
-            @media (max-width: @mq-sm) {
-                background: none;
-                margin: inherit;
-                width: inherit;
-                max-width: inherit;
-                border-radius: inherit;
-                border: inherit;
-                align-items: flex-start;
-                justify-content: space-between;
-
-            }
-
-            .dash-header-items {
-                display: flex;
-                flex-wrap: wrap;
-                margin: 0;
-                //padding: 0 40px;
-                align-items: center;
-                justify-content: flex-end;
-
-                .dash-header-item {
-                    .dash-header-actions {
-                        flex: 1;
-                        display: flex;
-                        flex-wrap: wrap;
-                    }
-                }
-
-                .dash-header-actions-btn {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    margin: 10px 15px 10px 0;
-                    padding: 5px 16px;
-                    width: auto;
-                    height: auto;
-                    background: transparent;
-                    border: 1px solid var(--highlight-color);
-                    border-radius: 8px;
-
-                    font-style: normal;
-                    font-weight: 600;
-                    font-size: 16px;
-                    line-height: 24px;
-                    color: var(--highlight-color);
-
-                    >span {
-                        color: var(--highlight-color);
-
-                    }
-
-                    &:last-child {
-                        margin-right: 0;
-                    }
-
-                    &:hover {
-                        border-color: var(--highlight-color);
-                        background-color: var(--highlight-color);
-                        color: var(--primary-color);
-
-                        >span {
-                            color: var(--primary-color);
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-}
-
-.RaToolbar-mobileToolbar {
-    display: flex !important;
-    justify-content: flex-end !important;
-    z-index: 1000 !important;
-}
-
-.RaToolbar-desktopToolbar {
-    position: fixed !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-
-    display: flex !important;
-    justify-content: flex-end !important;
-}
-
-
-.auto-admin-grouped-form {
-    margin-bottom:  var(--sidebar-horizontal-height);
-}
-
-
-@media (max-width: @mq-sm) {
-    .dash-header {
-        position: fixed;
-        z-index: 1000;
-    }
-
-
-    .dash-app-layout .dash-layout-content .dash-app-module {
-        height: calc(100% -  var(--sidebar-horizontal-height));
-        display: flex;
-    }
-
-
-
-
-    #dash-app-layout>div.dash-app-layout-content.MuiBox-root>div.dash-layout-content.MuiBox-root {
-        //HEADER SIZE IN MOBILE
-        margin-top: calc( var(--sidebar-horizontal-height));
-        height: calc( 100vh -  var(--sidebar-horizontal-height) ) ;
-        //padding-bottom: 40px;
-        //margin-bottom: 40px;
-        // Fade out effect at the bottom with 30px gradient
-        //-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 30px), transparent 100%);
-        //mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 30px), transparent 100%);
-    }
-
-    .webview,
-    .android {
-        #dash-app-layout>div.dash-app-layout-content.MuiBox-root>div.dash-layout-content.MuiBox-root {
-            margin-top: calc(var(--sidebar-horizontal-height, 64px) + 40px);
-        }
-    }
-
-    .dash-app-layout .dash-layout-content .dash-app-module .dash-module-box-content {
-        padding-bottom: var(--sidebar-horizontal-height);
-    }
-
-    .android #dash-app-layout>div.dash-app-layout-content.MuiBox-root>div.dash-layout-content.MuiBox-root {
-        //margin-top: 80px;
-        //height: 100%;
-        //padding-bottom: 80px;
-     
-        margin-top: calc(var(--sidebar-horizontal-height) + @mobile_header_gutter);
-        height: 100vh;
-    }    
-
-    .android .dash-app-layout .dash-layout-content .dash-app-module {
-        height: calc(100% - var(--sidebar-horizontal-height) + @mobile_header_gutter);
-        display: flex;
-    }
-
-    .dash-header-container .dash-header-content .dash-header-items {
-        position: absolute;
-        right: 0;
-    }
-
-    .auto-admin-grouped-form {
-
-        margin-bottom: 15px;
-    }
-
-    /* .android .auto-admin-grouped-form {
-    margin-bottom: calc(80px + 15px);
-   }*/
-
-    body[class*="android"] {
-
-        .auto-admin-grouped-form {
-            margin-bottom: calc( var(--sidebar-horizontal-height) + 15px);
-            height:100vh;
-        }
-
-        /*.RaToolbar-mobileToolbar {
-        bottom: calc(80px + 15px) !important;
-        }*/
-    }
-
-    /*.RaToolbar-desktopToolbar {
-       bottom: calc(15px) !important;
-   }*/
-
-
-    /* .android  {
-    .RaToolbar-mobileToolbar {
-    bottom: calc(80px + 15px) !important;
-        }
-
-        .RaToolbar-desktopToolbar {
-            bottom: calc(15px) !important;
-        }
-
-    }*/
-
-
-}
-
-
-.dash-header-inline {
-    display: flex;
-    flex-direction: row;
-    -webkit-box-align: center;
-    align-items: baseline;
-    width: auto;
-    margin-left: 8px;
-
-    //padding: 0 24px;
-    &-img {
-        margin: 5px 0;
-        width: 45px;
-        height:  var(--sidebar-horizontal-height);
-
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            line-height: 1;
-        }
-    }
-
-    &-title {
-        display: inline-block;
-        font-style: normal;
-        font-weight: 700;
-        //font-size: 18px;
-        line-height: 0.9;
-        color: var(--text-header);
-        // padding-left: 15px;
-
-        &::after {
-            content: "▸";
-            margin-left: 5px;
-        }
-    }
-
-    &-subtitle {
-        display: inline-block;
-        font-weight: 500;
-        //font-size: 14px;
-        line-height: 22px;
-        color: var(--text-header);
-
-        overflow: visible;
-        //margin-left: 12px;
-    }
-}
-
-// ============================================================================
-// BREADCRUMB NAVIGATION STYLES
-// ============================================================================
-
-.dash-header-breadcrumbs {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-    padding: 0;
-    margin: 0 0 0 12px;
-    height: auto;
-    line-height: 1;
-    border-left: 1px solid var(--text-header-muted, rgba(255, 255, 255, 0.3));
-    padding-left: 12px;
-}
-
-.dash-breadcrumbs {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 2px;
-    margin: 0;
-    padding: 0;
-
-    // Breadcrumb item
-    .dash-breadcrumb-item {
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 2px;
-        transition: color 0.2s ease;
-        flex-shrink: 0;
-
-        &--active {
-            .dash-breadcrumb-label {
-                font-weight: 500;
-                color: var(--text-header);
-            }
-        }
-    }
-
-    // Breadcrumb icon
-    .dash-breadcrumb-icon {
-        display: inline-flex;
-        align-items: center;
-        color: var(--text-header-muted, rgba(255, 255, 255, 0.7));
-        flex-shrink: 0;
-
-        svg {
-            font-size: 12px;
-        }
-    }
-
-    // Breadcrumb label
-    .dash-breadcrumb-label {
-        font-size: 11px;
-        font-weight: 400;
-        color: var(--text-header-muted, rgba(255, 255, 255, 0.7));
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 120px;
-        transition: color 0.2s ease;
-        line-height: 1.2;
-    }
-
-    // Breadcrumb link
-    .dash-breadcrumb-link {
-        display: inline-flex;
-        align-items: center;
-        text-decoration: none;
-        flex-shrink: 0;
-
-        &:hover {
-            .dash-breadcrumb-label {
-                color: var(--text-header);
-                text-decoration: underline;
-            }
-
-            .dash-breadcrumb-icon {
-                color: var(--text-header);
-            }
-        }
-    }
-
-    // Separator
-    .dash-breadcrumb-separator {
-        display: inline-flex;
-        align-items: center;
-        margin: 0 1px;
-        color: var(--text-header-muted, rgba(255, 255, 255, 0.5));
-        flex-shrink: 0;
-
-        svg {
-            font-size: 12px;
-        }
-    }
-}
-
-// Responsive adjustments for breadcrumbs
-@media (max-width: @mq-sm) {
-    .dash-header-breadcrumbs {
-        display: none; // Hide breadcrumbs on small screens to save space
-    }
-}
-
-/*
-@media (max-width: var(--mq-sm)) {
-  .dash-header-inline {
-    display: contents;
-  }
-}
-*/
-
-
-
-@media (max-width: @mq-sm) {
-    .dash-header {
-        .dash-header-container {
-            flex-direction: column;
-            flex-flow: nowrap;
-            //padding: 0;
-            //height: @mobile_header_height;
-
-            @media (max-width:@mq-sm) {
-                background-color: var(--primary-color);
-            }
-
-            .dash-header {
-                &-subheader {
-                    //display: flex;
-                    //flex-wrap: wrap;
-                    //justify-content: space-between;
-
-                    //width: 100%;
-                    height: auto;
-                    margin: 0;
-                    //padding: 5px;
-
-                    &-action {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 18px;
-                        height: 16px;
-                        //margin-left: 2.63px;
-                        margin: 6px;
-                    }
-
-                    &-logo {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        height: 34px;
-                        width: 34px;
-                        border-radius: 50%;
-                        padding: 4px;
-                        box-sizing: border-box;
-                        margin: 0;
-                        background-color: white;
-                        img {
-                            width: 100%;
-                            height: 100%;
-                            object-fit: contain;
-                        }
-                    }
-
-                    &-avatar {
-                        width: 24px;
-                        height: 24px;
-
-                        .dash-header-user-avatar {
-                            width: 24px;
-                            height: 24px;
-                        }
-                    }
-                }
-
-                &-content {
-                    margin: 0;
-                    width: 100%;
-                    max-width: 100%;
-                    border-radius: 0px;
-                    border: none;
-                    display: flex;
-
-                    flex-direction: row;
-                    align-items: center;
-
-
-
-                    .dash-page-header-heading {
-                        width: 100%;
-                    }
-
-                    .dash-page-header-heading-inline {
-                        display: flex;
-                        flex-direction: column;
-                        align-items: flex-start;
-                        width: 100%;
-                        padding: 0;
-
-                        .dash-page-header-heading-img {
-                            display: none;
-                        }
-
-                        .dash-page-header-heading-title {
-                            display: inline-block;
-                            font-style: normal;
-                            font-weight: 700;
-                            font-size: 14px;
-                            line-height: 24px;
-                            color: var(--highlight-color);
-                            margin-left: 0;
-                        }
-
-                        .dash-page-header-heading-sub-title {
-                            display: inline-block;
-                            font-style: normal;
-                            font-weight: 700;
-                            font-size: 20px;
-                            line-height: 24px;
-                            overflow: visible;
-                            margin: 0;
-                        }
-                    }
-
-                    .dash-header-items {
-                        display: flex;
-                        flex-direction: column;
-                        padding: 0;
-                        //width: 100%;
-
-                        .dash-header-item,
-                        .dash-header-actions {
-                            width: 100%;
-                        }
-
-                        .dash-header-actions-btn {
-                            padding: 8px 16px;
-                            width: 100%;
-                            height: @mobile_header_height;
-
-                            border: 1px solid var(--highlight-color);
-                            border-radius: 8px;
-
-                            &:hover {
-                                border-color: var(--highlight-color);
-                                background-color: var(--highlight-color);
-                                color: var(--primary-color);
-                            }
-
-                            &.hide-sm {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}