@dashadmin/dash-styles 1.3.17 → 1.3.21

package/dist/styles/splash.less

@@ -0,0 +1,44 @@
+.dash-splash {
+  height: 100vh;
+  background-color: var(--primary-color);
+  //opacity: 0;
+  pointer-events: none;
+}
+
+.dash-splash .MuiCircularProgress-root {
+  color: var(--primary-contrast);
+}
+
+.dash-app-layout .MuiCircularProgress-root {
+  color: var(--primary-color) !important;
+}
+
+/*
+.dash-splash.fade-in  {
+    background-color: transparent;
+    animation: fadeIn 0.5s ease-in forwards;
+  }
+
+  .dash-splash.fade-out {
+    background-color: var(--primary-color);
+    animation: fadeOut 0.5s ease-out forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--primary-color);
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      background-color: var(--primary-color);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+*/

package/dist/styles/static.less

@@ -0,0 +1,59 @@
+.dash-app-static {
+  &-content{
+      width: 100%;
+      align-items: center;
+      padding: 170px 6.208vw 0 7.083vw;
+  }
+  &-logo{
+      position: absolute;
+      width: 200px;
+      left: 61px;
+      top: 68px;
+  }
+  &-back{
+      align-items: flex-end;
+      justify-content: flex-start;
+      width: 100%;
+      max-width: 50.694%;
+      flex: 0 0 50.694%;
+      height: 100vh;
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      &::before{
+          content: "";
+          display: block;
+          width: 50.694vw;
+          height: 100vh;
+          right: 0;
+          top: 0;
+          background: var(--btn-bg);
+          background: linear-gradient(130.87deg, var(--btn-bg) 4.81%, var(--btn-danger-bg) 107.52%);
+          border-radius: 40px 0 0 40px;
+          position: absolute;
+          z-index: -1;
+      }
+  }
+  &-img{
+      position: absolute;
+      width: 76.208vw;
+      height: 91.136vh;
+      object-fit: contain;
+      object-position: bottom right;
+      left: -6.208vw;
+      bottom: 0;
+      img, svg{
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          object-position: bottom right;
+          * {
+              pointer-events: none;
+          }
+      }
+      &-logo{
+          display: none;
+      }
+  }
+}

package/dist/styles/stats.less

@@ -0,0 +1,5 @@
+
+.stats-number {
+    font-size: 42px;
+    font-weight: 600;
+}

package/dist/styles/svg.less

