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

package/src/digitv2/index.scss

@@ -1,331 +1,333 @@
-@import url("./components/accordionV2.scss");
-@import url("./components/backLinkV2.scss");
-@import url("./components/bodyContainerV2.scss");
-@import url("./components/bottomSheetV2.scss");
-@import url("./components/breadcrumbV2.scss");
-@import url("./components/buttonsV2.scss");
-@import url("./components/cardlabelV2.scss");
-@import url("./components/cardbasedoptionsV2.scss");
-@import url("./components/cardV2.scss");
-@import url("./components/checkboxV2.scss");
-@import url("./components/dividerV2.scss");
-@import url("./components/errorMessageV2.scss");
-@import url("./components/fieldV1.scss");
-@import url("./components/FormComposerV2.scss");
-@import url("./components/infobuttonV2.scss");
-@import url("./components/alertCardV2.scss"); 
-@import url("./components/labelFieldPairV2.scss");
-@import url("./components/mobileNumberV2.scss");
-@import url("./components/multiSelectDropdownV2.scss");
-@import url("./components/panelCardV2.scss");
-@import url("./components/panelV2.scss");
-@import url("./components/popUpV2.scss");
-@import url("./components/radiobtnV2.scss");
-@import url("./components/chipV2.scss");
-@import url("./components/selectDropdownV2.scss");
-@import url("./components/stepperV2.scss");
-@import url("./components/switchV2.scss");
-@import url("./components/selectionTagV2.scss");
-@import url("./components/textareaV2.scss");
-@import url("./components/textblockV2.scss");
-@import url("./components/textInputV2.scss");
-@import url("./components/timelineV2.scss");
-@import url("./components/toastV2.scss");
-@import url("./components/toggleV2.scss");
-@import url("./components/treeSelectV2.scss");
-@import url("./components/fileUploadV2.scss");
-@import url("./components/summaryCardFieldPairV2.scss");
-@import url("./components/footerV2.scss");
-@import url("./components/headerdropdownV2.scss");
-@import url("./components/headerV2.scss");
-@import url("./components/tabV2.scss");
-@import url("./components/sidenavV2.scss");
-@import url("./components/hamburgerV2.scss");
-@import url("./components/tooltipwrapperV2.scss");
-@import url("./components/tagV2.scss");
-@import url("./components/landingpagecardV2.scss");
-@import url("./components/menuCardV2.scss");
-@import url("./components/otpInputV2.scss");
-@import url("./components/tableV2.scss");
-@import url("./components/sidePanelV2.scss");
-@import url("./components/metricCardV2.scss");
-@import url("./components/formCardV2.scss");
-@import url("./components/filterCardV2.scss");
-@import url("./components/summaryCardV2.scss");
-@import url("./components/loaderV2.scss");
+@import "./components/accordionV2.scss";
+@import "./components/backLinkV2.scss";
+@import "./components/dividerV2.scss";
+@import "./components/infobuttonV2.scss";
+@import "./components/chipV2.scss";
+@import "./components/checkboxV2.scss";
+@import "./components/radiobtnV2.scss";
+@import "./components/switchV2.scss";
+@import "./components/toggleV2.scss";
+
+@import "./components/buttonsV2.scss";
+@import "./components/bodyContainerV2.scss";
+@import "./components/bottomSheetV2.scss";
+@import "./components/breadcrumbV2.scss";
+@import "./components/cardlabelV2.scss";
+@import "./components/cardbasedoptionsV2.scss";
+@import "./components/cardV2.scss";
+@import "./components/errorMessageV2.scss";
+@import "./components/fieldV1.scss";
+@import "./components/FormComposerV2.scss";
+@import "./components/alertCardV2.scss"; 
+@import "./components/labelFieldPairV2.scss";
+@import "./components/mobileNumberV2.scss";
+@import "./components/multiSelectDropdownV2.scss";
+@import "./components/panelCardV2.scss";
+@import "./components/panelV2.scss";
+@import "./components/popUpV2.scss";
+@import "./components/selectDropdownV2.scss";
+@import "./components/stepperV2.scss";
+@import "./components/selectionTagV2.scss";
+@import "./components/textareaV2.scss";
+@import "./components/textblockV2.scss";
+@import "./components/textInputV2.scss";
+@import "./components/timelineV2.scss";
+@import "./components/toastV2.scss";
+@import "./components/treeSelectV2.scss";
+@import "./components/fileUploadV2.scss";
+@import "./components/summaryCardFieldPairV2.scss";
+@import "./components/footerV2.scss";
+@import "./components/headerdropdownV2.scss";
+@import "./components/headerV2.scss";
+@import "./components/tabV2.scss";
+@import "./components/sidenavV2.scss";
+@import "./components/hamburgerV2.scss";
+@import "./components/tooltipwrapperV2.scss";
+
+@import "./components/tagV2.scss";
+@import "./components/landingpagecardV2.scss";
+@import "./components/menuCardV2.scss";
+@import "./components/otpInputV2.scss";
+@import "./components/tableV2.scss";
+@import "./components/sidePanelV2.scss";
+@import "./components/metricCardV2.scss";
+@import "./components/formCardV2.scss";
+@import "./components/filterCardV2.scss";
+@import "./components/summaryCardV2.scss";
+@import "./components/loaderV2.scss";
 
 /* pages */
