@dashadmin/dash-styles 0.0.0 → 1.3.16

package/src/styles/layout.less

@@ -1,296 +0,0 @@
-
-/* =============================================================================
-   DASH LAYOUT STYLES
-   =============================================================================
-   This stylesheet manages the overall layout structure of the Dash application,
-   including responsive design, sidebar states, and framed layout support.
-   ============================================================================= */
-
-/* -----------------------------------------------------------------------------
-   GLOBAL LAYOUT SETUP
-   ----------------------------------------------------------------------------- */
-
-.dash-layout-content > .dash-layout-content {
-  padding: 0;
-}
-
-
-html {
-  height: 100vh;
-}
-
-body, #root {
-  height: 100vh;
-}
-
-
-
-
-
- @media (min-width: @mq-sm) {
-   /*.dash-app-layout-content {
-     //padding-left: 5px;
-   }*/
- 
-   .framed-layout .dash-app-layout {
-     border-radius: 20px;
-
-
-     //overflow: hidden;
-     
-     
-     //min-height: calc(100vh - 16px);
-   }
- }
- 
- /* Optimize sidebar transitions */
- .dash-app-layout {
-   transition: margin-left 0.2s ease-in-out;
-   will-change: margin-left;
-   contain: layout;
- }
- 
- /* Prevent flickering during theme changes */
- .dash-app-layout * {
-   transition: background-color 0.1s ease, color 0.1s ease;
- }
- 
- /* -----------------------------------------------------------------------------
-    SIDEBAR MANAGEMENT
-    ----------------------------------------------------------------------------- */
- 
- .dash-app-layout-sidebar-expanded {
-   margin-left: 240px;
- }
- 
- .dash-app-layout-sidebar-collapsed {
-   margin-left: 80px;
- }
- 
- /* Sidebar width overrides */
- .small.expanded .sidebar-drawer .MuiPaper-root,
- .large.collapsed .sidebar-drawer .MuiPaper-root {
-   width: var(--sidebar-small-width);
- }
- 
- .large.expanded .sidebar-drawer .MuiPaper-root {
-   width: var(--sidebar-large-width);
- }
- 
- /* -----------------------------------------------------------------------------
-    MODULE CONTENT STYLES
-    ----------------------------------------------------------------------------- */
- 
- .dash-module-box-content > .MuiBox-root {
-   height: auto;
- }
- 
- /* Firefox scrollbar handling */
- #dash-app-layout > div.dash-app-layout-content.MuiBox-root {
-   overflow: auto;
-   height: 100vh;
- }
- 
- @media (max-width: @mq-sm) {
-   #dash-app-layout > div.dash-app-layout-content.MuiBox-root {
-     overflow: auto;
-     -ms-overflow-style: none; /* IE and Edge */
-     scrollbar-width: none;    /* Firefox */
-   }
- 
-   #dash-app-layout > div.dash-app-layout-content.MuiBox-root::-webkit-scrollbar {
-     display: none;            /* Chrome, Safari, Opera */
-   }
- }
- 
- // cannot apply this because it hides the table
- /*.RaList-noResults, .RaList-main {
-     height: calc(100vh - 180px);
- }*/
- 
- .framed-layout #root {
-   box-shadow: unset;
-   //height: calc(100vh - 2 * 15px);
- }
- 
- /* -----------------------------------------------------------------------------
-    LAYOUT OVERWRITES
-    ----------------------------------------------------------------------------- */
- 
- .framed-layout {
-   .dash-module-horizontal-nav {
-     //border-bottom: none;
-     li:first-child .dash-link {
-       margin-left: 8px;
-     }
-   }
- }
- 
- .dash-app-layout {
-   .dash-layout-content {
-     overflow-y: auto;
-     //transition: all .4s;
-     .dash-app-module {
-       margin: 0;
-       //padding: 0 0 0 12px;
-       width: 100%;
-       //min-height: calc(100vh - 70px);
-       .dash-module-box-content {
-         padding: 0;
-         //height: calc(100vh - 140px); // Approximate size of the header in mobile
-       }
-       .dash-box {
-         width: 100%;
-       }
-     }
-   }
- }
- 
- /* -----------------------------------------------------------------------------
-    SIDEBAR STATE MANAGEMENT
-    ----------------------------------------------------------------------------- */
- 
- .dash-app-layout.collapsed.small {
-   .dash-layout-content, .dash-theme-content {
-     padding: 0px;
-   }
- }
- 
- // Left sidebar position - collapsed
- .dash-app-layout.collapsed.large.sidebar-position-left {
-   .dash-header-container {
-     padding-left: var(--sidebar-small-width);
-   }
-   .dash-layout-content, .dash-theme-content {
-     padding-left: var(--sidebar-small-width);
-   }
- }
-
- // Left sidebar position - expanded
- .dash-app-layout.expanded.large.sidebar-position-left {
-   .dash-header-container {
-     padding-left: var(--sidebar-large-width);
-   }
-   .dash-layout-content, .dash-theme-content {
-     padding-left: var(--sidebar-large-width);
-   }
- }
-
- // Right sidebar position - collapsed
- .dash-app-layout.collapsed.large.sidebar-position-right {
-   .dash-header-container {
-     padding-right: var(--sidebar-small-width);
-   }
-   .dash-layout-content, .dash-theme-content {
-     padding-right: var(--sidebar-small-width);
-   }
- }
-
- // Right sidebar position - expanded
- .dash-app-layout.expanded.large.sidebar-position-right {
-   .dash-header-container {
-     padding-right: var(--sidebar-large-width);
-   }
-   .dash-layout-content, .dash-theme-content {
-     padding-right: var(--sidebar-large-width);
-   }
- }
-
- // Top sidebar position
- .dash-app-layout.sidebar-position-top {
-   .dash-app-layout-content {
-     padding-top: var(--sidebar-horizontal-height);
-   }
- }
-
- // Bottom sidebar position
- .dash-app-layout.sidebar-position-bottom {
-   .dash-app-layout-content {
-     padding-bottom: var(--sidebar-horizontal-height);
-   }
- }
- 
-
- /* -----------------------------------------------------------------------------
-    MOBILE RESPONSIVENESS
-    ----------------------------------------------------------------------------- */
- 
- @media (max-width: @mq-sm) {
-   body.framed-layout {
-     padding: 0px;
-     //min-height: calc(100vh - 16px);
-   }
- 
-   .framed-layout {
-     > #root {
-       border-radius: 0px;
- 
-       .dash-app-layout {
-         .dash-app-module {
-           //padding: 0px;
-         }
-       }
-     }
-   }
- 
-   .dash-header, .dash-layout-content {
-     padding: 0;
-   }
- 
-   .dash-app-layout-sidebar-collapsed {
-     .dash-header, .dash-layout-content {
-       padding: 0;
-     }
-   }
- 
-   .dash-layout-content {
-     .dash-app-module {
-       //width: calc(100%);
-       //max-width: calc(100%);
-       margin: 0;
-       padding: 0;
-     }
-   }
- 
-   /*.dash-app-layout {
-     .dash-layout-content {
-       .dash-app-module {
-         height: 100%;
-         display: flex;
-       }
-     }
-   }*/
-
- }
-
-
-.dash-app-layout-content .dash-app-login-wrapper {
-    background: none;
-}
-
-
-.dash-app-layout .dash-layout-content .dash-app-module {
-   
-    padding-right: 8px;
-    padding-left: 8px;
-
-    @media (max-width: @mq-sm) {
-        padding-right: 0;
-        padding-left: 0;
-    }
-   
-}
- 
- /* -----------------------------------------------------------------------------
-    MISCELLANEOUS OVERRIDES
-    ----------------------------------------------------------------------------- */
- /*
- .MuiPaper-root .show-page {
-   padding-inline: 15px;
- }
- */
- /*
- .auto-admin-grouped-form {
-     padding: 0 !important;
- }
-*/

