@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-01

package/src/digitv2/pages/employee/inboxsearchcomposer.scss

@@ -96,11 +96,11 @@
 
                 .links {
                     .inbox-links-icon {
-                        color: theme(colors.primary.main);
-                        fill: theme(colors.primary.main);
+                        color: theme("colors.primary.main");
+                        fill: theme("colors.primary.main");
 
                         path {
-                            fill: theme(colors.primary.main);
+                            fill: theme("colors.primary.main");
                         }
                     }
                 }
@@ -155,7 +155,7 @@
 
                 &.links {
                     height: 100%;
-                    color: theme(colors.primary.main);
+                    color: theme("colors.primary.main");
 
                     .inbox-search-links-component {
                         height: 100% !important;
@@ -226,16 +226,16 @@
             height: 100%;
             display: grid;
             grid-template-columns: 20% 1fr;
-            gap: theme(digitv2.spacers.spacer6);
+            gap: theme("digitv2.spacers.spacer6");
 
             .digit-section {
 
                 &.links,
                 &.search{
-                    background-color: theme(digitv2.lightTheme.paper-primary);
+                    background-color: theme("digitv2.lightTheme.paper-primary");
                     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
-                    border-radius: theme(digitv2.spacers.spacer1);
-                    padding: theme(digitv2.spacers.spacer6);
+                    border-radius: theme("digitv2.spacers.spacer1");
+                    padding: theme("digitv2.spacers.spacer6");
                     justify-content: flex-start;
                     display: flex;
                     align-items: center;
@@ -252,18 +252,18 @@
 
                     &.tab{
                         background: none !important;
-                        padding: theme(digitv2.spacers.spacer0);
+                        padding: theme("digitv2.spacers.spacer0");
                         box-shadow: none;
 
                         .digit-search-wrapper{
-                            padding: theme(digitv2.spacers.spacer6);
+                            padding: theme("digitv2.spacers.spacer6");
                         }
                     }
                 }
 
                 &.filter{
                     .digit-inbox-search-composer-filter-card-content{
-                        gap:theme(digitv2.spacers.spacer4)
+                        gap:theme("digitv2.spacers.spacer4")
                     }
                 }
 
@@ -273,10 +273,10 @@
                             display: flex;
                             align-items: center;
                             justify-content: flex-end;
-                            gap: theme(digitv2.spacers.spacer6);
+                            gap: theme("digitv2.spacers.spacer6");
 
                             &.add-margin{
-                                margin-top:theme(digitv2.spacers.spacer6);
+                                margin-top:theme("digitv2.spacers.spacer6");
                             }
 
                             &.inbox {
@@ -305,9 +305,9 @@
 }
 
 .digit-inbox-search-composer-header {
-    @extend .typography.heading-xl;
-    color: theme(digitv2.lightTheme.primary-2);
-    margin-bottom: theme(digitv2.spacers.spacer6);
+    @include typography-heading-xl;
+    color: theme("digitv2.lightTheme.primary-2");
+    margin-bottom: theme("digitv2.spacers.spacer6");
     line-height: normal;
 }
 
@@ -318,45 +318,45 @@
     justify-content: space-between;
 
     .digit-inbox-search-composer-action{
-        margin-bottom: theme(digitv2.spacers.spacer6);
+        margin-bottom: theme("digitv2.spacers.spacer6");
     }
 }
 
 .digit-inbox-search-links-container {
     .digit-inbox-search-links-header {
         display: flex;
-        gap: theme(digitv2.spacers.spacer2);
+        gap: theme("digitv2.spacers.spacer2");
         align-items: center;
-        margin-bottom: theme(digitv2.spacers.spacer6);
+        margin-bottom: theme("digitv2.spacers.spacer6");
 
         .digit-inbox-search-links-header-logo {
-            width: theme(digitv2.spacers.spacer8);
-            height: theme(digitv2.spacers.spacer8);
+            width: theme("digitv2.spacers.spacer8");
+            height: theme("digitv2.spacers.spacer8");
         }
 
         .digit-inbox-search-links-header-text {
-            @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);
+            @include 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);
+                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);
+                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);
+                font-size: theme("digitv2.fontSize.heading-m.desktop");
             }
 
-            color:theme(digitv2.lightTheme.primary-2);
+            color:theme("digitv2.lightTheme.primary-2");
             line-height: normal;
         }
     }