-@import url("./pages/employee/index.scss");
+@import "./pages/employee/index.scss";
 
 /* important to be remove after fixing the components */
 .light {
   &-primary {
-    color: theme(digitv2.lightTheme.primary-1) !important;
+    color: theme("digitv2.lightTheme.primary-1") !important;
 
     &-button {
-      background-color: theme(digitv2.lightTheme.primary-1);
+      background-color: theme("digitv2.lightTheme.primary-1");
     }
 
     &-bg {
-      background-color: theme(digitv2.lightTheme.primary-bg);
+      background-color: theme("digitv2.lightTheme.primary-bg");
     }
   }
 
   &-text-color {
     &-primary {
-      color: theme(digitv2.lightTheme.text-primary);
+      color: theme("digitv2.lightTheme.text-primary");
     }
 
     &-secondary {
-      color: theme(digitv2.lightTheme.text-secondary);
+      color: theme("digitv2.lightTheme.text-secondary");
     }
 
     &-disabled {
-      color: theme(digitv2.lightTheme.text-disabled);
+      color: theme("digitv2.lightTheme.text-disabled");
     }
   }
 
   &-background {
-    background-color: theme(digitv2.lightTheme.generic-background);
+    background-color: theme("digitv2.lightTheme.generic-background");
   }
 
   &-paper {
     &-primary {
-      background-color: theme(digitv2.lightTheme.paper-primary) !important;
+      background-color: theme("digitv2.lightTheme.paper-primary") !important;
 
       &-color {
-        color: theme(digitv2.lightTheme.paper-primary) !important;
+        color: theme("digitv2.lightTheme.paper-primary") !important;
       }
     }
 
     &-secondary {
-      background-color: theme(digitv2.lightTheme.paper-secondary);
+      background-color: theme("digitv2.lightTheme.paper-secondary");
     }
     &-border {
       border: 0.5px solid;
       border-radius: 0.5rem;
-      border-color: theme(digitv2.lightTheme.generic-background);
+      border-color: theme("digitv2.lightTheme.generic-background");
     }
 
     &-border {
       border-radius: 4px;
       border-style: solid;
       border-width: 1px;
-      border-color: theme(digitv2.lightTheme.generic-divider);
+      border-color: theme("digitv2.lightTheme.generic-divider");
     }
   }
 
   &-divider {
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    background-color: theme("digitv2.lightTheme.generic-divider");
   }
 
   &-header-sidenav {
-    color: theme(digitv2.lightTheme.primary-2);
+    color: theme("digitv2.lightTheme.primary-2");
   }
 
   &-input-border {
-    border-color: theme(digitv2.lightTheme.generic-inputborder);
+    border-color: theme("digitv2.lightTheme.generic-inputborder");
   }
 }
 
 .alert {
   &-error {
-    color: theme(digitv2.lightTheme.alert-error);
+    color: theme("digitv2.lightTheme.alert-error");
 
     &-bg {
-      background-color: theme(digitv2.lightTheme.alert-errorbg);
+      background-color: theme("digitv2.lightTheme.alert-errorbg");
     }
 
     &-border {
-      border-color: theme(digitv2.lightTheme.alert-error) !important;
+      border-color: theme("digitv2.lightTheme.alert-error") !important;
     }
   }
 
   &-success {
-    color: theme(digitv2.lightTheme.alert-success);
+    color: theme("digitv2.lightTheme.alert-success");
 
     &-bg {
-      background-color: theme(digitv2.lightTheme.alert-successbg);
+      background-color: theme("digitv2.lightTheme.alert-successbg");
     }
   }
 
   &-info {
-    color: theme(digitv2.alert.info);
+    color: theme("digitv2.alert.info");
 
     &-bg {
-      background-color: theme(digitv2.alert.info-bg);
+      background-color: theme("digitv2.alert.info-bg");
     }
   }
 }
 
 .chart {
   &-item-1 {
-    color: theme(digitv2.chart.chart-1);
+    color: theme("digitv2.chart.chart-1");
   }
 
   &-item-1-gradient {
-    color: theme(digitv2.chart.chart-1-gradient);
+    color: theme("digitv2.chart.chart-1-gradient");
   }
 
   &-item-2 {
-    color: theme(digitv2.chart.chart-2);
+    color: theme("digitv2.chart.chart-2");
   }
 
   &-item-2-gradient {
-    color: theme(digitv2.chart.chart-2-gradient);
+    color: theme("digitv2.chart.chart-2-gradient");
   }
 
   &-item-3 {
-    color: theme(digitv2.chart.chart-3);
+    color: theme("digitv2.chart.chart-3");
   }
 
   &-item-4 {
-    color: theme(digitv2.chart.chart-4);
+    color: theme("digitv2.chart.chart-4");
   }
 
   &-item-5 {
-    color: theme(digitv2.chart.chart-5);
+    color: theme("digitv2.chart.chart-5");
   }
 }
 
 .color-constants-story{
 
   &.primary-1{
-    background-color: theme(digitv2.lightTheme.primary-1);
+    background-color: theme("digitv2.lightTheme.primary-1");
   }
   &.primary-bg{
-    background-color: theme(digitv2.lightTheme.primary-bg);
+    background-color: theme("digitv2.lightTheme.primary-bg");
   }
   &.primary-2{
-    background-color: theme(digitv2.lightTheme.primary-2);
+    background-color: theme("digitv2.lightTheme.primary-2");
   }
   &.text-primary{
-    background-color: theme(digitv2.lightTheme.text-primary);
+    background-color: theme("digitv2.lightTheme.text-primary");
   }
   &.text-secondary{
-    background-color: theme(digitv2.lightTheme.text-secondary);
+    background-color: theme("digitv2.lightTheme.text-secondary");
   }
   &.text-disabled{
-    background-color: theme(digitv2.lightTheme.text-disabled);
+    background-color: theme("digitv2.lightTheme.text-disabled");
   }
   &.alert-error{
-    background-color: theme(digitv2.lightTheme.alert-error);
+    background-color: theme("digitv2.lightTheme.alert-error");
   }
   &.alert-errorbg{
-    background-color: theme(digitv2.lightTheme.alert-errorbg);
+    background-color: theme("digitv2.lightTheme.alert-errorbg");
   }
   &.alert-success{
-    background-color: theme(digitv2.lightTheme.alert-success);
+    background-color: theme("digitv2.lightTheme.alert-success");
   }
   &.alert-successbg{
-    background-color: theme(digitv2.lightTheme.alert-successbg);
+    background-color: theme("digitv2.lightTheme.alert-successbg");
   }
   &.alert-info{
-    background-color: theme(digitv2.lightTheme.alert-info);
+    background-color: theme("digitv2.lightTheme.alert-info");
   }
   &.alert-infobg{
-    background-color: theme(digitv2.lightTheme.alert-infobg);
+    background-color: theme("digitv2.lightTheme.alert-infobg");
   }
   &.alert-warning{
-    background-color: theme(digitv2.lightTheme.alert-warning);
+    background-color: theme("digitv2.lightTheme.alert-warning");
   }
   &.alert-warningbg{
-    background-color: theme(digitv2.lightTheme.alert-warning-bg);
+    background-color: theme("digitv2.lightTheme.alert-warning-bg");
   }
   &.generic-background{
-    background-color: theme(digitv2.lightTheme.generic-background);
+    background-color: theme("digitv2.lightTheme.generic-background");
   }
   &.generic-divider{
-    background-color: theme(digitv2.lightTheme.generic-divider);
+    background-color: theme("digitv2.lightTheme.generic-divider");
   }
   &.generic-inputborder{
-    background-color: theme(digitv2.lightTheme.generic-inputborder);
+    background-color: theme("digitv2.lightTheme.generic-inputborder");
   }
   &.paper-primary{
-    background-color: theme(digitv2.lightTheme.paper-primary);
+    background-color: theme("digitv2.lightTheme.paper-primary");
   }
   &.paper-secondary{
-    background-color: theme(digitv2.lightTheme.paper-secondary);
+    background-color: theme("digitv2.lightTheme.paper-secondary");
   }
 }
 
 .typography-story{
   &.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);
