namirasoft-site-react 1.4.555 → 1.4.556

package/src/components/NSTable.module.css

@@ -1,373 +1,372 @@
-.ns_table {
-    display: flex;
-    flex-direction: column;
-    overflow-x: auto;
-    color: rgba(20, 27, 92);
-}
-
-.ns_search_input {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    position: relative;
-    z-index: -1;
-}
-
-.ns_search_input {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    position: relative;
-    z-index: -1;
-}
-
-.ns_table thead {
-    display: none;
-}
-
-.ns_table tr {
-    border-radius: 0px;
-    padding: 16px 8px;
-    display: block;
-    background-color: #fff;
-    transition: background-color 0.2s ease-in-out;
-}
-
-.ns_table tbody tr {
-    cursor: pointer;
-}
-
-.ns_table td {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    margin: 0;
-    padding: 8px;
-    font-size: 16px;
-    justify-content: left;
-    align-items: center;
-    color: #000;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
-
-.ns_table td::before {
-    content: attr(data-label);
-    font-weight: bold;
-    float: left;
-    min-width: 30%;
-}
-
-.ns_tbody tr:nth-child(odd) {
-    background-color: #f5f5f5;
-}
-
-.ns_tbody tr:nth-child(even) {
-    background-color: #ffffff;
-}
-
-.ns_tbody tr:hover {
-    background-color: rgb(184, 190, 240, 0.32);
-}
-
-.ns_tbody tr.ns_selected {
-    background-color: rgb(184, 190, 240, 0.64);
-}
-
-/* Check Box */
-.ns_check_box {
-    width: 100%;
-    text-align: center;
-}
-
-.ns_check_box {
-    height: 24px;
-    width: 24px !important;
-    cursor: pointer;
-}
-
-.ns_check_box:checked {
-    accent-color: #141B5C;
-}
-
-.ns_check_box_label {
-    display: block;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-}
-
-.ns_indeterminate:indeterminate {
-    border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_indeterminate {
-    position: relative;
-}
-
-.ns_indeterminate::after {
-    content: "-";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    border: 5px solid #fffbff;
-    color: #141b5c;
-    background: #141b5c;
-}
-
-/* Top Bar */
-.ns_table_topbar {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 16px;
-}
-
-/* Button Panel */
-.ns_button_panel {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    gap: 16px;
-}
-
-.ns_table_button {
-    width: 48px;
-    min-width: 48px;
-    height: 48px;
-    border: 1px solid rgba(255, 148, 50, 1);
-}
-
-.ns_table_children {
-    margin-bottom: 16px;
-}
-
-@media screen and (max-width: 991px) {
-    .ns_table td {
-        width: auto;
-    }
-}
-
-.ns_resize_handle {
-    display: none;
-}
-
-@media screen and (min-width: 992px) {
-    .ns_resize_handle {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        right: 0;
-        width: 8px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: col-resize;
-        user-select: none;
-    }
-
-    .ns_resize_handle::after {
-        content: '';
-        display: block;
-        width: 2px;
-        height: 20px;
-        border-radius: 2px;
-        background-color: rgba(255, 255, 255, 0.5);
-    }
-
-    .ns_resize_handle:hover {
-        color: rgba(255, 255, 255, 0.85);
-    }
-}
-
-@media screen and (min-width: 992px) {
-    .ns_table_wrapper {
-        position: relative;
-        max-width: 100%;
-        height: 100%;
-    }
-
-    .ns_table {
-        height: 100%;
-        max-height: 33.625rem;
-        border-radius: 12px 12px 0 0;
-        justify-content: flex-start;
-        overflow: scroll auto;
-        background-color: #fff;
-        color: #000;
-    }
-
-    .ns_table tr {
-        min-width: fit-content;
-        margin: 0;
-        border: 1px solid transparent;
-        border-radius: 0;
-        padding: 4px 8px 4px 12px;
-        display: grid;
-        align-items: center;
-        grid-auto-flow: column;
-        grid-auto-columns: max-content;
-    }
-
-    .ns_table th {
-        margin: 0;
-        padding: 8px;
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 1.5rem;
-        color: #fff;
-        overflow: hidden;
-    }
-
-    .ns_table th>span {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .ns_table td {
-        width: 100%;
-        margin: 0;
-        padding: 8px;
-        align-items: center;
-        line-height: 1.5rem;
-        text-align: left;
-        overflow: hidden;
-        white-space: nowrap;
-        overflow-wrap: unset;
-        word-break: unset;
-    }
-
-    .ns_table td>span {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .ns_table th[data-cell-type="checkbox"],
-    .ns_table td[data-cell-type="checkbox"] {
-        padding: 0;
-    }
-
-    .ns_table td::before {
-        content: "";
-        float: left;
-        font-weight: bold;
-        min-width: unset;
-        display: none;
-    }
-
-    .ns_table thead {
-        position: sticky;
-        top: 0;
-        min-width: max-content;
-        display: block;
-    }
-
-    .ns_table thead tr {
-        background-color: rgba(20, 27, 92);
-    }
-
-    .ns_table tbody tr.ns_selected,
-    .ns_table tbody tr.ns_last_selected {
-        border-color: rgba(20, 27, 92);
-    }
-
-    .ns_table tbody tr.ns_selected+tr,
-    .ns_table tbody tr.ns_last_selected+tr {
-        border-top-color: transparent;
-    }
-
-    .ns_check_box {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    .ns_checkbox_label {
-        justify-content: center;
-    }
-
-    .ns_table::-webkit-scrollbar {
-        height: 0;
-    }
-}
-
-@media screen and (min-width: 1024px) {
-    .ns_table_topbar {
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-    }
-
-    .ns_button_panel {
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-        gap: 12px;
-        width: auto;
-    }
-}
-
-.ns_fullscreen {
-    position: fixed !important;
-    top: 0;
-    left: 0;
-    width: 100vw !important;
-    height: 100vh !important;
-    max-width: 100vw !important;
-    max-height: 100vh !important;
-    margin: 0;
-    padding: 0;
-    z-index: 9999;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-}
-
-.ns_fullscreen .ns_table {
-    flex: 1 1 auto;
-    min-height: 0;
-    height: auto;
-    max-height: none !important;
-    border-radius: 0;
-}
-
-.ns_fullscreen .ns_table_topbar,
-.ns_fullscreen .ns_table_scrollbar {
-    flex: 0 0 auto;
-}
-
-.ns_fullscreen .ns_table_topbar {
-    padding: 16px 16px 0;
-}
-
-.ns_fullscreen .ns_tbody {
-    flex: 1 1 auto;
-}
-
-.ns_fullscreen_button {
-    display: none !important;
-}
-
-@media screen and (min-width: 992px) {
-    .ns_fullscreen_button {
-        display: flex !important;
-    }
+.ns_table {
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    color: rgba(20, 27, 92);
+}
+
+.ns_search_input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
+}
+
+.ns_search_input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
+}
+
+.ns_table thead {
+    display: none;
+}
+
+.ns_table tr {
+    border-radius: 0px;
+    padding: 16px 8px;
+    display: block;
+    background-color: #fff;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.ns_table tbody tr {
+    cursor: pointer;
+}
+
+.ns_table td {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin: 0;
+    padding: 8px;
+    font-size: 16px;
+    justify-content: left;
+    align-items: center;
+    color: #000;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+.ns_table td::before {
+    content: attr(data-label);
+    font-weight: bold;
+    float: left;
+    min-width: 30%;
+}
+
+.ns_tbody tr:nth-child(odd) {
+    background-color: #f5f5f5;
+}
+
+.ns_tbody tr:nth-child(even) {
+    background-color: #ffffff;
+}
+
+.ns_tbody tr:hover {
+    background-color: rgb(184, 190, 240, 0.32);
+}
+
+.ns_tbody tr.ns_selected {
+    background-color: rgb(184, 190, 240, 0.64);
+}
+
+/* Check Box */
+.ns_check_box {
+    width: 100%;
+    text-align: center;
+}
+
+.ns_check_box {
+    height: 24px;
+    width: 24px !important;
+    cursor: pointer;
+}
+
+.ns_check_box:checked {
+    accent-color: #141B5C;
+}
+
+.ns_check_box_label {
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+
+.ns_indeterminate:indeterminate {
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_indeterminate {
+    position: relative;
+}
+
+.ns_indeterminate::after {
+    content: "-";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border: 5px solid #fffbff;
+    color: #141b5c;
+    background: #141b5c;
+}
+
+/* Top Bar */
+.ns_table_topbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+/* Button Panel */
+.ns_button_panel {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 16px;
+}
+
+.ns_table_button {
+    width: 48px;
+    min-width: 48px;
+    height: 48px;
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_table_children {
+    margin-bottom: 16px;
+}
+
+@media screen and (max-width: 991px) {
+    .ns_table td {
+        width: auto;
+    }
+}
+
+.ns_resize_handle {
+    display: none;
+}
+
+@media screen and (min-width: 992px) {
+    .ns_resize_handle {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        right: -8px;
+        width: 16px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: col-resize;
+        user-select: none;
+    }
+
+    .ns_resize_handle::after {
+        content: '';
+        display: block;
+        width: 2px;
+        height: 20px;
+        border-radius: 2px;
+        background-color: rgba(255, 255, 255, 0.5);
+    }
+
+    .ns_resize_handle:hover {
+        color: rgba(255, 255, 255, 0.85);
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .ns_table_wrapper {
+        position: relative;
+        max-width: 100%;
+        height: 100%;
+    }
+
+    .ns_table {
+        height: 100%;
+        max-height: 35rem;
+        border-radius: 12px;
+        justify-content: flex-start;
+        overflow: scroll auto;
+        scrollbar-width: thin;
+        background-color: #fff;
+        color: #000;
+    }
+
+    .ns_table tr {
+        min-width: fit-content;
+        margin: 0;
+        border: 1px solid transparent;
+        border-radius: 0;
+        padding: 4px 8px 4px 12px;
+        display: grid;
+        align-items: center;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+    }
+
+    .ns_table th {
+        position: relative;
+        margin: 0;
+        padding: 8px;
+        display: flex;
+        user-select: none;
+        cursor: pointer;
+    }
+
+    .ns_table .ns_th_title {
+        min-width: 0;
+        overflow: hidden;
+        font-size: 16px;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.5rem;
+        color: #fff;
+    }
+
+    .ns_table td {
+        width: 100%;
+        margin: 0;
+        padding: 8px;
+        align-items: center;
+        line-height: 1.5rem;
+        text-align: left;
+        overflow: hidden;
+        white-space: nowrap;
+        overflow-wrap: unset;
+        word-break: unset;
+    }
+
+    .ns_table td {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .ns_table th[data-cell-type="checkbox"],
+    .ns_table td[data-cell-type="checkbox"] {
+        padding: 0;
+    }
+
+    .ns_table td::before {
+        content: "";
+        float: left;
+        font-weight: bold;
+        min-width: unset;
+        display: none;
+    }
+
+    .ns_table thead {
+        position: sticky;
+        top: 0;
+        min-width: max-content;
+        display: block;
+    }
+
+    .ns_table thead tr {
+        background-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody tr.ns_selected,
+    .ns_table tbody tr.ns_last_selected {
+        border-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody tr.ns_selected+tr,
+    .ns_table tbody tr.ns_last_selected+tr {
+        border-top-color: transparent;
+    }
+
+    .ns_check_box {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .ns_checkbox_label {
+        justify-content: center;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .ns_table_topbar {
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .ns_button_panel {
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        gap: 12px;
+        width: auto;
+    }
+}
+
+.ns_fullscreen {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    margin: 0;
+    padding: 0;
+    z-index: 9999;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+}
+
+.ns_fullscreen .ns_table {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+    max-height: none !important;
+    border-radius: 0;
+}
+
+.ns_fullscreen .ns_table_topbar,
+.ns_fullscreen .ns_table_scrollbar {
+    flex: 0 0 auto;
+}
+
+.ns_fullscreen .ns_table_topbar {
+    padding: 16px 16px 0;
+}
+
+.ns_fullscreen .ns_tbody {
+    flex: 1 1 auto;
+}
+
+.ns_fullscreen_button {
+    display: none !important;
+}
+
+@media screen and (min-width: 992px) {
+    .ns_fullscreen_button {
+        display: flex !important;
+    }
 }