@solidstarters/solid-core-ui 1.1.205 → 1.1.207

package/src/resources/solid-responsive.css

@@ -1,4 +1,721 @@
-@media (max-width: 480px) {
+@media(max-width:1399px){
+
+.kanban-ungrouped-column-content {
+    column-gap: 20px;
+  }
+  
+  .kanban-card-container {
+    margin-top: 1.5rem;
+  }
+  
+  .kanban-ungrouped-column .kanban-card-container {
+    flex: 1 1 calc(20% - 20px);
+    max-width: calc(20% - 20px);
+  }
+}
+
+@media (max-width: 1199px) {
+
+    /* ===================== Layout  ============================= */
+
+    .sidebar-right {
+        z-index: 99 !important;
+    }
+
+    .sidebar-left {
+        z-index: 99 !important;
+    }
+
+    .sidebar-backdrop {
+        display: block !important;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        /* Semi-transparent dark overlay */
+        z-index: 98;
+        /* Below sidebar but above content */
+        transition: opacity 0.3s ease;
+        cursor: pointer;
+    }
+
+    .main-content.shifted {
+        margin-left: 70px !important;
+        /* backdrop-filter: blur(20px); */
+        /* background-color: rgba(0, 0, 0, 0.2); */
+        /* transition: backdrop-filter 0.3s ease, background-color 0.3s ease; */
+    }
+
+    .main-content.main-content.shifted .page-parent-wrapper {
+        backdrop-filter: blur(10px) !important;
+    }
+
+
+    /* ================================= Menu ============================= */
+
+    .navbar-menu {
+        gap: 12px !important;
+        margin-top: 8px !important;
+    }
+
+
+    /* ===================== Chatter Section ===================== */
+
+    .chatter-section {
+        flex: 0 0 auto;
+        width: 45px;
+        transition: all 0.3s ease;
+        z-index: 5;
+    }
+
+    .chatter-section.open {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 380px !important;
+        height: 100%;
+        z-index: 99;
+        background-color: #fff;
+        border-left: 1px solid var(--primary-light-color);
+        max-width: calc(100% - 100px);
+    }
+
+
+    /* ===================== Solid Account Setting ===================== */
+    .solid-account-setting-main {
+        width: 80vw !important;
+    }
+
+    /* ===================== Solid Dialog  ===================== */
+
+    .solid-field-dialog {
+        width: 45rem !important;
+        max-width: 90%;
+    }
+
+    .solid-confirm-dialog {
+        width: 26rem !important;
+    }
+
+    .solid-change-dialog {
+        width: 32rem !important;
+    }
+
+    .solid-common-dialog {
+        width: 55rem !important;
+    }
+
+    /* ======================= Solid Import  ================================ */
+    .solid-import-dialog {
+        width: 75rem !important;
+        max-width: 80% !important;
+    }
+
+    /* ======================= Solid Export ============================  */
+    .ExportDialog {
+        width: 75rem !important;
+        max-width: 80% !important;
+        height: auto !important;
+    }
+
+    /* ========================= Home ========================== */
+    .solidModuleWelcomeSection {
+        padding: 16px !important;
+    }
+
+    .solidModuleHomeColorCards {
+        padding: 16px !important;
+    }
+
+    .solidModuleHomeActionCard {
+        padding: 16px !important;
+    }
+
+
+    .solid-layout-accordion {
+        max-width: 250px;
+    }
+
+
+    .solid-permisson-form-label {
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+
+    .solid-form-wrapper .solid-form-content {
+        height: calc(100vh - 120px) !important;
+        /* overflow-y: auto; */
+      }
+
+    .kanban-ungrouped-column .kanban-card-container {
+        flex: 1 1 calc(33.33% - 20px);
+        max-width: calc(33.33% - 20px);
+      }
+
+}
+
+
+
+@media (max-width: 991px) {
+
+    /* ===================== Layout  ============================= */
+
+    .sidebar-right.open {
+        width: 230px !important;
+    }
+
+    .sidebar-toggle-button {
+        left: 285px !important;
+    }
+
+
+    .sidebar-toggle-button.s-collapsed {
+        left: 60px !important;
+    }
+
+    /* ==================== solid auth ======================== */
+
+    .solid-center-layout {
+        width: 100vw;
+
+    }
+
+    .auth-container.side {
+        width: 525px;
+        max-width: 96%;
+    }
+
+
+    .auth-container {
+        min-width: auto;
+        padding: 25px;
+        border-radius: 1rem;
+        margin: auto;
+        width: 525px;
+        max-width: 96%;
+    }
+
+
+    .solid-auth-input-label.right {
+        color: #000;
+    }
+
+    /* ===================== Solid Account Setting ===================== */
+
+    .solid-account-setting-main {
+        width: 90vw !important;
+    }
+
+    /* ===================== Chatter Section ===================== */
+
+    .chatter-section.open {
+        width: 330px;
+    }
+
+    .solid-common-dialog {
+        width: 45rem !important;
+        max-width: 85%;
+    }
+
+
+    /* ======================= Solid Import  ================================ */
+    .solid-import-dialog {
+        max-width: 94% !important;
+    }
+
+
+    /* ======================= Solid Export ============================  */
+    .ExportDialog {
+        max-width: 94% !important;
+    }
+
+    /* =================  cog wheel ================== */
+    .customize-layout-panel.p-overlaypanel {
+        top: 12% !important;
+        left: calc(100% - 420px) !important;
+    }
+
+    .cogwheel-column-filter {
+        max-height: 250px !important;
+    }
+
+
+    /* ================== Button =================== */
+    .only-icon-lg .p-button-label {
+        display: none !important;
+    }
+
+    /* =============================== Search ================================ */
+    .page-header {
+        padding: 10px 16px 16px 20px !important;
+        gap: 16px;
+    }
+
+    .solid-custom-filter-wrapper .p-inputtext {
+        width: 100%;
+    }
+
+    .solid-global-search-element {
+        min-height: 36px;
+        height: auto;
+    }
+
+    .solid-global-search-element input {
+        width: 100%;
+    }
+
+    .solid-global-search-element-wrapper {
+        width: 85vw;
+    }
+
+    .solid-global-search-element ul {
+        flex-wrap: wrap !important;
+    }
+
+    .solid-global-search-element input {
+
+        max-width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    .solid-search-overlay-pannel {
+        top: calc(100% + 4px) !important;
+    }
+
+    .custom-filter-button {
+        border: none;
+    }
+
+
+    /*  ========================== Table  ============================ */
+
+    .solid-datatable-wrapper {
+        position: relative;
+        height: calc(100% - 50px);
+        flex-grow: 1;
+    }
+
+    .solid-datatable-wrapper .p-datatable-wrapper {
+        height: calc(100% - 60px);
+
+    }
+
+    .h-full.flex-grow-1 {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .page-header {
+        flex-shrink: 0;
+        padding: 10px 16px 12px 20px !important;
+
+    }
+
+
+    .solid-icon-dialog {
+        height: 80vh !important;
+    }
+
+
+    /* ====================== Logo====================== */
+    .solid-app-logo,
+    .solid-compony-logo {
+        width: 150px !important;
+        height: auto;
+        min-height: 100px;
+    }
+
+
+    /* ============================= Solid Form ==================== */
+    .solid-form-header {
+        padding: 10px 16px 16px 20px !important;
+    }
+    .solid-form-wrapper .solid-form-content {
+        height: calc(100vh - 138px) !important;
+      }
+
+
+    .solid-text-wrapper {
+        max-width: clamp(100px, 25vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .solid-long-text-wrapper {
+        max-width: clamp(130px, 40vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .password-policy-dropdown-panel {
+        width: 450px !important;
+        max-width: 80% !important;
+    }
+
+
+
+}
+
+@media(max-width:767px) {
+
+    /* ========================= Elements  ========================= */
+
+    h5 {
+        font-size: 1.1rem !important;
+    }
+
+    /* ===================== Layout  ============================= */
+
+    .apps-icon i {
+        font-size: 1.12rem !important;
+    }
+
+    .view-title {
+        margin-left: 12px !important;
+    }
+
+    .sidebar-left {
+        width: 0 !important;
+    }
+
+    .sidebar-left.open {
+        width: 54px !important;
+        z-index: 99 !important;
+    }
+
+    .sidebar-right {
+        left: 54px !important;
+    }
+
+    .main-content {
+        margin-left: 0 !important;
+        width: 100vw !important;
+    }
+
+    .main-content .page-parent-wrapper .chatter-section.collapsed {
+        margin-right: 6px !important;
+    }
+
+    .main-content.shifted {
+        margin-left: 0 !important;
+    }
+
+
+    .sidebar-toggle-button.s-collapsed {
+        left: 46px !important;
+        top: 12px !important;
+    }
+
+    .chatter-section.collapsed {
+        width: 40px !important;
+    }
+
+
+    .sidebar-toggle-button {
+        left: 274px !important;
+    }
+
+
+    .p-avatar.p-avatar-lg {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+
+    /* ===================== Solid Dialog  ===================== */
+
+    .solid-confirm-dialog {
+        width: 22rem !important;
+        max-width: 85% !important;
+    }
+
+    .solid-change-dialog {
+        width: 25rem !important;
+        max-width: 90% !important;
+    }
+
+
+    .solid-custom-filter-dialog {
+        width: 32rem !important;
+        max-width: 90%;
+    }
+
+    .p-dialog .p-dialog-header {
+        padding: 1rem 1.5rem ;
+    }
+
+    .solid-icon-dialog {
+        height: 90vh !important;
+    }
+
+    /* ======================= Solid Import  ================================ */
+
+    /* .solid-import-dialog {
+        overflow-x: auto !important;
+    }
+
+    .solid-import-dialog .p-dialog-content,
+    .solid-import-dialog-header {
+        width: 44rem !important;
+    } */
+
+    .solid-import-dialog {
+        /* width: 100% !important; */
+        max-width: 95% !important;
+    }
+
+
+
+
+    /* ======================= Solid Export  ================================ */
+
+    /* .ExportDialog {
+        overflow-x: auto !important;
+    }
+
+    .ExportDialog .p-dialog-content,
+    .solid-export-dialog-header {
+        width: 44rem !important;
+    } */
+    .ExportDialog .p-dialog-content {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+
+    .SolidExportControls {
+        /* justify-self: flex-start !important; */
+        flex-wrap: wrap;
+        justify-content: start !important;
+    }
+
+    .SolidExportProgressToaster {
+        min-width: auto;
+        width: 28rem !important;
+        max-width: 92% !important;
+    }
+
+
+    
+    /* =================  cog wheel ================== */
+    .customize-layout-panel.p-overlaypanel {
+        top: 16% !important;
+        left: calc(100% - 350px) !important;
+    }
+
+    .cogwheel-column-filter {
+        max-height: 220px !important;
+    }
+
+
+    /*  ======================= Button ================================== */
+    .p-splitbutton.p-button-sm>.p-button {
+        padding: 0.5rem 0.9rem;
+    }
+
+
+    .p-splitbutton.p-button-lg>.p-button {
+        font-size: 1.25rem;
+        padding: 0.7rem 1.1rem;
+    }
+
+    .p-button.p-button-icon-only.solid-icon-button {
+        padding: 0.4rem 0.6rem;
+        width: 2.2rem;
+        height: 2rem !important;
+    }
+
+    /*  ======================= Search ================================== */
+    /* default */
+    .solid-global-search-element-wrapper {
+        width: calc(100vw - 55px);
+    }
+
+    /* jab main-content ke andar chatter-section.collapsed ho */
+    .main-content:has(.chatter-section.collapsed) .solid-global-search-element-wrapper {
+        width: calc(100vw - 80px);
+    }
+
+     .solid-global-search-element input {
+        height: 28px;
+    } 
+
+    .solid-filter-auto-complete-field button {
+        height: 2.5rem !important;
+    }
+
+
+    .solid-icon-category {
+        padding: 8px 12px !important;
+    }
+
+    .solid-icon-category-wrapper {
+        gap: 0.7rem !important;
+    }
+
+
+
+    .solid-layout-accordion {
+        max-width: 250px;
+    }
+
+
+    .p-panel .p-panel-content {
+        padding: 0.8rem !important;
+    }
+
+    .solid-tab-view .p-tabview-panels {
+        padding-top: 10px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .solid-logo.in_form_view {
+        margin-bottom: 15px;
+    }
+
+    /* ============================= Solid Form ==================== */
+    .solid-form-header {
+        padding: 10px 16px 12px 16px !important;
+    }
+
+    .solid-form-wrapper .solid-form-content {
+        height: calc(100vh - 130px) !important;
+      }
+
+    .form-wrapper-title {
+        font-size: 14px !important;
+    }
+
+    .solid-header-buttons-wrapper {
+        gap: 10px !important;
+    }
+
+    .solid-mobile-text-wrapper {
+        max-width: clamp(180px, 60vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .solid-module-mobile-text-wrapper{
+        max-width: clamp(180px, 65vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .kanban-ungrouped-column .kanban-card-container {
+        flex: 1 1 calc(50% - 20px);
+        max-width: calc(50% - 20px);
+      }
+}
+
+
+@media(max-width:591px) {
+
+    /* ==================== solid auth ======================== */
+
+    .solid-auth-title {
+        font-size: 1.2rem;
+    }
+
+    .p-tabview-title {
+        font-size: 0.85rem;
+    }
+
+    /* =========================  Drop Zone ===========================*/
+    .solid-dropzone {
+        padding: 15px !important;
+    }
+
+
+    /* ===================== Solid Account Setting ===================== */
+    .solid-account-setting-main {
+        width: 95vw !important;
+    }
+
+    /* ===================== Chatter Section ===================== */
+    .solid-chatter-filter-main {
+        max-width: 90vw !important;
+    }
+
+    /* ========================== BreadCrum ===================== */
+    .solid-breadcrumb.p-breadcrumb .p-menuitem a p {
+        font-weight: 500 !important;
+    }
+
+    .p-component {
+        font-size: 0.9rem !important;
+    }
+
+    .text-base {
+        font-size: 0.9rem !important;
+    }
+
+
+    .solid-common-dialog {
+        max-width: 90% !important;
+    }
+
+
+
+    /* ====================== Logo====================== */
+    .solid-app-logo,
+    .solid-compony-logo {
+        width: 130px !important;
+
+    }
+
+    .solid-logo.in_form_view {
+        margin-bottom: 10px;
+    }
+
+    .p-toast {
+        width: 90% !important;
+    }
+
+    .solid-module-mobile-text-wrapper{
+        max-width: clamp(120px, 52vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+
+}
+
+@media(max-width:480px) {
+
+    /* ===================== Solid Kanban ==================== */
+
+    .kanban-column:not(.kanban-column-folded) {
+        min-width: 72% !important;
+        max-width: 80% !important;
+        width: 72% !important;
+    }
+
+    .kanban-column-folded {
+        min-width: fit-content !important;
+        max-width: fit-content !important;
+        width: fit-content !important;
+        flex: 0 0 auto !important;
+    }
+
+    .kanban-ungrouped-column .kanban-card-container {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
+    
+
+
+
+    /* ====================== SOlid Pannel =========================== */
     .p-panel .p-panel-header {
         padding: 0.75rem;
     }
@@ -6,8 +723,33 @@
     .solid-column-panel.p-panel .p-panel-content {
         padding: 1px 0.75rem 0.75rem 0.75rem;
     }
+
+
+    /* ===================== Pagination ============================  */
+    .p-paginator .p-paginator-next {
+        min-width: 2.5rem !important;
+    }
+
+    .solid-paginator div.p-dropdown::before {
+        content: "" !important;
+    }
+
+    .solid-paginator div.p-dropdown {
+        margin-left: 0px !important;
+    }
+
+
+
+    .solid-text-wrapper {
+        max-width: clamp(80px, 23vw, 600px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
+
+
 /* For tablets (between 481px and 768px) */
 @media (min-width: 481px) and (max-width: 768px) {
     .p-panel .p-panel-header {