+    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");
     }
   }
 
   &.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);
+    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);
+      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);
+      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);
+      font-size: theme("digitv2.fontSize.heading-s.desktop");
     }
   }
 
   &.body-s {
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      font-size: theme(digitv2.fontSize.body-s.mobile);
-      font-family: theme(digitv2.fontFamily.sans);
-      font-style: theme(digitv2.fontStyle.normal);
-      font-weight: theme(digitv2.fontWeight.regular);
-      line-height: theme(digitv2.lineHeight.lineheight2);
+      font-size: theme("digitv2.fontSize.body-s.mobile");
+      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 (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
-      font-size: theme(digitv2.fontSize.body-s.tablet);
-      font-family: theme(digitv2.fontFamily.sans);
-      font-style: theme(digitv2.fontStyle.normal);
-      font-weight: theme(digitv2.fontWeight.regular);
-      line-height: theme(digitv2.lineHeight.lineheight2);
+      font-size: theme("digitv2.fontSize.body-s.tablet");
+      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 (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme(digitv2.fontSize.body-s.desktop);
-      font-family: theme(digitv2.fontFamily.sans);
-      font-style: theme(digitv2.fontStyle.normal);
-      font-weight: theme(digitv2.fontWeight.regular);
-      line-height: theme(digitv2.lineHeight.lineheight2);
+      font-size: theme("digitv2.fontSize.body-s.desktop");
+      font-family: theme("digitv2.fontFamily.sans");
+      font-style: theme("digitv2.fontStyle.normal");
+      font-weight: theme("digitv2.fontWeight.regular");
+      line-height: theme("digitv2.lineHeight.lineheight2");
     }
   }
 }
 
 .sb-main-padded{
   &.sb-show-main{
-    background-color: theme(digitv2.lightTheme.paper-primary);
+    background-color: theme("digitv2.lightTheme.paper-primary");
   }
 }

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

