@dashadmin/dash-styles 1.3.17 → 1.3.19

package/dist/styles/layout.less

@@ -0,0 +1,296 @@
+
+/* =============================================================================
+   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/dist/styles/links.less

@@ -0,0 +1,28 @@
+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/dist/styles/loader.less

@@ -0,0 +1,20 @@
+
+.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/dist/styles/login.less

@@ -0,0 +1,331 @@
+/*.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/dist/styles/module.less

@@ -0,0 +1,29 @@
+.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%;
+}