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

package/src/digitv2/components/viewCardFieldPairV2.scss

@@ -0,0 +1,45 @@
+.digit-viewcard-field-pair{
+    @apply w-full flex-col;
+    display: flex;
+    height: fit-content;
+    background-color: transparent;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-viewcard-label{
+        @extend .typography.heading-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        word-break: break-word;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    .digit-viewcard-value{
+        @extend .typography.body-s;
+        @apply whitespace-pre-wrap break-words w-full;
+        color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    &.inline{
+        flex-direction: row;
+
+        @media (min-width: 48rem) {
+            gap: theme(digitv2.spacers.spacer6);
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            gap: theme(digitv2.spacers.spacer5);
+        }
+    
+        @media (max-width: 30rem) {
+            gap: theme(digitv2.spacers.spacer4);
+        }
+
+        .digit-viewcard-label{
+            width: 20%;
+        }
+
+        .digit-viewcard-value{
+            width: 80%;
+        }
+
+    }
+}

package/src/digitv2/index.scss

@@ -1,198 +1,170 @@
-@import url("./components/actionbarV2.scss");
-@import url("./components/actionLinkV2.scss");
-@import url("./components/appContainerV2.scss");
-@import url("./components/backButtonV2.scss");
-@import url("./components/bannerV2.scss");
-@import url("./components/bodyContainerV2.scss");
-@import url("./components/breadCrumbV2.scss");
-@import url("./components/breakLineV2.scss");
-@import url("./components/buttonsV2.scss");
-@import url("./components/cardBasedOptionsV2.scss");
-@import url("./components/cardLabelV2.scss");
-@import url("./components/checkboxV2.scss");
-@import url("./components/checkpointV2.scss");
-@import url("./components/CitizenHomeCardV2.scss");
-@import url("./components/collapseAndExpandGroups.scss");
-@import url("./components/dateWrapV2.scss");
-@import url("./components/detailsCardV2.scss");
-@import url("./components/displayPhotosV2.scss");
-@import url("./components/ErrorMessage.scss");
-@import url("./components/footerV2.scss");
-@import url("./components/FormComposerV2.scss");
-@import url("./components/headerV2.scss");
-@import url("./components/headerBarV2.scss");
-@import url("./components/infoCardV2.scss");
-@import url("./components/keynoteV2.scss"); 
-@import url("./components/labelFieldPairV2.scss");
-@import url("./components/loaderV2.scss");
-@import url("./components/mobileNumberV2.scss");
-@import url("./components/modalV2.scss");
-@import url("./components/multiSelectDropdownV2.scss");
-@import url("./components/multiUploadWrapperV2.scss");
-@import url("./components/navbarV2.scss");
-@import url("./components/noresultsfoundV2.scss");
-@import url("./components/otpInputV2.scss");
-@import url("./components/PageBasedInputV2.scss");
-@import url("./components/paragraphV2.scss");
-@import url("./components/popUpV2.scss");
-@import url("./components/radiobtnV2.scss");
-@import url("./components/ratingV2.scss");
-@import url("./components/searchActionV2.scss");
-@import url("./components/searchFormV2.scss");
-@import url("./components/selectdropdownV2.scss");
-@import url("./components/tagV2.scss");
-@import url("./components/telephoneV2.scss");
-@import url("./components/textareaV2.scss");
-@import url("./components/textInputV2.scss");
-@import url("./components/toastV2.scss");
-@import url("./components/topbarV2.scss");
-@import url("./components/uploadFileV2.scss");
-@import url("./components/WhatsNewCardV2.scss");
-@import url("./components/fieldV1.scss");
-@import url("./components/toggle.scss");
-@import url("./components/toggleswitchV2.scss");
-@import url("./components/treeSelectV2.scss");
-@import url("./components/cardV2.scss");
-@import url("./components/searchcomponent.scss");
-@import url("./components/sidebarV2.scss");
-@import url("./components/stepper.scss");
-@import url("./components/timeline.scss");
-@import url("./components/infobuttons.scss");
-@import url("./components/uploader.scss");
-@import url("./components/textblock.scss");
-@import url("./components/panels.scss");
-@import url("./components/panelcard.scss");
-
-/* pages */
-@import url("./pages/employee/index.scss");
-
-/* important to be remove after fixing the components */
-.light {
-  &-primary {
-    color: theme(digitv2.lightTheme.primary-orange) !important;
-
-    &-button {
-      background-color: theme(digitv2.lightTheme.primary-orange);
-    }
-
-    &-bg {
-      background-color: theme(digitv2.lightTheme.primary-orangebg);
-    }
-  }
-
-  &-text-color {
-    &-primary {
-      color: theme(digitv2.lightTheme.text-primary);
-    }
-
-    &-secondary {
-      color: theme(digitv2.lightTheme.text-secondary);
-    }
-
-    &-disabled {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-  }
-
-  &-background {
-    background-color: theme(digitv2.lightTheme.generic-background);
-  }
-
-  &-paper {
-    &-primary {
-      background-color: theme(digitv2.lightTheme.paper-primary) !important;
-
-      &-color {
-        color: theme(digitv2.lightTheme.paper-primary) !important;
-      }
-    }
-
-    &-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 {
-      border-radius: 4px;
-      border-style: solid;
-      border-width: 1px;
-      border-color: theme(digitv2.lightTheme.generic-divider);
-    }
-  }
-
-  &-divider {
-    background-color: theme(digitv2.lightTheme.generic-divider);
-  }
-
-  &-header-sidenav {
-    color: theme(digitv2.lightTheme.primary-bluegray);
-  }
-
-  &-input-border {
-    border-color: theme(digitv2.lightTheme.generic-inputborder);
-  }
-}
-
-.alert {
-  &-error {
-    color: theme(digitv2.lightTheme.alert-error);
-
-    &-bg {
-      background-color: theme(digitv2.lightTheme.alert-errorbg);
-    }
-
-    &-border {
-      border-color: theme(digitv2.lightTheme.alert-error) !important;
-    }
-  }
-
-  &-success {
-    color: theme(digitv2.lightTheme.alert-success);
-
-    &-bg {
-      background-color: theme(digitv2.lightTheme.alert-successbg);
-    }
-  }
-
-  &-info {
-    color: theme(digitv2.alert.info);
-
-    &-bg {
-      background-color: theme(digitv2.alert.info-bg);
-    }
-  }
-}
-
-.chart {
-  &-item-1 {
-    color: theme(digitv2.chart.chart-1);
-  }
-
-  &-item-1-gradient {
-    color: theme(digitv2.chart.chart-1-gradient);
-  }
-
-  &-item-2 {
-    color: theme(digitv2.chart.chart-2);
-  }
-
-  &-item-2-gradient {
-    color: theme(digitv2.chart.chart-2-gradient);
-  }
-
-  &-item-3 {
-    color: theme(digitv2.chart.chart-3);
-  }
-
-  &-item-4 {
-    color: theme(digitv2.chart.chart-4);
-  }
-
-  &-item-5 {
-    color: theme(digitv2.chart.chart-5);
-  }
+@import url("./components/backLinkV2.scss");
+@import url("./components/bodyContainerV2.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/infoCardV2.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/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/uploaderV2.scss");
+@import url("./components/viewCardFieldPairV2.scss");
+@import url("./components/actionbarV2.scss");
+@import url("./components/headerdropdownV2.scss");
+@import url("./components/topbarV2.scss");
+
+/* pages */
+@import url("./pages/employee/index.scss");
+
+/* important to be remove after fixing the components */
+.light {
+  &-primary {
+    color: theme(digitv2.lightTheme.primary-orange) !important;
+
+    &-button {
+      background-color: theme(digitv2.lightTheme.primary-orange);
+    }
+
+    &-bg {
+      background-color: theme(digitv2.lightTheme.primary-orangebg);
+    }
+  }
+
+  &-text-color {
+    &-primary {
+      color: theme(digitv2.lightTheme.text-primary);
+    }
+
+    &-secondary {
+      color: theme(digitv2.lightTheme.text-secondary);
+    }
+
+    &-disabled {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &-background {
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+
+  &-paper {
+    &-primary {
+      background-color: theme(digitv2.lightTheme.paper-primary) !important;
+
+      &-color {
+        color: theme(digitv2.lightTheme.paper-primary) !important;
+      }
+    }
+
+    &-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 {
+      border-radius: 4px;
+      border-style: solid;
+      border-width: 1px;
+      border-color: theme(digitv2.lightTheme.generic-divider);
+    }
+  }
+
+  &-divider {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+  }
+
+  &-header-sidenav {
+    color: theme(digitv2.lightTheme.primary-bluegray);
+  }
+
+  &-input-border {
+    border-color: theme(digitv2.lightTheme.generic-inputborder);
+  }
+}
+
+.alert {
+  &-error {
+    color: theme(digitv2.lightTheme.alert-error);
+
+    &-bg {
+      background-color: theme(digitv2.lightTheme.alert-errorbg);
+    }
+
+    &-border {
+      border-color: theme(digitv2.lightTheme.alert-error) !important;
+    }
+  }
+
+  &-success {
+    color: theme(digitv2.lightTheme.alert-success);
+
+    &-bg {
+      background-color: theme(digitv2.lightTheme.alert-successbg);
+    }
+  }
+
+  &-info {
+    color: theme(digitv2.alert.info);
+
+    &-bg {
+      background-color: theme(digitv2.alert.info-bg);
+    }
+  }
+}
+
+.chart {
+  &-item-1 {
+    color: theme(digitv2.chart.chart-1);
+  }
+
+  &-item-1-gradient {
+    color: theme(digitv2.chart.chart-1-gradient);
+  }
+
+  &-item-2 {
+    color: theme(digitv2.chart.chart-2);
+  }
+
+  &-item-2-gradient {
+    color: theme(digitv2.chart.chart-2-gradient);
+  }
+
+  &-item-3 {
+    color: theme(digitv2.chart.chart-3);
+  }
+
+  &-item-4 {
+    color: theme(digitv2.chart.chart-4);
+  }
+
+  &-item-5 {
+    color: theme(digitv2.chart.chart-5);
+  }
 }

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

@@ -1 +1 @@
-@import url("./workbench.scss");
+@import url("./workbench.scss");