@@ -364,28 +364,28 @@
     .digit-inbox-search-links-contents {
         display: flex;
         flex-direction: column;
-        gap: theme(digitv2.spacers.spacer4);
+        gap: theme("digitv2.spacers.spacer4");
 
         a {
-            color: theme(digitv2.lightTheme.primary-1) !important;
+            color: theme("digitv2.lightTheme.primary-1") !important;
         }
 
         .digit-inbox-search-link {
-            @extend .typography.link-L;
-            color: theme(digitv2.lightTheme.primary-1);
+            @include typography-link-L;
+            color: theme("digitv2.lightTheme.primary-1");
         }
     }
 }
 
 .digit-inbox-search-composer-label-pair {
-    margin-bottom: theme(digitv2.spacers.spacer0);
+    margin-bottom: theme("digitv2.spacers.spacer0");
 }
 
 .digit-search-wrapper {
     .digit-search-field-wrapper {
         display: grid;
-        row-gap: theme(digitv2.spacers.spacer6);
-        column-gap: theme(digitv2.spacers.spacer4);
+        row-gap: theme("digitv2.spacers.spacer6");
+        column-gap: theme("digitv2.spacers.spacer4");
         grid-template-columns: repeat(3, 1fr);
 
         &.inbox {
@@ -432,7 +432,7 @@
 .digit-custom-row-wrapper{
     display: flex;
     flex-direction: column;
-    gap: theme(digitv2.spacers.spacer6);
+    gap: theme("digitv2.spacers.spacer6");
 }
 
 .footer-pagination-content {
@@ -455,31 +455,31 @@
         justify-content: space-between;
 
         .digit-results-card-heading {
-            color: theme(digitv2.lightTheme.primary-2);
-            font-family: theme(digitv2.fontFamily.sans);
-            font-style: theme(digitv2.fontStyle.normal);
-            font-weight: theme(digitv2.fontWeight.bold);
-            line-height: theme(digitv2.lineHeight.lineheight1);
+            color: theme("digitv2.lightTheme.primary-2");
+            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);
+                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);
+                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);
+                font-size: theme("digitv2.fontSize.heading-m.desktop");
             }
         }
 
         .digit-results-card-tags {
             display: flex;
-            gap: theme(digitv2.spacers.spacer4);
+            gap: theme("digitv2.spacers.spacer4");
         }
     }
 }
@@ -493,7 +493,7 @@
             justify-content: center;
 
             svg {
-                margin-left: theme(digitv2.spacers.spacer0);
+                margin-left: theme("digitv2.spacers.spacer0");
             }
         }
     }

package/src/digitv2/pages/employee/index.scss

@@ -1,4 +1,4 @@
-@import url("./workbench.scss");
-@import url("./boundaryFilter.scss");
-@import url("./inboxsearchcomposer.scss");
-@import url("./reactdatatable.scss");
+@import "./workbench.scss";
+@import "./boundaryFilter.scss";
+@import "./inboxsearchcomposer.scss";
+@import "./reactdatatable.scss";

package/src/digitv2/pages/employee/reactdatatable.scss