package/src/styles/links.less

@@ -1,28 +0,0 @@
-a, .dash-link{
-  color: var(--primary-color);
-}
-
-.link {
-  display: flex;
-  width: fit-content;
-  margin: .5rem 0;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 22px;
-
-  text-align: right;
-  text-decoration-line: underline;
-  // color: $c-blue;
-  transition: all .4s;
-  &--secondary {
-      color: var(--link-color);
-  }
-
-  .icon{
-      margin-right: 10px;
-  }
-
-  &:hover{
-      text-decoration: underline;
-  }
-}

package/src/styles/loader.less

@@ -1,20 +0,0 @@
-
-.loading-overlay {
-  opacity: 0.3;
-  //transition: opacity 0.3s linear 1s; 
-  pointer-events: none;
-  position: relative;
-}
-
-.datagrid-olverlay-loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.default-overlay {
-  opacity: 1;
-  //transition: opacity 0.3s linear 1s; 
-}
-

package/src/styles/login.less

@@ -1,331 +0,0 @@
-/*.framed-layout{
-    .dash-app-login{
-        &-wrapper{
-            min-height: calc(100vh - 85px);
-        }
-
-    }
-}*/
-
-.dash-app-layout.w50 {
-  .dash-app-login{
-    &-content{
-
-      max-width: calc(100% - 50%);
-      flex: 0 0 calc(100% - 50%);
-    }
-  }
-}
-
-.dash-app-login{
-    &-wrapper{
-        width: 100%;
-        //min-height: 100vh;
-        //height: 100vh;
-        display: flex;
-        flex-wrap: wrap;
-
-        // Override MUI Container centering - align form to left
-        /*> .MuiContainer-root {
-            margin-left: 0;
-        }*/
-    }
-    &-content, &-back{
-        display: flex;
-        position: relative;
-    }
-
-
-    &-content{
-      z-index:3;
-        width: 100%;
-        max-width: 50%;
-        flex: 0 0 50%;
-        align-items: flex-start;
-        justify-content: center;
-        padding-top: 60px;
-
-        flex-direction: column;
-
-        //padding-right: 50px;
-
-        .dash-app-login,  .dash-app-login-form {
-            a {
-              color: var(--highlight-color);
-            }
-
-            &-logo{
-                // Logo styles handled at parent level
-            }
-
-           /* .MuiTypography-root {
-              color:  var(--text-color);
-            }
-
-            .MuiInputLabel-root {
-              color:  var(--text-color);
-            }
-*/
-            .MuiPaper-root {
-               background-color: var(--module-bg);
-               border-color: var(--module-border);
-            }
-
-            &-form{
-               //width: 90%;
-               flex-direction: column;
-                .MuiInputBase-root{
-                    min-height:45px;
-                    margin-bottom: 20px;
-
-                    color: var(--text-header--light) !important;
-
-                    fieldset {
-                        border-radius: 33px;
-                        border-color: var(--text-header--light) !important;
-
-                        border-width: 1px;
-                        box-shadow: 2px 2px var(--component-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
-
-                    }
-
-                   /* legend span {
-                        -webkit-text-fill-color: var(--text-color) !important;
-                    }*/
-
-                    input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
-                      -webkit-text-fill-color: var(--text-color) !important;
-                    }
-
-
-                }
-                  .MuiInputLabel-shrink {
-                          color: var(--text-header--light) !important;
-                  }
-
-                  .MuiLink-button {
-                    color: var(--text-header--light) !important;
-                  }
-
-                  .MuiButtonBase-root {
-                    color:  var(--primary-contrast);
-                    font-weight: bolder;
-                    background-color: var(--highlight-color);
-
-
-
-                  }
-
-
-                  &-title{
-                      display: block;
-                      font-style: normal;
-                      font-weight: 900;
-                      font-size: 24px;
-                      line-height: 34px;
-                      color: var(--highlight-color);
-                      //color: white;
-
-                  }
-
-            }
-        }
-    }
-    &-back{
-        align-items: flex-end;
-        justify-content: flex-start;
-        width: 100%;
-        max-width: 50%;
-        flex: 0 0 50%;
-        height: 100vh;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 1;
-        &::before{
-            content: "";
-            display: block;
-            width: 100%;
-            height: 100vh;
-            right: 0;
-            top: 0;
-            background: var(--primary-color);
-            background: linear-gradient(130.87deg, var(--primary-color) 4.81%, var(--primary-contrast) 107.52%);
-            border-radius: 40px 0 0 40px;
-            position: absolute;
-            z-index: -1;
-        }
-    }
-
-      &-logo{
-        position: absolute;
-        object-fit: contain;
-         object-position: top center;
-        top:10px;
-        right:0px;
-        width:100%;
-        max-width: 100%;
-        z-index:2;
-
-        img {
-            max-width: 100%;
-            max-height: 120px;
-            object-fit: contain;
-        }
-    }
-    &-img{
-        position: absolute;
-        width: 100%;
-        height: 70vh;
-        max-height: 60vh;
-        object-fit: contain;
-
-        left: 0;
-        bottom: 0;
-        img, svg{
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            object-position: bottom center;
-            * {
-                pointer-events: none;
-            }
-        }
-        &-logo{
-            display: none;
-        }
-    }
-}
-
-
-@media (max-width: @mq-md){
-
- .framed-layout .dash-app-login, .dash-app-login{
-        &-wrapper{
-            flex-direction: column;
-            //min-height: 100vh;
-
-            // Override MUI Container for small screens - full width centered
-            > .MuiContainer-root {
-                //margin-left: auto;
-                //margin-right: auto;
-                ////max-width: 100%;
-                ////width: 100%;
-                //padding-left: 16px;
-                //padding-right: 16px;
-            }
-        }
-        &-content, &-back{
-            display: flex;
-            position: relative;
-            max-width: 100%;
-            flex: 0 0 auto;
-            padding: 0;
-        }
-        &-back{
-            display: none; // Hide back element on small screens - logo moved to wrapper
-        }
-
-        &-logo {
-            //order: 1;
-            position: relative;
-            top: auto;
-            right: auto;
-            width: 100%;
-            max-width: 100%;
-            z-index: 2;
-            padding: 20px;
-            background: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-                width: 100%;
-                max-width: 280px;
-                max-height: 80px;
-                object-fit: contain;
-            }
-        }
-
-        &-img{
-           // order: 3;
-            position: relative;
-            object-position: center;
-            width: 100%;
-            height: auto;
-            min-height: 120px;
-            max-height: 50vh;
-            right: auto;
-            left: auto;
-            bottom: 0;
-            z-index: 1;
-            margin-top: auto;
-            img, svg{
-                width: 100%;
-                height: 100%;
-                max-height: 50vh;
-                object-fit: contain;
-                object-position: bottom center;
-            }
-            &-logo{
-                display: none;
-            }
-        }
-
-        &-content{
-            //order: 2;
-            max-width: 100%;
-            width: 100%;
-            flex: 1 0 auto;
-            padding-top: 20px;
-            align-items: center;
-            justify-content: flex-start;
-
-            .dash-app-login{
-                &-logo{
-                    display: none;
-                }
-                &-form{
-                    margin: 0;
-                    padding: 20px;
-                    width: 100%;
-                    &-title{
-                        display: block;
-                        margin-bottom: 20px;
-                        font-style: normal;
-                        font-weight: 900;
-                        font-size: 20px;
-                        line-height: 30px;
-                        color: var(--heading-color);
-                    }
-                    &-item{
-                        display: flex;
-                        flex-direction: column;
-                        width: 100%;
-                        max-width: unset;
-                        margin-bottom: 20px;
-                    }
-                    &-label{
-                        display: block;
-                        font-style: normal;
-                        font-weight: 400;
-                        font-size: 14px;
-                        line-height: 22px;
-                        color: var(--text-color);
-                    }
-                    &-input{
-                        width: 100%;
-                        &::before, &::after{
-                            display: none;
-                        }
-
-                        > input{
-                            font-size: 16px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

package/src/styles/module.less

@@ -1,29 +0,0 @@
-.dash-app-module{
-  // margin: 0 !important;
-  flex: unset;
-}
-
-.dash-module-box{
-  max-width: calc(100% - 1px);
-}
-
-.dash-module-box-content{
-  width: 100%;
-  //max-width: calc(100vw - 107px);
-  overflow: unset;
-}
-
-@media screen and (max-width: 991px){
-  .dash-module-box-content, .framed-layout .dash-module-box-content{
-      max-width: 100%;
-  }
-  // .dash-breadcrumb-btn-container{
-  //     display: flex;
-  //     flex-wrap: wrap;
-  // }
-}
-
-.dash-module-box, .dash-module-horizontal-box{
-  max-width: 100%;
-  width:100%;
-}