@@ -0,0 +1,30 @@
+.svg-icon-regular{
+  svg{
+      fill: var(--text-color, #233044);
+  }
+  color: var(--text-color, #233044);
+}
+.svg-icon-red{
+  svg{
+      fill: var(--danger-color);
+  }
+  color: var(--danger-color);
+}
+.svg-icon-green{
+  svg{
+      fill: var(--success-color, #4CAF50);
+  }
+  color: var(--success-color, #4CAF50);
+}
+.svg-icon-blue{
+  svg{
+      fill: var(--primary-color, #1976D2);
+  }
+  color: var(--primary-color, #1976D2);
+}
+.svg-icon-yellow{
+  svg{
+      fill: var(--warning-color, #FF9800);
+  }
+  color: var(--warning-color, #FF9800);
+}

package/dist/styles/switch.less

@@ -0,0 +1,7 @@
+.dash-switch-span{
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  color: #1E1E1E;
+}

package/dist/styles/table.less

@@ -0,0 +1,196 @@
+/*.MuiTableCell-root.MuiTableCell-head{
+    //padding: 16px;
+    //background-color: var(--table-header-bg) !important;
+    span{
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--table-header-color);
+    }
+    svg{
+        color: var(--table-header-color) !important;
+    }
+}*/
+/*
+.MuiTableCell-root.MuiTableCell-body{
+  span{
+      //display: inline;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      label{
+          margin: 0 5px;
+      }
+  }
+  .tags-wrapper{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  }
+}*/
+
+.RaDatagrid-headerCell{
+  //min-width: 140px;
+  text-align: center;
+}
+.MuiTableCell-root.MuiTableCell-body{
+  //text-align: center;
+  //border-bottom: 1px solid @primary-contrast;
+  padding: 2px 8px;
+}
+
+.MuiTableRow-hover:hover {
+  background-color: var('--primary-contrast');
+}
+
+/* Stikcy header */
+
+/*
+.sticky-header-wrapper.sortable-datagrid .RaDatagrid-thead {
+  display: inline;
+}
+
+.sortable-datagrid .RaDatagrid-thead {
+  display: flex;
+}
+.sortable-datagrid .MuiTableContainer-root {
+  display: flex;
+}
+*/
+.MuiTableContainer-root, .dash-datagrid-wrapper{
+  overflow: visible !important;
+  // margin-top: 50px;
+  // max-height: 480px !important;
+  // // overflow-x: unset !important;
+  .RaDatagrid-tableWrapper{
+      width: 100%;
+      //min-width: 920px;
+      //margin-top: 15px;
+      //max-height: unset !important;
+      //overflow: auto;
+  }
+}
+
+.RaDatagrid-tableWrapper{
+  //max-height: calc(100vh - 70px);
+  //margin-bottom: 70px;
+  overflow: auto;
+}
+
+/*
+.RaBulkActionsToolbar-topToolbar{
+  .MuiButtonBase-root{
+      background-color: #fff1f0;
+      border: 1px solid var(--pink);
+      border-radius: 6px !important;
+      font-family: 'Montserrat' !important;
+      font-style: normal !important;
+      font-weight: 700 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: var(--pink) !important;
+      min-height: auto !important;
+      height: auto !important;
+      padding: 4px 10px !important;
+      .MuiButton-startIcon{
+          color: var(--pink) !important;
+          width: 18px !important;
+      }
+      &:hover{
+          background-color: var(--pink);
+          color: #fff1f0 !important;
+          .MuiButton-startIcon{
+              color: #fff1f0 !important;
+          }
+      }
+  }
+}
+*/
+
+.RaDatagrid-tableWrapper{
+  //max-height: calc(100vh - 70px);
+  //margin-bottom: 70px;
+  overflow: auto;
+}
+
+.RaBulkActionsToolbar-topToolbar{
+  .MuiButtonBase-root{
+      background-color: var('--primary-contrast');
+      border: 1px solid  var('--primary-color');;
+      border-radius: 6px !important;
+      font-family: 'Montserrat' !important;
+      font-style: normal !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: var('--highlight-color');
+      min-height: auto !important;
+      height: auto !important;
+      padding: 4px 10px !important;
+      .MuiButton-startIcon{
+        color: var('--highlight-color');
+          width: 18px !important;
+      }
+      &:hover{
+
+        color: var('--text-color');
+          .MuiButton-startIcon{
+            color: var('--text-color');
+          }
+      }
+  }
+}
+
+
+
+/* Sticky header updated */
+.dash-sticky-header {
+
+.RaDatagrid-tableWrapper {
+  max-height: calc(~"100vh - 90px"); // minus the floating paginator size
+  box-sizing: border-box;
+}
+
+.RaDatagrid-root {
+  // Make sure the table container has a defined height and scrolling
+  .RaDatagrid-tableWrapper {
+    max-height: 70vh; // Adjust this value based on your needs
+    overflow-y: auto;
+    position: relative;
+  }
+
+  // Enhance the sticky header
+  .MuiTable-stickyHeader {
+    .MuiTableHead-root {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      //background-color: #fff; // Match your theme background
+
+      // Add shadow to make the header stand out
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 2px;
+        background: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  // Ensure header cells have proper background
+  .MuiTableCell-stickyHeader {
+    //background-color: #fff; // Match your theme background
+    font-weight: bold;
+  }
+}
+
+// Add responsive styles for smaller screens
+@media (max-width: 768px) {
+  .RaDatagrid-tableWrapper {
+    max-height: 60vh;
+  }
+}
+}

package/dist/styles/tabs.less

@@ -0,0 +1,173 @@
+.dash-module{
+    &-box-header{
+        background-color: transparent;
+        padding: 0;
+        min-height: auto;
+        border: unset;
+    }
+}
+
+.dash-module{
+    &-top-content{
+        width: 100%;
+        overflow-y: hidden;
+        overflow-x: auto;
+        position: relative;
+    }
+    &-horizontal-nav{
+        display: flex;
+        flex-wrap: unset;
+        //border-bottom: 1px solid var(--component-border-base);
+        position: relative;
+        padding-top: 4px;
+        margin: 0;
+
+        li{
+
+            cursor: pointer;
+
+
+            .dash-link{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                border: 1px solid var(--component-border-split);
+                border-top-left-radius: 8px;
+                border-top-right-radius: 8px;
+                margin: 0 .75rem 0 0;
+                border-bottom: none;
+                padding: 5px 15px;
+                width: max-content;
+                height: 45px;
+                min-height: 45px;
+                font-size: 14px;
+                font-weight: 700;
+                text-align: center;
+                color: var(--text-light) !important;
+                text-decoration: none !important;
+                position: relative;
+
+                transition: all .4s;
+                .icon{
+                    display: none;
+                }
+            }
+
+           /* &:hover{
+                .dash-link{
+                    color: var(--text-color) !important;
+                }
+            }*/
+            &.active{
+                .dash-link{
+
+                     background-color: var(--tab-selected-bg);
+                    //background-color: var(--component-active-bg);
+                    border-color: var(--primary-color);
+                    border-bottom: 2px solid var(--component-active-bg);
+                    z-index: 1;
+                    //transform: translateY(1px);
+                }
+            }
+            &:first-child{
+                .dash-link{
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+}
+
+.dash-module-action-group {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: 100;
+}
+
+
+.dash-module-top button {
+    background-color:  var(--primary-color);
+    z-index: 5;
+}
+
+.dash-module-action {
+    position:relative;
+  //display: flex;
+  //justify-content: flex-end;
+  //margin: 4px 4px 0px 0px;
+  //position: absolute;
+  //right: 6px;
+  /*button {
+    z-index: 1000;
+  }*/
+
+  .MuiButton-root {
+    //padding: 2px 8px;
+    font-size: 0.8rem !important;
+    //min-width: 40px;
+    //min-height: 20px;
+  }
+
+  //margin-bottom: -40px;
+}
+
+
+.dash-auto-admin-tabbed-form {
+  .MuiTabs-scroller{
+      overflow-x: auto !important;
+      overflow-y: hidden;
+  }
+  .MuiTabs-root{
+    border-top: 1px solid var(--component-border-base);
+      .MuiTab-root{
+          display: -moz-box;
+          display: -webkit-box;
+          align-items: center;
+          svg{
+              width: 18px;
+              height: 18px;
+              margin: -3px 5px 0 0 ;
+          }
+      }
+  }
+}
+
+.MuiTabs-root {
+    min-height: auto !important;
+}
+
+@media (max-width: @mq-sm){
+    .dash-module{
+        &-box-header{
+            .dash-module{
+                &-top-content{
+                }
+            }
+        }
+    }
+
+    ul.dash-module-horizontal-nav {
+      margin: 0;
+
+      .dash-link {
+        height: auto;
+        min-height: auto;
+        padding: 2px 5px;
+      }
+    }
+
+    // MUI Tabs responsive styles for .tabbed-form
+    .tabbed-form {
+        .MuiTabs-root {
+            .MuiTab-root {
+                min-height: 24px;
+                height: 24px;
+                padding: 2px 8px;
+                font-size: 0.75rem;
+                font-weight: 500;
+            }
+        }
+    }
+}

package/dist/styles/tags.less

@@ -0,0 +1,97 @@
+.ant-tag{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 8px;
+    width: max-content;
+    min-width: 71px;
+    height: 30px;
+
+    background: var(--component-bg);
+    border: 1px solid var(--component-border);
+    border-radius: 4px;
+    color: var(--component-text);
+    svg{
+        color: var(--component-text);
+        path{
+            stroke: var(--component-text);
+        }
+    }
+    &.ant-tag-magenta{
+        color: #EB2F96;
+        background: #fff0f6;
+        border: 1px solid #FFADD2;
+        &.color svg{ color: #EB2F96; }
+        &.stroke svg path{ stroke: #EB2F96; }
+    }
+    &.dash-tag-red{
+        color: #F5222D;
+        background: #fff1f0;
+        border: 1px solid var(--pink);
+        &.color svg{ color: #F5222D; }
+        &.stroke svg path{ stroke: #F5222D; }
+    }
+    &.dash-tag-volcano{
+        color: #FA541C;
+        background: #fff2e8;
+        border: 1px solid #FFBB96;
+        &.color svg{ color: #FA541C; }
+        &.stroke svg path{ stroke: #FA541C; }
+    }
+    &.dash-tag-orange{
+        color: #FA8C16;
+        background: #fff7e6;
+        border: 1px solid #FFD591;
+        &.color svg{ color: #FA8C16; }
+        &.stroke svg path{ stroke: #FA8C16; }
+    }
+    &.dash-tag-gold{
+        color: #FAAD14;
+        background: #fffbe6;
+        border: 1px solid #FFE58F;
+        &.color svg{ color: #FAAD14; }
+        &.stroke svg path{ stroke: #FAAD14; }
+    }
+    &.dash-tag-lime{
+        color: #A0D911;
+        background: #FCFFE6;
+        border: 1px solid #EAFF8F;
+        &.color svg{ color: #A0D911; }
+        &.stroke svg path{ stroke: #A0D911; }
+    }
+    &.dash-tag-green{
+        color: #52C41A;
+        background: #F6FFED;
+        border: 1px solid #B7EB8F;
+        &.color svg{ color: #52C41A; }
+        &.stroke svg path{ stroke: #52C41A; }
+    }
+    &.dash-tag-cyan{
+        color: #13C2C2;
+        background: #E6FFFB;
+        border: 1px solid #87E8DE;
+        &.color svg{ color: #13C2C2; }
+        &.stroke svg path{ stroke: #13C2C2; }
+    }
+    &.dash-tag-blue{
+        color: #1890FF;
+        background: #E6F7FF;
+        border: 1px solid #91D5FF;
+        &.color svg{ color: #1890FF; }
+        &.stroke svg path{ stroke: #1890FF; }
+    }
+    &.dash-tag-geekblue{
+        color: #2F54EB;
+        background: #F0F5FF;
+        border: 1px solid #ADC6FF;
+        &.color svg{ color: #2F54EB; }
+        &.stroke svg path{ stroke: #2F54EB; }
+    }
+    &.dash-tag-purple{
+        color: #722ED1;
+        background: #F9F0FF;
+        border: 1px solid #D3ADF7;
+        &.color svg{ color: #722ED1; }
+        &.stroke svg path{ stroke: #722ED1; }
+    }
+}

package/dist/styles/toast.less

@@ -0,0 +1,83 @@
+@toast-success-bg: #F6FFED;
+@toast-success-border: 1px solid #52C41A;
+@toast-success-icon: #B7EB8F;
+@toast-success-color: #262626;
+
+@toast-error-bg: #fff1f0;
+@toast-error-border: 1px solid var(--pink);
+@toast-error-icon: #F5222D;
+@toast-error-color: #262626;
+
+@toast-info-bg: #EDE0FF;
+@toast-info-border: 1px solid var(--primary-color);
+@toast-info-icon: var(--primary-color);
+@toast-info-color: #262626;
+
+@toast-custom-bg: linear-gradient(92.77deg, rgba(154, 101, 224, 0.5) 2.44%, rgba(203, 18, 98, 0.5) 97.8%);;
+@toast-custom-border: 1px solid var(--primary-color);
+@toast-custom-icon: var(--highlight-color);
+@toast-custom-color: var(--highlight-color);
+
+.ant-notification-notice{
+    padding: 16px;
+    border-radius: 2px;
+    overflow: initial;
+    &-icon{
+        margin: 0;
+        width: 21px;
+        height: 21px;
+        color: initial !important;
+        > svg{
+            width: 100% !important;
+            height: 100% !important;
+            > *{
+                pointer-events: none;
+            }
+        }
+    }
+    &-success{
+        background: @toast-success-bg;
+        border: @toast-success-border;
+        .ant-notification-notice-icon{
+            filter: invert(61%) sepia(34%) saturate(993%) hue-rotate(56deg) brightness(95%) contrast(99%);
+        }
+    }
+    &-error{
+        background: @toast-error-bg;
+        border: @toast-error-border;
+        .ant-notification-notice-icon{
+            filter: invert(18%) sepia(28%) saturate(6396%) hue-rotate(340deg) brightness(132%) contrast(109%);
+        }
+    }
+    &-info{
+        background: @toast-info-bg;
+        border: @toast-info-border;
+        .ant-notification-notice-icon{
+            filter: invert(43%) sepia(96%) saturate(420%) hue-rotate(222deg) brightness(92%) contrast(91%);
+        }
+    }
+    &-custom{
+        background: @toast-custom-bg;
+        border: @toast-custom-border;
+        strong{
+            color: var(--primary-color);
+        }
+        .ant-notification-notice-icon{
+            filter: invert(10%) sepia(15%) saturate(10%) hue-rotate(314deg) brightness(101%) contrast(90%);
+        }
+    }
+
+    &-with-icon{
+        .ant-notification-notice{
+            &-message{
+                margin-bottom: 0;
+            }
+            &-description{
+                margin-top: 4px;
+                &:empty{
+                    display: none;
+                }
+            }
+        }
+    }
+}