@dashadmin/dash-styles 1.3.17 → 1.3.19

package/dist/styles/header.less

@@ -0,0 +1,879 @@
+@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;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}