@egovernments/digit-ui-components-css 0.0.2-beta.7 → 0.2.0-beta.1

package/src/digitv2/components/tableV2.scss

@@ -0,0 +1,697 @@
+.digit-table-footer-wrapper{
+    display: flex;
+    flex-direction: column;
+}
+
+.digit-table-container {
+    overflow: auto;
+    width: 100%;
+    position: relative;
+    max-height: 100vh;
+    max-width: 100%;
+
+    &.withBorder {
+        border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    .digit-cursorPointer {
+        width: 100%;
+    }
+}
+
+.fixed-columns {
+    position: sticky;
+    overflow: hidden;
+    left: 0;
+    z-index: 2;
+    position: -webkit-sticky;
+    position: sticky;
+}
+
+.scrollable-columns {
+    flex: 1;
+    /*overflow-x: auto;*/
+    white-space: normal;
+    z-index: 1;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    overflow-x: auto;
+}
+
+th {
+    @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    color: theme(digitv2.lightTheme.primary-2);
+    background-color: theme(digitv2.lightTheme.generic-background);
+    padding: theme(digitv2.spacers.spacer4);
+    min-width: 9.375rem;    
+    word-wrap: break-word;
+    white-space: normal;
+    text-align: left;
+    width: fit-content;
+
+    &.withBorder {
+        border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.withColumnDivider {
+        border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.scrollable-columns.withHeaderDivider {
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: theme(digitv2.spacers.spacer4);
+            right: 0;
+            bottom: theme(digitv2.spacers.spacer4);
+            width: 0.063rem;
+            background-color: theme(digitv2.lightTheme.text-secondary);
+        }
+    }
+}
+
+thead th.withHeaderDivider:last-child::after {
+    display: none;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.hasDes{
+    th{
+        vertical-align: top;
+    }
+}
+td {
+    padding: theme(digitv2.spacers.spacer4);
+    word-wrap: break-word;
+    white-space: normal;
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+    text-align: left;
+    vertical-align: top;
+    width: fit-content;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+
+    &.numeric,
+    &.serialno{
+        text-align: right;
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
+
+    &.withRowDivider {
+        border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.withColumnDivider {
+        border-right: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.text,
+    &.textinput,
+    &.description,
+    &.multiselectdropdown,
+    &.dropdown,
+    &.custom,
+    &.checkbox,
+    &.tag,
+    &.switch{
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: 9.375rem
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: 12.5rem;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: 12.5rem;
+        }
+    }
+    &.serialno,
+    &.numeric {
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: theme(digitv2.spacers.spacer10);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: theme(digitv2.spacers.spacer10);;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: theme(digitv2.spacers.spacer10);;
+        }
+    }
+    &.button {
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            min-width: 9.375rem
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            min-width: 9.375rem;
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            min-width: 9.375rem;
+        }
+    }
+}
+
+tbody tr:last-child {
+    td {
+        border-bottom: none;
+    }
+}
+
+tbody tr:nth-child(even).withAlternateBg td{
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+}
+
+tbody tr.addHover{
+    cursor: pointer;
+}
+
+tbody tr.selected{
+    td{
+        background-color: theme(digitv2.lightTheme.primary-bg) !important;
+    }
+
+    td:first-child::before{
+        content: '';
+        position: absolute;
+        top: 0.062rem;
+        left: 0;
+        bottom: 0.063rem;
+        width: theme(digitv2.spacers.spacer1);
+        background: theme(digitv2.lightTheme.primary-1);
+        border-top-right-radius: theme(digitv2.spacers.spacer1);
+        border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+    }
+}
+
+tbody tr.addHover:hover td{
+    background-color: theme(digitv2.lightTheme.primary-bg) !important;
+}
+
+
+tfoot td {
+    @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
+    color: theme(digitv2.lightTheme.text-primary);
+    background-color: theme(digitv2.lightTheme.generic-background);
+    padding: theme(digitv2.spacers.spacer4);
+    text-align: center;
+    width: 100%;
+
+    &.withBorder {
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        border-top:none;
+    }
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.footer-pagination-container {
+    display: flex;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer2);
+    margin-left: auto;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer2);
+}
+
+.pagination-dropdown{
+    padding: theme(digitv2.spacers.spacer1);
+    outline: none;
+    min-width: 4rem;
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
+
+    option{
+        width: 100%;
+        text-align: center;
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.text-primary);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
+    }
+}
+
+
+.pagination button {
+    border: 0.063 solid theme(digitv2.lightTheme.generic-divider);
+    cursor: pointer;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+}
+
+.pagination button:disabled {
+    cursor: not-allowed;
+}
+
+.pagination span {
+    font-weight: normal;
+    margin: 0 10px;
+}
+
+tr th:last-child {
+    &.withColumnDivider {
+        border-right: none;
+    }
+}
+
+tr td:last-child {
+    &.withColumnDivider {
+        border-right: none;
+    }
+}
+
+.sticky-footer-content {
+    position: sticky;
+    display: flex;
+    z-index: 10;
+
+    &.scrollable{
+        overflow-x: auto;
+    }
+
+    td {
+        text-align: right;
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+        color: theme(digitv2.lightTheme.primary-2);
+        overflow-x: auto;
+    }
+}
+
+.sort-icon{
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+    cursor: pointer;
+}
+.footer-pagination-content{
+    display: flex;
+}
+
+.digit-table-footer{
+    max-width: 100%;
+    overflow-x: hidden !important;
+    width: 100%;
+    flex: 1;
+}
+.sticky-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+}
+
+.digit-table-card {
+
+    .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader.table-header {
+        color: theme(digitv2.lightTheme.text-primary)
+    }
+}
+
+.selected-state {
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+    text-align: left;
+    vertical-align: top;
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
+}
+
+.header-des-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .column-header{
+        @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap:theme(digitv2.spacers.spacer1);
+    }
+
+    .column-description {
+        color: theme(digitv2.lightTheme.text-secondary);
+        white-space: nowrap;
+        @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
+    }
+}
+
+.table-header-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer2);
+
+    .header-filter-wrapper{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        svg{
+            flex-shrink: 0;
+            margin-left:auto;
+            cursor: pointer;
+        }
+
+        .table-header {
+            @extend .typography.heading-m;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-m.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-m.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-m.desktop);
+            }
+            color: theme(digitv2.lightTheme.text-primary);
+            line-height: normal;
+        }
+
+
+    }
+
+    .table-description {
+        @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            /* Media query for tablets */
+            font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
+
+        color: theme(digitv2.lightTheme.generic-inputborder);
+    }
+}
+
+.sticker-footer-td::-webkit-scrollbar {
+    height: 0.5rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.sticker-footer-td::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.sticker-footer-td::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar {
+    height: 0.5rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-table-container::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar:vertical {
+    width: 0rem;
+    background-color: transparent;
+}
+
+.digit-table-container::-webkit-scrollbar-track:vertical {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.digit-table-container::-webkit-scrollbar-thumb:vertical {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.table-checkbox {
+    margin: theme(digitv2.spacers.spacer0);
+
+    input {
+        margin: theme(digitv2.spacers.spacer0);
+    }
+
+    p {
+        margin: theme(digitv2.spacers.spacer0);
+    }
+}
+
+
+.selection-state-wrapper{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: theme(digitv2.spacers.spacer2);
+
+    .svg-state-wrapper{
+    
+        display: flex;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+
+        svg{
+            flex-shrink: 0
+        }
+
+        .selected-state{
+            @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+
+}
+
+.digit-table-container{
+    .digit-table-footer {
+        position: sticky; 
+        bottom: 0; 
+        width: 100%;
+        z-index: 10;
+      }
+}