@@ -29,14 +29,14 @@
 .rdt_TableRow {
     &.selectedRow {
         background-color: #FBEEE8 !important;
-        border-bottom-color: theme(digitv2.lightTheme.generic-divider) !important;
+        border-bottom-color: theme("digitv2.lightTheme.generic-divider") !important;
     }
 }
 
 .rdt_TableCol_Sortable {
     display: flex;
     align-items: center;
-    gap: theme(digitv2.spacers.spacer1);
+    gap: theme("digitv2.spacers.spacer1");
 
     &:hover {
         opacity: 1 !important;
@@ -54,7 +54,7 @@
 }
 
 .rdt_TableCol {
-    border-radius: theme(digitv2.spacers.spacer0) !important;
+    border-radius: theme("digitv2.spacers.spacer0") !important;
 
     &:last-of-type {
         border-left: none !important;
@@ -62,7 +62,7 @@
 }
 
 .rdt_TableCol {
-    border-radius: theme(digitv2.spacers.spacer0) !important;
+    border-radius: theme("digitv2.spacers.spacer0") !important;
 
     &:last-of-type {
         border-left: none !important;
@@ -86,33 +86,33 @@
 }
 
 .digit-data-table::-webkit-scrollbar-track {
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    background-color: theme("digitv2.lightTheme.generic-divider");
     border-radius: 0.563rem;
 }
 
 .digit-data-table::-webkit-scrollbar-thumb {
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    background-color: theme("digitv2.lightTheme.generic-divider");
     border-radius: 0.563rem;
 }
 
 .digit-data-table::-webkit-scrollbar {
-    width: theme(digitv2.spacers.spacer2);
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    width: theme("digitv2.spacers.spacer2");
+    background-color: theme("digitv2.lightTheme.generic-divider");
 }
 
 .digit-data-table::-webkit-scrollbar:horizontal {
-    height: theme(digitv2.spacers.spacer2);
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    height: theme("digitv2.spacers.spacer2");
+    background-color: theme("digitv2.lightTheme.generic-divider");
 }
 
 .digit-data-table-select-checkbox {
-    margin-bottom: theme(digitv2.spacers.spacer0);
+    margin-bottom: theme("digitv2.spacers.spacer0");
 }
 
 .rdt_Pagination {
     margin-top: -1rem;
     border: 0.063rem solid #d6d5d4;
-    border-top: theme(digitv2.spacers.spacer0);
+    border-top: theme("digitv2.spacers.spacer0");
 }
 
 
@@ -126,7 +126,7 @@
 
 .digit-dataTable-actions-container{
     display: flex;
-    gap:theme(digitv2.spacers.spacer2);
+    gap:theme("digitv2.spacers.spacer2");
     align-items: center;
     flex-wrap: wrap;
 }

package/src/digitv2/pages/employee/workbench.scss

@@ -1,8 +1,9 @@
-@import url("../../index.scss");
+// @import "../../index.scss";
+@import "../../typography.scss";
 
 .bread-crumb.workbench-bredcrumb{
 a{
-  color: theme(digitv2.lightTheme.primary-1);
+  color: theme("digitv2.lightTheme.primary-1");
 }
 }
 .workbench{
@@ -10,9 +11,9 @@ a{
   display: inherit;
   padding-top: 1.5rem;
   .digit-form-composer-sub-header {
-    @extend .typography.text-heading-m;
+    @include typography-text-heading-m;
     padding-left: 1rem;
-    @media (max-width: theme(digitv2.screens.mobile)) {
+    @media (max-width: theme("digitv2.screens.mobile")) {
       padding-left: 0;
     }
   }
@@ -30,7 +31,7 @@ a{
           display: flex;
           padding: 1em 0 0 1em;
 
-          @media (max-width: theme(digitv2.screens.mobile)) {
+          @media (max-width: theme("digitv2.screens.mobile")) {
             flex-direction: column;
           }
 
@@ -71,13 +72,13 @@ a{
             display: inline-flex;
             /* align-self: center; */
             line-height: 3rem;
-            @extend .typography.text-heading-s;
+            @include typography-text-heading-s;
             /* web view*/
             @apply w-1/3;
 
             /* tablet view*/
 
-            @media (max-width: theme(digitv2.screens.tablet)) {
+            @media (max-width: theme("digitv2.screens.tablet")) {
               max-width: 11rem;
               margin-right: 1.5rem;
 
@@ -85,7 +86,7 @@ a{
 
             /* mobile view*/
 
-            @media (max-width: theme(digitv2.screens.mobile)) {
+            @media (max-width: theme("digitv2.screens.mobile")) {
               /*max-width: 10.2rem;*/
               @apply w-full;
 
@@ -96,7 +97,7 @@ a{
           .all-input-field-wrapper {
 
             @apply w-3/5;
-            @media (max-width: theme(digitv2.screens.mobile)) {
+            @media (max-width: theme("digitv2.screens.mobile")) {
               @apply w-full;
             }
 
@@ -111,7 +112,7 @@ a{
               margin-bottom: 1rem;
               /* tablet view*/
 
-              @media (max-width: theme(digitv2.screens.tablet)) {
+              @media (max-width: theme("digitv2.screens.tablet")) {
                 max-width: 27.5rem;
                 min-width: 12.5rem;
 
@@ -119,7 +120,7 @@ a{
 
               /* mobile view*/
 
-              @media (max-width: theme(digitv2.screens.mobile)) {
+              @media (max-width: theme("digitv2.screens.mobile")) {
                 max-width: 20.5rem;
                 min-width: 9.5rem;
                 @apply w-full;
@@ -142,7 +143,7 @@ a{
                 }
 
                 .digit__control--is-focused {
-                  border-color: theme(digitv2.lightTheme.primary-1) !important;
+                  border-color: theme("digitv2.lightTheme.primary-1") !important;
                   box-shadow: none;
                   box-sizing: unset;
                   @apply outline-none;
@@ -158,10 +159,10 @@ a{
                 }
 
                 .digit__control:focus {
-                  border-color: theme(digitv2.lightTheme.primary-1);
+                  border-color: theme("digitv2.lightTheme.primary-1");
 
                   .digit__value-container:focus {
-                    border-color: theme(digitv2.lightTheme.primary-1);
+                    border-color: theme("digitv2.lightTheme.primary-1");
 
                   }
                 }
@@ -169,20 +170,20 @@ a{
 
               &.form-select:focus {
                 @apply outline-none;
-                border-color: theme(digitv2.lightTheme.primary-1);
+                border-color: theme("digitv2.lightTheme.primary-1");
 
               }
             }
 
             .form-control:read-only {
-              background-color: theme(digitv2.lightTheme.generic-background);
-              color: theme(digitv2.lightTheme.text-secondary);
+              background-color: theme("digitv2.lightTheme.generic-background");
+              color: theme("digitv2.lightTheme.text-secondary");
             }
 
             .form-control:focus {
 
               @apply outline-none;
-              border-color: theme(digitv2.lightTheme.primary-1);
+              border-color: theme("digitv2.lightTheme.primary-1");
             }
 
             textarea.form-control {
@@ -208,7 +209,7 @@ a{
               }
 
               .custom-checkbox-label {
-                @extend .typography.text-body-s;
+                @include typography-text-body-s;
                 @apply pl-sm;
               }
             }
@@ -236,7 +237,7 @@ a{
                 }
          
                 input[type="checkbox"]#digit_root_active {
-                  accent-color: theme(digitv2.lightTheme.primary-1);
+                  accent-color: theme("digitv2.lightTheme.primary-1");
                 }
 
                 input:checked,
@@ -364,11 +365,11 @@ a{
                 .array-remove-button {
                   cursor: pointer;
                   background-color: inherit !important;
-                  @media (max-width: theme(digitv2.screens.mobile)) {
+                  @media (max-width: theme("digitv2.screens.mobile")) {
                     padding:0px;
                   }  
                   h2{
-                    @media (max-width: theme(digitv2.screens.mobile)) {
+                    @media (max-width: theme("digitv2.screens.mobile")) {
                         display: none;
                     }
                   }
@@ -395,7 +396,7 @@ a{
               height: 1.7em;
               margin-top: 0.5rem;
 
-              @media (max-width: theme(digitv2.screens.mobile)) {
+              @media (max-width: theme("digitv2.screens.mobile")) {
                 height: auto;
                 width: 100%;
               }
@@ -533,13 +534,13 @@ a{
   width: 100%;
   display: flex;
   padding-top: 2.1rem;
-  @media (max-width: theme(digitv2.screens.mobile)) {
+  @media (max-width: theme("digitv2.screens.mobile")) {
     flex-direction: column; 
  }
  .employee-select-wrap.form-field{
   @apply w-1/4;
   margin-right:1rem ;
-  @media (max-width: theme(digitv2.screens.mobile)) {
+  @media (max-width: theme("digitv2.screens.mobile")) {
     @apply w-full;
  }
   }
@@ -549,7 +550,7 @@ a{
   padding-left:0.8rem ;
   padding-right:0.8rem ;
   &-row-mdms:hover{
-    background-color:  theme(digitv2.lightTheme.primary-bg); /* Change this to the desired hover color */
+    background-color:  theme("digitv2.lightTheme.primary-bg"); /* Change this to the desired hover color */
     cursor: pointer;
   }
 }
@@ -573,11 +574,11 @@ a{
     text-decoration: none;
     .browse-text {
       text-decoration: none;
-      color: theme(digitv2.lightTheme.primary-1); 
+      color: theme("digitv2.lightTheme.primary-1"); 
       transition: color 0.3s;
     }
     .browse-text:hover {
-        color: theme(digitv2.lightTheme.primary-1);
+        color: theme("digitv2.lightTheme.primary-1");
         text-decoration: underline; 
         cursor: pointer;
     }