@@ -0,0 +1,63 @@
+.selecting-boundary-div {
+    padding-top: 0.5rem;
+   
+    gap:1.5rem;
+    .label-field-pair {
+        margin-bottom: 1.5rem;
+    }
+
+}
+
+
+
+.selecting-boundary-div.horizontal-layout {
+    display: grid; 
+    grid-template-columns: repeat(3, 1fr); 
+    align-items: flex-start;
+  }
+
+
+.digit-card-label.boundary-selection-label{
+    font-family: theme("digitv2.fontFamily.sans");
+    font-style: theme("digitv2.fontStyle.normal");
+    font-weight: theme("digitv2.fontWeight.bold");
+
+    @media (max-width: 30rem) {
+        /* Media query for mobile */
+        font-size: theme("digitv2.fontSize.heading-s.mobile");
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        /* Media query for tablets */
+        font-size: theme("digitv2.fontSize.heading-s.tablet");
+    }
+
+    @media (min-width: 48rem) {
+        /* Media query for desktop */
+        font-size: theme("digitv2.fontSize.heading-s.desktop");
+    }
+
+    color: theme("digitv2.lightTheme.text-primary");
+    width:30%;
+} 
+.selecting-boundary-div.horizontal-layout .boundary-item {
+    display: flex;
+    justify-content: center;
+ }
+
+ .digit-field-full{
+    width:100%;
+ }
+
+ .digit-label-field-pair.boundary-item.vertical{
+    margin-bottom: 0rem;
+ } 
+ 
+ .padding-dropdown{
+    padding-bottom: 1.6rem;
+ }
+
+ .filter-card.filter-card-vertical .selecting-boundary-div {
+    max-width: 65%;
+  }
+